-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: refactored expiring banner into a component
- Loading branch information
1 parent
fc31fac
commit 677f20b
Showing
5 changed files
with
149 additions
and
28 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
63 changes: 63 additions & 0 deletions
63
src/components/SharedComponents/ExpiringBanner/ExpiringBanner.test.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 |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import { ExpiringBanner } from "./ExpiringBanner"; | ||
|
|
||
| import renderWithTheme from "@/__tests__/__helpers__/renderWithTheme"; | ||
|
|
||
| const render = renderWithTheme; | ||
|
|
||
| describe("ExpiringBanner", () => { | ||
| const defaultProps = { | ||
| isOpen: true, | ||
| isResourcesMessage: false, | ||
| onwardHref: "/new-lessons", | ||
| onClose: jest.fn(), | ||
| onViewNewLessons: jest.fn(), | ||
| }; | ||
|
|
||
| it("should render the banner when isOpen is true", () => { | ||
| const screen = render(<ExpiringBanner {...defaultProps} />); | ||
| expect( | ||
| screen.getByText("We've made brand-new and improved lessons for you."), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("should not render the banner when isOpen is false", () => { | ||
| const screen = render(<ExpiringBanner {...defaultProps} isOpen={false} />); | ||
| expect( | ||
| screen.queryByText("We've made brand-new and improved lessons for you."), | ||
| ).not.toBeVisible(); | ||
| }); | ||
|
|
||
| it("should display the correct title for resources message", () => { | ||
| const screen = render( | ||
| <ExpiringBanner {...defaultProps} isResourcesMessage={true} />, | ||
| ); | ||
| expect( | ||
| screen.getByText( | ||
| "These resources will be removed by end of Summer Term 2025.", | ||
| ), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("should display the correct title for lessons message", () => { | ||
| const screen = render( | ||
| <ExpiringBanner {...defaultProps} isResourcesMessage={false} />, | ||
| ); | ||
| expect( | ||
| screen.getByText( | ||
| "These lessons will be removed by end of Summer Term 2025.", | ||
| ), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("should call onClose when the dismiss button is clicked", () => { | ||
| const screen = render(<ExpiringBanner {...defaultProps} />); | ||
| screen.getByRole("button", { name: /dismiss/i }).click(); | ||
| expect(defaultProps.onClose).toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| it("should call onViewNewLessons when the View new lessons button is clicked", () => { | ||
| const screen = render(<ExpiringBanner {...defaultProps} />); | ||
| screen.getByRole("link", { name: /view new lessons/i }).click(); | ||
| expect(defaultProps.onViewNewLessons).toHaveBeenCalled(); | ||
| }); | ||
| }); |
45 changes: 45 additions & 0 deletions
45
src/components/SharedComponents/ExpiringBanner/ExpiringBanner.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 |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { | ||
| OakBox, | ||
| OakInlineBanner, | ||
| OakSecondaryButton, | ||
| } from "@oaknational/oak-components"; | ||
|
|
||
| export type ExpiringBannerProps = { | ||
| isOpen: boolean; | ||
| isResourcesMessage: boolean; | ||
| onwardHref: string; | ||
| onClose: () => void; | ||
| onViewNewLessons?: () => void; | ||
| }; | ||
|
|
||
| export const ExpiringBanner = ({ | ||
| isOpen, | ||
| isResourcesMessage, | ||
| onwardHref, | ||
| onClose, | ||
| onViewNewLessons, | ||
| }: ExpiringBannerProps) => { | ||
| return ( | ||
| <OakInlineBanner | ||
| canDismiss | ||
| cta={ | ||
| <OakBox $pt="inner-padding-s"> | ||
| <OakSecondaryButton | ||
| element="a" | ||
| iconName="arrow-right" | ||
| isTrailingIcon | ||
| href={onwardHref} | ||
| onClick={onViewNewLessons} | ||
| > | ||
| View new lessons | ||
| </OakSecondaryButton> | ||
| </OakBox> | ||
| } | ||
| isOpen={isOpen} | ||
| message="We've made brand-new and improved lessons for you." | ||
| onDismiss={onClose} | ||
| title={`These ${isResourcesMessage ? "resources" : "lessons"} will be removed by end of Summer Term 2025.`} | ||
| type="alert" | ||
| /> | ||
| ); | ||
| }; |
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 @@ | ||
| export * from "./ExpiringBanner"; |