diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js index 9913894ce..74db406a5 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,114 @@ 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, + beforeColor: palette.blue.base, + iconColor: palette.blue.base, + }, + warning: { + backgroundColor: palette.yellow.light3, + color: palette.yellow.dark2, + borderColor: palette.yellow.light2, + linkColor: palette.yellow.dark3, + beforeColor: palette.yellow.base, + iconColor: palette.yellow.dark2, + }, + danger: { + backgroundColor: palette.red.light3, + color: palette.red.dark2, + borderColor: palette.red.light2, + linkColor: palette.red.dark3, + beforeColor: palette.red.base, + iconColor: palette.red.base, + }, + 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, + beforeColor: palette.blue.light1, + iconColor: palette.blue.light1, + }, + warning: { + backgroundColor: palette.yellow.dark3, + color: palette.yellow.light2, + borderColor: palette.yellow.dark2, + linkColor: palette.yellow.light3, + beforeColor: palette.yellow.dark2, + iconColor: palette.yellow.base, + }, + danger: { + backgroundColor: palette.red.dark3, + color: palette.red.light2, + borderColor: palette.red.dark2, + linkColor: palette.red.light3, + beforeColor: palette.red.base, + iconColor: palette.red.light1, + }, + 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}; + // copied from LG + ::before { + background: linear-gradient(to left, transparent 6px, ${(props) => styleMapLight[props.variant].beforeColor}} 6px); + } + a { + color: ${(props) => styleMapLight[props.variant].linkColor}; + :hover { + color: ${(props) => styleMapLight[props.variant].color}; + text-decoration-color: ${(props) => styleMapLight[props.variant].color}; + } + } + > svg { + color: ${(props) => styleMapLight[props.variant].iconColor}; + } - 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}; + ::before { + background: linear-gradient(to left, transparent 6px, ${(props) => styleMapDark[props.variant].beforeColor} 6px); + } + a { + color: ${(props) => styleMapDark[props.variant].linkColor}; + :hover { + color: ${(props) => styleMapDark[props.variant].color}; + text-decoration-color: ${(props) => styleMapDark[props.variant].color}; + } + } + > svg { + color: ${(props) => styleMapDark[props.variant].iconColor}; + } } `; const Banner = ({ nodeData: { children, options }, ...rest }) => { - const { darkMode } = useDarkMode(); return ( - + {children.map((child, i) => ( ))} diff --git a/src/components/Banner/CTABanner.js b/src/components/Banner/CTABanner.js index 8e72e7923..a7a4876b7 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; @@ -41,10 +47,10 @@ const lgIconStyling = css` const linkStyling = css` text-decoration: none !important; + color: unset; `; const CTABanner = ({ nodeData: { children, options }, ...rest }) => { - const { darkMode } = useDarkMode(); // Handles case sensitivity for specified icons let lgIcon = 'Play'; if (options?.icon) { @@ -56,14 +62,7 @@ const CTABanner = ({ nodeData: { children, options }, ...rest }) => { return ( -
+
diff --git a/tests/unit/__snapshots__/Banner.test.js.snap b/tests/unit/__snapshots__/Banner.test.js.snap index 5f5a7495c..89fc1c0b7 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,44 @@ exports[`renders a Banner correctly 1`] = ` text-underline-offset: 3px; } +.emotion-0::before { + background: linear-gradient(to left, transparent 6px, #016BF8} 6px); +} + +.emotion-0 a { + color: #0C2657; +} + .emotion-0 a:hover { - text-decoration-color: var(--text-decoration-color); + color: #083C90; + text-decoration-color: #083C90; +} + +.emotion-0>svg { + color: #016BF8; +} + +.dark-theme .emotion-0 { + background-color: #0C2657; + color: #C3E7FE; + border-color: #083C90; +} + +.dark-theme .emotion-0::before { + background: linear-gradient(to left, transparent 6px, #0498EC 6px); +} + +.dark-theme .emotion-0 a { + color: #E1F7FF; +} + +.dark-theme .emotion-0 a:hover { + color: #C3E7FE; + text-decoration-color: #C3E7FE; +} + +.dark-theme .emotion-0>svg { + color: #0498EC; } .emotion-2 { @@ -146,7 +185,6 @@ exports[`renders a Banner correctly 1`] = `