- {}}
- errorMessage={{
- en: 'Failed to log you in, this might be due to time synchronization between the browser and the server.',
- fr: `Impossible de vous connecter, cela peut être dû à la synchronisation de l'heure entre le navigateur et le serveur.`,
- }}
- />
-
-
- );
+export const CustomerizedError = {
+ args: {
+ supportLink: 'https://www.scality.com/support/',
+ errorMessage: {
+ en: 'Failed to log you in, this might be due to time synchronization between the browser and the server.',
+ fr: `Impossible de vous connecter, cela peut être dû à la synchronisation de l'heure entre le navigateur et le serveur.`,
+ },
+ },
};
diff --git a/stories/errorpageauth.stories.tsx b/stories/errorpageauth.stories.tsx
index 3b7945941e..da78030e23 100644
--- a/stories/errorpageauth.stories.tsx
+++ b/stories/errorpageauth.stories.tsx
@@ -4,50 +4,30 @@ import { Wrapper } from './common';
export default {
title: 'Components/Navigation/ErrorPages/Auth',
component: ErrorPageAuth,
+ decorators: [
+ (story) => {story()},
+ ],
+ args: {
+ onReturnHomeClick: () => {},
+ },
+ argTypes: {
+ locale: {
+ options: ['en', 'fr'],
+ control: { type: 'radio' },
+ },
+ },
};
-export const Default = ({}) => {
- return (
-
-
- );
+export const TabForm = {
+ ...PageForm,
+ args: {
+ layout: {
+ kind: 'tab',
+ },
+ },
};
-export const PageFormWithIcon = ({}) => {
- return (
-
- );
+export const PageFormWithIcon = {
+ ...PageForm,
+ args: {
+ layout: {
+ kind: 'page',
+ title: 'My form with icon',
+ subTitle: 'The sub title',
+ icon: 'Search',
+ },
+ },
};
diff --git a/stories/format.stories.mdx b/stories/format.mdx
similarity index 69%
rename from stories/format.stories.mdx
rename to stories/format.mdx
index ac5adb0f32..50b9905ca0 100644
--- a/stories/format.stories.mdx
+++ b/stories/format.mdx
@@ -1,4 +1,5 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
+
@@ -6,8 +7,8 @@ import { Meta } from '@storybook/addon-docs';
## Number format
-- Use of [space] for [internationally recommended](https://en.wikipedia.org/wiki/Decimal_separator) thousands separators. No comma or point, as these are reserved for use as the decimal sign.
-- Numbers whose magnitude is less than 1, the decimal sign should be preceded by a zero.
+* Use of \[space] for [internationally recommended](https://en.wikipedia.org/wiki/Decimal_separator) thousands separators. No comma or point, as these are reserved for use as the decimal sign.
+* Numbers whose magnitude is less than 1, the decimal sign should be preceded by a zero.
## Date format
@@ -20,7 +21,7 @@ import { Meta } from '@storybook/addon-docs';
| DD | Day of the month with leading zero | 08 |
| MM | Numerical month with leading zero | 07 |
| MMM | Month abbreviation on 3 letters uppercase | "Jul" |
-| HH | Hour [0-23] | 13 |
+| HH | Hour \[0-23] | 13 |
| mm | Minute with leading zero | 05 |
| ss | Second with leading zero | 06 |
@@ -37,7 +38,7 @@ import { Meta } from '@storybook/addon-docs';
### Remarks:
-- **Lato** (the font used in the GUI) is a Monospaced font for the numbers, but not for the letters.
- Avoid using formats with **letters** for Date in Tables.
-- For having consistent length and alignment, and to prevent mistakes, all the formats are with **leading zeros** (2020-07-20 09:00 instead of 2020-7-20 9:00).
-- These formats are applicable for the English language.
+* **Lato** (the font used in the GUI) is a Monospaced font for the numbers, but not for the letters.
+ Avoid using formats with **letters** for Date in Tables.
+* For having consistent length and alignment, and to prevent mistakes, all the formats are with **leading zeros** (2020-07-20 09:00 instead of 2020-7-20 9:00).
+* These formats are applicable for the English language.
diff --git a/stories/formattedate.stories.tsx b/stories/formattedate.stories.tsx
index d12d24b05a..2b5e909da8 100644
--- a/stories/formattedate.stories.tsx
+++ b/stories/formattedate.stories.tsx
@@ -6,51 +6,53 @@ export default {
component: FormattedDateTime,
};
-export const FormattedDate = ({}) => {
- const now = new Date();
- return (
- <>
-
-
-
Format
-
Visual
-
-
- {[
- 'date' as const,
- 'date-time' as const,
- 'date-time-second' as const,
- 'time' as const,
- 'time-second' as const,
- 'relative' as const,
- ].map((format) => (
-
- );
+ ),
+ ],
+ args: {
+ start,
+ end,
+ },
+ argTypes: {
+ start: {
+ control: 'date',
+ },
+ end: {
+ control: 'date',
+ },
+ },
+};
+
+export const GlobalHealthComponentDemo = {
+ args: {
+ id: 'vis_globalhealth',
+ alerts,
+ },
+};
+
+export const GlobalHealthLast24Hours = {
+ args: {
+ id: 'vis_globalhealth_24h',
+ alerts: alertsLast24h,
+ start: startLast24h,
+ end: endLast24h,
+ },
+};
+export const GlobalHealthEmpty = {
+ args: {
+ id: 'vis_globalhealth_empty',
+ alerts: emptyAlert,
+ },
+};
+
+export const AlertTriggeredEarlierThanTheStartingTime = {
+ args: {
+ id: 'vis_globalhealth_alert_retrieve_before',
+ alerts: alertRetrieveBefore,
+ },
+};
+
+export const FirstLabel = {
+ name: 'First Label always includes the month label',
+ args: {
+ id: 'vis_globalhealth_display_month_1st_label',
+ alerts: alertTriggerNotFirstDay,
+ start: startNotFirstDay,
+ end: endNotFirstDay,
+ },
};
diff --git a/stories/guideline/button-guideline.stories.mdx b/stories/guideline/button-guideline.mdx
similarity index 60%
rename from stories/guideline/button-guideline.stories.mdx
rename to stories/guideline/button-guideline.mdx
index bef31b8ab5..2030b719f4 100644
--- a/stories/guideline/button-guideline.stories.mdx
+++ b/stories/guideline/button-guideline.mdx
@@ -1,28 +1,21 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { Meta, Story, Canvas } from '@storybook/blocks';
import {Button} from '../../src/lib/components/button/Button.component';
-
+
# Button
## Size & style
-- Only 1 size is used - Height: 32px
-- Border-radius: 3px
-- Minimum width: 80px
+* Only 1 size is used - Height: 32px
+* Border-radius: 3px
+* Minimum width: 80px
-
+{/* is deprecated, please migrate it to see: https://storybook.js.org/migration-guides/7.0 */}
-
+{/* */}
-| | px |
+| | px |
| ------- | --- |
| Smaller | 24 |
| Small | 28 |
@@ -34,10 +27,10 @@ import {Button} from '../../src/lib/components/button/Button.component';
Button’s label measurement:
-- Line height: 20px
-- Vertical padding: 8px
-- Horizontal padding of 16px
-- Space between icon & label: 8px
+* Line height: 20px
+* Vertical padding: 8px
+* Horizontal padding of 16px
+* Space between icon & label: 8px
## Type
@@ -49,14 +42,14 @@ Used for the main action. It appears once within a group of buttons. For example
### Secondary/base
-
+{/* */}
Use for the secondary action within a group of buttons.
### Tertiary
-
+
Dismissive action, such as the cancel button.
@@ -67,11 +60,11 @@ color: #313131; /*border*/
### Links
-_to add_
+*to add*
## States
-_to produce_
+*to produce*
### Disabled button
@@ -79,31 +72,31 @@ Disabled state only if an action on the current screen can enable it (action pos
## Placement
-- Primary buttons placed on the right of a group.
-- Dismissive actions placed on the left. It allows the user to return to the previous screen or step in the process.
+* Primary buttons placed on the right of a group.
+* Dismissive actions placed on the left. It allows the user to return to the previous screen or step in the process.
Align button groups with the container's right side by default; however, based on the use case and visual balance it can be aligned differently.
### Button spacing
-- Horizontal spacing: 16px
-- Vertical spacing: 12px
-- Space between 2 buttons: 24px - when there is no space constraint
+* Horizontal spacing: 16px
+* Vertical spacing: 12px
+* Space between 2 buttons: 24px - when there is no space constraint
## Icon & label on buttons
### Which icon
-Every button gets a label.
-Icons are optional and mainly used to show how buttons are different, to aid memory and differentiation.
-Universally understood icons work well (ie. print, close, play/pause, save).
-Use standard icons when their use matches their meaning, or at least the user's intent.
-Avoid creating new icons for every action, especially infrequently used ones.
+Every button gets a label.\
+Icons are optional and mainly used to show how buttons are different, to aid memory and differentiation.\
+Universally understood icons work well (ie. print, close, play/pause, save).\
+Use standard icons when their use matches their meaning, or at least the user's intent.\
+Avoid creating new icons for every action, especially infrequently used ones.\
Avoid using an icon alone in a button, with no label.
### Placement
-If icon + label, then the icon is placed on the left side.
+If icon + label, then the icon is placed on the left side.\
Seeing the icon first help users to scan the page more easily, except for few cases such as navigation (right arrow).
### Size
@@ -112,27 +105,27 @@ The icon should be (approximately) the same height as the text, or a lot bigger.
### Explicit button label
-Button labels should be as short and clear as possible and should describe the action the button performs.
+Button labels should be as short and clear as possible and should describe the action the button performs.\
Use one or two words if possible. Remove most prepositions and articles (a, an, the).
Examples: Cancel, Close, Create, Delete, Edit, Learn more, Review, Save, Study, View scores, etc.
Since buttons are action points for the user, button text should also be actionable. Stick to using verbs (Complete, Start/Finish, Search) or a simple verb + noun combination for buttons (Next Page, Submit Post, Learn More). Whichever labeling method you choose, maintain consistency across all of your buttons.
-- Use sentence case.
-- Capitalize proper nouns.
-- Use specific action-oriented text for CTAs.
+* Use sentence case.
+* Capitalize proper nouns.
+* Use specific action-oriented text for CTAs.
Examples: Add Volume, Create Account, Go to Dashboard, Reset Password, Send Reset link, Sign in, etc.
Be sure to:
-- Check for consistent use across the UI.
-- Reserve enough space for translation to other languages.
-- Avoid excessive use of exclamation points (!).
+* Check for consistent use across the UI.
+* Reserve enough space for translation to other languages.
+* Avoid excessive use of exclamation points (!).
Don't:
-- Use icons only.
-- Use punctuation.
-- Write “Click here.”
+* Use icons only.
+* Use punctuation.
+* Write “Click here.”
diff --git a/stories/guideline/chart-guideline.stories.mdx b/stories/guideline/chart-guideline.mdx
similarity index 51%
rename from stories/guideline/chart-guideline.stories.mdx
rename to stories/guideline/chart-guideline.mdx
index 13d85ca7db..f7d82821f5 100644
--- a/stories/guideline/chart-guideline.stories.mdx
+++ b/stories/guideline/chart-guideline.mdx
@@ -1,8 +1,8 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/blocks';
import { ChartExample } from './mdxExampleComponents';
import { SuccessBanner } from '../banner.stories';
-
+
# Charts
@@ -20,11 +20,11 @@ Only use grid lines when it’s helpful. Possible to use only horizontal or vert
### Elements
-- Title
-- Axis
-- Legend
+* Title
+* Axis
+* Legend
-_produce an example WIP_
+*produce an example WIP*
## Type
@@ -32,25 +32,24 @@ _produce an example WIP_
### Pie charts
-- No more than 6 categories
-- Values should be different enough (otherwise select Bar charts)
-- Should be a 100% total
-- Categories in the desc order
+* No more than 6 categories
+* Values should be different enough (otherwise select Bar charts)
+* Should be a 100% total
+* Categories in the desc order
-_produce an example WIP_
+*produce an example WIP*
-_(Currently, there is no Pie chart in the UI)_
+*(Currently, there is no Pie chart in the UI)*
### Bar and column charts
-- Should start at a baseline of zero.
-
-
+* Should start at a baseline of zero.
+{/* */}
### Line charts
-- No more than 5–7 different lines
-- Avoid randomly chosen color (otherwise risk of contrast issues)
+* No more than 5–7 different lines
+* Avoid randomly chosen color (otherwise risk of contrast issues)
Here, the colors for Get and List are too close.
@@ -58,7 +57,7 @@ Components/Chart/LineChart
Area charts
-- Could be a single area, overlapping area, or stacked area
-- Max 3-4 categories
+* Could be a single area, overlapping area, or stacked area
+* Max 3-4 categories
-
+{/* */}
diff --git a/stories/healthselector.stories.tsx b/stories/healthselector.stories.tsx
deleted file mode 100644
index 52040d208e..0000000000
--- a/stories/healthselector.stories.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import React, { useState } from 'react';
-import { action } from '@storybook/addon-actions';
-import styled from 'styled-components';
-import { Healthselector } from '../src/lib/components/healthselector/Healthselector.component';
-import { Wrapper, Title } from './common';
-const RowWrapper = styled.div`
- margin-bottom: 70px;
- display: flex;
-`;
-const HorizontalContainer = styled.div`
- margin-right: 150px;
-`;
-export default {
- title: 'Components/Selector/Healthselector',
- component: Healthselector,
-};
-export const Default = ({}) => {
- const [selected, setSelected] = useState(0);
- action('All clicked');
- let items = [
- {
- label: 'All',
- onClick: action('All clicked'),
- selected: selected === 0,
- },
- {
- label: 'Ok',
- onClick: action('Ok clicked'),
- selected: selected === 1,
- },
- {
- label: 'Warning',
- onClick: action('Warning clicked'),
- selected: selected === 2,
- },
- {
- label: 'Critical',
- onClick: action('Critical clicked'),
- selected: selected === 3,
- },
- ];
- let itemsCustomLabel = [
- {
- label: 'Custom1',
- onClick: action('Custom1 clicked'),
- selected: selected === 0,
- },
- {
- label: 'Custom2',
- onClick: action('Custom2 clicked'),
- selected: selected === 1,
- },
- {
- label: 'Custom3',
- onClick: action('Custom3 clicked'),
- selected: selected === 2,
- },
- {
- label: 'Custom4',
- onClick: action('Custom4 clicked'),
- selected: selected === 3,
- },
- ];
- let itemsWithSelection = [
- {
- label: 'All',
- onClick: () => setSelected(0),
- selected: selected === 0,
- },
- {
- label: 'Ok',
- onClick: () => setSelected(1),
- selected: selected === 1,
- },
- {
- label: 'Warning',
- onClick: () => setSelected(2),
- selected: selected === 2,
- },
- {
- label: 'Critical',
- onClick: () => setSelected(3),
- selected: selected === 3,
- },
- ];
- return (
-
- Basic usage
-
-
- Health Selector Sizes (Triggering StoryBook actions)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- With custom labels (Triggering StoryBook actions)
-
-
- With the healthy items being hidden
-
-
- );
-};
diff --git a/stories/healthselectorv2.stories.tsx b/stories/healthselectorv2.stories.tsx
index 469564e66f..4100d14d9d 100644
--- a/stories/healthselectorv2.stories.tsx
+++ b/stories/healthselectorv2.stories.tsx
@@ -10,67 +10,58 @@ import { Icon } from '../src/lib/components/icon/Icon.component';
export default {
title: 'Components/v2/Healthselector',
component: Healthselector,
+ decorators: [
+ (story) => (
+
+ {story()}
+
+ ),
+ ],
+ args: {
+ onChange: (value) => action(value),
+ },
};
const HealthSelectorWrapper = styled.div`
width: 205px;
`;
-export const Default = ({}) => {
- return (
-
- Basic usage
-
- {
- action(value);
- }}
- />
-
- changing labels
-
- {
- action(value);
- }}
- label="alerts"
- options={[
- {
- ...optionsDefaultConfiguration.all,
- label: 'label all',
- shortLabel: 'all v2',
- },
- {
- ...optionsDefaultConfiguration.healthy,
- label: 'any label',
- shortLabel: 'short',
- },
- {
- ...optionsDefaultConfiguration.warning,
- label: 'warning',
- shortLabel: 'careful',
- icon: ,
- value: 'myValue',
- },
- optionsDefaultConfiguration.critical,
- optionsDefaultConfiguration.unknown,
- ]}
- />
-
+export const Basic = {};
- hidding options
-
- {
- action(value);
- }}
- options={[
- optionsDefaultConfiguration.all,
- optionsDefaultConfiguration.warning,
- optionsDefaultConfiguration.critical,
- optionsDefaultConfiguration.unknown,
- ]}
- />
-
-
- );
+export const ChangingLabels = {
+ args: {
+ label: 'Alerts',
+ options: [
+ {
+ ...optionsDefaultConfiguration.all,
+ label: 'label all',
+ shortLabel: 'all v2',
+ },
+ {
+ ...optionsDefaultConfiguration.healthy,
+ label: 'any label',
+ shortLabel: 'short',
+ },
+ {
+ ...optionsDefaultConfiguration.warning,
+ label: 'warning',
+ shortLabel: 'careful',
+ icon: ,
+ value: 'myValue',
+ },
+ optionsDefaultConfiguration.critical,
+ optionsDefaultConfiguration.unknown,
+ ],
+ },
+};
+
+export const HiddingOptions = {
+ args: {
+ id: 'hiddenoptions',
+ options: [
+ optionsDefaultConfiguration.all,
+ optionsDefaultConfiguration.warning,
+ optionsDefaultConfiguration.critical,
+ optionsDefaultConfiguration.unknown,
+ ],
+ },
};
diff --git a/stories/icon.stories.tsx b/stories/icon.stories.tsx
index 3c74b46181..1ecc0ced0a 100644
--- a/stories/icon.stories.tsx
+++ b/stories/icon.stories.tsx
@@ -1,145 +1,143 @@
import React from 'react';
-import { Icon, iconTable } from '../src/lib/components/icon/Icon.component';
-import { Title } from './common';
+import {
+ Icon,
+ iconTable,
+ IconName,
+} from '../src/lib/components/icon/Icon.component';
+import { SizeProp } from '@fortawesome/fontawesome-svg-core';
+
export default {
title: 'Components/Icon',
component: Icon,
};
-export const Default = ({}) => {
- return (
- <>
- Size
-
-
+ add icon in the overlay of tooltip
+
+ Helloooooooo
+
+ }
+ >
+ tooltip with icon
+
+
+
+ Tooltip doesn't trigger
+
+ Hover here!
+
+
+
+ );
+ },
};
diff --git a/stories/typography.stories.mdx b/stories/typography.mdx
similarity index 81%
rename from stories/typography.stories.mdx
rename to stories/typography.mdx
index 080318e4a1..06ace442d5 100644
--- a/stories/typography.stories.mdx
+++ b/stories/typography.mdx
@@ -2,18 +2,16 @@ import { Meta } from "@storybook/addon-docs";
-
# Typography
-
## Font
-The font for the UI is **Lato**.
+The font for the UI is **Lato**.\
The numbers are monospaced, but the letters are not. Using this font in numerical columns in tables should be avoided.
## Size
-The size base is 14 px (for a standard screen 1440*900 px).
+The size base is 14 px (for a standard screen 1440\*900 px).
Steps:
diff --git a/stories/vegachart.stories.tsx b/stories/vegachart.stories.tsx
index 0f25c52294..fd2900d503 100644
--- a/stories/vegachart.stories.tsx
+++ b/stories/vegachart.stories.tsx
@@ -86,11 +86,13 @@ export default {
title: 'Components/Chart/VegaChart',
component: VegaChart,
};
-export const Default = ({}) => {
- return (
-
- Vega-Lite wrapper - need to specify the entire spec
-
-
- );
+export const Default = {
+ render: ({}) => {
+ return (
+
+ Vega-Lite wrapper - need to specify the entire spec
+
+
+ );
+ },
};