Skip to content

Commit

Permalink
fixup! Feat(web): Introduce Skeleton component #DS-1625
Browse files Browse the repository at this point in the history
  • Loading branch information
Řehořková Kateřina committed Jan 31, 2025
1 parent 22afb17 commit 9c234ee
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 89 deletions.
25 changes: 16 additions & 9 deletions packages/web/src/scss/components/Skeleton/_Skeleton.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,21 +37,32 @@
}

.Skeleton__item {
position: relative;
display: block;
width: 100%;
background: theme.$background;
background-size: 400% 400%;
animation: skeleton-loading 2s ease infinite; // TODO: Animation to be determined
overflow: hidden;
background: theme.$item-background;

&:not(:last-child) {
margin-bottom: theme.$margin-bottom;
}

&::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: theme.$item-gradient;
transform: translateX(-100%);
animation: skeleton-loading 1.5s infinite;
}
}

.Skeleton--shape .Skeleton__item {
width: var(--#{tokens.$css-variable-prefix}skeleton-shape-width);
height: var(--#{tokens.$css-variable-prefix}skeleton-shape-height);
object-fit: cover;
border: 1px solid theme.$shape-border-color;

@include responsive-properties.create-cascade(
Expand All @@ -73,11 +84,7 @@
}

@keyframes skeleton-loading {
0% {
background-position: 100% 50%;
}

100% {
background-position: 0 50%;
transform: translateX(100%);
}
}
3 changes: 2 additions & 1 deletion packages/web/src/scss/components/Skeleton/_theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
@use 'tools';

$margin-bottom: tokens.$space-400;
$background: linear-gradient(94.81deg, #ececec 0%, #fff 48.5%, #ececec 100%); // TODO: update to tokens
$item-gradient: linear-gradient(94.81deg, #ececec 0%, #fff 48.5%, #ececec 100%); // TODO: update to tokens
$item-background: #ececec; // TODO: update to tokens
$breakpoints: tokens.$breakpoints;

$typography-border-radius: tokens.$radius-300;
Expand Down
108 changes: 29 additions & 79 deletions packages/web/src/scss/components/Skeleton/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ <h2 class="docs-Heading">Body</h2>
<h3 class="docs-Heading">Size {{size}}</h3>
<div style="width: 100%">

<div class="Skeleton Skeleton--text Skeleton--{{size}} mb-900" aria-busy="true" aria-live="polite">
<div class="Skeleton Skeleton--text Skeleton--{{size}} mb-900">
<div class="Skeleton__item" aria-hidden="true"></div>
<div class="Skeleton__item" aria-hidden="true"></div>
<div class="Skeleton__item" aria-hidden="true"></div>
</div>

<div class="Skeleton Skeleton--text Skeleton--{{size}}" aria-busy="true" aria-live="polite">
<div class="Skeleton Skeleton--text Skeleton--{{size}}">
<div class="Skeleton__item" aria-hidden="true"></div>
<div class="Skeleton__item" aria-hidden="true"></div>
</div>
Expand All @@ -48,7 +48,7 @@ <h2 class="docs-Heading">Heading</h2>
<h3 class="docs-Heading">Size {{size}}</h3>
<div style="width: 100%">

<div class="Skeleton Skeleton--heading Skeleton--{{size}}" aria-busy="true" aria-live="polite">
<div class="Skeleton Skeleton--heading Skeleton--{{size}}">
<div class="Skeleton__item" aria-hidden="true"></div>
<div class="Skeleton__item" aria-hidden="true"></div>
<div class="Skeleton__item" aria-hidden="true"></div>
Expand All @@ -64,58 +64,6 @@ <h3 class="docs-Heading">Size {{size}}</h3>
</div>
</section>


<section class="UNSTABLE_Section">
<div class="Container">
<div class="docs-Stack docs-Stack--stretch">
<h2 class="docs-Heading">Shape Image</h2>
<div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-3">

<section class="UNSTABLE_Section">
<div class="docs-Stack docs-Stack--start">
<h3 class="docs-Heading">Image Square</h3>
<div class="Skeleton Skeleton--shape" aria-busy="true" aria-live="polite">
<img
src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width="100"
height="100" alt="Loading" class="Skeleton__item"
style="--spirit-skeleton-shape-width: 100px;--spirit-skeleton-shape-height: 100px"
>
</div>
</div>
</section>

<section class="UNSTABLE_Section">
<div class="docs-Stack docs-Stack--start">
<h3 class="docs-Heading">Image Circle</h3>
<div class="Skeleton Skeleton--shape" aria-busy="true" aria-live="polite">
<img
src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width="100"
height="100" alt="Loading" class="Skeleton__item"
style="--spirit-skeleton-shape-width: 100px;--spirit-skeleton-shape-height: 100px;--spirit-skeleton-shape-radius: var(--spirit-radius-full)"
>
</div>
</div>
</section>

<section class="UNSTABLE_Section">
<div class="docs-Stack docs-Stack--start">
<h3 class="docs-Heading">Image Rectangular</h3>
<div class="Skeleton Skeleton--shape" aria-busy="true" aria-live="polite">
<img
src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width="100"
height="100" alt="Loading" class="Skeleton__item"
style="--spirit-skeleton-shape-width: 300px;--spirit-skeleton-shape-height: 100px; --spirit-skeleton-shape-radius: var(--spirit-radius-400)"
>
</div>
</div>
</section>

</div>
</div>
</div>
</section>


<section class="UNSTABLE_Section">
<div class="Container">
<div class="docs-Stack docs-Stack--stretch">
Expand All @@ -125,7 +73,7 @@ <h3 class="docs-Heading">Image Rectangular</h3>
<div class="docs-Stack docs-Stack--start">
<h3 class="docs-Heading">Shape Square</h3>

<div class="Skeleton Skeleton--shape" aria-busy="true" aria-live="polite">
<div class="Skeleton Skeleton--shape">
<div
class="Skeleton__item"
style="--spirit-skeleton-shape-width: 100px; --spirit-skeleton-shape-height: 100px"
Expand All @@ -138,7 +86,7 @@ <h3 class="docs-Heading">Shape Square</h3>
<div class="docs-Stack docs-Stack--start">
<h3 class="docs-Heading">Shape Circle</h3>

<div class="Skeleton Skeleton--shape" aria-busy="true" aria-live="polite">
<div class="Skeleton Skeleton--shape">
<div
class="Skeleton__item"
style="--spirit-skeleton-shape-width: 100px; --spirit-skeleton-shape-height: 100px; --spirit-skeleton-shape-radius: var(--spirit-radius-full)"
Expand All @@ -150,7 +98,7 @@ <h3 class="docs-Heading">Shape Circle</h3>
<section class="UNSTABLE_Section">
<div class="docs-Stack docs-Stack--start">
<h3 class="docs-Heading">Shape Rectangular</h3>
<div class="Skeleton Skeleton--shape" aria-busy="true" aria-live="polite">
<div class="Skeleton Skeleton--shape">
<div
class="Skeleton__item "
style="--spirit-skeleton-shape-width: 300px; --spirit-skeleton-shape-height: 100px; --spirit-skeleton-shape-radius: var(--spirit-radius-400)"
Expand All @@ -162,7 +110,7 @@ <h3 class="docs-Heading">Shape Rectangular</h3>
<section class="UNSTABLE_Section">
<div class="docs-Stack docs-Stack--start">
<h3 class="docs-Heading">Shape Rectangular responsive radius</h3>
<div class="Skeleton Skeleton--shape" aria-busy="true" aria-live="polite">
<div class="Skeleton Skeleton--shape">
<div
class="Skeleton__item"
style="
Expand All @@ -186,27 +134,29 @@ <h3 class="docs-Heading">Shape Rectangular responsive radius</h3>
<div class="Container">
<div class="docs-Stack docs-Stack--stretch">
<h2 class="docs-Heading">Combinations</h2>
<div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-2">
<div class="GridItem">
<div class="Grid">
<div class="GridItem">
<div class="Skeleton Skeleton--shape" aria-busy="true" aria-live="polite">
<div
class="Skeleton__item "
style="--spirit-skeleton-shape-width: 100px; --spirit-skeleton-shape-height: 100px; --spirit-skeleton-shape-radius: var(--spirit-radius-full)"
></div>
</div>
</div>
<div
class="GridItem"
style="--grid-item-column-start: 2; --grid-item-column-end: span 10;"
>
<div class="Skeleton Skeleton--heading Skeleton--small mb-900" aria-busy="true" aria-live="polite">
<div class="Skeleton__item" aria-hidden="true"></div>
<div aria-busy="true" aria-live="polite">
<div class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-2">
<div class="GridItem">
<div class="Grid">
<div class="GridItem">
<div class="Skeleton Skeleton--shape">
<div
class="Skeleton__item "
style="--spirit-skeleton-shape-width: 100px; --spirit-skeleton-shape-height: 100px; --spirit-skeleton-shape-radius: var(--spirit-radius-full)"
></div>
</div>
</div>
<div class="Skeleton Skeleton--text Skeleton--small" aria-busy="true" aria-live="polite">
<div class="Skeleton__item" aria-hidden="true"></div>
<div class="Skeleton__item" aria-hidden="true"></div>
<div
class="GridItem"
style="--grid-item-column-start: 2; --grid-item-column-end: span 10;"
>
<div class="Skeleton Skeleton--heading Skeleton--small mb-900">
<div class="Skeleton__item" aria-hidden="true"></div>
</div>
<div class="Skeleton Skeleton--text Skeleton--small">
<div class="Skeleton__item" aria-hidden="true"></div>
<div class="Skeleton__item" aria-hidden="true"></div>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 9c234ee

Please sign in to comment.