Merge branch 'develop' into bugfix/fix-props-doc-page

CHANGELOG.md

@@ -11,11 +11,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Added
 - [Storybook] Add and configure storybook docs addon.
+- [Core] Add new icon `mapping`. (#241)
 
 ### Changed
 - [Storybook] Revamp docs for `form` and `imageeditor` packages.
 - [Core] Update `<List>`, `<Section>` to support `titleSize` option. (#242)
 - [Storybook] Update `getPropTables.js` to fix prop table on doc page. (#244)
+- [Storybook] Modify icon set source of `Basic icons set` page from `configs/fontello.config.json`. (#241)
+- [Storybook] Fix Icon props doc page. (#241)
 
 ## [4.0.0]
 

configs/fontello.config.json

@@ -860,6 +860,20 @@
       "search": [
         "inline-info"
       ]
+    },
+    {
+      "uid": "a5af988d09dac1ebbe381ecbb938d034",
+      "css": "mapping",
+      "code": 59413,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M703.2 468.8H296.9A31.3 31.3 0 0 1 296.9 406.3H703.2A31.3 31.3 0 0 1 703.2 468.8ZM703.2 593.8H296.9A31.3 31.3 0 0 1 296.9 531.3H703.2A31.3 31.3 0 0 1 703.2 593.8ZM703.2 468.8A31.3 31.3 0 0 1 678.7 457L553.7 300.8A31.3 31.3 0 0 1 602.6 261.7L727.6 418A31.3 31.3 0 0 1 703.2 468.8ZM421.9 750A31.3 31.3 0 0 1 397.5 738.3L272.5 582A31.3 31.3 0 0 1 321.3 543L446.3 699.2A31.3 31.3 0 0 1 421.9 750Z",
+        "width": 1000
+      },
+      "search": [
+        "mapping"
+      ]
     }
   ]
 }

packages/core/src/styles/Icon.scss

@@ -96,188 +96,191 @@
 /* stylelint-disable rule-empty-line-before */
 
 .#{$prefix}-icon-add:before {
-    content: "\e800"; /* "" */
+    content: "\e800";
 }
 .#{$prefix}-icon-edit:before {
-    content: "\e801"; /* "" */
+    content: "\e801";
 }
 .#{$prefix}-icon-duplicate:before {
-    content: "\e802"; /* "" */
+    content: "\e802";
 }
 .#{$prefix}-icon-copypaste:before {
-    content: "\e803"; /* "" */
+    content: "\e803";
 }
 .#{$prefix}-icon-tickets:before {
-    content: "\e804"; /* "" */
+    content: "\e804";
 }
 .#{$prefix}-icon-trashcan:before {
-    content: "\e805"; /* "" */
+    content: "\e805";
 }
 .#{$prefix}-icon-drag:before {
-    content: "\e806"; /* "" */
+    content: "\e806";
 }
 .#{$prefix}-icon-success:before {
-    content: "\e807"; /* "" */
+    content: "\e807";
 }
 .#{$prefix}-icon-error:before {
-    content: "\e808"; /* "" */
+    content: "\e808";
 }
 .#{$prefix}-icon-delete:before {
-    content: "\e809"; /* "" */
+    content: "\e809";
 }
 .#{$prefix}-icon-header-next:before {
-    content: "\e80a"; /* "" */
+    content: "\e80a";
 }
 .#{$prefix}-icon-header-prev:before {
-    content: "\e80b"; /* "" */
+    content: "\e80b";
 }
 .#{$prefix}-icon-fold:before {
-    content: "\e80c"; /* "" */
+    content: "\e80c";
 }
 .#{$prefix}-icon-unfold:before {
-    content: "\e80d"; /* "" */
+    content: "\e80d";
 }
 .#{$prefix}-icon-next:before {
-    content: "\e80e"; /* "" */
+    content: "\e80e";
 }
 .#{$prefix}-icon-prev:before {
-    content: "\e80f"; /* "" */
+    content: "\e80f";
 }
 .#{$prefix}-icon-folder:before {
-    content: "\e810"; /* "" */
+    content: "\e810";
 }
 .#{$prefix}-icon-loading:before {
-    content: "\e811"; /* "" */
+    content: "\e811";
 }
 .#{$prefix}-icon-lock:before {
-    content: "\e812"; /* "" */
+    content: "\e812";
 }
 .#{$prefix}-icon-unlock:before {
-    content: "\e813"; /* "" */
+    content: "\e813";
 }
 .#{$prefix}-icon-radio-empty:before {
-    content: "\e83c"; /* '' */
+    content: "\e83c";
 }
 .#{$prefix}-icon-radio-half:before {
-    content: "\e83d"; /* '' */
+    content: "\e83d";
 }
 .#{$prefix}-icon-radio-selected:before {
-    content: "\e83e"; /* '' */
+    content: "\e83e";
 }
 .#{$prefix}-icon-picture:before {
-    content: "\e817"; /* "" */
+    content: "\e817";
 }
 .#{$prefix}-icon-printer:before {
-    content: "\e818"; /* "" */
+    content: "\e818";
 }
 .#{$prefix}-icon-pencil:before {
-    content: "\e819"; /* '' */
+    content: "\e819";
 }
 .#{$prefix}-icon-retry:before {
-    content: "\e81a"; /* '' */
+    content: "\e81a";
 }
 .#{$prefix}-icon-cash:before {
-    content: '\e81b'; /* '' */
+    content: '\e81b';
 }
 .#{$prefix}-icon-credit-card:before {
-    content: '\e81c'; /* '' */
+    content: '\e81c';
 }
 .#{$prefix}-icon-ctbc-direct:before {
-    content: '\e81d'; /* '' */
+    content: '\e81d';
 }
 .#{$prefix}-icon-ctbc-mpos:before {
-    content: '\e81e'; /* '' */
+    content: '\e81e';
 }
 .#{$prefix}-icon-custom-pay:before {
-    content: '\e81f'; /* '' */
+    content: '\e81f';
 }
 .#{$prefix}-icon-inline-error:before {
-    content: '\e820'; /* '' */
+    content: '\e820';
 }
 .#{$prefix}-icon-inline-loading:before,
 .#{$prefix}-icon-loading-full:before {
-    content: '\e821'; /* '' */
+    content: '\e821';
 }
 .#{$prefix}-icon-inline-success:before,
 .#{$prefix}-icon-success-full:before {
-    content: '\e822'; /* '' */
+    content: '\e822';
 }
 .#{$prefix}-icon-pause:before {
-    content: '\e823'; /* '' */
+    content: '\e823';
 }
 .#{$prefix}-icon-play:before {
-    content: '\e824'; /* '' */
+    content: '\e824';
 }
 .#{$prefix}-icon-search:before {
-    content: '\e825'; /* '' */
+    content: '\e825';
 }
 .#{$prefix}-icon-crm-address:before {
-    content: '\e826'; /* '' */
+    content: '\e826';
 }
 .#{$prefix}-icon-crm-age:before {
-    content: '\e827'; /* '' */
+    content: '\e827';
 }
 .#{$prefix}-icon-crm-birthday:before {
-    content: '\e828'; /* '' */
+    content: '\e828';
 }
 .#{$prefix}-icon-crm-email:before {
-    content: '\e829'; /* '' */
+    content: '\e829';
 }
 .#{$prefix}-icon-crm-gender:before {
-    content: '\e82a'; /* '' */
+    content: '\e82a';
 }
 .#{$prefix}-icon-crm-member-name:before {
-    content: '\e82b'; /* '' */
+    content: '\e82b';
 }
 .#{$prefix}-icon-crm-member-note:before {
-    content: '\e82c'; /* '' */
+    content: '\e82c';
 }
 .#{$prefix}-icon-crm-phone-land:before {
-    content: '\e82d'; /* '' */
+    content: '\e82d';
 }
 .#{$prefix}-icon-crm-phone-mobile:before {
-    content: '\e82e'; /* '' */
+    content: '\e82e';
 }
 .#{$prefix}-icon-inventory-category:before {
-    content: '\e833'; /* '' */
+    content: '\e833';
 }
 .#{$prefix}-icon-inventory-item:before {
-    content: '\e834'; /* '' */
+    content: '\e834';
 }
 .#{$prefix}-icon-download:before {
-    content: '\e860'; /* '' */
+    content: '\e860';
 }
 .#{$prefix}-icon-add-item:before {
-    content: '\e832'; /* '' */
+    content: '\e832';
 }
 .#{$prefix}-icon-add-multi-items:before {
-    content: '\e82f'; /* '' */
+    content: '\e82f';
 }
 .#{$prefix}-icon-clear-item:before {
-    content: '\e830'; /* '' */
+    content: '\e830';
 }
 .#{$prefix}-icon-first-page:before {
-    content: '\e835'; /* '' */
+    content: '\e835';
 }
 .#{$prefix}-icon-inline-question:before {
-    content: '\e838'; /* '' */
+    content: '\e838';
 }
 .#{$prefix}-icon-last-page:before {
-    content: '\e839'; /* '' */
+    content: '\e839';
 }
 .#{$prefix}-icon-remove-element:before {
-    content: '\e83f'; /* '' */
+    content: '\e83f';
 }
 .#{$prefix}-icon-dropdown:before {
-    content: '\e840'; /* '' */
+    content: '\e840';
 }
 .#{$prefix}-icon-prev-page:before {
-    content: '\e841'; /* '' */
+    content: '\e841';
 }
 .#{$prefix}-icon-next-page:before {
-    content: '\e842'; /* '' */
+    content: '\e842';
 }
 .#{$prefix}-icon-inline-info:before {
-    content: '\e814'; /* '' */
+    content: '\e814';
+}
+.#{$prefix}-icon-mapping:before {
+    content: '\e815';
 }
 /* stylelint-enable */

packages/storybook/examples/core/Icon/BasicIcons.js

@@ -1,43 +1,19 @@
 import React from 'react';
-
 import Icon from '@ichef/gypcrete/src/Icon';
 
+import iconSet from '../../../../../configs/fontello.config.json';
+
 function BasicIconsSet() {
     return (
-        <div>
-            <Icon type="add" />
-            <Icon type="edit" />
-            <Icon type="duplicate" />
-            <Icon type="copypaste" />
-            <Icon type="tickets" />
-            <Icon type="trashcan" />
-            <Icon type="drag" />
-            <Icon type="success" />
-            <Icon type="error" />
-            <Icon type="delete" />
-            <Icon type="header-next" />
-            <Icon type="header-prev" />
-            <Icon type="fold" />
-            <Icon type="unfold" />
-            <Icon type="next" />
-            <Icon type="prev" />
-            <Icon type="folder" />
-            <Icon type="loading" spinning />
-            <Icon type="lock" />
-            <Icon type="unlock" />
-            <Icon type="radio-empty" />
-            <Icon type="radio-half" />
-            <Icon type="radio-selected" />
-            <Icon type="picture" />
-            <Icon type="printer" />
-            <Icon type="pause" />
-            <Icon type="play" />
-            <Icon type="search" />
-            <Icon type="download" />
-            <Icon type="dropdown" />
-            <Icon type="remove-element" />
-            <Icon type="inline-info" />
-        </div>
+        <>
+            {
+                iconSet.glyphs.map(({ css: iconName }) => (
+                    <Icon
+                        type={iconName}
+                        spinning={iconName.includes('loading')} />
+                ))
+            }
+        </>
     );
 }