Merge branch 'feat/NDS-701_textfields_v5' into feat/NDS-810_design_qa…

…_for_fields_v5
Orfium · Oct 9, 2023 · b1a4074 · b1a4074
2 parents 1f84a3a + f95ca23
commit b1a4074
Show file tree

Hide file tree

Showing 37 changed files with 400 additions and 445 deletions.
diff --git a/src/components/Avatar/Avatar.style.ts b/src/components/Avatar/Avatar.style.ts
@@ -29,7 +29,7 @@ export const avatarStyle =
       user-select: none;
       justify-content: center;
 
-      ${generateStylesFromTokens(typographyTokens(`${size}`))};
+      ${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
@@ -16,9 +16,9 @@ export type AvatarTokens = DotKeys<typeof avatar>;
 export type AvatarTextTokens = DotKeys<typeof avatarText>;
 
 export const getAvatarTokens = (theme: Theme) => {
-  return getComponentTokens(avatar, theme);
+  return getComponentTokens<AvatarTokens>(avatar, theme);
 };
 
 export const getAvatarTextTokens = (theme: Theme) => {
-  return getComponentTokens(avatarText, 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/Box.test.ts b/src/components/Box/Box.test.ts
@@ -5,13 +5,13 @@ describe('pickCSSProperties', () => {
   it('should pick only the styled box props from the input object', () => {
     const inputObject: BoxProps = {
       color: 'inverted.secondary',
-      backgroundColor: 'light',
+      backgroundColor: 'default',
       id: 'testing-id',
     };
 
     const expectedOutput: BoxProps = {
       color: 'inverted.secondary',
-      backgroundColor: 'light',
+      backgroundColor: 'default',
     };
 
     const result = pickCSSProperties(inputObject);
@@ -46,7 +46,7 @@ describe('pickNonCSSProps', () => {
   it('should pick only the non-CSS props from the input object', () => {
     const inputObject: BoxProps = {
       color: 'inverted.secondary',
-      backgroundColor: 'light',
+      backgroundColor: 'default',
       id: 'testing-id',
     };
 
@@ -62,7 +62,7 @@ describe('pickNonCSSProps', () => {
   it('should return an empty object if all props are CSS props', () => {
     const inputObject: BoxProps = {
       color: 'inverted.secondary',
-      backgroundColor: 'light',
+      backgroundColor: 'default',
     };
 
     const expectedOutput: BoxProps = {};

diff --git a/src/components/Box/__snapshots__/Box.stories.storyshot b/src/components/Box/__snapshots__/Box.stories.storyshot
@@ -18,7 +18,7 @@ exports[`Storyshots Design System/Box Box Background 1`] = `
 
 .emotion-2 {
   color: #ffffff;
-  background-color: #212332;
+  background-color: #1B214F;
   margin-bottom: 0.75rem;
 }
 

diff --git a/src/components/Button/Button.tokens.ts b/src/components/Button/Button.tokens.ts
@@ -10,13 +10,13 @@ export type TextButtonTokens = DotKeys<typeof textButton>;
 export type IconButtonTokens = DotKeys<typeof iconButton>;
 
 export const getButtonTokens = (theme: Theme) => {
-  return getComponentTokens(button, theme);
+  return getComponentTokens<ButtonTokens>(button, theme);
 };
 
 export const getTextButtonTokens = (theme: Theme) => {
-  return getComponentTokens(textButton, theme);
+  return getComponentTokens<TextButtonTokens>(textButton, theme);
 };
 
 export const getIconButtonTokens = (theme: Theme) => {
-  return getComponentTokens(iconButton, theme);
+  return getComponentTokens<IconButtonTokens>(iconButton, theme);
 };
diff --git a/src/components/DatePicker/Day/__snapshots__/Day.test.tsx.snap b/src/components/DatePicker/Day/__snapshots__/Day.test.tsx.snap
@@ -6,7 +6,6 @@ exports[`Day should render correctly 1`] = `
   text-align: center;
   cursor: pointer;
   position: relative;
-  color: #212332;
   width: 2.25rem;
   font-weight: bold;
   opacity: 1;
@@ -27,7 +26,6 @@ exports[`Day should render correctly 1`] = `
   border-radius: 6.25rem;
   width: 2.25rem;
   height: 2.25rem;
-  color: #212332;
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -54,7 +52,6 @@ exports[`Day should render correctly 1`] = `
   text-align: center;
   cursor: pointer;
   position: relative;
-  color: #212332;
   width: 2.25rem;
   font-weight: bold;
   opacity: 1;
@@ -75,7 +72,6 @@ exports[`Day should render correctly 1`] = `
   border-radius: 6.25rem;
   width: 2.25rem;
   height: 2.25rem;
-  color: #212332;
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -127,7 +123,6 @@ exports[`Day should render disabled correctly 1`] = `
   text-align: center;
   cursor: pointer;
   position: relative;
-  color: #212332;
   width: 2.25rem;
   font-weight: bold;
   opacity: 0.5;
@@ -148,7 +143,6 @@ exports[`Day should render disabled correctly 1`] = `
   border-radius: 6.25rem;
   width: 2.25rem;
   height: 2.25rem;
-  color: #212332;
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -170,7 +164,6 @@ exports[`Day should render disabled correctly 1`] = `
   text-align: center;
   cursor: pointer;
   position: relative;
-  color: #212332;
   width: 2.25rem;
   font-weight: bold;
   opacity: 0.5;
@@ -191,7 +184,6 @@ exports[`Day should render disabled correctly 1`] = `
   border-radius: 6.25rem;
   width: 2.25rem;
   height: 2.25rem;
-  color: #212332;
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -238,7 +230,6 @@ exports[`Day should render isFirst, isLast correctly 1`] = `
   text-align: center;
   cursor: pointer;
   position: relative;
-  color: #212332;
   width: 2.25rem;
   font-weight: bold;
   opacity: 1;
@@ -275,7 +266,6 @@ exports[`Day should render isFirst, isLast correctly 1`] = `
   border-radius: 6.25rem;
   width: 2.25rem;
   height: 2.25rem;
-  color: #212332;
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -302,7 +292,6 @@ exports[`Day should render isFirst, isLast correctly 1`] = `
   text-align: center;
   cursor: pointer;
   position: relative;
-  color: #212332;
   width: 2.25rem;
   font-weight: bold;
   opacity: 1;
@@ -339,7 +328,6 @@ exports[`Day should render isFirst, isLast correctly 1`] = `
   border-radius: 6.25rem;
   width: 2.25rem;
   height: 2.25rem;
-  color: #212332;
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -391,7 +379,6 @@ exports[`Day should render isFirst, isLast correctly 2`] = `
   text-align: center;
   cursor: pointer;
   position: relative;
-  color: #212332;
   width: 2.25rem;
   font-weight: bold;
   opacity: 1;
@@ -428,7 +415,6 @@ exports[`Day should render isFirst, isLast correctly 2`] = `
   border-radius: 6.25rem;
   width: 2.25rem;
   height: 2.25rem;
-  color: #212332;
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -455,7 +441,6 @@ exports[`Day should render isFirst, isLast correctly 2`] = `
   text-align: center;
   cursor: pointer;
   position: relative;
-  color: #212332;
   width: 2.25rem;
   font-weight: bold;
   opacity: 1;
@@ -492,7 +477,6 @@ exports[`Day should render isFirst, isLast correctly 2`] = `
   border-radius: 6.25rem;
   width: 2.25rem;
   height: 2.25rem;
-  color: #212332;
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;