fixup! fixup! Feat(web): Introduce Skeleton component #DS-1625

lmc-eu · Jan 24, 2025 · 22afb17 · 22afb17
1 parent 2fd274d
commit 22afb17
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 36 deletions.
diff --git a/packages/web/src/scss/components/Skeleton/README.md b/packages/web/src/scss/components/Skeleton/README.md
@@ -47,9 +47,9 @@ Use CSS custom properties to define the width, height, and radius of the shape.
 
 - `--spirit-skeleton-shape-width: number{px};`
 - `--spirit-skeleton-shape-height: number{px};`
-- `--spirit-skeleton-shape-radius:var(--spirit-radius-200);`
-- `--spirit-skeleton-shape-tablet-radius: var(--spirit-radius-300);`
-- `--spirit-skeleton-shape-desktop-radius: var(--spirit-radius-400);`
+- `--spirit-skeleton-shape-radius: var(--spirit-radius-200);`
+- `--spirit-skeleton-shape-radius-tablet: var(--spirit-radius-300);`
+- `--spirit-skeleton-shape-radius-desktop: var(--spirit-radius-400);`
 
 ```html
 <div class="Skeleton Skeleton--shape" aria-busy="true" aria-live="polite">

diff --git a/packages/web/src/scss/components/Skeleton/_Skeleton.scss b/packages/web/src/scss/components/Skeleton/_Skeleton.scss
@@ -1,8 +1,8 @@
 @use 'theme';
 @use 'tools';
-@use 'sass:map';
 @use '@tokens' as tokens;
 @use '../../tools/breakpoint';
+@use '../../tools/responsive-properties';
 @use '../../tools/string' as spirit-string;
 
 .Skeleton {
@@ -53,12 +53,13 @@
     height: var(--#{tokens.$css-variable-prefix}skeleton-shape-height);
     object-fit: cover;
     border: 1px solid theme.$shape-border-color;
-    border-radius: var(
-        --#{tokens.$css-variable-prefix}skeleton-shape-border-radius,
-        #{theme.$shape-default-border-radius}
-    );
 
-    @include tools.generate-radius-shape(theme.$breakpoints, tokens.$css-variable-prefix);
+    @include responsive-properties.create-cascade(
+        $property: 'border-radius',
+        $input-custom-property-base-name: '#{tokens.$css-variable-prefix}skeleton-shape-radius',
+        $breakpoints: theme.$breakpoints,
+        $fallback-value: theme.$shape-default-border-radius
+    );
 }
 
 .Skeleton--text .Skeleton__item,

diff --git a/packages/web/src/scss/components/Skeleton/_theme.scss b/packages/web/src/scss/components/Skeleton/_theme.scss
@@ -1,5 +1,4 @@
 @use '@tokens' as tokens;
-@use 'sass:map';
 @use 'tools';
 
 $margin-bottom: tokens.$space-400;
@@ -9,10 +8,6 @@ $breakpoints: tokens.$breakpoints;
 $typography-border-radius: tokens.$radius-300;
 $typography-default-height: tools.get-height(tokens.$body-medium-bold, mobile);
 
-$border-radius-default: tokens.$radius-300;
-$border-radius-square: tokens.$radius-400;
-$border-radius-circle: tokens.$radius-full;
-
 $shape-border-color: tokens.$disabled-border;
 $shape-default-border-radius: tokens.$radius-300;
 

diff --git a/packages/web/src/scss/components/Skeleton/_tools.scss b/packages/web/src/scss/components/Skeleton/_tools.scss
@@ -25,26 +25,6 @@
     @return $result;
 }
 
-@mixin generate-radius-shape($breakpoints, $css-variable-prefix) {
-    $previous-suffix: '';
-    $previous-previous-suffix: '';
-
-    @each $breakpoint-name, $breakpoint-value in $breakpoints {
-        $suffix: breakpoint.get-modifier(suffix, $breakpoint-name, $breakpoint-value);
-        $prefix: #{$css-variable-prefix}skeleton-shape;
-
-        @include breakpoint.up($breakpoint-value) {
-            --#{$prefix}-border-radius: var(
-                --#{$prefix}#{$suffix}-radius,
-                var(--#{$prefix}#{$previous-suffix}-radius, var(--#{$prefix}#{$previous-previous-suffix}-radius))
-            );
-        }
-
-        $previous-previous-suffix: $previous-suffix;
-        $previous-suffix: $suffix;
-    }
-}
-
 @mixin generate-item-sizes($class-name, $sizes) {
     @each $size, $variables in $sizes {
         &.#{$class-name}--#{$size} {

diff --git a/packages/web/src/scss/components/Skeleton/index.html b/packages/web/src/scss/components/Skeleton/index.html
@@ -169,8 +169,8 @@ <h3 class="docs-Heading">Shape Rectangular responsive radius</h3>
                    --spirit-skeleton-shape-width: 300px;
                     --spirit-skeleton-shape-height: 100px;
                      --spirit-skeleton-shape-radius: var(--spirit-radius-200);
-                     --spirit-skeleton-shape-tablet-radius: var(--spirit-radius-400);
-                     --spirit-skeleton-shape-desktop-radius: var(--spirit-radius-500);
+                     --spirit-skeleton-shape-radius-tablet: var(--spirit-radius-400);
+                     --spirit-skeleton-shape-radius-desktop: var(--spirit-radius-500);
 "
               ></div>
             </div>