From aed1ed1396f95e7e87c59ca95f3df5d7c96b1a42 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Sun, 5 Nov 2023 12:03:34 +0200 Subject: [PATCH 01/39] chore(isct-97): update typography v4 sass and mdx --- .storybook/preview-head.html | 2 +- .../fusion-ui/components/typography-v4.mdx | 49 ++++++++++++++++--- .../src/style/scss/v4/vars/_fonts.scss | 21 +++++--- 3 files changed, 58 insertions(+), 14 deletions(-) diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index b239928ab..82c4af214 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,5 +1,5 @@ - + + +
+ { + borderRadiusData.map(borderRadius => { + return ( +
+
+ {borderRadius.borderRadius} +
+
+ {borderRadius.name} +
+
+ ) + }) + } +
+ +


+### CSS variables +from `@ironsource/fusion-ui/style/v4/style-guide.css` + diff --git a/projects/fusion-ui/storybook-foundations/v4/border-radius/border-radius.stories.ts b/projects/fusion-ui/storybook-foundations/v4/border-radius/border-radius.stories.ts deleted file mode 100644 index 4cf14eb18..000000000 --- a/projects/fusion-ui/storybook-foundations/v4/border-radius/border-radius.stories.ts +++ /dev/null @@ -1,22 +0,0 @@ -import type {Meta, StoryObj} from '@storybook/angular'; -import {moduleMetadata} from '@storybook/angular'; -import {CommonModule} from '@angular/common'; -import {BorderRadiusComponent} from './border-radius.component'; - -const meta: Meta = { - title: 'V4/Foundation/Border radius', - component: BorderRadiusComponent, - decorators: [ - moduleMetadata({ - declarations: [], - imports: [CommonModule] - }) - ] -}; - -export default meta; -type Story = StoryObj; - -export const Palette: Story = { - name: 'Border radius' -}; diff --git a/projects/fusion-ui/storybook-foundations/v4/colors.mdx b/projects/fusion-ui/storybook-foundations/v4/colors.mdx index 7bd418170..7993a6a27 100644 --- a/projects/fusion-ui/storybook-foundations/v4/colors.mdx +++ b/projects/fusion-ui/storybook-foundations/v4/colors.mdx @@ -7,10 +7,10 @@ import * as ColorsPaletteComponent from './colors-palette/colors-palette.stories Radix Colors scales are just simple JavaScript objects, so you can use them with your preferred styling solution easily. [radix-ui.com](https://www.radix-ui.com/colors) -To use our typography add in your *.scss +To use our colors scss variable add in your *.scss `@import '~@ironsource/fusion-ui/style/v4/vars/_colors.scss';` -Or Import css file for *.css +Or import css variable for *.css `@import '~@ironsource/fusion-ui/style/v4/style-guide.css';` diff --git a/projects/fusion-ui/storybook-foundations/v4/shadows.mdx b/projects/fusion-ui/storybook-foundations/v4/shadows.mdx index 770b681bb..107340663 100644 --- a/projects/fusion-ui/storybook-foundations/v4/shadows.mdx +++ b/projects/fusion-ui/storybook-foundations/v4/shadows.mdx @@ -21,31 +21,31 @@ Or Import css file for *.css with shadow classes
xsmall
-
+
small
-
+
medium
-
+
large
-
+
xlarge
-
+
xxlarge
-
+
xxxlarge
-
+
slarge
@@ -54,7 +54,8 @@ Or Import css file for *.css with shadow classes
-## used CSS variables and classes. +


+### CSS variables -## SCSS. +


+### SCSS variables + + + +# Spacing +Positioning UI should be with taught including the empty space between components. This is what creates relationships and hierarchy withing the visual controls. + +Import css file for css variables +`@import '~@ironsource/fusion-ui/style/v4/style-guide.css';` + + +
+ { + spacingData.map(spacing => { + return ( +
+
+
 
+
+
{spacing.name}
+
{spacing.value}
+
+ ) + }) + } +
+ +### Example +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +


+### CSS variables +from `@ironsource/fusion-ui/style/v4/style-guide.css` + + diff --git a/projects/fusion-ui/storybook-foundations/v4/spacing/spacingData.ts b/projects/fusion-ui/storybook-foundations/v4/spacing/spacingData.ts new file mode 100644 index 000000000..69155efea --- /dev/null +++ b/projects/fusion-ui/storybook-foundations/v4/spacing/spacingData.ts @@ -0,0 +1,87 @@ +export const spacingData = [ + { + name: '#25', + cssName: '--spacing-25', + value: '2px' + }, + { + name: '#50', + cssName: '--spacing-50', + value: '4px' + }, + { + name: '#75', + cssName: '--spacing-75', + value: '6px' + }, + { + name: '#100', + cssName: '--spacing-100', + value: '8px' + }, + { + name: '#125', + cssName: '--spacing-125', + value: '10px' + }, + { + name: '#150', + cssName: '--spacing-150', + value: '12px' + }, + { + name: '#200', + cssName: '--spacing-200', + value: '16px' + }, + { + name: '#250', + cssName: '--spacing-250', + value: '20px' + }, + { + name: '#300', + cssName: '--spacing-300', + value: '24px' + }, + { + name: '#400', + cssName: '--spacing-400', + value: '32px' + }, + { + name: '#500', + cssName: '--spacing-500', + value: '40px' + }, + { + name: '#600', + cssName: '--spacing-600', + value: '48px' + }, + { + name: '#700', + cssName: '--spacing-700', + value: '56px' + }, + { + name: '#800', + cssName: '--spacing-800', + value: '64px' + }, + { + name: '#900', + cssName: '--spacing-900', + value: '72px' + }, + { + name: '#1000', + cssName: '--spacing-1000', + value: '80px' + }, + { + name: '#tokenset', + cssName: '--spacing-tokenset', + value: '0px' + } +]; From 5e6a8f1c6d05651dbdeb2010febfb77de466b084 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Tue, 7 Nov 2023 18:27:30 +0200 Subject: [PATCH 20/39] chore(isct-97): added breakpoints and grid-layout --- .storybook/preview.js | 2 +- .../v4/border-radius/border-radius.mdx | 8 +- .../v4/breakpoints/breakpoints.mdx | 106 +++++++++++ .../v4/breakpoints/breakpointsData.ts | 32 ++++ .../v4/grid-layout/grid-layout.mdx | 168 ++++++++++++++++++ .../storybook-foundations/v4/shadows.mdx | 2 +- .../v4/spacing/spacing.mdx | 6 +- 7 files changed, 318 insertions(+), 6 deletions(-) create mode 100644 projects/fusion-ui/storybook-foundations/v4/breakpoints/breakpoints.mdx create mode 100644 projects/fusion-ui/storybook-foundations/v4/breakpoints/breakpointsData.ts create mode 100644 projects/fusion-ui/storybook-foundations/v4/grid-layout/grid-layout.mdx diff --git a/.storybook/preview.js b/.storybook/preview.js index 1471b4b9e..227a26769 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -27,7 +27,7 @@ const preview = { 'Foundation', [ 'Typography', - 'Palette color', + 'Palette colors', 'Elevations', 'Border radius', 'Spacing', diff --git a/projects/fusion-ui/storybook-foundations/v4/border-radius/border-radius.mdx b/projects/fusion-ui/storybook-foundations/v4/border-radius/border-radius.mdx index 77eba1ab7..c9c61a0cd 100644 --- a/projects/fusion-ui/storybook-foundations/v4/border-radius/border-radius.mdx +++ b/projects/fusion-ui/storybook-foundations/v4/border-radius/border-radius.mdx @@ -8,10 +8,14 @@ import {borderRadiusData} from './borderRadiusData'; CSS **box-shadow** is a style property used to add a shadow effect to an element's box (such as a div or an image) on a web page. The property allows you to create a visually appealing 3D-like effect, making the element appear elevated or floating. To use scss variable add in your *.scss -`@import '~@ironsource/fusion-ui/style/v4/vars/border-radius';` +```css +@import '~@ironsource/fusion-ui/style/v4/vars/border-radius'; +``` Or import css file for css variables -`@import '~@ironsource/fusion-ui/style/v4/style-guide.css';` +```css +@import '~@ironsource/fusion-ui/style/v4/style-guide.css'; +``` + +
+ { + breakpointsData.map(breakpoint => { + return ( +
+
+ {breakpoint.name} +
+
+ {breakpoint.text} +
+
+ {breakpoint.type} +
+
+ ) + }) + } +
+ +



+#### Using breakpoints mixins: +Media of at least the minimum breakpoint width. No query for the smallest breakpoint. Makes the @content apply to the given breakpoint and wider. + + + +Media of at most the maximum breakpoint width. No query for the largest breakpoint. Makes the @content apply to the given breakpoint and narrower. + + + +Media that spans multiple breakpoint widths. Makes the @content apply between the min and max breakpoints + + +No minimum for the smallest breakpoint, and no maximum for the largest one. Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. + diff --git a/projects/fusion-ui/storybook-foundations/v4/breakpoints/breakpointsData.ts b/projects/fusion-ui/storybook-foundations/v4/breakpoints/breakpointsData.ts new file mode 100644 index 000000000..1c3bd8dc5 --- /dev/null +++ b/projects/fusion-ui/storybook-foundations/v4/breakpoints/breakpointsData.ts @@ -0,0 +1,32 @@ +export const breakpointsData = [ + { + name: 'Desktop', + text: '1920px and up', + type: 'xl' + }, + { + name: 'Large laptop', + text: '1440px - 1919px', + type: 'lg' + }, + { + name: 'Small laptop', + text: '1280px - 1439px', + type: 'md' + }, + { + name: 'Tablet landscape', + text: '1024px - 1279px', + type: 'sm' + }, + { + name: 'Tablet portrait', + text: '768px - 1023px', + type: 'xs' + }, + { + name: 'Phones', + text: '768px and below', + type: 'xxs' + } +]; diff --git a/projects/fusion-ui/storybook-foundations/v4/grid-layout/grid-layout.mdx b/projects/fusion-ui/storybook-foundations/v4/grid-layout/grid-layout.mdx new file mode 100644 index 000000000..ecfb0edd2 --- /dev/null +++ b/projects/fusion-ui/storybook-foundations/v4/grid-layout/grid-layout.mdx @@ -0,0 +1,168 @@ +import {Meta} from '@storybook/addon-docs'; + + + +# Grid +The Grid layout is here to help you align blocks and widgets into columns and rows in a specific area. By following a pattern made of containers with CSS classes, you can easily design your customized tab content, keeping a visual consistency, readability, and adaptability between screens. + +Import style-guide.css file for css variables +```css +@import '~@ironsource/fusion-ui/style/v4/style-guide.css'; +``` + +### Grid gap +Our grid columns have a 12px padding on either side that results in a 24px gutter between columns and a 12px gutter on the grid edges. Even though our columns are fluid, the gutter remains constant. + + + + +
+
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+
6
+
+
+
7
+
+
+
8
+
+
+
9
+
+
+
10
+
+
+
11
+
+
+
12
+
+
+
+
+
col-2
+
+
+
col-2
+
+
+
col-2
+
+
+
col-2
+
+
+
col-2
+
+
+
col-2
+
+
+
+
+
col-3
+
+
+
col-3
+
+
+
col-3
+
+
+
col-3
+
+
+
+
+
col-4
+
+
+
col-4
+
+
+
col-4
+
+
+
+
+
col-6
+
+
+
col-6
+
+
+
+
+
col-12
+
+
+
+ +### Grid offset +
+
+
+
.col-4
+
+
+
.col-4.offset-4
+
+
+
+
+
.col-3.offset-3
+
+
+
.col-3.offset-3
+
+
+
+
+
.col-6.offset-3
+
+
+
+ diff --git a/projects/fusion-ui/storybook-foundations/v4/shadows.mdx b/projects/fusion-ui/storybook-foundations/v4/shadows.mdx index 107340663..fa75e4b47 100644 --- a/projects/fusion-ui/storybook-foundations/v4/shadows.mdx +++ b/projects/fusion-ui/storybook-foundations/v4/shadows.mdx @@ -13,7 +13,7 @@ To use our shadows scss variables add in your *.scss ``` Or Import css file for *.css with shadow classes ```css - @import '~@ironsource/fusion-ui/style/v4/shadows.css'; + @import '~@ironsource/fusion-ui/style/v4/style-guide.css'; ``` ## Elevations: diff --git a/projects/fusion-ui/storybook-foundations/v4/spacing/spacing.mdx b/projects/fusion-ui/storybook-foundations/v4/spacing/spacing.mdx index 0db98042e..7d78f3623 100644 --- a/projects/fusion-ui/storybook-foundations/v4/spacing/spacing.mdx +++ b/projects/fusion-ui/storybook-foundations/v4/spacing/spacing.mdx @@ -63,8 +63,10 @@ import {spacingData} from './spacingData'; # Spacing Positioning UI should be with taught including the empty space between components. This is what creates relationships and hierarchy withing the visual controls. -Import css file for css variables -`@import '~@ironsource/fusion-ui/style/v4/style-guide.css';` +Import style-guide.css file for css variables +```css +@import '~@ironsource/fusion-ui/style/v4/style-guide.css'; +```
From 688af91226cdef03d832d443a473973518cee657 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Wed, 8 Nov 2023 10:56:04 +0200 Subject: [PATCH 21/39] chore(isct-97): refactor colors mdx story --- .../colors-palette.component.html | 21 ---- .../colors-palette.component.scss | 80 ------------ .../colors-palette.component.ts | 19 --- .../colors-palette/colors-palette.stories.ts | 22 ---- .../v4/{ => colors-palette}/colors.mdx | 117 +++++++++++++++++- 5 files changed, 114 insertions(+), 145 deletions(-) delete mode 100644 projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.html delete mode 100644 projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.scss delete mode 100644 projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.ts delete mode 100644 projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.stories.ts rename projects/fusion-ui/storybook-foundations/v4/{ => colors-palette}/colors.mdx (72%) diff --git a/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.html b/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.html deleted file mode 100644 index da3b7f026..000000000 --- a/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.html +++ /dev/null @@ -1,21 +0,0 @@ -
-
-
{{ colorGroup.key }}
-
-
-
Name
-
Value
-
-
-
-
- {{ token.key }} -
-
-
- {{ token.value }} -
-
-
-
-
diff --git a/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.scss b/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.scss deleted file mode 100644 index 1a8def690..000000000 --- a/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.scss +++ /dev/null @@ -1,80 +0,0 @@ -@import '../../../src/style/scss/v4/fonts'; -@import '../../../src/style/scss/v4/colors'; - -.colors-wrapper { - display: flex; - flex-wrap: wrap; - gap: 32px; - margin: 32px; - padding-bottom: 32px; - .color-block { - width: 425px; - background-color: var(--background-default); - - .color-label { - padding: 1.5rem 1rem 0.75rem 1rem; - color: var(--text-primary); - border: solid 1px var(--common-divider); - @extend %font-v4-heading-1; - &:first-letter { - text-transform: uppercase; - } - } - .color-title { - display: flex; - color: var(--text-primary); - border: solid 1px var(--common-divider); - border-top: 0px; - div { - @extend %font-v4-table-label; - padding: 0.25rem 1rem; - width: 50%; - height: 2.5rem; - display: flex; - align-items: center; - } - } - .color-row { - display: flex; - color: var(--text-primary); - div { - border: solid 1px var(--common-divider); - border-top: 0px; - display: flex; - align-items: center; - height: 2.5rem; - padding: 0.25rem 1rem; - width: 50%; - @extend %font-v4-caption; - &:first-of-type { - display: flex; - gap: 0.5rem; - .icon-holder { - padding: 0; - margin: 0; - width: 16px; - height: 16px; - border: none; - - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='gray' d='M12.548 3.368A6.454 6.454 0 0 0 8 1.5h-.067A6.5 6.5 0 0 0 1.5 8c0 2.688 1.661 4.941 4.335 5.886A2 2 0 0 0 8.5 12a1 1 0 0 1 1-1h2.888a1.988 1.988 0 0 0 1.95-1.555c.112-.492.166-.995.162-1.5a6.457 6.457 0 0 0-1.952-4.577Zm.813 5.857a.993.993 0 0 1-.973.775H9.5a2 2 0 0 0-2 2 1 1 0 0 1-1.332.942C3.906 12.144 2.5 10.25 2.5 8a5.5 5.5 0 0 1 5.443-5.5H8a5.522 5.522 0 0 1 5.5 5.453c.004.428-.042.855-.136 1.272h-.002ZM8.75 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM6 6.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm0 3.5a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm5.5-3.5a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: center; - } - } - &:last-of-type { - border-left: 0px; - display: flex; - gap: 0.5rem; - } - .color-example { - padding: 0; - margin: 0; - width: 16px; - height: 16px; - border: solid 1px var(--common-divider); - border-radius: 0.1875rem; - } - } - } - } -} diff --git a/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.ts b/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.ts deleted file mode 100644 index 4572bb324..000000000 --- a/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {colorPaletteLight} from './colorsData'; - -@Component({ - selector: 'fusion-colors-palette', - standalone: true, - imports: [CommonModule], - templateUrl: './colors-palette.component.html', - styleUrls: ['./colors-palette.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class ColorsPaletteComponent { - colorPalette = colorPaletteLight; - - keepOrder = (a, b) => { - return a; - }; -} diff --git a/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.stories.ts b/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.stories.ts deleted file mode 100644 index bacae4243..000000000 --- a/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors-palette.stories.ts +++ /dev/null @@ -1,22 +0,0 @@ -import type {Meta, StoryObj} from '@storybook/angular'; -import {moduleMetadata} from '@storybook/angular'; -import {CommonModule} from '@angular/common'; -import {ColorsPaletteComponent} from './colors-palette.component'; - -const meta: Meta = { - title: 'V4/Foundation/Palette colors', - component: ColorsPaletteComponent, - decorators: [ - moduleMetadata({ - declarations: [], - imports: [CommonModule] - }) - ] -}; - -export default meta; -type Story = StoryObj; - -export const Palette: Story = { - name: 'Palette colors' -}; diff --git a/projects/fusion-ui/storybook-foundations/v4/colors.mdx b/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors.mdx similarity index 72% rename from projects/fusion-ui/storybook-foundations/v4/colors.mdx rename to projects/fusion-ui/storybook-foundations/v4/colors-palette/colors.mdx index 7993a6a27..da56eeb4e 100644 --- a/projects/fusion-ui/storybook-foundations/v4/colors.mdx +++ b/projects/fusion-ui/storybook-foundations/v4/colors-palette/colors.mdx @@ -1,5 +1,5 @@ -import {Meta, Canvas, Source} from '@storybook/addon-docs'; -import * as ColorsPaletteComponent from './colors-palette/colors-palette.stories'; +import {Meta, Source} from '@storybook/addon-docs'; +import {colorPaletteLight} from './colorsData'; @@ -13,7 +13,118 @@ To use our colors scss variable add in your *.scss Or import css variable for *.css `@import '~@ironsource/fusion-ui/style/v4/style-guide.css';` - + + + +
+ { + Object.entries(colorPaletteLight).map(colorGroup=>{ + return ( +
+
{ colorGroup[0] }
+
+
+
Name
+
Value
+
+ { + Object.entries(colorGroup[1]).map(token=>{ + return ( +
+
{ token[0] }
+
+
+ { token[1] } +
+
+ ) + }) + } +
+
+ ) + }) + } +
+ #### CSS variables from `@ironsource/fusion-ui/style/v4/style-guide.css` From 72678ab92008cfc06588d394a8fb6cc2a60ad997 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Wed, 8 Nov 2023 11:53:18 +0200 Subject: [PATCH 22/39] chore(isct-97): changes in spacing page --- projects/fusion-ui/storybook-foundations/v4/spacing/spacing.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/fusion-ui/storybook-foundations/v4/spacing/spacing.mdx b/projects/fusion-ui/storybook-foundations/v4/spacing/spacing.mdx index 7d78f3623..9912f7e5c 100644 --- a/projects/fusion-ui/storybook-foundations/v4/spacing/spacing.mdx +++ b/projects/fusion-ui/storybook-foundations/v4/spacing/spacing.mdx @@ -15,7 +15,6 @@ import {spacingData} from './spacingData'; padding: 32px; } .spacing-wrapper { - width: 684px; margin: 32px auto; display: flex; padding: var(--spacing-300); From 0c529c8c227c610a2f03c8b7b8d052a93d006d32 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Wed, 8 Nov 2023 17:08:27 +0200 Subject: [PATCH 23/39] 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"; + + + + +# Icons + +**Phosphor** provides a set of commonly used interface icons you can use in your project. +
+ + +
+ +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 +`````` in your template. + +**ICON_NAME** here it path to icon, for example: `````` + +
Icons
(icon name prefix: "v4")
+
+ + { + iconsData.map(icon=>{ + return ( + + {icon.name} + + ) + }) + } + +
+ +
Branded
(icon name prefix: "v4/branded")
+
+ + { + iconsBrandedData.map(icon=>{ + return ( + + {icon.name} + + ) + }) + } + +
+ +
Ad Unit
(icon name prefix: "v4/ad-unit")
+
+ + { + iconsADUnitData.map(icon=>{ + return ( + + {icon.name} + + ) + }) + } + +
+ +
A/B test
(icon name prefix: "v4/ab-test")
+
+ + { + iconsABTestData.map(icon=>{ + return ( + + {icon.name} + + ) + }) + } + +
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' + } +]; From 58c2f3afed9b9ed05323fdad7ac969f38d65a1b2 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Thu, 9 Nov 2023 09:29:21 +0200 Subject: [PATCH 24/39] chore(isct-97): update icons storybook page Remove section of icons from V4 root folder - they are from phosphor icons lib --- .../layout-header/layout-header.component.html | 3 +++ .../storybook-foundations/v4/icons/icons.mdx | 17 +---------------- .../storybook-foundations/v4/icons/iconsData.ts | 7 +++++-- 3 files changed, 9 insertions(+), 18 deletions(-) diff --git a/projects/fusion-ui/components/layout/v4/components/layout-header/layout-header.component.html b/projects/fusion-ui/components/layout/v4/components/layout-header/layout-header.component.html index f911f8769..b2636b30e 100644 --- a/projects/fusion-ui/components/layout/v4/components/layout-header/layout-header.component.html +++ b/projects/fusion-ui/components/layout/v4/components/layout-header/layout-header.component.html @@ -5,6 +5,9 @@ [class.fu-page-has-subtitle]="headerContent?.subTitle" [class.fu-page-has-button-back]="headerContent?.hasBackButton" >{{ headerContent?.title }}
+ + +
{{headerContent?.subTitle}}
diff --git a/projects/fusion-ui/storybook-foundations/v4/icons/icons.mdx b/projects/fusion-ui/storybook-foundations/v4/icons/icons.mdx index 35e6ff68f..38044400b 100644 --- a/projects/fusion-ui/storybook-foundations/v4/icons/icons.mdx +++ b/projects/fusion-ui/storybook-foundations/v4/icons/icons.mdx @@ -38,22 +38,7 @@ Put ```import {IconModule} from '@ironsource/fusion-ui/components/icon/v1';``` a ```imports: [CommonModule, IconModule,.....``` in your static component or module `````` in your template. -**ICON_NAME** here it path to icon, for example: `````` - -
Icons
(icon name prefix: "v4")
-
- - { - iconsData.map(icon=>{ - return ( - - {icon.name} - - ) - }) - } - -
+**ICON_NAME** here it path to icon, for example: ``````
Branded
(icon name prefix: "v4/branded")
diff --git a/projects/fusion-ui/storybook-foundations/v4/icons/iconsData.ts b/projects/fusion-ui/storybook-foundations/v4/icons/iconsData.ts index 8d0fbbfe3..81ece3098 100644 --- a/projects/fusion-ui/storybook-foundations/v4/icons/iconsData.ts +++ b/projects/fusion-ui/storybook-foundations/v4/icons/iconsData.ts @@ -1,5 +1,8 @@ export const assetsPath = 'https://fusion.ironsrc.net/assets/icons/'; -export const iconsData = [ + +/* todo: This icons that has on V4 CDN from Phosphor icons library. We start use it fo the new layout (sidebar, header, etc.) + * Add to the the task ISCT part about update this icons using from Phosphor and remove it from V4*/ +/*export const iconsData = [ { name: 'add', path: 'v4/add.svg' @@ -92,7 +95,7 @@ export const iconsData = [ name: 'wrench', path: 'v4/wrench.svg' } -]; +];*/ export const iconsBrandedData = [ { From 192ba816fa1312659676a540d29ee45c456e4da2 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Thu, 9 Nov 2023 11:17:34 +0200 Subject: [PATCH 25/39] chore(isct-97): add support for colored icons and use path in icon name property --- .../components/icon/v1/icon.component.scss | 10 +++++++--- .../fusion-ui/components/icon/v1/icon.component.ts | 13 +++++++++++-- .../layout-header/layout-header.component.html | 3 --- .../storybook-foundations/v4/icons/icons.mdx | 5 +++++ 4 files changed, 23 insertions(+), 8 deletions(-) diff --git a/projects/fusion-ui/components/icon/v1/icon.component.scss b/projects/fusion-ui/components/icon/v1/icon.component.scss index f05427a15..47a7ba4eb 100644 --- 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 index 5473b7b85..bd2f555b2 100644 --- 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,14 @@ 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); + } + } + private onNameChanged(value: string): void { this.renderer.removeClass( this.elementRef.nativeElement, diff --git a/projects/fusion-ui/components/layout/v4/components/layout-header/layout-header.component.html b/projects/fusion-ui/components/layout/v4/components/layout-header/layout-header.component.html index b2636b30e..f911f8769 100644 --- a/projects/fusion-ui/components/layout/v4/components/layout-header/layout-header.component.html +++ b/projects/fusion-ui/components/layout/v4/components/layout-header/layout-header.component.html @@ -5,9 +5,6 @@ [class.fu-page-has-subtitle]="headerContent?.subTitle" [class.fu-page-has-button-back]="headerContent?.hasBackButton" >{{ headerContent?.title }}
- - -
{{headerContent?.subTitle}}
diff --git a/projects/fusion-ui/storybook-foundations/v4/icons/icons.mdx b/projects/fusion-ui/storybook-foundations/v4/icons/icons.mdx index 38044400b..94fb15156 100644 --- a/projects/fusion-ui/storybook-foundations/v4/icons/icons.mdx +++ b/projects/fusion-ui/storybook-foundations/v4/icons/icons.mdx @@ -40,6 +40,11 @@ Put ```import {IconModule} from '@ironsource/fusion-ui/components/icon/v1';``` a **ICON_NAME** here it path to icon, for example: `````` +**Monochrome icons** get current color of element-wrapper. + +**Colored icons**, like on **A/B test** section, need add class **"fu-colored"** to the icon component: ``````. + +
Branded
(icon name prefix: "v4/branded")
From 67d0360bcf9402494605d04d0de48ff2a16502d8 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Thu, 9 Nov 2023 11:46:19 +0200 Subject: [PATCH 26/39] chore(isct-97): fixed unit test --- .../fusion-ui/components/toast/v2/toast.component.spec.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/projects/fusion-ui/components/toast/v2/toast.component.spec.ts b/projects/fusion-ui/components/toast/v2/toast.component.spec.ts index e2a747d0c..469c55723 100644 --- a/projects/fusion-ui/components/toast/v2/toast.component.spec.ts +++ b/projects/fusion-ui/components/toast/v2/toast.component.spec.ts @@ -241,7 +241,7 @@ describe('ToastComponent', () => { const assertMessage = TOAST_MOCK_DATA.customIconToastConfig.text; const assertTypeIconClass = typeof TOAST_MOCK_DATA.customIconToastConfig.icon === 'string' - ? TOAST_MOCK_DATA.customIconToastConfig.icon.replace('/', '-') + ? TOAST_MOCK_DATA.customIconToastConfig.icon.substring(TOAST_MOCK_DATA.customIconToastConfig.icon.lastIndexOf('/') + 1).replace('/', '-') : TOAST_MOCK_DATA.customIconToastConfig.icon.iconName.replace('/', '-'); // toast type icon holder @@ -252,6 +252,9 @@ describe('ToastComponent', () => { // toast type icon const toastTypeIconEl = typedIconHolder.query(By.css('fusion-icon')); expect(toastTypeIconEl).toBeTruthy(); + + console.log('>>', toastTypeIconEl) + expect(toastTypeIconEl.nativeElement.classList).toContain(assertTypeIconClass); // content From d1bdafd73ab57dd73d9f49e71963720d048b5328 Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Thu, 9 Nov 2023 09:56:48 +0000 Subject: [PATCH 27/39] chore(release): 6.2.2-rc.4 --- CHANGELOG.md | 2 ++ package.json | 2 +- projects/fusion-ui/package.json | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b9c61569f..37cd50657 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ 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.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) diff --git a/package.json b/package.json index 374f25ece..9e4d388f4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fusion-ui", - "version": "6.2.2-rc.3", + "version": "6.2.2-rc.4", "description": "UI library created by ironSource", "license": "MIT", "repository": { diff --git a/projects/fusion-ui/package.json b/projects/fusion-ui/package.json index b6dc433d6..d2de99cd4 100644 --- a/projects/fusion-ui/package.json +++ b/projects/fusion-ui/package.json @@ -1,6 +1,6 @@ { "name": "@ironsource/fusion-ui", - "version": "6.2.2-rc.3", + "version": "6.2.2-rc.4", "dependencies": { "chart.js": "^3.5.1", "@floating-ui/dom": "^1.0.9", From bf27d0ec542cea75b46f2507391d78dc6e8d8fa7 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Thu, 9 Nov 2023 12:09:39 +0200 Subject: [PATCH 28/39] chore(isct-97): up link to v4 styleguide in storybook --- .storybook/preview-head.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index a3b90b32c..16161c7ae 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,5 +1,5 @@ - + # Icons -**Phosphor** provides a set of commonly used interface icons you can use in your project. +**Phosphor** (v2.0.0) provides a set of commonly used interface icons you can use in your project.
@@ -40,7 +40,7 @@ Put ```import {IconModule} from '@ironsource/fusion-ui/components/icon/v1';``` a **ICON_NAME** here it path to icon, for example: `````` -**Phosphor icons** use name prefix "ph" (for regular icons). +**Phosphor icons** use name prefix "ph". For example: `````` **Monochrome icons** get current color of element-wrapper. From 6fbf4ebe8fe21c5e916cac52ad035b6694428b8d Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Thu, 9 Nov 2023 15:41:24 +0200 Subject: [PATCH 32/39] chore(isct-97): fix for double svg load call --- .../components/icon-docs-v2/icon-docs-v2.component.ts | 1 + projects/fusion-ui/components/svg/svg.component.ts | 8 ++++++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/projects/fusion-docs/src/app/pages/components/icon-docs-v2/icon-docs-v2.component.ts b/projects/fusion-docs/src/app/pages/components/icon-docs-v2/icon-docs-v2.component.ts index b9740b7fa..73f237cc6 100644 --- a/projects/fusion-docs/src/app/pages/components/icon-docs-v2/icon-docs-v2.component.ts +++ b/projects/fusion-docs/src/app/pages/components/icon-docs-v2/icon-docs-v2.component.ts @@ -37,6 +37,7 @@ export class IconDocsV2Component implements OnInit { private getIcons$(): Observable { const iconNames$ = of(ICON_NAMES); // possible from API service + // const iconNames$ = of( Array(1000).fill('analytics') /*ICON_NAMES.filter(icon=>icon==='analytics')*/); // possible from API service const search$ = this.searchKey.valueChanges.pipe(startWith(''), debounceTime(100), distinctUntilChanged()); return combineLatest([iconNames$, search$]).pipe( diff --git a/projects/fusion-ui/components/svg/svg.component.ts b/projects/fusion-ui/components/svg/svg.component.ts index a4e25cffe..65bc89a13 100644 --- a/projects/fusion-ui/components/svg/svg.component.ts +++ b/projects/fusion-ui/components/svg/svg.component.ts @@ -20,6 +20,7 @@ export class SvgComponent implements AfterViewInit, OnDestroy { libVersion = 'v3'; svgPath = ''; + requestedToLoad = false; private onDestroy$ = new Subject(); @@ -56,11 +57,14 @@ export class SvgComponent implements AfterViewInit, OnDestroy { } ngAfterViewInit() { - this.loadSvg(); + if (!this.requestedToLoad) { + this.loadSvg(); + } } loadSvg() { const svgUrl = this.getUrlPath(); + this.requestedToLoad = true; if (svgUrl) { const cachedData = this.storageService.get(StorageType.SessionStorage, `${svgUrl}`); if (!!cachedData) { @@ -84,7 +88,7 @@ export class SvgComponent implements AfterViewInit, OnDestroy { private onPathChanged(value: string): void { this.svgPath = value; - if (this.elementRef && this.elementRef.nativeElement) { + if (this.elementRef?.nativeElement && !this.requestedToLoad) { this.loadSvg(); } } From 66ef48e265f34d447acccc17689a04c8a1671419 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Thu, 9 Nov 2023 15:46:51 +0200 Subject: [PATCH 33/39] chore(isct-97): fix for double svg load call unit test --- projects/fusion-ui/components/icon/v1/icon.component.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/fusion-ui/components/icon/v1/icon.component.spec.ts b/projects/fusion-ui/components/icon/v1/icon.component.spec.ts index e14204057..243b86ae8 100644 --- a/projects/fusion-ui/components/icon/v1/icon.component.spec.ts +++ b/projects/fusion-ui/components/icon/v1/icon.component.spec.ts @@ -96,6 +96,7 @@ describe('IconComponent', () => { it('Must call ngAfterViewInit method', () => { const spyAfterInit = spyOn(component, 'loadSvg'); + component.requestedToLoad = false fixture.detectChanges(); expect(spyAfterInit.calls.any()).toBe(true); }); From bb32a64698437ae5b5521adffe98d2b0e9b5afd5 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Wed, 15 Nov 2023 11:37:32 +0200 Subject: [PATCH 34/39] chore(isct-97): fix for svg http request cashing --- .../fusion-ui/components/svg/svg.component.ts | 41 ++++++++++++------- 1 file changed, 27 insertions(+), 14 deletions(-) diff --git a/projects/fusion-ui/components/svg/svg.component.ts b/projects/fusion-ui/components/svg/svg.component.ts index 65bc89a13..2c0d8acd4 100644 --- a/projects/fusion-ui/components/svg/svg.component.ts +++ b/projects/fusion-ui/components/svg/svg.component.ts @@ -3,8 +3,8 @@ import {LogService} from '@ironsource/fusion-ui/services/log'; import {SVG_OPTIONS_TOKEN} from './svg-config'; import {SvgOptions} from './svg-entities'; import {HttpClient} from '@angular/common/http'; -import {Subject} from 'rxjs'; -import {takeUntil} from 'rxjs/operators'; +import {Observable, Subject} from 'rxjs'; +import {finalize, publishReplay, refCount, takeUntil} from 'rxjs/operators'; import {StorageService, StorageType} from '@ironsource/fusion-ui/services/stogare'; @Component({ @@ -24,6 +24,8 @@ export class SvgComponent implements AfterViewInit, OnDestroy { private onDestroy$ = new Subject(); + static cache: any = {}; + constructor( private httpClient: HttpClient, public elementRef: ElementRef, @@ -70,22 +72,33 @@ export class SvgComponent implements AfterViewInit, OnDestroy { if (!!cachedData) { this.elementRef.nativeElement.innerHTML = cachedData; } else { - this.httpClient - .get(svgUrl, {responseType: 'text'}) - .pipe(takeUntil(this.onDestroy$)) - .subscribe( - response => { - this.storageService.set(StorageType.SessionStorage, `${svgUrl}`, response); - this.elementRef.nativeElement.innerHTML = response; - }, - err => { - this.logService.error(new Error(`Error Fetching Svg: ${svgUrl}, ${JSON.stringify(err)}`)); - } - ); + this.getSvgData(svgUrl).subscribe( + response => { + this.storageService.set(StorageType.SessionStorage, `${svgUrl}`, response); + this.elementRef.nativeElement.innerHTML = response; + }, + err => { + this.logService.error(new Error(`Error Fetching Svg: ${svgUrl}, ${JSON.stringify(err)}`)); + } + ); } } } + private getSvgData(svgUrl: string): Observable { + if (!SvgComponent.cache[svgUrl]) { + SvgComponent.cache[svgUrl] = this.httpClient.get(svgUrl, {responseType: 'text'}).pipe( + takeUntil(this.onDestroy$), + publishReplay(1), + refCount(), + finalize(() => { + delete SvgComponent.cache[svgUrl]; + }) + ); + } + return SvgComponent.cache[svgUrl]; + } + private onPathChanged(value: string): void { this.svgPath = value; if (this.elementRef?.nativeElement && !this.requestedToLoad) { From ab8e791b465fa119c1678e24c07edc936751880f Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Wed, 15 Nov 2023 11:42:52 +0200 Subject: [PATCH 35/39] chore(isct-97): added type --- projects/fusion-ui/components/svg/svg.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/fusion-ui/components/svg/svg.component.ts b/projects/fusion-ui/components/svg/svg.component.ts index 2c0d8acd4..262ad74fe 100644 --- a/projects/fusion-ui/components/svg/svg.component.ts +++ b/projects/fusion-ui/components/svg/svg.component.ts @@ -24,7 +24,7 @@ export class SvgComponent implements AfterViewInit, OnDestroy { private onDestroy$ = new Subject(); - static cache: any = {}; + static cache: {[key: string]: Observable} = {}; constructor( private httpClient: HttpClient, From 5873718dafe67ed600f53a657ca061000ff7e1fc Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Thu, 16 Nov 2023 07:34:43 +0000 Subject: [PATCH 36/39] chore(release): 6.2.2-rc.5 --- CHANGELOG.md | 2 ++ package.json | 2 +- projects/fusion-ui/package.json | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 37cd50657..52e863148 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ 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) diff --git a/package.json b/package.json index 9e4d388f4..be20d41fb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fusion-ui", - "version": "6.2.2-rc.4", + "version": "6.2.2-rc.5", "description": "UI library created by ironSource", "license": "MIT", "repository": { diff --git a/projects/fusion-ui/package.json b/projects/fusion-ui/package.json index d2de99cd4..3e5503883 100644 --- a/projects/fusion-ui/package.json +++ b/projects/fusion-ui/package.json @@ -1,6 +1,6 @@ { "name": "@ironsource/fusion-ui", - "version": "6.2.2-rc.4", + "version": "6.2.2-rc.5", "dependencies": { "chart.js": "^3.5.1", "@floating-ui/dom": "^1.0.9", From 426f354ee135b03c217d0b141dcc21329b57e799 Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Thu, 16 Nov 2023 14:48:13 +0200 Subject: [PATCH 37/39] chore(isct-97): code-review changes --- .../components/icon-docs-v2/icon-docs-v2.component.ts | 1 - projects/fusion-ui/components/svg/svg.component.ts | 8 ++------ 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/projects/fusion-docs/src/app/pages/components/icon-docs-v2/icon-docs-v2.component.ts b/projects/fusion-docs/src/app/pages/components/icon-docs-v2/icon-docs-v2.component.ts index 73f237cc6..b9740b7fa 100644 --- a/projects/fusion-docs/src/app/pages/components/icon-docs-v2/icon-docs-v2.component.ts +++ b/projects/fusion-docs/src/app/pages/components/icon-docs-v2/icon-docs-v2.component.ts @@ -37,7 +37,6 @@ export class IconDocsV2Component implements OnInit { private getIcons$(): Observable { const iconNames$ = of(ICON_NAMES); // possible from API service - // const iconNames$ = of( Array(1000).fill('analytics') /*ICON_NAMES.filter(icon=>icon==='analytics')*/); // possible from API service const search$ = this.searchKey.valueChanges.pipe(startWith(''), debounceTime(100), distinctUntilChanged()); return combineLatest([iconNames$, search$]).pipe( diff --git a/projects/fusion-ui/components/svg/svg.component.ts b/projects/fusion-ui/components/svg/svg.component.ts index 262ad74fe..cdc76a68b 100644 --- a/projects/fusion-ui/components/svg/svg.component.ts +++ b/projects/fusion-ui/components/svg/svg.component.ts @@ -20,7 +20,6 @@ export class SvgComponent implements AfterViewInit, OnDestroy { libVersion = 'v3'; svgPath = ''; - requestedToLoad = false; private onDestroy$ = new Subject(); @@ -59,14 +58,11 @@ export class SvgComponent implements AfterViewInit, OnDestroy { } ngAfterViewInit() { - if (!this.requestedToLoad) { - this.loadSvg(); - } + this.loadSvg(); } loadSvg() { const svgUrl = this.getUrlPath(); - this.requestedToLoad = true; if (svgUrl) { const cachedData = this.storageService.get(StorageType.SessionStorage, `${svgUrl}`); if (!!cachedData) { @@ -101,7 +97,7 @@ export class SvgComponent implements AfterViewInit, OnDestroy { private onPathChanged(value: string): void { this.svgPath = value; - if (this.elementRef?.nativeElement && !this.requestedToLoad) { + if (this.elementRef?.nativeElement) { this.loadSvg(); } } From 3aafbe7488339727a1afb86716d0cabd92c051bd Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Thu, 16 Nov 2023 15:22:05 +0200 Subject: [PATCH 38/39] chore(isct-97): fixed unit test --- projects/fusion-ui/components/icon/v1/icon.component.spec.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/fusion-ui/components/icon/v1/icon.component.spec.ts b/projects/fusion-ui/components/icon/v1/icon.component.spec.ts index 243b86ae8..e14204057 100644 --- a/projects/fusion-ui/components/icon/v1/icon.component.spec.ts +++ b/projects/fusion-ui/components/icon/v1/icon.component.spec.ts @@ -96,7 +96,6 @@ describe('IconComponent', () => { it('Must call ngAfterViewInit method', () => { const spyAfterInit = spyOn(component, 'loadSvg'); - component.requestedToLoad = false fixture.detectChanges(); expect(spyAfterInit.calls.any()).toBe(true); }); From be3a8a247f608975d0ab25619e0177e6516a584a Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Thu, 16 Nov 2023 15:27:44 +0200 Subject: [PATCH 39/39] feat(isct-97): add support for ui style v4 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 923f5c940..70232133d 100644 --- 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```