-
Notifications
You must be signed in to change notification settings - Fork 67
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: create page banner and add icon button black variant (#803)
- Loading branch information
Carla Duarte
committed
Aug 19, 2021
1 parent
119e919
commit 4ad4e63
Showing
9 changed files
with
338 additions
and
30 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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| .pgn__pageBanner-component { | ||
| width: 100%; | ||
| min-height: 36px; | ||
| display: flex; | ||
| flex-wrap: nowrap; | ||
| font-size: $x-small-font-size; | ||
|
|
||
| @include media-breakpoint-up(md) { | ||
| font-size: $small-font-size; | ||
| } | ||
| } | ||
|
|
||
| .pgn__pageBanner__dark { | ||
| background-color: $dark-500; | ||
| color: white; | ||
| } | ||
|
|
||
| .pgn__pageBanner__light { | ||
| background-color: $light-400; | ||
| color: black; | ||
| } | ||
|
|
||
| .pgn__pageBanner__accentA { | ||
| background-color: $accent-a; | ||
| color: black; | ||
| } | ||
|
|
||
| .pgn__pageBanner__warning { | ||
| background-color: $warning-100; | ||
| color: black; | ||
| } | ||
|
|
||
| .pgn__pageBanner-content { | ||
| display: flex; | ||
| flex-grow: 1; | ||
| justify-content: center; | ||
| align-items: center; | ||
| padding: map_get($spacers, 2) map_get($spacers, 2.5); | ||
| text-align: center; | ||
| } | ||
|
|
||
| .pgn__pageBanner-dismissButtonContainer { | ||
| min-width: 32px; | ||
| min-height: 32px; | ||
| display: flex; | ||
| align-items: center; | ||
| align-self: center; | ||
|
|
||
| @include media-breakpoint-up(md) { | ||
| min-width: 36px; | ||
| min-height: 36px; | ||
| } | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import React from 'react'; | ||
| import { mount } from 'enzyme'; | ||
|
|
||
| import PageBanner from './index'; | ||
|
|
||
| describe('<PageBanner />', () => { | ||
| describe('correct rendering', () => { | ||
| it('renders with correct class for default variant (accentA)', () => { | ||
| const wrapper = mount(<PageBanner />); | ||
| const pageBanner = wrapper.find('.pgn__pageBanner-component'); | ||
| expect(pageBanner.hasClass('pgn__pageBanner__accentA')).toEqual(true); | ||
| }); | ||
| it('renders with correct class for variant warning', () => { | ||
| const wrapper = mount(<PageBanner variant="warning" />); | ||
| const pageBanner = wrapper.find('.pgn__pageBanner-component'); | ||
| expect(pageBanner.hasClass('pgn__pageBanner__warning')).toEqual(true); | ||
| }); | ||
| it('renders with correct class for variant dark', () => { | ||
| const wrapper = mount(<PageBanner variant="dark" />); | ||
| const pageBanner = wrapper.find('.pgn__pageBanner-component'); | ||
| expect(pageBanner.hasClass('pgn__pageBanner__dark')).toEqual(true); | ||
| }); | ||
| it('renders with correct class for variant light', () => { | ||
| const wrapper = mount(<PageBanner variant="light" />); | ||
| const pageBanner = wrapper.find('.pgn__pageBanner-component'); | ||
| expect(pageBanner.hasClass('pgn__pageBanner__light')).toEqual(true); | ||
| }); | ||
| it('does not render page banner when show is false', () => { | ||
| const wrapper = mount(<PageBanner show={false} />); | ||
| const pageBanner = wrapper.find('.pgn__pageBanner-component'); | ||
| expect(pageBanner).toHaveLength(0); | ||
| }); | ||
| it('passes the alt text to the dismiss button aria-label', () => { | ||
| const wrapper = mount(<PageBanner dismissible dismissAltText="Test dismiss alt text" onDismiss={() => {}} />); | ||
| const dismissButton = wrapper.find('.pgn__pageBanner-dismissButtonContainer button.btn-icon'); | ||
| expect(dismissButton.prop('aria-label')).toEqual('Test dismiss alt text'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('onDismiss', () => { | ||
| it('performs the onDismiss action on click', () => { | ||
| const spy = jest.fn(); | ||
| const wrapper = mount(<PageBanner dismissible onDismiss={spy} />); | ||
| expect(spy).toHaveBeenCalledTimes(0); | ||
| const dismissButton = wrapper.find('.pgn__pageBanner-dismissButtonContainer button.btn-icon'); | ||
| dismissButton.simulate('click'); | ||
| expect(spy).toHaveBeenCalledTimes(1); | ||
| }); | ||
| }); | ||
| }); |
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 |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| --- | ||
| title: 'Page Banner' | ||
| type: 'component' | ||
| components: | ||
| - Page Banner | ||
| categories: | ||
| - Status & metadata | ||
| status: 'New' | ||
| designStatus: 'Complete' | ||
| devStatus: 'In Progress' | ||
| notes: | | ||
| --- | ||
|
|
||
| ### Basic Usage | ||
|
|
||
| ```jsx live | ||
|
|
||
| () => { | ||
| const [show, setShow] = useState(true); | ||
| return ( | ||
| <> | ||
| <PageBanner | ||
| show={show} | ||
| dismissible | ||
| onDismiss={() => {setShow(false)}} | ||
| > | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. | ||
| </PageBanner> | ||
| {!show && (<Button onClick={() => setShow(true)}>Show Page Banner</Button>)} | ||
| </> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| ### Variants | ||
|
|
||
| ```jsx live | ||
|
|
||
| () => { | ||
| const [showLightVariant, setShowLightVariant] = useState(true); | ||
| const [showDarkVariant, setShowDarkVariant] = useState(true); | ||
| return ( | ||
| <> | ||
| <PageBanner | ||
| show={showLightVariant} | ||
| dismissible | ||
| onDismiss={() => setShowLightVariant(false)} | ||
| variant="light" | ||
| > | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. | ||
| </PageBanner> | ||
| {!showLightVariant && (<Button className="my-2 mr-2" onClick={() => setShowLightVariant(true)}>Show light variant</Button>)} | ||
| <PageBanner | ||
| show={showDarkVariant} | ||
| dismissible | ||
| onDismiss={() => setShowDarkVariant(false)} | ||
| variant="dark" | ||
| > | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. | ||
| </PageBanner> | ||
| {!showDarkVariant && (<Button className="my-2" onClick={() => setShowDarkVariant(true)}>Show dark variant</Button>)} | ||
| <PageBanner | ||
| variant="warning" | ||
| > | ||
| <Icon src={WarningFilled} className="mr-2" /> We will no longer support Internet Explorer 11. | ||
| </PageBanner> | ||
| </> | ||
| ) | ||
| } | ||
| ``` |
Oops, something went wrong.