From 70a24bf565f3a646acd2c2217f80b15bf5acc97a Mon Sep 17 00:00:00 2001 From: AndyKIron Date: Tue, 7 Nov 2023 16:31:31 +0200 Subject: [PATCH] chore(isct-97): added border-radius and spacing, some changes in colors and shadows --- .storybook/preview-head.html | 2 +- .../v4/border-radius.mdx | 15 -- .../border-radius.component.html | 18 -- .../border-radius.component.scss | 36 ---- .../border-radius/border-radius.component.ts | 15 -- .../v4/border-radius/border-radius.mdx | 81 +++++++ .../v4/border-radius/border-radius.stories.ts | 22 -- .../storybook-foundations/v4/colors.mdx | 4 +- .../storybook-foundations/v4/shadows.mdx | 20 +- .../v4/spacing/spacing.mdx | 197 ++++++++++++++++++ .../v4/spacing/spacingData.ts | 87 ++++++++ 11 files changed, 379 insertions(+), 118 deletions(-) delete mode 100644 projects/fusion-ui/storybook-foundations/v4/border-radius.mdx delete mode 100644 projects/fusion-ui/storybook-foundations/v4/border-radius/border-radius.component.html delete mode 100644 projects/fusion-ui/storybook-foundations/v4/border-radius/border-radius.component.scss delete mode 100644 projects/fusion-ui/storybook-foundations/v4/border-radius/border-radius.component.ts create mode 100644 projects/fusion-ui/storybook-foundations/v4/border-radius/border-radius.mdx delete mode 100644 projects/fusion-ui/storybook-foundations/v4/border-radius/border-radius.stories.ts create mode 100644 projects/fusion-ui/storybook-foundations/v4/spacing/spacing.mdx create mode 100644 projects/fusion-ui/storybook-foundations/v4/spacing/spacingData.ts diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index c3e5bbcf7..a3b90b32c 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' + } +];