From 4fc4534717acf802bf8c2ab3879e83e544c4f979 Mon Sep 17 00:00:00 2001
From: droshev <mladen.droshev@sap.com>
Date: Tue, 7 Nov 2023 09:44:58 -0500
Subject: [PATCH] fix(common-css): add busy-indicator, title, text

---
 packages/common-css/src/common-css.scss       |  1 +
 .../common-css/src/sap-busy-indicator.scss    | 83 +++++++++++++++++++
 packages/common-css/src/sap-text.scss         | 27 ++++++
 packages/common-css/src/sap-title.scss        | 45 ++++++++++
 .../busy-indicator/busy-indicator.stories.js  | 83 +++++++++++++++++++
 .../busy-indicator/contrast-mode.example.html |  7 ++
 .../busy-indicator/desktop.example.html       | 39 +++++++--
 ...ndicator-inside-message-toast.example.html |  9 ++
 .../extended-busy-indicator.example.html      |  8 ++
 .../busy-indicator/standard.example.html      | 17 ++++
 .../busy-indicator/tool-layout.stories.js     | 21 -----
 .../stories/text/default-example.example.html |  6 ++
 .../stories/text/hyphenation.example.html     | 19 +++++
 .../stories/text/max-lines.example.html       | 53 ++++++++++++
 .../common-css/stories/text/text.stories.js   | 71 ++++++++++++++++
 .../stories/text/whitespace.example.html      | 17 ++++
 .../stories/title/elision.example.html        |  8 ++
 .../stories/title/levels.example.html         |  6 ++
 .../common-css/stories/title/title.stories.js | 48 +++++++++++
 .../stories/title/visual-level.example.html   |  6 ++
 .../stories/title/wrapping.example.html       |  8 ++
 21 files changed, 554 insertions(+), 28 deletions(-)
 create mode 100644 packages/common-css/src/sap-text.scss
 create mode 100644 packages/common-css/src/sap-title.scss
 create mode 100644 packages/common-css/stories/busy-indicator/busy-indicator.stories.js
 create mode 100644 packages/common-css/stories/busy-indicator/contrast-mode.example.html
 create mode 100644 packages/common-css/stories/busy-indicator/extended-busy-indicator-inside-message-toast.example.html
 create mode 100644 packages/common-css/stories/busy-indicator/extended-busy-indicator.example.html
 create mode 100644 packages/common-css/stories/busy-indicator/standard.example.html
 delete mode 100644 packages/common-css/stories/busy-indicator/tool-layout.stories.js
 create mode 100644 packages/common-css/stories/text/default-example.example.html
 create mode 100644 packages/common-css/stories/text/hyphenation.example.html
 create mode 100644 packages/common-css/stories/text/max-lines.example.html
 create mode 100644 packages/common-css/stories/text/text.stories.js
 create mode 100644 packages/common-css/stories/text/whitespace.example.html
 create mode 100644 packages/common-css/stories/title/elision.example.html
 create mode 100644 packages/common-css/stories/title/levels.example.html
 create mode 100644 packages/common-css/stories/title/title.stories.js
 create mode 100644 packages/common-css/stories/title/visual-level.example.html
 create mode 100644 packages/common-css/stories/title/wrapping.example.html

diff --git a/packages/common-css/src/common-css.scss b/packages/common-css/src/common-css.scss
index c4915a7106..42419efcc5 100644
--- a/packages/common-css/src/common-css.scss
+++ b/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";
diff --git a/packages/common-css/src/sap-busy-indicator.scss b/packages/common-css/src/sap-busy-indicator.scss
index 808e2fff80..8f2655cab9 100644
--- a/packages/common-css/src/sap-busy-indicator.scss
+++ b/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);
+  }
+}
diff --git a/packages/common-css/src/sap-text.scss b/packages/common-css/src/sap-text.scss
new file mode 100644
index 0000000000..98f0ab1c99
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/packages/common-css/src/sap-title.scss b/packages/common-css/src/sap-title.scss
new file mode 100644
index 0000000000..e225822a3f
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/packages/common-css/stories/busy-indicator/busy-indicator.stories.js b/packages/common-css/stories/busy-indicator/busy-indicator.stories.js
new file mode 100644
index 0000000000..0c3bf9d405
--- /dev/null
+++ b/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** | &nbsp;&nbsp; **rem** &nbsp;&nbsp; | **Modifier class** |
+| :------- | :-------------------------------- | -----------------: |
+| Default  | &nbsp;&nbsp; 0.5 rem                | none               |
+| M        | &nbsp;&nbsp; 1 rem                | \`--m\`   |
+| L        | &nbsp;&nbsp; 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.'
+    }
+  }
+};
\ No newline at end of file
diff --git a/packages/common-css/stories/busy-indicator/contrast-mode.example.html b/packages/common-css/stories/busy-indicator/contrast-mode.example.html
new file mode 100644
index 0000000000..7a8fc4e092
--- /dev/null
+++ b/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>
diff --git a/packages/common-css/stories/busy-indicator/desktop.example.html b/packages/common-css/stories/busy-indicator/desktop.example.html
index 1a137a50fe..62ad9d342b 100644
--- a/packages/common-css/stories/busy-indicator/desktop.example.html
+++ b/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>
\ No newline at end of file
+</section>
diff --git a/packages/common-css/stories/busy-indicator/extended-busy-indicator-inside-message-toast.example.html b/packages/common-css/stories/busy-indicator/extended-busy-indicator-inside-message-toast.example.html
new file mode 100644
index 0000000000..1543e2bba4
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/packages/common-css/stories/busy-indicator/extended-busy-indicator.example.html b/packages/common-css/stories/busy-indicator/extended-busy-indicator.example.html
new file mode 100644
index 0000000000..e502346c8e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/packages/common-css/stories/busy-indicator/standard.example.html b/packages/common-css/stories/busy-indicator/standard.example.html
new file mode 100644
index 0000000000..70e34895d1
--- /dev/null
+++ b/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>
diff --git a/packages/common-css/stories/busy-indicator/tool-layout.stories.js b/packages/common-css/stories/busy-indicator/tool-layout.stories.js
deleted file mode 100644
index 8ea401c803..0000000000
--- a/packages/common-css/stories/busy-indicator/tool-layout.stories.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import desktopExampleHtml from './desktop.example.html?raw';
-
-import '../../src/sap-busy-indicator.scss';
-
-export default {
-    title: 'Busy Indicator in a Dialog',
-    parameters: {
-        description: `
-        test
-`,
-        tags: ['f3', 'development']
-    }
-};
-export const Desktop = () => desktopExampleHtml;
-Desktop.parameters = {
-    docs: {
-      description: {
-        story: ``
-      }
-    }
-  };
diff --git a/packages/common-css/stories/text/default-example.example.html b/packages/common-css/stories/text/default-example.example.html
new file mode 100644
index 0000000000..e2cf7280f6
--- /dev/null
+++ b/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>
diff --git a/packages/common-css/stories/text/hyphenation.example.html b/packages/common-css/stories/text/hyphenation.example.html
new file mode 100644
index 0000000000..4c893fc897
--- /dev/null
+++ b/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>
diff --git a/packages/common-css/stories/text/max-lines.example.html b/packages/common-css/stories/text/max-lines.example.html
new file mode 100644
index 0000000000..4b7bc4cdd6
--- /dev/null
+++ b/packages/common-css/stories/text/max-lines.example.html
@@ -0,0 +1,53 @@
+
+    <h3>No max lines rule</h3>
+    <p class="sap-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+    eiusmod tempor incididunt ut labore et dolore magna aliqua. Malesuada bibendum arcu vitae elementum. Ut etiam sit
+    amet nisl. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Tellus in metus vulputate eu
+    scelerisque felis imperdiet proin fermentum. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra
+    accumsan. Mauris vitae ultricies leo integer malesuada nunc vel risus. Nisi est sit amet facilisis. Eu turpis
+    egestas pretium aenean. Nunc id cursus metus aliquam eleifend. Placerat in egestas erat imperdiet. Etiam dignissim
+    diam quis enim lobortis scelerisque. A erat nam at lectus. Amet nisl purus in mollis nunc sed id. Purus semper eget
+    duis at tellus at urna.
+    Aliquet eget sit amet tellus cras adipiscing enim. Risus ultricies tristique nulla aliquet enim tortor. Varius quam
+    quisque id diam vel quam elementum pulvinar. Eget aliquet nibh praesent tristique magna. Id interdum velit laoreet
+    id donec ultrices tincidunt arcu. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla. Montes nascetur
+    ridiculus mus mauris vitae ultricies. In nisl nisi scelerisque eu. Suspendisse interdum consectetur libero id
+    faucibus. Ut lectus arcu bibendum at varius. Placerat vestibulum lectus mauris ultrices eros in cursus turpis massa.
+    Dolor magna eget est lorem ipsum dolor sit. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh.
+    Augue neque gravida in fermentum et. Proin fermentum leo vel orci porta non pulvinar.</p>
+
+    <h3>2 max lines</h3>
+    <p class="sap-text sap-text--max-lines" style="-webkit-line-clamp: 2;">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+    eiusmod tempor incididunt ut labore et dolore magna aliqua. Malesuada bibendum arcu vitae elementum. Ut etiam sit
+    amet nisl. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Tellus in metus vulputate eu
+    scelerisque felis imperdiet proin fermentum. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra
+    accumsan. Mauris vitae ultricies leo integer malesuada nunc vel risus. Nisi est sit amet facilisis. Eu turpis
+    egestas pretium aenean. Nunc id cursus metus aliquam eleifend. Placerat in egestas erat imperdiet. Etiam dignissim
+    diam quis enim lobortis scelerisque. A erat nam at lectus. Amet nisl purus in mollis nunc sed id. Purus semper eget
+    duis at tellus at urna.
+    Aliquet eget sit amet tellus cras adipiscing enim. Risus ultricies tristique nulla aliquet enim tortor. Varius quam
+    quisque id diam vel quam elementum pulvinar. Eget aliquet nibh praesent tristique magna. Id interdum velit laoreet
+    id donec ultrices tincidunt arcu. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla. Montes nascetur
+    ridiculus mus mauris vitae ultricies. In nisl nisi scelerisque eu. Suspendisse interdum consectetur libero id
+    faucibus. Ut lectus arcu bibendum at varius. Placerat vestibulum lectus mauris ultrices eros in cursus turpis massa.
+    Dolor magna eget est lorem ipsum dolor sit. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh.
+    Augue neque gravida in fermentum et. Proin fermentum leo vel orci porta non pulvinar.</p>
+
+    <h3>3 max lines</h3>
+    <p class="sap-text sap-text--max-lines" style="-webkit-line-clamp: 3;">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+    eiusmod tempor incididunt ut labore et dolore magna aliqua. Malesuada bibendum arcu vitae elementum. Ut etiam sit
+    amet nisl. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Tellus in metus vulputate eu
+    scelerisque felis imperdiet proin fermentum. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra
+    accumsan. Mauris vitae ultricies leo integer malesuada nunc vel risus. Nisi est sit amet facilisis. Eu turpis
+    egestas pretium aenean. Nunc id cursus metus aliquam eleifend. Placerat in egestas erat imperdiet. Etiam dignissim
+    diam quis enim lobortis scelerisque. A erat nam at lectus. Amet nisl purus in mollis nunc sed id. Purus semper eget
+    duis at tellus at urna.
+    Aliquet eget sit amet tellus cras adipiscing enim. Risus ultricies tristique nulla aliquet enim tortor. Varius quam
+    quisque id diam vel quam elementum pulvinar. Eget aliquet nibh praesent tristique magna. Id interdum velit laoreet
+    id donec ultrices tincidunt arcu. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla. Montes nascetur
+    ridiculus mus mauris vitae ultricies. In nisl nisi scelerisque eu. Suspendisse interdum consectetur libero id
+    faucibus. Ut lectus arcu bibendum at varius. Placerat vestibulum lectus mauris ultrices eros in cursus turpis massa.
+    Dolor magna eget est lorem ipsum dolor sit. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh.
+    Augue neque gravida in fermentum et. Proin fermentum leo vel orci porta non pulvinar.</p>
diff --git a/packages/common-css/stories/text/text.stories.js b/packages/common-css/stories/text/text.stories.js
new file mode 100644
index 0000000000..3689186c13
--- /dev/null
+++ b/packages/common-css/stories/text/text.stories.js
@@ -0,0 +1,71 @@
+import hyphenationExampleHtml from "./hyphenation.example.html?raw";
+import maxLinesExampleHtml from "./max-lines.example.html?raw";
+import whitespaceExampleHtml from "./whitespace.example.html?raw";
+import defaultExampleExampleHtml from "./default-example.example.html?raw";
+import '../../src/sap-text.scss';
+
+export default {
+  title: 'Text',
+  parameters: {
+    description: `The text component displays text inside a form, table, or any other content area.
+        It is generally used throughout the entire application and is responsive to all screen sizes.`,
+    tags: ['f3', 'a11y', 'theme']
+  }
+};
+export const DefaultExample = () => defaultExampleExampleHtml;
+DefaultExample.storyName = 'Default';
+DefaultExample.parameters = {
+  docs: {
+    description: {
+      story: `The default text component can display lines of text that wrap to the next line
+        once they reach the end of the content container width.`
+    }
+  }
+};
+export const Whitespace = () => whitespaceExampleHtml;
+Whitespace.parameters = {
+  docs: {
+    description: {
+      story: `The text component has a property that allows browsers to render specified indents and
+        whitespace. To display indents and/or whitespace, add a
+        \`fd-text--pre-wrap\` modifier class to the main element.`
+    }
+  }
+};
+export const MaxLines = () => maxLinesExampleHtml;
+MaxLines.storyName = 'Max lines';
+MaxLines.parameters = {
+  docs: {
+    description: {
+      story: `The text component can be displayed with a maximum number of lines.
+When the maximum is reached, the text truncates and displays an ellipsis. To display text with a maximum line count,
+add the \`fd-text--max-lines\` modifier class and an inline style rule with the number of
+lines to the main element. For example, add \`style="-webkit-line-clamp: 3;"\` to display
+three lines of text.
+
+**Note**: The property \`-webkit-line-clamp\` doesn't work in IE11 and should be changed
+to \`height\`. For example, \`style="height: 200px;"\`.
+`
+    }
+  }
+};
+export const Hyphenation = () => hyphenationExampleHtml;
+Hyphenation.parameters = {
+  docs: {
+    description: {
+      story: `The text component can display words that are broken at appropriate hyphenation
+points in a text block. To display hyphens, add the \`fd-text--hyphenation\` to the main element.
+
+**It is also possible to suggest line break opportunities with two Unicode characters that manually specify
+potential line breakpoints:**
+
+- Hyphen: The "hard" hyphen character indicates a visible line break opportunity.
+Even if the line is not actually broken at that point, the hyphen is still displayed.
+
+- Shy: An invisible, "soft" hyphen. Although this character is not visible, it marks a place
+where the browser should break the word if hyphenation is necessary.
+
+In HTML, add the \`&shy;\` Unicode to insert a soft hyphen.`
+    }
+  }
+};
\ No newline at end of file
diff --git a/packages/common-css/stories/text/whitespace.example.html b/packages/common-css/stories/text/whitespace.example.html
new file mode 100644
index 0000000000..b19d9147d8
--- /dev/null
+++ b/packages/common-css/stories/text/whitespace.example.html
@@ -0,0 +1,17 @@
+
+    <h3>No indents or whitespace</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>
+
+    <h3>Wrapped text with indents and whitespace</h3>
+    <p class="sap-text sap-text--pre-wrap">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntut 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>
diff --git a/packages/common-css/stories/title/elision.example.html b/packages/common-css/stories/title/elision.example.html
new file mode 100644
index 0000000000..4734557c86
--- /dev/null
+++ b/packages/common-css/stories/title/elision.example.html
@@ -0,0 +1,8 @@
+<div style="width: 300px">
+    <h1 class="sap-title sap-title--h1">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
+    <h2 class="sap-title sap-title--h2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
+    <h3 class="sap-title sap-title--h3">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
+    <h4 class="sap-title sap-title--h4">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
+    <h5 class="sap-title sap-title--h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
+    <h6 class="sap-title sap-title--h6">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h6>
+</div>
diff --git a/packages/common-css/stories/title/levels.example.html b/packages/common-css/stories/title/levels.example.html
new file mode 100644
index 0000000000..4396c7fde8
--- /dev/null
+++ b/packages/common-css/stories/title/levels.example.html
@@ -0,0 +1,6 @@
+<h1 class="sap-title sap-title--h1">Title Level 1</h1>
+<h2 class="sap-title sap-title--h2">Title Level 2</h2>
+<h3 class="sap-title sap-title--h3">Title Level 3</h3>
+<h4 class="sap-title sap-title--h4">Title Level 4</h4>
+<h5 class="sap-title sap-title--h5">Title Level 5</h5>
+<h6 class="sap-title sap-title--h6">Title Level 6</h6>
diff --git a/packages/common-css/stories/title/title.stories.js b/packages/common-css/stories/title/title.stories.js
new file mode 100644
index 0000000000..d8abec62da
--- /dev/null
+++ b/packages/common-css/stories/title/title.stories.js
@@ -0,0 +1,48 @@
+import wrappingExampleHtml from "./wrapping.example.html?raw";
+import elisionExampleHtml from "./elision.example.html?raw";
+import visualLevelExampleHtml from "./visual-level.example.html?raw";
+import levelsExampleHtml from "./levels.example.html?raw";
+import '../../src/sap-title.scss';
+export default {
+  title: 'Title',
+  parameters: {
+    description: `
+A title component whose semantic level and visual appearance can be set separately, providing flexibility in design while adhering to accessibility best practices.`,
+    tags: ['f3']
+  }
+};
+export const Levels = () => levelsExampleHtml;
+Levels.storyName = 'Semantic Level';
+Levels.parameters = {
+  docs: {
+    description: {
+      story: 'There are 6 semantic levels of a heading element. There should only be one H1 on a page, and headings should only appear in ascending order without skipping a level; i.e. even if there are only 3 levels on a page, the order must be H1-H2-H3, and no other levels used.'
+    }
+  }
+};
+export const VisualLevel = () => visualLevelExampleHtml;
+VisualLevel.parameters = {
+  docs: {
+    description: {
+      story: 'If a design requires it, the visual level can be set to something different than the semantic level. This allows the sequential order to be maintained while providing flexibility in appearance.'
+    }
+  }
+};
+export const Elision = () => elisionExampleHtml;
+Elision.storyName = 'Text Elision';
+Elision.parameters = {
+  docs: {
+    description: {
+      story: 'By default the Title text overflow will be elided when longer than its container.'
+    }
+  }
+};
+export const Wrapping = () => wrappingExampleHtml;
+Wrapping.storyName = 'Text Wrapping';
+Wrapping.parameters = {
+  docs: {
+    description: {
+      story: 'Add the `--wrap` modifier to cause the overflow text to wrap instead.'
+    }
+  }
+};
\ No newline at end of file
diff --git a/packages/common-css/stories/title/visual-level.example.html b/packages/common-css/stories/title/visual-level.example.html
new file mode 100644
index 0000000000..630313a290
--- /dev/null
+++ b/packages/common-css/stories/title/visual-level.example.html
@@ -0,0 +1,6 @@
+<h1 class="sap-title sap-title--h6">Title Level 1</h1>
+<h2 class="sap-title sap-title--h5">Title Level 2</h2>
+<h3 class="sap-title sap-title--h4">Title Level 3</h3>
+<h4 class="sap-title sap-title--h3">Title Level 4</h4>
+<h5 class="sap-title sap-title--h2">Title Level 5</h5>
+<h6 class="sap-title sap-title--h1">Title Level 6</h6>
diff --git a/packages/common-css/stories/title/wrapping.example.html b/packages/common-css/stories/title/wrapping.example.html
new file mode 100644
index 0000000000..6bf157f918
--- /dev/null
+++ b/packages/common-css/stories/title/wrapping.example.html
@@ -0,0 +1,8 @@
+<div style="width: 300px">
+    <h1 class="sap-title sap-title--h1 sap-title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
+    <h2 class="sap-title sap-title--h2 sap-title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
+    <h3 class="sap-title sap-title--h3 sap-title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
+    <h4 class="sap-title sap-title--h4 sap-title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
+    <h5 class="sap-title sap-title--h5 sap-title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
+    <h6 class="sap-title sap-title--h6 sap-title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h6>
+</div>