feat:status indicator refactoring to infoLabel (#638)

* added border radius css

added border radius css

* added border radius css

added border radius css

 feat:status indicator refactoring to infoLabel

feat:status indicator refactoring to infoLabel

feat:status indicator refactoring to infoLabel

feat:status indicator refactoring to infoLabel

updating the backstop image for badge

updating the backstop image for badge

adding css variable to the info label

adding css variable to the info label

feat:status indicator refactoring to infoLabel

feat:status indicator refactoring to infoLabel

feat:status indicator refactoring to infoLabel

feat:status indicator refactoring to infoLabel

 feat:status indicator refactoring to infoLabel

feat:status indicator refactoring to infoLabel

updating the images after build failure

updating the images after build failure

adding css variable to the info label

adding css variable to the info label

updating the colour format as given by the themeing team

updating the colour format as given by the themeing team

feat:status indicator refactoring to infoLabel

feat:status indicator refactoring to infoLabel

add code to center the icon vertically

* feat:status indicator refactoring to infoLabel

feat:status indicator refactoring to infoLabel

* updating the backstop image for badge

updating the backstop image for badge

* feat:status indicator refactoring to infoLabel

feat:status indicator refactoring to infoLabel

feat:status indicator refactoring to infoLabel

feat:status indicator refactoring to infoLabel

 feat:status indicator refactoring to infoLabel

feat:status indicator refactoring to infoLabel

updating the images after build failure

updating the images after build failure

adding css variable to the info label

adding css variable to the info label

* feat:status indicator refactoring to infoLabel

feat:status indicator refactoring to infoLabel

* feat:status indicator refactoring to infoLabel

feat:status indicator refactoring to infoLabel

*  feat:status indicator refactoring to infoLabel

feat:status indicator refactoring to infoLabel

* adding css variable to the info label

adding css variable to the info label

* updating the colour format as given by the themeing team

updating the colour format as given by the themeing team

* feat:status indicator refactoring to infoLabel

feat:status indicator refactoring to infoLabel

* add code to center the icon vertically

* update visual tests

* update visual tests

* Update info-label.scss

Co-authored-by: Inna Atanasova <39598672+InnaAtanasova@users.noreply.github.com>

docs/_data/components.yml

@@ -27,6 +27,9 @@
     - title: Image
       meta: image
 
+    - title: Info Label
+      meta: info-label
+
     - title: Inline Help
       meta: inline-help
 

docs/_data/sidebars/left-navigation-sidebar.yml

@@ -144,6 +144,10 @@ entries:
       url: /components/image.html
       output: web
 
+    - title: Info Label
+      url: /components/info-label.html
+      output: web
+
     - title: Input Group
       url: /components/input-group.html
       output: web

docs/_sass/_docs-component-list.scss

@@ -66,6 +66,11 @@ $grid-transition-delay: 100ms;
             margin-top: 60px;
         }
 
+	    &__info-label {
+            width: 250px;
+            margin-top: 60px;
+        }
+
         &__button {
             width: 150px;
             margin-top: 40px;

docs/pages/components/info-label.md

@@ -0,0 +1,98 @@
+---
+title: Info Label
+id:
+keywords: info label, info, label, info-label, counter
+sidebar: left-navigation-sidebar
+toc: false
+permalink: components/info-label.html
+folder: components
+---
+
+Info Label is a small non-interactive numeric or text-based control. Its primary use is to add user-defined characteristic to an object. `fd-info-label`, `fd-info-label--numeric`, `fd-info-label--accent-color-1` and `fd-info-label--icon`
+{: .docs-intro}
+
+<br>
+
+# info-label
+
+## info-label Style Options
+`info-label` Info Label has three options: `--accent-color-1,accent-color-2...`, `--icon` and `--numeric`
+{% capture info-label %}
+<span class="fd-info-label fd-info-label--numeric fd-info-label--accent-color-1">6</span>
+<span class="fd-info-label fd-info-label--numeric fd-info-label--accent-color-2">6.2</span>
+<span class="fd-info-label fd-info-label--numeric fd-info-label--accent-color-3">42k</span>
+<span class="fd-info-label fd-info-label--accent-color-3">Info Label </span>
+<span class="fd-info-label fd-info-label--accent-color-4">Missing Item</span>
+<span class="fd-info-label fd-info-label--accent-color-5 fd-info-label--icon sap-icon--photo-voltaic">Delivered</span>
+
+{% endcapture %}
+{% include display-component.html component=info-label %}
+
+<br>
+
+### info-label Color Options
+In addition the the default grey, there are additional Semantic color options available `--accent-color-1,accent-color-2...`.
+{% capture info-label %}
+
+<span class="fd-info-label fd-info-label--accent-color-1">Info Label</span>
+<br><br>
+<span class="fd-info-label fd-info-label--accent-color-2">Info Label</span>
+<br><br>
+<span class="fd-info-label fd-info-label--accent-color-3">Info Label</span>
+<br><br>
+<span class="fd-info-label fd-info-label--accent-color-4">Info Label</span>
+<br><br>
+<span class="fd-info-label fd-info-label--accent-color-5">Info Label</span>
+<br><br>
+<span class="fd-info-label fd-info-label--accent-color-6">Info Label</span>
+<br><br>
+<span class="fd-info-label fd-info-label--accent-color-7">Info Label</span>
+<br><br>
+<span class="fd-info-label fd-info-label--accent-color-8">Info Label</span>
+<br><br>
+<span class="fd-info-label fd-info-label--accent-color-9">Info Label</span>
+<br><br>
+<span class="fd-info-label fd-info-label--accent-color-10">Info Label</span>
+
+{% endcapture %}
+{% include display-component.html component=info-label %}
+
+<hr>
+
+
+## Status Indicator Label with any icons
+
+In addition the the default grey, there are additional Semantic color options available `--icon`, and Icons placeholder with sap Icon `sap-icon--`.
+
+{% capture info-label %}
+
+<span class="fd-info-label fd-info-label--accent-color-1 fd-info-label--icon sap-icon--future">Info Label</span>
+<br><br>
+<span class="fd-info-label fd-info-label--accent-color-2 fd-info-label--icon sap-icon--add-activity-2">Info Label</span>
+<br><br>
+<span class="fd-info-label fd-info-label--accent-color-3 fd-info-label--icon sap-icon--bar-code">Info Label</span>
+<br><br>
+<span class="fd-info-label fd-info-label--accent-color-4 fd-info-label--icon sap-icon--time-entry-request">Info Label</span>
+<br><br>
+<span class="fd-info-label fd-info-label--accent-color-5 fd-info-label--icon sap-icon--bubble-chart">Info Label</span>
+<br><br>
+<span class="fd-info-label fd-info-label--accent-color-6 fd-info-label--icon sap-icon--hide">Info Label</span>
+<br><br>
+<span class="fd-info-label fd-info-label--accent-color-7 fd-info-label--icon sap-icon--key">Info Label</span>
+<br><br>
+<span class="fd-info-label fd-info-label--accent-color-8 fd-info-label--icon sap-icon--technical-object">Info Label</span>
+<br><br>
+<span class="fd-info-label fd-info-label--accent-color-9 fd-info-label--icon sap-icon--upload-to-cloud">Info Label</span>
+<br><br>
+<span class="fd-info-label fd-info-label--accent-color-10 fd-info-label--only-icon sap-icon--upload-to-cloud"></span>
+
+{% endcapture %}
+{% include display-component.html component=info-label %}
+
+<br>
+
+<style>
+.fd-info-label{
+    margin-right: 20px;
+}
+</style>

docs/pages/components/status-indicators.md

@@ -7,6 +7,8 @@ toc: false
 permalink: components/status-indicators.html
 folder: components
 ---
+> **DEPRECATED**. Depending on the use case, use either the [InfoLabel](info-label.html) component or the **ObjectStatusCoponent** component 
+{: .docs-deprecated}
 
 Status indicators are used to easily highlight the state of an object. `badge`, `label`, `status-label` and `counter`
 {: .docs-intro}

src/fundamental-styles.scss

@@ -63,3 +63,4 @@
 @import "./tokenizer";
 @import "./tree";
 @import "./helpers";
+@import "./info-label";

src/info-label.scss

@@ -0,0 +1,125 @@
+@import "./settings";
+@import "./mixins";
+@import "./functions";
+
+/*!
+.fd-badge+(( --numeric | --icon ), ( --cozy | --compact ))
+*/
+$block: #{$fd-namespace}-info-label;
+
+.#{$block} {
+
+  // info-label DEFAULT
+  $fd-info-label-border-radius: 1.125rem !default;
+  $fd-info-label-color: var(--sapTextColor) !default;
+  $fd-info-label-fontsize: var(--sapFontSmallSize);
+  $fd-info-label-default-padding: 0 0.625rem !default;
+  $fd-info-label-default-vertical-align: middle !default;
+  $fd-info-label-default-border-width: 0.063rem !default;
+  $fd-info-label-default-border-style: solid !default;
+  $fd-info-label-default-height: 1.125rem !default;
+  $fd-info-label-default-text-transform: uppercase !default;
+  $fd-info-label-default-text-align: center !default;
+  $fd-info-label-default-letter-spacing: 0.0125rem !default;
+  $fd-info-label-default-display: inline-block !default;
+  $fd-info-label-default-text-padding-right: 0.1875rem !default;
+  $fd-info-label-default-text-padding-left: 0.3125rem !default;
+  $fd-info-label-default-overflow: hidden !default;
+  $fd-info-label-default-max-width: 100% !default;
+  $fd-info-label-default-white-space: nowrap !default;
+  $fd-info-label-default-text-overflow: ellipsis !default;
+  // INFOLABEL ICON
+  $fd-info-label-icon-size: 0.75rem !default;
+  $fd-info-label-icon-padding-left: 0.3125rem !default;
+  $fd-info-label-icon-padding-right: 0.3125rem !default;
+  $fd-info-label-icon-padding: 0 0.5rem !default;
+
+  // INFOLABEL NUMERIC PADDING
+  $fd-info-label-numeric-padding: 0 0.3125rem !default;
+
+  // COZY AND COMPACT MARGIN
+  $fd-info-label-margin-compact: 0.4375rem 0 !default;
+  $fd-info-lable-margin-cozy: 0.8125rem 0 !default;
+
+  $color-accents: (
+    "1": ("background": var(--sapLegendBackgroundColor1), "border": var(--sapAccentColor1)),
+    "2": ("background": var(--sapLegendBackgroundColor2), "border": var(--sapAccentColor2)),
+    "3": ("background": var(--sapLegendBackgroundColor3), "border": var(--sapAccentColor3)),
+    "4": ("background": var(--sapLegendBackgroundColor5), "border": var(--sapAccentColor4)),
+    "5": ("background": var(--sapLegendBackgroundColor20), "border": var(--sapAccentColor5)),
+    "6": ("background": var(--sapLegendBackgroundColor6), "border": var(--sapAccentColor6)),
+    "7": ("background": var(--sapLegendBackgroundColor7), "border": var(--sapAccentColor7)),
+    "8": ("background": var(--sapLegendBackgroundColor8), "border": var(--sapAccentColor8)),
+    "9": ("background": var(--sapLegendBackgroundColor10), "border": var(--sapAccentColor9)),
+    "10": ("background": var(--sapLegendBackgroundColor9), "border": var(--sapAccentColor10))
+  );
+
+  @include fd-reset();
+
+  vertical-align: $fd-info-label-default-vertical-align;
+  padding: $fd-info-label-default-padding;
+  border-radius: $fd-info-label-border-radius;
+  border-width: $fd-info-label-default-border-width;
+  border-style: $fd-info-label-default-border-style;
+  height: $fd-info-label-default-height;
+  text-transform: $fd-info-label-default-text-transform;
+  text-align: $fd-info-label-default-text-align;
+  color: $fd-info-label-color;
+  font-size: $fd-info-label-fontsize;
+  letter-spacing: $fd-info-label-default-letter-spacing;
+  display: $fd-info-label-default-display;
+  max-width: $fd-info-label-default-max-width;
+  overflow: $fd-info-label-default-overflow;
+  white-space: $fd-info-label-default-white-space;
+  text-overflow: $fd-info-label-default-text-overflow;
+
+  &--numeric {
+    padding: $fd-info-label-numeric-padding;
+  }
+
+  &--icon {
+    size: $fd-info-label-icon-size;
+    padding: 0 $fd-info-label-icon-padding-right 0 $fd-info-label-icon-padding-right;
+    line-height: 1.1;
+
+    @include fd-rtl() {
+      &:empty {
+        padding: 0 $fd-info-label-icon-padding-right 0 $fd-info-label-icon-padding-right;
+      }
+
+      &::before {
+        padding-left: $fd-info-label-default-text-padding-right;
+        padding-right: 0;
+      }
+    }
+
+    &::before {
+      padding-right: $fd-info-label-default-text-padding-right;
+      position: relative;
+      top: 0.0625rem;
+    }
+
+    &:empty {
+      padding: 0 $fd-info-label-icon-padding-right 0 $fd-info-label-icon-padding-right;
+    }
+  }
+
+  &--only-icon {
+    padding: 0 $fd-info-label-icon-padding-right 0 $fd-info-label-icon-padding-left;
+  }
+
+  &--compact {
+    margin: $fd-info-label-margin-compact;
+  }
+
+  &--cozy {
+    margin: $fd-info-lable-margin-cozy;
+  }
+
+  @each $set-name, $color-set in $color-accents {
+    &--accent-color-#{$set-name} {
+      background-color: map_get($color-set, "background");
+      border-color: map_get($color-set, "border");
+    }
+  }
+}

test/templates/index.njk

@@ -36,6 +36,7 @@ li {
           <li><a href="icon">.fd-icon</a></li>
           <li><a href="identifier">.fd-identifier</a></li>
           <li><a href="image">.fd-image</a></li>
+		  <li><a href="info-label">.fd-info-label</a></li>
           <li><a href="inline-help">.fd-inline-help</a></li>
           <li><a href="input">.fd-input</a></li>
           <li><a href="input-group">.fd-input-group</a></li>

test/templates/info-label/component.njk

@@ -0,0 +1,8 @@
+<!--
+infolabel:
+    properties={},
+    modifier={ block: [] }
+-->
+{% macro infolabel(properties={}, modifier={}, classes=[]) -%}
+<span class="fd-info-label{{ modifier.block | modifier('info-label') }}{{ ' sap-icon--'+properties.icon if properties.icon }}{{classes|classes}}" style="margin-top: 10px;">{{properties.label}}</span><br>
+{%- endmacro %}

test/templates/info-label/data.json

@@ -0,0 +1,25 @@
+{
+    "id": "infolabel",
+    "name": "InfoLabel",
+    "properties": {
+        "label": "Info Label"
+    },
+    "modifier": {
+        "block": [
+            "numeric",
+            "icon",
+            "compact",
+            "cozy",
+            "accent-color-1",
+            "accent-color-2",
+            "accent-color-3",
+            "accent-color-4",
+            "accent-color-5",
+            "accent-color-6",
+            "accent-color-7",
+            "accent-color-8",
+            "accent-color-9",
+            "accent-color-10"
+        ]
+    }
+}