Merge pull request #251 from ironSource/feature/isct-97-ui-style-v4

ISCT-97: Add UI style v4
ironSource · Nov 16, 2023 · ab13e0d · ab13e0d
2 parents 1a326c1 + be3a8a2
commit ab13e0d
Show file tree

Hide file tree

Showing 96 changed files with 2,082 additions and 224 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,5 +1,5 @@
 <link rel="stylesheet" href="https://fusion.ironsrc.net/Angular_14/v26/styles.5859cbb869f0ab3e.css">
-<link rel="stylesheet" href="https://fusion-ui.s3.eu-west-1.amazonaws.com/release/6.0.1/style/v4/fonts.css">
+<link rel="stylesheet" href="https://fusion-ui.s3.eu-west-1.amazonaws.com/release/6.2.2-rc.4/style/v4/style-guide.css">
 
 <style>
     body {
@@ -61,31 +61,32 @@
     /* endregion */
 
     /* region shadows */
-    .fu-shadow-xs{box-shadow:0px 1px 2px 0px rgba(16,24,40,.05)}.fu-shadow-sm{box-shadow:0px 1px 3px 0px rgba(16,24,40,.1),0px 1px 2px 0px rgba(16,24,40,.06)}.fu-shadow-md{box-shadow:0px 4px 8px -2px rgba(16,24,40,.1),0px 2px 4px -2px rgba(16,24,40,.06)}.fu-shadow-lg{box-shadow:0px 12px 16px -4px rgba(16,24,40,.08),0px 4px 6px -2px rgba(16,24,40,.03)}.fu-shadow-xl{box-shadow:0px 20px 24px -6px rgba(16,24,40,.08),0px 8px 8px -4px rgba(16,24,40,.03)}.fu-shadow-xxl{box-shadow:0px 24px 48px -12px rgba(16,24,40,.18)}.fu-shadow-xxxl{box-shadow:0px 19px 32px 2px rgba(44,45,45,.14)}.fu-shadow-slg{box-shadow:0px 27px 27px 2px rgba(44,45,45,.14)}
-
     .fu-shadow-examples{
+        width: 675px;
+        margin: 32px auto;
         display: flex;
+        padding: 40px;
+        justify-content: space-between;
+        align-items: center;
+        align-content: center;
+        row-gap: 48px;
+        align-self: stretch;
         flex-wrap: wrap;
+        border-radius: 8px;
+        background: #F1F1F1;
+    }
+    .fu-shadow-example-holder {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
         align-items: center;
-        justify-content: space-between;
-        gap: 38px;
-        padding: 80px;
-        background-color: #EDEDED;
+        gap: 16px;
     }
     .fu-shadow-example {
         width: 124px;
         height: 124px;
         background-color: #fff;
         border-radius: 16px;
-        display: flex;
-        gap: 8px;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        font-size: 12px;
-    }
-    .fu-shadow-hr{
-        flex-basis: 100%;
     }
     /* endregion */
 

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -20,7 +20,39 @@ const preview = {
         docs: {inlineStories: true},
         options: {
             storySort: {
-                order: ['Introduction', 'Styleguide', ['Colors', 'Typography', 'Iconography', 'Grid system', '*'], 'Components'],
+                order: [
+                    'Introduction',
+                    'V4',
+                    [
+                        'Foundation',
+                        [
+                            'Typography',
+                            'Palette colors',
+                            'Elevations',
+                            'Border radius',
+                            'Spacing',
+                            'Grid',
+                            'Breakpoints',
+                        ],
+                        'Components',
+                        '*',
+                    ],
+                    'V3',
+                    [
+                        'Foundation',
+                        [
+                            'Typography',
+                            'Palette color',
+                            'Elevations',
+                            'Border radius',
+                            'Spacing',
+                            'Grid',
+                            'Breakpoints',
+                        ],
+                        'Components',
+                        '*',
+                    ],
+                ],
                 method: 'alphabetical',
                 locales: 'en-Us'
             },

diff --git a/.storybook/tsconfig.json b/.storybook/tsconfig.json
@@ -5,6 +5,6 @@
         "allowSyntheticDefaultImports": true
     },
     "exclude": ["../projects/**/*.spec.ts"],
-    "include": ["../projects/fusion-ui/components/**/*"],
+    "include": ["../projects/fusion-ui/components/**/*", "../projects/fusion-ui/storybook-foundations/**/*"],
     "files": ["./typings.d.ts"]
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+### [6.2.2-rc.5](https://github.com/ironSource/fusion-ui/compare/v6.2.2-rc.4...v6.2.2-rc.5) (2023-11-16)
+
+### [6.2.2-rc.4](https://github.com/ironSource/fusion-ui/compare/v6.2.2-rc.3...v6.2.2-rc.4) (2023-11-09)
+
+### [6.2.2-rc.3](https://github.com/ironSource/fusion-ui/compare/v6.2.2-rc.2...v6.2.2-rc.3) (2023-11-07)
+
+### [6.2.2-rc.2](https://github.com/ironSource/fusion-ui/compare/v6.2.2-rc.1...v6.2.2-rc.2) (2023-11-07)
+
+### [6.2.2-rc.1](https://github.com/ironSource/fusion-ui/compare/v6.2.2-rc.0...v6.2.2-rc.1) (2023-11-05)
+
+### [6.2.2-rc.0](https://github.com/ironSource/fusion-ui/compare/v6.2.1...v6.2.2-rc.0) (2023-11-05)
+
 ### [6.2.1](https://github.com/ironSource/fusion-ui/compare/v6.2.1-rc.1...v6.2.1) (2023-11-05)
 
 ### [6.2.1-rc.1](https://github.com/ironSource/fusion-ui/compare/v6.2.1-rc.0...v6.2.1-rc.1) (2023-11-02)

diff --git a/README.md b/README.md
@@ -12,6 +12,6 @@ Fusion-UI also comes with built-in accessibility features, ensuring that your ap
 
 Whether you're building a simple website or a complex web application, Fusion-UI is the perfect choice for your UI needs. Get started today and experience the power and simplicity of Fusion-UI!
 
-**FusionUI installation:**
+**FusionUI installation:** 
 
 ```npm install --save @ironsource/fusion-ui```
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "fusion-ui",
-    "version": "6.2.1",
+    "version": "6.2.2-rc.5",
     "description": "UI library created by ironSource",
     "license": "MIT",
     "repository": {

diff --git a/projects/fusion-ui/components/button/v3/button.component.stories.ts b/projects/fusion-ui/components/button/v3/button.component.stories.ts
@@ -12,7 +12,7 @@ const sizes = [null, 'small', 'large'];
 const themes = ['primary', 'secondary', 'third', 'danger'];
 
 export default {
-    title: 'Components/Button',
+    title: 'V3/Components/Button',
     component: ButtonComponent,
     decorators: [
         moduleMetadata({

diff --git a/projects/fusion-ui/components/calendar/v3/calendar.component.stories.ts b/projects/fusion-ui/components/calendar/v3/calendar.component.stories.ts
@@ -25,7 +25,7 @@ const START_DATE = new Date(TODAY.getFullYear(), TODAY.getMonth(), 2);
 const END_DATE = new Date(TODAY.getFullYear(), TODAY.getMonth() + 1, -3);
 
 export default {
-    title: 'Components/Dates/Calendar',
+    title: 'V3/Components/Dates/Calendar',
     component: CalendarComponent,
     decorators: [
         moduleMetadata({

diff --git a/projects/fusion-ui/components/checkbox/v3/checkbox.component.stories.ts b/projects/fusion-ui/components/checkbox/v3/checkbox.component.stories.ts
@@ -16,7 +16,7 @@ const formControlChecked = new FormControl(true);
 const formControlUnchecked = new FormControl(false);
 
 export default {
-    title: 'Components/Inputs/Checkbox',
+    title: 'V3/Components/Inputs/Checkbox',
     component: CheckboxComponent,
     decorators: [
         moduleMetadata({

diff --git a/projects/fusion-ui/components/checkbox/v3/checkbox.mdx b/projects/fusion-ui/components/checkbox/v3/checkbox.mdx
@@ -2,7 +2,7 @@ import { Meta, Story, Source,  ArgsTable} from '@storybook/blocks';
 import * as ComponentStories from './checkbox.component.stories';
 import {CheckboxComponent} from "./checkbox.component";
 
-<Meta title="Components/Inputs/Checkbox/All"/>
+<Meta title="V3/Components/Inputs/Checkbox/All"/>
 
 # Checkbox
 Switches are the preferred way to adjust settings on mobile. The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label.

diff --git a/projects/fusion-ui/components/chip-filter/v3/chip-filter.component.stories.ts b/projects/fusion-ui/components/chip-filter/v3/chip-filter.component.stories.ts
@@ -14,7 +14,7 @@ import {DropdownDualMultiSelectModule} from '@ironsource/fusion-ui/components/dr
 import {ChipFilterComponentConfigurations} from '@ironsource/fusion-ui/components/chip-filter/common/base';
 
 export default {
-    title: 'Components/Filters/Filter (Chip)',
+    title: 'V3/Components/Filters/Filter (Chip)',
     component: ChipFilterComponent,
     decorators: [
         moduleMetadata({

diff --git a/projects/fusion-ui/components/chip-filters/v3/stories/chip-filters.component.stories.ts b/projects/fusion-ui/components/chip-filters/v3/stories/chip-filters.component.stories.ts
@@ -20,7 +20,7 @@ import {DaterangeModule, DaterangeOptions} from '@ironsource/fusion-ui/component
 import {DropdownDualMultiSelectModule} from '@ironsource/fusion-ui/components/dropdown-dual-multi-select';
 
 export default {
-    title: 'Components/Filters/Filter Panel',
+    title: 'V3/Components/Filters/Filter Panel',
     component: ChipFiltersComponent,
     decorators: [
         moduleMetadata({

diff --git a/projects/fusion-ui/components/chip-filters/v3/stories/chip-filters.dynamic.stories.ts b/projects/fusion-ui/components/chip-filters/v3/stories/chip-filters.dynamic.stories.ts
@@ -20,7 +20,7 @@ import {
 import {ChipFilterComponentConfigurations} from '@ironsource/fusion-ui/components/chip-filter/common/base';
 
 export default {
-    title: 'Components/Filters/Filter Panel Dynamic',
+    title: 'V3/Components/Filters/Filter Panel Dynamic',
     component: ChipFiltersComponent,
     decorators: [
         moduleMetadata({

diff --git a/projects/fusion-ui/components/daterange/v3/datepicker.component.stories.ts b/projects/fusion-ui/components/daterange/v3/datepicker.component.stories.ts
@@ -9,7 +9,7 @@ import {IconModule} from '@ironsource/fusion-ui/components/icon/v1';
 import {DaterangeComponent, DaterangeModule, DaterangeOptions, DaterangeSelection} from './';
 
 export default {
-    title: 'Components/Dates/DatePicker',
+    title: 'V3/Components/Dates/DatePicker',
     component: DaterangeComponent,
     decorators: [
         moduleMetadata({

diff --git a/projects/fusion-ui/components/daterange/v3/daterange.component.stories.ts b/projects/fusion-ui/components/daterange/v3/daterange.component.stories.ts
@@ -19,7 +19,7 @@ const CUSTOM_PRESET_LAST_3_DAYS: DaterangeCustomPreset = {
 };
 
 export default {
-    title: 'Components/Dates/Date range',
+    title: 'V3/Components/Dates/Date range',
     component: DaterangeComponent,
     decorators: [
         moduleMetadata({

diff --git a/...nts/dropdown-dual-multi-select/v3/stories/dropdown-dual-multi-select.component.stories.ts b/...nts/dropdown-dual-multi-select/v3/stories/dropdown-dual-multi-select.component.stories.ts
@@ -17,7 +17,7 @@ import {
 } from '@ironsource/fusion-ui/components/dropdown/v3/stories/dropdown.mock';
 
 export default {
-    title: 'Components/Dropdown/Include-Exclude',
+    title: 'V3/Components/Dropdown/Include-Exclude',
     component: DropdownDualMultiSelectComponent,
     decorators: [
         moduleMetadata({

diff --git a/projects/fusion-ui/components/dropdown/v3/stories/dropdown.component.stories.ts b/projects/fusion-ui/components/dropdown/v3/stories/dropdown.component.stories.ts
@@ -21,7 +21,7 @@ import {
 import {ApiBase} from '@ironsource/fusion-ui/components/api-base';
 
 export default {
-    title: 'Components/Dropdown',
+    title: 'V3/Components/Dropdown',
     component: DropdownComponent,
     decorators: [
         moduleMetadata({

diff --git a/projects/fusion-ui/components/file-csv-upload/v3/file-csv-upload.component.stories.ts b/projects/fusion-ui/components/file-csv-upload/v3/file-csv-upload.component.stories.ts
@@ -10,7 +10,7 @@ import {FileDragAndDropState} from '@ironsource/fusion-ui/components/file-drag-a
 const defaultFileState: FileDragAndDropState = {name: ''};
 
 const meta: Meta<FileCsvUploadComponent> = {
-    title: 'Components/CSV File Uploader',
+    title: 'V3/Components/CSV File Uploader',
     component: FileCsvUploadComponent,
     decorators: [
         moduleMetadata({

diff --git a/projects/fusion-ui/components/floating-toolbar/v3/floating-toolbar.component.stories.ts b/projects/fusion-ui/components/floating-toolbar/v3/floating-toolbar.component.stories.ts
@@ -8,7 +8,7 @@ import {FloatingToolbarComponent} from '@ironsource/fusion-ui/components/floatin
 import {ButtonModule} from '@ironsource/fusion-ui/components/button';
 
 export default {
-    title: 'Components/Floating toolbar',
+    title: 'V3/Components/Floating toolbar',
     component: FloatingToolbarComponent,
     decorators: [
         moduleMetadata({

diff --git a/projects/fusion-ui/components/icon/v1/icon.component.scss b/projects/fusion-ui/components/icon/v1/icon.component.scss
@@ -5,9 +5,6 @@ fusion-icon {
         max-height: 100%;
         width: inherit;
         height: inherit;
-        * {
-            fill: currentColor;
-        }
     }
     &.loading {
         svg{
@@ -16,4 +13,11 @@ fusion-icon {
             }
         }
     }
+    &:not(.fu-colored) {
+        svg {
+            * {
+                fill: currentColor;
+            }
+        }
+    }
   }
diff --git a/projects/fusion-ui/components/icon/v1/icon.component.ts b/projects/fusion-ui/components/icon/v1/icon.component.ts
@@ -12,7 +12,8 @@ import {SvgComponent} from '@ironsource/fusion-ui/components/svg';
 export class IconComponent extends SvgComponent {
     @Input() set name(val: IconData) {
         if (typeof val === 'string') {
-            this.onNameChanged(val);
+            this.setLibPath(val);
+            this.onNameChanged(this.iconName ?? val);
         } else {
             this.libVersion = val.iconVersion;
             this.onNameChanged(val.iconName);
@@ -25,7 +26,7 @@ export class IconComponent extends SvgComponent {
         if (!this.iconName) {
             throw new Error(`Asset path-name '${this.svgPath}' not set`);
         } else {
-            if (this.svgOptions && this.svgOptions.assetsPath) {
+            if (this.svgOptions?.assetsPath) {
                 this.svgPath =
                     this.svgOptions.assetsPath === 'https://fusion.ironsrc.net/assets'
                         ? `${this.libVersion}/${this.iconName}`
@@ -35,6 +36,18 @@ export class IconComponent extends SvgComponent {
         return super.getUrlPath();
     }
 
+    private setLibPath(value: string): void {
+        if (typeof value === 'string' && value.includes('/')) {
+            const lastIndex = value.lastIndexOf('/');
+            this.libVersion = value.substring(0, lastIndex);
+            this.iconName = value.substring(lastIndex + 1);
+            // for phosphor regular icons
+            if (this.libVersion === 'ph') {
+                this.libVersion += '/regular';
+            }
+        }
+    }
+
     private onNameChanged(value: string): void {
         this.renderer.removeClass(
             this.elementRef.nativeElement,

diff --git a/projects/fusion-ui/components/input-inline/v3/input-inline.component.stories.ts b/projects/fusion-ui/components/input-inline/v3/input-inline.component.stories.ts
@@ -13,7 +13,7 @@ import {dedent} from 'ts-dedent';
 import {InputOptions} from '@ironsource/fusion-ui/components/input';
 
 export default {
-    title: 'Components/Inputs/Input-Inline',
+    title: 'V3/Components/Inputs/Input-Inline',
     component: InputInlineComponent,
     decorators: [
         moduleMetadata({

diff --git a/projects/fusion-ui/components/input/v3/input.component.stories.ts b/projects/fusion-ui/components/input/v3/input.component.stories.ts
@@ -22,7 +22,7 @@ const inputFormControlPassword = new FormControl('qwerty');
 // endregion
 
 export default {
-    title: 'Components/Inputs/Input',
+    title: 'V3/Components/Inputs/Input',
     component: InputComponent,
     decorators: [
         moduleMetadata({

diff --git a/...usion-ui/components/layout/v4/components/layout-header/layout-header.component.stories.ts b/...usion-ui/components/layout/v4/components/layout-header/layout-header.component.stories.ts
@@ -17,7 +17,7 @@ const actionsData = {
 };
 
 const meta: Meta<LayoutHeaderComponent> = {
-    title: 'Components/Layout/Header',
+    title: 'V4/Components/Layout/Header',
     component: LayoutHeaderComponent,
     decorators: [
         moduleMetadata({

diff --git a/projects/fusion-ui/components/layout/v4/stories/layout-admin.stories.ts b/projects/fusion-ui/components/layout/v4/stories/layout-admin.stories.ts
@@ -19,7 +19,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {TopFilterIncludeExcludeComponent} from '@ironsource/fusion-ui/components/top-filter-include-exclude';
 
 const meta: Meta<LayoutStoryWrapperComponent> = {
-    title: 'Components/Layout/One Main Parent',
+    title: 'V4/Components/Layout/One Main Parent',
     component: LayoutComponent,
     decorators: [
         moduleMetadata({

diff --git a/projects/fusion-ui/components/layout/v4/stories/layout.component.stories.ts b/projects/fusion-ui/components/layout/v4/stories/layout.component.stories.ts
@@ -22,7 +22,7 @@ import {MOK_APPLICATIONS_ONE_LINE_OPTIONS} from '@ironsource/fusion-ui/component
 import {DropdownOption} from '@ironsource/fusion-ui/components/dropdown-option/entities';
 
 const meta: Meta<LayoutStoryWrapperComponent> = {
-    title: 'Components/Layout',
+    title: 'V4/Components/Layout',
     component: LayoutComponent,
     decorators: [
         moduleMetadata({

diff --git a/projects/fusion-ui/components/menu-drop/v3/menu-drop.component.stories.ts b/projects/fusion-ui/components/menu-drop/v3/menu-drop.component.stories.ts
@@ -15,7 +15,7 @@ const MOCK_MENU_ITEMS: MenuDropItem[] = [
 ];
 
 export default {
-    title: 'Components/Dropped Menu',
+    title: 'V3/Components/Dropped Menu',
     component: MenuDropComponent,
     decorators: [
         moduleMetadata({

diff --git a/...fusion-ui/components/modal/v3/components/modal-content/modal-content.component.stories.ts b/...fusion-ui/components/modal/v3/components/modal-content/modal-content.component.stories.ts
@@ -7,7 +7,7 @@ import {ButtonModule} from '@ironsource/fusion-ui/components/button/v3';
 import {ModalContentComponent} from '@ironsource/fusion-ui/components/modal';
 
 export default {
-    title: 'Components/Dialog/Content',
+    title: 'V3/Components/Dialog/Content',
     component: ModalContentComponent,
     decorators: [
         moduleMetadata({

diff --git a/...s/fusion-ui/components/modal/v3/components/modal-footer/modal-footer.component.stories.ts b/...s/fusion-ui/components/modal/v3/components/modal-footer/modal-footer.component.stories.ts
@@ -13,7 +13,7 @@ const actionsData = {
 };
 
 export default {
-    title: 'Components/Dialog/Footer',
+    title: 'V3/Components/Dialog/Footer',
     component: ModalFooterComponent,
     decorators: [
         moduleMetadata({

diff --git a/...s/fusion-ui/components/modal/v3/components/modal-header/modal-header.component.stories.ts b/...s/fusion-ui/components/modal/v3/components/modal-header/modal-header.component.stories.ts
@@ -13,7 +13,7 @@ const actionsData = {
 };
 
 export default {
-    title: 'Components/Dialog/Header',
+    title: 'V3/Components/Dialog/Header',
     component: ModalHeaderComponent,
     decorators: [
         moduleMetadata({