fix(common-css): add label, heading, text to common css [ci visual]

SAP · Dec 4, 2023 · cf25ece · cf25ece
1 parent e663163
commit cf25ece
Show file tree

Hide file tree

Showing 10 changed files with 203 additions and 31 deletions.
diff --git a/packages/common-css/src/_common-mixins.scss b/packages/common-css/src/_common-mixins.scss
@@ -1023,3 +1023,26 @@
 
   background-color: var($bgColorVar);
 }
+
+@mixin sap-text($modifier: none) {
+  @include sap-reset();
+
+  &::selection {
+    color: var(--sapContent_ContrastTextColor);
+    background-color: var(--sapSelectedColor);
+  }
+
+  @if $modifier == 'max-lines' {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  @if $modifier == 'pre-wrap' {
+    white-space: pre-wrap;
+  }
+
+  @if $modifier == 'hyphenation' {
+    hyphens: auto;
+  }
+}
diff --git a/packages/common-css/src/sap-label.scss b/packages/common-css/src/sap-label.scss
@@ -0,0 +1,114 @@
+@import 'common-settings';
+@import 'common-mixins';
+
+$block: #{$sap-namespace}-label;
+
+@mixin sap-label($required: false, $colon: false) {
+  @include sap-reset();
+  @include sap-ellipsis();
+  @include sap-set-margin-end(0.5rem);
+
+  cursor: text;
+  max-width: 100%;
+  width: fit-content;
+  position: relative;
+  align-self: flex-start;
+  font-size: var(--sapFontSize);
+  color: var(--sapContent_LabelColor);
+
+  &.is-disabled {
+    opacity: 0.4;
+  }
+
+  @if $required == true {
+    @include sap-set-padding-end(0.5rem);
+
+    &::after {
+      top: 0;
+      right: 0;
+      content: '*';
+      font-weight: bold;
+      position: absolute;
+      font-size: var(--sapFontLargeSize);
+      color: var(--sapField_RequiredColor);
+    }
+
+    @include sap-rtl() {
+      &::after {
+        left: 0;
+        right: auto;
+      }
+    }
+  }
+
+  @if $colon == true {
+    @include sap-set-padding-end(0.25rem);
+
+    &::before {
+      top: 0;
+      right: 0;
+      content: ':';
+      color: inherit;
+      position: absolute;
+      font-size: var(--sapFontSize);
+    }
+
+    @include sap-rtl() {
+      &::before {
+        left: 0;
+        right: auto;
+      }
+    }
+  }
+
+  @if $required == true and $colon == true {
+    @include sap-set-padding-end(0.75rem);
+
+    &::after {
+      top: 0;
+      right: 0;
+      content: '*';
+      font-weight: bold;
+      position: absolute;
+      font-size: var(--sapFontLargeSize);
+      color: var(--sapField_RequiredColor);
+    }
+
+    &::before {
+      top: 0;
+      right: 0.5rem;
+      content: ':';
+      color: inherit;
+      position: absolute;
+      font-size: var(--sapFontSize);
+    }
+
+    @include sap-rtl() {
+      &::before {
+        right: auto;
+        left: 0.5rem;
+      }
+
+      &::after {
+        left: 0;
+        right: auto;
+      }
+    }
+  }
+}
+
+.#{$sap-namespace}-label {
+  @include sap-label();
+}
+
+.#{$sap-namespace}-label-required {
+  @include sap-label($required: true);
+}
+
+.#{$sap-namespace}-label-colon {
+  @include sap-label($colon: true);
+}
+
+.#{$sap-namespace}-label-colon-required {
+  @include sap-label($required: true, $colon: true);
+}
diff --git a/packages/common-css/src/sap-text.scss b/packages/common-css/src/sap-text.scss
@@ -3,25 +3,18 @@
 
 $block: #{$sap-namespace}-text;
 
-.#{$block} {
-  @include sap-reset();
-
-  //   &::selection { //todo bring delta theming
-  //     color: var(--sapContent_ContrastTextColor);
-  //     background-color: var(--fdText_Selected_Background_Color);
-  //   }
+.#{$sap-namespace}-text {
+  @include sap-text();
+}
 
-  &--max-lines {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
+.#{$sap-namespace}-text-max-lines {
+  @include sap-text('max-lines');
+}
 
-  &--pre-wrap {
-    white-space: pre-wrap;
-  }
+.#{$sap-namespace}-text-pre-wrap {
+  @include sap-text('pre-wrap');
+}
 
-  &--hyphenation {
-    hyphens: auto;
-  }
+.#{$sap-namespace}-text-hyphenation {
+  @include sap-text('hyphenation');
 }
diff --git a/packages/common-css/stories/heading/heading.stories.js b/packages/common-css/stories/heading/heading.stories.js
@@ -4,15 +4,15 @@ export default {
   title: 'Heading',
   parameters: {
     description: `
-The following classes and mixin provide a way to stile your headings per SAP design. 
+The following classes and mixin provide a way to style your headings per SAP design. 
 <br><br>
 <b>CSS Class: </b>
 <code>.sap-heading-<i style="color: red;">number</i></code><br><br>
 <b>SCSS Mixin: </b>
 <code>@include sap-heading(<i style="color: red;">level</i>)</code><br><br>
 where: <br><br>
-<code style="color: red;">- number</code>: is the heading level, an integer from 1 to 6 <br><br>
-<code style="color: red;">- level</code>: is the heading level -> h1, h2, h3, h4, h5, h6 <br><br>`
+<code style="color: red;">- number</code>: is the heading level, an integer from 1 to 6 <br>
+<code style="color: red;">- level</code>: is the heading level -> h1, h2, h3, h4, h5, h6`
   }
 };
 export const Levels = () => levelsExampleHtml;

diff --git a/packages/common-css/stories/label/default-example.example.html b/packages/common-css/stories/label/default-example.example.html
@@ -0,0 +1,8 @@
+<label class="sap-label">Default Label</label>
+<br>
+<label class="sap-label-required">Required Label</label>
+<br>
+<label class="sap-label-colon">Colon Label</label>
+<br>
+<label class="sap-label-colon-required">Required Colon Label</label>
+<br>
diff --git a/packages/common-css/stories/label/label.stories.js b/packages/common-css/stories/label/label.stories.js
@@ -0,0 +1,23 @@
+import defaultExampleExampleHtml from "./default-example.example.html?raw";
+import '../../src/sap-label.scss';
+
+export default {
+  title: 'Label',
+  parameters: {
+    description: `The following classes and mixin provide a way to style your labels per SAP design. 
+<br><br>
+<b>CSS Classes: </b><br><br>
+<code>.sap-label</code><br>
+<code>.sap-label-required</code><br>
+<code>.sap-label-colon</code><br>
+<code>.sap-label-colon-required</code><br><br><br>
+<b>SCSS Mixin: </b>
+<code>@include sap-label(<i style="color: red;">$required, $colon</i>)</code><br>
+where <i style="color: red;">$required</i> and <i style="color: red;">$colon</i> are optional and can be set individually. <br>
+- <code>@include sap-label($required: true)</code>: to display a label with asterisk<br>
+- <code>@include sap-label($colon: true)</code>: to display a label with colon<br>
+- <code>@include sap-label($required: true, $colon: true)</code>: to display a label with asterisk and colon<br>`
+  }
+};
+export const DefaultExample = () => defaultExampleExampleHtml;
+DefaultExample.storyName = 'Examples';
diff --git a/packages/common-css/stories/text/hyphenation.example.html b/packages/common-css/stories/text/hyphenation.example.html
@@ -10,7 +10,7 @@ <h3>Without hyphenation</h3>
 
         <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
+            <p class="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

diff --git a/packages/common-css/stories/text/max-lines.example.html b/packages/common-css/stories/text/max-lines.example.html
@@ -17,7 +17,7 @@ <h3>No max lines rule</h3>
     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;">
+    <p class="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
@@ -35,7 +35,7 @@ <h3>2 max lines</h3>
     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;">
+    <p class="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

diff --git a/packages/common-css/stories/text/text.stories.js b/packages/common-css/stories/text/text.stories.js
@@ -8,8 +8,19 @@ 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']
+        It is generally used throughout the entire application and is responsive to all screen sizes.
+<br>
+<b>CSS Classes: </b><br>
+<code>.sap-text</code><br>
+<code>.sap-text-max-lines</code><br>
+<code>.sap-text-pre-wrap</code><br>
+<code>.sap-text-hyphenation</code><br><br>
+<b>SCSS Mixin: </b>
+<code>@include sap-text(<i style="color: red;">$modifier</i>)</code><br>
+where <i style="color: red;">$modifier</i> is optional and can be:
+- <code>"max-lines"</code>: to display text with a maximum line count<br>
+- <code>"pre-wrap"</code>: to display indents and/or whitespace<br>
+- <code>"hyphenation"</code>: to display hyphens<br>`
   }
 };
 export const DefaultExample = () => defaultExampleExampleHtml;
@@ -27,8 +38,8 @@ 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.`
+        whitespace. To display indents and/or whitespace, use the
+        \`.fd-text-pre-wrap\` class.`
     }
   }
 };
@@ -39,7 +50,7 @@ MaxLines.parameters = {
     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
+use the \`.fd-text-max-lines\` 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.
 
@@ -54,7 +65,7 @@ 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.
+points in a text block. To display hyphens, use the \`.fd-text-hyphenation\` element.
 
 **It is also possible to suggest line break opportunities with two Unicode characters that manually specify
 potential line breakpoints:**

diff --git a/packages/common-css/stories/text/whitespace.example.html b/packages/common-css/stories/text/whitespace.example.html
@@ -7,7 +7,7 @@ <h3>No indents or whitespace</h3>
     deserunt mollit anim id est laborum.</p>
 
     <h3>Wrapped text with indents and whitespace</h3>
-    <p class="sap-text sap-text--pre-wrap">
+    <p class="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.