feat(icon): all of the current icons are added (#120)

* feat(icon): all of the current icons are added

* fix(storybook): still this workaround needed

Normally by the v6.5 of storybook we should not need that replace but I noticed that it still
doesn't work is intended.

* docs(icon): fine tune storybook controls

Co-authored-by: Murat Çorlu <murat.corlu@trendyol.com>

.editorconfig

@@ -1,4 +1,4 @@
-[*.{js,jsx,ts,tsx,vue}]
+[*.{js,jsx,ts,tsx,vue,mdx}]
 indent_style = space
 indent_size = 2
 trim_trailing_whitespace = true

.storybook/preview.js

@@ -9,6 +9,7 @@ export const parameters = {
   docs: {
     transformSource: source =>
       source
+        .replace(/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g, '')
         // Clean empty boolean attribute values
         .replace(/=\"\"/g, ''),
   },

docs/design-system/iconography.stories.mdx

@@ -1,4 +1,5 @@
 import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs';
+import icons from '../../src/components/icon/icon-list';
 
 <Meta
   title="Design System/Iconography"
@@ -14,8 +15,22 @@ import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs';
 
 # Iconography
 
+* All icons are provided as SVGs
+* All icons are single color (Some have multiple layers with different opacity of same color)
+* All icons has square canvas (By default 24x24)
+* Icon names as in `snake_case`
+* Icons are for decorative purposes. Don't use them as a data in your documents (like an instructive image)
+
+You can check [icon component](/docs/components-icon--info-icon) for usage information and interactive demos.
+
+## List of icons
+
 <IconGallery>
-  <IconItem name="info">
-    <gr-icon name="info"></gr-icon>
-  </IconItem>
+  {
+    icons.map((iconName) => (
+      <IconItem key={iconName} name={iconName}>
+        <gr-icon name={iconName}></gr-icon>
+      </IconItem>
+    ))
+  }
 </IconGallery>

src/components/icon/gr-icon.stories.mdx

@@ -3,23 +3,49 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addon-docs';
 import { styleMap } from 'lit/directives/style-map.js';
 import { map } from 'lit/directives/map.js';
+import icons from './icon-list';
 
 <Meta
   title="Components/Icon"
   component="gr-icon"
   argTypes={{
     name: {
       control: {
-        type: 'text',
+        type: 'select',
+        options: icons,
         description: 'Name of the icon'
       }
     },
+    size: {
+      control: {
+        type: 'number',
+        description: 'Size of the icon (in pixels)',
+        min: 8,
+        max: 64
+      }
+    },
+    color: {
+      control: {
+        type: 'color',
+        description: 'Color of the icon',
+        presetColors: [{
+          color: 'var(--gr-color-primary)',
+          title: 'Primary'
+        },{
+          color: 'var(--gr-color-secondary)',
+          title: 'Secondary'
+        },{
+          color: 'var(--gr-color-success)',
+          title: 'Success'
+        }]
+      }
+    },
   }}
 />
 
-export const Template = (args) => html`<gr-icon 
+export const Template = (args) => html`<gr-icon
   name="${args.name}"
-  style="${styleMap({'font-size': args.size, 'color': args.color})}"></gr-icon>`;
+  style=${styleMap({'font-size': parseInt(args.size) > 0 ? `${args.size}px` : args.size, 'color': args.color})}></gr-icon>`;
 
 export const SizeVariations = (args) => html`
 <gr-icon name="${args.name}" style="font-size: var(--gr-font-size-m)"></gr-icon>
@@ -36,6 +62,11 @@ export const ColorVariations = (args) => html`
 <gr-icon name="${args.name}" style="color: var(--gr-color-content-passive)"></gr-icon>
 `
 
+export const AllIcons = (args) => html`<div
+  style="${styleMap({'font-size': `${args.size}px`, 'color': args.color})}">\n${
+    icons.map(iconName => html`  <gr-icon name=${iconName} title="${iconName}"></gr-icon> \n`)
+  }</div>`;
+
 # Icon
 
 Icon component is an **internal** component for using inside other Grace components to show some decorative icons.
@@ -47,37 +78,55 @@ Icon component is an **internal** component for using inside other Grace compone
 You can show icons by just using `name` attribute.
 
 <Canvas>
-  <Story name="Info Icon" args={{ name: 'info' }}>
-    {Template.bind({})}
-  </Story>
-  <Story name="Large Alert Icon" args={{ name: 'alert', size: 'var(--gr-font-size-3xl)' }}>
-    {Template.bind({})}
-  </Story>
-  <Story name="Success Check Icon" args={{ name: 'check', color: 'var(--gr-color-success)' }}>
+  <Story name="Single Icon" args={{ name: 'info' }}>
     {Template.bind({})}
   </Story>
 </Canvas>
 
+You can see a list of icons that Grace provides now in our [Iconography](/docs/design-system-iconography--page) page.
+
 ## Sizing Icons
 
-Icon size can be set via CSS with `font-size` property. 
+Icon size can be set via CSS with `font-size` property. By default icons are in the size of current font-size of the tag placement.
 
 <Canvas>
-  <Story name="Icon sizes" args={{ name: 'info' }}>
+  <Story name="Icon sizes" parameters={{
+      controls: {
+        include: ['name']
+      }
+    }} args={{ name: 'info' }}>
     {SizeVariations.bind({})}
   </Story>
 </Canvas>
 
 ## Coloring Icons
 
-Icon color can be set via CSS with `color` property.
+Icon color can be set via CSS with `color` property. By default icons are in the color of current tag placement.
 
 <Canvas>
-  <Story name="Icon colors" args={{ name: 'info' }}>
+  <Story name="Icon colors" parameters={{
+      controls: {
+        include: ['name']
+      }
+    }} args={{ name: 'info' }}>
     {ColorVariations.bind({})}
   </Story>
 </Canvas>
 
+## List of all icons
+
+Here we provide a list of all provided icons. You can see them in custom size and colors in Canvas tab.
+
+<Canvas>
+  <Story name="Icon list" parameters={{
+      controls: {
+        exclude: ['name']
+      }
+    }} args={{ size: 32 }}>
+    {AllIcons.bind({})}
+  </Story>
+</Canvas>
+
 ## Reference
 
 <ArgsTable of="gr-icon" />

src/components/icon/icon-list.ts

@@ -0,0 +1,167 @@
+export default [
+  'academy',
+  'account',
+  'add_note',
+  'add_photo',
+  'add_product',
+  'alert',
+  'archive',
+  'arrow_down',
+  'arrow_left',
+  'arrow_right',
+  'arrow_up',
+  'attach',
+  'award',
+  'back',
+  'back_fill',
+  'barcode',
+  'bill',
+  'book',
+  'browser',
+  'burger',
+  'calendar',
+  'camera',
+  'campaign',
+  'change',
+  'change_fill',
+  'chatbot',
+  'check',
+  'check_fill',
+  'close',
+  'close_fill',
+  'coin',
+  'compass',
+  'confetti',
+  'copy',
+  'delete',
+  'dialog',
+  'dislike',
+  'document',
+  'document_search',
+  'donation',
+  'download',
+  'edit',
+  'excel',
+  'exit',
+  'expand',
+  'export',
+  'external_link',
+  'external_share',
+  'eye_off',
+  'eye_on',
+  'facebook',
+  'filter',
+  'finance_accounting',
+  'fire',
+  'flash',
+  'flash_fill',
+  'forward',
+  'gift',
+  'globe',
+  'go_forward',
+  'graphic',
+  'growth',
+  'hamburger_menu',
+  'handshake',
+  'happy',
+  'heart',
+  'help',
+  'home',
+  'image',
+  'influencer',
+  'info',
+  'label',
+  'light_bulb',
+  'like',
+  'link',
+  'listing',
+  'live_monitor',
+  'live_support',
+  'loading',
+  'lock',
+  'magic_wand',
+  'mail',
+  'mail_opened',
+  'map',
+  'market',
+  'market_order_back',
+  'market_order_cancel',
+  'market_order_change',
+  'market_order_check',
+  'message',
+  'metric_decrease',
+  'metric_increase',
+  'metric_minus',
+  'minus',
+  'minus_fill',
+  'mobile_filled',
+  'mobile_settings',
+  'motorcycle',
+  'my_offers',
+  'normal',
+  'notice',
+  'notification',
+  'order',
+  'order_back',
+  'order_box',
+  'order_cancel',
+  'order_check',
+  'order_return',
+  'order_tracking',
+  'paper',
+  'pause',
+  'pause_fill',
+  'people',
+  'phone',
+  'phone_settings',
+  'photo',
+  'pin',
+  'play',
+  'play_fill',
+  'plus',
+  'plus_fill',
+  'preview',
+  'print',
+  'product',
+  'profile',
+  'profile_check',
+  'rating',
+  'report',
+  'rotate',
+  'sad',
+  'save',
+  'search',
+  'seller_ads',
+  'send',
+  'send_mail',
+  'services',
+  'settings',
+  'share',
+  'shopping_bag',
+  'shopping_bag_back',
+  'shopping_bag_cancel',
+  'shopping_bag_discount',
+  'shopping_bag_return',
+  'sorting',
+  'sound_on',
+  'star',
+  'stop',
+  'stop_fill',
+  'store',
+  'store_performance',
+  'suitcase',
+  'support',
+  'ticket',
+  'truck',
+  'turn_back',
+  'unlock',
+  'upload',
+  'user_management',
+  'vacation_mode',
+  'waiting',
+  'wallet',
+  'warning',
+  'web_filled',
+  'zoom_in',
+  'zoom_out',
+];