feat: rename size prop to data-size (#2680)

resolves #2673
digdir · Oct 25, 2024 · d2fc6b9 · d2fc6b9
1 parent acef771
commit d2fc6b9
Show file tree

Hide file tree

Showing 123 changed files with 1,035 additions and 2,026 deletions.
diff --git 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'
         >
           <ClipboardIcon fontSize={'1.4rem'} />
           {text && <span className={classes.text}>{text}</span>}

diff --git 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'
             >
               <FilesIcon fontSize='1.5rem' />
             </Button>

diff --git a/apps/_components/src/ColorModal/ColorModal.tsx b/apps/_components/src/ColorModal/ColorModal.tsx
@@ -26,11 +26,11 @@ const Field = ({
   return (
     <div className={classes.field}>
       {label && (
-        <Paragraph size='sm' className={classes.label}>
+        <Paragraph data-size='sm' className={classes.label}>
           {label}
         </Paragraph>
       )}
-      <Paragraph size='sm' className={classes.value}>
+      <Paragraph data-size='sm' className={classes.value}>
         {value}
       </Paragraph>
       {copyBtn && <ClipboardButton value={value} />}
@@ -61,7 +61,7 @@ export const ColorModal = ({
         backdropClose
       >
         <Modal.Block>
-          <Heading size='xs'>
+          <Heading data-size='xs'>
             {`${capitalizeFirstLetter(namespace)} ${capitalizeFirstLetter(getColorNameFromNumber(weight))}`}
           </Heading>
         </Modal.Block>

diff --git a/apps/_components/src/Footer/Footer.tsx b/apps/_components/src/Footer/Footer.tsx
@@ -55,7 +55,7 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
       <div className={classes.top}>
         <Container className={classes.container}>
           <div>
-            <Heading size='xs' level={2} className={classes.title}>
+            <Heading data-size='xs' level={2} className={classes.title}>
               Lages på tvers av offentlige etater:
             </Heading>
             <div className={classes.logos}>
@@ -64,7 +64,7 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
               <Mattilsynet />
               <Udir className={classes.udir} />
             </div>
-            <Button asChild variant='secondary' color='neutral' size='sm'>
+            <Button asChild variant='secondary' color='neutral' data-size='sm'>
               <NextLink
                 href='mailto:[email protected]'
                 className={classes.button}
@@ -74,13 +74,13 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
             </Button>
           </div>
           <div>
-            <Heading size='xs' level={2} className={classes.title}>
+            <Heading data-size='xs' level={2} className={classes.title}>
               Om nettstedet
             </Heading>
             {LinkList(centerLinks)}
           </div>
           <div>
-            <Heading size='xs' level={2} className={classes.title}>
+            <Heading data-size='xs' level={2} className={classes.title}>
               Kom i kontakt med oss
             </Heading>
             {LinkList(rightLinks)}
@@ -89,7 +89,9 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
       </div>
       <div className={classes.bottom}>
         <Container>
-          <Paragraph size='sm'>© {getCurrentYear()} Designsystemet</Paragraph>
+          <Paragraph data-size='sm'>
+            © {getCurrentYear()} Designsystemet
+          </Paragraph>
         </Container>
       </div>
     </footer>

diff --git 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) => (
                 <li className={classes.item} key={index}>
-                  <Paragraph size='md' asChild>
+                  <Paragraph data-size='md' asChild>
                     <Link
                       suppressHydrationWarning
                       href={item.href}

diff --git a/apps/storefront/app/(frontpage)/layout.tsx b/apps/storefront/app/(frontpage)/layout.tsx
@@ -75,7 +75,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
           <Container className={classes.container}>
             <div className={classes.text}>
               <div className={classes.betaTag}>Next</div>
-              <Heading size='lg'>
+              <Heading data-size='lg'>
                 Designsystemet hjelper deg å lage gode digitale tjenester
               </Heading>
             </div>

diff --git 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 = ({
       </CardBlock>
       <CardBlock>
         {tagText && (
-          <Tag className={classes.tag} color={tagColor} size='sm'>
+          <Tag className={classes.tag} color={tagColor} data-size='sm'>
             {tagText}
           </Tag>
         )}
-        <Heading level={level} size={featured ? 'lg' : 'sm'}>
+        <Heading level={level} data-size={featured ? 'lg' : 'sm'}>
           <Link href={href}>{title}</Link>
         </Heading>
-        <Paragraph size={featured ? 'lg' : 'sm'}>{desc}</Paragraph>
-        <Paragraph size={featured ? 'md' : 'xs'} className={classes.meta}>
+        <Paragraph data-size={featured ? 'lg' : 'sm'}>{desc}</Paragraph>
+        <Paragraph data-size={featured ? 'md' : 'xs'} className={classes.meta}>
           {author ||
             (date && (
               <>

diff --git 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}
         />
       </div>
-      <Heading level={3} size='2xs'>
+      <Heading level={3} data-size='2xs'>
         Bidragsytere
       </Heading>
-      <Paragraph size='sm' className={classes.meta}>
+      <Paragraph data-size='sm' className={classes.meta}>
         {authors?.map((author, index) => (
           <Fragment key={index}>
             {index !== 0 && <span aria-hidden className={classes.metaSquare} />}

diff --git a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
@@ -52,7 +52,7 @@ function PostLayout({
             <Paragraph className={classes.ingress} variant='long'>
               {ingress}
             </Paragraph>
-            <Paragraph size='sm' className={classes.meta}>
+            <Paragraph data-size='sm' className={classes.meta}>
               <span>{date}</span>
               <span aria-hidden className={classes.metaSquare} />
               <span>{author}</span>
@@ -67,10 +67,10 @@ function PostLayout({
           <MdxContent className={classes.content}>
             {content}
             <div className={classes.wantToWrite}>
-              <Heading level={3} size='xs'>
+              <Heading level={3} data-size='xs'>
                 Ønsker du å skrive for bloggen?
               </Heading>
-              <Paragraph size='sm'>
+              <Paragraph data-size='sm'>
                 Ta kontakt med oss på{' '}
                 <Link
                   href='https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ'

diff --git a/apps/storefront/app/god-praksis/tilgjengelighet/kontrast/page.mdx b/apps/storefront/app/god-praksis/tilgjengelighet/kontrast/page.mdx
@@ -39,7 +39,7 @@ Alle brukerne, også de med svekket syn, skal kunne se innholdet i digitale tjen
 <Card color='brand3' data-unstyled>
   <Heading
     level={3}
-    size='xs'
+    data-size='xs'
   >Gjeldende regelverk, WCAG 2.1</Heading>
   <ListUnordered>
     <ListItem>
@@ -63,7 +63,7 @@ Alle brukerne, også de med svekket syn, skal kunne se innholdet i digitale tjen
 <Card color='brand2' data-unstyled>
   <Heading
     level={3}
-    size='xs'
+    data-size='xs'
   >Fremtidig eller strengere:</Heading>
   <ListUnordered>
     <ListItem>

diff --git 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.
 
-<Table size='md'>
+<Table data-size='md'>
   <Table.Head>
     <Table.Row>
       <Table.HeaderCell>Navn</Table.HeaderCell>
@@ -31,4 +31,4 @@ Om du ønsker å lage dine egne farger, kan du bruke tabellen under for å passe
 
 #### Kontrastfarger
 
-med eksempler
+med eksempler
diff --git a/apps/storefront/app/not-found.tsx b/apps/storefront/app/not-found.tsx
@@ -25,7 +25,7 @@ const NotFound = ({ children }: { children: React.ReactNode }) => {
           />
         </div>
         <div className={classes.textContainer}>
-          <Heading size='md'>Denne siden finnes ikke</Heading>
+          <Heading data-size='md'>Denne siden finnes ikke</Heading>
           <Paragraph>
             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
@@ -37,7 +37,7 @@ const BannerRoot = ({
 type BannerHeadingProps = Omit<HeadingProps, 'size'>;
 
 const BannerHeading = ({ ...props }: BannerHeadingProps) => {
-  return <Heading size='lg' {...props} />;
+  return <Heading data-size='lg' {...props} />;
 };
 
 type BannerIngressProps = HTMLAttributes<HTMLParagraphElement>;

diff --git 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}
       />
-      <Heading size='xs' className={classes.title} level={2}>
+      <Heading data-size='xs' className={classes.title} level={2}>
         {title}
       </Heading>
     </NextLink>

diff --git a/apps/storefront/components/Image/Image.tsx b/apps/storefront/components/Image/Image.tsx
@@ -30,7 +30,7 @@ const Image = ({
         aria-label={alt}
       ></img>
       {caption && (
-        <Paragraph size='sm' asChild>
+        <Paragraph data-size='sm' asChild>
           <figcaption>{caption}</figcaption>
         </Paragraph>
       )}

diff --git a/apps/storefront/components/ImageBanner/ImageBanner.tsx b/apps/storefront/components/ImageBanner/ImageBanner.tsx
@@ -89,11 +89,11 @@ const ImageBanner = ({
 
         <div className={classes.textContainer}>
           {title ? (
-            <Heading level={2} size='lg' className={classes.title}>
+            <Heading level={2} data-size='lg' className={classes.title}>
               {title}
             </Heading>
           ) : null}
-          {description && <Paragraph size='lg'>{description}</Paragraph>}
+          {description && <Paragraph data-size='lg'>{description}</Paragraph>}
           {content && content}
           {link && (
             <Link className={classes.link} color='neutral' asChild>

diff --git a/apps/storefront/components/NavigationCard/NavigationCard.tsx b/apps/storefront/components/NavigationCard/NavigationCard.tsx
@@ -33,11 +33,11 @@ const NavigationCard = ({
       <Link href={url} prefetch={false}>
         <div className={cl(classes.iconContainer, classes[color])}>{icon}</div>
 
-        <Heading level={level} size='sm' className={classes.title}>
+        <Heading level={level} data-size='sm' className={classes.title}>
           {title}
         </Heading>
 
-        <Paragraph size='sm' variant='long' className={classes.desc}>
+        <Paragraph data-size='sm' variant='long' className={classes.desc}>
           {description}
         </Paragraph>
       </Link>

diff --git a/apps/storefront/components/Section/Section.tsx b/apps/storefront/components/Section/Section.tsx
@@ -24,7 +24,7 @@ const Section = ({
       <Container>
         <div className={classes.header}>
           {title && (
-            <Heading level={2} size='md'>
+            <Heading level={2} data-size='md'>
               {title}
             </Heading>
           )}

diff --git a/apps/storefront/components/SidebarMenu/SidebarMenu.tsx b/apps/storefront/components/SidebarMenu/SidebarMenu.tsx
@@ -40,7 +40,7 @@ const SidebarMenu = ({ routerPath }: SidebarMenuProps) => {
         <>
           <Button
             className={classes.toggleBtn}
-            size='md'
+            data-size='md'
             color='neutral'
             variant='secondary'
             onClick={() => setShowMenu(!showMenu)}
@@ -50,7 +50,7 @@ const SidebarMenu = ({ routerPath }: SidebarMenuProps) => {
           </Button>
 
           <div className={cl(classes.menu, showMenu && classes.activeMenu)}>
-            <Paragraph size='md' asChild>
+            <Paragraph data-size='md' asChild>
               <h3 className={classes.title}>
                 {SiteConfig.menu[activeIndex].name}
               </h3>
@@ -66,14 +66,14 @@ const SidebarMenu = ({ routerPath }: SidebarMenuProps) => {
                   >
                     {item.children && (
                       <>
-                        <Paragraph asChild size='md'>
+                        <Paragraph asChild data-size='md'>
                           <div className={classes.innerTitle}>{item.name}</div>
                         </Paragraph>
                         <ul className={classes.innerList}>
                           {item.children.map(
                             (item2: PageMenuItemType, index2) => (
                               <li key={index2} className={classes.listItem}>
-                                <Paragraph asChild size='sm'>
+                                <Paragraph asChild data-size='sm'>
                                   <Link
                                     href={'/' + item2.url}
                                     prefetch={false}
@@ -93,7 +93,7 @@ const SidebarMenu = ({ routerPath }: SidebarMenuProps) => {
                       </>
                     )}
                     {!item.children && (
-                      <Paragraph asChild size='sm'>
+                      <Paragraph asChild data-size='sm'>
                         <Link
                           href={'/' + item.url}
                           prefetch={false}

diff --git a/apps/storefront/components/TeaserCard/TeaserCard.tsx b/apps/storefront/components/TeaserCard/TeaserCard.tsx
@@ -20,7 +20,7 @@ const TeaserCard = ({
 }: TeaserCardProps) => {
   return (
     <Link className={classes.card} href={href} prefetch={false}>
-      <Heading level={3} size='sm' className={classes.title}>
+      <Heading level={3} data-size='sm' className={classes.title}>
         {title}
       </Heading>
       <p className={classes.desc}>{description}</p>

diff --git 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 (
       <div key={group}>
-        <Heading size='xs' level={4} className={classes.title}>
+        <Heading data-size='xs' level={4} className={classes.title}>
           {capitalizeString(group)}
         </Heading>
         <div className={cl(classes.group)}>
@@ -144,7 +144,7 @@ const TokenCard = ({ token, type, hideValue, ...rest }: TokenCardProps) => {
       </div>
 
       <div className={classes.textContainer}>
-        <Heading level={5} size='2xs' className={classes.name}>
+        <Heading level={5} data-size='2xs' className={classes.name}>
           {weight ? getColorNameFromNumber(weight) : capitalizeString(title)}
           &nbsp;
           <ClipboardButton
@@ -215,7 +215,7 @@ const TokenList = ({
             className={classes.npmShield}
           />
         </Link>
-        <Paragraph size='sm'>@digdir/designsystemet-theme</Paragraph>
+        <Paragraph data-size='sm'>@digdir/designsystemet-theme</Paragraph>
       </div>
       {(showThemePicker || showModeSwitcher) && (
         <div className={classes.toggleGroup}>

diff --git 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 && (
             <div className={classes.header}>
               <div className={classes.headerText}>
-                <Heading size='lg'>{data.title}</Heading>
+                <Heading data-size='lg'>{data.title}</Heading>
                 {data.date && <div className={classes.date}>{data.date}</div>}
               </div>
               <div

diff --git a/apps/storefront/layouts/PageLayout/PageLayout.tsx b/apps/storefront/layouts/PageLayout/PageLayout.tsx
@@ -33,14 +33,14 @@ const PageLayout = ({ content, data }: PageLayoutProps) => {
                 {data.backText}
               </NextLink>
             </Link>
-            <Paragraph size='lg' variant='short' asChild>
+            <Paragraph data-size='lg' variant='short' asChild>
               <div className={classes.meta}>
                 <span>{data.author && <span>{data.author}</span>}</span>
                 <span className={classes.separator}> - </span>
                 <span>{data.date && <div>{data.date}</div>}</span>
               </div>
             </Paragraph>
-            <Heading level={1} size='lg' className={classes.title}>
+            <Heading level={1} data-size='lg' className={classes.title}>
               {data.title}
             </Heading>
           </div>