From b2bf6182568cb398f2959c4abd06f262ed2298f6 Mon Sep 17 00:00:00 2001 From: Nathan Jamal Date: Tue, 14 Mar 2023 11:41:38 +0000 Subject: [PATCH 1/2] feat(logo): update logo variant names update logo vartiant names to match designs. deprecate color prop and ad usage prop as the new way to select variant. update the docs HEYUI-263 --- packages/logo/src/Logo.tsx | 13 +++++++-- packages/logo/src/Logo.types.ts | 6 +++- packages/logo/src/docs/Component.stories.mdx | 17 +++++------ packages/logo/src/docs/Description.mdx | 30 ++++++++++++++------ packages/logo/src/styles/default.module.css | 13 ++++----- 5 files changed, 50 insertions(+), 29 deletions(-) diff --git a/packages/logo/src/Logo.tsx b/packages/logo/src/Logo.tsx index d03d5130c..d5c856030 100644 --- a/packages/logo/src/Logo.tsx +++ b/packages/logo/src/Logo.tsx @@ -6,13 +6,20 @@ import styles from './styles/default.module.css'; function Logo({ fontSize = 65, - color = 'primary', + color, + usage = 'dark_bg', ariaHidden = true, title, ariaLabel, role, dataTestId, }: LogoProps) { + //map color to usage so we dont break old intergrations + let colorWay = usage; + + if (color === 'secondary') colorWay = 'light_bg'; + if (color === 'tertiary') colorWay = 'mint_bg'; + return ( {title && {title}} export const LogoTemplate = args => { - const { color } = args; + const { usage } = args; const backgroundColors = { - primary: '#052962', - secondary: '#FFFFFF', - tertiary: '#F1F4FA', + ['dark_bg']: '#052962', + ['light_bg']: '#F1F4FA', + ['mint_bg']: '#00CEA5', }; return (
{ >
{ { control: 'number', }, color: { - control: { - type: 'select', - options: ['primary', 'secondary', 'tertiary'], - default: 'primary', + table: { + disable: true, }, }, role: { diff --git a/packages/logo/src/docs/Description.mdx b/packages/logo/src/docs/Description.mdx index 79bba9aaf..fb935da0c 100644 --- a/packages/logo/src/docs/Description.mdx +++ b/packages/logo/src/docs/Description.mdx @@ -1,10 +1,10 @@ import { Container, Row, Col } from 'storybook/blocks'; import Logo from '../Logo'; -## Colors +## Usage -Use the `color` prop to change the visual color of the Logo. -You can set the value to `primary`, `secondary` , `tertiary` +There are 3 variant of the logo. The logo variant should be chosen based on the type of color that it will be used against. +The `usage` prop accepts `dark_bg`, `light_bg` & `mint_bg`. - +
- +
- +
+ +## The color prop + +`color` is a **deprecated** property that was used to choose the logo variant. +Old intergrations using this prop will continue to work for now. However, we strongly recommend updating your code to use `usage`. +The `color` prop will be removed in coming versions of this package. + +_Check this table for mapping._ + +| Usage | Color | +| -------- | --------- | +| dark_bg | primary | +| light_bg | secondary | +| mint_bg | tertiary | diff --git a/packages/logo/src/styles/default.module.css b/packages/logo/src/styles/default.module.css index e8b2341e6..aa23ff4d7 100644 --- a/packages/logo/src/styles/default.module.css +++ b/packages/logo/src/styles/default.module.css @@ -35,23 +35,22 @@ * Colors */ -.primary { +.dark_bg { fill: var(--fill-primary-color); } -.secondary { +.light_bg { fill: var(--fill-secondary-color); } -.tertiary { +.mint_bg { fill: var(--fill-tertiary-color); } -.undermark_primary { +.undermark_dark_bg { fill: var(--fill-primary-undermark-color); } - -.undermark_secondary { +.undermark_light_bg { fill: var(--fill-secondary-undermark-color); } -.undermark_tertiary { +.undermark_mint_bg { fill: var(--fill-tertiary-undermark-color); } From c24382b9da62e9ff28b2251517be432d6c13f278 Mon Sep 17 00:00:00 2001 From: Nathan Jamal Date: Tue, 14 Mar 2023 16:29:51 +0000 Subject: [PATCH 2/2] update tests --- .../__snapshots__/Logo.snapshot.test.tsx.snap | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/logo/src/__tests__/__snapshots__/Logo.snapshot.test.tsx.snap b/packages/logo/src/__tests__/__snapshots__/Logo.snapshot.test.tsx.snap index 4b6e4ecf4..ad925d201 100644 --- a/packages/logo/src/__tests__/__snapshots__/Logo.snapshot.test.tsx.snap +++ b/packages/logo/src/__tests__/__snapshots__/Logo.snapshot.test.tsx.snap @@ -13,13 +13,13 @@ Object { xmlns="http://www.w3.org/2000/svg" >