diff --git a/documentation/content/components.feedback.badge.md b/documentation/content/components.feedback.badge.md index 069498720..eb1065bd4 100644 --- a/documentation/content/components.feedback.badge.md +++ b/documentation/content/components.feedback.badge.md @@ -14,19 +14,77 @@ tabs: New Data`} language={"tsx"} /> - ## Theme + ## Text overflow + + + New Data New Data New Data New Data New Data + `} language={"tsx"} /> - These are the available `theme`s for this component: `success`, `warning`, `danger`, `neutral`, `info` and `purple`. The default is `info` + ## Emphasis - Info - Neutral - Success - Warning - Danger - Purple + Subtle + Bold + `} language={"tsx"} /> + + + ## Theme + + The following `theme`s semantic themes are available: `success`, `warning`, `danger`, `neutral`, `info`. + + + Moreover, any colour that has been set up as a ColorScheme accent is also available to use. Currently the available non-semantic colours are `grey`, `blue`, `purple`, `cyan`, `green`, `magenta`, `red`, `teal`, `orange`, `yellow`, `lime`. + + + If NO theme is passed in. The badge will attempt to pick up a colour based on the accent of the closest parent with a `ColorScheme`. + + + + Picks up from ColorScheme + + Info + Neutral + Success + Warning + Danger + + + Grey + Blue + Purple + Cyan + Green + Magenta + Red + Teal + Orange + Yellow + Lime + + Picks up from ColorScheme + + + Info + Neutral + Success + Warning + Danger + + + Grey + Blue + Purple + Cyan + Green + Magenta + Red + Teal + Orange + Yellow + Lime + `} language={"tsx"} /> @@ -55,6 +113,12 @@ tabs: + + + + + + - title: Visual content: >- ## Structure diff --git a/lib/src/components/action-icon/ActionIcon.tsx b/lib/src/components/action-icon/ActionIcon.tsx index ddf025741..5bac6af99 100644 --- a/lib/src/components/action-icon/ActionIcon.tsx +++ b/lib/src/components/action-icon/ActionIcon.tsx @@ -6,9 +6,10 @@ import * as React from 'react' import { styled, theme } from '~/stitches' import { NavigatorActions } from '~/types' import { Override } from '~/utilities' +import { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper' +import type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper' import { Icon } from '../icon/Icon' -import { Tooltip } from '../tooltip/Tooltip' import { ActionIconSizeMap } from './ActionIcon.constants' const getSimpleVariant = (base: string, interact: string, active: string) => ({ @@ -198,39 +199,14 @@ const StyledButton = styled('button', { ] }) -type ConditionallyWrapWithTooltipProps = { - hasTooltip: boolean - label: string - tooltipSide?: 'bottom' | 'left' | 'right' | 'top' - children: React.ReactNode -} - -const ConditionallyWrapWithTooltip: React.FC< - ConditionallyWrapWithTooltipProps -> = ({ hasTooltip, label, tooltipSide, children }) => { - if (hasTooltip) { - return ( - - {children} - {label} - - ) - } - - // Ignore fragment error as this is the one place we will allow it - // eslint-disable-next-line - return <>{children} -} - type ActionIconProps = Override< React.ComponentProps, VariantProps & { as?: string | React.ReactNode children: React.ReactNode label: string - hasTooltip?: boolean - tooltipSide?: 'bottom' | 'left' | 'right' | 'top' - } & NavigatorActions + } & Omit & + NavigatorActions > export const ActionIcon = React.forwardRef( @@ -263,7 +239,7 @@ export const ActionIcon = React.forwardRef( : ({ type: 'button' } as const) return ( - ( }) })} - + ) } ) diff --git a/lib/src/components/badge/Badge.context.tsx b/lib/src/components/badge/Badge.context.tsx new file mode 100644 index 000000000..9d1c3d5cb --- /dev/null +++ b/lib/src/components/badge/Badge.context.tsx @@ -0,0 +1,29 @@ +import * as React from 'react' + +import type { TBadgeProps } from './Badge' + +type TBadgeProviderProps = { + size?: TBadgeProps['size'] + overflow?: TBadgeProps['overflow'] +} + +type TBadgeContext = TBadgeProviderProps & { + isOverflowing?: boolean + setIsOverflowing?: React.Dispatch> +} + +export const BadgeContext = React.createContext({}) + +export const BadgeProvider = ({ + size, + overflow, + children +}: React.PropsWithChildren) => { + const [isOverflowing, setIsOverflowing] = React.useState(false) + + const value = React.useMemo( + () => ({ size, overflow, isOverflowing, setIsOverflowing }), + [size, overflow, isOverflowing, setIsOverflowing] + ) + return {children} +} diff --git a/lib/src/components/badge/Badge.tsx b/lib/src/components/badge/Badge.tsx index ed08de23f..055b92c69 100644 --- a/lib/src/components/badge/Badge.tsx +++ b/lib/src/components/badge/Badge.tsx @@ -1,10 +1,16 @@ import * as React from 'react' +import { Flex } from '~/components/flex' +import { Icon } from '~/components/icon' +import { ColorScheme, TcolorScheme } from '~/experiments/color-scheme' import { styled } from '~/stitches' +import { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper' +import { useCallbackRefState } from '~/utilities/hooks/useCallbackRef' +import { BadgeText } from './BadgeText' +import { BadgeIcon } from './BadgeIcon' +import { BadgeContext, BadgeProvider } from './Badge.context' -import { Box } from '../box' -import { Flex } from '../flex' -import { Icon } from '../icon' +import { colorSchemes as badgeColorSchemes } from './stitches.badge.colorscheme.config' const StyledBadge = styled(Flex, { justifyContent: 'center', @@ -17,90 +23,110 @@ const StyledBadge = styled(Flex, { mr: '$1' }, variants: { - theme: { - success: { - bg: '$successLight', - color: '$successMid' + emphasis: { + subtle: { + color: '$textSubtle', + background: '$backgroundSubtle' }, - warning: { - bg: '$warningLight', - color: '$warningText' - }, - danger: { - bg: '$dangerLight', - color: '$dangerMid' - }, - neutral: { - bg: '$tonal50', - color: '$tonal400' - }, - info: { - bg: '$primaryLight', - color: '$primaryMid' - }, - purple: { - bg: '$purple200', - color: '$purple1000' + bold: { + color: '$textBold', + background: '$backgroundBold' } }, size: { xs: { - fontSize: '$sm', - px: '$1', - height: '$2' + px: '$1' }, sm: { - fontSize: '$md', px: '$1', - height: '$3' + py: '$0' }, md: { - fontSize: '$md', px: '$2', - height: '$4' + py: '$1' } } } }) -type BadgeProps = React.ComponentProps - -export const Badge: React.FC = ({ - theme = 'info', - size = 'sm', - children, - ...rest -}) => { - return ( - - {React.Children.map(children, (child) => { - if (typeof child === 'string' || typeof child === 'number') { - return ( - - {child} - - ) - } +export type TBadgeProps = React.ComponentProps & { + theme?: keyof typeof badgeColorSchemes + overflow?: React.ComponentProps['overflow'] + colorScheme?: TcolorScheme +} - if (React.isValidElement(child) && child.type === Icon) { - return React.cloneElement( - child as React.ReactElement>, - { - size: 'sm', - css: { ...child.props.css, flexShrink: 0 } - } - ) - } - })} - - ) +type TBadge = React.ForwardRefExoticComponent & { + Icon: typeof BadgeIcon + Text: typeof BadgeText } +type TBadgeInnerProps = Omit, 'overflow'> + +const BadgeInner = React.forwardRef( + ({ theme = 'non-semantic', emphasis = 'subtle', children, ...rest }, ref) => { + const { size, overflow, isOverflowing } = React.useContext(BadgeContext) + const [badgeElRef, setBadgeElRef] = useCallbackRefState() + React.useImperativeHandle(ref, () => badgeElRef as HTMLDivElement) + + const isSemanticTheme = [ + 'info', + 'success', + 'neutral', + 'warning', + 'danger' + ].includes(theme) + + const label = badgeElRef?.textContent + + return ( + + + + {React.Children.map(children, (child) => { + if (typeof child === 'string' || typeof child === 'number') { + return {child} + } + if (React.isValidElement(child) && child.type === Icon) { + return + } + return child + })} + + + + ) + } +) + +export const Badge = React.forwardRef( + ({ size = 'sm', overflow = 'wrap', ...rest }, ref) => { + return ( + + + + ) + } +) as TBadge + Badge.displayName = 'Badge' +Badge.Icon = BadgeIcon +Badge.Text = BadgeText diff --git a/lib/src/components/badge/BadgeIcon.tsx b/lib/src/components/badge/BadgeIcon.tsx new file mode 100644 index 000000000..f96b508a9 --- /dev/null +++ b/lib/src/components/badge/BadgeIcon.tsx @@ -0,0 +1,7 @@ +import * as React from 'react' + +import { Icon } from '~/components/icon' +import { styled } from '~/stitches' + +const StyledBadgeIcon = styled(Icon, { flexShrink: 0 }) +export const BadgeIcon = (props: React.ComponentProps) => diff --git a/lib/src/components/badge/BadgeText.tsx b/lib/src/components/badge/BadgeText.tsx new file mode 100644 index 000000000..bc78e02d7 --- /dev/null +++ b/lib/src/components/badge/BadgeText.tsx @@ -0,0 +1,86 @@ +import * as React from 'react' + +import { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue' +import { BadgeContext } from './Badge.context' +import { Text } from '~/components/text' +import { styled } from '~/stitches' +import { useCallbackRefState } from '~/utilities/hooks/useCallbackRef' +import { useResizeObserver } from '~/utilities/hooks/useResizeObserver' + +/* + * Instead of sticking a resize observer on every `BadgeText` + * regardless of overflow type, split the resize logic into a component. + * Basically call the hook conditionally, only for the version with + * the `overflow === 'ellipsis'` which needs it. + * This saves us from initialising a resize observer for any badge which doesn't need it. + */ +const ObserveBadgeTextOverflow: React.VFC<{ elRef: HTMLElement | null }> = ({ + elRef +}) => { + const { setIsOverflowing } = React.useContext(BadgeContext) + + useResizeObserver({ + delay: 0, + elements: [elRef], + onResize: () => { + if (!elRef?.scrollWidth || !elRef?.clientWidth) return + setIsOverflowing?.(elRef.scrollWidth > elRef.clientWidth) + } + }) + + return null +} + +const StyledBadgeText = styled(Text, { + py: '$0', + variants: { + overflow: { + ellipsis: { + whiteSpace: 'nowrap', + overflowX: 'hidden', + textOverflow: 'ellipsis' + }, + wrap: { + whiteSpace: 'wrap' + } + } + } +}) + +type TBadgeTextProps = React.ComponentProps + +const toTextSize = { + xs: 'sm', + sm: 'md', + md: 'md' +} + +export const BadgeText = ({ + children, + ...rest +}: TBadgeTextProps): JSX.Element => { + // We need the return type here. Otherwise typsecript breaks when this type is used in Badge. Do not remove unless you want to tackle that issue again. + const { size: badgeSize, overflow } = React.useContext(BadgeContext) + + const size = React.useMemo( + () => overrideStitchesVariantValue(badgeSize, (s) => toTextSize[s]), + [badgeSize] + ) + + const [elRef, setElRef] = useCallbackRefState() + + return ( + <> + {overflow === 'ellipsis' && } + + {children} + + + ) +} diff --git a/lib/src/components/badge/__snapshots__/Badge.test.tsx.snap b/lib/src/components/badge/__snapshots__/Badge.test.tsx.snap index 471e6409a..d59ec0526 100644 --- a/lib/src/components/badge/__snapshots__/Badge.test.tsx.snap +++ b/lib/src/components/badge/__snapshots__/Badge.test.tsx.snap @@ -1,6 +1,258 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Badge component renders 1`] = ` +@media { + :root, + .t-kAUxbu { + --default-colors: [object Object]; + --default-space: [object Object]; + --default-fontSizes: [object Object]; + --default-fonts: [object Object]; + --default-sizes: [object Object]; + --default-radii: [object Object]; + --default-shadows: [object Object]; + --default-ratios: [object Object]; + --colors-textForeground: hsl(0, 0%, 12%); + --colors-textSubtle: hsl(0, 0%, 33%); + --colors-textPlaceholder: hsl(0, 0%, 46%); + --colors-background: hsl(0, 0%, 96%); + --colors-backgroundAccent: hsl(215, 100%, 98%); + --colors-grey100: hsl(0, 0%, 96%); + --colors-grey200: hsl(0, 0%, 92%); + --colors-grey300: hsl(0, 0%, 88%); + --colors-grey400: hsl(0, 0%, 81%); + --colors-grey500: hsl(0, 0%, 73%); + --colors-grey600: hsl(0, 0%, 62%); + --colors-grey700: hsl(0, 0%, 46%); + --colors-grey800: hsl(0, 0%, 33%); + --colors-grey900: hsl(0, 0%, 20%); + --colors-grey1000: hsl(0, 0%, 12%); + --colors-grey1100: hsl(0, 0%, 10%); + --colors-grey1200: hsl(0, 0%, 6%); + --colors-blue100: hsl(215, 100%, 98%); + --colors-blue200: hsl(212, 100%, 95%); + --colors-blue300: hsl(211, 100%, 92%); + --colors-blue400: hsl(211, 100%, 88%); + --colors-blue500: hsl(212, 100%, 80%); + --colors-blue600: hsl(213, 100%, 71%); + --colors-blue700: hsl(214, 100%, 58%); + --colors-blue800: hsl(217, 92%, 51%); + --colors-blue900: hsl(223, 78%, 44%); + --colors-blue1000: hsl(228, 82%, 35%); + --colors-blue1100: hsl(228, 63%, 23%); + --colors-blue1200: hsl(227, 57%, 11%); + --colors-purple100: hsl(282, 100%, 98%); + --colors-purple200: hsl(270, 100%, 95%); + --colors-purple300: hsl(271, 100%, 92%); + --colors-purple400: hsl(270, 100%, 89%); + --colors-purple500: hsl(270, 90%, 81%); + --colors-purple600: hsl(271, 97%, 69%); + --colors-purple700: hsl(273, 84%, 47%); + --colors-purple800: hsl(273, 94%, 48%); + --colors-purple900: hsl(268, 79%, 42%); + --colors-purple1000: hsl(266, 82%, 32%); + --colors-purple1100: hsl(265, 63%, 23%); + --colors-purple1200: hsl(265, 61%, 14%); + --colors-cyan100: hsl(198, 100%, 97%); + --colors-cyan200: hsl(199, 100%, 94%); + --colors-cyan300: hsl(201, 100%, 89%); + --colors-cyan400: hsl(200, 100%, 84%); + --colors-cyan500: hsl(201, 96%, 73%); + --colors-cyan600: hsl(202, 85%, 60%); + --colors-cyan700: hsl(204, 81%, 46%); + --colors-cyan800: hsl(205, 100%, 38%); + --colors-cyan900: hsl(206, 100%, 30%); + --colors-cyan1000: hsl(205, 100%, 21%); + --colors-cyan1100: hsl(206, 97%, 15%); + --colors-cyan1200: hsl(207, 73%, 9%); + --colors-green100: hsl(135, 80%, 96%); + --colors-green200: hsl(135, 72%, 92%); + --colors-green300: hsl(135, 68%, 83%); + --colors-green400: hsl(135, 65%, 76%); + --colors-green500: hsl(136, 56%, 62%); + --colors-green600: hsl(137, 42%, 49%); + --colors-green700: hsl(138, 51%, 35%); + --colors-green800: hsl(138, 68%, 29%); + --colors-green900: hsl(138, 74%, 21%); + --colors-green1000: hsl(138, 89%, 14%); + --colors-green1100: hsl(135, 91%, 9%); + --colors-green1200: hsl(123, 56%, 6%); + --colors-magenta100: hsl(330, 100%, 99%); + --colors-magenta200: hsl(329, 100%, 96%); + --colors-magenta300: hsl(332, 100%, 92%); + --colors-magenta400: hsl(333, 100%, 90%); + --colors-magenta500: hsl(333, 90%, 80%); + --colors-magenta600: hsl(333, 87%, 72%); + --colors-magenta700: hsl(333, 75%, 59%); + --colors-magenta800: hsl(333, 69%, 49%); + --colors-magenta900: hsl(333, 74%, 36%); + --colors-magenta1000: hsl(333, 86%, 25%); + --colors-magenta1100: hsl(333, 95%, 16%); + --colors-magenta1200: hsl(334, 62%, 10%); + --colors-red100: hsl(0, 100%, 99%); + --colors-red200: hsl(0, 100%, 96%); + --colors-red300: hsl(357, 100%, 93%); + --colors-red400: hsl(356, 100%, 90%); + --colors-red500: hsl(356, 96%, 83%); + --colors-red600: hsl(357, 90%, 73%); + --colors-red700: hsl(357, 80%, 59%); + --colors-red800: hsl(357, 76%, 49%); + --colors-red900: hsl(357, 73%, 37%); + --colors-red1000: hsl(357, 79%, 26%); + --colors-red1100: hsl(357, 91%, 17%); + --colors-red1200: hsl(357, 73%, 10%); + --colors-teal100: hsl(180, 83%, 95%); + --colors-teal200: hsl(180, 75%, 88%); + --colors-teal300: hsl(180, 71%, 78%); + --colors-teal400: hsl(179, 70%, 71%); + --colors-teal500: hsl(179, 65%, 52%); + --colors-teal600: hsl(179, 76%, 41%); + --colors-teal700: hsl(179, 91%, 31%); + --colors-teal800: hsl(178, 100%, 25%); + --colors-teal900: hsl(180, 100%, 18%); + --colors-teal1000: hsl(183, 100%, 13%); + --colors-teal1100: hsl(187, 92%, 10%); + --colors-teal1200: hsl(186, 56%, 7%); + --colors-orange100: hsl(38, 100%, 95%); + --colors-orange200: hsl(38, 100%, 90%); + --colors-orange300: hsl(37, 100%, 84%); + --colors-orange400: hsl(36, 96%, 78%); + --colors-orange500: hsl(33, 100%, 67%); + --colors-orange600: hsl(31, 97%, 57%); + --colors-orange700: hsl(30, 92%, 46%); + --colors-orange800: hsl(29, 100%, 43%); + --colors-orange900: hsl(27, 100%, 36%); + --colors-orange1000: hsl(24, 100%, 26%); + --colors-orange1100: hsl(20, 97%, 15%); + --colors-orange1200: hsl(20, 96%, 11%); + --colors-yellow100: hsl(53, 94%, 93%); + --colors-yellow200: hsl(54, 92%, 85%); + --colors-yellow300: hsl(54, 92%, 75%); + --colors-yellow400: hsl(52, 97%, 63%); + --colors-yellow500: hsl(51, 100%, 46%); + --colors-yellow600: hsl(49, 100%, 39%); + --colors-yellow700: hsl(48, 100%, 35%); + --colors-yellow800: hsl(46, 100%, 30%); + --colors-yellow900: hsl(44, 100%, 22%); + --colors-yellow1000: hsl(44, 100%, 18%); + --colors-yellow1100: hsl(41, 100%, 11%); + --colors-yellow1200: hsl(39, 100%, 8%); + --colors-lime100: hsl(73, 94%, 93%); + --colors-lime200: hsl(73, 94%, 87%); + --colors-lime300: hsl(73, 90%, 77%); + --colors-lime400: hsl(74, 82%, 69%); + --colors-lime500: hsl(74, 68%, 58%); + --colors-lime600: hsl(74, 77%, 41%); + --colors-lime700: hsl(75, 100%, 31%); + --colors-lime800: hsl(75, 100%, 27%); + --colors-lime900: hsl(75, 100%, 19%); + --colors-lime1000: hsl(75, 100%, 15%); + --colors-lime1100: hsl(75, 100%, 9%); + --colors-lime1200: hsl(74, 100%, 6%); + --colors-tonal50: hsl(0, 0%, 96%); + --colors-tonal100: hsl(0, 0%, 92%); + --colors-tonal200: hsl(0, 0%, 62%); + --colors-tonal300: hsl(0, 0%, 46%); + --colors-tonal400: hsl(0, 0%, 33%); + --colors-tonal500: hsl(0, 0%, 20%); + --colors-tonal600: hsl(0, 0%, 12%); + --colors-alpha100: hsla(0, 0%, 20%, 0.1); + --colors-alpha150: hsla(0, 0%, 20%, 0.15); + --colors-alpha200: hsla(0, 0%, 20%, 0.2); + --colors-alpha250: hsla(0, 0%, 20%, 0.25); + --colors-alpha600: hsla(0, 0%, 20%, 0.6); + --colors-primaryLight: hsl(215, 100%, 98%); + --colors-primary: hsl(217, 92%, 51%); + --colors-primaryMid: hsl(223, 78%, 44%); + --colors-primaryDark: hsl(228, 82%, 35%); + --colors-secondary: hsl(204, 100%, 72%); + --colors-brandRed: hsl(0, 91%, 64%); + --colors-brandRedAccent: hsl(14, 100%, 71%); + --colors-brandGreen: hsl(128, 47%, 53%); + --colors-brandGreenAccent: hsl(168, 100%, 20%); + --colors-brandPurple: hsl(256, 65%, 62%); + --colors-brandPurpleAccent: hsl(256, 93%, 35%); + --colors-brandYellow: hsl(41, 100%, 55%); + --colors-brandYellowAccent: hsl(33, 100%, 50%); + --colors-successLight: hsl(119, 44%, 94%); + --colors-success: hsl(119, 100%, 27%); + --colors-successMid: hsl(124, 100%, 22%); + --colors-successDark: hsl(126, 100%, 17%); + --colors-dangerLight: hsl(0, 77%, 95%); + --colors-danger: hsl(0, 96%, 48%); + --colors-dangerMid: hsl(0, 96%, 41%); + --colors-dangerDark: hsl(0, 97%, 34%); + --colors-warningLight: hsl(39, 100%, 94%); + --colors-warning: hsl(41, 100%, 55%); + --colors-warningMid: hsl(41, 89%, 48%); + --colors-warningDark: hsl(41, 100%, 41%); + --colors-warningText: hsl(24, 100%, 37%); + --colors-subjectEnglish: hsl(0, 91%, 64%); + --colors-subjectMaths: hsl(217, 92%, 51%); + --colors-subjectScience: hsl(256, 65%, 62%); + --colors-subjectVerbalReasoning: hsl(128, 47%, 53%); + --colors-subjectNonVerbalReasoning: hsl(41, 100%, 55%); + --colors-subjectCreativeWriting: hsl(33, 100%, 50%); + --colors-subjectExamSkills: hsl(256, 93%, 35%); + --colors-glBlueLight: hsl(222, 68%, 78%); + --colors-glBluePrimary: hsl(222, 56%, 55%); + --colors-glBlueDark: hsl(222, 35%, 43%); + --space-0: 0.125rem; + --space-1: 0.25rem; + --space-2: 0.5rem; + --space-3: 0.75rem; + --space-4: 1rem; + --space-5: 2rem; + --space-6: 2.5rem; + --space-7: 3rem; + --space-8: 4rem; + --space-9: 5rem; + --space-24: 1.5rem; + --fontSizes-xs: 0.75rem; + --fontSizes-sm: 0.875rem; + --fontSizes-md: 1rem; + --fontSizes-lg: 1.3125rem; + --fontSizes-xl: 1.75rem; + --fontSizes-2xl: 2.3125rem; + --fontSizes-3xl: 3.125rem; + --fontSizes-4xl: 5.625rem; + --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; + --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --sizes-0: 0.5rem; + --sizes-1: 1rem; + --sizes-2: 1.5rem; + --sizes-3: 2rem; + --sizes-4: 2.5rem; + --sizes-5: 3rem; + --sizes-6: 4rem; + --sizes-7: 6rem; + --sizes-8: 8rem; + --radii-0: 0.25rem; + --radii-1: 0.5rem; + --radii-2: 0.75rem; + --radii-3: 1rem; + --radii-round: 100rem; + --shadows-0: 0 1px 3px hsla(0, 0%, 20%, 0.1), 0 1px 2px hsla(0, 0%, 20%, 0.15); + --shadows-1: 0 3px 6px hsla(0, 0%, 20%, 0.1), 0 3px 6px hsla(0, 0%, 20%, 0.1); + --shadows-2: 0 10px 20px hsla(0, 0%, 20%, 0.1), 0 6px 6px hsla(0, 0%, 20%, 0.1); + --shadows-3: 0 14px 28px hsla(0, 0%, 20%, 0.15), 0 10px 10px hsla(0, 0%, 20%, 0.1); + --ratios-16-9: 16/9; + --ratios-3-2: 3/2; + --ratios-4-3: 4/3; + --ratios-1-1: 1/1; + --ratios-3-4: 3/4; + } + + .non-semantic { + --colors-textSubtle: var(--colors-accent10); + --colors-backgroundSubtle: var(--colors-accent2); + --colors-textBold: var(--colors-foreground7plus); + --colors-backgroundBold: var(--colors-accent9); + } +} + @media { .c-dhzjXW { display: flex; @@ -18,47 +270,338 @@ exports[`Badge component renders 1`] = ` .c-lkWDnA > *:not(:last-child) { margin-right: var(--space-1); } -} -@media { - .c-lkWDnA-eUcpXf-theme-info { - background: var(--colors-primaryLight); - color: var(--colors-primaryMid); + .c-dyvMgW { + font-family: var(--fonts-body); + font-weight: 400; + margin: 0; } - .c-lkWDnA-cOMlyh-size-sm { - font-size: var(--fontSizes-md); - padding-left: var(--space-1); - padding-right: var(--space-1); - height: var(--sizes-3); + .c-dyvMgW > .c-dyvMgW:before, + .c-dyvMgW > .c-dyvMgW:after { + display: none; + } + + .c-goUgMm { + padding-top: var(--space-0); + padding-bottom: var(--space-0); } } @media { - .c-PJLV-iguVXTk-css { - white-space: nowrap; - overflow-x: hidden; - text-overflow: ellipsis; + .c-lkWDnA-gichzl-emphasis-subtle { + color: var(--colors-textSubtle); + background: var(--colors-backgroundSubtle); + } + + .c-lkWDnA-dvmlHl-size-sm { + padding-left: var(--space-1); + padding-right: var(--space-1); padding-top: var(--space-0); padding-bottom: var(--space-0); } + + .c-dyvMgW-gvmVBy-size-md { + font-size: var(--fontSizes-md); + line-height: 1.5; + } + + .c-dyvMgW-gvmVBy-size-md::before { + content: ''; + margin-bottom: -0.3864em; + display: table; + } + + .c-dyvMgW-gvmVBy-size-md::after { + content: ''; + margin-top: -0.3864em; + display: table; + } + + .c-dyvMgW-fmPQHp-noCapsize-true::before, + .c-dyvMgW-fmPQHp-noCapsize-true::after { + display: none !important; + } + + .c-goUgMm-ktaGtY-overflow-wrap { + white-space: wrap; + } }
-
Some Text -
+

`; exports[`Badge component renders a md size and danger theme 1`] = ` +@media { + :root, + .t-kAUxbu { + --default-colors: [object Object]; + --default-space: [object Object]; + --default-fontSizes: [object Object]; + --default-fonts: [object Object]; + --default-sizes: [object Object]; + --default-radii: [object Object]; + --default-shadows: [object Object]; + --default-ratios: [object Object]; + --colors-textForeground: hsl(0, 0%, 12%); + --colors-textSubtle: hsl(0, 0%, 33%); + --colors-textPlaceholder: hsl(0, 0%, 46%); + --colors-background: hsl(0, 0%, 96%); + --colors-backgroundAccent: hsl(215, 100%, 98%); + --colors-grey100: hsl(0, 0%, 96%); + --colors-grey200: hsl(0, 0%, 92%); + --colors-grey300: hsl(0, 0%, 88%); + --colors-grey400: hsl(0, 0%, 81%); + --colors-grey500: hsl(0, 0%, 73%); + --colors-grey600: hsl(0, 0%, 62%); + --colors-grey700: hsl(0, 0%, 46%); + --colors-grey800: hsl(0, 0%, 33%); + --colors-grey900: hsl(0, 0%, 20%); + --colors-grey1000: hsl(0, 0%, 12%); + --colors-grey1100: hsl(0, 0%, 10%); + --colors-grey1200: hsl(0, 0%, 6%); + --colors-blue100: hsl(215, 100%, 98%); + --colors-blue200: hsl(212, 100%, 95%); + --colors-blue300: hsl(211, 100%, 92%); + --colors-blue400: hsl(211, 100%, 88%); + --colors-blue500: hsl(212, 100%, 80%); + --colors-blue600: hsl(213, 100%, 71%); + --colors-blue700: hsl(214, 100%, 58%); + --colors-blue800: hsl(217, 92%, 51%); + --colors-blue900: hsl(223, 78%, 44%); + --colors-blue1000: hsl(228, 82%, 35%); + --colors-blue1100: hsl(228, 63%, 23%); + --colors-blue1200: hsl(227, 57%, 11%); + --colors-purple100: hsl(282, 100%, 98%); + --colors-purple200: hsl(270, 100%, 95%); + --colors-purple300: hsl(271, 100%, 92%); + --colors-purple400: hsl(270, 100%, 89%); + --colors-purple500: hsl(270, 90%, 81%); + --colors-purple600: hsl(271, 97%, 69%); + --colors-purple700: hsl(273, 84%, 47%); + --colors-purple800: hsl(273, 94%, 48%); + --colors-purple900: hsl(268, 79%, 42%); + --colors-purple1000: hsl(266, 82%, 32%); + --colors-purple1100: hsl(265, 63%, 23%); + --colors-purple1200: hsl(265, 61%, 14%); + --colors-cyan100: hsl(198, 100%, 97%); + --colors-cyan200: hsl(199, 100%, 94%); + --colors-cyan300: hsl(201, 100%, 89%); + --colors-cyan400: hsl(200, 100%, 84%); + --colors-cyan500: hsl(201, 96%, 73%); + --colors-cyan600: hsl(202, 85%, 60%); + --colors-cyan700: hsl(204, 81%, 46%); + --colors-cyan800: hsl(205, 100%, 38%); + --colors-cyan900: hsl(206, 100%, 30%); + --colors-cyan1000: hsl(205, 100%, 21%); + --colors-cyan1100: hsl(206, 97%, 15%); + --colors-cyan1200: hsl(207, 73%, 9%); + --colors-green100: hsl(135, 80%, 96%); + --colors-green200: hsl(135, 72%, 92%); + --colors-green300: hsl(135, 68%, 83%); + --colors-green400: hsl(135, 65%, 76%); + --colors-green500: hsl(136, 56%, 62%); + --colors-green600: hsl(137, 42%, 49%); + --colors-green700: hsl(138, 51%, 35%); + --colors-green800: hsl(138, 68%, 29%); + --colors-green900: hsl(138, 74%, 21%); + --colors-green1000: hsl(138, 89%, 14%); + --colors-green1100: hsl(135, 91%, 9%); + --colors-green1200: hsl(123, 56%, 6%); + --colors-magenta100: hsl(330, 100%, 99%); + --colors-magenta200: hsl(329, 100%, 96%); + --colors-magenta300: hsl(332, 100%, 92%); + --colors-magenta400: hsl(333, 100%, 90%); + --colors-magenta500: hsl(333, 90%, 80%); + --colors-magenta600: hsl(333, 87%, 72%); + --colors-magenta700: hsl(333, 75%, 59%); + --colors-magenta800: hsl(333, 69%, 49%); + --colors-magenta900: hsl(333, 74%, 36%); + --colors-magenta1000: hsl(333, 86%, 25%); + --colors-magenta1100: hsl(333, 95%, 16%); + --colors-magenta1200: hsl(334, 62%, 10%); + --colors-red100: hsl(0, 100%, 99%); + --colors-red200: hsl(0, 100%, 96%); + --colors-red300: hsl(357, 100%, 93%); + --colors-red400: hsl(356, 100%, 90%); + --colors-red500: hsl(356, 96%, 83%); + --colors-red600: hsl(357, 90%, 73%); + --colors-red700: hsl(357, 80%, 59%); + --colors-red800: hsl(357, 76%, 49%); + --colors-red900: hsl(357, 73%, 37%); + --colors-red1000: hsl(357, 79%, 26%); + --colors-red1100: hsl(357, 91%, 17%); + --colors-red1200: hsl(357, 73%, 10%); + --colors-teal100: hsl(180, 83%, 95%); + --colors-teal200: hsl(180, 75%, 88%); + --colors-teal300: hsl(180, 71%, 78%); + --colors-teal400: hsl(179, 70%, 71%); + --colors-teal500: hsl(179, 65%, 52%); + --colors-teal600: hsl(179, 76%, 41%); + --colors-teal700: hsl(179, 91%, 31%); + --colors-teal800: hsl(178, 100%, 25%); + --colors-teal900: hsl(180, 100%, 18%); + --colors-teal1000: hsl(183, 100%, 13%); + --colors-teal1100: hsl(187, 92%, 10%); + --colors-teal1200: hsl(186, 56%, 7%); + --colors-orange100: hsl(38, 100%, 95%); + --colors-orange200: hsl(38, 100%, 90%); + --colors-orange300: hsl(37, 100%, 84%); + --colors-orange400: hsl(36, 96%, 78%); + --colors-orange500: hsl(33, 100%, 67%); + --colors-orange600: hsl(31, 97%, 57%); + --colors-orange700: hsl(30, 92%, 46%); + --colors-orange800: hsl(29, 100%, 43%); + --colors-orange900: hsl(27, 100%, 36%); + --colors-orange1000: hsl(24, 100%, 26%); + --colors-orange1100: hsl(20, 97%, 15%); + --colors-orange1200: hsl(20, 96%, 11%); + --colors-yellow100: hsl(53, 94%, 93%); + --colors-yellow200: hsl(54, 92%, 85%); + --colors-yellow300: hsl(54, 92%, 75%); + --colors-yellow400: hsl(52, 97%, 63%); + --colors-yellow500: hsl(51, 100%, 46%); + --colors-yellow600: hsl(49, 100%, 39%); + --colors-yellow700: hsl(48, 100%, 35%); + --colors-yellow800: hsl(46, 100%, 30%); + --colors-yellow900: hsl(44, 100%, 22%); + --colors-yellow1000: hsl(44, 100%, 18%); + --colors-yellow1100: hsl(41, 100%, 11%); + --colors-yellow1200: hsl(39, 100%, 8%); + --colors-lime100: hsl(73, 94%, 93%); + --colors-lime200: hsl(73, 94%, 87%); + --colors-lime300: hsl(73, 90%, 77%); + --colors-lime400: hsl(74, 82%, 69%); + --colors-lime500: hsl(74, 68%, 58%); + --colors-lime600: hsl(74, 77%, 41%); + --colors-lime700: hsl(75, 100%, 31%); + --colors-lime800: hsl(75, 100%, 27%); + --colors-lime900: hsl(75, 100%, 19%); + --colors-lime1000: hsl(75, 100%, 15%); + --colors-lime1100: hsl(75, 100%, 9%); + --colors-lime1200: hsl(74, 100%, 6%); + --colors-tonal50: hsl(0, 0%, 96%); + --colors-tonal100: hsl(0, 0%, 92%); + --colors-tonal200: hsl(0, 0%, 62%); + --colors-tonal300: hsl(0, 0%, 46%); + --colors-tonal400: hsl(0, 0%, 33%); + --colors-tonal500: hsl(0, 0%, 20%); + --colors-tonal600: hsl(0, 0%, 12%); + --colors-alpha100: hsla(0, 0%, 20%, 0.1); + --colors-alpha150: hsla(0, 0%, 20%, 0.15); + --colors-alpha200: hsla(0, 0%, 20%, 0.2); + --colors-alpha250: hsla(0, 0%, 20%, 0.25); + --colors-alpha600: hsla(0, 0%, 20%, 0.6); + --colors-primaryLight: hsl(215, 100%, 98%); + --colors-primary: hsl(217, 92%, 51%); + --colors-primaryMid: hsl(223, 78%, 44%); + --colors-primaryDark: hsl(228, 82%, 35%); + --colors-secondary: hsl(204, 100%, 72%); + --colors-brandRed: hsl(0, 91%, 64%); + --colors-brandRedAccent: hsl(14, 100%, 71%); + --colors-brandGreen: hsl(128, 47%, 53%); + --colors-brandGreenAccent: hsl(168, 100%, 20%); + --colors-brandPurple: hsl(256, 65%, 62%); + --colors-brandPurpleAccent: hsl(256, 93%, 35%); + --colors-brandYellow: hsl(41, 100%, 55%); + --colors-brandYellowAccent: hsl(33, 100%, 50%); + --colors-successLight: hsl(119, 44%, 94%); + --colors-success: hsl(119, 100%, 27%); + --colors-successMid: hsl(124, 100%, 22%); + --colors-successDark: hsl(126, 100%, 17%); + --colors-dangerLight: hsl(0, 77%, 95%); + --colors-danger: hsl(0, 96%, 48%); + --colors-dangerMid: hsl(0, 96%, 41%); + --colors-dangerDark: hsl(0, 97%, 34%); + --colors-warningLight: hsl(39, 100%, 94%); + --colors-warning: hsl(41, 100%, 55%); + --colors-warningMid: hsl(41, 89%, 48%); + --colors-warningDark: hsl(41, 100%, 41%); + --colors-warningText: hsl(24, 100%, 37%); + --colors-subjectEnglish: hsl(0, 91%, 64%); + --colors-subjectMaths: hsl(217, 92%, 51%); + --colors-subjectScience: hsl(256, 65%, 62%); + --colors-subjectVerbalReasoning: hsl(128, 47%, 53%); + --colors-subjectNonVerbalReasoning: hsl(41, 100%, 55%); + --colors-subjectCreativeWriting: hsl(33, 100%, 50%); + --colors-subjectExamSkills: hsl(256, 93%, 35%); + --colors-glBlueLight: hsl(222, 68%, 78%); + --colors-glBluePrimary: hsl(222, 56%, 55%); + --colors-glBlueDark: hsl(222, 35%, 43%); + --space-0: 0.125rem; + --space-1: 0.25rem; + --space-2: 0.5rem; + --space-3: 0.75rem; + --space-4: 1rem; + --space-5: 2rem; + --space-6: 2.5rem; + --space-7: 3rem; + --space-8: 4rem; + --space-9: 5rem; + --space-24: 1.5rem; + --fontSizes-xs: 0.75rem; + --fontSizes-sm: 0.875rem; + --fontSizes-md: 1rem; + --fontSizes-lg: 1.3125rem; + --fontSizes-xl: 1.75rem; + --fontSizes-2xl: 2.3125rem; + --fontSizes-3xl: 3.125rem; + --fontSizes-4xl: 5.625rem; + --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; + --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --sizes-0: 0.5rem; + --sizes-1: 1rem; + --sizes-2: 1.5rem; + --sizes-3: 2rem; + --sizes-4: 2.5rem; + --sizes-5: 3rem; + --sizes-6: 4rem; + --sizes-7: 6rem; + --sizes-8: 8rem; + --radii-0: 0.25rem; + --radii-1: 0.5rem; + --radii-2: 0.75rem; + --radii-3: 1rem; + --radii-round: 100rem; + --shadows-0: 0 1px 3px hsla(0, 0%, 20%, 0.1), 0 1px 2px hsla(0, 0%, 20%, 0.15); + --shadows-1: 0 3px 6px hsla(0, 0%, 20%, 0.1), 0 3px 6px hsla(0, 0%, 20%, 0.1); + --shadows-2: 0 10px 20px hsla(0, 0%, 20%, 0.1), 0 6px 6px hsla(0, 0%, 20%, 0.1); + --shadows-3: 0 14px 28px hsla(0, 0%, 20%, 0.15), 0 10px 10px hsla(0, 0%, 20%, 0.1); + --ratios-16-9: 16/9; + --ratios-3-2: 3/2; + --ratios-4-3: 4/3; + --ratios-1-1: 1/1; + --ratios-3-4: 3/4; + } + + .non-semantic { + --colors-textSubtle: var(--colors-accent10); + --colors-backgroundSubtle: var(--colors-accent2); + --colors-textBold: var(--colors-foreground7plus); + --colors-backgroundBold: var(--colors-accent9); + } + + .danger { + --colors-textSubtle: var(--colors-dangerMid); + --colors-backgroundSubtle: var(--colors-dangerLight); + --colors-textBold: #FFF; + --colors-backgroundBold: var(--colors-danger); + } +} + @media { .c-dhzjXW { display: flex; @@ -76,59 +619,345 @@ exports[`Badge component renders a md size and danger theme 1`] = ` .c-lkWDnA > *:not(:last-child) { margin-right: var(--space-1); } + + .c-dyvMgW { + font-family: var(--fonts-body); + font-weight: 400; + margin: 0; + } + + .c-dyvMgW > .c-dyvMgW:before, + .c-dyvMgW > .c-dyvMgW:after { + display: none; + } + + .c-goUgMm { + padding-top: var(--space-0); + padding-bottom: var(--space-0); + } } @media { - .c-lkWDnA-eUcpXf-theme-info { - background: var(--colors-primaryLight); - color: var(--colors-primaryMid); + .c-lkWDnA-gichzl-emphasis-subtle { + color: var(--colors-textSubtle); + background: var(--colors-backgroundSubtle); } - .c-lkWDnA-cOMlyh-size-sm { - font-size: var(--fontSizes-md); + .c-lkWDnA-dvmlHl-size-sm { padding-left: var(--space-1); padding-right: var(--space-1); - height: var(--sizes-3); + padding-top: var(--space-0); + padding-bottom: var(--space-0); } - .c-lkWDnA-iZOjmP-theme-danger { - background: var(--colors-dangerLight); - color: var(--colors-dangerMid); + .c-dyvMgW-gvmVBy-size-md { + font-size: var(--fontSizes-md); + line-height: 1.5; } - .c-lkWDnA-hQQbPV-size-md { - font-size: var(--fontSizes-md); - padding-left: var(--space-2); - padding-right: var(--space-2); - height: var(--sizes-4); + .c-dyvMgW-gvmVBy-size-md::before { + content: ''; + margin-bottom: -0.3864em; + display: table; } -} -@media { - .c-PJLV-iguVXTk-css { - white-space: nowrap; - overflow-x: hidden; - text-overflow: ellipsis; - padding-top: var(--space-0); - padding-bottom: var(--space-0); + .c-dyvMgW-gvmVBy-size-md::after { + content: ''; + margin-top: -0.3864em; + display: table; + } + + .c-dyvMgW-fmPQHp-noCapsize-true::before, + .c-dyvMgW-fmPQHp-noCapsize-true::after { + display: none !important; + } + + .c-goUgMm-ktaGtY-overflow-wrap { + white-space: wrap; + } + + .c-lkWDnA-iPuTML-size-md { + padding-left: var(--space-2); + padding-right: var(--space-2); + padding-top: var(--space-1); + padding-bottom: var(--space-1); } }
-
Some Text -
+

`; exports[`Badge component renders with an icon 1`] = ` +@media { + :root, + .t-kAUxbu { + --default-colors: [object Object]; + --default-space: [object Object]; + --default-fontSizes: [object Object]; + --default-fonts: [object Object]; + --default-sizes: [object Object]; + --default-radii: [object Object]; + --default-shadows: [object Object]; + --default-ratios: [object Object]; + --colors-textForeground: hsl(0, 0%, 12%); + --colors-textSubtle: hsl(0, 0%, 33%); + --colors-textPlaceholder: hsl(0, 0%, 46%); + --colors-background: hsl(0, 0%, 96%); + --colors-backgroundAccent: hsl(215, 100%, 98%); + --colors-grey100: hsl(0, 0%, 96%); + --colors-grey200: hsl(0, 0%, 92%); + --colors-grey300: hsl(0, 0%, 88%); + --colors-grey400: hsl(0, 0%, 81%); + --colors-grey500: hsl(0, 0%, 73%); + --colors-grey600: hsl(0, 0%, 62%); + --colors-grey700: hsl(0, 0%, 46%); + --colors-grey800: hsl(0, 0%, 33%); + --colors-grey900: hsl(0, 0%, 20%); + --colors-grey1000: hsl(0, 0%, 12%); + --colors-grey1100: hsl(0, 0%, 10%); + --colors-grey1200: hsl(0, 0%, 6%); + --colors-blue100: hsl(215, 100%, 98%); + --colors-blue200: hsl(212, 100%, 95%); + --colors-blue300: hsl(211, 100%, 92%); + --colors-blue400: hsl(211, 100%, 88%); + --colors-blue500: hsl(212, 100%, 80%); + --colors-blue600: hsl(213, 100%, 71%); + --colors-blue700: hsl(214, 100%, 58%); + --colors-blue800: hsl(217, 92%, 51%); + --colors-blue900: hsl(223, 78%, 44%); + --colors-blue1000: hsl(228, 82%, 35%); + --colors-blue1100: hsl(228, 63%, 23%); + --colors-blue1200: hsl(227, 57%, 11%); + --colors-purple100: hsl(282, 100%, 98%); + --colors-purple200: hsl(270, 100%, 95%); + --colors-purple300: hsl(271, 100%, 92%); + --colors-purple400: hsl(270, 100%, 89%); + --colors-purple500: hsl(270, 90%, 81%); + --colors-purple600: hsl(271, 97%, 69%); + --colors-purple700: hsl(273, 84%, 47%); + --colors-purple800: hsl(273, 94%, 48%); + --colors-purple900: hsl(268, 79%, 42%); + --colors-purple1000: hsl(266, 82%, 32%); + --colors-purple1100: hsl(265, 63%, 23%); + --colors-purple1200: hsl(265, 61%, 14%); + --colors-cyan100: hsl(198, 100%, 97%); + --colors-cyan200: hsl(199, 100%, 94%); + --colors-cyan300: hsl(201, 100%, 89%); + --colors-cyan400: hsl(200, 100%, 84%); + --colors-cyan500: hsl(201, 96%, 73%); + --colors-cyan600: hsl(202, 85%, 60%); + --colors-cyan700: hsl(204, 81%, 46%); + --colors-cyan800: hsl(205, 100%, 38%); + --colors-cyan900: hsl(206, 100%, 30%); + --colors-cyan1000: hsl(205, 100%, 21%); + --colors-cyan1100: hsl(206, 97%, 15%); + --colors-cyan1200: hsl(207, 73%, 9%); + --colors-green100: hsl(135, 80%, 96%); + --colors-green200: hsl(135, 72%, 92%); + --colors-green300: hsl(135, 68%, 83%); + --colors-green400: hsl(135, 65%, 76%); + --colors-green500: hsl(136, 56%, 62%); + --colors-green600: hsl(137, 42%, 49%); + --colors-green700: hsl(138, 51%, 35%); + --colors-green800: hsl(138, 68%, 29%); + --colors-green900: hsl(138, 74%, 21%); + --colors-green1000: hsl(138, 89%, 14%); + --colors-green1100: hsl(135, 91%, 9%); + --colors-green1200: hsl(123, 56%, 6%); + --colors-magenta100: hsl(330, 100%, 99%); + --colors-magenta200: hsl(329, 100%, 96%); + --colors-magenta300: hsl(332, 100%, 92%); + --colors-magenta400: hsl(333, 100%, 90%); + --colors-magenta500: hsl(333, 90%, 80%); + --colors-magenta600: hsl(333, 87%, 72%); + --colors-magenta700: hsl(333, 75%, 59%); + --colors-magenta800: hsl(333, 69%, 49%); + --colors-magenta900: hsl(333, 74%, 36%); + --colors-magenta1000: hsl(333, 86%, 25%); + --colors-magenta1100: hsl(333, 95%, 16%); + --colors-magenta1200: hsl(334, 62%, 10%); + --colors-red100: hsl(0, 100%, 99%); + --colors-red200: hsl(0, 100%, 96%); + --colors-red300: hsl(357, 100%, 93%); + --colors-red400: hsl(356, 100%, 90%); + --colors-red500: hsl(356, 96%, 83%); + --colors-red600: hsl(357, 90%, 73%); + --colors-red700: hsl(357, 80%, 59%); + --colors-red800: hsl(357, 76%, 49%); + --colors-red900: hsl(357, 73%, 37%); + --colors-red1000: hsl(357, 79%, 26%); + --colors-red1100: hsl(357, 91%, 17%); + --colors-red1200: hsl(357, 73%, 10%); + --colors-teal100: hsl(180, 83%, 95%); + --colors-teal200: hsl(180, 75%, 88%); + --colors-teal300: hsl(180, 71%, 78%); + --colors-teal400: hsl(179, 70%, 71%); + --colors-teal500: hsl(179, 65%, 52%); + --colors-teal600: hsl(179, 76%, 41%); + --colors-teal700: hsl(179, 91%, 31%); + --colors-teal800: hsl(178, 100%, 25%); + --colors-teal900: hsl(180, 100%, 18%); + --colors-teal1000: hsl(183, 100%, 13%); + --colors-teal1100: hsl(187, 92%, 10%); + --colors-teal1200: hsl(186, 56%, 7%); + --colors-orange100: hsl(38, 100%, 95%); + --colors-orange200: hsl(38, 100%, 90%); + --colors-orange300: hsl(37, 100%, 84%); + --colors-orange400: hsl(36, 96%, 78%); + --colors-orange500: hsl(33, 100%, 67%); + --colors-orange600: hsl(31, 97%, 57%); + --colors-orange700: hsl(30, 92%, 46%); + --colors-orange800: hsl(29, 100%, 43%); + --colors-orange900: hsl(27, 100%, 36%); + --colors-orange1000: hsl(24, 100%, 26%); + --colors-orange1100: hsl(20, 97%, 15%); + --colors-orange1200: hsl(20, 96%, 11%); + --colors-yellow100: hsl(53, 94%, 93%); + --colors-yellow200: hsl(54, 92%, 85%); + --colors-yellow300: hsl(54, 92%, 75%); + --colors-yellow400: hsl(52, 97%, 63%); + --colors-yellow500: hsl(51, 100%, 46%); + --colors-yellow600: hsl(49, 100%, 39%); + --colors-yellow700: hsl(48, 100%, 35%); + --colors-yellow800: hsl(46, 100%, 30%); + --colors-yellow900: hsl(44, 100%, 22%); + --colors-yellow1000: hsl(44, 100%, 18%); + --colors-yellow1100: hsl(41, 100%, 11%); + --colors-yellow1200: hsl(39, 100%, 8%); + --colors-lime100: hsl(73, 94%, 93%); + --colors-lime200: hsl(73, 94%, 87%); + --colors-lime300: hsl(73, 90%, 77%); + --colors-lime400: hsl(74, 82%, 69%); + --colors-lime500: hsl(74, 68%, 58%); + --colors-lime600: hsl(74, 77%, 41%); + --colors-lime700: hsl(75, 100%, 31%); + --colors-lime800: hsl(75, 100%, 27%); + --colors-lime900: hsl(75, 100%, 19%); + --colors-lime1000: hsl(75, 100%, 15%); + --colors-lime1100: hsl(75, 100%, 9%); + --colors-lime1200: hsl(74, 100%, 6%); + --colors-tonal50: hsl(0, 0%, 96%); + --colors-tonal100: hsl(0, 0%, 92%); + --colors-tonal200: hsl(0, 0%, 62%); + --colors-tonal300: hsl(0, 0%, 46%); + --colors-tonal400: hsl(0, 0%, 33%); + --colors-tonal500: hsl(0, 0%, 20%); + --colors-tonal600: hsl(0, 0%, 12%); + --colors-alpha100: hsla(0, 0%, 20%, 0.1); + --colors-alpha150: hsla(0, 0%, 20%, 0.15); + --colors-alpha200: hsla(0, 0%, 20%, 0.2); + --colors-alpha250: hsla(0, 0%, 20%, 0.25); + --colors-alpha600: hsla(0, 0%, 20%, 0.6); + --colors-primaryLight: hsl(215, 100%, 98%); + --colors-primary: hsl(217, 92%, 51%); + --colors-primaryMid: hsl(223, 78%, 44%); + --colors-primaryDark: hsl(228, 82%, 35%); + --colors-secondary: hsl(204, 100%, 72%); + --colors-brandRed: hsl(0, 91%, 64%); + --colors-brandRedAccent: hsl(14, 100%, 71%); + --colors-brandGreen: hsl(128, 47%, 53%); + --colors-brandGreenAccent: hsl(168, 100%, 20%); + --colors-brandPurple: hsl(256, 65%, 62%); + --colors-brandPurpleAccent: hsl(256, 93%, 35%); + --colors-brandYellow: hsl(41, 100%, 55%); + --colors-brandYellowAccent: hsl(33, 100%, 50%); + --colors-successLight: hsl(119, 44%, 94%); + --colors-success: hsl(119, 100%, 27%); + --colors-successMid: hsl(124, 100%, 22%); + --colors-successDark: hsl(126, 100%, 17%); + --colors-dangerLight: hsl(0, 77%, 95%); + --colors-danger: hsl(0, 96%, 48%); + --colors-dangerMid: hsl(0, 96%, 41%); + --colors-dangerDark: hsl(0, 97%, 34%); + --colors-warningLight: hsl(39, 100%, 94%); + --colors-warning: hsl(41, 100%, 55%); + --colors-warningMid: hsl(41, 89%, 48%); + --colors-warningDark: hsl(41, 100%, 41%); + --colors-warningText: hsl(24, 100%, 37%); + --colors-subjectEnglish: hsl(0, 91%, 64%); + --colors-subjectMaths: hsl(217, 92%, 51%); + --colors-subjectScience: hsl(256, 65%, 62%); + --colors-subjectVerbalReasoning: hsl(128, 47%, 53%); + --colors-subjectNonVerbalReasoning: hsl(41, 100%, 55%); + --colors-subjectCreativeWriting: hsl(33, 100%, 50%); + --colors-subjectExamSkills: hsl(256, 93%, 35%); + --colors-glBlueLight: hsl(222, 68%, 78%); + --colors-glBluePrimary: hsl(222, 56%, 55%); + --colors-glBlueDark: hsl(222, 35%, 43%); + --space-0: 0.125rem; + --space-1: 0.25rem; + --space-2: 0.5rem; + --space-3: 0.75rem; + --space-4: 1rem; + --space-5: 2rem; + --space-6: 2.5rem; + --space-7: 3rem; + --space-8: 4rem; + --space-9: 5rem; + --space-24: 1.5rem; + --fontSizes-xs: 0.75rem; + --fontSizes-sm: 0.875rem; + --fontSizes-md: 1rem; + --fontSizes-lg: 1.3125rem; + --fontSizes-xl: 1.75rem; + --fontSizes-2xl: 2.3125rem; + --fontSizes-3xl: 3.125rem; + --fontSizes-4xl: 5.625rem; + --fonts-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-mono: 'SFMono-Regular', Consolas, Menlo, monospace; + --fonts-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --fonts-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; + --sizes-0: 0.5rem; + --sizes-1: 1rem; + --sizes-2: 1.5rem; + --sizes-3: 2rem; + --sizes-4: 2.5rem; + --sizes-5: 3rem; + --sizes-6: 4rem; + --sizes-7: 6rem; + --sizes-8: 8rem; + --radii-0: 0.25rem; + --radii-1: 0.5rem; + --radii-2: 0.75rem; + --radii-3: 1rem; + --radii-round: 100rem; + --shadows-0: 0 1px 3px hsla(0, 0%, 20%, 0.1), 0 1px 2px hsla(0, 0%, 20%, 0.15); + --shadows-1: 0 3px 6px hsla(0, 0%, 20%, 0.1), 0 3px 6px hsla(0, 0%, 20%, 0.1); + --shadows-2: 0 10px 20px hsla(0, 0%, 20%, 0.1), 0 6px 6px hsla(0, 0%, 20%, 0.1); + --shadows-3: 0 14px 28px hsla(0, 0%, 20%, 0.15), 0 10px 10px hsla(0, 0%, 20%, 0.1); + --ratios-16-9: 16/9; + --ratios-3-2: 3/2; + --ratios-4-3: 4/3; + --ratios-1-1: 1/1; + --ratios-3-4: 3/4; + } + + .non-semantic { + --colors-textSubtle: var(--colors-accent10); + --colors-backgroundSubtle: var(--colors-accent2); + --colors-textBold: var(--colors-foreground7plus); + --colors-backgroundBold: var(--colors-accent9); + } + + .danger { + --colors-textSubtle: var(--colors-dangerMid); + --colors-backgroundSubtle: var(--colors-dangerLight); + --colors-textBold: #FFF; + --colors-backgroundBold: var(--colors-danger); + } +} + @media { .c-dhzjXW { display: flex; @@ -147,6 +976,22 @@ exports[`Badge component renders with an icon 1`] = ` margin-right: var(--space-1); } + .c-dyvMgW { + font-family: var(--fonts-body); + font-weight: 400; + margin: 0; + } + + .c-dyvMgW > .c-dyvMgW:before, + .c-dyvMgW > .c-dyvMgW:after { + display: none; + } + + .c-goUgMm { + padding-top: var(--space-0); + padding-bottom: var(--space-0); + } + .c-dbrbZt { display: inline-block; fill: none; @@ -155,31 +1000,56 @@ exports[`Badge component renders with an icon 1`] = ` stroke-linejoin: round; vertical-align: middle; } + + .c-cCfVEt { + flex-shrink: 0; + } } @media { - .c-lkWDnA-eUcpXf-theme-info { - background: var(--colors-primaryLight); - color: var(--colors-primaryMid); + .c-lkWDnA-gichzl-emphasis-subtle { + color: var(--colors-textSubtle); + background: var(--colors-backgroundSubtle); } - .c-lkWDnA-cOMlyh-size-sm { - font-size: var(--fontSizes-md); + .c-lkWDnA-dvmlHl-size-sm { padding-left: var(--space-1); padding-right: var(--space-1); - height: var(--sizes-3); + padding-top: var(--space-0); + padding-bottom: var(--space-0); } - .c-lkWDnA-iZOjmP-theme-danger { - background: var(--colors-dangerLight); - color: var(--colors-dangerMid); + .c-dyvMgW-gvmVBy-size-md { + font-size: var(--fontSizes-md); + line-height: 1.5; } - .c-lkWDnA-hQQbPV-size-md { - font-size: var(--fontSizes-md); + .c-dyvMgW-gvmVBy-size-md::before { + content: ''; + margin-bottom: -0.3864em; + display: table; + } + + .c-dyvMgW-gvmVBy-size-md::after { + content: ''; + margin-top: -0.3864em; + display: table; + } + + .c-dyvMgW-fmPQHp-noCapsize-true::before, + .c-dyvMgW-fmPQHp-noCapsize-true::after { + display: none !important; + } + + .c-goUgMm-ktaGtY-overflow-wrap { + white-space: wrap; + } + + .c-lkWDnA-iPuTML-size-md { padding-left: var(--space-2); padding-right: var(--space-2); - height: var(--sizes-4); + padding-top: var(--space-1); + padding-bottom: var(--space-1); } .c-dbrbZt-cyeZeh-size-sm { @@ -189,28 +1059,14 @@ exports[`Badge component renders with an icon 1`] = ` } } -@media { - .c-PJLV-iguVXTk-css { - white-space: nowrap; - overflow-x: hidden; - text-overflow: ellipsis; - padding-top: var(--space-0); - padding-bottom: var(--space-0); - } - - .c-dbrbZt-icCfVEt-css { - flex-shrink: 0; - } -} -
-
Some Text -
+

`; diff --git a/lib/src/components/badge/stitches.badge.colorscheme.config.ts b/lib/src/components/badge/stitches.badge.colorscheme.config.ts new file mode 100644 index 000000000..0006e16fc --- /dev/null +++ b/lib/src/components/badge/stitches.badge.colorscheme.config.ts @@ -0,0 +1,57 @@ +import { createTheme } from '~/stitches' + +export const colorSchemes = {} + +colorSchemes['non-semantic'] = createTheme('non-semantic', { + colors: { + textSubtle: '$accent10', + backgroundSubtle: '$accent2', + textBold: '$foreground7plus', + backgroundBold: '$accent9' + } +}) + +colorSchemes['info'] = createTheme('info', { + colors: { + textSubtle: '$blue900', + backgroundSubtle: '$blue100', + textBold: '#FFF', + backgroundBold: '$blue800' + } +}) + +colorSchemes['neutral'] = createTheme('neutral', { + colors: { + textSubtle: '$grey900', + backgroundSubtle: '$grey100', + textBold: '#FFF', + backgroundBold: '$grey800' + } +}) + +colorSchemes['success'] = createTheme('success', { + colors: { + textSubtle: '$successMid', + backgroundSubtle: '$successLight', + textBold: '#FFF', + backgroundBold: '$success' + } +}) + +colorSchemes['danger'] = createTheme('danger', { + colors: { + textSubtle: '$dangerMid', + backgroundSubtle: '$dangerLight', + textBold: '#FFF', + backgroundBold: '$danger' + } +}) + +colorSchemes['warning'] = createTheme('warning', { + colors: { + textSubtle: '$warningText', + backgroundSubtle: '$warningLight', + textBold: '$grey1000', + backgroundBold: '$warning' + } +}) diff --git a/lib/src/components/data-table/DataTableGlobalFilter.tsx b/lib/src/components/data-table/DataTableGlobalFilter.tsx index 4706e0d8c..7e6f1ff39 100644 --- a/lib/src/components/data-table/DataTableGlobalFilter.tsx +++ b/lib/src/components/data-table/DataTableGlobalFilter.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { debounce } from 'throttle-debounce' -import { OptionallyVisuallyHiddenContainer } from '../../utilities/optionally-visually-hidden-container' +import { OptionalVisuallyHiddenWrapper } from '../../utilities/optional-visually-hidden-wrapper' import { Label } from '../label' import { SearchInput } from '../search-input' import { AsyncDataState } from './DataTable.types' @@ -43,11 +43,11 @@ export const DataTableGlobalFilter: React.FC = ({ return ( <> - + { + return ( + + hello

} + tooltipSide="right" + {...props} + > +

hello

+ + + ) +} + +describe('OptionalTooltipWrapper component', () => { + it('renders with tooltip', async () => { + const { container } = render( + + ) + + fireEvent.focus(screen.getByTestId('tooltip-trigger')) + + expect(container).toMatchSnapshot() + }) + + it('renders without tooltip', async () => { + const { container } = render() + + fireEvent.focus(screen.getByTestId('tooltip-trigger')) + + expect(container).toMatchSnapshot() + }) +}) diff --git a/lib/src/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.tsx b/lib/src/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.tsx new file mode 100644 index 000000000..b945e614e --- /dev/null +++ b/lib/src/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.tsx @@ -0,0 +1,32 @@ +import * as React from 'react' + +import { Tooltip } from '~/components/tooltip' + +export type TOptionalTooltipWrapperProps = { + hasTooltip?: boolean + label?: React.ReactNode + tooltipSide?: React.ComponentProps['side'] +} + +export const OptionalTooltipWrapper: React.FC = ({ + hasTooltip, + label, + tooltipSide, + children +}) => { + if (hasTooltip) { + return ( + + {children} + {label} + + ) + } + + // children could be multiple elements/components, + // so we need a fragment here. + // eslint-disable-next-line react/jsx-no-useless-fragment + return <>{children} +} + +OptionalTooltipWrapper.displayName = 'OptionalTooltipWrapper' diff --git a/lib/src/utilities/optional-tooltip-wrapper/__snapshots__/OptionalTooltipWrapper.test.tsx.snap b/lib/src/utilities/optional-tooltip-wrapper/__snapshots__/OptionalTooltipWrapper.test.tsx.snap new file mode 100644 index 000000000..6f26a21a9 --- /dev/null +++ b/lib/src/utilities/optional-tooltip-wrapper/__snapshots__/OptionalTooltipWrapper.test.tsx.snap @@ -0,0 +1,133 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`OptionalTooltipWrapper component renders with tooltip 1`] = ` +@media { + .c-hVoQtf { + background-color: var(--colors-tonal500); + border-radius: var(--radii-0); + box-shadow: var(--shadows-0); + color: white; + font-family: var(--fonts-body); + font-size: var(--fontSizes-sm); + line-height: 1.5; + white-space: normal; + padding-left: var(--space-3); + padding-right: var(--space-3); + padding-top: var(--space-2); + padding-bottom: var(--space-2); + z-index: 10; + } + +@media (prefers-reduced-motion: no-preference) { + .c-hVoQtf { + animation-duration: 75ms; + animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); + will-change: transform, opacity; + } +} + +@media (prefers-reduced-motion: no-preference) { + .c-hVoQtf[data-state="delayed-open"][data-side="top"] { + animation-name: k-ftcNPK; + } +} + +@media (prefers-reduced-motion: no-preference) { + .c-hVoQtf[data-state="delayed-open"][data-side="right"] { + animation-name: k-hbaHED; + } +} + +@media (prefers-reduced-motion: no-preference) { + .c-hVoQtf[data-state="delayed-open"][data-side="bottom"] { + animation-name: k-daNevH; + } +} + +@media (prefers-reduced-motion: no-preference) { + .c-hVoQtf[data-state="delayed-open"][data-side="left"] { + animation-name: k-fvyGIa; + } +} + + .c-kfLCww { + fill: var(--colors-tonal500); + } + + [data-align="end"] .c-kfLCww { + margin-right: var(--space-2); + } + + [data-align="start"] .c-kfLCww { + margin-left: var(--space-2); + } +} + +@media { + .c-hVoQtf-gWQnqe-size-md { + max-width: 250px; + } +} + +
+

+ hello +

+
+
+

+ hello +

+ + + + + + +

+ hello +

+ +
+
+
+`; + +exports[`OptionalTooltipWrapper component renders without tooltip 1`] = ` +
+

+ hello +

+
+`; diff --git a/lib/src/utilities/optional-tooltip-wrapper/index.ts b/lib/src/utilities/optional-tooltip-wrapper/index.ts new file mode 100644 index 000000000..2c7fa2cf5 --- /dev/null +++ b/lib/src/utilities/optional-tooltip-wrapper/index.ts @@ -0,0 +1,2 @@ +export { OptionalTooltipWrapper } from './OptionalTooltipWrapper' +export type { TOptionalTooltipWrapperProps } from './OptionalTooltipWrapper' diff --git a/lib/src/utilities/optional-visually-hidden-wrapper/OptionalVisuallyHiddenWrapper.test.tsx b/lib/src/utilities/optional-visually-hidden-wrapper/OptionalVisuallyHiddenWrapper.test.tsx new file mode 100644 index 000000000..72ef628a8 --- /dev/null +++ b/lib/src/utilities/optional-visually-hidden-wrapper/OptionalVisuallyHiddenWrapper.test.tsx @@ -0,0 +1,30 @@ +import { render } from '@testing-library/react' +import * as React from 'react' + +import { OptionalVisuallyHiddenWrapper } from '.' + +const OptionalVisuallyHiddenWrapperImplementation = (props) => { + return ( + +

hello

+ + ) +} + +describe('OptionalVisuallyHidden component', () => { + it('renders hidden content', async () => { + const { container } = render( +