From 8429a380b31e2681bf69b5356b011b26bd87dded Mon Sep 17 00:00:00 2001 From: Thomas Digby Date: Mon, 21 Aug 2023 15:35:10 +0100 Subject: [PATCH 01/11] feat: initial work on asChild support in button and link components --- lib/src/components/button/Button.test.tsx | 13 +- lib/src/components/button/Button.tsx | 118 +++++++----------- .../button/__snapshots__/Button.test.tsx.snap | 86 ++++++++----- lib/src/components/link/Link.test.tsx | 6 +- lib/src/components/link/Link.tsx | 38 +++--- .../link/__snapshots__/Link.test.tsx.snap | 16 ++- lib/src/utilities/index.ts | 1 + lib/src/utilities/uri.ts | 8 ++ 8 files changed, 144 insertions(+), 142 deletions(-) create mode 100644 lib/src/utilities/uri.ts diff --git a/lib/src/components/button/Button.test.tsx b/lib/src/components/button/Button.test.tsx index 2c7071bc8..2bcf012ac 100644 --- a/lib/src/components/button/Button.test.tsx +++ b/lib/src/components/button/Button.test.tsx @@ -135,8 +135,8 @@ describe(`Button component`, () => { it('is polymorphic', async () => { render( - ) @@ -183,14 +183,5 @@ describe(`Button component`, () => { expect(handleClick).toHaveBeenCalledTimes(0) }) - - it('renders an anchor if provided a link', async () => { - render() - - expect(await screen.findByRole('link')).toHaveAttribute( - 'href', - 'https://atomlearning.co.uk' - ) - }) }) }) diff --git a/lib/src/components/button/Button.tsx b/lib/src/components/button/Button.tsx index e235a6a88..9b68abfbd 100644 --- a/lib/src/components/button/Button.tsx +++ b/lib/src/components/button/Button.tsx @@ -3,11 +3,11 @@ import { darken, opacify } from 'color2k' import * as React from 'react' import { Box } from '~/components/box' -import { Icon } from '~/components/icon' +import { Icon, StyledIcon } from '~/components/icon' import { Loader } from '~/components/loader' import { styled, theme } from '~/stitches' -import { NavigatorActions } from '~/types' import { Override } from '~/utilities' +import { Slot } from '@radix-ui/react-slot' const getButtonOutlineVariant = ( base: string, @@ -86,19 +86,24 @@ export const StyledButton = styled('button', { fontSize: '$sm', lineHeight: 1.53, height: '$3', - px: '$4' + px: '$4', + gap: '$2', + [`& ${StyledIcon}`]: { size: 16 } }, md: { fontSize: '$md', lineHeight: 1.5, height: '$4', - px: '$5' + px: '$5', + gap: '$3', + [`& ${StyledIcon}`]: { size: 20 } }, lg: { fontSize: '$lg', lineHeight: 1.5, height: '$5', - px: '$5' + px: '$5', + [`& ${StyledIcon}`]: { size: 22 } } }, isLoading: { @@ -117,7 +122,6 @@ export const StyledButton = styled('button', { } } }, - compoundVariants: [ { theme: 'primary', @@ -189,108 +193,72 @@ export const StyledButton = styled('button', { ] }) -const WithLoader = ({ isLoading, children }) => ( - <> - - - {children} - - -) - -const getIconSize = (size) => { - switch (size) { - case 'lg': - return 22 - case 'md': - return 20 - case 'sm': - default: - return 16 - } -} - -const getChildren = (children, size) => - React.Children.map(children, (child, i) => { - if (child?.type === Icon) { - return React.cloneElement(child, { - css: { - [i === 0 ? 'mr' : 'ml']: size === 'sm' ? '$2' : '$3', - size: getIconSize(size), - ...(child.props.css ? child.props.css : {}) - } - }) - } - return child - }) - type ButtonProps = Override< React.ComponentProps, VariantProps & { as?: React.ComponentType | React.ElementType children: React.ReactNode isLoading?: boolean - } & NavigatorActions + asChild?: boolean + } > export const Button = React.forwardRef( ( { children, + asChild, isLoading, onClick, - href, appearance = 'solid', size = 'md', theme = 'primary', - type = 'button', ...rest }, ref ) => { - const linkSpecificProps = href - ? { - as: 'a', - href, - onClick: undefined - } - : {} + const props = { + ...rest, + appearance, + size, + theme, + children, + ref + } - const buttonSpecificProps = href ? {} : { type } + if (asChild) { + return + } - // Note: button is not disabled when loading for accessibility purposes. - // Instead the click action is not fired and the button looks faded return ( {typeof isLoading === 'boolean' ? ( - - {getChildren(children, size)} - + <> + + + {children} + + ) : ( - getChildren(children, size) + children )} ) } -) as React.FC +) Button.displayName = 'Button' diff --git a/lib/src/components/button/__snapshots__/Button.test.tsx.snap b/lib/src/components/button/__snapshots__/Button.test.tsx.snap index 3f0298430..9f1772403 100644 --- a/lib/src/components/button/__snapshots__/Button.test.tsx.snap +++ b/lib/src/components/button/__snapshots__/Button.test.tsx.snap @@ -56,12 +56,18 @@ exports[`Button component Loading state renders a loading button 1`] = ` } @media { - .c-fkUJsw-elrwsr-size-md { + .c-fkUJsw-dXsdwv-size-md { font-size: var(--fontSizes-md); line-height: 1.5; height: var(--sizes-4); padding-left: var(--space-5); padding-right: var(--space-5); + gap: var(--space-3); + } + + .c-fkUJsw-dXsdwv-size-md .c-dbrbZt { + height: 20px; + width: 20px; } .c-dbrbZt-dMrjnF-size-md { @@ -152,12 +158,6 @@ exports[`Button component Loading state renders a loading button 1`] = ` } @media { - .c-dbrbZt-idQfaGE-css { - margin-left: var(--space-3); - height: 20px; - width: 20px; - } - .c-dhzjXW-ihMdMjL-css { justify-content: center; opacity: 1; @@ -173,7 +173,7 @@ exports[`Button component Loading state renders a loading button 1`] = `
+ + ) expect(screen.getByRole('button')).toBeInTheDocument() }) diff --git a/lib/src/components/link/Link.tsx b/lib/src/components/link/Link.tsx index abfd9abe6..341e16cf2 100644 --- a/lib/src/components/link/Link.tsx +++ b/lib/src/components/link/Link.tsx @@ -1,13 +1,13 @@ import * as React from 'react' import { styled } from '~/stitches' -import { NavigatorActions } from '~/types' -import { Override } from '~/utilities' +import { isExternalLink, isMailLink, isTelLink } from '~/utilities' import { StyledHeading } from '../heading/Heading' import { StyledLi } from '../list/List' import { StyledMarkdownEmphasis } from '../markdown-content/components' import { StyledText, textVariants } from '../text/Text' +import { Slot } from '@radix-ui/react-slot' export const StyledLink = styled('a', { bg: 'unset', @@ -35,23 +35,21 @@ export const StyledLink = styled('a', { variants: textVariants }) -type LinkProps = Override< - React.ComponentProps, - { - as?: React.ComponentType | React.ElementType - } & NavigatorActions -> - -export const Link = React.forwardRef( - ({ size = 'md', href, ...props }, ref) => ( - - ) -) as React.FC +export const Link = React.forwardRef< + HTMLAnchorElement, + React.ComponentProps & { asChild?: boolean } +>(({ asChild, size = 'md', href, ...rest }, ref) => { + if (asChild) { + return + } + + const props = { href, size, ref, ...rest } + + if (href && isExternalLink(href) && !isMailLink(href) && !isTelLink(href)) { + return + } + + return +}) Link.displayName = 'Link' diff --git a/lib/src/components/link/__snapshots__/Link.test.tsx.snap b/lib/src/components/link/__snapshots__/Link.test.tsx.snap index 26ebf9813..52c20a11d 100644 --- a/lib/src/components/link/__snapshots__/Link.test.tsx.snap +++ b/lib/src/components/link/__snapshots__/Link.test.tsx.snap @@ -138,20 +138,20 @@ exports[`Link component can be nested within Text and Heading 1`] = `

- +

- +

`; @@ -221,6 +221,8 @@ exports[`Link component renders an anchor 1`] = ` GOOGLE @@ -309,6 +311,8 @@ exports[`Link component renders an large anchor 1`] = ` GOOGLE diff --git a/lib/src/utilities/index.ts b/lib/src/utilities/index.ts index c6ec805e4..749e38c4a 100644 --- a/lib/src/utilities/index.ts +++ b/lib/src/utilities/index.ts @@ -3,3 +3,4 @@ export * from './css-wrapper' export { NoOverflowWrapper, noOverflowStyleBlock } from './no-overflow-wrapper' export * from './style' export * from './types' +export * from './uri' diff --git a/lib/src/utilities/uri.ts b/lib/src/utilities/uri.ts new file mode 100644 index 000000000..1e17deef9 --- /dev/null +++ b/lib/src/utilities/uri.ts @@ -0,0 +1,8 @@ +export const isExternalLink = (link: string) => { + const isAbsolute = /^https?:\/\//.test(link) + return isAbsolute && new URL(link).origin !== window.location.origin +} + +export const isMailLink = (link: string) => link.startsWith('mailto:') + +export const isTelLink = (link: string) => link.startsWith('tel:') From 31a46cf6110ce80723926678eea808038438ddcf Mon Sep 17 00:00:00 2001 From: Thomas Digby Date: Mon, 21 Aug 2023 16:02:26 +0100 Subject: [PATCH 02/11] fix: snapshots --- .../__snapshots__/Accordion.test.tsx.snap | 131 +------- .../__snapshots__/BannerRegular.test.tsx.snap | 306 ++++-------------- .../__snapshots__/Calendar.test.tsx.snap | 10 +- .../CreatePasswordField.test.tsx.snap | 20 +- .../__snapshots__/DataTable.test.tsx.snap | 18 +- .../__snapshots__/DateInput.test.tsx.snap | 8 +- .../components/field-wrapper/FieldWrapper.tsx | 15 +- .../__snapshots__/FieldWrapper.test.tsx.snap | 2 + .../__snapshots__/FileInput.test.tsx.snap | 20 +- .../MarkdownContent.test.tsx.snap | 4 + .../__snapshots__/Pagination.test.tsx.snap | 131 +------- .../__snapshots__/Sidedrawer.test.tsx.snap | 20 +- .../__snapshots__/Stepper.test.tsx.snap | 36 ++- .../tabs/__snapshots__/Tabs.test.tsx.snap | 131 +------- .../TileInteractive.test.tsx.snap | 131 +------- .../TileToggleGroup.test.tsx.snap | 131 +------- .../tile/__snapshots__/Tile.test.tsx.snap | 131 +------- 17 files changed, 278 insertions(+), 967 deletions(-) diff --git a/lib/src/components/accordion/__snapshots__/Accordion.test.tsx.snap b/lib/src/components/accordion/__snapshots__/Accordion.test.tsx.snap index 369d0ef22..e4be70ea9 100644 --- a/lib/src/components/accordion/__snapshots__/Accordion.test.tsx.snap +++ b/lib/src/components/accordion/__snapshots__/Accordion.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Accordion component renders an accordion 1`] = ` @media { :root, - .t-kAUxbu { + .t-kgHKNm { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -21,8 +21,8 @@ exports[`Accordion component renders an accordion 1`] = ` --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-grey500: hsl(0, 0%, 76%); + --colors-grey600: hsl(0, 0%, 71%); --colors-grey700: hsl(0, 0%, 46%); --colors-grey800: hsl(0, 0%, 33%); --colors-grey900: hsl(0, 0%, 20%); @@ -32,126 +32,30 @@ exports[`Accordion component renders an accordion 1`] = ` --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-blue400: hsl(212, 100%, 88%); + --colors-blue500: hsl(212, 87%, 84%); + --colors-blue600: hsl(216, 96%, 79%); + --colors-blue700: hsl(214, 92%, 63%); --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-blue1200: hsl(228, 63%, 20%); + --colors-purple100: hsl(281, 100%, 98%); --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); + --colors-purple300: hsl(270, 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-purple500: hsl(270, 87%, 84%); + --colors-purple600: hsl(264, 96%, 79%); + --colors-purple700: hsl(275, 100%, 51%); --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); + --colors-purple900: hsl(268, 78%, 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-purple1200: hsl(265, 63%, 20%); --colors-tonal50: hsl(0, 0%, 96%); --colors-tonal100: hsl(0, 0%, 92%); - --colors-tonal200: hsl(0, 0%, 62%); + --colors-tonal200: hsl(0, 0%, 71%); --colors-tonal300: hsl(0, 0%, 46%); --colors-tonal400: hsl(0, 0%, 33%); --colors-tonal500: hsl(0, 0%, 20%); @@ -194,9 +98,6 @@ exports[`Accordion component renders an accordion 1`] = ` --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; diff --git a/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap b/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap index c251d1b3a..e946eb649 100644 --- a/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap +++ b/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap @@ -3,7 +3,7 @@ exports[`BannerRegular component renders 1`] = ` @media { :root, - .t-kAUxbu { + .t-kgHKNm { --default-colors: [object Object]; --default-space: [object Object]; --default-fontSizes: [object Object]; @@ -21,8 +21,8 @@ exports[`BannerRegular component renders 1`] = ` --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-grey500: hsl(0, 0%, 76%); + --colors-grey600: hsl(0, 0%, 71%); --colors-grey700: hsl(0, 0%, 46%); --colors-grey800: hsl(0, 0%, 33%); --colors-grey900: hsl(0, 0%, 20%); @@ -32,126 +32,30 @@ exports[`BannerRegular component renders 1`] = ` --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-blue400: hsl(212, 100%, 88%); + --colors-blue500: hsl(212, 87%, 84%); + --colors-blue600: hsl(216, 96%, 79%); + --colors-blue700: hsl(214, 92%, 63%); --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-blue1200: hsl(228, 63%, 20%); + --colors-purple100: hsl(281, 100%, 98%); --colors-purple200: hsl(270, 100%, 95%); - --colors-purple300: hsl(271, 100%, 92%); + --colors-purple300: hsl(270, 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-purple500: hsl(270, 87%, 84%); + --colors-purple600: hsl(264, 96%, 79%); + --colors-purple700: hsl(275, 100%, 51%); --colors-purple800: hsl(273, 94%, 48%); - --colors-purple900: hsl(268, 79%, 42%); + --colors-purple900: hsl(268, 78%, 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-purple1200: hsl(265, 63%, 20%); --colors-tonal50: hsl(0, 0%, 96%); --colors-tonal100: hsl(0, 0%, 92%); - --colors-tonal200: hsl(0, 0%, 62%); + --colors-tonal200: hsl(0, 0%, 71%); --colors-tonal300: hsl(0, 0%, 46%); --colors-tonal400: hsl(0, 0%, 33%); --colors-tonal500: hsl(0, 0%, 20%); @@ -194,9 +98,6 @@ exports[`BannerRegular component renders 1`] = ` --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; @@ -428,12 +329,18 @@ exports[`BannerRegular component renders 1`] = ` margin-left: var(--space-2); } - .c-fkUJsw-eYnvrx-size-sm { + .c-fkUJsw-jMTgOB-size-sm { font-size: var(--fontSizes-sm); line-height: 1.53; height: var(--sizes-3); padding-left: var(--space-4); padding-right: var(--space-4); + gap: var(--space-2); + } + + .c-fkUJsw-jMTgOB-size-sm .c-dbrbZt { + height: 16px; + width: 16px; } .c-fkUJsw-fGHEql-fullWidth-true { @@ -497,12 +404,20 @@ exports[`BannerRegular component renders 1`] = ` } @media (min-width: 800px) { - .c-fkUJsw-hnmcil-size-md { + .c-fkUJsw-dbnTtJ-size-md { font-size: var(--fontSizes-md); line-height: 1.5; height: var(--sizes-4); padding-left: var(--space-5); padding-right: var(--space-5); + gap: var(--space-3); + } +} + +@media (min-width: 800px) { + .c-fkUJsw-dbnTtJ-size-md .c-dbrbZt { + height: 20px; + width: 20px; } } @@ -586,13 +501,13 @@ exports[`BannerRegular component renders 1`] = ` class="c-jgdwfn c-jgdwfn-ejCoEP-direction-row c-jgdwfn-XefLA-wrap-wrap c-jgdwfn-awKDG-justify-start c-jgdwfn-jroWjL-align-center c-jgdwfn-dPMagj-gap-2 c-jgdwfn-hAgpth-gap-4" > + + ))} {description && ( {description} diff --git a/lib/src/components/field-wrapper/__snapshots__/FieldWrapper.test.tsx.snap b/lib/src/components/field-wrapper/__snapshots__/FieldWrapper.test.tsx.snap index 7a69e00fe..446ed3112 100644 --- a/lib/src/components/field-wrapper/__snapshots__/FieldWrapper.test.tsx.snap +++ b/lib/src/components/field-wrapper/__snapshots__/FieldWrapper.test.tsx.snap @@ -216,6 +216,8 @@ exports[`FieldWrapper component renders 1`] = ` Example prompt diff --git a/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap b/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap index 408426573..9077ca964 100644 --- a/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap +++ b/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap @@ -30,12 +30,18 @@ exports[`FileInput component renders 1`] = ` } @media { - .c-fkUJsw-elrwsr-size-md { + .c-fkUJsw-dXsdwv-size-md { font-size: var(--fontSizes-md); line-height: 1.5; height: var(--sizes-4); padding-left: var(--space-5); padding-right: var(--space-5); + gap: var(--space-3); + } + + .c-fkUJsw-dXsdwv-size-md .c-dbrbZt { + height: 20px; + width: 20px; } .c-dbrbZt-dMrjnF-size-md { @@ -68,22 +74,14 @@ exports[`FileInput component renders 1`] = ` } } -@media { - .c-dbrbZt-idQgHjC-css { - margin-right: var(--space-3); - height: 20px; - width: 20px; - } -} -
)} - diff --git a/lib/src/components/button/Button.tsx b/lib/src/components/button/Button.tsx index 9b68abfbd..4e968a026 100644 --- a/lib/src/components/button/Button.tsx +++ b/lib/src/components/button/Button.tsx @@ -1,3 +1,4 @@ +import { Slot } from '@radix-ui/react-slot' import type { VariantProps } from '@stitches/react' import { darken, opacify } from 'color2k' import * as React from 'react' @@ -7,7 +8,6 @@ import { Icon, StyledIcon } from '~/components/icon' import { Loader } from '~/components/loader' import { styled, theme } from '~/stitches' import { Override } from '~/utilities' -import { Slot } from '@radix-ui/react-slot' const getButtonOutlineVariant = ( base: string, @@ -196,10 +196,10 @@ export const StyledButton = styled('button', { type ButtonProps = Override< React.ComponentProps, VariantProps & { - as?: React.ComponentType | React.ElementType + as?: never + asChild?: boolean children: React.ReactNode isLoading?: boolean - asChild?: boolean } > @@ -207,6 +207,7 @@ export const Button = React.forwardRef( ( { children, + as, asChild, isLoading, onClick, @@ -227,7 +228,14 @@ export const Button = React.forwardRef( } if (asChild) { - return + return ( + + ) } return ( diff --git a/lib/src/components/file-input/FileInput.tsx b/lib/src/components/file-input/FileInput.tsx index 348971b18..0238e885f 100644 --- a/lib/src/components/file-input/FileInput.tsx +++ b/lib/src/components/file-input/FileInput.tsx @@ -24,16 +24,18 @@ export const FileInput: React.FC = ({ } return ( - ) } diff --git a/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap b/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap index 9077ca964..a315a73b9 100644 --- a/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap +++ b/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap @@ -77,7 +77,6 @@ exports[`FileInput component renders 1`] = `
{prompt && ( - + {!prompt?.link ? : prompt.label} )} From 427dc90d6145915d96368a27cbf63a264261bc79 Mon Sep 17 00:00:00 2001 From: Thomas Digby Date: Tue, 22 Aug 2023 18:16:32 +0100 Subject: [PATCH 10/11] fix: simplify link href logic --- lib/src/components/link/Link.tsx | 7 ++----- lib/src/utilities/uri.ts | 6 +----- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/lib/src/components/link/Link.tsx b/lib/src/components/link/Link.tsx index 12e05c090..1fdb4a164 100644 --- a/lib/src/components/link/Link.tsx +++ b/lib/src/components/link/Link.tsx @@ -2,7 +2,7 @@ import { Slot } from '@radix-ui/react-slot' import * as React from 'react' import { styled } from '~/stitches' -import { isExternalLink, isMailLink, isTelLink } from '~/utilities' +import { isExternalLink } from '~/utilities' import { StyledHeading } from '../heading/Heading' import { StyledLi } from '../list/List' @@ -46,12 +46,9 @@ export const Link = React.forwardRef( return } - const isExternal = - href && isExternalLink(href) && !isMailLink(href) && !isTelLink(href) - return ( { +export const isExternalLink = (link: string = '') => { const isAbsolute = /^https?:\/\//.test(link) return isAbsolute && new URL(link).origin !== window.location.origin } - -export const isMailLink = (link: string) => link.startsWith('mailto:') - -export const isTelLink = (link: string) => link.startsWith('tel:') From 13b70122d6bf466fead3e869552312ead7d961dc Mon Sep 17 00:00:00 2001 From: Thomas Digby Date: Tue, 22 Aug 2023 18:34:23 +0100 Subject: [PATCH 11/11] chore: remove unnecessary lint rule, update previously ignored instances --- lib/.eslintrc | 2 +- lib/src/utilities/css-wrapper/CSSWrapper.tsx | 9 +-------- .../OptionallyVisuallyHiddenContainer.tsx | 7 +------ lib/src/utilities/uri.ts | 2 +- 4 files changed, 4 insertions(+), 16 deletions(-) diff --git a/lib/.eslintrc b/lib/.eslintrc index de7f2439b..96b59d79c 100644 --- a/lib/.eslintrc +++ b/lib/.eslintrc @@ -63,7 +63,7 @@ "react/jsx-boolean-value": "warn", "react/jsx-curly-brace-presence": ["warn", { "props": "never" }], "react/jsx-fragments": "warn", - "react/jsx-no-useless-fragment": "error", + "react/jsx-no-useless-fragment": "off", "react/no-array-index-key": "warn", "react/no-did-update-set-state": "warn", "react/no-direct-mutation-state": "error", diff --git a/lib/src/utilities/css-wrapper/CSSWrapper.tsx b/lib/src/utilities/css-wrapper/CSSWrapper.tsx index f5fad31bc..3176c721b 100644 --- a/lib/src/utilities/css-wrapper/CSSWrapper.tsx +++ b/lib/src/utilities/css-wrapper/CSSWrapper.tsx @@ -12,13 +12,6 @@ export const CSSWrapper = ({ css, children }: CssWrapperProps): React.ReactElement => - css ? ( - {children} - ) : ( - // children could be multiple elements/components, - // so we need a fragment here. - // eslint-disable-next-line react/jsx-no-useless-fragment - <>{children} - ) + css ? {children} : <>{children} CSSWrapper.displayName = 'CSSWrapper' diff --git a/lib/src/utilities/optionally-visually-hidden-container/OptionallyVisuallyHiddenContainer.tsx b/lib/src/utilities/optionally-visually-hidden-container/OptionallyVisuallyHiddenContainer.tsx index 0182da652..42da1a2a3 100644 --- a/lib/src/utilities/optionally-visually-hidden-container/OptionallyVisuallyHiddenContainer.tsx +++ b/lib/src/utilities/optionally-visually-hidden-container/OptionallyVisuallyHiddenContainer.tsx @@ -6,10 +6,5 @@ export const OptionallyVisuallyHiddenContainer: React.FC<{ }> = ({ children, hidden = false }) => { if (hidden) return {children} - return children ? ( - // children could be multiple elements/components, - // so we need a fragment here. - // eslint-disable-next-line react/jsx-no-useless-fragment - <>{children} - ) : null + return children ? <>{children} : null } diff --git a/lib/src/utilities/uri.ts b/lib/src/utilities/uri.ts index 6b38a7ff6..7235f5de6 100644 --- a/lib/src/utilities/uri.ts +++ b/lib/src/utilities/uri.ts @@ -1,4 +1,4 @@ -export const isExternalLink = (link: string = '') => { +export const isExternalLink = (link = '') => { const isAbsolute = /^https?:\/\//.test(link) return isAbsolute && new URL(link).origin !== window.location.origin }