From 9150f1ce897214effd2dbe2b0edebccf2ad0717e 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 | 48 + .../Components/skeleton/circle.example.html | 17 + .../Components/skeleton/complex.example.html | 22 + .../Components/skeleton/lines.example.html | 45 + .../Components/skeleton/skeleton.example.html | 24 + .../Components/skeleton/skeleton.stories.js | 48 + .../tests/__snapshots__/styles.test.ts.snap | 1931 ++++++++++++++--- 8 files changed, 1837 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..795143606d 100644 --- a/packages/styles/src/fundamental-styles.scss +++ b/packages/styles/src/fundamental-styles.scss @@ -108,3 +108,4 @@ // BTP Specific components/overwrites @import "./btp/avatar.scss"; +@import "skeleton"; diff --git a/packages/styles/src/skeleton.scss b/packages/styles/src/skeleton.scss new file mode 100644 index 0000000000..19979756ef --- /dev/null +++ b/packages/styles/src/skeleton.scss @@ -0,0 +1,48 @@ + +@import "./new-settings"; +@import "./mixins"; + +$block: #{$fd-namespace}-skeleton; + +.#{$block} { + @include fd-reset(); + + display: inline-block; + cursor: wait; + + &__canvas { + display: block; + fill: var(--sapContent_Placeholderloading_Background); + } + + &__middle { + stop-color: var(--fdSkeletonGradientMiddleColor); + animation: fd-skeleton-shimmer 2s linear infinite; + } + + &--animated { + .#{$block}__canvas { + --fdSkeletonGradientMiddleColor: #999; + + fill: url(#skeletonGradient); + } + } +} + +@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..550e764bf8 --- /dev/null +++ b/packages/styles/stories/Components/skeleton/circle.example.html @@ -0,0 +1,17 @@ +
+ + + + + + + + + + + + + + + +
\ No newline at end of file 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..dcf5ecf008 --- /dev/null +++ b/packages/styles/stories/Components/skeleton/complex.example.html @@ -0,0 +1,22 @@ +
+ + + + + + + + + + + + + + + + + + + + +
\ No newline at end of file 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..877f237919 --- /dev/null +++ b/packages/styles/stories/Components/skeleton/lines.example.html @@ -0,0 +1,45 @@ +

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..2e993eb4dd --- /dev/null +++ b/packages/styles/stories/Components/skeleton/skeleton.example.html @@ -0,0 +1,24 @@ +
+ + + + + + + + + + + + + + + + + + + + + + +
\ No newline at end of file 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