feat: 🎨 Use new sizing scale for typography and components (#1696)

Co-authored-by: Marianne Røsvik <[email protected]> Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
digdir · Apr 9, 2024 · 61b1af7 · 61b1af7
1 parent 4ce2d1a
commit 61b1af7
Show file tree

Hide file tree

Showing 39 changed files with 2,256 additions and 1,720 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { Preview } from '@storybook/react';
 
-import '@digdir/designsystemet-theme';
-import '@digdir/designsystemet-css';
+import '../packages/theme/brand/digdir/tokens.css';
+import '../packages/css/index.css';
 
 import {
   Paragraph,

diff --git a/apps/storefront/components/ClipboardBtn/ClipboardBtn.tsx b/apps/storefront/components/ClipboardBtn/ClipboardBtn.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { ClipboardIcon } from '@navikt/aksel-icons';
-import { Tooltip } from '@digdir/designsystemet-react';
+import { Tooltip, Button } from '@digdir/designsystemet-react';
 
 import classes from './ClipboardBtn.module.css';
 
@@ -23,18 +23,17 @@ const ClipboardBtn = ({ title, value, text = '' }: ClipboardBtnProps) => {
   return (
     <>
       <Tooltip content={toolTipText}>
-        <button
+        <Button
           onMouseEnter={() => setToolTipText(title)}
           onClick={() => onBtnClick(value)}
-          className={classes.btn}
           title={title}
+          variant='tertiary'
+          color='second'
+          size='small'
         >
-          <ClipboardIcon
-            fontSize={20}
-            color='#585858'
-          />
+          <ClipboardIcon fontSize={'1.5rem'} />
           {text && <span className={classes.text}>{text}</span>}
-        </button>
+        </Button>
       </Tooltip>
     </>
   );

diff --git a/apps/storefront/components/Tokens/TokenList/TokenList.tsx b/apps/storefront/components/Tokens/TokenList/TokenList.tsx
@@ -2,7 +2,12 @@ import type { HTMLAttributes } from 'react';
 import { useEffect, useState } from 'react';
 import cl from 'clsx';
 import type { TransformedToken as Token } from 'style-dictionary';
-import { DropdownMenu, Link, Paragraph } from '@digdir/designsystemet-react';
+import {
+  DropdownMenu,
+  Link,
+  Paragraph,
+  Table,
+} from '@digdir/designsystemet-react';
 
 import { capitalizeString } from '../../../utils/StringHelpers';
 import { ClipboardBtn } from '../../ClipboardBtn/ClipboardBtn';
@@ -24,6 +29,82 @@ type TokenListProps = {
 type CardColumnType = 2 | 3;
 type BrandType = 'digdir' | 'altinn' | 'tilsynet' | 'brreg';
 
+type TokenTableProps = {
+  tokens: [string, Token[]][];
+} & HTMLAttributes<HTMLDivElement>;
+
+const TokensTable = ({ tokens }: TokenTableProps) => {
+  return (
+    <Table>
+      <Table.Head>
+        <Table.Row>
+          <Table.HeaderCell>Navn</Table.HeaderCell>
+          <Table.HeaderCell>Rem</Table.HeaderCell>
+          <Table.HeaderCell>Px (16px)</Table.HeaderCell>
+          <Table.HeaderCell>Visualisering</Table.HeaderCell>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {tokens.map(([, tokens]) => {
+          return tokens.map((token) => {
+            const pxSize = `${parseFloat(token.value as string) * 16}px`;
+
+            return (
+              <Table.Row key={token.name}>
+                <Table.Cell>
+                  <ClipboardBtn
+                    title='Kopier CSS variabel'
+                    text={token.name}
+                    value={token.name}
+                  />
+                </Table.Cell>
+                <Table.Cell>{token.value}</Table.Cell>
+                <Table.Cell>{pxSize}</Table.Cell>
+                <Table.Cell>
+                  <TokenSize value={pxSize} />
+                </Table.Cell>
+              </Table.Row>
+            );
+          });
+        })}
+      </Table.Body>
+    </Table>
+  );
+};
+
+type TokenCardsProps = {
+  tokens: [string, Token[]][];
+  cols?: number;
+  hideValue: TokenListProps['hideValue'];
+  type: TokenListProps['type'];
+};
+
+const TokenCards = ({ tokens, cols, hideValue, type }: TokenCardsProps) => {
+  return tokens.map(([group, tokens]) => {
+    return (
+      <div key={group}>
+        <h4>{capitalizeString(group)}</h4>
+        <div className={cl(classes.group)}>
+          <div
+            className={cl(classes.cards, {
+              [classes.cards2]: cols === 2,
+            })}
+          >
+            {tokens.map((token) => (
+              <TokenCard
+                token={token}
+                key={token.name}
+                hideValue={hideValue}
+                type={type}
+              ></TokenCard>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  });
+};
+
 type TokenCardProps = {
   token: Token;
   hideValue: TokenListProps['hideValue'];
@@ -36,7 +117,6 @@ const TokenCard = ({ token, type, hideValue, ...rest }: TokenCardProps) => {
     .slice(token.path.length - 1, token.path.length)
     .toString();
 
-  const isSlim = type === 'sizing' || type === 'spacing';
   return (
     <div
       className={classes.card}
@@ -46,16 +126,12 @@ const TokenCard = ({ token, type, hideValue, ...rest }: TokenCardProps) => {
         {type === 'color' && <TokenColor value={val} />}
         {type === 'typography' && <TokenFontSize value={val} />}
         {type === 'boxShadow' && <TokenShadow value={val} />}
-        {isSlim && <TokenSize value={val} />}
       </div>
 
       <div className={classes.textContainer}>
         <h4 className={classes.title}>
           {capitalizeString(title)}
           &nbsp;
-          {isSlim && typeof token.description === 'string' && (
-            <small>{`(${token.description})`}</small>
-          )}
           <ClipboardBtn
             title='Kopier CSS variabel'
             text='CSS'
@@ -146,39 +222,32 @@ const TokenList = ({
         </div>
       )}
       <>
-        {sectionedTokens.map(([section, tokens]) => (
-          <div
-            key={section as string}
-            className={classes.section}
-          >
-            <h3>{capitalizeString(section as string)}</h3>
-            {(tokens as [string, Token[]][]).map(([group, tokens]) => {
-              const isSlim = type === 'sizing' || type === 'spacing';
-
-              return (
-                <div key={group}>
-                  {!isSlim && <h4>{capitalizeString(group)}</h4>}
-                  <div className={cl(!isSlim && classes.group)}>
-                    <div
-                      className={cl(classes.cards, {
-                        [classes.cards2]: cardColumns === 2,
-                      })}
-                    >
-                      {tokens.map((token) => (
-                        <TokenCard
-                          token={token}
-                          key={token.name}
-                          hideValue={hideValue}
-                          type={type}
-                        ></TokenCard>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        ))}
+        {sectionedTokens.map(([section, tokens]) => {
+          const tokens_ = tokens as [string, Token[]][];
+          const List = () => {
+            if (['spacing', 'sizing'].includes(type)) {
+              return <TokensTable tokens={tokens_} />;
+            }
+
+            return (
+              <TokenCards
+                type={type}
+                cols={cardColumns}
+                tokens={tokens_}
+                hideValue={hideValue}
+              />
+            );
+          };
+          return (
+            <div
+              key={section as string}
+              className={classes.section}
+            >
+              <h3>{capitalizeString(section as string)}</h3>
+              <List />
+            </div>
+          );
+        })}
       </>
     </div>
   );

diff --git a/apps/storefront/pages/grunnleggende/designelementer/storrelser-og-avstander.mdx b/apps/storefront/pages/grunnleggende/designelementer/storrelser-og-avstander.mdx
@@ -1,7 +1,7 @@
 import { RulerIcon } from '@navikt/aksel-icons';
 
 import { MenuPageLayout } from '@layouts';
-import { Meta, TokenList, CodeSnippet } from '@components';
+import { Meta, TokenList } from '@components';
 
 <Meta
   title='Størrelser og avstander'
@@ -33,63 +33,3 @@ Avstand (spacing) brukes til å sette marging og padding. Settet med avstander s
   type='spacing'
   hideValue={true}
 />
-
-## Fluid sizing
-
-Størrelsene er satt opp til å passe sammen med [fluid typography](/grunnleggende/designelementer/typografi#fluid-typography). De varier derfor noe etter hvilken viewport du har. `Sizing.10` vil dermed være 40px på viewport 320, og 45px på viewport 1360.
-
-<CodeSnippet language='json'>
-  {`"sizing": {
-    "1": {
-      "value": "{base_sizing}/16*{font-size.f0}",
-      "type": "sizing",
-      "description": "4px - 4.5px"
-    },
-    "2": {
-      "value": "{base_sizing}*2/16*{font-size.f0}",
-      "type": "sizing",
-      "description": "8px - 9px"
-    },
-    "(...)"
-    "10": {
-      "value": "{base_sizing}*10/16*{font-size.f0}",
-      "type": "sizing",
-      "description": "40px - 45px"
-    },
-    "12": {
-      "value": "({base_sizing}*12/16)*{font-size.f0}",
-      "type": "sizing",
-      "description": "48px - 54px"
-    },
-  }`}
-</CodeSnippet>
-
-## Fluid spacing
-
-Avstandene er satt opp til å passe sammen med [fluid typography](/grunnleggende/designelementer/typografi#fluid-typography). De varier derfor noe etter hvilken viewport du har. `Spacing.10` vil dermed være 40px på viewport 320, og 45px på viewport 1360.
-
-<CodeSnippet language='json'>
-  {`"spacing": {
-    "1": {
-      "value": "{base_spacing}/16*{font-size.f0}",
-      "type": "spacing",
-      "description": "4px - 4.5px"
-    },
-    "2": {
-      "value": "{base_spacing}*2/16*{font-size.f0}",
-      "type": "spacing",
-      "description": "8px - 9px"
-    },
-    "(...)"
-    "10": {
-      "value": "({base_spacing}*10/16)*{font-size.f0}",
-      "type": "spacing",
-      "description": "40px - 45px"
-    },
-    "12": {
-      "value": "({base_spacing}*12/16)*{font-size.f0}",
-      "type": "spacing",
-      "description": "48px - 54px"
-    },
-  }`}
-</CodeSnippet>