feat: introduce 2 new types of icons

.storybook/custom/components/Header.js

@@ -10,7 +10,7 @@ const Header = ({onThemeChange, onDirectionalityChange}) => {
             <section className='fddocs-header--right'>
                 <label
                     className='fddocs-header--label'
-                    for="examplesDirectionality">Directionality</label>
+                    htmlFor="examplesDirectionality">Directionality</label>
                 <select
                     id="examplesDirectionality"
                     className='fddocs-select'
@@ -20,7 +20,7 @@ const Header = ({onThemeChange, onDirectionalityChange}) => {
                 </select>
                 <label
                     className='fddocs-header--label'
-                    for="examplesTheme">Theme</label>
+                    htmlFor="examplesTheme">Theme</label>
                 <select
                     id="examplesTheme"
                     className='fddocs-select'

.storybook/preview-head.html

@@ -1,35 +1,47 @@
-<link rel="shortcut icon" href="/favicon.ico">
-<link rel="icon" type="image/svg" href="/logo.svg" sizes="192x192">
-
-<script type="text/javascript" src="preview-head.js"> </script>
+<link rel="shortcut icon" href="/favicon.ico" />
+<link rel="icon" type="image/svg" href="/logo.svg" sizes="192x192" />
+<script type="text/javascript" src="preview-head.js"></script>
 
 <style type="text/css">
+    @font-face {
+        font-family: '72';
+        src: url('./theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Regular.woff') format('woff');
+        font-weight: normal;
+        font-style: normal;
+    }
+
+    @font-face {
+        font-family: '72';
+        src: url('./theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Light.woff') format('woff');
+        font-weight: 300;
+        font-style: normal;
+    }
 
-@font-face {
-  font-family: '72';
-  src: url('./theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Regular.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
+    @font-face {
+        font-family: '72';
+        src: url('./theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Bold.woff') format('woff');
+        font-weight: 700;
+        font-style: normal;
+    }
 
-@font-face {
-  font-family: '72';
-  src: url('./theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Light.woff') format('woff');
-  font-weight: 300;
-  font-style: normal;
-}
+    @font-face {
+        font-family: 'SAP-icons';
+        src: url('./theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons.woff') format('woff');
+        font-weight: normal;
+        font-style: normal;
+    }
 
-@font-face {
-  font-family: '72';
-  src: url('./theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Bold.woff') format('woff');
-  font-weight: 700;
-  font-style: normal;
-}
+    @font-face {
+        font-family: 'BusinessSuiteInAppSymbols';
+        src: url('./theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/BusinessSuiteInAppSymbols.woff') format('woff');
+        font-weight: normal;
+        font-style: normal;
+    }
 
-@font-face {
-  font-family: 'SAP-icons';
-  src: url('./theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
+    @font-face {
+        font-family: 'SAP-icons-TNT';
+        src: url('./theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons-TNT.woff') format('woff');
+        font-weight: normal;
+        font-style: normal;
+    }
 </style>

README.md

@@ -49,7 +49,7 @@ The distrubtion folder contains several css files per component: a default file
 See the [Icon Component](https://fundamental-styles.netlify.app/?path=/docs/components-icon--sizes) for a list of icon class names. See Project Configuration below for instructions to include SAP Fiori 3 icons in your project.
 
 ### Project Configuration
-This project does not contain fonts and icons - they must be added to your project separately. Download the @sap-theming liibrary. After adding fonts and icons to your project, include the following in your css:
+This project does not contain fonts and icons - they must be added to your project separately. Download the @sap-theming library. After adding fonts and icons to your project, include the following in your css:
 
     @font-face {
         font-family: "72";
@@ -81,6 +81,20 @@ This project does not contain fonts and icons - they must be added to your proje
         font-style: normal;
     }
 
+    @font-face {
+        font-family: 'BusinessSuiteInAppSymbols';
+        src: url('~@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/BusinessSuiteInAppSymbols.woff') format('woff');
+        font-weight: normal;
+        font-style: normal;
+    }
+
+    @font-face {
+        font-family: 'SAP-icons-TNT';
+        src: url('~@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons-TNT.woff') format('woff');
+        font-weight: normal;
+        font-style: normal;
+    }
+
     html {
       font-size: 16px;
     }

src/icon.scss

@@ -1,6 +1,10 @@
 @import "./mixins";
 
+/* stylelint-disable */
 $block: sap-icon;
+$blockBusiness: sap-icon-businessSuiteInAppSymbols;
+$blockTNT: sap-icon-TNT;
+/* stylelint-enable */
 
 [class*="#{$block}"] {
   @include fd-reset();
@@ -10,10 +14,42 @@ $block: sap-icon;
   display: inline-block;
 }
 
+[class*='#{$blockBusiness}'] {
+  @include fd-reset();
+  @include fd-business-suite-icon-base();
+
+  font-style: normal;
+  display: inline-block;
+}
+
+[class*='#{$blockTNT}'] {
+  @include fd-reset();
+  @include fd-tnt-icon-base();
+
+  font-style: normal;
+  display: inline-block;
+}
+
 .#{$block} {
   @each $key, $value in $fd-icons {
     &--#{$key} {
       @include fd-icon-glyph($key);
     }
   }
 }
+
+.#{$blockBusiness} {
+  @each $key, $value in $fd-business-suite-icons {
+    &--#{$key} {
+      @include fd-business-suite-icon-glyph($key);
+    }
+  }
+}
+
+.#{$blockTNT} {
+  @each $key, $value in $fd-tnt-icons {
+    &--#{$key} {
+      @include fd-tnt-icon-glyph($key);
+    }
+  }
+}

src/icons/_settingsBusiness.scss

@@ -0,0 +1,218 @@
+// business suite icon map
+/* stylelint-disable */
+$fd-business-suite-icons: (
+  heart: "\e000",
+  quarter: "\e001",
+  year: "\e002",
+  equalizer: "\e003",
+  component: "\e004",
+  component-private: "\e005",
+  raw-material: "\e006",
+  sms: "\e007",
+  add-note: "\e008",
+  change-time-horizon: "\e009",
+  table-chart-customization: "\e00a",
+  delegated-important-task: "\e00b",
+  forklift: "\e00c",
+  coins: "\e00d",
+  filter-menu: "\e00e",
+  target-to-date: "\e00f",
+  program: "\e010",
+  phase: "\e011",
+  checklist: "\e012",
+  mirrored-task: "\e013",
+  sub-project: "\e014",
+  checklist-item: "\e015",
+  adhoc-analysis: "\e016",
+  change-analysis: "\e017",
+  review-demands: "\e018",
+  project-definition: "\e019",
+  data-access: "\e01a",
+  define-shortage: "\e01b",
+  review-supplies: "\e01c",
+  change-log: "\e01d",
+  priority-1: "\e01e",
+  priority-2: "\e01f",
+  jam: "\e020",
+  milestone: "\e021",
+  bulleting-with-numbers: "\e022",
+  decrease-indent: "\e023",
+  increase-indent: "\e024",
+  bold: "\e025",
+  italic: "\e026",
+  strike-through: "\e027",
+  underline: "\e028",
+  save-as: "\e029",
+  segmentation: "\e02A",
+  context-menu: "\e02B",
+  snapshot: "\e02C",
+  subtraction-b-a: "\e02D",
+  subtraction-a-b: "\e02E",
+  intersection: "\e02F",
+  union: "\e030",
+  top: "\e031",
+  bottom: "\e032",
+  page-up: "\e033",
+  page-down: "\e034",
+  create-dashboard: "\e035",
+  xcelsius-file: "\e036",
+  open-folder: "\e037",
+  neutral: "\e038",
+  split-segmentation: "\e039",
+  manage-budget: "\e03a",
+  blocked: "\e03b",
+  pipette: "\e03c",
+  top-recipe: "\e03e",
+  recipe: "\e03e",
+  ingredients: "\e03f",
+  multiple-charts: "\e040",
+  descending-bars: "\e041",
+  descending-stacked-bars: "\e042",
+  scatter-plot: "\e043",
+  spill: "\e044",
+  fire: "\e045",
+  stratification: "\e046",
+  relationship: "\e047",
+  margin-decomposition: "\e048",
+  control-group: "\e049",
+  comparison-chart: "\e04A",
+  responsible-area: "\e04B",
+  increase: "\e04C",
+  decrease: "\e04D",
+  current-stock: "\e04E",
+  expedite: "\e04F",
+  postpone: "\e050",
+  approved: "\e051",
+  partially-delivered: "\e052",
+  line-bar-chart: "\e053",
+  expand-all: "\e054",
+  submission: "\e055",
+  change-request: "\e056",
+  column-unselected: "\e057",
+  column-selected: "\e058",
+  row-unselected: "\e059",
+  row-selected: "\e05A",
+  stock-requirements: "\e05B",
+  gender-male-and-female: "\e05C",
+  marital-status: "\e05D",
+  birthday: "\e05E",
+  classification: "\e05F",
+  marked-for-deletion: "\e060",
+  bullet-chart: "\e061",
+  remove-filter: "\e062",
+  bank-account: "\e063",
+  savings-account: "\e064",
+  debit-card: "\e065",
+  vip-customer: "\e066",
+  undesirable-customer: "\e067",
+  answered-change-request: "\e068",
+  collected-change-request: "\e069",
+  draw-freehand: "\e06A",
+  draw-circle: "\e06B",
+  completed: "\e06C",
+  answered: "\e06D",
+  traffic-cone: "\e06E",
+  traffic-lights: "\e06F",
+  container: "\e070",
+  container-loading: "\e071",
+  traffic-jam: "\e072",
+  products: "\e073",
+  sidepanel: "\e074",
+  split-screen: "\e075",
+  truck-driver: "\e076",
+  keep-segment: "\e077",
+  exclude-segment: "\e078",
+  separate-segments: "\e079",
+  distribute-segments: "\e07A",
+  next-open-item: "\e07B",
+  where-used: "\e07C",
+  outbound-delivery: "\e07D",
+  outbound-delivery-inactive: "\e07E",
+  outbound-delivery-active: "\e07F",
+  target: "\e080",
+  source: "\e081",
+  material: "\e082",
+  due-date: "\e083",
+  overdue: "\e084",
+  set-as-default: "\e085",
+  face-very-bad: "\e086",
+  face-bad: "\e087",
+  face-skeptical: "\e088",
+  face-neutral: "\e089",
+  face-astonished: "\e08A",
+  face-happy: "\e08B",
+  face-very-happy: "\e08C",
+  face-awful: "\e08D",
+  face-devastated: "\e08E",
+  face-okey-dokey: "\e08F",
+  alarm: "\e090",
+  activate: "\e091",
+  segment-preview-reference-objects: "\e092",
+  radius: "\e093",
+  polygone-black: "\e094",
+  polygone-white: "\e095",
+  ploygone: "\e096",
+  no-filter: "\e097",
+  grip: "\e098",
+  water: "\e09A",
+  gas: "\e09B",
+  liquid: "\e09C",
+  time-deposit: "\e09D",
+  early-widthdrawal-for-time-deposits: "\e09E",
+  truck-load: "\e0E8",
+  truck-unload: "\e0E9",
+  truck-load-unload: "\e0EA",
+  pharmacy: "\e0EB",
+  medicine-syrup: "\e0EC",
+  reminder: "\e0ED",
+  medicine-pill: "\e0EE",
+  medicine-ointment: "\e0EF",
+  medicine-drops: "\e0F0",
+  blood-test: "\e0F1",
+  temperature: "\e0F2",
+  medicine-inhaler: "\e0F3",
+  foot-steps: "\e0F4",
+  weight: "\e0F5",
+  health-tracking: "\e0F6",
+  blood-pressure: "\e0F7",
+  immunization: "\e0F8",
+  allergies: "\e0F9",	
+  rescheduling2: "\e0FA",	
+  resequencing2: "\e0FB",
+  no-time-change: "\e0FC",
+  time-change: "\e0FD",
+  smart-matcher: "\e0FE",
+  legal-section: "\e10A",
+  causes: "\e10B",
+  effects: "\e10C",
+  shared-by-me: "\e10D",
+  shared-with-me: "\e10E",
+  alert-groups: "\e111",
+  function-alert: "\e112",
+  function-hierarchy: "\e113",
+  rfid: "\e114",
+  input: "\e115",
+  software-item: "\e116",
+  product-view: "\e117",
+  software-item-variant: "\e118",
+  lighthouse: "\e119",
+  demand-unit: "\e11A",
+  fma-management: "\e11B",
+  fma-validation: "\e11C",
+  fma-analytics: "\e11D",
+  class: "\e11E",
+  overview: "\e11F",
+  production: "\e120",
+  subclass: "\e121",
+  variant-configuration: "\e122",
+  sum: "\e123",
+  empty-trailer: "\e12F",
+  door: "\e130",
+  loading-point: "\e131",
+  stock-warehouse: "\e132",
+  gate: "\e133",
+  timeseries-waterfall-chart: "\e134",
+  stages-warning: "\e138",
+  empty-warning: "\e139"
+) !default;
+/* stylelint-enable */