diff --git a/packages/react-core/src/components/LoginPage/LoginMainFooterLinksItem.tsx b/packages/react-core/src/components/LoginPage/LoginMainFooterLinksItem.tsx index 00db114cea9..be001ce277a 100644 --- a/packages/react-core/src/components/LoginPage/LoginMainFooterLinksItem.tsx +++ b/packages/react-core/src/components/LoginPage/LoginMainFooterLinksItem.tsx @@ -5,35 +5,17 @@ import { css } from '@patternfly/react-styles'; export interface LoginMainFooterLinksItemProps extends React.HTMLProps { /** Content rendered inside the footer link item */ children?: React.ReactNode; - /** HREF for footer link item */ - href?: string; - /** Target for footer link item */ - target?: string; /** Additional classes added to the footer link item */ className?: string; - /** Component used to render the footer link item */ - linkComponent?: React.ReactNode; - /** Props for the LinkComponent */ - linkComponentProps?: any; } export const LoginMainFooterLinksItem: React.FunctionComponent = ({ children = null, - href = '', - target, className = '', - linkComponent = 'a', - linkComponentProps, ...props -}: LoginMainFooterLinksItemProps) => { - const LinkComponent = linkComponent as any; - - return ( -
  • - - {children} - -
    • - ); -}; +}: LoginMainFooterLinksItemProps) => ( +
  • + {children} +
    • +); LoginMainFooterLinksItem.displayName = 'LoginMainFooterLinksItem'; diff --git a/packages/react-core/src/components/LoginPage/__tests__/LoginMainFooterLinksItem.test.tsx b/packages/react-core/src/components/LoginPage/__tests__/LoginMainFooterLinksItem.test.tsx index 973eaddabdc..6d92e775e48 100644 --- a/packages/react-core/src/components/LoginPage/__tests__/LoginMainFooterLinksItem.test.tsx +++ b/packages/react-core/src/components/LoginPage/__tests__/LoginMainFooterLinksItem.test.tsx @@ -4,7 +4,7 @@ import { LoginMainFooterLinksItem } from '../LoginMainFooterLinksItem'; describe('LoginMainFooterLinksItem', () => { test('renders with PatternFly Core styles', () => { - const { asFragment } = render(); + const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginMainFooterLinksItem.test.tsx.snap b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginMainFooterLinksItem.test.tsx.snap index d1aa0d6bbb1..07c7181edff 100644 --- a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginMainFooterLinksItem.test.tsx.snap +++ b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginMainFooterLinksItem.test.tsx.snap @@ -4,11 +4,7 @@ exports[`LoginMainFooterLinksItem className is added to the root element 1`] = ` + /> `; @@ -16,12 +12,7 @@ exports[`LoginMainFooterLinksItem renders with PatternFly Core styles 1`] = ` + /> `; @@ -30,13 +21,9 @@ exports[`LoginMainFooterLinksItem with custom node 1`] = ` `; diff --git a/packages/react-core/src/components/LoginPage/examples/LoginPage.md b/packages/react-core/src/components/LoginPage/examples/LoginPage.md index 047abd5d17b..e5abb1462b0 100644 --- a/packages/react-core/src/components/LoginPage/examples/LoginPage.md +++ b/packages/react-core/src/components/LoginPage/examples/LoginPage.md @@ -14,19 +14,30 @@ propComponents: 'LoginMainFooter', 'LoginFooterItem', 'LoginMainFooterBandItem', - 'LoginMainFooterLinksItem', + 'LoginMainFooterLinksItem' ] --- + import brandImg2 from '../../assets/brandImgColor2.svg'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon'; +import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon'; +import DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon'; +import FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook-square-icon'; +import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon'; ## Examples + ### Basic + ```ts file='./LoginPageBasic.tsx' isFullscreen + ``` ### Show/hide password + ```ts file='./LoginPageShowHidePassword.tsx' isFullscreen + ``` ### Customizing the header utilities @@ -34,5 +45,7 @@ import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclam `headerUtilities` is a prop that can be customized to allow components to be placed into the header of the login page, likely for the user to take an action. The following example demonstrates the use of a Select component to display a list a languages. ### With header utilities + ```ts file='./LoginPageLanguageSelect.tsx' isFullscreen -``` \ No newline at end of file + +``` diff --git a/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx b/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx index d20a5649202..ef1ce1c73dc 100644 --- a/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx +++ b/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx @@ -7,9 +7,15 @@ import { LoginMainFooterLinksItem, LoginPage, ListItem, - ListVariant + ListVariant, + Button } from '@patternfly/react-core'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon'; +import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon'; +import DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon'; +import FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook-square-icon'; +import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon'; export const SimpleLoginPage: React.FunctionComponent = () => { const [showHelperText, setShowHelperText] = React.useState(false); @@ -40,45 +46,30 @@ export const SimpleLoginPage: React.FunctionComponent = () => { const socialMediaLoginContent = ( - - + + - - + + - - + + - - + + - - + + ); diff --git a/packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx b/packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx index 1311ff113df..a362c59f3cc 100644 --- a/packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx +++ b/packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx @@ -12,9 +12,15 @@ import { MenuToggleElement, Select, SelectList, - SelectOption + SelectOption, + Button } from '@patternfly/react-core'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon'; +import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon'; +import DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon'; +import FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook-square-icon'; +import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon'; export const LoginPageLanguageSelect: React.FunctionComponent = () => { const [showHelperText, setShowHelperText] = React.useState(false); @@ -113,45 +119,30 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => { const socialMediaLoginContent = ( - - + + - - + + - - + + - - + + - - + + ); diff --git a/packages/react-core/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx b/packages/react-core/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx index e1e435127e5..c9f7af0dc2b 100644 --- a/packages/react-core/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx +++ b/packages/react-core/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx @@ -7,9 +7,15 @@ import { LoginMainFooterLinksItem, LoginPage, ListItem, - ListVariant + ListVariant, + Button } from '@patternfly/react-core'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon'; +import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon'; +import DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon'; +import FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook-square-icon'; +import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon'; export const LoginPageHideShowPassword: React.FunctionComponent = () => { const [showHelperText, setShowHelperText] = React.useState(false); @@ -40,45 +46,30 @@ export const LoginPageHideShowPassword: React.FunctionComponent = () => { const socialMediaLoginContent = ( - - + + - - + + - - + + - - + + - - + + );