From 3bb1b46e71e84951541b5a4a5758d5dbd55f7c91 Mon Sep 17 00:00:00 2001 From: deno Date: Wed, 28 Jun 2023 09:35:35 -0400 Subject: [PATCH] feat(styles): add skeleton examples and styling [ci visual] (#4634) --- packages/styles/src/fundamental-styles.scss | 1 + packages/styles/src/skeleton.scss | 46 +++++++ .../Components/skeleton/circle.example.html | 17 +++ .../Components/skeleton/complex.example.html | 22 ++++ .../Components/skeleton/lines.example.html | 44 +++++++ .../Components/skeleton/skeleton.example.html | 24 ++++ .../Components/skeleton/skeleton.stories.js | 48 +++++++ .../tests/__snapshots__/styles.test.ts.snap | 121 ++++++++++++++++++ 8 files changed, 323 insertions(+) create mode 100644 packages/styles/src/skeleton.scss create mode 100644 packages/styles/stories/Components/skeleton/circle.example.html create mode 100644 packages/styles/stories/Components/skeleton/complex.example.html create mode 100644 packages/styles/stories/Components/skeleton/lines.example.html create mode 100644 packages/styles/stories/Components/skeleton/skeleton.example.html create mode 100644 packages/styles/stories/Components/skeleton/skeleton.stories.js diff --git a/packages/styles/src/fundamental-styles.scss b/packages/styles/src/fundamental-styles.scss index dd1b909636..edf590f3f0 100644 --- a/packages/styles/src/fundamental-styles.scss +++ b/packages/styles/src/fundamental-styles.scss @@ -80,6 +80,7 @@ @import "select"; @import "shellbar"; @import "side-nav"; +@import "skeleton"; @import "slider"; @import "status-indicator"; @import "step-input"; diff --git a/packages/styles/src/skeleton.scss b/packages/styles/src/skeleton.scss new file mode 100644 index 0000000000..09e95b027b --- /dev/null +++ b/packages/styles/src/skeleton.scss @@ -0,0 +1,46 @@ + +@import "./new-settings"; +@import "./mixins"; + +$block: #{$fd-namespace}-skeleton; + +.#{$block} { + @include fd-reset(); + + display: inline-block; + cursor: wait; + + &__canvas { + display: block; + fill: url(#skeletonGradient); + + --fdSkeletonGradientMiddleColor: #999; + } + + &__outer { + stop-color: var(--sapContent_Placeholderloading_Background); + } + + &__middle { + stop-color: var(--fdSkeletonGradientMiddleColor); + animation: fd-skeleton-shimmer 2s linear infinite; + } +} + +@keyframes fd-skeleton-shimmer { + 0% { + stop-color: var(--sapContent_Placeholderloading_Background); + } + + 35% { + stop-color: var(--fdSkeletonGradientMiddleColor); + } + + 65% { + stop-color: var(--fdSkeletonGradientMiddleColor); + } + + 100% { + stop-color: var(--sapContent_Placeholderloading_Background); + } +} diff --git a/packages/styles/stories/Components/skeleton/circle.example.html b/packages/styles/stories/Components/skeleton/circle.example.html new file mode 100644 index 0000000000..df6884bf32 --- /dev/null +++ b/packages/styles/stories/Components/skeleton/circle.example.html @@ -0,0 +1,17 @@ +
+ + + + + + + + + + + + + + + +
diff --git a/packages/styles/stories/Components/skeleton/complex.example.html b/packages/styles/stories/Components/skeleton/complex.example.html new file mode 100644 index 0000000000..cbe6406a11 --- /dev/null +++ b/packages/styles/stories/Components/skeleton/complex.example.html @@ -0,0 +1,22 @@ +
+ + + + + + + + + + + + + + + + + + + + +
diff --git a/packages/styles/stories/Components/skeleton/lines.example.html b/packages/styles/stories/Components/skeleton/lines.example.html new file mode 100644 index 0000000000..f46e14bcaf --- /dev/null +++ b/packages/styles/stories/Components/skeleton/lines.example.html @@ -0,0 +1,44 @@ +

3 lines

+
+ + + + + + + + + + + + + + + + + + + +
+ +

2 lines

+
+ + + + + + + + + + + + + + + + + + +
diff --git a/packages/styles/stories/Components/skeleton/skeleton.example.html b/packages/styles/stories/Components/skeleton/skeleton.example.html new file mode 100644 index 0000000000..3075b5be30 --- /dev/null +++ b/packages/styles/stories/Components/skeleton/skeleton.example.html @@ -0,0 +1,24 @@ +
+ + + + + + + + + + + + + + + + + + + + + + +
diff --git a/packages/styles/stories/Components/skeleton/skeleton.stories.js b/packages/styles/stories/Components/skeleton/skeleton.stories.js new file mode 100644 index 0000000000..5c6ec9d0dd --- /dev/null +++ b/packages/styles/stories/Components/skeleton/skeleton.stories.js @@ -0,0 +1,48 @@ +import skeletonExampleHtml from "./skeleton.example.html?raw"; +import circleExampleHtml from "./circle.example.html?raw"; +import linesExampleHtml from "./lines.example.html?raw"; +import complexExampleHtml from "./complex.example.html?raw"; +import '../../../src/skeleton.scss'; +export default { + title: 'Components/Skeleton', + parameters: { + description: `Placeholder loading is a type of busy indicator that provides the user with a skeleton page as a placeholder while the content is still loading. The aim is to inform the user of the ongoing loading progress. + \r\nA skeleton page shows the frame of the final content without the content being fully loaded. Visually, skeleton pages are grey boxes with animations to indicate loading activity. + \r\nSkeleton pages are used to create an impression of speed and reliability when an app encounters performance barriers. They provide a generic preview of the layout, which makes the app seem to load faster. This improves the overall user experience. + \r\nThe Placeholder Skeleton is made up of Placeholder Shapes that aim to give an idea of how the actual content will look like. The placeholders can take various forms, depending on the type of content that is being loaded.`, + tags: ['f3'] + } +}; +export const Skeleton = () => skeletonExampleHtml; +Skeleton.storyName = 'Rectangle'; +Skeleton.parameters = { + docs: { + description: { + story: 'An example of a rectangular placeholder' + } + } +}; +export const Circle = () => circleExampleHtml; +Circle.parameters = { + docs: { + description: { + story: 'An example of a circular placeholder' + } + } +}; +export const Lines = () => linesExampleHtml; +Lines.parameters = { + docs: { + description: { + story: 'Examples of lines placeholders (3 and 2 lines)' + } + } +}; +export const ComplexExamples = () => complexExampleHtml; +ComplexExamples.parameters = { + docs: { + description: { + story: 'The library allows setting customly build examples like this one' + } + } +}; diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap index 0969b5ce57..e2a62d0a42 100644 --- a/packages/styles/tests/__snapshots__/styles.test.ts.snap +++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap @@ -28392,6 +28392,127 @@ exports[`Check stories > Components/Shellbar > Story WithoutCenter > Should matc " `; +exports[`Check stories > Components/Skeleton > Story Circle > Should match snapshot 1`] = ` +"
+ + + + + + + + + + + + + + + +
" +`; + +exports[`Check stories > Components/Skeleton > Story ComplexExamples > Should match snapshot 1`] = ` +"
+ + + + + + + + + + + + + + + + + + + + +
" +`; + +exports[`Check stories > Components/Skeleton > Story Lines > Should match snapshot 1`] = ` +"

3 lines

+
+ + + + + + + + + + + + + + + + + + + +
+ +

2 lines

+
+ + + + + + + + + + + + + + + + + + +
+ +" +`; + +exports[`Check stories > Components/Skeleton > Story Skeleton > Should match snapshot 1`] = ` +"
+ + + + + + + + + + + + + + + + + + + + + + +
" +`; + exports[`Check stories > Components/Slider > Story MobileMode > Should match snapshot 1`] = ` "