Merge branch 'next' into feat/NDS-536_link_component_implementation_v5

Orfium · Oct 9, 2023 · 6803e4e · 6803e4e
2 parents 0180645 + 6e23946
commit 6803e4e
Show file tree

Hide file tree

Showing 19 changed files with 248 additions and 156 deletions.
diff --git a/src/components/Avatar/Avatar.style.ts b/src/components/Avatar/Avatar.style.ts
@@ -1,11 +1,6 @@
 import { css, SerializedStyles } from '@emotion/react';
 
-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';
@@ -19,22 +14,22 @@ export const avatarStyle =
 
     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;
 
-      ${generateStylesFromTokens(typographyTokens(`${size}` as AvatarTextTokens))};
+      ${generateStylesFromTokens(typographyTokens(`${size}` as const))};
 
       img {
         border-radius: ${tokens('borderRadius')};

diff --git a/src/components/Avatar/Avatar.tokens.ts b/src/components/Avatar/Avatar.tokens.ts
@@ -15,14 +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) => any) => {
-  return getComponentTokens(avatar, theme);
+export const getAvatarTokens = (theme: Theme) => {
+  return getComponentTokens<AvatarTokens>(avatar, theme);
 };
 
-export const getAvatarTextTokens = (
-  theme: Theme
-): ((path: DotKeys<typeof avatarText>) => any) => {
-  return getComponentTokens(avatarText, theme);
+export const getAvatarTextTokens = (theme: Theme) => {
+  return getComponentTokens<AvatarTextTokens>(avatarText, theme);
 };
diff --git a/src/components/Avatar/__snapshots__/Avatar.stories.storyshot b/src/components/Avatar/__snapshots__/Avatar.stories.storyshot
@@ -333,8 +333,8 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with icon 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  width: 2.25rem;
-  height: 2.25rem;
+  width: 2rem;
+  height: 2rem;
   border-radius: 6.25rem;
   border: 0.0625rem solid;
   border-color: #b9cdfc;
@@ -373,8 +373,8 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with icon 1`] = `
 
 .emotion-11 {
   fill: #1249C4;
-  width: 1.8rem;
-  height: 1.8rem;
+  width: 1.6rem;
+  height: 1.6rem;
 }
 
 .emotion-11 path {
@@ -819,8 +819,8 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with letter 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  width: 2.25rem;
-  height: 2.25rem;
+  width: 2rem;
+  height: 2rem;
   border-radius: 6.25rem;
   border: 0.0625rem solid;
   border-color: #b9cdfc;
@@ -1223,8 +1223,8 @@ exports[`Storyshots Design System/Avatar/Avatar Avatar with src 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  width: 2.25rem;
-  height: 2.25rem;
+  width: 2rem;
+  height: 2rem;
   border-radius: 6.25rem;
   border: 0.0625rem solid;
   border-color: #b9cdfc;

diff --git a/src/components/Avatar/__snapshots__/AvatarStack.stories.storyshot b/src/components/Avatar/__snapshots__/AvatarStack.stories.storyshot
@@ -211,12 +211,12 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = `
 }
 
 .emotion-25 div:last-child {
-  width: 2.25rem;
+  width: 2rem;
 }
 
 .emotion-26 {
   z-index: 6;
-  width: 1.8rem;
+  width: 1.6rem;
 }
 
 .emotion-27 {
@@ -227,8 +227,8 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  width: 2.25rem;
-  height: 2.25rem;
+  width: 2rem;
+  height: 2rem;
   border-radius: 6.25rem;
   border: 0.0625rem solid;
   border-color: #b9cdfc;
@@ -267,7 +267,7 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = `
 
 .emotion-28 {
   z-index: 5;
-  width: 1.8rem;
+  width: 1.6rem;
 }
 
 .emotion-30 {
@@ -288,8 +288,8 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = `
 
 .emotion-31 {
   fill: #1249C4;
-  width: 1.8rem;
-  height: 1.8rem;
+  width: 1.6rem;
+  height: 1.6rem;
 }
 
 .emotion-31 path {
@@ -298,12 +298,12 @@ exports[`Storyshots Design System/Avatar/AvatarStack Avatar Stack 1`] = `
 
 .emotion-32 {
   z-index: 4;
-  width: 1.8rem;
+  width: 1.6rem;
 }
 
 .emotion-34 {
   z-index: 0;
-  width: 1.8rem;
+  width: 1.6rem;
 }
 
 .emotion-36 {

diff --git a/src/components/Box/Box.stories.mdx b/src/components/Box/Box.stories.mdx
@@ -45,13 +45,13 @@ All application below comes with a default margin bottom '5' which is 12px
 
 <Preview>
   <Story name="Box Padding (All sides)">
-    <Box backgroundColor={'light'} p={'3'} mb={'5'}>
+    <Box backgroundColor={'default'} p={'3'} mb={'5'}>
       Padding 3
     </Box>
-    <Box backgroundColor={'light'} p={'7'} mb={'5'}>
+    <Box backgroundColor={'default'} p={'7'} mb={'5'}>
       Padding 7
     </Box>
-    <Box backgroundColor={'light'} p={'12'} mb={'5'}>
+    <Box backgroundColor={'default'} p={'12'} mb={'5'}>
       Padding 12
     </Box>
   </Story>
@@ -63,7 +63,7 @@ Padding is the same as "margin" in the application, you can also use `mx` for ma
 
 <Preview>
   <Story name="Box Horizontal Padding">
-    <Box backgroundColor={'light'} px={'7'}>
+    <Box backgroundColor={'default'} px={'7'}>
       Padding Horizontal 7
     </Box>
   </Story>
@@ -75,7 +75,7 @@ Padding is the same as "margin" in the application, you can also use `my` for ma
 
 <Preview>
   <Story name="Box Vertical Padding">
-    <Box backgroundColor={'light'} py={'7'}>
+    <Box backgroundColor={'default'} py={'7'}>
       Padding Vertical 7
     </Box>
   </Story>
@@ -90,7 +90,7 @@ All application below comes with a default margin bottom '5' which is 12px
     <Box backgroundColor={'inverted'} color={'inverted.primary'} mb={'5'}>
       Background Inverted
     </Box>
-    <Box backgroundColor={'light'} mb={'5'}>
+    <Box backgroundColor={'default'} mb={'5'}>
       Background Light
     </Box>
     <Box backgroundColor={'transparent'} mb={'5'}>

diff --git a/src/components/Box/__snapshots__/Box.stories.storyshot b/src/components/Box/__snapshots__/Box.stories.storyshot
@@ -23,6 +23,7 @@ exports[`Storyshots Design System/Box Box Background 1`] = `
 }
 
 .emotion-3 {
+  background-color: #ffffff;
   margin-bottom: 0.75rem;
 }
 
@@ -73,6 +74,7 @@ exports[`Storyshots Design System/Box Box Horizontal Padding 1`] = `
 }
 
 .emotion-2 {
+  background-color: #ffffff;
   padding: 0 1.25rem;
 }
 
@@ -108,16 +110,19 @@ exports[`Storyshots Design System/Box Box Padding (All sides) 1`] = `
 }
 
 .emotion-2 {
+  background-color: #ffffff;
   padding: 0.25rem;
   margin-bottom: 0.75rem;
 }
 
 .emotion-3 {
+  background-color: #ffffff;
   padding: 1.25rem;
   margin-bottom: 0.75rem;
 }
 
 .emotion-4 {
+  background-color: #ffffff;
   padding: 2.75rem;
   margin-bottom: 0.75rem;
 }
@@ -164,6 +169,7 @@ exports[`Storyshots Design System/Box Box Vertical Padding 1`] = `
 }
 
 .emotion-2 {
+  background-color: #ffffff;
   padding: 1.25rem 0;
 }
 

diff --git a/src/components/Button/Button.tokens.ts b/src/components/Button/Button.tokens.ts
@@ -9,20 +9,14 @@ export type ButtonTokens = DotKeys<typeof button>;
 export type TextButtonTokens = DotKeys<typeof textButton>;
 export type IconButtonTokens = DotKeys<typeof iconButton>;
 
-export const getButtonTokens = (
-  theme: Theme
-): ((path: ButtonTokens, fn?: (val: string) => any) => any) => {
-  return getComponentTokens(button, theme);
+export const getButtonTokens = (theme: Theme) => {
+  return getComponentTokens<ButtonTokens>(button, theme);
 };
 
-export const getTextButtonTokens = (
-  theme: Theme
-): ((path: TextButtonTokens, fn?: (val: string) => any) => any) => {
-  return getComponentTokens(textButton, theme);
+export const getTextButtonTokens = (theme: Theme) => {
+  return getComponentTokens<TextButtonTokens>(textButton, theme);
 };
 
-export const getIconButtonTokens = (
-  theme: Theme
-): ((path: IconButtonTokens, fn?: (val: string) => any) => any) => {
-  return getComponentTokens(iconButton, theme);
+export const getIconButtonTokens = (theme: Theme) => {
+  return getComponentTokens<IconButtonTokens>(iconButton, theme);
 };
diff --git a/src/components/ButtonBase/ButtonBase.style.ts b/src/components/ButtonBase/ButtonBase.style.ts
@@ -2,12 +2,7 @@ import { css, SerializedStyles } from '@emotion/react';
 
 import { ButtonBaseProps } from './ButtonBase';
 import { Theme } from '../../theme';
-import {
-  ButtonTokens,
-  getButtonTokens,
-  getIconButtonTokens,
-  getTextButtonTokens,
-} from '../Button/Button.tokens';
+import { getButtonTokens, getIconButtonTokens, getTextButtonTokens } from '../Button/Button.tokens';
 import { generateStylesFromTokens } from 'components/Typography/utils';
 
 export const buttonWrapperStyle = ({
@@ -31,10 +26,10 @@ export const buttonBaseStyle =
     const textButtonTokens = getTextButtonTokens(theme);
 
     const baseButtonStyles = {
-      color: tokens(`${type}.textColor` as ButtonTokens),
+      color: tokens(`${type}.textColor` as const),
       width: isBlock ? '100%' : undefined,
       backgroundColor: tokens(
-        `${type}.backgroundColor.${isLoading ? 'active' : 'default'}` as ButtonTokens
+        `${type}.backgroundColor.${isLoading ? 'active' : 'default'}` as const
       ),
       padding: isIconButton
         ? iconButtonTokens('padding')
@@ -51,17 +46,17 @@ export const buttonBaseStyle =
       transition: 'background-color,border 150ms linear',
 
       ':focus-visible:not(:disabled)': {
-        backgroundColor: tokens(`${type}.backgroundColor.hover` as ButtonTokens),
+        backgroundColor: tokens(`${type}.backgroundColor.hover` as const),
       },
       ':disabled': {
         opacity: theme.tokens.disabledState.get('default'),
         cursor: 'not-allowed',
       },
       ':hover:not(:disabled)': {
-        backgroundColor: tokens(`${type}.backgroundColor.hover` as ButtonTokens),
+        backgroundColor: tokens(`${type}.backgroundColor.hover` as const),
       },
       ':active:not(:disabled)': {
-        backgroundColor: tokens(`${type}.backgroundColor.active` as ButtonTokens),
+        backgroundColor: tokens(`${type}.backgroundColor.active` as const),
       },
     };
 

diff --git a/src/components/TextField/__snapshots__/TextField.stories.storyshot b/src/components/TextField/__snapshots__/TextField.stories.storyshot
@@ -352,6 +352,7 @@ exports[`Storyshots Design System/TextField Multi TextField 1`] = `
   line-height: 2.25rem;
   font-size: 1.75rem;
   letter-spacing: 0rem;
+  color: #1B214F;
 }
 
 <div

diff --git a/src/components/Typography/Typography.stories.mdx b/src/components/Typography/Typography.stories.mdx
@@ -101,12 +101,12 @@ We have 2 different font spacing variations, normal (font-family: Roboto) and mo
   </Story>
 </Preview>
 
-### Types (light)
+### Types (default)
 
 General use of Typography based on available light types
 
 <Preview>
-  <Story name="Types (light)">
+  <Story name="Types (default)">
     <Stack isVertical>
       <Typography type={'primary'}>Primary</Typography>
       <Typography type={'secondary'}>Secondary</Typography>

diff --git a/src/components/Typography/Typography.style.ts b/src/components/Typography/Typography.style.ts
@@ -62,7 +62,7 @@ export const typographyWrapper =
       body04,
     };
 
-    const textColorCategory = isInverted ? 'inverted' : 'light';
+    const textColorCategory = isInverted ? 'inverted' : 'default';
     const textColor = `textColor.${textColorCategory}.${type}` as DotKeys<typeof colorsFigma>;
 
     return css`