Skip to content

Commit

Permalink
feat: introduce 2 new types of icons (#2229)
Browse files Browse the repository at this point in the history 
* feat: add new types of icons

* final changes

* [ci visual]

* remove console warning

* [ci visual]

* chore: test chromatic [ci visual]

* [ci visual]

* feat: add new types of icons

* final changes

* [ci visual]

* remove console warning

* [ci visual]

* [ci visual]

* chore: test chromatic [ci visual]

* [ci visual]

Co-authored-by: droshev <mladen.droshev@sap.com>
  • Loading branch information
@InnaAtanasova @droshev
InnaAtanasova and droshev committed Apr 6, 2021
1 parent 8fe03ce commit 381958c
Show file tree
Hide file tree
Showing 16 changed files with 5,411 additions and 40 deletions.
4 changes: 2 additions & 2 deletions .storybook/custom/components/Header.js
View file
Expand Up @@ -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'
Expand All @@ -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'
Expand Down
68 changes: 40 additions & 28 deletions .storybook/preview-head.html
View file
@@ -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>
16 changes: 15 additions & 1 deletion README.md
View file
Expand Up @@ -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";
Expand Down Expand Up @@ -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;
}
Expand Down
36 changes: 36 additions & 0 deletions src/icon.scss
View file
@@ -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();
Expand All @@ -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);
}
}
}
218 changes: 218 additions & 0 deletions src/icons/_settingsBusiness.scss
View file
@@ -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: "\e03d",
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 */

0 comments on commit 381958c

Please sign in to comment.