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

SAP · Dec 4, 2023 · 273d66f · 273d66f
1 parent 22a8b75
commit 273d66f
Show file tree

Hide file tree

Showing 11 changed files with 245 additions and 77 deletions.
diff --git a/packages/common-css/src/_common-mixins.scss b/packages/common-css/src/_common-mixins.scss
@@ -1023,3 +1023,164 @@
 
   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;
+  }
+}
+
+@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;
+      }
+    }
+  }
+}
+
+@mixin sap-heading-base() {
+  @include sap-ellipsis();
+
+  margin: 0;
+  line-height: normal;
+  color: var(--sapTextColor);
+  font-size: var(--sapHeading_Font_Size);
+  font-family: var(--sapFontHeaderFamily);
+}
+
+@mixin sap-heading($size) {
+  @if $size == $sap-heading-h1 {
+    @include sap-heading-base();
+
+    --sapHeading_Font_Size: var(--sapFontHeader1Size);
+  } @else if $size == $sap-heading-h2 {
+    @include sap-heading-base();
+
+    --sapHeading_Font_Size: var(--sapFontHeader2Size);
+  } @else if $size == $sap-heading-h3 {
+    @include sap-heading-base();
+
+    --sapHeading_Font_Size: var(--sapFontHeader3Size);
+  } @else if $size == $sap-heading-h4 {
+    @include sap-heading-base();
+
+    --sapHeading_Font_Size: var(--sapFontHeader4Size);
+  } @else if $size == $sap-heading-h5 {
+    @include sap-heading-base();
+
+    --sapHeading_Font_Size: var(--sapFontHeader5Size);
+  } @else if $size == $sap-heading-h6 {
+    @include sap-heading-base();
+
+    --sapHeading_Font_Size: var(--sapFontHeader6Size);
+  } @else {
+    @include sap-heading-base();
+
+    --sapHeading_Font_Size: 1rem;
+  }
+
+  @content;
+}
diff --git a/packages/common-css/src/sap-heading.scss b/packages/common-css/src/sap-heading.scss
@@ -6,50 +6,6 @@ $block: #{$sap-namespace}-heading;
 .#{$block} {
   --sapHeading_Font_Size: 1rem;
 
-  @mixin sap-heading-base() {
-    @include sap-ellipsis();
-
-    margin: 0;
-    line-height: normal;
-    color: var(--sapTextColor);
-    font-size: var(--sapHeading_Font_Size);
-    font-family: var(--sapFontHeaderFamily);
-  }
-
-  @mixin sap-heading($size) {
-    @if $size == $sap-heading-h1 {
-      @include sap-heading-base();
-
-      --sapHeading_Font_Size: var(--sapFontHeader1Size);
-    } @else if $size == $sap-heading-h2 {
-      @include sap-heading-base();
-
-      --sapHeading_Font_Size: var(--sapFontHeader2Size);
-    } @else if $size == $sap-heading-h3 {
-      @include sap-heading-base();
-
-      --sapHeading_Font_Size: var(--sapFontHeader3Size);
-    } @else if $size == $sap-heading-h4 {
-      @include sap-heading-base();
-
-      --sapHeading_Font_Size: var(--sapFontHeader4Size);
-    } @else if $size == $sap-heading-h5 {
-      @include sap-heading-base();
-
-      --sapHeading_Font_Size: var(--sapFontHeader5Size);
-    } @else if $size == $sap-heading-h6 {
-      @include sap-heading-base();
-
-      --sapHeading_Font_Size: var(--sapFontHeader6Size);
-    } @else {
-      @include sap-heading-base();
-
-      --sapHeading_Font_Size: 1rem;
-    }
-
-    @content;
-  }
-
   &-1 {
     @include sap-heading($sap-heading-h1);
   }

diff --git a/packages/common-css/src/sap-label.scss b/packages/common-css/src/sap-label.scss
@@ -0,0 +1,18 @@
+@import 'common-settings';
+@import 'common-mixins';
+
+.#{$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
@@ -1,27 +1,18 @@
 @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);
-  //   }
+.#{$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