From 1eea54ae41fb4b56e357d01910217bd7928963eb Mon Sep 17 00:00:00 2001 From: thyhjwb6 Date: Tue, 15 Dec 2020 11:31:35 +0000 Subject: [PATCH] feat(Badge): Migrate to styled-components --- packages/css-framework/index.scss | 1 - .../css-framework/src/components/_badge.scss | 195 --------------- .../src/components/_phase-banner.scss | 2 +- .../src/components/Badge/Badge.stories.tsx | 3 +- .../src/components/Badge/Badge.test.tsx | 4 +- .../src/components/Badge/Badge.tsx | 64 ++--- .../components/Badge/partials/StyledBadge.tsx | 225 ++++++++++++++++++ .../src/components/Badge/types.ts | 32 +++ .../components/PhaseBanner/PhaseBanner.tsx | 6 +- 9 files changed, 288 insertions(+), 244 deletions(-) delete mode 100644 packages/css-framework/src/components/_badge.scss create mode 100644 packages/react-component-library/src/components/Badge/partials/StyledBadge.tsx create mode 100644 packages/react-component-library/src/components/Badge/types.ts diff --git a/packages/css-framework/index.scss b/packages/css-framework/index.scss index 3ac7bde347..33fd8a38a4 100644 --- a/packages/css-framework/index.scss +++ b/packages/css-framework/index.scss @@ -34,7 +34,6 @@ @use "src/components/alert"; @use "src/components/avatar"; @use "src/components/autosuggest"; -@use "src/components/badge"; @use "src/components/breadcrumbs"; @use "src/components/btn"; @use "src/components/btn-group"; diff --git a/packages/css-framework/src/components/_badge.scss b/packages/css-framework/src/components/_badge.scss deleted file mode 100644 index 921698561b..0000000000 --- a/packages/css-framework/src/components/_badge.scss +++ /dev/null @@ -1,195 +0,0 @@ -@use "sass:map"; -@use "../abstracts/mixins" as m; -@use "../abstracts/functions" as f; - - -$badge: ( - border-radius: 2px, - border-radius-pill: 100px -); - -$badge-sizes: ( - xsmall: ( - font-size: f.font-size("xs"), - font-weight: 700, - line-height: 1.4, - padding: f.spacing("px") f.spacing("2"), - padding-pill: f.spacing("px") f.spacing("2") - ), - small: ( - font-size: f.font-size("s"), - font-weight: 700, - line-height: 1.4, - padding: f.spacing("1") f.spacing("2"), - padding-pill: f.spacing("1") f.spacing("3") - ), - regular: ( - font-size: f.font-size("base"), - font-weight: 600, - line-height: 1.3, - padding: f.spacing("1") f.spacing("2"), - padding-pill: f.spacing("1") f.spacing("4") - ), - large: ( - font-size: f.font-size("base"), - font-weight: 600, - line-height: 1.3, - padding: f.spacing("2") f.spacing("3"), - padding-pill: f.spacing("2") f.spacing("4") - ), - xlarge: ( - font-size: f.font-size("m"), - font-weight: 600, - line-height: 1.3, - padding: f.spacing("2") f.spacing("3"), - padding-pill: f.spacing("2") f.spacing("4") - ) -); - -$badge-states: ( - neutral: ( - solid-text: f.color("neutral", "white"), - solid-bg: f.color("neutral", "500"), - solid-shadow: f.shadow("1"), - faded-text: f.color("neutral", "400"), - faded-bg: f.color("neutral", "100"), - faded-shadow: f.shadow("0") - ), - action: ( - solid-text: f.color("neutral", "white"), - solid-bg: f.color("action", "600"), - solid-shadow: f.shadow("1"), - faded-text: f.color("action", "700"), - faded-bg: f.color("action", "100"), - faded-shadow: f.shadow("0") - ), - success: ( - solid-text: f.color("neutral", "white"), - solid-bg: f.color("success", "800"), - solid-shadow: f.shadow("1"), - faded-text: f.color("success", "800"), - faded-bg: f.color("success", "100"), - faded-shadow: f.shadow("0") - ), - warning: ( - solid-text: f.color("warning", "800"), - solid-bg: f.color("warning", "300"), - solid-shadow: f.shadow("0"), - faded-text: f.color("warning", "800"), - faded-bg: f.color("warning", "000"), - faded-shadow: f.shadow("0") - ), - danger: ( - solid-text: f.color("neutral", "white"), - solid-bg: f.color("danger", "700"), - solid-shadow: f.shadow("1"), - faded-text: f.color("danger", "800"), - faded-bg: f.color("danger", "100"), - faded-shadow: f.shadow("0") - ), - supa: ( - solid-text: f.color("neutral", "white"), - solid-bg: f.color("supa", "600"), - solid-shadow: f.shadow("1"), - faded-text: f.color("supa", "600"), - faded-bg: f.color("supa", "000"), - faded-shadow: f.shadow("0") - ), - supb: ( - solid-text: f.color("neutral", "white"), - solid-bg: f.color("supb", "600"), - solid-shadow: f.shadow("1"), - faded-text: f.color("supb", "600"), - faded-bg: f.color("supb", "100"), - faded-shadow: f.shadow("0") - ), - supc: ( - solid-text: f.color("neutral", "white"), - solid-bg: f.color("supc", "700"), - solid-shadow: f.shadow("1"), - faded-text: f.color("supc", "800"), - faded-bg: f.color("supc", "100"), - faded-shadow: f.shadow("0") - ), - supd: ( - solid-text: f.color("neutral", "white"), - solid-bg: f.color("supd", "700"), - solid-shadow: f.shadow("1"), - faded-text: f.color("supd", "800"), - faded-bg: f.color("supd", "100"), - faded-shadow: f.shadow("0") - ), - supe: ( - solid-text: f.color("neutral", "white"), - solid-bg: f.color("supe", "800"), - solid-shadow: f.shadow("1"), - faded-text: f.color("supe", "800"), - faded-bg: f.color("supe", "200"), - faded-shadow: f.shadow("0") - ), - supf: ( - solid-text: f.color("neutral", "white"), - solid-bg: f.color("supf", "700"), - solid-shadow: f.shadow("1"), - faded-text: f.color("supf", "800"), - faded-bg: f.color("supf", "200"), - faded-shadow: f.shadow("0") - ), - -); - -.rn-badge { - display: inline-block; - vertical-align: middle; - white-space: nowrap; - border-radius: map.get($badge, "border-radius"); - - // provide a default fallback for the `.rn-badge` class - padding: f.map-deep-get($badge-sizes, "regular", "padding"); - font-size: f.map-deep-get($badge-sizes, "regular", "font-size"); - font-weight: f.map-deep-get($badge-sizes, "regular", "font-weight"); - line-height: f.map-deep-get($badge-sizes, "regular", "line-height"); - background-color: f.map-deep-get($badge-states, "neutral", "solid-bg"); - color: f.map-deep-get($badge-states, "neutral", "solid-text"); - text-shadow: f.map-deep-get($badge-states, "neutral", "solid-shadow"); - - @each $state, $variation in $badge-states { - &.rn-badge--#{$state} { - background-color: map.get($variation, "solid-bg"); - color: map.get($variation, "solid-text"); - text-shadow: map.get($variation, "solid-shadow"); - } - } - - &--faded { - @each $state, $variation in $badge-states { - &.rn-badge--#{$state} { - background-color: map.get($variation, "faded-bg"); - color: map.get($variation, "faded-text"); - text-shadow: map.get($variation, "faded-shadow"); - } - } - } - - @each $size, $values in $badge-sizes { - &.rn-badge--#{$size} { - font-size: map.get($values, "font-size"); - padding: map.get($values, "padding"); - font-weight: map.get($values, "font-weight"); - line-height: map.get($values, "line-height"); - } - } - - - &.rn-badge--pill { - padding: f.map-deep-get($badge-sizes, "regular", "padding-pill"); - border-radius: map.get($badge, "border-radius-pill"); - - @each $size, $values in $badge-sizes { - &.rn-badge--#{$size} { - font-size: map.get($values, "font-size"); - padding: map.get($values, "padding-pill"); - } - } - } -} diff --git a/packages/css-framework/src/components/_phase-banner.scss b/packages/css-framework/src/components/_phase-banner.scss index d441b9f74d..f580f10cd2 100644 --- a/packages/css-framework/src/components/_phase-banner.scss +++ b/packages/css-framework/src/components/_phase-banner.scss @@ -26,7 +26,7 @@ } } -.rn-phase-banner .rn-badge { +.rn-phase-banner__badge { margin: 0; text-transform: capitalize; } diff --git a/packages/react-component-library/src/components/Badge/Badge.stories.tsx b/packages/react-component-library/src/components/Badge/Badge.stories.tsx index b2fbe192f1..4208405947 100644 --- a/packages/react-component-library/src/components/Badge/Badge.stories.tsx +++ b/packages/react-component-library/src/components/Badge/Badge.stories.tsx @@ -8,9 +8,8 @@ import { BADGE_COLOR_VARIANT, BADGE_SIZE, BADGE_VARIANT, - BadgeColorType, - BadgeSizeType, } from '.' +import { BadgeColorType, BadgeSizeType } from './types' const stories = storiesOf('Badge', module) const fadedExamples = storiesOf('Badge/Examples/Faded', module) diff --git a/packages/react-component-library/src/components/Badge/Badge.test.tsx b/packages/react-component-library/src/components/Badge/Badge.test.tsx index 3cbeb086be..1a8325373d 100644 --- a/packages/react-component-library/src/components/Badge/Badge.test.tsx +++ b/packages/react-component-library/src/components/Badge/Badge.test.tsx @@ -21,14 +21,14 @@ describe('Badge', () => { colorVariant={BADGE_COLOR_VARIANT.SOLID} size={BADGE_SIZE.REGULAR} variant={BADGE_VARIANT.PILL} - dummy-testid="example" + data-arbitrary="example" /> ) }) it('applies the props to the wrapper element', () => { expect(wrapper.getByTestId('badge')).toHaveAttribute( - 'dummy-testid', + 'data-arbitrary', 'example' ) }) diff --git a/packages/react-component-library/src/components/Badge/Badge.tsx b/packages/react-component-library/src/components/Badge/Badge.tsx index e3025c695a..66fc55f2f3 100644 --- a/packages/react-component-library/src/components/Badge/Badge.tsx +++ b/packages/react-component-library/src/components/Badge/Badge.tsx @@ -1,61 +1,41 @@ import React from 'react' -import classNames from 'classnames' import { ComponentWithClass } from '../../common/ComponentWithClass' +import { StyledBadge } from './partials/StyledBadge' +import { BADGE_COLOR, BADGE_COLOR_VARIANT, BADGE_SIZE } from './constants' import { - BADGE_COLOR, - BADGE_COLOR_VARIANT, - BADGE_SIZE, - BADGE_VARIANT, -} from './constants' - -export type BadgeColorType = - | typeof BADGE_COLOR.ACTION - | typeof BADGE_COLOR.DANGER - | typeof BADGE_COLOR.NEUTRAL - | typeof BADGE_COLOR.SUCCESS - | typeof BADGE_COLOR.WARNING - -export type BadgeSizeType = - | typeof BADGE_SIZE.XSMALL - | typeof BADGE_SIZE.SMALL - | typeof BADGE_SIZE.REGULAR - | typeof BADGE_SIZE.LARGE - | typeof BADGE_SIZE.XLARGE + BadgeColorType, + BadgeColorVariantType, + BadgeSizeType, + BadgeVariantType, +} from './types' export interface BadgeProps extends ComponentWithClass { color?: BadgeColorType - colorVariant?: - | typeof BADGE_COLOR_VARIANT.FADED - | typeof BADGE_COLOR_VARIANT.SOLID + colorVariant?: BadgeColorVariantType size?: BadgeSizeType - variant?: typeof BADGE_VARIANT.PILL + variant?: BadgeVariantType } export const Badge: React.FC = ({ children, - className, - color = BADGE_COLOR.NEUTRAL, + color: badgeColor = BADGE_COLOR.NEUTRAL, colorVariant = BADGE_COLOR_VARIANT.SOLID, size = BADGE_SIZE.REGULAR, variant, ...rest -}) => { - const classes = classNames( - 'rn-badge', - `rn-badge--${color}`, - `rn-badge--${colorVariant}`, - `rn-badge--${size}`, - `rn-badge--${variant}`, - className - ) - - return ( - - {children} - - ) -} +}) => ( + + {children} + +) Badge.displayName = 'Badge' diff --git a/packages/react-component-library/src/components/Badge/partials/StyledBadge.tsx b/packages/react-component-library/src/components/Badge/partials/StyledBadge.tsx new file mode 100644 index 0000000000..25f6d76b24 --- /dev/null +++ b/packages/react-component-library/src/components/Badge/partials/StyledBadge.tsx @@ -0,0 +1,225 @@ +import React from 'react' +import { selectors } from '@royalnavy/design-tokens' +import styled, { css } from 'styled-components' + +import { + BADGE_COLOR, + BADGE_COLOR_VARIANT, + BADGE_SIZE, + BADGE_VARIANT, +} from '../constants' +import { + BadgeColorType, + BadgeColorVariantType, + BadgeSizeType, + BadgeVariantType, +} from '../types' + +const { color, fontSize, shadow, spacing } = selectors + +interface StyledBadgeProps { + $color: BadgeColorType + $colorVariant: BadgeColorVariantType + $size: BadgeSizeType + $variant: BadgeVariantType +} + +const StyledBadgeSizeMap = { + [BADGE_SIZE.XSMALL]: css` + font-size: ${fontSize('xs')}; + font-weight: 700; + line-height: 1.4; + padding: ${spacing('px')} ${spacing('2')}; + `, + [BADGE_SIZE.SMALL]: css` + font-size: ${fontSize('s')}; + font-weight: 700; + line-height: 1.4; + padding: ${spacing('1')} ${spacing('2')}; + `, + [BADGE_SIZE.REGULAR]: css` + font-size: ${fontSize('base')}; + font-weight: 600; + line-height: 1.3; + padding: ${spacing('1')} ${spacing('2')}; + `, + [BADGE_SIZE.LARGE]: css` + font-size: ${fontSize('base')}; + font-weight: 600; + line-height: 1.3; + padding: ${spacing('2')} ${spacing('3')}; + `, + [BADGE_SIZE.XLARGE]: css` + font-size: ${fontSize('m')}; + font-weight: 600; + line-height: 1.3; + padding: ${spacing('2')} ${spacing('3')}; + `, +} + +const StyledBadgePillMap = { + [BADGE_SIZE.XSMALL]: css` + padding: ${spacing('px')} ${spacing('2')}; + `, + [BADGE_SIZE.SMALL]: css` + padding: ${spacing('1')} ${spacing('3')}; + `, + [BADGE_SIZE.REGULAR]: css` + padding: ${spacing('1')} ${spacing('4')}; + `, + [BADGE_SIZE.LARGE]: css` + padding: ${spacing('2')} ${spacing('4')}; + `, + [BADGE_SIZE.XLARGE]: css` + padding: ${spacing('2')} ${spacing('4')}; + `, +} + +const StyledBadgeColorVariantMap = { + [BADGE_COLOR.NEUTRAL]: { + [BADGE_COLOR_VARIANT.FADED]: css` + background-color: ${color('neutral', '100')}; + color: ${color('neutral', '400')}; + text-shadow: ${shadow('0')}; + `, + [BADGE_COLOR_VARIANT.SOLID]: css` + background-color: ${color('neutral', '500')}; + color: ${color('neutral', 'white')}; + text-shadow: ${shadow('1')}; + `, + }, + [BADGE_COLOR.ACTION]: { + [BADGE_COLOR_VARIANT.FADED]: css` + background-color: ${color('action', '100')}; + color: ${color('action', '700')}; + text-shadow: ${shadow('0')}; + `, + [BADGE_COLOR_VARIANT.SOLID]: css` + background-color: ${color('action', '600')}; + color: ${color('neutral', 'white')}; + text-shadow: ${shadow('1')}; + `, + }, + [BADGE_COLOR.SUCCESS]: { + [BADGE_COLOR_VARIANT.FADED]: css` + background-color: ${color('success', '100')}; + color: ${color('success', '800')}; + text-shadow: ${shadow('0')}; + `, + [BADGE_COLOR_VARIANT.SOLID]: css` + background-color: ${color('success', '800')}; + color: ${color('neutral', 'white')}; + text-shadow: ${shadow('1')}; + `, + }, + [BADGE_COLOR.WARNING]: { + [BADGE_COLOR_VARIANT.FADED]: css` + background-color: ${color('warning', '000')}; + color: ${color('warning', '800')}; + text-shadow: ${shadow('0')}; + `, + [BADGE_COLOR_VARIANT.SOLID]: css` + background-color: ${color('warning', '300')}; + color: ${color('warning', '800')}; + text-shadow: ${shadow('0')}; + `, + }, + [BADGE_COLOR.DANGER]: { + [BADGE_COLOR_VARIANT.FADED]: css` + background-color: ${color('danger', '100')}; + color: ${color('danger', '800')}; + text-shadow: ${shadow('0')}; + `, + [BADGE_COLOR_VARIANT.SOLID]: css` + background-color: ${color('danger', '700')}; + color: ${color('neutral', 'white')}; + text-shadow: ${shadow('1')}; + `, + }, + [BADGE_COLOR.SUPA]: { + [BADGE_COLOR_VARIANT.FADED]: css` + background-color: ${color('supa', '000')}; + color: ${color('supa', '600')}; + text-shadow: ${shadow('0')}; + `, + [BADGE_COLOR_VARIANT.SOLID]: css` + background-color: ${color('supa', '600')}; + color: ${color('neutral', 'white')}; + text-shadow: ${shadow('1')}; + `, + }, + [BADGE_COLOR.SUPB]: { + [BADGE_COLOR_VARIANT.FADED]: css` + background-color: ${color('supb', '100')}; + color: ${color('supb', '600')}; + text-shadow: ${shadow('0')}; + `, + [BADGE_COLOR_VARIANT.SOLID]: css` + background-color: ${color('supb', '600')}; + color: ${color('neutral', 'white')}; + text-shadow: ${shadow('1')}; + `, + }, + [BADGE_COLOR.SUPC]: { + [BADGE_COLOR_VARIANT.FADED]: css` + background-color: ${color('supc', '100')}; + color: ${color('supc', '800')}; + text-shadow: ${shadow('0')}; + `, + [BADGE_COLOR_VARIANT.SOLID]: css` + background-color: ${color('supc', '700')}; + color: ${color('neutral', 'white')}; + text-shadow: ${shadow('1')}; + `, + }, + [BADGE_COLOR.SUPD]: { + [BADGE_COLOR_VARIANT.FADED]: css` + background-color: ${color('supd', '100')}; + color: ${color('supd', '800')}; + text-shadow: ${shadow('0')}; + `, + [BADGE_COLOR_VARIANT.SOLID]: css` + background-color: ${color('supd', '700')}; + color: ${color('neutral', 'white')}; + text-shadow: ${shadow('1')}; + `, + }, + [BADGE_COLOR.SUPE]: { + [BADGE_COLOR_VARIANT.FADED]: css` + background-color: ${color('supe', '200')}; + color: ${color('supe', '800')}; + text-shadow: ${shadow('0')}; + `, + [BADGE_COLOR_VARIANT.SOLID]: css` + background-color: ${color('supe', '800')}; + color: ${color('neutral', 'white')}; + text-shadow: ${shadow('1')}; + `, + }, + [BADGE_COLOR.SUPF]: { + [BADGE_COLOR_VARIANT.FADED]: css` + background-color: ${color('supf', '200')}; + color: ${color('supf', '800')}; + text-shadow: ${shadow('1')}; + `, + [BADGE_COLOR_VARIANT.SOLID]: css` + background-color: ${color('supf', '700')}; + color: ${color('neutral', 'white')}; + text-shadow: ${shadow('1')}; + `, + }, +} + +export const StyledBadge = styled.span` + display: inline-block; + vertical-align: middle; + white-space: nowrap; + border-radius: ${({ $variant }) => + $variant === BADGE_VARIANT.PILL ? '100px' : '2px'}; + + ${({ $color, $colorVariant, $size, $variant }) => css` + ${StyledBadgeSizeMap[$size]} + ${StyledBadgeColorVariantMap[$color][$colorVariant]}} + ${$variant === BADGE_VARIANT.PILL && StyledBadgePillMap[$size]} + `} +` diff --git a/packages/react-component-library/src/components/Badge/types.ts b/packages/react-component-library/src/components/Badge/types.ts new file mode 100644 index 0000000000..23b19f9d77 --- /dev/null +++ b/packages/react-component-library/src/components/Badge/types.ts @@ -0,0 +1,32 @@ +import { + BADGE_COLOR, + BADGE_COLOR_VARIANT, + BADGE_SIZE, + BADGE_VARIANT, +} from './constants' + +export type BadgeColorType = + | typeof BADGE_COLOR.ACTION + | typeof BADGE_COLOR.DANGER + | typeof BADGE_COLOR.NEUTRAL + | typeof BADGE_COLOR.SUCCESS + | typeof BADGE_COLOR.WARNING + | typeof BADGE_COLOR.SUPA + | typeof BADGE_COLOR.SUPB + | typeof BADGE_COLOR.SUPC + | typeof BADGE_COLOR.SUPD + | typeof BADGE_COLOR.SUPE + | typeof BADGE_COLOR.SUPF + +export type BadgeSizeType = + | typeof BADGE_SIZE.XSMALL + | typeof BADGE_SIZE.SMALL + | typeof BADGE_SIZE.REGULAR + | typeof BADGE_SIZE.LARGE + | typeof BADGE_SIZE.XLARGE + +export type BadgeColorVariantType = + | typeof BADGE_COLOR_VARIANT.FADED + | typeof BADGE_COLOR_VARIANT.SOLID + +export type BadgeVariantType = typeof BADGE_VARIANT.PILL diff --git a/packages/react-component-library/src/components/PhaseBanner/PhaseBanner.tsx b/packages/react-component-library/src/components/PhaseBanner/PhaseBanner.tsx index f073453632..4325674120 100755 --- a/packages/react-component-library/src/components/PhaseBanner/PhaseBanner.tsx +++ b/packages/react-component-library/src/components/PhaseBanner/PhaseBanner.tsx @@ -19,7 +19,11 @@ export const PhaseBanner: React.FC = ({ className={!isFullWidth ? 'rn-container' : 'rn-phase-banner__container'} data-testid="phase-banner-wrapper" > - + {phase}