From d2fc6b9f58295e00fa250fa75f916855b4a4f5b9 Mon Sep 17 00:00:00 2001 From: Tobias Barsnes Date: Fri, 25 Oct 2024 13:16:17 +0200 Subject: [PATCH] feat: rename `size` prop to `data-size` (#2680) resolves #2673 --- .../src/ClipboardButton/ClipboardButton.tsx | 2 +- .../src/CodeSnippet/CodeSnippet.tsx | 2 +- .../_components/src/ColorModal/ColorModal.tsx | 6 +- apps/_components/src/Footer/Footer.tsx | 12 +- apps/_components/src/Header/Header.tsx | 2 +- apps/storefront/app/(frontpage)/layout.tsx | 2 +- .../app/bloggen/_components/Card/BlogCard.tsx | 8 +- .../_components/Contributors/Contributors.tsx | 4 +- .../_components/PostLayout/PostLayout.tsx | 6 +- .../tilgjengelighet/kontrast/page.mdx | 4 +- .../grunnleggende/for-designere/terskel.txt | 4 +- apps/storefront/app/not-found.tsx | 2 +- apps/storefront/components/Banner/Banner.tsx | 2 +- .../ComponentCard/ComponentCard.tsx | 2 +- apps/storefront/components/Image/Image.tsx | 2 +- .../components/ImageBanner/ImageBanner.tsx | 4 +- .../NavigationCard/NavigationCard.tsx | 4 +- .../storefront/components/Section/Section.tsx | 2 +- .../components/SidebarMenu/SidebarMenu.tsx | 10 +- .../components/TeaserCard/TeaserCard.tsx | 2 +- .../components/Tokens/TokenList/TokenList.tsx | 6 +- .../layouts/MenuPageLayout/MenuPageLayout.tsx | 2 +- .../layouts/PageLayout/PageLayout.tsx | 4 +- apps/storefront/mdx-components.tsx | 22 +- .../docs-components/DoAndDont/DoAndDont.tsx | 2 +- .../Information/Information.tsx | 2 +- apps/theme/app/page.tsx | 2 +- .../app/slik-bruker-du-verktoyet/page.tsx | 8 +- .../BackgroundSurface/BackgroundSurface.tsx | 2 +- .../app/testside/Backgrounds/Backgrounds.tsx | 6 +- .../testside/BaseContrast/BaseContrast.tsx | 4 +- .../app/testside/Interaction/Interaction.tsx | 2 +- apps/theme/app/testside/page.tsx | 28 +- .../components/ColorPicker/ColorPicker.tsx | 2 +- .../Previews/Components/Components.tsx | 103 +- .../Dashboard/ColorCard/ColorCard.tsx | 4 +- .../Previews/Dashboard/Dashboard.tsx | 46 +- .../components/Previews/Landing/Landing.tsx | 4 +- .../components/ThemeToolbar/ThemeToolbar.tsx | 4 +- .../components/TokenModal/TokenModal.tsx | 12 +- packages/Overview.mdx | 8 +- .../src/components/Alert/Alert.stories.tsx | 18 +- .../react/src/components/Alert/Alert.test.tsx | 4 +- packages/react/src/components/Alert/Alert.tsx | 13 +- .../src/components/Avatar/Avatar.stories.tsx | 28 +- .../src/components/Avatar/Avatar.test.tsx | 2 +- .../react/src/components/Avatar/Avatar.tsx | 4 +- .../src/components/Badge/Badge.stories.tsx | 33 +- packages/react/src/components/Badge/Badge.tsx | 15 +- .../Breadcrumbs/Breadcrumbs.stories.tsx | 4 +- .../Breadcrumbs/Breadcrumbs.test.tsx | 5 - .../components/Breadcrumbs/Breadcrumbs.tsx | 15 +- .../src/components/Button/Button.stories.tsx | 20 +- .../react/src/components/Button/Button.tsx | 13 +- .../src/components/Card/Card.stories.tsx | 10 +- packages/react/src/components/Chip/Chips.tsx | 16 +- .../components/Dropdown/Dropdown.stories.tsx | 2 +- .../ErrorSummary/ErrorSummary.stories.tsx | 2 +- .../components/ErrorSummary/ErrorSummary.tsx | 7 +- .../components/Heading/Heading.stories.tsx | 2 +- .../react/src/components/Heading/Heading.tsx | 13 +- .../components/HelpText/HelpText.stories.tsx | 2 +- .../src/components/HelpText/HelpText.tsx | 18 +- .../src/components/Label/Label.stories.tsx | 2 +- packages/react/src/components/Label/Label.tsx | 7 +- .../src/components/List/List.stories.tsx | 24 +- .../react/src/components/List/List.test.tsx | 2 +- packages/react/src/components/List/Lists.tsx | 18 +- packages/react/src/components/Modal/Modal.mdx | 2 +- .../src/components/Modal/Modal.stories.tsx | 8 +- packages/react/src/components/Modal/Modal.tsx | 1 - .../Pagination/Pagination.stories.tsx | 6 +- .../components/Pagination/Pagination.test.tsx | 2 +- .../src/components/Pagination/Pagination.tsx | 18 +- .../Paragraph/Paragraph.stories.tsx | 2 +- .../src/components/Paragraph/Paragraph.tsx | 7 +- .../components/Popover/Popover.stories.tsx | 6 +- .../react/src/components/Popover/Popover.tsx | 11 +- .../src/components/Table/Table.stories.tsx | 8 +- packages/react/src/components/Table/Table.tsx | 11 +- .../src/components/Tabs/Tabs.stories.tsx | 4 +- packages/react/src/components/Tabs/Tabs.tsx | 18 +- .../react/src/components/Tag/Tag.stories.tsx | 6 +- packages/react/src/components/Tag/Tag.tsx | 12 +- .../ToggleGroup/ToggleGroup.stories.tsx | 6 +- .../components/ToggleGroup/ToggleGroup.tsx | 12 +- .../ValidationMessage.stories.tsx | 2 +- .../ValidationMessage/ValidationMessage.tsx | 5 +- .../src/components/form/CharacterCounter.tsx | 6 +- .../form/Checkbox/Checkbox.stories.tsx | 4 +- .../src/components/form/Checkbox/Checkbox.tsx | 2 +- .../form/Combobox/Combobox.stories.tsx | 2 +- .../src/components/form/Combobox/Combobox.tsx | 2 +- .../src/components/form/Combobox/Custom.tsx | 2 +- .../src/components/form/Combobox/Empty.tsx | 2 +- .../form/Combobox/Option/Option.tsx | 6 +- .../form/Combobox/internal/ComboboxChips.tsx | 2 +- .../form/Combobox/internal/ComboboxError.tsx | 2 +- .../form/Combobox/internal/ComboboxInput.tsx | 4 +- .../form/Combobox/internal/ComboboxLabel.tsx | 4 +- .../src/components/form/Fieldset/Fieldset.tsx | 6 +- .../components/form/Input/Input.stories.tsx | 772 ++++------- .../react/src/components/form/Input/Input.tsx | 12 +- .../components/form/Radio/Radio.stories.tsx | 4 +- .../react/src/components/form/Radio/Radio.tsx | 2 +- .../components/form/Search/Search.stories.tsx | 4 +- .../src/components/form/Search/Search.tsx | 16 +- .../components/form/Select/Select.stories.tsx | 2 +- .../src/components/form/Select/Select.tsx | 13 +- .../src/components/form/Switch/Switch.tsx | 6 +- .../form/Textarea/Textarea.stories.tsx | 2 +- .../src/components/form/Textarea/Textarea.tsx | 20 +- .../form/Textfield/Textfield.stories.tsx | 4 +- .../components/form/Textfield/Textfield.tsx | 26 +- .../loaders/Skeleton/Skeleton.stories.tsx | 10 +- .../loaders/Spinner/Spinner.stories.tsx | 18 +- .../components/loaders/Spinner/Spinner.tsx | 4 +- packages/react/src/types.ts | 4 + packages/react/stories/Typography.stories.tsx | 20 +- packages/react/stories/showcase.stories.tsx | 100 +- packages/react/stories/testing.stories.tsx | 1165 +++++------------ .../src/ui/components/Toast/Toast.tsx | 2 +- .../src/ui/pages/PageOne/PageOne.tsx | 10 +- 123 files changed, 1035 insertions(+), 2026 deletions(-) diff --git a/apps/_components/src/ClipboardButton/ClipboardButton.tsx b/apps/_components/src/ClipboardButton/ClipboardButton.tsx index 52d4b07a1b..d21df7faa1 100644 --- a/apps/_components/src/ClipboardButton/ClipboardButton.tsx +++ b/apps/_components/src/ClipboardButton/ClipboardButton.tsx @@ -35,7 +35,7 @@ export const ClipboardButton = ({ icon={!text} variant='tertiary' color='neutral' - size='sm' + data-size='sm' > {text && {text}} diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.tsx b/apps/_components/src/CodeSnippet/CodeSnippet.tsx index 4f729ffa7d..790a7d5da2 100644 --- a/apps/_components/src/CodeSnippet/CodeSnippet.tsx +++ b/apps/_components/src/CodeSnippet/CodeSnippet.tsx @@ -88,7 +88,7 @@ const CodeSnippet = ({ aria-label='Kopier' icon color='neutral' - size='sm' + data-size='sm' > diff --git a/apps/_components/src/ColorModal/ColorModal.tsx b/apps/_components/src/ColorModal/ColorModal.tsx index 5c970ad6ce..3953845126 100644 --- a/apps/_components/src/ColorModal/ColorModal.tsx +++ b/apps/_components/src/ColorModal/ColorModal.tsx @@ -26,11 +26,11 @@ const Field = ({ return (
{label && ( - + {label} )} - + {value} {copyBtn && } @@ -61,7 +61,7 @@ export const ColorModal = ({ backdropClose > - + {`${capitalizeFirstLetter(namespace)} ${capitalizeFirstLetter(getColorNameFromNumber(weight))}`} diff --git a/apps/_components/src/Footer/Footer.tsx b/apps/_components/src/Footer/Footer.tsx index 312aaa134e..d3068152bb 100644 --- a/apps/_components/src/Footer/Footer.tsx +++ b/apps/_components/src/Footer/Footer.tsx @@ -55,7 +55,7 @@ export const Footer = forwardRef(function Footer(
- + Lages på tvers av offentlige etater:
@@ -64,7 +64,7 @@ export const Footer = forwardRef(function Footer(
-
- + Om nettstedet {LinkList(centerLinks)}
- + Kom i kontakt med oss {LinkList(rightLinks)} @@ -89,7 +89,9 @@ export const Footer = forwardRef(function Footer(
- © {getCurrentYear()} Designsystemet + + © {getCurrentYear()} Designsystemet +
diff --git a/apps/_components/src/Header/Header.tsx b/apps/_components/src/Header/Header.tsx index ef257177c4..9d6dd2202f 100644 --- a/apps/_components/src/Header/Header.tsx +++ b/apps/_components/src/Header/Header.tsx @@ -108,7 +108,7 @@ const Header = ({ menu, betaTag, skipLink = true }: HeaderProps) => { > {menu.map((item, index) => (
  • - + {
    Next
    - + Designsystemet hjelper deg å lage gode digitale tjenester
    diff --git a/apps/storefront/app/bloggen/_components/Card/BlogCard.tsx b/apps/storefront/app/bloggen/_components/Card/BlogCard.tsx index 066a80af59..df9cec33da 100644 --- a/apps/storefront/app/bloggen/_components/Card/BlogCard.tsx +++ b/apps/storefront/app/bloggen/_components/Card/BlogCard.tsx @@ -48,15 +48,15 @@ export const BlogCard = ({ {tagText && ( - + {tagText} )} - + {title} - {desc} - + {desc} + {author || (date && ( <> diff --git a/apps/storefront/app/bloggen/_components/Contributors/Contributors.tsx b/apps/storefront/app/bloggen/_components/Contributors/Contributors.tsx index e013c4fb69..b0059b204a 100644 --- a/apps/storefront/app/bloggen/_components/Contributors/Contributors.tsx +++ b/apps/storefront/app/bloggen/_components/Contributors/Contributors.tsx @@ -17,10 +17,10 @@ export const Contributors = ({ authors }: ContributorsProps) => { className={classes.logoImage} />
    • - + Bidragsytere - + {authors?.map((author, index) => ( {index !== 0 && } diff --git a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx index a1c575b450..991902b447 100644 --- a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx +++ b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx @@ -52,7 +52,7 @@ function PostLayout({ {ingress} - + {date} {author} @@ -67,10 +67,10 @@ function PostLayout({ {content}
    - + Ønsker du å skrive for bloggen? - + Ta kontakt med oss på{' '} Gjeldende regelverk, WCAG 2.1 @@ -63,7 +63,7 @@ Alle brukerne, også de med svekket syn, skal kunne se innholdet i digitale tjen Fremtidig eller strengere: diff --git a/apps/storefront/app/grunnleggende/for-designere/terskel.txt b/apps/storefront/app/grunnleggende/for-designere/terskel.txt index 7cbcf86cbe..c530d7d3f8 100644 --- a/apps/storefront/app/grunnleggende/for-designere/terskel.txt +++ b/apps/storefront/app/grunnleggende/for-designere/terskel.txt @@ -7,7 +7,7 @@ Skriv noe om HSL, Om du ønsker å lage dine egne farger, kan du bruke tabellen under for å passe på at du holder deg innenfor terkskelverdiene for den gitte fargen. - +
    Navn @@ -31,4 +31,4 @@ Om du ønsker å lage dine egne farger, kan du bruke tabellen under for å passe #### Kontrastfarger -med eksempler \ No newline at end of file +med eksempler diff --git a/apps/storefront/app/not-found.tsx b/apps/storefront/app/not-found.tsx index 0c69eae555..fa61caa59f 100644 --- a/apps/storefront/app/not-found.tsx +++ b/apps/storefront/app/not-found.tsx @@ -25,7 +25,7 @@ const NotFound = ({ children }: { children: React.ReactNode }) => { />
    - Denne siden finnes ikke + Denne siden finnes ikke Beklager, vi finner ikke siden du ba om. Siden kan være flyttet eller slettet. diff --git a/apps/storefront/components/Banner/Banner.tsx b/apps/storefront/components/Banner/Banner.tsx index d4fab70795..90475a7df8 100644 --- a/apps/storefront/components/Banner/Banner.tsx +++ b/apps/storefront/components/Banner/Banner.tsx @@ -37,7 +37,7 @@ const BannerRoot = ({ type BannerHeadingProps = Omit; const BannerHeading = ({ ...props }: BannerHeadingProps) => { - return ; + return ; }; type BannerIngressProps = HTMLAttributes; diff --git a/apps/storefront/components/ComponentCard/ComponentCard.tsx b/apps/storefront/components/ComponentCard/ComponentCard.tsx index 83309805d9..2b7eee02b8 100644 --- a/apps/storefront/components/ComponentCard/ComponentCard.tsx +++ b/apps/storefront/components/ComponentCard/ComponentCard.tsx @@ -18,7 +18,7 @@ const ComponentCard = ({ title, image, url }: ComponentCardProps) => { alt={title} className={classes.image} /> - + {title} diff --git a/apps/storefront/components/Image/Image.tsx b/apps/storefront/components/Image/Image.tsx index 11578de899..63d221afa3 100644 --- a/apps/storefront/components/Image/Image.tsx +++ b/apps/storefront/components/Image/Image.tsx @@ -30,7 +30,7 @@ const Image = ({ aria-label={alt} > {caption && ( - +
    {caption}
     )} diff --git a/apps/storefront/components/ImageBanner/ImageBanner.tsx b/apps/storefront/components/ImageBanner/ImageBanner.tsx index 567e0367f4..50b9d92d3c 100644 --- a/apps/storefront/components/ImageBanner/ImageBanner.tsx +++ b/apps/storefront/components/ImageBanner/ImageBanner.tsx @@ -89,11 +89,11 @@ const ImageBanner = ({
    {title ? ( - + {title} ) : null} - {description && {description}} + {description && {description}} {content && content} {link && ( diff --git a/apps/storefront/components/NavigationCard/NavigationCard.tsx b/apps/storefront/components/NavigationCard/NavigationCard.tsx index c3c64d4d2f..06bbb0d031 100644 --- a/apps/storefront/components/NavigationCard/NavigationCard.tsx +++ b/apps/storefront/components/NavigationCard/NavigationCard.tsx @@ -33,11 +33,11 @@ const NavigationCard = ({
    {icon}
    - + {title} - + {description} diff --git a/apps/storefront/components/Section/Section.tsx b/apps/storefront/components/Section/Section.tsx index f64b90aea4..a21c71854c 100644 --- a/apps/storefront/components/Section/Section.tsx +++ b/apps/storefront/components/Section/Section.tsx @@ -24,7 +24,7 @@ const Section = ({
    {title && ( - + {title} )} diff --git a/apps/storefront/components/SidebarMenu/SidebarMenu.tsx b/apps/storefront/components/SidebarMenu/SidebarMenu.tsx index f53bf9010a..3b3293c0f9 100644 --- a/apps/storefront/components/SidebarMenu/SidebarMenu.tsx +++ b/apps/storefront/components/SidebarMenu/SidebarMenu.tsx @@ -40,7 +40,7 @@ const SidebarMenu = ({ routerPath }: SidebarMenuProps) => { <>
    - +

    {SiteConfig.menu[activeIndex].name}

    @@ -66,14 +66,14 @@ const SidebarMenu = ({ routerPath }: SidebarMenuProps) => { > {item.children && ( <> - +
    {item.name}
      {item.children.map( (item2: PageMenuItemType, index2) => (
    • - + { )} {!item.children && ( - + { return ( - + {title}

      {description}

      diff --git a/apps/storefront/components/Tokens/TokenList/TokenList.tsx b/apps/storefront/components/Tokens/TokenList/TokenList.tsx index 4ec7f48c9b..8314ae75d5 100644 --- a/apps/storefront/components/Tokens/TokenList/TokenList.tsx +++ b/apps/storefront/components/Tokens/TokenList/TokenList.tsx @@ -97,7 +97,7 @@ const TokenCards = ({ tokens, cols, hideValue, type }: TokenCardsProps) => { return tokens.map(([group, tokens]) => { return (
      - + {capitalizeString(group)}
      @@ -144,7 +144,7 @@ const TokenCard = ({ token, type, hideValue, ...rest }: TokenCardProps) => {
      - + {weight ? getColorNameFromNumber(weight) : capitalizeString(title)}   - @digdir/designsystemet-theme + @digdir/designsystemet-theme
      {(showThemePicker || showModeSwitcher) && (
      diff --git a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx index 7953a78d05..03dccb2f6b 100644 --- a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx +++ b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx @@ -54,7 +54,7 @@ const MenuPageLayout = ({ content, data, banner }: PageLayoutProps) => { {data && (
      - {data.title} + {data.title} {data.date &&
      {data.date}
      }
      { {data.backText} - +
      {data.author && {data.author}} - {data.date &&
      {data.date}
      }
      - + {data.title}
      diff --git a/apps/storefront/mdx-components.tsx b/apps/storefront/mdx-components.tsx index c9de35f72f..fdf1c769f1 100644 --- a/apps/storefront/mdx-components.tsx +++ b/apps/storefront/mdx-components.tsx @@ -34,17 +34,27 @@ export function useMDXComponents(components: MDXComponents): MDXComponents { ), - h2: (props: HeadingProps) => , - h3: (props: HeadingProps) => , - h4: (props: HeadingProps) => , - h5: (props: HeadingProps) => , - h6: (props: HeadingProps) => , + h2: (props: HeadingProps) => ( + + ), + h3: (props: HeadingProps) => ( + + ), + h4: (props: HeadingProps) => ( + + ), + h5: (props: HeadingProps) => ( + + ), + h6: (props: HeadingProps) => ( + + ), table: (props) =>
    , thead: (props) => , tbody: (props) => , diff --git a/apps/storybook/docs-components/DoAndDont/DoAndDont.tsx b/apps/storybook/docs-components/DoAndDont/DoAndDont.tsx index c06578c84a..4a474d78c1 100644 --- a/apps/storybook/docs-components/DoAndDont/DoAndDont.tsx +++ b/apps/storybook/docs-components/DoAndDont/DoAndDont.tsx @@ -18,7 +18,7 @@ const Wrapper = ({ variant, description, image, alt }: WrapperProps) => {
    {icon}
    { return ( {textData.title && ( - + {textData.title} )} diff --git a/apps/theme/app/page.tsx b/apps/theme/app/page.tsx index 43f0a446e9..a7730cbc6a 100644 --- a/apps/theme/app/page.tsx +++ b/apps/theme/app/page.tsx @@ -269,7 +269,7 @@ export default function Home() {
    Temabygger
    - + Sett opp temaet ditt diff --git a/apps/theme/app/slik-bruker-du-verktoyet/page.tsx b/apps/theme/app/slik-bruker-du-verktoyet/page.tsx index be9a8e4bb4..ea953833d9 100644 --- a/apps/theme/app/slik-bruker-du-verktoyet/page.tsx +++ b/apps/theme/app/slik-bruker-du-verktoyet/page.tsx @@ -10,7 +10,7 @@ export default function Home() {
    - + Slik bruker du verktøyet @@ -21,7 +21,7 @@ export default function Home() { temabyggeren blir ferdigstilt. - + Hva er et tema? @@ -35,7 +35,7 @@ export default function Home() { skulle trenge det. - + Farger og WCAG @@ -66,7 +66,7 @@ export default function Home() { bakgrunnsfargene om Base fargene skal brukes på aktive brukergrensesnittkomponenter eller meningsbærende grafikk. - + Valg av Accentfarge diff --git a/apps/theme/app/testside/BackgroundSurface/BackgroundSurface.tsx b/apps/theme/app/testside/BackgroundSurface/BackgroundSurface.tsx index a4ad4cc344..61f8bd38d7 100644 --- a/apps/theme/app/testside/BackgroundSurface/BackgroundSurface.tsx +++ b/apps/theme/app/testside/BackgroundSurface/BackgroundSurface.tsx @@ -81,7 +81,7 @@ type ColumnProps = { const Column = ({ title, scales }: ColumnProps) => { return (
    - + {title}
    diff --git a/apps/theme/app/testside/Backgrounds/Backgrounds.tsx b/apps/theme/app/testside/Backgrounds/Backgrounds.tsx index 08b522b3bf..101c92a62a 100644 --- a/apps/theme/app/testside/Backgrounds/Backgrounds.tsx +++ b/apps/theme/app/testside/Backgrounds/Backgrounds.tsx @@ -24,7 +24,7 @@ export const Backgrounds = ({ > Light @@ -54,7 +54,7 @@ export const Backgrounds = ({ > Dark @@ -84,7 +84,7 @@ export const Backgrounds = ({ > Contrast diff --git a/apps/theme/app/testside/BaseContrast/BaseContrast.tsx b/apps/theme/app/testside/BaseContrast/BaseContrast.tsx index 7e8f8bf98f..2966324526 100644 --- a/apps/theme/app/testside/BaseContrast/BaseContrast.tsx +++ b/apps/theme/app/testside/BaseContrast/BaseContrast.tsx @@ -33,7 +33,7 @@ type BaseColumnProps = { const BaseColumn = ({ colorTheme, title }: BaseColumnProps) => { return (
    - {title} + {title}
    @@ -51,7 +51,7 @@ type BaseBoxProps = { const BaseBox = ({ colorScale, title }: BaseBoxProps) => { return (
    - + {title}
    { > {title} diff --git a/apps/theme/app/testside/page.tsx b/apps/theme/app/testside/page.tsx index f6a4b307ff..fb28b05849 100644 --- a/apps/theme/app/testside/page.tsx +++ b/apps/theme/app/testside/page.tsx @@ -33,7 +33,7 @@ const Box = (name: string, color1: CssColor, color2: CssColor) => { const Row = (title: string, colors: ColorInfo[], whiteText = false) => { return (
    - + {title}
    @@ -41,7 +41,7 @@ const Row = (title: string, colors: ColorInfo[], whiteText = false) => { className={classes.column} style={{ backgroundColor: colors[0].hex }} > - + Background default {Box('Border subtle', colors[5].hex, colors[0].hex)} @@ -54,7 +54,7 @@ const Row = (title: string, colors: ColorInfo[], whiteText = false) => { className={classes.column} style={{ backgroundColor: colors[1].hex }} > - + Background subtle {Box('Border subtle', colors[5].hex, colors[1].hex)} @@ -67,7 +67,7 @@ const Row = (title: string, colors: ColorInfo[], whiteText = false) => { className={classes.column} style={{ backgroundColor: colors[2].hex }} > - + Surface default {Box('Border subtle', colors[5].hex, colors[2].hex)} @@ -80,7 +80,7 @@ const Row = (title: string, colors: ColorInfo[], whiteText = false) => { className={classes.column} style={{ backgroundColor: colors[3].hex }} > - + Surface hover {Box('Border subtle', colors[5].hex, colors[3].hex)} @@ -93,7 +93,7 @@ const Row = (title: string, colors: ColorInfo[], whiteText = false) => { className={classes.column} style={{ backgroundColor: colors[4].hex }} > - + Surface active {Box('Border subtle', colors[5].hex, colors[4].hex)} @@ -131,7 +131,7 @@ export default function Dev() { return (
    - + Fargekontrast og visuell vurdering
    @@ -154,7 +154,7 @@ export default function Dev() {
    Under dekorativ
    - + Background Default og Subtle - + Background Subtle mot Surface Default - + Surface og Base interaksjon
    @@ -198,7 +198,7 @@ export default function Dev() { theme11={theme11} theme12={theme12} /> - + Kontrastfarger mot Base
      @@ -291,7 +291,7 @@ export default function Dev() { }, ]} /> - + Background og Surface mot Border og Tekst
        @@ -321,11 +321,11 @@ export default function Dev() { {Row('Light', theme1.light)} {Row('Dark', theme1.dark, true)} {Row('Contrast', theme1.contrast, true)} - + Overgangen fra svart til hvit kontrastfarge på ulike Base farger - + Viser blå base farger i et spekter av lightness verdier og om kontrastfargen er hvit eller svart per mode diff --git a/apps/theme/components/ColorPicker/ColorPicker.tsx b/apps/theme/components/ColorPicker/ColorPicker.tsx index 48af571637..aa6271a8fb 100644 --- a/apps/theme/components/ColorPicker/ColorPicker.tsx +++ b/apps/theme/components/ColorPicker/ColorPicker.tsx @@ -60,7 +60,7 @@ export const ColorPicker = ({ style={{ width: '900px' }} id={popoverId} placement='top' - size='sm' + data-size='sm' variant={colorError === 'none' ? 'default' : 'warning'} >
        diff --git a/apps/theme/components/Previews/Components/Components.tsx b/apps/theme/components/Previews/Components/Components.tsx index dcba9afb69..c41b84e2f7 100644 --- a/apps/theme/components/Previews/Components/Components.tsx +++ b/apps/theme/components/Previews/Components/Components.tsx @@ -46,7 +46,7 @@ export const Components = () => { return (
        -
        +
        @@ -57,20 +57,23 @@ export const Components = () => {
        - + Opprett ny bruker @@ -79,35 +82,35 @@ export const Components = () => { Glemt passord? -
        - + Alle brukere
        - Velg handling Dupliser Slett Oppdater -
        -
    +
    @@ -146,7 +149,7 @@ export const Components = () => {
    - + @@ -167,12 +170,12 @@ export const Components = () => {
    - + Hva kan vi hjelpe deg med?
    - + Sikkerhet og drift @@ -180,7 +183,7 @@ export const Components = () => { - + Skole og utdanning @@ -188,7 +191,7 @@ export const Components = () => { - + Mat og helse @@ -201,7 +204,7 @@ export const Components = () => {
    @@ -210,32 +213,32 @@ export const Components = () => {
    - + Emner
    - + Data og IKT - + Mat og ernæring - + Sport og Idrett - + Politikk og samfunn - + Utenriks - + Helse og velvære - + PC Gaming - + Trening og livsstil
    @@ -244,7 +247,7 @@ export const Components = () => {
    TV-visning @@ -256,35 +259,35 @@ export const Components = () => {
    - Hvor er du fra? - Svar under så finner vi flyreise + Hvor er du fra? + Svar under så finner vi flyreise
    - + Norge Sverige Utlandet
    - + Filtrer på språk
    - + Bokmål - + Nynorsk - + Engelsk
    - + Hvor skal du reise? - + Fant ingen treff Leikanger Oslo @@ -303,18 +306,18 @@ export const Components = () => { cols={100} id='my-textarea' rows={4} - size='sm' + data-size='sm' />
    - + Min profil Tjenester Innstillinger - + For å kunne bli registrert i{' '} Frivillighetsregisteret @@ -334,7 +337,7 @@ export const Components = () => {
    - + Ofte stillte spørsmål @@ -343,7 +346,7 @@ export const Components = () => { Hvem kan registrere seg i Frivillighetsregisteret? - + For å kunne bli registrert i Frivillighetsregisteret, må organisasjonen drive frivillig virksomhet. Det er bare foreninger, stiftelser og aksjeselskap som kan registreres. @@ -357,7 +360,7 @@ export const Components = () => { Hvordan går jeg fram for å registrere i Frivillighetsregisteret? - + Virksomheten må være registrert i Enhetsregisteret før den kan bli registrert i Frivillighetsregisteret. Du kan registrere i begge registrene samtidig i Samordnet registermelding. @@ -369,7 +372,7 @@ export const Components = () => { Hvordan går jeg fram for å registrere i Frivillighetsregisteret? - + Virksomheten må være registrert i Enhetsregisteret før den kan bli registrert i Frivillighetsregisteret. Du kan registrere i begge registrene samtidig i Samordnet registermelding. @@ -379,24 +382,24 @@ export const Components = () => {
    - + Dette er informasjon som du bør lese for å forstå hva som skjer - + Dette er en advarsel om at noe kan gå galt hvis du ikke følger med - + Dette er en melding om at noe har gått galt og du bør gjøre noe med det - + Dette er en melding om at noe har gått bra og du kan fortsette
    - Velg språk - + Velg språk + Norsk Engelsk Spansk @@ -415,8 +418,8 @@ export const Components = () => {
    - - + +
    diff --git a/apps/theme/components/Previews/Dashboard/ColorCard/ColorCard.tsx b/apps/theme/components/Previews/Dashboard/ColorCard/ColorCard.tsx index 248f14d486..be0966c292 100644 --- a/apps/theme/components/Previews/Dashboard/ColorCard/ColorCard.tsx +++ b/apps/theme/components/Previews/Dashboard/ColorCard/ColorCard.tsx @@ -33,10 +33,10 @@ export const ColorCard = ({ brand, icon }: ColorCardProps) => { brand === 'three' && classes.textThree, )} > - + Grafikk one - + Her er ein beskrivelse
    diff --git a/apps/theme/components/Previews/Dashboard/Dashboard.tsx b/apps/theme/components/Previews/Dashboard/Dashboard.tsx index 4147381ef7..27e3a20d14 100644 --- a/apps/theme/components/Previews/Dashboard/Dashboard.tsx +++ b/apps/theme/components/Previews/Dashboard/Dashboard.tsx @@ -43,89 +43,91 @@ export const Dashboard = () => {
    - + Dashboard
    - + Grafikk one - + Her er ein stor beskrivelse
    } + icon={ + + } /> } + icon={} /> } + icon={} />
    - + Siste brukere
    @@ -157,19 +159,19 @@ export const Dashboard = () => {
    - + Vekst de siste 3 årene
    - + Sideklikk siste 6 mnd
    - + Antall innlogginger diff --git a/apps/theme/components/Previews/Landing/Landing.tsx b/apps/theme/components/Previews/Landing/Landing.tsx index b8bb6f0201..ceb1252ad6 100644 --- a/apps/theme/components/Previews/Landing/Landing.tsx +++ b/apps/theme/components/Previews/Landing/Landing.tsx @@ -52,12 +52,12 @@ export const Landing = () => {
    Here is a sub heading
    - + A need explain have out been making it Multitude a hung structure return her belt of fixed had because a diff --git a/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx b/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx index 5eb9fc0c6d..7dbf394205 100644 --- a/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx +++ b/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx @@ -110,7 +110,7 @@ export const ThemeToolbar = ({ onBorderRadiusChanged(e.target.value)} style={{ diff --git a/apps/theme/components/TokenModal/TokenModal.tsx b/apps/theme/components/TokenModal/TokenModal.tsx index 2ab2041493..b8423e9512 100644 --- a/apps/theme/components/TokenModal/TokenModal.tsx +++ b/apps/theme/components/TokenModal/TokenModal.tsx @@ -92,8 +92,8 @@ export const TokenModal = ({
    - {title} - {desc} + {title} + {desc}
    @@ -116,7 +116,7 @@ export const TokenModal = ({ ref={modalRef} backdropClose={true} > - + Ta i bruk tema @@ -127,7 +127,7 @@ export const TokenModal = ({ label='Navn på tema' description="Kun bokstaver, tall og bindestrek. Eks: 'mitt-tema'" value={themeName} - size='sm' + data-size='sm' onChange={(e) => { const value = e.currentTarget.value .replace(/\s+/g, '-') @@ -188,8 +188,8 @@ export const TokenModal = ({
    - Noe som ikke fungerer? - + Noe som ikke fungerer? + Send oss en melding på{' '} @@ -46,7 +46,7 @@ som kan brukes til å videreutvikle og lage mer avanserte og sammensatte kompone @@ -64,7 +64,7 @@ som kan brukes til å videreutvikle og lage mer avanserte og sammensatte kompone @@ -83,7 +83,7 @@ som kan brukes til å videreutvikle og lage mer avanserte og sammensatte kompone diff --git a/packages/react/src/components/Alert/Alert.stories.tsx b/packages/react/src/components/Alert/Alert.stories.tsx index 5564cda053..6f81a84843 100644 --- a/packages/react/src/components/Alert/Alert.stories.tsx +++ b/packages/react/src/components/Alert/Alert.stories.tsx @@ -20,7 +20,7 @@ export const Preview: Story = (args) => ; Preview.args = { color: 'info', - size: undefined, + 'data-size': undefined, children: 'En beskjed det er viktig at brukeren ser', }; @@ -28,7 +28,7 @@ export const VariantInfo: Story = (args) => ( ( ( ( ( ( ( ( { test('should render children, heading level 1', () => { render( - + Alert me! , @@ -25,7 +25,7 @@ describe('Alert', () => { style={style} className='testClass' > - + Alert me! , diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx index 7eea2dd392..cddf57de4d 100644 --- a/packages/react/src/components/Alert/Alert.tsx +++ b/packages/react/src/components/Alert/Alert.tsx @@ -1,7 +1,7 @@ import cl from 'clsx/lite'; import type { HTMLAttributes } from 'react'; import { forwardRef } from 'react'; -import type { Size } from '../../types'; +import type { DefaultProps } from '../../types'; export type AlertProps = { /** @@ -9,12 +9,8 @@ export type AlertProps = { * @default info */ color?: 'info' | 'warning' | 'success' | 'danger'; - /** - * Sets the size of the alert. - * Does not affect font size. - */ - size?: Size; -} & HTMLAttributes; +} & HTMLAttributes & + DefaultProps; /** * Alerts are used to inform users about important information, warnings, errors, or success. @@ -22,14 +18,13 @@ export type AlertProps = { * Dette er en informasjonsmelding */ export const Alert = forwardRef(function Alert( - { color = 'info', size, className, ...rest }, + { color = 'info', className, ...rest }, ref, ) { return (
    diff --git a/packages/react/src/components/Avatar/Avatar.stories.tsx b/packages/react/src/components/Avatar/Avatar.stories.tsx index bac71bc58f..20c8bbb6ae 100644 --- a/packages/react/src/components/Avatar/Avatar.stories.tsx +++ b/packages/react/src/components/Avatar/Avatar.stories.tsx @@ -28,7 +28,7 @@ export const Preview: Story = (args) => ; Preview.args = { 'aria-label': 'Ola Nordmann', color: 'accent', - size: 'md', + 'data-size': 'md', variant: 'circle', children: '', }; @@ -37,22 +37,22 @@ export const NoName: Story = () => ; export const Sizes: Story = () => ( <> - + xs - - + + sm - - + + md - - + + lg - + ); @@ -88,23 +88,23 @@ export const WithImage: Story = () => ( export const InDropdown: Story = () => ( - + ON Velg Profil - + - - + + ON Ola Nordmann - + Sogndal kommune diff --git a/packages/react/src/components/Avatar/Avatar.test.tsx b/packages/react/src/components/Avatar/Avatar.test.tsx index a3817ac01d..5306d24d00 100644 --- a/packages/react/src/components/Avatar/Avatar.test.tsx +++ b/packages/react/src/components/Avatar/Avatar.test.tsx @@ -10,7 +10,7 @@ describe('Avatar', () => { }); it('should render correctly with custom props', () => { - render(); + render(); expect(screen.getByRole('img')).toBeInTheDocument(); expect(screen.getByRole('img')).toHaveAttribute('data-size', 'lg'); expect(screen.getByRole('img')).toHaveAttribute('data-variant', 'square'); diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx index fd8be8d054..10cf046687 100644 --- a/packages/react/src/components/Avatar/Avatar.tsx +++ b/packages/react/src/components/Avatar/Avatar.tsx @@ -17,7 +17,7 @@ export type AvatarProps = { /** * The size of the avatar. */ - size?: 'xs' | 'sm' | 'md' | 'lg'; + 'data-size'?: 'xs' | 'sm' | 'md' | 'lg'; /** * The shape of the avatar. * @@ -52,7 +52,6 @@ export const Avatar = forwardRef(function Avatar( { 'aria-label': ariaLabel, color = 'accent', - size, variant = 'circle', className, children, @@ -69,7 +68,6 @@ export const Avatar = forwardRef(function Avatar( className={cl('ds-avatar', className)} data-variant={variant} data-color={color} - data-size={size} role='img' aria-label={ariaLabel} {...rest} diff --git a/packages/react/src/components/Badge/Badge.stories.tsx b/packages/react/src/components/Badge/Badge.stories.tsx index 3f05884f8a..ccdcfc20b0 100644 --- a/packages/react/src/components/Badge/Badge.stories.tsx +++ b/packages/react/src/components/Badge/Badge.stories.tsx @@ -25,7 +25,7 @@ export default meta; export const Preview: Story = (args) => ; Preview.args = { - size: 'md', + 'data-size': 'md', count: 10, maxCount: 9, color: 'accent', @@ -38,19 +38,19 @@ export const Floating: Story = (args) => ( gap: 'var(--ds-spacing-6)', }} > - + - + - + - + - +
    ( }} /> - +
    ( }} /> - +
    ( }} /> - +
    ( > ( gap: 'var(--ds-spacing-4)', }} > - + - + - +
    ); export const InTabs: Story = (args) => ( - + @@ -162,17 +161,17 @@ export const InButton: Story = (args) => ( }} > diff --git a/packages/react/src/components/Badge/Badge.tsx b/packages/react/src/components/Badge/Badge.tsx index 2819b5dc9b..77c0a00e2c 100644 --- a/packages/react/src/components/Badge/Badge.tsx +++ b/packages/react/src/components/Badge/Badge.tsx @@ -1,6 +1,6 @@ import cl from 'clsx/lite'; import { type HTMLAttributes, type ReactNode, forwardRef } from 'react'; -import type { Size } from '../../types'; +import type { DefaultProps } from '../../types'; export type BadgeProps = { /** @@ -9,10 +9,6 @@ export type BadgeProps = { * @default accent */ color?: 'accent' | 'info' | 'success' | 'warning' | 'danger' | 'neutral'; - /** - * The size of the badge - */ - size?: Size; /** * The number to display in the badge */ @@ -37,19 +33,20 @@ export type BadgeProps = { * The badge will float on top of the children */ children?: ReactNode; -} & HTMLAttributes; +} & HTMLAttributes & + DefaultProps; /** * `Badge` is a non-interactive component for displaying status with or without numbers. * * @example without children * ```jsx - * + * * ``` * * @example with children * ```jsx - * + * * * * ``` @@ -62,7 +59,6 @@ export const Badge = forwardRef(function Badge( maxCount, overlap = 'rectangle', placement = 'top-right', - size, ...rest }, ref, @@ -76,7 +72,6 @@ export const Badge = forwardRef(function Badge( } data-overlap={rest.children ? overlap : null} data-placement={rest.children ? placement : null} - data-size={size} ref={ref} {...rest} /> diff --git a/packages/react/src/components/Breadcrumbs/Breadcrumbs.stories.tsx b/packages/react/src/components/Breadcrumbs/Breadcrumbs.stories.tsx index 80f7e84192..6c16c0d1ef 100644 --- a/packages/react/src/components/Breadcrumbs/Breadcrumbs.stories.tsx +++ b/packages/react/src/components/Breadcrumbs/Breadcrumbs.stories.tsx @@ -6,7 +6,7 @@ export default { title: 'Komponenter/Breadcrumbs', component: Breadcrumbs, args: { - size: 'md', + 'data-size': 'md', }, } as Meta; @@ -35,7 +35,7 @@ export const Preview: StoryFn = (args) => ( ); export const ListOnly: StoryFn = (args) => ( - + Nivå 1 diff --git a/packages/react/src/components/Breadcrumbs/Breadcrumbs.test.tsx b/packages/react/src/components/Breadcrumbs/Breadcrumbs.test.tsx index c83a22f7dc..6fff60be45 100644 --- a/packages/react/src/components/Breadcrumbs/Breadcrumbs.test.tsx +++ b/packages/react/src/components/Breadcrumbs/Breadcrumbs.test.tsx @@ -32,11 +32,6 @@ describe('Breadcrumbs', () => { expect(screen.getByRole('navigation')).toBeInTheDocument(); }); - - it('should render correctly with custom props', () => { - renderWithRoot({ size: 'lg' }); - expect(screen.getByRole('navigation')).toBeInTheDocument(); - }); }); describe('Breadcrumbs.List', () => { diff --git a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx index ff67724b16..d38e49c8d0 100644 --- a/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -1,6 +1,6 @@ import cl from 'clsx/lite'; import { type HTMLAttributes, forwardRef } from 'react'; -import type { Size } from '../../types'; +import type { DefaultProps } from '../../types'; export type BreadcrumbsProps = { /** @@ -8,21 +8,14 @@ export type BreadcrumbsProps = { * @default 'Du er her' */ 'aria-label'?: string; - /** - * Sets the size of the component - */ - size?: Size; -} & HTMLAttributes; +} & HTMLAttributes & + DefaultProps; export const Breadcrumbs = forwardRef( - ( - { 'aria-label': ariaLabel = 'Du er her:', className, size, ...rest }, - ref, - ) => ( + ({ 'aria-label': ariaLabel = 'Du er her:', className, ...rest }, ref) => (