Skip to content

feat(Banner): updated variants to colors #8808

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

Merged
tlabaj merged 1 commit into from
Mar 21, 2023
Merged

feat(Banner): updated variants to colors #8808

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Banner/Banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export interface BannerProps extends React.HTMLProps<HTMLDivElement> {
*/
screenReaderText?: string;
/** Variant styles for the banner. */
variant?: 'default' | 'info' | 'danger' | 'success' | 'warning';
variant?: 'default' | 'blue' | 'red' | 'green' | 'gold';
}

export const Banner: React.FunctionComponent<BannerProps> = ({
Expand All @@ -28,7 +28,7 @@ export const Banner: React.FunctionComponent<BannerProps> = ({
<div
className={css(
styles.banner,
styles.modifiers[variant as 'success' | 'danger' | 'warning' | 'info'],
styles.modifiers[variant as 'green' | 'red' | 'gold' | 'blue'],
isSticky && styles.modifiers.sticky,
className
)}
Expand Down
24 changes: 12 additions & 12 deletions packages/react-core/src/components/Banner/__tests__/Banner.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,24 +31,24 @@ test('Renders without any modifier class when variant prop is not passed', () =>
expect(screen.getByText('Test')).toHaveClass('pf-c-banner', { exact: true });
});

test('Renders with class name pf-m-success when "success" is passed to variant prop', () => {
render(<Banner variant="success">Test</Banner>);
expect(screen.getByText('Test')).toHaveClass('pf-m-success');
test('Renders with class name pf-m-green when "green" is passed to variant prop', () => {
render(<Banner variant="green">Test</Banner>);
expect(screen.getByText('Test')).toHaveClass('pf-m-green');
});

test('Renders with class name pf-m-danger when "danger" is passed to variant prop', () => {
render(<Banner variant="danger">Test</Banner>);
expect(screen.getByText('Test')).toHaveClass('pf-m-danger');
test('Renders with class name pf-m-red when "red" is passed to variant prop', () => {
render(<Banner variant="red">Test</Banner>);
expect(screen.getByText('Test')).toHaveClass('pf-m-red');
});

test('Renders with class name pf-m-warning when "warning" is passed to variant prop', () => {
render(<Banner variant="warning">Test</Banner>);
expect(screen.getByText('Test')).toHaveClass('pf-m-warning');
test('Renders with class name pf-m-gold when "gold" is passed to variant prop', () => {
render(<Banner variant="gold">Test</Banner>);
expect(screen.getByText('Test')).toHaveClass('pf-m-gold');
});

test('Renders with class name pf-m-info when "info" is passed to variant prop', () => {
render(<Banner variant="info">Test</Banner>);
expect(screen.getByText('Test')).toHaveClass('pf-m-info');
test('Renders with class name pf-m-blue when "blue" is passed to variant prop', () => {
render(<Banner variant="blue">Test</Banner>);
expect(screen.getByText('Test')).toHaveClass('pf-m-blue');
});

test('Does not render pf-u-screen-reader class by default', () => {
Expand Down
8 changes: 4 additions & 4 deletions packages/react-core/src/components/Banner/examples/BannerBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ export const BannerBasic: React.FunctionComponent = () => (
<>
<Banner>Default banner</Banner>
<br />
<Banner variant="info">Blue banner</Banner>
<Banner variant="blue">Blue banner</Banner>
<br />
<Banner variant="danger">Red banner</Banner>
<Banner variant="red">Red banner</Banner>
<br />
<Banner variant="success">Green banner</Banner>
<Banner variant="green">Green banner</Banner>
<br />
<Banner variant="warning">Gold banner</Banner>
<Banner variant="gold">Gold banner</Banner>
</>
);
8 changes: 4 additions & 4 deletions packages/react-core/src/components/Banner/examples/BannerStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const BannerStatus: React.FunctionComponent = () => (
</Flex>
</Banner>
<br />
<Banner screenReaderText="Info banner" variant="info">
<Banner screenReaderText="Info banner" variant="blue">
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
<FlexItem>
<InfoCircleIcon />
Expand All @@ -26,7 +26,7 @@ export const BannerStatus: React.FunctionComponent = () => (
</Flex>
</Banner>
<br />
<Banner screenReaderText="Danger banner" variant="danger">
<Banner screenReaderText="Danger banner" variant="red">
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
<FlexItem>
<ExclamationCircleIcon />
Expand All @@ -35,7 +35,7 @@ export const BannerStatus: React.FunctionComponent = () => (
</Flex>
</Banner>
<br />
<Banner screenReaderText="Success banner" variant="success">
<Banner screenReaderText="Success banner" variant="green">
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
<FlexItem>
<CheckCircleIcon />
Expand All @@ -44,7 +44,7 @@ export const BannerStatus: React.FunctionComponent = () => (
</Flex>
</Banner>
<br />
<Banner screenReaderText="Warning banner" variant="warning">
<Banner screenReaderText="Warning banner" variant="gold">
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
<FlexItem>
<ExclamationTriangleIcon />
Expand Down