Merge pull request #288 from TobiTRy/update-skeleton-with-default-val…

…ue-fil refactor: Update SkeletonBox component to use fit as default size for…
TobiTRy · May 9, 2024 · 9b92039 · 9b92039
2 parents 28a3544 + e88e85a
commit 9b92039
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/src/components/atoms/SkeletonBox/SkeletonBox.style.tsx b/src/components/atoms/SkeletonBox/SkeletonBox.style.tsx
@@ -1,11 +1,26 @@
-import { styled, keyframes } from 'styled-components';
+import { styled, keyframes, css } from 'styled-components';
 
 import { TTheme } from '@/types/TTheme';
 import { TStyledPrefixAndPicker } from '@/types/TStyledPrefixAndPicker';
 import { globalElementsizes } from '@/design/theme/globalSizes';
 import { TSkeletonBox } from './TSkeleton.model';
 import { clampLayer } from '@/utils/functions/clampLayer';
 
+type TSyledSkeletonBox = TStyledPrefixAndPicker<TSkeletonBox>;
+export const StyledSkeletonBox = styled.div<TSyledSkeletonBox & { theme: TTheme }>`
+  width: ${({ $sizeW }) => $sizeW && ($sizeW === 'fit' ? '100%' : globalElementsizes[$sizeW])};
+  height: ${({ $sizeH }) => $sizeH && ($sizeH === 'fit' ? '100%' : globalElementsizes[$sizeH])};
+  background-color: ${({ theme, $themeType = 'primary', $layer }) => theme.colors[$themeType][$layer || 0]};
+  animation: ${({ theme, $themeType, $layer }) => createLoadingKeyframes({ theme, $themeType, $layer })} 2s infinite;
+  border-radius: ${({ theme, $borderRadius }) => theme.borderRadius[$borderRadius ?? 'xs'] || '0px'};
+  ${({ $aspectRatio }) =>
+    $aspectRatio &&
+    css`
+      aspect-ratio: ${$aspectRatio};
+    `}
+  ${({ $externalStyle }) => $externalStyle};
+`;
+
 type TLoadingProps = TStyledPrefixAndPicker<TSkeletonBox, 'themeType' | 'layer'>;
 const createLoadingKeyframes = ({
   $themeType = 'primary',
@@ -22,13 +37,3 @@ const createLoadingKeyframes = ({
     background-color: ${theme.colors[$themeType][$layer ?? 0]};
   }
 `;
-
-type TSyledSkeletonBox = TStyledPrefixAndPicker<TSkeletonBox>;
-export const StyledSkeletonBox = styled.div<TSyledSkeletonBox & { theme: TTheme }>`
-  width: ${({ $sizeW }) => ($sizeW === 'fit' ? '100%' : globalElementsizes[$sizeW || 'md'])};
-  height: ${({ $sizeH }) => ($sizeH === 'fit' ? '100%' : globalElementsizes[$sizeH || 'md'])};
-  background-color: ${({ theme, $themeType = 'primary', $layer }) => theme.colors[$themeType][$layer || 0]};
-  animation: ${({ theme, $themeType, $layer }) => createLoadingKeyframes({ theme, $themeType, $layer })} 2s infinite;
-  border-radius: ${({ theme, $borderRadius }) => theme.borderRadius[$borderRadius ?? 'xs'] || '0px'};
-  ${({ $externalStyle }) => $externalStyle};
-`;
diff --git a/src/components/atoms/SkeletonBox/SkeletonBox.tsx b/src/components/atoms/SkeletonBox/SkeletonBox.tsx
@@ -6,8 +6,8 @@ export default function SkeletonBox(props: TSkeletonBoxWithHTMLAttrs) {
   const {
     themeType = 'primary',
     layer = 0,
-    sizeH,
-    sizeW,
+    sizeH = 'fit',
+    sizeW = 'fit',
     aspectRatio,
     borderRadius,
     externalStyle,

diff --git a/src/components/atoms/SkeletonBox/docu/SkeletonBox.stories.tsx b/src/components/atoms/SkeletonBox/docu/SkeletonBox.stories.tsx
@@ -32,7 +32,7 @@ const meta = {
         type: 'select',
       },
       table: {
-        defaultValue: { summary: 'md' },
+        defaultValue: { summary: 'fit' },
       },
     },
     sizeW: {
@@ -42,7 +42,7 @@ const meta = {
         type: 'select',
       },
       table: {
-        defaultValue: { summary: 'md' },
+        defaultValue: { summary: 'fit' },
       },
     },
     borderRadius: {