From 6c981d34a3d6e9cc245284b31699f5c3d38b5535 Mon Sep 17 00:00:00 2001 From: Ben Titterington Date: Thu, 4 Jul 2024 15:06:16 +0100 Subject: [PATCH 1/3] feat: add OakInlineBanner component and tests --- .../OakInlineBanner.stories.tsx | 176 ++++++ .../OakInlineBanner/OakInlineBanner.test.tsx | 252 +++++++++ .../OakInlineBanner/OakInlineBanner.tsx | 210 ++++++++ .../OakInlineBanner.test.tsx.snap | 510 ++++++++++++++++++ .../molecules/OakInlineBanner/index.ts | 1 + src/components/molecules/index.ts | 1 + src/image-map.ts | 2 + 7 files changed, 1152 insertions(+) create mode 100644 src/components/molecules/OakInlineBanner/OakInlineBanner.stories.tsx create mode 100644 src/components/molecules/OakInlineBanner/OakInlineBanner.test.tsx create mode 100644 src/components/molecules/OakInlineBanner/OakInlineBanner.tsx create mode 100644 src/components/molecules/OakInlineBanner/__snapshots__/OakInlineBanner.test.tsx.snap create mode 100644 src/components/molecules/OakInlineBanner/index.ts diff --git a/src/components/molecules/OakInlineBanner/OakInlineBanner.stories.tsx b/src/components/molecules/OakInlineBanner/OakInlineBanner.stories.tsx new file mode 100644 index 00000000..5a35812d --- /dev/null +++ b/src/components/molecules/OakInlineBanner/OakInlineBanner.stories.tsx @@ -0,0 +1,176 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { useArgs } from "@storybook/preview-api"; +import React from "react"; + +import { + OakInlineBanner, + OakSecondaryLink, + bannerTypes, +} from "@/components/molecules"; +import { oakIconNames } from "@/components/atoms"; + +const meta: Meta = { + component: OakInlineBanner, + tags: ["autodocs"], + title: "components/molecules/OakInlineBanner", + argTypes: { + type: { + options: Object.keys(bannerTypes), + }, + title: { + control: { + type: "text", + }, + }, + message: { + control: { + type: "text", + }, + }, + cta: { + control: { + type: "text", + }, + }, + canDismiss: { + control: { + type: "boolean", + }, + }, + icon: { + options: [undefined, ...oakIconNames], + }, + }, + parameters: { + controls: { + include: [ + "type", + "title", + "isOpen", + "message", + "cta", + "canDismiss", + "icon", + ], + }, + }, + args: { + type: "info", + isOpen: true, + title: "Information", + message: + "Lorem ipsum dolor sit amet consectetur. Arcu proin rhoncus eget aliquet.", + cta: ( + + Link + + ), + canDismiss: true, + onDismiss: () => console.log("dismissed"), + }, + render: (args) => { + const [, updateArgs] = useArgs(); + const onDismiss = () => updateArgs({ isOpen: false }); + + return ( + <> + + + ); + }, +}; +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + type: "info", + }, +}; + +export const InfoSimple: Story = { + args: { + type: "info", + title: undefined, + }, +}; + +export const Neutral: Story = { + args: { + type: "neutral", + }, +}; + +export const NeutralSimple: Story = { + args: { + type: "neutral", + title: undefined, + }, +}; + +export const Success: Story = { + args: { + type: "success", + }, +}; + +export const SuccessSimple: Story = { + args: { + type: "success", + title: undefined, + }, +}; + +export const Alert: Story = { + args: { + type: "alert", + }, +}; + +export const AlertSimple: Story = { + args: { + type: "alert", + title: undefined, + }, +}; + +export const Error: Story = { + args: { + type: "error", + }, +}; + +export const ErrorSimple: Story = { + args: { + type: "error", + title: undefined, + }, +}; + +export const OverriddenStyling: Story = { + args: { + type: undefined, + canDismiss: false, + icon: "rocket", + $borderColor: "pink", + $background: "pink30", + iconColorFilter: "oakGreen", + }, +}; + +export const OverriddenStylingSimple: Story = { + args: { + type: undefined, + canDismiss: false, + icon: "rocket", + $borderColor: "pink", + $background: "pink30", + iconColorFilter: "oakGreen", + title: undefined, + }, +}; diff --git a/src/components/molecules/OakInlineBanner/OakInlineBanner.test.tsx b/src/components/molecules/OakInlineBanner/OakInlineBanner.test.tsx new file mode 100644 index 00000000..b9234d2b --- /dev/null +++ b/src/components/molecules/OakInlineBanner/OakInlineBanner.test.tsx @@ -0,0 +1,252 @@ +import { create } from "react-test-renderer"; +import React, { ReactNode } from "react"; +import "@testing-library/jest-dom"; + +import renderWithTheme from "@/test-helpers/renderWithTheme"; +import { oakDefaultTheme } from "@/styles"; +import { OakThemeProvider } from "@/components/atoms"; +import { + OakInlineBanner, + OakSecondaryLink, + bannerTypes, +} from "@/components/molecules"; +import { parseColor } from "@/styles/helpers/parseColor"; + +jest.mock("react-dom", () => { + return { + ...jest.requireActual("react-dom"), + createPortal: (node: ReactNode) => node, + }; +}); + +describe(OakInlineBanner, () => { + it("matches snapshot", () => { + const tree = create( + + + Link + + } + isOpen + message="Lorem ipsum dolor sit amet consectetur. Arcu proin rhoncus eget aliquet." + onDismiss={() => {}} + title="Information" + type="info" + /> + , + ).toJSON(); + + expect(tree).toMatchSnapshot(); + }); + + it("shows title", () => { + const { getByTestId } = renderWithTheme( + + Link + + } + isOpen + message="Lorem ipsum dolor sit amet consectetur. Arcu proin rhoncus eget aliquet." + onDismiss={() => {}} + title="Information" + type="info" + />, + ); + + expect(getByTestId("inline-banner-title")).toHaveTextContent("Information"); + }); + + it("shows message", () => { + const { getByTestId } = renderWithTheme( + + Link + + } + isOpen + message="Lorem ipsum dolor sit amet consectetur. Arcu proin rhoncus eget aliquet." + onDismiss={() => {}} + title="Information" + type="info" + />, + ); + + expect(getByTestId("inline-banner-message")).toHaveTextContent( + "Lorem ipsum dolor sit amet consectetur. Arcu proin rhoncus eget aliquet.", + ); + }); + + it("shows close icon if can be dismissed and onDismiss is called when clicked", () => { + const onDismissSpy = jest.fn(); + const { getByTestId } = renderWithTheme( + + Link + + } + isOpen + message="Lorem ipsum dolor sit amet consectetur. Arcu proin rhoncus eget aliquet." + title="Information" + type="info" + />, + ); + + expect(getByTestId("inline-banner-close-button")).toBeInTheDocument(); + getByTestId("inline-banner-close-button").click(); + expect(onDismissSpy).toHaveBeenCalledTimes(1); + }); + + it("hides close icon is the banner cannot be dismissed", () => { + const { queryAllByTestId } = renderWithTheme( + + Link + + } + isOpen + message="Lorem ipsum dolor sit amet consectetur. Arcu proin rhoncus eget aliquet." + onDismiss={() => {}} + title="Information" + type="info" + />, + ); + expect(queryAllByTestId("inline-banner-close-button")).toHaveLength(0); + }); + + it("shows the link element that is passed in as prop", () => { + const { getByTestId } = renderWithTheme( + + Link + + } + isOpen + message="Lorem ipsum dolor sit amet consectetur. Arcu proin rhoncus eget aliquet." + onDismiss={() => {}} + title="Information" + type="info" + />, + ); + + expect(getByTestId("this-link")).toBeInTheDocument(); + }); + + it("has info styling by default", () => { + const { getByTestId } = renderWithTheme( + + Link + + } + isOpen + message="Lorem ipsum dolor sit amet consectetur. Arcu proin rhoncus eget aliquet." + onDismiss={() => {}} + title="Information" + />, + ); + + expect(getByTestId("oak-inline-banner")).toHaveStyle( + `background-color: ${parseColor( + bannerTypes?.info?.backgroundColour || "lavender50", + )}`, + ); + expect(getByTestId("oak-inline-banner")).toHaveStyle( + `border-color: ${parseColor( + bannerTypes?.info?.borderColour || "lavender", + )}`, + ); + }); + + it("has alert styling when type is alert", () => { + const { getByTestId } = renderWithTheme( + + Link + + } + isOpen + message="Lorem ipsum dolor sit amet consectetur. Arcu proin rhoncus eget aliquet." + onDismiss={() => {}} + title="Information" + type="alert" + />, + ); + + expect(getByTestId("oak-inline-banner")).toHaveStyle( + `background-color: ${parseColor( + bannerTypes?.alert?.backgroundColour || "lemon30", + )}`, + ); + expect(getByTestId("oak-inline-banner")).toHaveStyle( + `border-color: ${parseColor( + bannerTypes?.alert?.borderColour || "lemon50", + )}`, + ); + }); + + it("has compact version when title is not supplied as prop", () => { + const { queryAllByTestId } = renderWithTheme( + + Link + + } + isOpen + message="Lorem ipsum dolor sit amet consectetur. Arcu proin rhoncus eget aliquet." + onDismiss={() => {}} + type="info" + />, + ); + + expect(queryAllByTestId("inline-banner-title")).toHaveLength(0); + }); + + it("can orverride close button props", () => { + const { getByTestId } = renderWithTheme( + + Link + + } + isOpen + message="Lorem ipsum dolor sit amet consectetur. Arcu proin rhoncus eget aliquet." + onDismiss={() => {}} + title="Information" + type="info" + closeButtonOverrideProps={{ "aria-label": "Close information banner" }} + />, + ); + + expect(getByTestId("inline-banner-close-button")).toHaveAttribute( + "aria-label", + "Close information banner", + ); + }); +}); diff --git a/src/components/molecules/OakInlineBanner/OakInlineBanner.tsx b/src/components/molecules/OakInlineBanner/OakInlineBanner.tsx new file mode 100644 index 00000000..83870d12 --- /dev/null +++ b/src/components/molecules/OakInlineBanner/OakInlineBanner.tsx @@ -0,0 +1,210 @@ +import React, { ReactNode } from "react"; + +import { InternalShadowRoundButton } from "../InternalShadowRoundButton"; + +import { + OakBox, + OakFlex, + OakFlexProps, + OakHeading, + OakIcon, + OakIconName, +} from "@/components/atoms"; +import { OakColorToken } from "@/styles"; +import { OakColorFilterToken } from "@/styles/theme/color"; + +export type OakInlineBannerProps = OakFlexProps & { + /** + * If true the modal will be open, if false it will be closed + */ + isOpen: boolean; + /** + * The optional title to display in the banner + */ + title?: string; + /** + * The message to display in the banner + */ + message: string | ReactNode; + /** + * The type of banner to display + */ + type?: "info" | "neutral" | "success" | "alert" | "error"; + /** + * The icon to display in the banner + */ + icon?: OakIconName; + /** + * The color filter to apply to the icon + */ + iconColorFilter?: OakColorFilterToken; + /** + * The optional call to action to display in the banner + */ + cta?: ReactNode; + /** + * If true the banner can be dismissed (show close icon) + */ + canDismiss?: boolean; + /** + * The function to call when the banner is dismissed + */ + onDismiss?: () => void; + /** + * Props to override the close button + */ + closeButtonOverrideProps?: Partial; +}; + +export type BannerTypes = { + [key: string]: { + icon: OakIconName; + iconColorFilter: OakColorFilterToken; + backgroundColour: OakColorToken; + borderColour: OakColorToken; + }; +}; + +export const bannerTypes: BannerTypes = { + info: { + icon: "info", + iconColorFilter: "black", + backgroundColour: "lavender50", + borderColour: "lavender", + }, + neutral: { + icon: "info", + iconColorFilter: "black", + backgroundColour: "grey20", + borderColour: "grey40", + }, + success: { + icon: "success", + iconColorFilter: "black", + backgroundColour: "mint30", + borderColour: "mint110", + }, + alert: { + icon: "warning", + iconColorFilter: "black", + backgroundColour: "lemon30", + borderColour: "lemon50", + }, + error: { + icon: "error", + iconColorFilter: "red", + backgroundColour: "red30", + borderColour: "red", + }, +}; + +/** + * A inline banner that can be used to display important information to the user. + * + * ## Props + * + * - **isOpen** \- If true the banner will be displayed + * - **title?** \- Optional title to display in the banner, without this the banner will be more compact + * - **message** \- Message to display in the banner + * - **type?** \- Optional type of banner to display (info, neutral, success, alert, error) (default: info) + * - **icon?** \- Optional icon to display in the banner + * - **iconColorFilter?** \- Optional color filter to apply to the icon + * - **cta?** \- Optional call to action to display in the banner (ReactNode) + * - **canDismiss?** \- If true the banner can be dismissed (show close icon) (default: false) + * - **onDismiss?** \- Function called when the banner is dismissed + * - **closeButtonOverrideProps?** \- Props to override the close button (aria-label, etc) + * - **...rest** \- Other props to be passed to the wrapper OakFlex component (can be used to override styles of the banner) + */ +export const OakInlineBanner = ({ + isOpen, + title, + message, + type = "info", + cta, + canDismiss = false, + onDismiss = () => {}, + icon, + iconColorFilter, + closeButtonOverrideProps, + ...props +}: OakInlineBannerProps) => { + const iconResult = icon || bannerTypes[type]?.icon; + const iconColorFilterResult = + iconColorFilter || bannerTypes[type]?.iconColorFilter; + + return ( + + + + + + + {title && ( + + {title} + + )} + + {message} + + {!title && cta} + + {canDismiss && ( + + + + )} + + {title && cta} + + ); +}; diff --git a/src/components/molecules/OakInlineBanner/__snapshots__/OakInlineBanner.test.tsx.snap b/src/components/molecules/OakInlineBanner/__snapshots__/OakInlineBanner.test.tsx.snap new file mode 100644 index 00000000..611323c6 --- /dev/null +++ b/src/components/molecules/OakInlineBanner/__snapshots__/OakInlineBanner.test.tsx.snap @@ -0,0 +1,510 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`OakInlineBanner matches snapshot 1`] = ` +.c0 { + padding: 1rem; + background: #c6d1ef; + border-color: #a0b6f2; + border-radius: 0.375rem; + border-style: solid; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-family: Lexend,sans-serif; +} + +.c2 { + width: 100%; + font-family: Lexend,sans-serif; +} + +.c4 { + font-family: Lexend,sans-serif; +} + +.c5 { + position: relative; + width: 2rem; + min-width: 2rem; + height: 2rem; + min-height: 2rem; + font-family: Lexend,sans-serif; +} + +.c9 { + font-family: Lexend,sans-serif; + font-weight: 300; + font-size: 1rem; + line-height: 1.5rem; + -webkit-letter-spacing: -0.005rem; + -moz-letter-spacing: -0.005rem; + -ms-letter-spacing: -0.005rem; + letter-spacing: -0.005rem; +} + +.c10 { + position: relative; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + font-family: Lexend,sans-serif; +} + +.c16 { + position: relative; + width: 1.5rem; + min-width: 1.5rem; + height: 1.5rem; + color: transparent; + background: transparent; + border-radius: 6.25rem; + font-family: Lexend,sans-serif; +} + +.c18 { + position: absolute; + top: 0rem; + width: 100%; + height: 100%; + border-radius: 6.25rem; + font-family: Lexend,sans-serif; +} + +.c19 { + position: relative; + width: 1.5rem; + min-width: 1.5rem; + height: 1.5rem; + min-height: 1.5rem; + font-family: Lexend,sans-serif; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: end; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: end; +} + +.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: start; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + gap: 0.75rem; +} + +.c7 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: start; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + gap: 0.25rem; +} + +.c11 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c15 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + gap: 0rem; +} + +.c17 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.c20 { + font-family: Lexend,sans-serif; + font-weight: 600; + font-size: 1rem; + line-height: 1.25rem; + -webkit-letter-spacing: 0.0115rem; + -moz-letter-spacing: 0.0115rem; + -ms-letter-spacing: 0.0115rem; + letter-spacing: 0.0115rem; +} + +.c22 { + font-family: Lexend,sans-serif; +} + +.c6 { + -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%); + filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%); + object-fit: contain; +} + +.c25 { + object-fit: contain; +} + +.c8 { + font-family: Lexend,sans-serif; + font-weight: 600; + font-size: 1rem; + line-height: 1.25rem; + -webkit-letter-spacing: 0.0115rem; + -moz-letter-spacing: 0.0115rem; + -ms-letter-spacing: 0.0115rem; + letter-spacing: 0.0115rem; +} + +.c13 { + background: none; + color: inherit; + border: none; + padding: 0; + font: inherit; + cursor: pointer; + text-align: left; + font-family: unset; + outline: none; + font-family: Lexend,sans-serif; + color: transparent; +} + +.c13:disabled { + pointer-events: none; + cursor: default; +} + +.c14 { + display: inline-block; + position: relative; +} + +.c14:hover { + -webkit-text-decoration: underline; + text-decoration: underline; + color: transparent; +} + +.c14:hover:not(:active) [data-icon-for="button"] img { + -webkit-filter: invert(98%) sepia(98%) saturate(0%) hue-rotate(328deg) brightness(102%) contrast(102%); + filter: invert(98%) sepia(98%) saturate(0%) hue-rotate(328deg) brightness(102%) contrast(102%); +} + +.c14:active { + color: transparent; +} + +.c14:disabled { + color: transparent; +} + +.c12 > :first-child:focus-visible .shadow { + box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%); +} + +.c12 > :first-child:hover .shadow { + box-shadow: 0.125rem 0.125rem 0 rgba(255,229,85,100%); +} + +.c12 > :first-child:active .shadow { + box-shadow: 0.125rem 0.125rem 0 rgba(255,229,85,100%), 0.25rem 0.25rem 0 rgba(87,87,87,100%); +} + +.c12 > :first-child:disabled .icon-container { + background: transparent; +} + +.c12 > :first-child:hover .icon-container { + background: #222222; +} + +.c12 > :first-child:active .icon-container { + background: transparent; +} + +.c24 { + width: 1.5rem; + height: 1.5rem; +} + +.c21 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 0.25rem; + outline: none; + border-radius: 0.375rem; + padding: 0.25rem; + margin: -0.25rem; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + font: inherit; + background: none; + border: none; + -webkit-text-decoration: underline; + text-decoration: underline; + cursor: pointer; + color: #222222; +} + +.c21 .c23 { + -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%); + filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%); +} + +.c21:focus-visible { + box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%); +} + +.c21:visited { + color: #575757; +} + +.c21:active { + color: #222222; +} + +.c21:active .c23 { + -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%); + filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%); +} + +.c21[disabled] { + cursor: not-allowed; + color: #808080; +} + +.c21[disabled] .c23 { + -webkit-filter: invert(54%) sepia(0%) saturate(38%) hue-rotate(176deg) brightness(92%) contrast(91%); + filter: invert(54%) sepia(0%) saturate(38%) hue-rotate(176deg) brightness(92%) contrast(91%); +} + +@media (hover:hover) { + .c21:hover, + .c21:visited:hover { + color: #222222; + } + + .c21:hover .c23, + .c21:visited:hover .c23 { + -webkit-filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%); + filter: invert(10%) sepia(1%) saturate(236%) hue-rotate(314deg) brightness(95%) contrast(91%); + } +} + +
+
+
+
+ info +
+
+
+

+ Information +

+
+ Lorem ipsum dolor sit amet consectetur. Arcu proin rhoncus eget aliquet. +
+
+
+
+ +
+
+
+ + + Link + +
+ chevron-right +
+ +
+`; diff --git a/src/components/molecules/OakInlineBanner/index.ts b/src/components/molecules/OakInlineBanner/index.ts new file mode 100644 index 00000000..ac587b12 --- /dev/null +++ b/src/components/molecules/OakInlineBanner/index.ts @@ -0,0 +1 @@ +export * from "./OakInlineBanner"; diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts index 49dffb5f..eafdb53d 100644 --- a/src/components/molecules/index.ts +++ b/src/components/molecules/index.ts @@ -28,3 +28,4 @@ export * from "./OakAccordion"; export * from "./OakModal"; export * from "./OakModalCenter"; export * from "./OakCardWithHandDrawnBorder"; +export * from "./OakInlineBanner"; diff --git a/src/image-map.ts b/src/image-map.ts index fcf8c19f..e1b895a3 100644 --- a/src/image-map.ts +++ b/src/image-map.ts @@ -18,6 +18,8 @@ export const icons = { "worksheet-3": "v1699895429/icons/bzhojpjxp9rukdvh7daz.svg", "chevron-right": "v1707752509/icons/vk9xxxhnsltsickom6q9.svg", save: "v1699895505/icons/rh1ahwwtbemvz0ihluew.svg", + success: "v1699895534/icons/Icon-Success_aiiprx", + error: "v1699895534/icons/Icon-Error_r25aza.svg", "quiz-3": "v1699895534/icons/zoayhgtrotv32fad7d3k.svg", "chevron-down": "v1699953557/icons/botfld6brychmttwtv6u.svg", linkedin: "v1699953592/icons/leqneklorqqzb1zo6rf1.svg", From 4c8e18374dc7082b4f1057737b64ea1b0070ad39 Mon Sep 17 00:00:00 2001 From: Ben Titterington Date: Thu, 4 Jul 2024 16:13:06 +0100 Subject: [PATCH 2/3] chore: changing inline banner info background --- src/components/molecules/OakInlineBanner/OakInlineBanner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/molecules/OakInlineBanner/OakInlineBanner.tsx b/src/components/molecules/OakInlineBanner/OakInlineBanner.tsx index 83870d12..a1a52b38 100644 --- a/src/components/molecules/OakInlineBanner/OakInlineBanner.tsx +++ b/src/components/molecules/OakInlineBanner/OakInlineBanner.tsx @@ -69,7 +69,7 @@ export const bannerTypes: BannerTypes = { info: { icon: "info", iconColorFilter: "black", - backgroundColour: "lavender50", + backgroundColour: "lavender30", borderColour: "lavender", }, neutral: { From d907af2d7d2cfbe975929066b1b5901c355bf200 Mon Sep 17 00:00:00 2001 From: Ben Titterington Date: Mon, 8 Jul 2024 08:43:31 +0100 Subject: [PATCH 3/3] chore: update inline banner snapshot --- .../OakInlineBanner/__snapshots__/OakInlineBanner.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/molecules/OakInlineBanner/__snapshots__/OakInlineBanner.test.tsx.snap b/src/components/molecules/OakInlineBanner/__snapshots__/OakInlineBanner.test.tsx.snap index 611323c6..d304d434 100644 --- a/src/components/molecules/OakInlineBanner/__snapshots__/OakInlineBanner.test.tsx.snap +++ b/src/components/molecules/OakInlineBanner/__snapshots__/OakInlineBanner.test.tsx.snap @@ -3,7 +3,7 @@ exports[`OakInlineBanner matches snapshot 1`] = ` .c0 { padding: 1rem; - background: #c6d1ef; + background: #e3e9fb; border-color: #a0b6f2; border-radius: 0.375rem; border-style: solid;