Merge pull request #676 from Orfium/feat/NDS-809_revisit_typography_p…

…arsing_mechanism_v5 [NDS-809] feat: revisit typography parsing mechanism [v5]
Orfium · Oct 4, 2023 · 79ef59d · 79ef59d
2 parents 7ab9372 + e2cfab9
commit 79ef59d
Show file tree

Hide file tree

Showing 22 changed files with 899 additions and 298 deletions.
diff --git a/src/components/Avatar/Avatar.style.ts b/src/components/Avatar/Avatar.style.ts
@@ -1,43 +1,35 @@
 import { css, SerializedStyles } from '@emotion/react';
-import { get } from 'lodash';
 
-import {
-  AvatarTextTokens,
-  AvatarTokens,
-  getAvatarTextTokens,
-  getAvatarTokens,
-} from './Avatar.tokens';
+import { getAvatarTextTokens, getAvatarTokens } from './Avatar.tokens';
 import { AvatarColors, AvatarSizes } from './Avatar.types';
 import { Theme } from '../../theme';
 import { flex } from '../../theme/functions';
+import { generateStylesFromTokens } from 'components/Typography/utils';
 
 export const avatarStyle =
   ({ size, color }: { size: AvatarSizes; color: AvatarColors }) =>
   (theme: Theme): SerializedStyles => {
     const tokens = getAvatarTokens(theme);
-    const typographyTokens = getAvatarTextTokens();
+    const typographyTokens = getAvatarTextTokens(theme);
 
     return css`
       ${flex};
-      width: ${tokens(`size.${size}` as AvatarTokens)};
-      height: ${tokens(`size.${size}` as AvatarTokens)};
+      width: ${tokens(`size.${size}` as const)};
+      height: ${tokens(`size.${size}` as const)};
       border-radius: ${tokens('borderRadius')};
       border: ${tokens('borderWidth')} solid;
-      border-color: ${tokens(`borderColor.${color}` as AvatarTokens)};
+      border-color: ${tokens(`borderColor.${color}` as const)};
       box-sizing: border-box;
-      background-color: ${tokens(`backgroundColor.${color}` as AvatarTokens)};
-      color: ${tokens(`textColor.${color}` as AvatarTokens)};
+      background-color: ${tokens(`backgroundColor.${color}` as const)};
+      color: ${tokens(`textColor.${color}` as const)};
       overflow: hidden;
       position: relative;
       align-items: center;
       flex-shrink: 0;
       user-select: none;
       justify-content: center;
 
-      font-size: ${get(typographyTokens(`${size}` as AvatarTextTokens), 'fontSize')};
-      font-weight: ${get(typographyTokens(`${size}` as AvatarTextTokens), 'fontWeight')};
-      line-height: ${get(typographyTokens(`${size}` as AvatarTextTokens), 'lineHeight')};
-      letter-spacing: ${get(typographyTokens(`${size}` as AvatarTextTokens), 'letterSpacing')};
+      ${generateStylesFromTokens(typographyTokens(`${size}`))};
 
       img {
         border-radius: ${tokens('borderRadius')};

diff --git a/src/components/Avatar/Avatar.tokens.ts b/src/components/Avatar/Avatar.tokens.ts
@@ -1,6 +1,6 @@
 import avatar from 'theme/tokens/components/variables/avatar';
 import avatarText from 'theme/tokens/components/variables/avatarText';
-import { getComponentTokens, parseCompositionToken, DotKeys } from 'theme/tokens/utils';
+import { getComponentTokens, DotKeys } from 'theme/tokens/utils';
 import { rem } from 'theme/utils';
 
 import { Theme } from '../../theme';
@@ -15,12 +15,10 @@ export const parseAvatarStackSize = (val: string) =>
 export type AvatarTokens = DotKeys<typeof avatar>;
 export type AvatarTextTokens = DotKeys<typeof avatarText>;
 
-export const getAvatarTokens = (
-  theme: Theme
-): ((path: AvatarTokens, fn?: (val: string) => any) => string) => {
+export const getAvatarTokens = (theme: Theme) => {
   return getComponentTokens(avatar, theme);
 };
 
-export const getAvatarTextTokens = (): ((path: DotKeys<typeof avatarText>) => string) => {
-  return parseCompositionToken(avatarText);
+export const getAvatarTextTokens = (theme: Theme) => {
+  return getComponentTokens(avatarText, theme);
 };
diff --git a/src/components/Avatar/__snapshots__/Avatar.stories.storyshot b/src/components/Avatar/__snapshots__/Avatar.stories.storyshot
@@ -63,9 +63,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar Playground 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 0.625rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 0.875rem;
+  font-size: 0.625rem;
   letter-spacing: 0.00625rem;
 }
 
@@ -229,9 +230,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with icon 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 0.625rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 0.875rem;
+  font-size: 0.625rem;
   letter-spacing: 0.00625rem;
 }
 
@@ -300,9 +302,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with icon 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 0.75rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 1.125rem;
+  font-size: 0.75rem;
   letter-spacing: 0.015625rem;
 }
 
@@ -355,9 +358,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with icon 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 0.875rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 1.25rem;
+  font-size: 0.875rem;
   letter-spacing: 0.015625rem;
 }
 
@@ -410,9 +414,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with icon 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 1rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 1.375rem;
+  font-size: 1rem;
   letter-spacing: 0.00625rem;
 }
 
@@ -465,9 +470,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with icon 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 1.5rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 2rem;
+  font-size: 1.5rem;
   letter-spacing: 0rem;
 }
 
@@ -520,9 +526,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with icon 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 2rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 2.5rem;
+  font-size: 2rem;
   letter-spacing: 0rem;
 }
 
@@ -745,9 +752,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with letter 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 0.625rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 0.875rem;
+  font-size: 0.625rem;
   letter-spacing: 0.00625rem;
 }
 
@@ -790,9 +798,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with letter 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 0.75rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 1.125rem;
+  font-size: 0.75rem;
   letter-spacing: 0.015625rem;
 }
 
@@ -835,9 +844,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with letter 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 0.875rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 1.25rem;
+  font-size: 0.875rem;
   letter-spacing: 0.015625rem;
 }
 
@@ -880,9 +890,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with letter 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 1rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 1.375rem;
+  font-size: 1rem;
   letter-spacing: 0.00625rem;
 }
 
@@ -925,9 +936,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with letter 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 1.5rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 2rem;
+  font-size: 1.5rem;
   letter-spacing: 0rem;
 }
 
@@ -970,9 +982,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with letter 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 2rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 2.5rem;
+  font-size: 2rem;
   letter-spacing: 0rem;
 }
 
@@ -1143,9 +1156,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with src 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 0.625rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 0.875rem;
+  font-size: 0.625rem;
   letter-spacing: 0.00625rem;
 }
 
@@ -1188,9 +1202,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with src 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 0.75rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 1.125rem;
+  font-size: 0.75rem;
   letter-spacing: 0.015625rem;
 }
 
@@ -1233,9 +1248,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with src 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 0.875rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 1.25rem;
+  font-size: 0.875rem;
   letter-spacing: 0.015625rem;
 }
 
@@ -1278,9 +1294,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with src 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 1rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 1.375rem;
+  font-size: 1rem;
   letter-spacing: 0.00625rem;
 }
 
@@ -1323,9 +1340,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with src 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 1.5rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 2rem;
+  font-size: 1.5rem;
   letter-spacing: 0rem;
 }
 
@@ -1368,9 +1386,10 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with src 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 2rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 2.5rem;
+  font-size: 2rem;
   letter-spacing: 0rem;
 }
 

diff --git a/src/components/Avatar/__snapshots__/AvatarStack.stories.storyshot b/src/components/Avatar/__snapshots__/AvatarStack.stories.storyshot
@@ -82,9 +82,10 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 0.625rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 0.875rem;
+  font-size: 0.625rem;
   letter-spacing: 0.00625rem;
 }
 
@@ -166,9 +167,10 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 0.75rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 1.125rem;
+  font-size: 0.75rem;
   letter-spacing: 0.015625rem;
 }
 
@@ -250,9 +252,10 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 0.875rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 1.25rem;
+  font-size: 0.875rem;
   letter-spacing: 0.015625rem;
 }
 
@@ -355,9 +358,10 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 1rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 1.375rem;
+  font-size: 1rem;
   letter-spacing: 0.00625rem;
 }
 
@@ -439,9 +443,10 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 1.5rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 2rem;
+  font-size: 1.5rem;
   letter-spacing: 0rem;
 }
 
@@ -528,9 +533,10 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
-  font-size: 2rem;
+  font-family: Roboto;
   font-weight: 500;
   line-height: 2.5rem;
+  font-size: 2rem;
   letter-spacing: 0rem;
 }