From b5f37cefed9c7af382054d188d6a97a3217e4ed2 Mon Sep 17 00:00:00 2001 From: droshev Date: Fri, 23 Jun 2023 15:40:38 -0400 Subject: [PATCH] feat(styles): add skeleton examples and styling [ci visual] --- 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 | 1931 ++++++++++++++--- 8 files changed, 1834 insertions(+), 299 deletions(-) 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..9b207fc70c --- /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; + } + + &__begin-end { + 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..e684aec4dc --- /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..915668fcf2 --- /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..5c2f7bc1b0 --- /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..a6aab99cfb --- /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 2e9bae7a08..2d2eca1675 100644 --- a/packages/styles/tests/__snapshots__/styles.test.ts.snap +++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap @@ -4871,19 +4871,15 @@ exports[`Check stories > Components/Card > Story TableCard > Should match snapsh " `; -exports[`Check stories > Components/Carousel > Story CarouselBottom > Should match snapshot 1`] = ` -"
-

Navigation buttons in page indicator

+exports[`Check stories > Components/Carousel > Story CarouselBackgrounds > Should match snapshot 1`] = ` +"
+

Transparent Carousel Content

-
-
+
+
- \\"first +
@@ -4892,119 +4888,387 @@ exports[`Check stories > Components/Carousel > Story CarouselBottom > Should mat
    +
  1. +
  2. +
  3. +
  5. -
  6. -
  7. -
  8. + data-slide-to=\\"5\\" + aria-label=\\"Displaying item 5 of 7\\" + class=\\"fd-carousel__page-indicator fd-carousel__page-indicator--active\\" + > +
  9. +
  10. +
+ + +
+
+ +

Solid Carousel Content

+
+
+
+
+ +
+
+
+ +
+ + +
    +
  1. +
  2. +
  3. +
  5. + class=\\"fd-carousel__page-indicator fd-carousel__page-indicator--active\\" + > +
  6. +
  7. +
+ + +
+
+ +
Displaying item 1 of 4
+ +

Transparent Page Indicator Container

+ +
+
+ + +
+
+ \\"first +
+
+ + +
+ +
+
    +
  1. +
  2. +
  3. +
  4. +
  5. +
  6. +
  7. +
+
+
+ +

Translucent Page Indicator Container

+
+
+ + +
+
+ \\"first +
+
+ + +
+ +
+
    +
  1. +
  2. +
  3. +
  4. +
  5. +
  6. +
  7. +
+
+
+ +

Page Indicator Container with no border

+ +
+
+
+
+ +
+
+
+ +
+ + +
    +
  1. +
  2. +
  3. +
  5. + data-slide-to=\\"5\\" + aria-label=\\"Displaying item 5 of 7\\" + class=\\"fd-carousel__page-indicator fd-carousel__page-indicator--active\\" + > +
  6. +
  7. +
+ + +
+
+ +
Displaying item 1 of 4
+
+" +`; + +exports[`Check stories > Components/Carousel > Story CarouselBottom > Should match snapshot 1`] = ` +"
+

Navigation buttons in page indicator (focussed)

+ +
+
+
+
+ \\"first +
+
+
+ +
+ + +
    +
  1. +
  2. +
  3. +
  5. + data-slide-to=\\"5\\" + aria-label=\\"Displaying item 5 of 7\\" + class=\\"fd-carousel__page-indicator fd-carousel__page-indicator--active\\" + > +
  6. +
-
- Displaying item 1 of 4 +

Navigation buttons in page indicator (vertical)

+
+
+
+
+ \\"first +
+
+
+ +
+ + +
    +
  1. +
  2. +
  3. +
  4. +
  5. +
  6. +
  7. +
+ + +
+
Displaying item 1 of 4
+

Content navigation buttons

-
+
- \\"first + \\"first
    -
  1. -
  2. -
  3. -
  4. -
  5. -
  6. -
  7. +
  8. +
  9. +
  10. +
  11. +
  12. +
  13. +
-
- Displaying item 1 of 4 +

Content navigation buttons (vertical)

+
+
+ + +
+
+ \\"first +
+
+ + +
+ +
+
    +
  1. +
  2. +
  3. +
  4. +
  5. +
  6. +
  7. +
+
+
Displaying item 1 of 4
+

Numeric page indicator

-
+
- \\"first + \\"first
@@ -5013,7 +5277,8 @@ exports[`Check stories > Components/Carousel > Story CarouselBottom > Should mat @@ -5024,23 +5289,18 @@ exports[`Check stories > Components/Carousel > Story CarouselBottom > Should mat
-
- Displaying item 1 of 4 -
+
Displaying item 1 of 4

No page indicator

-
+
-
- Displaying item 1 of 4 -
+
Displaying item 1 of 4
" `; @@ -5874,42 +6133,54 @@ exports[`Check stories > Components/Dialog > Story Selectable > Should match sna
  • - +
    List item 1
  • - +
    List item 2
  • - +
    List item 3
  • - +
    List item 4
  • - +
    List item 5
  • - +
    List item 6
    • @@ -7214,6 +7485,7 @@ exports[`Check stories > Components/Forms/Checkbox > Story Default > Should matc