feat(plasma-b2c): add new typography sizes for Skeleton with snapshots

salute-developers · Jan 9, 2024 · d163e42 · d163e42
1 parent d355ec5
commit d163e42
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 0 deletions.
diff --git a/...leton.component-test.tsx/plasma-core Skeleton -- LineSkeleton -- _size.snap.png b/...leton.component-test.tsx/plasma-core Skeleton -- LineSkeleton -- _size.snap.png
diff --git a/...leton.component-test.tsx/plasma-core Skeleton -- TextSkeleton -- _size.snap.png b/...leton.component-test.tsx/plasma-core Skeleton -- TextSkeleton -- _size.snap.png
diff --git a/...eton.component-test.tsx/plasma-core Skeleton -- withSkeleton -- simple.snap.png b/...eton.component-test.tsx/plasma-core Skeleton -- withSkeleton -- simple.snap.png
diff --git a/packages/plasma-b2c/src/components/Skeleton/LineSkeleton.config.ts b/packages/plasma-b2c/src/components/Skeleton/LineSkeleton.config.ts
@@ -78,6 +78,74 @@ export const config = {
                 ${skeletonTokens.lineHeight}: var(--plasma-typo-underline-line-height);
                 ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-underline-font-size);
             `,
+            bodyL: css`
+                ${skeletonTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+                ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-l-font-size);
+            `,
+            bodyM: css`
+                ${skeletonTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+                ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-m-font-size);
+            `,
+            bodyS: css`
+                ${skeletonTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+                ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-s-font-size);
+            `,
+            bodyXS: css`
+                ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xs-font-size);
+            `,
+            bodyXXS: css`
+                ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xxs-font-size);
+            `,
+            dsplL: css`
+                ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-l-line-height);
+                ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-l-font-size);
+            `,
+            dsplM: css`
+                ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-m-line-height);
+                ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-m-font-size);
+            `,
+            dsplS: css`
+                ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-s-line-height);
+                ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-s-font-size);
+            `,
+            h1: css`
+                ${skeletonTokens.lineHeight}: var(--plasma-typo-h1-line-height);
+                ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h1-font-size);
+            `,
+            h2: css`
+                ${skeletonTokens.lineHeight}: var(--plasma-typo-h2-line-height);
+                ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h2-font-size);
+            `,
+            h3: css`
+                ${skeletonTokens.lineHeight}: var(--plasma-typo-h3-line-height);
+                ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h3-font-size);
+            `,
+            h4: css`
+                ${skeletonTokens.lineHeight}: var(--plasma-typo-h4-line-height);
+                ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h4-font-size);
+            `,
+            h5: css`
+                ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height);
+                ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size);
+            `,
+            textL: css`
+                ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height);
+                ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size);
+            `,
+            textM: css`
+                ${skeletonTokens.lineHeight}: var(--plasma-typo-text-m-line-height);
+                ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-m-font-size);
+            `,
+            textS: css`
+                ${skeletonTokens.lineHeight}: var(--plasma-typo-text-s-line-height);
+                ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-s-font-size);
+            `,
+            textXS: css`
+                ${skeletonTokens.lineHeight}: var(--plasma-typo-text-xs-line-height);
+                ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-xs-font-size);
+            `,
         },
     },
 };
diff --git a/packages/plasma-b2c/src/components/Skeleton/Skeleton.component-test.tsx b/packages/plasma-b2c/src/components/Skeleton/Skeleton.component-test.tsx
@@ -23,6 +23,23 @@ const textSizes = [
     'button2',
     'caption',
     'underline',
+    'bodyL',
+    'bodyM',
+    'bodyS',
+    'bodyXS',
+    'bodyXXS',
+    'dsplL',
+    'dsplM',
+    'dsplS',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'textL',
+    'textM',
+    'textS',
+    'textXS',
 ];
 const roundnessKeys = Object.keys(radiuses).map((r) => Number(r));
 

diff --git a/packages/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx b/packages/plasma-b2c/src/components/Skeleton/Skeleton.stories.tsx
@@ -42,6 +42,23 @@ const textSizes = [
     'button2',
     'caption',
     'underline',
+    'bodyL',
+    'bodyM',
+    'bodyS',
+    'bodyXS',
+    'bodyXXS',
+    'dsplL',
+    'dsplM',
+    'dsplS',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'textL',
+    'textM',
+    'textS',
+    'textXS',
 ];
 
 const Default: StoryObj = {