@scality/core-ui 0.115.0

package/stories/data/sparklinechart.ts

@@ -0,0 +1,164 @@
+export const data = [
+  {
+    date: '2019-10-10 00:00:00',
+    y: 33,
+    symbol: 'Operation per sec',
+  },
+  {
+    date: '2019-10-10 01:00:00',
+    y: 100,
+    symbol: 'Operation per sec',
+  },
+  {
+    date: '2019-10-10 02:00:00',
+    y: 103,
+    symbol: 'Operation per sec',
+  },
+  {
+    date: '2019-10-10 03:00:00',
+    y: 350,
+    symbol: 'Operation per sec',
+  },
+  {
+    date: '2019-10-10 04:00:00',
+    y: 225,
+    symbol: 'Operation per sec',
+  },
+  {
+    date: '2019-10-10 05:00:00',
+    y: 124,
+    symbol: 'Operation per sec',
+  },
+  {
+    date: '2019-10-10 06:00:00',
+    y: 248,
+    symbol: 'Operation per sec',
+  },
+  {
+    date: '2019-10-10 07:00:00',
+    y: 99,
+    symbol: 'Operation per sec',
+  },
+];
+export const multiLineData = [
+  {
+    date: '2019-10-10 00:00:00',
+    y: 33,
+    symbol: 'CPU',
+  },
+  {
+    date: '2019-10-10 01:00:00',
+    y: 100,
+    symbol: 'CPU',
+  },
+  {
+    date: '2019-10-10 02:00:00',
+    y: 103,
+    symbol: 'CPU',
+  },
+  {
+    date: '2019-10-10 03:00:00',
+    y: 350,
+    symbol: 'CPU',
+  },
+  {
+    date: '2019-10-10 04:00:00',
+    y: 225,
+    symbol: 'CPU',
+  },
+  {
+    date: '2019-10-10 05:00:00',
+    y: 124,
+    symbol: 'CPU',
+  },
+  {
+    date: '2019-10-10 06:00:00',
+    y: 248,
+    symbol: 'CPU',
+  },
+  {
+    date: '2019-10-10 07:00:00',
+    y: 99,
+    symbol: 'CPU',
+  },
+  {
+    date: '2019-10-10 00:00:00',
+    y: 33,
+    symbol: 'Load',
+  },
+  {
+    date: '2019-10-10 01:00:00',
+    y: 100,
+    symbol: 'Load',
+  },
+  {
+    date: '2019-10-10 02:00:00',
+    y: 103,
+    symbol: 'Load',
+  },
+  {
+    date: '2019-10-10 03:00:00',
+    y: 350,
+    symbol: 'Load',
+  },
+  {
+    date: '2019-10-10 04:00:00',
+    y: 225,
+    symbol: 'Load',
+  },
+  {
+    date: '2019-10-10 05:00:00',
+    y: 124,
+    symbol: 'Load',
+  },
+  {
+    date: '2019-10-10 06:00:00',
+    y: 248,
+    symbol: 'Load',
+  },
+  {
+    date: '2019-10-10 07:00:00',
+    y: 99,
+    symbol: 'Load',
+  },
+  {
+    date: '2019-10-10 00:00:00',
+    y: 33,
+    symbol: 'Memory',
+  },
+  {
+    date: '2019-10-10 01:00:00',
+    y: 100,
+    symbol: 'Memory',
+  },
+  {
+    date: '2019-10-10 02:00:00',
+    y: 103,
+    symbol: 'Memory',
+  },
+  {
+    date: '2019-10-10 03:00:00',
+    y: 350,
+    symbol: 'Memory',
+  },
+  {
+    date: '2019-10-10 04:00:00',
+    y: 225,
+    symbol: 'Memory',
+  },
+  {
+    date: '2019-10-10 05:00:00',
+    y: 124,
+    symbol: 'Memory',
+  },
+  {
+    date: '2019-10-10 06:00:00',
+    y: 248,
+    symbol: 'Memory',
+  },
+  {
+    date: '2019-10-10 07:00:00',
+    y: 99,
+    symbol: 'Memory',
+  },
+];

package/stories/designprinciples.mdx

@@ -0,0 +1,29 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Design Principles" />
+
+# Design Principles
+
+## Consistency
+
+Users learn faster how to use the product.\
+Consistency eliminates confusion.\
+Should be visual and functional.
+
+## Accessibility
+
+### Contrast
+
+The color of 1 element and its background should be a contrast color ratio of 4.5:1 at least.
+That could be checked through various tools, such as [Webaim Contrast Checker](https://webaim.org/resources/contrastchecker/).\
+*$$$ screenshot placeholder*
+
+### Color usage
+
+The color should not be the only way of displaying information or action.
+
+### Keyboard user
+
+The content and fields should be accessible through keyboard controls.
+
+For forms, the Tab-key navigation should allow the user to submit the full form.

package/stories/dropdown.stories.tsx

@@ -0,0 +1,146 @@
+import { action } from '@storybook/addon-actions';
+import React from 'react';
+import { Icon } from '../src/lib';
+import { Dropdown } from '../src/lib/components/dropdown/Dropdown.component';
+import { Wrapper } from './common';
+import {
+  iconArgType,
+  sizesOptions as sizes,
+  variantsOptions as variants,
+} from './controls';
+
+const items = [
+  {
+    label: 'About',
+    onClick: action('About clicked'),
+    'data-cy': 'About',
+  },
+  {
+    label: 'Documentation',
+    onClick: action('Documentation clicked'),
+    'data-cy': 'Documentation',
+  },
+  {
+    label: 'Onboarding',
+    onClick: action('Onboarding clicked'),
+    'data-cy': 'Onboarding',
+  },
+];
+
+export default {
+  title: 'Components/Navigation/Dropdown',
+  component: Dropdown,
+  decorators: [
+    (story) => (
+      <Wrapper
+        style={{
+          minHeight: '40vh',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          padding: '0',
+        }}
+        className="storybook-dropdown"
+      >
+        {story()}
+      </Wrapper>
+    ),
+  ],
+  args: {
+    items,
+  },
+  argTypes: {
+    icon: iconArgType,
+    size: {
+      options: sizes,
+      control: {
+        type: 'radio',
+      },
+    },
+    variant: {
+      options: variants,
+      control: {
+        type: 'radio',
+      },
+    },
+  },
+  render: ({ icon, items, ...args }) => (
+    <Dropdown
+      items={items}
+      icon={icon && <Icon name={icon}></Icon>}
+      {...args}
+    />
+  ),
+};
+
+export const Playground = {
+  args: {
+    text: 'Playground',
+  },
+};
+
+export const DropdownWithText = {
+  args: {
+    text: 'Help',
+  },
+};
+
+export const DropdownWithIcon = {
+  args: {
+    icon: 'Folder',
+    caret: false,
+  },
+};
+
+export const DropdownWithTextAndIcon = {
+  args: {
+    text: 'Help',
+    icon: 'Info-circle',
+  },
+};
+
+export const DropdownVariant = {
+  render: ({ icon, ...args }) => {
+    return (
+      <>
+        {variants.map((variant, i) => {
+          return (
+            <Dropdown
+              key={i}
+              items={items}
+              icon={icon && <Icon name={icon}></Icon>}
+              text="Help"
+              variant={variant}
+              {...args}
+            />
+          );
+        })}
+      </>
+    );
+  },
+};
+
+export const DifferentSizes = {
+  render: ({ icon, ...args }) => {
+    return (
+      <>
+        {sizes.map((size, i) => {
+          return (
+            <Dropdown
+              key={i}
+              items={items}
+              icon={icon && <Icon name={icon}></Icon>}
+              text="Help"
+              size={size}
+              {...args}
+            />
+          );
+        })}
+      </>
+    );
+  },
+  args: {
+    text: 'Help',
+    icon: 'Info-circle',
+  },
+};

package/stories/dropzone.stories.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Dropzone } from '../src/lib/components/dropzone/Dropzone';
+import { Wrapper } from './common';
+export default {
+  title: 'Components/Inputs/Dropzone',
+  component: Dropzone,
+  decorators: [
+    (story) => <Wrapper style={{ minHeight: '10vh' }}>{story()}</Wrapper>,
+  ],
+};
+
+export const InlineSingleFile = {
+  args: {
+    variant: 'inline',
+    multiple: false,
+  },
+};
+
+export const InlineMultipleFiles = {
+  args: {
+    variant: 'inline',
+    multiple: true,
+  },
+};
+
+export const LargeSingleFile = {
+  args: {
+    variant: 'large',
+    multiple: false,
+  },
+};
+
+export const LargeMulipleFiles = {
+  args: {
+    variant: 'large',
+    multiple: true,
+  },
+};
+
+export const OnlyAcceptsImage = {
+  ...LargeMulipleFiles,
+  args: {
+    ...LargeMulipleFiles.args,
+    accept: {
+      'image/jpeg': [],
+      'image/png': [],
+    },
+  },
+};

package/stories/emptystate.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { EmptyState } from '../src/lib/components/emptystate/Emptystate.component';
+import { Wrapper } from './common';
+export default {
+  title: 'Components/Data Display/EmptyState',
+  component: EmptyState,
+  args: {
+    icon: 'Node-backend',
+    label: 'Node',
+  },
+};
+
+export const Default = {};
+
+export const WithLink = {
+  args: {
+    link: '',
+    history: {
+      push: () => {},
+    },
+  },
+};

package/stories/errorpage401.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ErrorPage401 } from '../src/lib/components/error-pages/ErrorPage401.component';
+import { Wrapper } from './common';
+import { localeArgtype } from './controls';
+export default {
+  title: 'Components/Navigation/Error Pages/401',
+  component: ErrorPage401,
+  decorators: [
+    (story) => <Wrapper style={{ height: '100vh' }}>{story()}</Wrapper>,
+  ],
+  args: {
+    supportLink: 'https://www.scality.com/support/',
+    onReturnHomeClick: () => {},
+  },
+  argTypes: {
+    locale: localeArgtype,
+  },
+};
+export const Default = {};
+
+export const WithLocale = {
+  args: {
+    locale: 'fr',
+  },
+};

package/stories/errorpage404.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ErrorPage404 } from '../src/lib/components/error-pages/ErrorPage404.component';
+import { Wrapper } from './common';
+import { localeArgtype } from './controls';
+export default {
+  title: 'Components/Navigation/Error Pages/404',
+  component: ErrorPage404,
+  decorators: [
+    (story) => <Wrapper style={{ height: '100vh' }}>{story()}</Wrapper>,
+  ],
+  args: {
+    onReturnHomeClick: () => {},
+  },
+  argTypes: {
+    locale: localeArgtype,
+  },
+};
+export const Default = {};
+
+export const WithLocale = {
+  args: {
+    locale: 'fr',
+  },
+};

package/stories/errorpage500.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ErrorPage500 } from '../src/lib/components/error-pages/ErrorPage500.component';
+import { Wrapper } from './common';
+import { localeArgtype } from './controls';
+export default {
+  title: 'Components/Navigation/Error Pages/500',
+  component: ErrorPage500,
+  decorators: [
+    (story) => <Wrapper style={{ height: '100vh' }}>{story()}</Wrapper>,
+  ],
+  args: {
+    onReturnHomeClick: () => {},
+  },
+  argTypes: {
+    locale: localeArgtype,
+    errorMessage: {
+      control: {
+        type: 'object',
+      },
+    },
+  },
+};
+export const Default = {};
+
+export const WithSupportLink = {
+  args: {
+    supportLink: 'https://www.scality.com/support/',
+  },
+};
+export const WithLocale = {
+  args: {
+    supportLink: 'https://www.scality.com/support/',
+    locale: 'fr',
+  },
+};
+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.`,
+    },
+  },
+};

package/stories/errorpageauth.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ErrorPageAuth } from '../src/lib/components/error-pages/ErrorPageAuth.component';
+import { Wrapper } from './common';
+import { localeArgtype } from './controls';
+export default {
+  title: 'Components/Navigation/Error Pages/Auth',
+  component: ErrorPageAuth,
+  decorators: [
+    (story) => <Wrapper style={{ height: '100vh' }}>{story()}</Wrapper>,
+  ],
+  args: {
+    onReturnHomeClick: () => {},
+  },
+  argTypes: {
+    locale: localeArgtype,
+  },
+};
+export const Default = {};
+
+export const WithSupportLink = {
+  args: {
+    supportLink: 'https://www.scality.com/support/',
+  },
+};
+
+export const WithLocale = {
+  args: {
+    locale: 'fr',
+    supportLink: 'https://www.scality.com/support/',
+  },
+};