-
Notifications
You must be signed in to change notification settings - Fork 357
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Made icon support an example instead of new props
- Loading branch information
1 parent
a2f5bbb
commit cc9b1fa
Showing
6 changed files
with
96 additions
and
114 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,68 +1,43 @@ | ||
| import * as React from 'react'; | ||
| import styles from '@patternfly/react-styles/css/components/Banner/banner'; | ||
| import { css } from '@patternfly/react-styles'; | ||
| import { variantIcons } from '../Alert/AlertIcon'; | ||
| import { Flex, FlexItem } from '../../layouts'; | ||
|
|
||
| export interface BannerProps extends React.HTMLProps<HTMLDivElement> { | ||
| /** Content rendered inside the banner. */ | ||
| children?: React.ReactNode; | ||
| /** Additional classes added to the banner. */ | ||
| className?: string; | ||
| /** A custom icon for the banner. This property will override the icon that is set based on | ||
| * the variant property. | ||
| */ | ||
| customIcon?: React.ReactNode; | ||
| /** Flag for indicating whether the banner has a status icon. When set to "true", the icon | ||
| * will be set based on the variant property. | ||
| */ | ||
| hasStatusIcon?: boolean; | ||
| /** If set to true, the banner sticks to the top of its container */ | ||
| isSticky?: boolean; | ||
| /** Text announced by screen readers to indicate the type of banner when the hasStatusIcon property | ||
| * is passed in. Defaults to "${variant} banner" if this property is not passed in. | ||
| /** Text announced by screen readers to indicate the type of banner. Defaults to "${variant} banner" | ||
| * if this property is not passed in. | ||
| * | ||
| * Pass in null to omit this text from the banner when the banner does not convey status/severity. | ||
| */ | ||
| screenReaderText?: string; | ||
| screenReaderText?: string | null; | ||
| /** Variant styles for the banner. */ | ||
| variant?: 'default' | 'info' | 'danger' | 'success' | 'warning'; | ||
| } | ||
|
|
||
| export const Banner: React.FunctionComponent<BannerProps> = ({ | ||
| children, | ||
| className, | ||
| customIcon, | ||
| hasStatusIcon = false, | ||
| variant = 'default', | ||
| screenReaderText, | ||
| isSticky = false, | ||
| ...props | ||
| }: BannerProps) => { | ||
| const StatusIcon = variantIcons[variant]; | ||
|
|
||
| return ( | ||
| <div | ||
| className={css( | ||
| styles.banner, | ||
| styles.modifiers[variant as 'success' | 'danger' | 'warning' | 'info'], | ||
| isSticky && styles.modifiers.sticky, | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| {hasStatusIcon ? ( | ||
| <Flex spaceItems={{ default: 'spaceItemsSm' }}> | ||
| <FlexItem> | ||
| <span className="pf-u-screen-reader">{screenReaderText || `${variant} banner`}</span> | ||
| {customIcon || <StatusIcon />} | ||
| </FlexItem> | ||
| <FlexItem> | ||
| <div className="pf-l-flex__item">{children}</div> | ||
| </FlexItem> | ||
| </Flex> | ||
| ) : ( | ||
| children | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
| }: BannerProps) => ( | ||
| <div | ||
| className={css( | ||
| styles.banner, | ||
| styles.modifiers[variant as 'success' | 'danger' | 'warning' | 'info'], | ||
| isSticky && styles.modifiers.sticky, | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| {screenReaderText !== null && <span className="pf-u-screen-reader">{screenReaderText || `${variant} banner`}</span>} | ||
| {children} | ||
| </div> | ||
| ); | ||
| Banner.displayName = 'Banner'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
25 changes: 16 additions & 9 deletions
25
packages/react-core/src/components/Banner/examples/BannerStatus.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,31 @@ | ||
| import React from 'react'; | ||
| import { Banner } from '@patternfly/react-core'; | ||
| import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; | ||
| import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; | ||
| import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; | ||
| import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; | ||
| import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; | ||
|
|
||
| export const BannerStatus: React.FunctionComponent = () => ( | ||
| <> | ||
| <Banner hasStatusIcon>Default banner</Banner> | ||
| <Banner> | ||
| <BellIcon /> Default banner | ||
| </Banner> | ||
| <br /> | ||
| <Banner hasStatusIcon variant="info"> | ||
| Info banner | ||
| <Banner variant="info"> | ||
| <InfoCircleIcon /> Info banner | ||
| </Banner> | ||
| <br /> | ||
| <Banner hasStatusIcon variant="danger"> | ||
| Danger banner | ||
| <Banner variant="danger"> | ||
| <ExclamationCircleIcon /> Danger banner | ||
| </Banner> | ||
| <br /> | ||
| <Banner hasStatusIcon variant="success"> | ||
| Success banner | ||
| <Banner variant="success"> | ||
| <CheckCircleIcon /> Success banner | ||
| </Banner> | ||
| <br /> | ||
| <Banner hasStatusIcon variant="warning"> | ||
| Warning banner | ||
| <Banner variant="warning"> | ||
| <ExclamationTriangleIcon /> Warning banner | ||
| </Banner> | ||
| </> | ||
| ); |