chore: adjust docs part 2

baloise · Jan 29, 2024 · 2c9d29d · 2c9d29d
1 parent 52b7a10
commit 2c9d29d
Show file tree

Hide file tree

Showing 27 changed files with 255 additions and 420 deletions.
diff --git a/docs/.storybook/blocks/css-utils/CssElevation.tsx b/docs/.storybook/blocks/css-utils/CssElevation.tsx
@@ -14,7 +14,12 @@ export const CssElevationShadow = () => (
   <CssUtilitiesTable
     list={json}
     search={['box-shadow', 'text-shadow']}
-    example={item => <div className={`bg-green ${item.class} p-small`}></div>}
+    example={item => {
+      if (item.property === 'box-shadow') {
+        return <div className={`bg-green ${item.class} p-small`}></div>
+      }
+      console.log(item)
+      return <div className={`font-weight-bold text-large ${item.class} px-small`}>Aa</div>
+    }}
   />
 )
-
diff --git a/docs/.storybook/blocks/css-utils/CssSpacingMargin.tsx b/docs/.storybook/blocks/css-utils/CssSpacingMargin.tsx
@@ -4,57 +4,64 @@ import tokens from '@baloise/design-system-tokens/dist/tokens.docs.json'
 
 export const CssSpacingMargin = ({}) => {
   const obj = tokens.size.space
-  const keys = Object.keys(obj).filter(k => obj[k] && obj[k].value)
+  const keys = Object.keys(obj).filter(k => obj[k] && obj[k].mobile.value)
+
+  const values = keys.map(key => ({
+    key,
+    valueMobile: obj[key].mobile.value,
+    valueTablet: obj[key].tablet.value,
+    valueDesktop: obj[key].desktop.value,
+  }))
 
   const list = [
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `-${key}`,
       property: 'margin',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `x-${key}`,
-      property: 'margin-left, margin-right',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'margin',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `y-${key}`,
-      property: 'margin-top, margin-bottom',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'margin',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `t-${key}`,
-      property: 'margin-top',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'margin',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `r-${key}`,
-      property: 'margin-right',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'margin',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `b-${key}`,
-      property: 'margin-bottom',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'margin',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `l-${key}`,
-      property: 'margin-left',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'margin',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
   ]
 

diff --git a/docs/.storybook/blocks/css-utils/CssSpacingPadding.tsx b/docs/.storybook/blocks/css-utils/CssSpacingPadding.tsx
@@ -4,58 +4,64 @@ import tokens from '@baloise/design-system-tokens/dist/tokens.docs.json'
 
 export const CssSpacingPadding = ({}) => {
   const obj = tokens.size.space
-  const keys = Object.keys(obj).filter(k => obj[k] && obj[k].value)
+  const keys = Object.keys(obj).filter(k => obj[k] && obj[k].mobile.value)
 
+  const values = keys.map(key => ({
+    key,
+    valueMobile: obj[key].mobile.value,
+    valueTablet: obj[key].tablet.value,
+    valueDesktop: obj[key].desktop.value,
+  }))
 
   const list = [
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `-${key}`,
       property: 'padding',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `x-${key}`,
-      property: 'padding-left, padding-right',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'padding',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `y-${key}`,
-      property: 'padding-top, padding-bottom',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'padding',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `t-${key}`,
-      property: 'padding-top',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'padding',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `r-${key}`,
-      property: 'padding-right',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'padding',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `b-${key}`,
-      property: 'padding-bottom',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'padding',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
-    ...keys.map(key => ({
+    ...values.map(({ key, valueMobile, valueTablet, valueDesktop }) => ({
       key: `l-${key}`,
-      property: 'padding-left',
-      valueMobile: obj[key].value,
-      valueTablet: obj.tablet[key]?.value || obj[key].value,
-      valueDesktop: obj.desktop[key]?.value || obj.tablet[key]?.value || obj[key].value,
+      property: 'padding',
+      valueMobile,
+      valueTablet,
+      valueDesktop,
     })),
   ]
 

diff --git a/docs/.storybook/blocks/css-utils/CssTypography.tsx b/docs/.storybook/blocks/css-utils/CssTypography.tsx
@@ -8,7 +8,12 @@ export const CssTypographyColors = () => (
   <CssUtilitiesTable
     list={json}
     search="color"
-    example={item => <div className={`${item.class} p-small font-weight-bold text-medium`}>Aa</div>}
+    example={item => {
+      if (item.class.includes('inverted') || item.class.includes('white')) {
+        return <div className={`${item.class} bg-primary p-small font-weight-bold text-medium`}>Aa</div>
+      }
+      return <div className={`${item.class} p-small font-weight-bold text-medium`}>Aa</div>
+    }}
   />
 )
 
@@ -20,33 +25,13 @@ export const CssTypographyFamily = () => (
   />
 )
 
-export const CssTypographyTextAlign = () => (
-  <CssUtilitiesTable
-    list={json}
-    search="text-align"
-  />
-)
+export const CssTypographyTextAlign = () => <CssUtilitiesTable list={json} search="text-align" />
 
-export const CssTypographyTextTransform = () => (
-  <CssUtilitiesTable
-    list={json}
-    search="text-transform"
-  />
-)
+export const CssTypographyTextTransform = () => <CssUtilitiesTable list={json} search="text-transform" />
 
-export const CssTypographyWeight = () => (
-  <CssUtilitiesTable
-    list={json}
-    search="font-weight"
-  />
-)
+export const CssTypographyWeight = () => <CssUtilitiesTable list={json} search="font-weight" />
 
-export const CssTypographyWhiteSpace = () => (
-  <CssUtilitiesTable
-    list={json}
-    search="white-space"
-  />
-)
+export const CssTypographyWhiteSpace = () => <CssUtilitiesTable list={json} search="white-space" />
 
 export const CssTypographySize = ({}) => {
   return CssTable({

diff --git a/docs/.storybook/blocks/tokens/TokensFontSizes.tsx b/docs/.storybook/blocks/tokens/TokensFontSizes.tsx
@@ -22,7 +22,7 @@ export const TokensFontSize = ({ overview }) => {
           <tbody key={key}>
             <tr>
               <td style={{ verticalAlign: 'top' }} className="border-none">
-                <Clipboard label={`bal-size-${key}`} value={`var(--bal-size-${key})`} />
+                <Clipboard label={`bal-size-${key}`} value={`var(--bal-text-size-${key})`} />
               </td>
               <td style={{ verticalAlign: 'top' }} className="border-none">
                 <p className={`mt-none mb-none text-small font-weight-bold py-xx-small`}>

diff --git a/docs/.storybook/blocks/tokens/TokensFontWeight.tsx b/docs/.storybook/blocks/tokens/TokensFontWeight.tsx
@@ -3,7 +3,7 @@ import tokens from '@baloise/design-system-tokens/dist/tokens.docs.json'
 import { Clipboard } from '../Clipboard'
 
 export const TokensFontWeight = ({ overview }) => {
-  const list = tokens.size.text.weight
+  const list = tokens.size.font.weight
 
   return (
     <table className="sb-unstyled my-x-large table tokens" style={{ width: '100%' }}>

diff --git a/docs/.storybook/blocks/tokens/TokensSpacing.tsx b/docs/.storybook/blocks/tokens/TokensSpacing.tsx
@@ -4,8 +4,6 @@ import { Clipboard } from '../Clipboard'
 
 export const TokensSpacing = ({ overview }) => {
   const list = tokens.size.space
-  const listTablet = tokens.size.space.tablet
-  const listDesktop = tokens.size.space.desktop
   return (
     <table className="sb-unstyled my-x-large table tokens" style={{ width: '100%' }}>
       <thead>
@@ -17,12 +15,11 @@ export const TokensSpacing = ({ overview }) => {
       </thead>
 
       {Object.keys(list)
-        .filter(key => list[key].value)
+        .filter(key => list[key].mobile.value)
         .map(key => {
-          const item = list[key]
-          const itemTablet = listTablet[key]
-          const itemDesktop = listDesktop[key]
-
+          const item = list[key].mobile
+          const itemTablet = list[key].tablet
+          const itemDesktop = list[key].desktop
           return (
             <tbody key={key}>
               <tr>