@scality/core-ui 0.115.0

package/stories/text.stories.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import {
+  BasicText,
+  SecondaryText,
+  LargerText,
+  EmphaseText,
+  StatusText,
+  SmallerText,
+  ChartTitleText,
+  Text,
+  Link,
+} from '../src/lib/components/text/Text.component';
+import { Wrapper } from './common';
+import styled from 'styled-components';
+import { Stack } from '../src/lib';
+const TextWrapper = styled(Wrapper)`
+  min-height: 0;
+`;
+export default {
+  title: 'Components/Styling/Text',
+  component: StatusText,
+  argTypes: {
+    status: {
+      control: {
+        disable: true,
+      },
+    },
+    children: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export const basicText = {
+  render: ({}: any) => {
+    return (
+      <TextWrapper>
+        <BasicText>basic text</BasicText>
+      </TextWrapper>
+    );
+  },
+};
+
+export const secondaryText = {
+  render: ({}: any) => {
+    return (
+      <TextWrapper>
+        <SecondaryText>secondary text</SecondaryText>
+      </TextWrapper>
+    );
+  },
+};
+
+export const largerText = {
+  render: ({}: any) => {
+    return (
+      <TextWrapper>
+        <LargerText>larger text</LargerText>
+      </TextWrapper>
+    );
+  },
+};
+
+export const emphaseText = {
+  render: ({}: any) => {
+    return (
+      <TextWrapper>
+        <EmphaseText>emphase text</EmphaseText>
+      </TextWrapper>
+    );
+  },
+};
+
+export const statusText = {
+  render: ({}: any) => {
+    return (
+      <TextWrapper>
+        <div>
+          <StatusText status="healthy">healthy status text</StatusText>
+        </div>
+        <div>
+          <StatusText status="warning">warning status text</StatusText>
+        </div>
+        <div>
+          <StatusText status="critical">critical status text</StatusText>
+        </div>
+      </TextWrapper>
+    );
+  },
+};
+
+export const smallerText = {
+  render: ({}: any) => {
+    return (
+      <TextWrapper>
+        <SmallerText>smaller text</SmallerText>
+      </TextWrapper>
+    );
+  },
+};
+
+export const chartTitleText = {
+  render: ({}: any) => {
+    return (
+      <TextWrapper>
+        <ChartTitleText>chart title text</ChartTitleText>
+      </TextWrapper>
+    );
+  },
+};
+
+export const TextStory = {
+  render: ({}) => {
+    return (
+      <TextWrapper>
+        <Stack direction="vertical">
+          <Text>Basic</Text>
+          <Text variant="Basic">Explicitely basic</Text>
+          <Text variant="ChartTitle">Chart title</Text>
+          <Text variant="Larger">Larger</Text>
+          <Text variant="Smaller">Smaller</Text>
+          <Text variant="Basic" color="textSecondary">
+            With secondary color
+          </Text>
+          <Text variant="Basic" color="textSecondary" isEmphazed>
+            With secondary color and emphazed
+          </Text>
+          <Text variant="Smaller" color="statusCritical">
+            With status color
+          </Text>
+          <Link href="#">Link</Link>
+        </Stack>
+      </TextWrapper>
+    );
+  },
+};

package/stories/textarea.stories.tsx

@@ -0,0 +1,69 @@
+import { action } from '@storybook/addon-actions';
+import { TextArea } from '../src/lib';
+export default {
+  title: 'Components/Inputs/TextArea',
+  component: TextArea,
+  args: {
+    onChange: action('onChange'),
+    name: 'TextArea',
+  },
+  argTypes: {
+    name: {
+      table: {
+        disable: true,
+      },
+    },
+    value: {
+      type: 'string',
+    },
+    width: {
+      type: 'string',
+    },
+    rows: {
+      type: 'number',
+    },
+    cols: {
+      type: 'number',
+    },
+  },
+};
+
+export const Playground = {};
+
+export const DefaultTextArea = {
+  args: {
+    value: 'Some text',
+  },
+};
+
+export const TextVariantTextArea = {
+  args: {
+    variant: 'text',
+    value: 'Text area with "text" variant',
+  },
+};
+
+export const DisabledTextArea = {
+  args: {
+    placeholder: 'This text area is disabled',
+    disabled: true,
+  },
+};
+
+export const WithWidthSet = {
+  args: {
+    placeholder: 'Text Area input',
+    width: '300px',
+  },
+};
+
+/**
+ * The size of the textarea can also be set with 'rows' and 'cols' props
+ */
+export const RowsAndColsSet = {
+  args: {
+    rows: 20,
+    cols: 40,
+    placeholder: 'With rows = 20 and cols = 40',
+  },
+};

package/stories/textbadge.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { TextBadge } from '../src/lib/components/textbadge/TextBadge.component';
+import { Wrapper, Title } from './common';
+export default {
+  title: 'Components/TextBadge',
+  component: TextBadge,
+};
+
+export const Playground = {
+  args: {
+    text: 'Test me',
+  },
+};
+export const Default = {
+  render: ({}) => {
+    return (
+      <Wrapper>
+        <Title>Text Badges</Title>
+        <TextBadge text="0" />
+        <TextBadge text="1" variant="statusHealthy" />
+        <TextBadge text="2" variant="statusWarning" />
+        <TextBadge text="3" variant="statusCritical" />
+        <TextBadge text="Badge" variant="infoSecondary" />
+      </Wrapper>
+    );
+  },
+};

package/stories/toast.stories.tsx

@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import { BasicText } from '../src/lib';
+import { Button } from '../src/lib/components/buttonv2/Buttonv2.component';
+import { Icon } from '../src/lib/components/icon/Icon.component';
+import {
+  Toast,
+  ToastProps,
+  useGetBackgroundColor,
+} from '../src/lib/components/toast/Toast.component';
+
+export default {
+  title: 'Components/Feedback/Toast',
+  component: Toast,
+  tags: ['autodocs'],
+  argTypes: {
+    open: {
+      control: {
+        disable: true,
+      },
+    },
+    message: {
+      control: {
+        disable: true,
+        description: 'The message to display in the toast',
+      },
+    },
+    status: {
+      control: 'radio',
+      options: ['success', 'error', 'warning', 'info'],
+      description: 'The status of the toast',
+    },
+    position: {
+      control: 'select',
+      options: [
+        'top-center',
+        'top-left',
+        'top-right',
+        'bottom-center',
+        'bottom-left',
+        'bottom-right',
+      ],
+      description: 'The position of the toast',
+    },
+    autoDismiss: {
+      control: 'boolean',
+      description: 'Whether the toast should dismiss automatically',
+    },
+    duration: {
+      control: 'number',
+      description: 'The duration of the toast',
+    },
+    icon: {
+      control: {
+        disable: true,
+        description: 'The icon to display in the toast',
+      },
+    },
+    width: {
+      control: {
+        disable: true,
+        description: 'The width of the toast',
+      },
+    },
+    withProgressBar: {
+      control: 'boolean',
+      description: 'Whether the toast should display a progress bar',
+    },
+    progressColor: {
+      control: {
+        disable: true,
+      },
+    },
+    style: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+};
+
+const Template = (args: Omit<ToastProps, 'open' | 'onClose'>) => {
+  const [open, setOpen] = useState(false);
+  const color = useGetBackgroundColor(args.status || 'info');
+  const iconName =
+    args.status === 'error'
+      ? 'Times-circle'
+      : args.status === 'warning'
+      ? 'Exclamation-circle'
+      : args.status === 'success'
+      ? 'Check-circle'
+      : 'Info-circle';
+  return (
+    <div style={{ height: '30vh' }}>
+      {!open && (
+        <Button label={'Open my custom toast'} onClick={() => setOpen(true)} />
+      )}
+      <Toast
+        open={open}
+        onClose={() => setOpen(false)}
+        icon={<Icon name={iconName} color={color} />}
+        {...args}
+      />
+    </div>
+  );
+};
+
+export const SimpleToast = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    const handleClick = () => {
+      setOpen(true);
+    };
+
+    return (
+      <div style={{ height: '30vh' }}>
+        {!open && <Button label={'Open simple toast'} onClick={handleClick} />}
+        <Toast
+          open={open}
+          message={<BasicText>{"I'm a toast"}</BasicText>}
+          onClose={() => setOpen(false)}
+          status="info"
+          {...args}
+        />
+      </div>
+    );
+  },
+};
+
+export const ToastWithProgressBar = {
+  ...SimpleToast,
+  args: {
+    message: <BasicText>{"I'm a toast with a progress bar"}</BasicText>,
+    withProgressBar: true,
+  },
+};
+
+export const CustomToast: {
+  args?: Omit<ToastProps, 'open' | 'onClose'>;
+} = Template.bind({});
+CustomToast.args = {
+  message: <BasicText>{"I'm a custom toast"}</BasicText>,
+  status: 'info',
+};

package/stories/toggle.stories.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { Toggle } from '../src/lib/components/toggle/Toggle.component';
+import { Wrapper } from './common';
+import { useArgs } from '@storybook/preview-api';
+export default {
+  title: 'Components/Inputs/Toggle',
+  component: Toggle,
+  args: {
+    name: 'toggle',
+  },
+};
+export const Playground = {
+  render: (args) => {
+    const [{ toggle }, updateArgs] = useArgs();
+    return (
+      <Toggle
+        toggle={toggle}
+        onChange={() => updateArgs({ toggle: !toggle })}
+        {...args}
+      />
+    );
+  },
+  args: {
+    label: 'Playground',
+  },
+};
+export const LabelledToggle = {
+  render: (args) => {
+    const [toggle, setToggle] = useState(false);
+    return (
+      <Toggle toggle={toggle} onChange={() => setToggle(!toggle)} {...args} />
+    );
+  },
+  args: {
+    label: 'Airplane mode',
+  },
+};
+export const DisabledToggle = {
+  ...Playground,
+  args: {
+    label: 'Disabled Toggle',
+    disabled: true,
+    toggle: false,
+  },
+};

package/stories/tooltip.stories.tsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import { Tooltip } from '../src/lib/components/tooltip/Tooltip.component';
+import { Button } from '../src/lib/components/buttonv2/Buttonv2.component';
+import { Wrapper, Title, SubTitle } from './common';
+import { placementOptions } from './controls';
+
+export default {
+  title: 'Components/Feedback/Tooltip',
+  component: Tooltip,
+  argTypes: {
+    placement: {
+      options: placementOptions,
+    },
+  },
+};
+export const Playground = {
+  render: (args) => {
+    return (
+      <Wrapper
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Tooltip overlay="You can play with me" {...args}>
+          <SubTitle>
+            Hover here <br />
+            to see <br /> the tooltip !
+          </SubTitle>
+        </Tooltip>
+      </Wrapper>
+    );
+  },
+};
+export const DifferentsPlacements = {
+  render: () => {
+    return (
+      <Wrapper
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <div>
+          <Title>Default Tooltip</Title>
+          <Tooltip overlay="Hellooooo">
+            <SubTitle>Hover here!</SubTitle>
+          </Tooltip>
+        </div>
+
+        <div>
+          <Title>Tooltip right</Title>
+          <Tooltip placement="right" overlay="Helloooooo">
+            <SubTitle>Hover here!</SubTitle>
+          </Tooltip>
+        </div>
+        <div
+          style={{
+            marginLeft: '100px',
+          }}
+        >
+          <Title>Tooltip left</Title>
+          <Tooltip placement="left" overlay="Helloooooo">
+            <SubTitle>Hover here!</SubTitle>
+          </Tooltip>
+        </div>
+        <div>
+          <Title>Tooltip bottom</Title>
+          <Tooltip placement="bottom" overlay="Helloooooo">
+            <SubTitle>Hover here!</SubTitle>
+          </Tooltip>
+        </div>
+        <div></div>
+      </Wrapper>
+    );
+  },
+};
+
+export const CustomizeTooltip = {
+  render: () => {
+    return (
+      <Wrapper>
+        <Tooltip
+          placement="right"
+          overlayStyle={{
+            backgroundColor: 'green',
+            fontSize: '20px',
+            width: '120px',
+          }}
+          overlay="Helloooooo"
+        >
+          <SubTitle>Hover here!</SubTitle>
+        </Tooltip>
+      </Wrapper>
+    );
+  },
+};
+
+export const TooltipOnButton = {
+  render: () => (
+    <Wrapper
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <div>
+        <Title>Tooltip with button</Title>
+        <Button
+          icon={<i className="fas fa-trash" />}
+          label=""
+          tooltip={{
+            placement: 'top',
+            overlay: `Hello, this is the button tooltip!`,
+            overlayStyle: { width: '8rem' },
+          }}
+        />
+      </div>
+      <div>
+        <Title>Tooltip with disabled button</Title>
+        <Button
+          disabled={true}
+          icon={<i className="fas fa-trash" />}
+          label=""
+          tooltip={{
+            placement: 'top',
+            overlay: `You can't delete it :(`,
+            overlayStyle: { width: '8rem' },
+          }}
+        />
+      </div>
+    </Wrapper>
+  ),
+};
+
+export const YouCanAlsoAddIcon = {
+  render: () => {
+    return (
+      <Wrapper>
+        <div>
+          <Title>Add icon in the overlay of tooltip</Title>
+          <Tooltip
+            placement="bottom"
+            overlay={
+              <div>
+                <i className="far fa-smile"></i>Helloooooooo
+              </div>
+            }
+          >
+            <SubTitle>tooltip with icon</SubTitle>
+          </Tooltip>
+        </div>
+      </Wrapper>
+    );
+  },
+};
+
+export const WithoutOverlay = {
+  render: () => {
+    return (
+      <div>
+        <Title>A Tooltip whitout overlay doesn't trigger</Title>
+        <Tooltip placement="bottom">
+          <SubTitle>Hover here!</SubTitle>
+        </Tooltip>
+      </div>
+    );
+  },
+};

package/stories/typography.mdx

@@ -0,0 +1,28 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Style/Typography" />
+
+# Typography
+
+## Font
+
+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).
+
+Steps:
+
+|size  | level  |
+|-----:|--------|
+|  26  | h1     |
+| 22.5 | h2     |
+|  20  | h3     |
+|  18  | h4     |
+|  16  | h5     |
+|  14  | p      |
+| 12.5 | small  |
+|  11  | xsmall |
+|  9.8 | tbd    |