@scality/core-ui 0.115.0

package/stories/Button/button.stories.tsx

@@ -0,0 +1,299 @@
+import { action } from '@storybook/addon-actions';
+import React from 'react';
+import { Form, FormGroup, FormSection, Icon, Stack } from '../../src/lib';
+import { Button } from '../../src/lib/components/buttonv2/Buttonv2.component';
+import { Input } from '../../src/lib/next';
+import { iconArgType } from '../controls';
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+  args: {
+    onClick: action('Button clicked'),
+  },
+  render: ({ icon, ...args }) => {
+    return <Button {...args} icon={icon && <Icon name={icon} />} />;
+  },
+  argTypes: {
+    onClick: {
+      description: 'Function called on click',
+    },
+    variant: {
+      description: 'Button variant',
+    },
+    icon: iconArgType,
+  },
+};
+
+export const Playground = {
+  args: {
+    label: 'Playground',
+  },
+};
+
+export const DefaultButtons = {
+  render: ({ icon, ...args }) => {
+    return (
+      <Stack gap="r32">
+        <Button
+          variant="primary"
+          label="primary"
+          icon={icon && <Icon name={icon} />}
+          {...args}
+        />
+        <Button
+          variant="secondary"
+          label="secondary"
+          icon={icon && <Icon name={icon} />}
+          {...args}
+        />
+        <Button
+          variant="danger"
+          label="danger"
+          icon={icon && <Icon name={icon} />}
+          {...args}
+        />
+        <Button
+          variant="outline"
+          label="outline"
+          icon={icon && <Icon name={icon} />}
+          {...args}
+        />
+      </Stack>
+    );
+  },
+};
+
+export const Primary = {
+  args: {
+    variant: 'primary',
+    label: 'Primary',
+  },
+};
+
+export const Secondary = {
+  args: {
+    variant: 'secondary',
+    label: 'Secondary',
+  },
+};
+
+export const Outline = {
+  args: {
+    variant: 'outline',
+    label: 'Outline',
+  },
+};
+
+export const Danger = {
+  args: {
+    variant: 'danger',
+    label: 'Danger',
+  },
+};
+
+export const SimpleForm = {
+  render: ({ args }) => {
+    return (
+      <Form
+        layout={{ kind: 'page', title: 'Simple Form', icon: 'Search' }}
+        rightActions={
+          <Stack gap={'r24'}>
+            <Button variant="outline" label="Cancel" />
+            <Button
+              variant="primary"
+              label="Save"
+              icon={<Icon name="Save" />}
+            />
+          </Stack>
+        }
+      >
+        <FormSection
+          title={{
+            name: 'First part entity data',
+            helpTooltip: 'Tooltip of the first entity',
+            icon: 'Search',
+          }}
+        >
+          <FormGroup
+            direction="vertical"
+            label="Name"
+            id="name"
+            labelHelpTooltip="Name Tooltip"
+            content={<Input id="name" />}
+            required
+          ></FormGroup>
+          <FormGroup
+            direction="horizontal"
+            label="Email"
+            id="email"
+            labelHelpTooltip="Email Tooltip"
+            content={<Input id="email" />}
+            required
+          ></FormGroup>
+        </FormSection>
+      </Form>
+    );
+  },
+};
+
+export const ButtonSizes = {
+  render: ({ icon, ...args }) => {
+    return (
+      <Stack gap="r32">
+        <Button
+          variant="primary"
+          label="Default"
+          size="default"
+          icon={icon && <Icon name={icon} />}
+          {...args}
+        />
+        <Button
+          variant="primary"
+          label="Inline"
+          size="inline"
+          icon={icon && <Icon name={icon} />}
+          {...args}
+        />
+      </Stack>
+    );
+  },
+};
+
+export const ButtonsWithIcon = {
+  ...DefaultButtons,
+  args: {
+    icon: 'Save',
+  },
+};
+
+export const ButtonDisabled = {
+  ...ButtonsWithIcon,
+  args: {
+    disabled: true,
+    tooltip: {
+      overlayStyle: {
+        width: '120px',
+      },
+      overlay: 'The button is disabled',
+      placement: 'top',
+    },
+  },
+};
+
+export const ButtonLoading = {
+  ...ButtonsWithIcon,
+  args: {
+    isLoading: true,
+  },
+};
+
+export const IconButtonWithTooltip = {
+  render: ({ ...args }) => {
+    return (
+      <Stack gap="r32" style={{ height: '5rem' }}>
+        <Button icon={<Icon name="Delete"></Icon>} {...args} />
+        <Button
+          variant="secondary"
+          icon={<Icon name="Sync"></Icon>}
+          tooltip={{
+            overlayStyle: {
+              width: '80px',
+            },
+            overlay: 'Bound status',
+            placement: 'top',
+          }}
+        />
+
+        <Button {...args} icon={<Icon name="Delete"></Icon>} variant="danger" />
+        <Button
+          {...args}
+          icon={<Icon name="Delete"></Icon>}
+          variant="outline"
+        />
+      </Stack>
+    );
+  },
+  args: {
+    variant: 'primary',
+    icon: <Icon name="Delete"></Icon>,
+    tooltip: {
+      overlayStyle: {
+        width: '80px',
+      },
+      overlay: 'Entity deletion',
+      placement: 'top',
+    },
+  },
+};
+
+export const GhostButtons = {
+  render: () => {
+    return (
+      <Stack gap="r32">
+        <Button
+          icon={<i className="fas fa-sync" />}
+          tooltip={{
+            overlayStyle: {
+              width: '80px',
+            },
+            overlay: 'Refresh the metrics',
+            placement: 'top',
+          }}
+        />
+        <Button
+          icon={<i className="fas fa-file-export" />}
+          tooltip={{
+            overlayStyle: {
+              width: '120px',
+            },
+            overlay: 'Export the data in predefined format',
+            placement: 'top',
+          }}
+        />
+        <Button
+          icon={<i className="fas fa-calendar-week" />}
+          tooltip={{
+            overlayStyle: {
+              width: '120px',
+            },
+            overlay: 'Metric over a period',
+            placement: 'top',
+          }}
+        />
+      </Stack>
+    );
+  },
+};
+
+export const LinkButton = {
+  render: ({ icon, ...args }) => {
+    return (
+      <Stack gap="r32">
+        <Button
+          label="Link"
+          icon={icon === 'External-link' && <Icon name="External-link"></Icon>}
+          {...args}
+          variant="primary"
+          onClick={() => window.open('/')}
+        />
+        <Button
+          label="External Link"
+          icon={<Icon name="External-link"></Icon>}
+          variant="primary"
+          onClick={() =>
+            window.open('https://en.wikipedia.org/wiki/Button_(computing)')
+          }
+        />
+      </Stack>
+    );
+  },
+  argTypes: {
+    icon: {
+      description:
+        'Use the icon External-link to indicate that the button will redirect outside the UI',
+      control: 'radio',
+      options: ['External-link', 'No icon'],
+    },
+  },
+};

package/stories/Icon.mdx

@@ -0,0 +1,31 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  Controls,
+  IconGallery,
+  IconItem,
+  Stories,
+} from '@storybook/blocks';
+import { Icon } from '../src/lib/components/icon/Icon.component';
+import * as IconStories from './icon.stories';
+
+<Meta of={IconStories} />
+
+# Icons
+
+<Canvas>
+  <Story of={IconStories.Playground} />
+</Canvas>
+<Controls of={IconStories.Playground} />
+
+<Canvas sourceState="none" withToolbar="true">
+  <Story of={IconStories.Size} />
+  <Story of={IconStories.Statuses} />
+</Canvas>
+
+<Canvas sourceState="none">
+  <Story of={IconStories.Statuses} />
+</Canvas>
+
+<Story of={IconStories.Statuses} />

package/stories/InfoMessage/infomessage.guideline.mdx

@@ -0,0 +1,32 @@
+import { Meta, Story, Canvas, Primary, Controls } from '@storybook/blocks';
+
+import * as Stories from './infomessage.stories.tsx';
+
+<Meta name="Guideline" of={Stories} />
+
+# InfoMessage
+
+This component provides complementary information to the user to help them understand what to do.
+A link can be added for more information.
+
+## Style
+
+## Usage
+
+It is used only for non critical information.
+It is typically used in forms or in modal to help the user.
+
+<Controls of={Stories.Default} />
+
+## Variations
+
+### Background
+
+This component automatically adapts its background to contrast with its parent element.
+
+<Story of={Stories.WithDifferentBackground} />
+
+## Playground
+
+<Canvas of={Stories.Playground} layout="fullscreen" />
+<Controls of={Stories.Playground} />

package/stories/InfoMessage/infomessage.stories.tsx

@@ -0,0 +1,124 @@
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { useTheme } from 'styled-components';
+import { InfoMessage } from '../../src/lib/components/infomessage/InfoMessage.component';
+import { CoreUITheme } from '../../src/lib/style/theme';
+
+type Story = StoryObj<typeof InfoMessage>;
+
+const meta: Meta<typeof InfoMessage> = {
+  title: 'Components/InfoMessage',
+  component: InfoMessage,
+  argTypes: {
+    title: {
+      description: 'Title of the info message',
+      control: {
+        type: 'text',
+      },
+    },
+    content: {
+      description: 'Content of the info message',
+      control: {
+        type: 'text',
+      },
+    },
+    link: {
+      description: 'Link to an external resource',
+    },
+  },
+};
+
+export default meta;
+
+export const Playground: StoryObj<
+  React.ComponentProps<typeof InfoMessage> & {
+    backgroundColor: keyof CoreUITheme;
+  }
+> = {
+  render: ({ backgroundColor, ...args }) => {
+    const theme = useTheme();
+
+    return (
+      <div
+        style={{
+          backgroundColor: theme[backgroundColor],
+          padding: '1rem',
+        }}
+      >
+        <InfoMessage {...args} />
+      </div>
+    );
+  },
+  args: {
+    title: 'Title for the provided info',
+    content: 'Some text that will help the user to understand what to do',
+  },
+  argTypes: {
+    backgroundColor: {
+      description: 'Background color of the parent element',
+      options: ['Level1', 'Level2', 'Level3', 'Level4'],
+      mapping: {
+        Level1: 'backgroundLevel1',
+        Level2: 'backgroundLevel2',
+        Level3: 'backgroundLevel3',
+        Level4: 'backgroundLevel4',
+      },
+      control: {
+        type: 'radio',
+      },
+    },
+  },
+};
+
+export const Default: Story = {
+  args: {
+    title: 'Title for the provided info',
+    content: 'Some text that will help the user to understand what to do',
+  },
+};
+
+export const WithLink: Story = {
+  args: {
+    ...Default.args,
+    link: '',
+  },
+};
+
+export const WithDifferentBackground: Story = {
+  render: (args) => {
+    const theme = useTheme();
+    return (
+      <div
+        style={{
+          padding: '1rem',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-around',
+          height: '30rem',
+        }}
+      >
+        <div
+          style={{
+            height: '10rem',
+            backgroundColor: theme.backgroundLevel3,
+            padding: '1rem',
+          }}
+        >
+          <InfoMessage {...args} />
+        </div>
+        <div
+          style={{
+            height: '10rem',
+            backgroundColor: theme.backgroundLevel2,
+            padding: '1rem',
+          }}
+        >
+          <InfoMessage {...args} />
+        </div>
+      </div>
+    );
+  },
+  args: {
+    ...Default.args,
+  },
+};

package/stories/Introduction.mdx

@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Introduction" />
+
+# Get started
+
+Core UI, Scality Design System, is a reusable component library that helps Scality contributors build UIs faster. The goal is to make building durable UIs more productive and satisfying.
+
+## Install
+
+SDS components are written in React, and its stories are written in [Component Story Format](https://medium.com/storybookjs/component-story-format-66f4c32366df).
+
+## Objective
+
+A Design System is an ecosystem of guidelines, tools, components, which support teams ship more efficiently consistent design.
+
+- Synchronising designers, product teams, and developers
+- Building a shared vocabulary for reducing communication issues
+- Having one solution for one component
+- Easier testing at component level
+- Faster iterations with established design patterns
+
+Examples of public design systems:
+
+- Material Design - by Google
+- Carbon D- by IBM
+- Lighting - by Salesforce
+- Polaris - by Shopify
+- Atlassian Design - by Atlassian
+- Fluent - by Microsoft
+- AirBnb Design - by AirBnb
+- Human Interface - by Apple

package/stories/Select/select.guideline.mdx

@@ -0,0 +1,91 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  Primary,
+  Controls,
+  Unstyled,
+  Source,
+} from '@storybook/blocks';
+import { Select } from '../../src/lib/components/selectv2/Selectv2.component';
+
+import * as SelectStories from './selectv2.stories';
+
+<Meta name="Guideline" of={SelectStories} />
+
+# Select
+
+## Size & Style
+
+## Usage
+
+Use the select component to allow the user to choose between defined options.
+You can use icons to differentiates the different options; in this case, all labels should have icons.
+
+## Variations
+
+The select component come with multiple props allowing customization and adaptation to various scenarios.
+
+### Size variations
+
+By default the Select component width is 20.5rem .
+You can reduce its size by defining the 'size' props to two third, half or one third of the default size :
+
+<Story of={SelectStories.DifferentSizes} />
+
+### Options number
+
+Depending on the number of options provided to the select, different features will be automatically enabled.
+
+#### No option
+
+When no option are provided, a clear information will be given to the user
+
+<Story of={SelectStories.WithoutOptions} />
+
+#### Scrollbar:
+
+When the number of options exceeds four, a scrollbar appears, allowing users to scroll through the available options.
+
+<Story of={SelectStories.WithScrollbar} />
+
+#### Searchbar:
+
+If the number of options is greater than eight,
+a search bar is automatically added, enabling users to quickly find and select options.
+
+<Story of={SelectStories.WithSearchBar} />
+
+### Disable state
+
+#### Select
+
+The Select component can be easily disabled, preventing user interaction.
+This is useful in scenarios where user input is not allowed or required
+
+<Story of={SelectStories.DisabledSelect} />
+
+#### Options
+
+The Option component can also be disabled, preventing its selection by the user.
+
+<Canvas
+  of={SelectStories.WithDisabledOptionsWithoutMessage}
+  sourceState="hidden"
+  layout="fullscreen"
+/>
+
+You can also give more information to the user by adding a disabledReason prop to Option.
+
+<Canvas
+  of={SelectStories.WithDisabledOptionsWithMessage}
+  sourceState="hidden"
+  layout="fullscreen"
+/>
+
+### Dropdown Placement
+
+In cases where there is limited space at the bottom of the viewport,
+the dropdown menu opens toward the top to ensure visibility and usability.
+
+<Canvas of={SelectStories.NotEnoughPlaceAtTheBottom} sourceState="hidden" />