fix(common-css): add busy-indicator, title, text

packages/common-css/src/common-css.scss

@@ -14,3 +14,4 @@
 @import "./sap-position.scss";
 @import "./sap-tool-layout.scss";
 @import "./sap-busy-indicator.scss";
+@import "./sap-text.scss";

packages/common-css/src/sap-busy-indicator.scss

@@ -4,6 +4,77 @@
 $block: #{$sap-namespace}-busy-indicator;
 
 .#{$block} {
+  --Dot_Color: var(--sapContent_BusyColor);
+  --Dot_Size: 0.5rem;
+
+  &--contrast {
+    --Dot_Color: var(--sapContent_BusyColor);
+  }
+
+  &--m {
+    --Dot_Size: 1rem;
+  }
+
+  &--l {
+    --Dot_Size: 2rem;
+  }
+
+  @include sap-reset();
+
+  position: relative;
+  display: block;
+  font-size: 0;
+  color: var(--Dot_Color);
+  text-align: center;
+
+  &-extended {
+    $extendedSelector: &;
+
+    @include sap-reset();
+
+    @include sap-flex-center() {
+      gap: 1rem;
+      flex-direction: column;
+    }
+
+    &#{$extendedSelector}--message-toast {
+      width: 23.125rem;
+      max-width: 23.125rem;
+      box-shadow: var(--sapContent_Shadow2);
+      text-shadow: var(--sapContent_TextShadow);
+      background-color: var(--sapPageFooter_Background);
+    }
+
+    &__label {
+      @include sap-reset();
+
+      display: block;
+      color: var(--sapPageFooter_TextColor);
+      text-align: center;
+    }
+  }
+
+  &__circle {
+    @include sap-reset();
+
+    color: var(--Dot_Color);
+    position: relative;
+    width: var(--Dot_Size);
+    height: var(--Dot_Size);
+    display: inline-block;
+    border-radius: 50%;
+    background-color: currentColor;
+    animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
+
+    &:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 0.4s;
+    }
+  }
+
   &-dialog {
     @include sap-reset();
 
@@ -18,3 +89,15 @@ $block: #{$sap-namespace}-busy-indicator;
     }
   }
 }
+
+@keyframes grow {
+  0%,
+  50%,
+  100% {
+    transform: scale(0.5);
+  }
+
+  25% {
+    transform: scale(1);
+  }
+}

packages/common-css/src/sap-text.scss

@@ -0,0 +1,27 @@
+@import 'common-settings';
+@import 'common-mixins';
+
+$block: #{$sap-namespace}-text;
+
+.#{$block} {
+  @include sap-reset();
+
+  //   &::selection { //todo bring delta theming
+  //     color: var(--sapContent_ContrastTextColor);
+  //     background-color: var(--fdText_Selected_Background_Color);
+  //   }
+
+  &--max-lines {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  &--pre-wrap {
+    white-space: pre-wrap;
+  }
+
+  &--hyphenation {
+    hyphens: auto;
+  }
+}

packages/common-css/src/sap-title.scss

@@ -0,0 +1,45 @@
+@import 'common-settings';
+@import 'common-mixins';
+
+$block: #{$sap-namespace}-title;
+
+.#{$block} {
+  @include sap-reset();
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 1rem;
+  color: var(--sapTextColor);
+  font-family: var(--sapFontHeaderFamily);
+
+  &--h1 {
+    font-size: var(--sapFontHeader1Size);
+  }
+
+  &--h2 {
+    font-size: var(--sapFontHeader2Size);
+  }
+
+  &--h3 {
+    font-size: var(--sapFontHeader3Size);
+  }
+
+  &--h4 {
+    font-size: var(--sapFontHeader4Size);
+  }
+
+  &--h5 {
+    font-size: var(--sapFontHeader5Size);
+  }
+
+  &--h6 {
+    font-size: var(--sapFontHeader6Size);
+  }
+
+  &--wrap {
+    overflow: auto;
+    white-space: normal;
+    text-overflow: initial;
+  }
+}

packages/common-css/stories/busy-indicator/busy-indicator.stories.js

@@ -0,0 +1,83 @@
+import desktopExampleHtml from "./desktop.example.html?raw";
+import extendedBusyIndicatorInsideMessageToastExampleHtml from "./extended-busy-indicator-inside-message-toast.example.html?raw";
+import extendedBusyIndicatorExampleHtml from "./extended-busy-indicator.example.html?raw";
+import contrastModeExampleHtml from "./contrast-mode.example.html?raw";
+import standardExampleHtml from "./standard.example.html?raw";
+
+import '../../src/sap-busy-indicator.scss';
+import '../../../styles/src/message-toast.scss';
+import '../../../styles/src/dialog.scss';
+import '../../../styles/src/text.scss';
+import '../../../styles/src/bar.scss';
+import '../../../styles/src/button.scss';
+import '../../../styles/src/title.scss';
+export default {
+  title: 'Busy Indicator',
+  parameters: {
+    description: `The busy indicator component informs the user about an ongoing operation. Only one busy indicator should be shown at a time.
+
+## Sizes
+
+| **Size** |    **rem**    | **Modifier class** |
+| :------- | :-------------------------------- | -----------------: |
+| Default  |    0.5 rem                | none               |
+| M        |    1 rem                | \`--m\`   |
+| L        |    2 rem                | \`--l\`   |
+
+##Usage
+**Use the busy indicator if:**
+
+The ongoing operation only covers part of a screen that has multiple controls, and:
+
+- You need to display additional information, or
+- The user needs to be able to cancel the operation.
+
+
+**Do not use the busy indicator if:**
+
+- The operation takes less than one second.
+- You need to block the screen because the user is not supposed to start another operation. In this case, use the **Busy Dialog** component.
+        `,
+    tags: ['f3', 'a11y', 'theme']
+  }
+};
+export const Standard = () => standardExampleHtml;
+Standard.parameters = {
+  docs: {
+    description: {
+      story: 'The standard busy indicator animates a sequence of cascading dots expanding and shrinking in a loop. The component comes in three sizes detailed above. To display the busy indicator, use the `sap-busy-indicator` class. If you want to display a certain size, add the modifier class of the desired size i.e. `--m` to the element.'
+    }
+  }
+};
+export const ContrastMode = () => contrastModeExampleHtml;
+ContrastMode.parameters = {
+  docs: {
+   description: {
+      story: 'The busy indicator also comes in contrast mode and displays white dots against a dark background. To apply contrast mode, add `contrast` into the element i.e. `sap-busy-indicator--m contrast`.'
+    }
+  }
+};
+export const ExtendedBusyIndicator = () => extendedBusyIndicatorExampleHtml;
+ExtendedBusyIndicator.parameters = {
+  docs: {
+   description: {
+      story: 'If more information needs to be displayed with the loading animation, it is replaced by the Extended Busy Indicator `sap-busy-indicator-extended`. The additional information is wrapped in an element with `sap-busy-indicator-extended__label` class.'
+    }
+  }
+};
+export const ExtendedBusyIndicatorInsideMessageToast = () => extendedBusyIndicatorInsideMessageToastExampleHtml;
+ExtendedBusyIndicatorInsideMessageToast.parameters = {
+  docs: {
+   description: {
+      story: 'At the Page level the Busy Indicator should always be placed in a container. The simplest form of container will be centred on the page and inherit the color values from Message Toast.'
+    }
+  }
+};
+export const BusyDialog = () => desktopExampleHtml;
+BusyDialog.parameters = {
+  docs: {
+   description: {
+      story: 'The busy dialog informs the user about an ongoing operation. During the operation, the entire screen is blocked.'
+    }
+  }
+};

packages/common-css/stories/busy-indicator/contrast-mode.example.html

@@ -0,0 +1,7 @@
+<div style="display:flex;justify-content:center;flex-direction:column;align-items:center;background-color:cadetblue;height:250px">
+<div class="sap-busy-indicator sap-busy-indicator--l sap-busy-indicator--contrast" aria-hidden="false" aria-label="Loading">
+    <div class="sap-busy-indicator__circle"></div>
+    <div class="sap-busy-indicator__circle"></div>
+    <div class="sap-busy-indicator__circle"></div>
+</div>
+</div>

packages/common-css/stories/busy-indicator/desktop.example.html

@@ -1,8 +1,33 @@
-<div class="fd-busy-indicator-dialog">
-    <p >
-        ... now loading data from a far far away server from far far away.(needs separate styling)
-    </p>
-    <div class="fd-busy-indicator " aria-hidden="false" aria-label="Loading">
-        Busy Indicator Component
+<section class="fd-dialog-docs-static fd-dialog fd-dialog--active">
+    <div class="fd-dialog__content fd-dialog__content--s" role="dialog" aria-modal="true"
+         aria-labelledby="dialog-title-2">
+        <header class="fd-dialog__header fd-bar fd-bar--header">
+            <div class="fd-bar__left">
+                <div class="fd-bar__element">
+                    <h2 class="fd-title fd-title--h5" id="dialog-title-2">
+                        Loading Data
+                    </h2>
+                </div>
+            </div>
+        </header>
+        <div class="fd-dialog__body">
+            <div class="sap-busy-indicator-dialog">
+                <p class="sap-text">
+                    ... now loading data from a far far away server from far far away.
+                </p>
+                <div class="sap-busy-indicator sap-busy-indicator--l" aria-hidden="false" aria-label="Loading">
+                    <div class="sap-busy-indicator__circle"></div>
+                    <div class="sap-busy-indicator__circle"></div>
+                    <div class="sap-busy-indicator__circle"></div>
+                </div>
+            </div>
+        </div>
+        <footer class="fd-dialog__footer fd-bar fd-bar--footer">
+            <div class="fd-bar__right">
+                <div class="fd-bar__element">
+                    <button class="fd-dialog__decisive-button fd-button fd-button--transparent">Cancel</button>
+                </div>
+            </div>
+        </footer>
     </div>
-</div>
+</section>

packages/common-css/stories/busy-indicator/extended-busy-indicator-inside-message-toast.example.html

@@ -0,0 +1,9 @@
+
+<div class="fd-message-toast sap-busy-indicator-extended sap-busy-indicator-extended--message-toast">
+    <div class="sap-busy-indicator sap-busy-indicator--l" aria-hidden="false" aria-label="Loading">
+        <div class="sap-busy-indicator__circle"></div>
+        <div class="sap-busy-indicator__circle"></div>
+        <div class="sap-busy-indicator__circle"></div>
+    </div>
+    <div class="sap-busy-indicator-extended__label">loading data...</div>
+</div>

packages/common-css/stories/busy-indicator/extended-busy-indicator.example.html

@@ -0,0 +1,8 @@
+<div class="sap-busy-indicator-extended">
+    <div class="sap-busy-indicator sap-busy-indicator--l" aria-hidden="false" aria-label="Loading">
+        <div class="sap-busy-indicator__circle"></div>
+        <div class="sap-busy-indicator__circle"></div>
+        <div class="sap-busy-indicator__circle"></div>
+    </div>
+    <div class="sap-busy-indicator-extended__label">loading data...</div>
+</div>

packages/common-css/stories/busy-indicator/standard.example.html

@@ -0,0 +1,17 @@
+<div style="text-align: center">
+    <div class="sap-busy-indicator sap-busy-indicator--l" aria-hidden="false" aria-label="Loading">
+        <div class="sap-busy-indicator__circle"></div>
+        <div class="sap-busy-indicator__circle"></div>
+        <div class="sap-busy-indicator__circle"></div>
+    </div><br /><br />
+    <div class="sap-busy-indicator sap-busy-indicator--m" aria-hidden="false" aria-label="Loading">
+        <div class="sap-busy-indicator__circle"></div>
+        <div class="sap-busy-indicator__circle"></div>
+        <div class="sap-busy-indicator__circle"></div>
+    </div><br /><br />
+    <div class="sap-busy-indicator" aria-hidden="false" aria-label="Loading">
+        <div class="sap-busy-indicator__circle"></div>
+        <div class="sap-busy-indicator__circle"></div>
+        <div class="sap-busy-indicator__circle"></div>
+    </div>
+    </div>

packages/common-css/stories/text/default-example.example.html

@@ -0,0 +1,6 @@
+<p class="sap-text">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+    deserunt mollit anim id est laborum.</p>

packages/common-css/stories/text/hyphenation.example.html

@@ -0,0 +1,19 @@
+<div class="example-container">
+        <div class="fddocs-text">
+            <h3>Without hyphenation</h3>
+            <p class="sap-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+            ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+            eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+            deserunt mollit anim id est laborum.</p>
+        </div>
+
+        <div class="fddocs-text">
+            <h3>Hyphenation</h3>
+            <p class="sap-text sap-text--hyphenation">Lorem ipsum dolor sit amet, con&shy;sectetur adip&shy;iscing el&shy;it, sed do eiusmod tempor
+            incididunt ut labore et do&shy;lore magna aliqua. Ut enim ad mi&shy;nim veniam, quis nostrud exer&shy;citation ullamco laboris nisi ut
+            aliquip ex ea commodo conse&shy;quat. Duis aute irure dolor in repre&shy;henderit in vo&shy;luptate velit esse cillum dolore
+            eu fu&shy;giat nulla pari&shy;atur. Excepteur sint occaecat cupidatat non pro&shy;ident, sunt in culpa qui officia
+            deserunt mollit anim id est la&shy;bo&shy;rum.</p>
+        </div>
+    </div>