Fixed Storefront tokens preview

Author: mimarz

apps/storefront/app/grunnleggende/designelementer/skygger/page.mdx

@@ -30,7 +30,7 @@ Skygger kan hjelpe svaksynte til å identifisere komponenter. Bruk av skygger og
 
 Vi har ulike styrker på skyggene, fra xsmall til xlarge. De ulike styrkene brukes for å antyde høyden til overflaten. Overflater i høyere høyder har større skygger, mens de på lavere høyder bør ha mindre skygger. Skygger skal skape et hierarki slik at det som ligger over eller under noe annet kommer tydeligere frem.
 
-<TokenList type='boxShadow' />
+<TokenList type='shadow' />
 
 ### Eksempel
 

apps/storefront/app/grunnleggende/designelementer/storrelser-og-avstander/page.mdx

@@ -25,14 +25,10 @@ Størrelser (`sizing`) brukes til å definere bredde og høyde på elementer.
 Avstand (`spacing`) brukes til å sette marging og padding. Settet med avstander som er definert i tokens gir oss mulighet til å definere verdier for _"Auto Layout"_ i Figma og sikrer dermed konsistent design på tvers av grensesnitt.
 
 <TokenList
-  type='sizing'
+  type='dimension'
   hideValue={true}
 />
 
-<TokenList
-  type='spacing'
-  hideValue={true}
-/>
 
 ## Men hvorfor må vi ha både `sizing` og `spacing` når de er helt like?
 

apps/storefront/components/Tokens/TokenBorderRadius/TokenBorderRadius.module.css

@@ -0,0 +1,5 @@
+.bar {
+  height: 36px;
+  width: 72px;
+  background-color: var(--ds-color-accent-base-default);
+}

apps/storefront/components/Tokens/TokenBorderRadius/TokenBorderRadius.tsx

@@ -1,10 +1,7 @@
-const TokenBorderRadius = () => {
-  return (
-    <div>
-      dfsdfsd
-      <div>dsaf</div>
-    </div>
-  );
+import classes from './TokenBorderRadius.module.css';
+
+const TokenBorderRadius = ({ value }: { value: string }) => {
+  return <div className={classes.bar} style={{ borderRadius: value }}></div>;
 };
 
 export { TokenBorderRadius };

apps/storefront/components/Tokens/TokenList/TokenList.tsx

@@ -21,6 +21,7 @@ import { TokenFontSize } from '../TokenFontSize/TokenFontSize';
 import { TokenShadow } from '../TokenShadow/TokenShadow';
 import { TokenSize } from '../TokenSize/TokenSize';
 
+import { TokenBorderRadius } from '../TokenBorderRadius/TokenBorderRadius';
 import classes from './TokenList.module.css';
 
 type TokenListProps = {
@@ -52,7 +53,11 @@ const TokensTable = ({ tokens }: TokenTableProps) => {
       <Table.Body>
         {tokens.map(([, tokens]) => {
           return tokens.map((token) => {
-            const pxSize = `${parseFloat(token.value as string) * 16}px`;
+            const value = token.value as string;
+            const pxSize = /\b\d+px\b/.test(value)
+              ? value
+              : `${parseFloat(value) * 16}px`;
+            const isBorderRadius = token.path.includes('border-radius');
 
             return (
               <Table.Row key={token.name}>
@@ -66,7 +71,11 @@ const TokensTable = ({ tokens }: TokenTableProps) => {
                 <Table.Cell>{token.value}</Table.Cell>
                 <Table.Cell>{pxSize}</Table.Cell>
                 <Table.Cell>
-                  <TokenSize value={pxSize} />
+                  {isBorderRadius ? (
+                    <TokenBorderRadius value={pxSize} />
+                  ) : (
+                    <TokenSize value={pxSize} />
+                  )}
                 </Table.Cell>
               </Table.Row>
             );
@@ -252,7 +261,7 @@ const TokenList = ({
         {sectionedTokens.map(([section, tokens]) => {
           const tokens_ = tokens as [string, Token[]][];
           const List = () => {
-            if (['spacing', 'sizing'].includes(type)) {
+            if (type === 'dimension') {
               return <TokensTable tokens={tokens_} />;
             }
 

apps/storefront/components/Tokens/TokenSize/TokenSize.module.css

@@ -7,4 +7,5 @@
   height: 36px;
   background-color: var(--ds-color-accent-base-default);
   border-radius: 2px;
+  max-width: 300px;
 }

apps/storefront/tokens/altinn/dark.ts

@@ -3857,38 +3857,6 @@ export const  dimension = [
       "sizing",
       "30"
     ]
-  },
-  {
-    type: "dimension",
-    value: "1px",
-    filePath: "../../design-tokens/semantic/style.json",
-    isSource: false,
-    original: {
-      type: "dimension",
-      value: "{border-width.1}"
-    },
-    name: "--ds-border-width-default",
-    attributes: {},
-    path: [
-      "border-width",
-      "default"
-    ]
-  },
-  {
-    type: "dimension",
-    value: "2px",
-    filePath: "../../design-tokens/semantic/style.json",
-    isSource: false,
-    original: {
-      type: "dimension",
-      value: "{border-width.2}"
-    },
-    name: "--ds-border-width-highlight",
-    attributes: {},
-    path: [
-      "border-width",
-      "highlight"
-    ]
   }
 ] 
 

apps/storefront/tokens/altinn/light.ts

@@ -3857,38 +3857,6 @@ export const  dimension = [
       "sizing",
       "30"
     ]
-  },
-  {
-    type: "dimension",
-    value: "1px",
-    filePath: "../../design-tokens/semantic/style.json",
-    isSource: false,
-    original: {
-      type: "dimension",
-      value: "{border-width.1}"
-    },
-    name: "--ds-border-width-default",
-    attributes: {},
-    path: [
-      "border-width",
-      "default"
-    ]
-  },
-  {
-    type: "dimension",
-    value: "2px",
-    filePath: "../../design-tokens/semantic/style.json",
-    isSource: false,
-    original: {
-      type: "dimension",
-      value: "{border-width.2}"
-    },
-    name: "--ds-border-width-highlight",
-    attributes: {},
-    path: [
-      "border-width",
-      "highlight"
-    ]
   }
 ]