From 0c529c8c227c610a2f03c8b7b8d052a93d006d32 Mon Sep 17 00:00:00 2001
From: AndyKIron <andy.kononenko@unity3d.com>
Date: Wed, 8 Nov 2023 17:08:27 +0200
Subject: [PATCH] chore(isct-97): added icons storybook page

---
 .../storybook-foundations/v4/icons/icons.mdx  | 101 ++++++++++
 .../v4/icons/iconsData.ts                     | 172 ++++++++++++++++++
 2 files changed, 273 insertions(+)
 create mode 100644 projects/fusion-ui/storybook-foundations/v4/icons/icons.mdx
 create mode 100644 projects/fusion-ui/storybook-foundations/v4/icons/iconsData.ts

diff --git a/projects/fusion-ui/storybook-foundations/v4/icons/icons.mdx b/projects/fusion-ui/storybook-foundations/v4/icons/icons.mdx
new file mode 100644
index 000000000..35e6ff68f
--- /dev/null
+++ b/projects/fusion-ui/storybook-foundations/v4/icons/icons.mdx
@@ -0,0 +1,101 @@
+import {Meta, IconGallery, IconItem} from '@storybook/addon-docs';
+import {assetsPath, iconsData, iconsBrandedData, iconsADUnitData, iconsABTestData} from "./iconsData";
+
+<Meta title="V4/Foundation/Icons"/>
+
+<style>
+{
+`
+.icons-title{
+    color: var(--text-primary);
+    margin-bottom: 8px;
+    margin-top: 32px;
+    display: flex;
+    gap: var(--spacing-400);
+}
+.icons-title div{
+    color: var(--text-secondary);
+}
+.icons-wrapper {
+    padding: 32px;
+    border: 1px solid var(--common-divider);
+}
+`
+}
+</style>
+# Icons
+
+**<a href="https://phosphoricons.com/" target="_blank">Phosphor</a>** provides a set of commonly used interface icons you can use in your project.
+<div style={{display: 'flex', alignItems: 'center', gap: '12px'}}>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="#1E1E1E" rx="16"/><g clip-path="url(#a)"><path fill="#1ABCFE" d="M16 16.178a3.378 3.378 0 1 1 6.756 0 3.378 3.378 0 0 1-6.756 0Z"/><path fill="#0ACF83" d="M9.244 22.933a3.378 3.378 0 0 1 3.378-3.378H16v3.378a3.378 3.378 0 0 1-6.756 0Z"/><path fill="#FF7262" d="M16 6.044V12.8h3.378a3.378 3.378 0 0 0 0-6.756H16Z"/><path fill="#F24E1E" d="M9.244 9.422a3.378 3.378 0 0 0 3.378 3.378H16V6.044h-3.378a3.378 3.378 0 0 0-3.378 3.378Z"/><path fill="#A259FF" d="M9.244 16.178a3.378 3.378 0 0 0 3.378 3.378H16V12.8h-3.378a3.378 3.378 0 0 0-3.378 3.378Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M9.244 6.044h13.511v20.267H9.245z"/></clipPath></defs></svg>
+    <div>**<a href="https://www.figma.com/community/file/903830135544202908/phosphor-icons" target="_blank">View in Figma</a>**</div>
+</div>
+
+In additional to the icons provided by Phosphor, we also provide a set of icons that are commonly used in our **V4 style** components.
+
+### Usage
+Put ```import {IconModule} from '@ironsource/fusion-ui/components/icon/v1';``` and
+```imports: [CommonModule, IconModule,.....``` in your static component or module
+```<fusion-icon name="ICON_NAME"></fusion-icon>``` in your template.
+
+**ICON_NAME** here it path to icon, for example: ```<fusion-icon name="v4/arrowLineLeft"></fusion-icon>```
+
+<div class='sb-unstyled icons-title fusion-v4 font-v4-subtitle-1'>Icons <div class="font-v4-cap">(icon name prefix: "v4")</div></div>
+<div class="sb-unstyled icons-wrapper fusion-v4">
+<IconGallery style={{marginTop: '24px'}}>
+    {
+        iconsData.map(icon=>{
+            return (
+                <IconItem name={icon.name} key={icon.name}>
+                    <img src={assetsPath + icon.path} alt={icon.name} style={{width: '24px', height: '24px'}}/>
+                </IconItem>
+            )
+        })
+    }
+</IconGallery>
+</div>
+
+<div class='sb-unstyled icons-title fusion-v4 font-v4-subtitle-1'>Branded <div class="font-v4-cap">(icon name prefix: "v4/branded")</div></div>
+<div class="sb-unstyled icons-wrapper fusion-v4">
+<IconGallery style={{marginTop: '24px'}}>
+    {
+        iconsBrandedData.map(icon=>{
+            return (
+                <IconItem name={icon.name} key={icon.name}>
+                    <img src={assetsPath + icon.path} alt={icon.name} style={{width: '24px', height: '24px'}}/>
+                </IconItem>
+            )
+        })
+    }
+</IconGallery>
+</div>
+
+<div class='sb-unstyled icons-title fusion-v4 font-v4-subtitle-1'>Ad Unit <div class="font-v4-cap">(icon name prefix: "v4/ad-unit")</div></div>
+<div class="sb-unstyled icons-wrapper fusion-v4">
+<IconGallery style={{marginTop: '24px'}}>
+    {
+        iconsADUnitData.map(icon=>{
+            return (
+                <IconItem name={icon.name} key={icon.name}>
+                    <img src={assetsPath + icon.path} alt={icon.name} style={{width: '24px', height: '24px'}}/>
+                </IconItem>
+            )
+        })
+    }
+</IconGallery>
+</div>
+
+<div class='sb-unstyled icons-title fusion-v4 font-v4-subtitle-1'>A/B test <div class="font-v4-cap">(icon name prefix: "v4/ab-test")</div></div>
+<div class="sb-unstyled icons-wrapper fusion-v4">
+<IconGallery style={{marginTop: '24px'}}>
+    {
+        iconsABTestData.map(icon=>{
+            return (
+                <IconItem name={icon.name} key={icon.name}>
+                    <img src={assetsPath + icon.path} alt={icon.name} style={{width: '38px', height: '38px'}}/>
+                </IconItem>
+            )
+        })
+    }
+</IconGallery>
+</div>
diff --git a/projects/fusion-ui/storybook-foundations/v4/icons/iconsData.ts b/projects/fusion-ui/storybook-foundations/v4/icons/iconsData.ts
new file mode 100644
index 000000000..8d0fbbfe3
--- /dev/null
+++ b/projects/fusion-ui/storybook-foundations/v4/icons/iconsData.ts
@@ -0,0 +1,172 @@
+export const assetsPath = 'https://fusion.ironsrc.net/assets/icons/';
+export const iconsData = [
+    {
+        name: 'add',
+        path: 'v4/add.svg'
+    },
+    {
+        name: 'arrow_square_out',
+        path: 'v4/arrow_square_out.svg'
+    },
+    {
+        name: 'arrowLineLeft',
+        path: 'v4/arrowLineLeft.svg'
+    },
+    {
+        name: 'arrowLineRight',
+        path: 'v4/arrowLineRight.svg'
+    },
+    {
+        name: 'bank',
+        path: 'v4/bank.svg'
+    },
+    {
+        name: 'caret_down',
+        path: 'v4/caret_down.svg'
+    },
+    {
+        name: 'caret_right',
+        path: 'v4/caret_right.svg'
+    },
+    {
+        name: 'chart_line_up',
+        path: 'v4/chart_line_up.svg'
+    },
+    {
+        name: 'currency-circle-dollar',
+        path: 'v4/currency-circle-dollar.svg'
+    },
+    {
+        name: 'dashboard',
+        path: 'v4/dashboard.svg'
+    },
+    {
+        name: 'faders',
+        path: 'v4/faders.svg'
+    },
+    {
+        name: 'house',
+        path: 'v4/house.svg'
+    },
+    {
+        name: 'lightning',
+        path: 'v4/lightning.svg'
+    },
+    {
+        name: 'logout',
+        path: 'v4/logout.svg'
+    },
+    {
+        name: 'mail_outline',
+        path: 'v4/mail_outline.svg'
+    },
+    {
+        name: 'medal',
+        path: 'v4/medal.svg'
+    },
+    {
+        name: 'mediation',
+        path: 'v4/mediation.svg'
+    },
+    {
+        name: 'placeholder',
+        path: 'v4/placeholder.svg'
+    },
+    {
+        name: 'question',
+        path: 'v4/question.svg'
+    },
+    {
+        name: 'rocket_launch',
+        path: 'v4/rocket_launch.svg'
+    },
+    {
+        name: 'sketch-logo',
+        path: 'v4/sketch-logo.svg'
+    },
+    {
+        name: 'userCircle',
+        path: 'v4/userCircle.svg'
+    },
+    {
+        name: 'wrench',
+        path: 'v4/wrench.svg'
+    }
+];
+
+export const iconsBrandedData = [
+    {
+        name: 'android',
+        path: 'v4/branded/android.svg'
+    },
+    {
+        name: 'app-store',
+        path: 'v4/branded/app-store.svg'
+    },
+    {
+        name: 'bidding',
+        path: 'v4/branded/bidding.svg'
+    },
+    {
+        name: 'google-play',
+        path: 'v4/branded/google-play.svg'
+    },
+    {
+        name: 'ios',
+        path: 'v4/branded/ios.svg'
+    },
+    {
+        name: 'ironsource',
+        path: 'v4/branded/ironsource.svg'
+    },
+    {
+        name: 'unity',
+        path: 'v4/branded/unity.svg'
+    },
+    {
+        name: 'web-app.svg',
+        path: 'v4/branded/web-app.svg'
+    }
+];
+
+export const iconsADUnitData = [
+    {
+        name: 'banner',
+        path: 'v4/ad-unit/banner.svg'
+    },
+    {
+        name: 'interstitial',
+        path: 'v4/ad-unit/interstitial.svg'
+    },
+    {
+        name: 'native',
+        path: 'v4/ad-unit/native.svg'
+    },
+    {
+        name: 'offerwall',
+        path: 'v4/ad-unit/offerwall.svg'
+    },
+    {
+        name: 'reworded-video',
+        path: 'v4/ad-unit/reworded-video.svg'
+    }
+];
+
+export const iconsABTestData = [
+    {
+        name: 'ab',
+        path: 'v4/ab-test/ab.svg'
+    },
+    {
+        name: '2a',
+        path: 'v4/ab-test/2a.svg'
+    },
+    {
+        name: '2b',
+        path: 'v4/ab-test/2b.svg'
+    },
+    {
+        name: 'ab-gray',
+        path: 'v4/ab-test/ab-gray.svg'
+    }
+];