From fe3e0f1ac067e7733f894c98b8e2b06e96cd0b68 Mon Sep 17 00:00:00 2001 From: Maya Raman Date: Mon, 23 Sep 2024 16:20:38 -0400 Subject: [PATCH 01/10] banner --- src/components/Banner/Banner.js | 81 +++++++++++++++++++++++++++++---- 1 file changed, 73 insertions(+), 8 deletions(-) diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js index 9913894ce..af0377214 100644 --- a/src/components/Banner/Banner.js +++ b/src/components/Banner/Banner.js @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import { palette } from '@leafygreen-ui/palette'; -import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; import styled from '@emotion/styled'; import LeafyBanner, { Variant as LeafyVariant } from '@leafygreen-ui/banner'; import ComponentFactory from '../ComponentFactory'; @@ -14,21 +13,87 @@ export const alertMap = { success: LeafyVariant.Success, }; +const styleMapLight = { + info: { + backgroundColor: palette.blue.light3, + color: palette.blue.dark2, + borderColor: palette.blue.light2, + linkColor: palette.blue.dark3, + }, + warning: { + backgroundColor: palette.yellow.light3, + color: palette.yellow.dark2, + borderColor: palette.yellow.light2, + linkColor: palette.yellow.dark3, + }, + danger: { + backgroundColor: palette.red.light3, + color: palette.red.dark2, + borderColor: palette.red.light2, + linkColor: palette.red.dark3, + }, + success: { + backgroundColor: palette.green.light3, + color: palette.green.dark2, + borderColor: palette.green.light2, + linkColor: palette.green.dark3, + }, +}; +const styleMapDark = { + info: { + backgroundColor: palette.blue.dark3, + color: palette.blue.light2, + borderColor: palette.blue.dark2, + linkColor: palette.blue.light3, + }, + warning: { + backgroundColor: palette.yellow.dark3, + color: palette.yellow.light2, + borderColor: palette.yellow.dark2, + linkColor: palette.yellow.light3, + }, + danger: { + backgroundColor: palette.red.dark3, + color: palette.red.light2, + borderColor: palette.red.dark2, + linkColor: palette.red.light3, + }, + success: { + backgroundColor: palette.green.dark3, + color: palette.green.light2, + borderColor: palette.green.dark2, + linkColor: palette.green.light3, + }, +}; + const StyledBanner = styled((props) => )` ${baseBannerStyle} + background-color: ${(props) => styleMapLight[props.variant].backgroundColor}; + color: ${(props) => styleMapLight[props.variant].color}; + border-color: ${(props) => styleMapLight[props.variant].borderColor}; + a { + color: ${(props) => styleMapLight[props.variant].linkColor}; + :hover { + ${(props) => styleMapLight[props.variant].color}; + } + } - a:hover { - text-decoration-color: var(--text-decoration-color); + .dark-theme & { + background-color: ${(props) => styleMapDark[props.variant].backgroundColor}; + color: ${(props) => styleMapDark[props.variant].color}; + border-color: ${(props) => styleMapDark[props.variant].borderColor}; + a { + color: ${(props) => styleMapDark[props.variant].linkColor}; + :hover { + ${(props) => styleMapDark[props.variant].color}; + } + } } `; const Banner = ({ nodeData: { children, options }, ...rest }) => { - const { darkMode } = useDarkMode(); return ( - + {children.map((child, i) => ( ))} From a3765938367dd365fc15c636e8a2edc85b3aba42 Mon Sep 17 00:00:00 2001 From: Maya Raman Date: Mon, 23 Sep 2024 16:56:56 -0400 Subject: [PATCH 02/10] CTA banner --- src/components/Banner/CTABanner.js | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/src/components/Banner/CTABanner.js b/src/components/Banner/CTABanner.js index 8e72e7923..d3496cb9b 100644 --- a/src/components/Banner/CTABanner.js +++ b/src/components/Banner/CTABanner.js @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import { css } from '@emotion/react'; -import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; import { palette } from '@leafygreen-ui/palette'; import Icon, { glyphs } from '@leafygreen-ui/icon'; import ComponentFactory from '../ComponentFactory'; @@ -9,11 +8,18 @@ import { baseBannerStyle } from './styles/bannerItemStyle'; const videoBannerStyling = css` ${baseBannerStyle}; + background-color: ${palette.blue.light3}; + border: 1px solid ${palette.blue.light2}; + color: ${palette.blue.dark2}; + .dark-theme & { + background-color: ${palette.blue.dark3}; + border: 1px solid ${palette.blue.dark2}; + color: ${palette.blue.light2}; + } align-items: center; - background-color: var(--background-color); + border-radius: 6px; - border: 1px solid var(--border); - color: var(--color); + display: flex; font-size: 14px; margin: 24px 0px; @@ -44,7 +50,6 @@ const linkStyling = css` `; const CTABanner = ({ nodeData: { children, options }, ...rest }) => { - const { darkMode } = useDarkMode(); // Handles case sensitivity for specified icons let lgIcon = 'Play'; if (options?.icon) { @@ -56,14 +61,7 @@ const CTABanner = ({ nodeData: { children, options }, ...rest }) => { return ( -
+
From 66c26cb97461020fd17b8a34eecdbc853357e8c7 Mon Sep 17 00:00:00 2001 From: Maya Raman Date: Mon, 23 Sep 2024 16:58:50 -0400 Subject: [PATCH 03/10] tests --- tests/unit/__snapshots__/Banner.test.js.snap | 18 +++++-- .../unit/__snapshots__/CTABanner.test.js.snap | 52 +++++++++++++------ 2 files changed, 51 insertions(+), 19 deletions(-) diff --git a/tests/unit/__snapshots__/Banner.test.js.snap b/tests/unit/__snapshots__/Banner.test.js.snap index 5f5a7495c..d602b4787 100644 --- a/tests/unit/__snapshots__/Banner.test.js.snap +++ b/tests/unit/__snapshots__/Banner.test.js.snap @@ -5,6 +5,9 @@ exports[`renders a Banner correctly 1`] = ` .emotion-0 { margin: 16px 0; font-size: 13px; + background-color: #E1F7FF; + color: #083C90; + border-color: #C3E7FE; } .emotion-0>div>div>* { @@ -28,8 +31,18 @@ exports[`renders a Banner correctly 1`] = ` text-underline-offset: 3px; } -.emotion-0 a:hover { - text-decoration-color: var(--text-decoration-color); +.emotion-0 a { + color: #0C2657; +} + +.dark-theme .emotion-0 { + background-color: #0C2657; + color: #C3E7FE; + border-color: #083C90; +} + +.dark-theme .emotion-0 a { + color: #E1F7FF; } .emotion-2 { @@ -146,7 +159,6 @@ exports[`renders a Banner correctly 1`] = `