Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(Login): use children for loginmainfooterlinksitem #10107

Merged
merged 2 commits into from
Mar 18, 2024
Merged

feat(Login): use children for loginmainfooterlinksitem #10107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6af17a1
feat(Login): use children for loginmainfooterlinksitem
kmcfaul Feb 27, 2024
8633c3b
use icons
kmcfaul Feb 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 5 additions & 23 deletions packages/react-core/src/components/LoginPage/LoginMainFooterLinksItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,35 +5,17 @@ import { css } from '@patternfly/react-styles';
export interface LoginMainFooterLinksItemProps extends React.HTMLProps<HTMLLIElement> {
/** 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<LoginMainFooterLinksItemProps> = ({
children = null,
href = '',
target,
className = '',
linkComponent = 'a',
linkComponentProps,
...props
}: LoginMainFooterLinksItemProps) => {
const LinkComponent = linkComponent as any;

return (
<li className={css(styles.loginMainFooterLinksItem, className)} {...props}>
<LinkComponent href={href} target={target} {...linkComponentProps}>
{children}
</LinkComponent>
</li>
);
};
}: LoginMainFooterLinksItemProps) => (
<li className={css(styles.loginMainFooterLinksItem, className)} {...props}>
{children}
</li>
);
LoginMainFooterLinksItem.displayName = 'LoginMainFooterLinksItem';
2 changes: 1 addition & 1 deletion packages/react-core/src/components/LoginPage/__tests__/LoginMainFooterLinksItem.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { LoginMainFooterLinksItem } from '../LoginMainFooterLinksItem';

describe('LoginMainFooterLinksItem', () => {
test('renders with PatternFly Core styles', () => {
const { asFragment } = render(<LoginMainFooterLinksItem href="#" target="" />);
const { asFragment } = render(<LoginMainFooterLinksItem />);
expect(asFragment()).toMatchSnapshot();
});

Expand Down
23 changes: 5 additions & 18 deletions ...e/src/components/LoginPage/__tests__/__snapshots__/LoginMainFooterLinksItem.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,15 @@ exports[`LoginMainFooterLinksItem className is added to the root element 1`] = `
<DocumentFragment>
<li
class="pf-v6-c-login__main-footer-links-item extra-class"
>
<a
href=""
/>
</li>
/>
</DocumentFragment>
`;

exports[`LoginMainFooterLinksItem renders with PatternFly Core styles 1`] = `
<DocumentFragment>
<li
class="pf-v6-c-login__main-footer-links-item"
>
<a
href="#"
target=""
/>
</li>
/>
</DocumentFragment>
`;

Expand All @@ -30,13 +21,9 @@ exports[`LoginMainFooterLinksItem with custom node 1`] = `
<li
class="pf-v6-c-login__main-footer-links-item"
>
<a
href=""
>
<div>
My custom node
</div>
</a>
<div>
My custom node
</div>
</li>
</DocumentFragment>
`;
17 changes: 15 additions & 2 deletions packages/react-core/src/components/LoginPage/examples/LoginPage.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,25 +14,38 @@ 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

`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
```

```
63 changes: 27 additions & 36 deletions packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -40,45 +46,30 @@ export const SimpleLoginPage: React.FunctionComponent = () => {

const socialMediaLoginContent = (
<React.Fragment>
<LoginMainFooterLinksItem
href="https://www.patternfly.org/"
linkComponentProps={{ 'aria-label': 'Login with Google' }}
>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512">
<path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" />
</svg>
<LoginMainFooterLinksItem>
<Button variant="plain" aria-label="Login with Google">
<GoogleIcon />
</Button>
</LoginMainFooterLinksItem>
<LoginMainFooterLinksItem
href="https://www.patternfly.org/"
linkComponentProps={{ 'aria-label': 'Login with Github' }}
>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
</svg>
<LoginMainFooterLinksItem>
<Button variant="plain" aria-label="Login with Github">
<GithubIcon />
</Button>
</LoginMainFooterLinksItem>
<LoginMainFooterLinksItem
href="https://www.patternfly.org/"
linkComponentProps={{ 'aria-label': 'Login with Dropbox' }}
>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 528 512">
<path d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z" />
</svg>
<LoginMainFooterLinksItem>
<Button variant="plain" aria-label="Login with Dropbox">
<DropboxIcon />
</Button>
</LoginMainFooterLinksItem>
<LoginMainFooterLinksItem
href="https://www.patternfly.org/"
linkComponentProps={{ 'aria-label': 'Login with Facebook' }}
>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z" />
</svg>
<LoginMainFooterLinksItem>
<Button variant="plain" aria-label="Login with Facebook">
<FacebookSquareIcon />
</Button>
</LoginMainFooterLinksItem>
<LoginMainFooterLinksItem
href="https://www.patternfly.org/"
linkComponentProps={{ 'aria-label': 'Login with Gitlab' }}
>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z" />
</svg>
<LoginMainFooterLinksItem>
<Button variant="plain" aria-label="Login with Gitlab">
<GitlabIcon />
</Button>
</LoginMainFooterLinksItem>
</React.Fragment>
);
Expand Down
63 changes: 27 additions & 36 deletions packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -113,45 +119,30 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {

const socialMediaLoginContent = (
<React.Fragment>
<LoginMainFooterLinksItem
href="https://www.patternfly.org/"
linkComponentProps={{ 'aria-label': 'Login with Google' }}
>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512">
<path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" />
</svg>
<LoginMainFooterLinksItem>
<Button variant="plain" aria-label="Login with Google">
<GoogleIcon />
</Button>
</LoginMainFooterLinksItem>
<LoginMainFooterLinksItem
href="https://www.patternfly.org/"
linkComponentProps={{ 'aria-label': 'Login with Github' }}
>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
</svg>
<LoginMainFooterLinksItem>
<Button variant="plain" aria-label="Login with Github">
<GithubIcon />
</Button>
</LoginMainFooterLinksItem>
<LoginMainFooterLinksItem
href="https://www.patternfly.org/"
linkComponentProps={{ 'aria-label': 'Login with Dropbox' }}
>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 528 512">
<path d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z" />
</svg>
<LoginMainFooterLinksItem>
<Button variant="plain" aria-label="Login with Dropbox">
<DropboxIcon />
</Button>
</LoginMainFooterLinksItem>
<LoginMainFooterLinksItem
href="https://www.patternfly.org/"
linkComponentProps={{ 'aria-label': 'Login with Facebook' }}
>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z" />
</svg>
<LoginMainFooterLinksItem>
<Button variant="plain" aria-label="Login with Facebook">
<FacebookSquareIcon />
</Button>
</LoginMainFooterLinksItem>
<LoginMainFooterLinksItem
href="https://www.patternfly.org/"
linkComponentProps={{ 'aria-label': 'Login with Gitlab' }}
>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z" />
</svg>
<LoginMainFooterLinksItem>
<Button variant="plain" aria-label="Login with Gitlab">
<GitlabIcon />
</Button>
</LoginMainFooterLinksItem>
</React.Fragment>
);
Expand Down
Loading
Loading