@scality/core-ui 0.115.0

package/stories/statuswrapper.stories.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { StatusWrapper } from '../src/lib/components/statuswrapper/Statuswrapper.component';
+import { Wrapper, Title } from './common';
+import styled from 'styled-components';
+import { Icon } from '../src/lib/components/icon/Icon.component';
+import {
+  BasicText,
+  SecondaryText,
+  LargerText,
+  EmphaseText,
+  StatusText,
+  SmallerText,
+  ChartTitleText,
+} from '../src/lib/components/text/Text.component';
+const PreviewWrapper = styled(Wrapper)`
+  min-height: 0;
+`;
+export default {
+  title: 'Components/Data Display/StatusWrapper',
+  component: StatusWrapper,
+  args: {
+    children: <Icon name={'Network'} color={'statusWarning'} />,
+  },
+  argTypes: {
+    children: {
+      control: false,
+      description: 'The element to apply the status to',
+      table: {
+        type: { summary: 'ReactNode' },
+      },
+    },
+  },
+};
+
+export const Playground = {};
+
+export const Default = {
+  render: ({}) => {
+    return (
+      <Wrapper>
+        <Title>Status Wrapper</Title>
+
+        <PreviewWrapper>
+          <BasicText>
+            <StatusWrapper status="healthy">
+              <Icon name={'Network'} color={'statusHealthy'} />
+            </StatusWrapper>
+            This is a text
+          </BasicText>
+        </PreviewWrapper>
+
+        <PreviewWrapper>
+          <SecondaryText>
+            <StatusWrapper status="unknown">
+              <Icon name={'Network'} color={'infoPrimary'} />
+            </StatusWrapper>
+            This is a text
+          </SecondaryText>
+        </PreviewWrapper>
+
+        <PreviewWrapper>
+          <LargerText>
+            <StatusWrapper status="warning">
+              <Icon name={'Network'} color={'statusWarning'} />
+            </StatusWrapper>
+            This is a text
+          </LargerText>
+        </PreviewWrapper>
+
+        <PreviewWrapper>
+          <EmphaseText>
+            <StatusWrapper status="critical">
+              <Icon name={'Network'} color={'statusCritical'} />
+            </StatusWrapper>
+            This is a text
+          </EmphaseText>
+        </PreviewWrapper>
+
+        <PreviewWrapper>
+          <StatusText>
+            <StatusWrapper status="unknown">
+              <Icon name={'Node-backend'} color={'infoPrimary'} />
+            </StatusWrapper>
+            This is a text
+          </StatusText>
+        </PreviewWrapper>
+
+        <PreviewWrapper>
+          <SmallerText>
+            <StatusWrapper status="warning">
+              <Icon name={'Volume-backend'} color={'statusWarning'} />
+            </StatusWrapper>
+            This is a text
+          </SmallerText>
+        </PreviewWrapper>
+
+        <PreviewWrapper>
+          <ChartTitleText>
+            <StatusWrapper status="critical">
+              <Icon name={'Toolbox'} color={'statusCritical'} />
+            </StatusWrapper>
+            This is a text
+          </ChartTitleText>
+        </PreviewWrapper>
+      </Wrapper>
+    );
+  },
+};

package/stories/stepper.stories.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import {
+  Stepper,
+  useStepper,
+} from '../src/lib/components/steppers/Stepper.component';
+import styled from 'styled-components';
+import { Box } from '../src/lib/components/box/Box';
+import { Stack } from '../src/lib/spacing';
+import { Button } from '../src/lib/components/buttonv2/Buttonv2.component';
+import { Text } from '../src/lib/components/text/Text.component';
+import { Wrapper as StoryWrapper } from './common';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  height: 100%;
+`;
+
+const FirstStepComponent = (props: Record<string, never>) => {
+  const { next } = useStepper(StepIndexes.Step1, STEPS);
+  return (
+    <Wrapper>
+      <Box
+        display="flex"
+        flexDirection={'row'}
+        alignItems="baseline"
+        gap={'2rem'}
+      ></Box>
+      <Stack>
+        <Text>First Step</Text>
+        <Button
+          label="Next"
+          variant="secondary"
+          onClick={() => next({ name: 'something' })}
+        />
+      </Stack>
+    </Wrapper>
+  );
+};
+
+const SecondStepComponent = ({ name }: { name: string }) => {
+  const { next, prev } = useStepper(StepIndexes.Step2, STEPS);
+  return (
+    <Wrapper>
+      <Box
+        display="flex"
+        flexDirection={'row'}
+        alignItems="baseline"
+        gap={'2rem'}
+      ></Box>
+      <Stack>
+        <Text>Second Step : {name}</Text>
+        <Button label="Back" variant="secondary" onClick={() => prev({})} />
+        <Button
+          label="Next"
+          variant="secondary"
+          onClick={() => next({ type: 'anything' })}
+        />
+      </Stack>
+    </Wrapper>
+  );
+};
+
+const ThirdStepComponent = ({ type }: { type: string }) => {
+  const { prev } = useStepper(StepIndexes.Step3, STEPS);
+  return (
+    <Wrapper>
+      <Box
+        display="flex"
+        flexDirection={'row'}
+        alignItems="baseline"
+        gap={'2rem'}
+      ></Box>
+      <Stack>
+        <Text>Third Step : {type}</Text>
+        <Button
+          label="Back"
+          variant="secondary"
+          onClick={() => prev({ name: 'something' })}
+        />
+      </Stack>
+    </Wrapper>
+  );
+};
+
+const STEPS = [
+  {
+    label: 'Step 1',
+    Component: FirstStepComponent,
+  },
+  {
+    label: 'Step 2',
+    Component: SecondStepComponent,
+  },
+  {
+    label: 'Step 3',
+    Component: ThirdStepComponent,
+  },
+] as const;
+
+enum StepIndexes {
+  Step1,
+  Step2,
+  Step3,
+}
+
+const meta: Meta<typeof Stepper> = {
+  tags: ['autodocs'],
+  title: 'Components/Progress & loading/Stepper',
+  component: Stepper,
+};
+export default meta;
+
+type Story = StoryObj<typeof Stepper>;
+export const SimpleStepper: Story = {
+  name: 'Simple Stepper',
+  render: () => (
+    <StoryWrapper>
+      <Stepper steps={STEPS} />
+    </StoryWrapper>
+  ),
+};

package/stories/steppers.stories.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { Steppers } from '../src/lib/components/steppers/Steppers.component';
+import { action } from '@storybook/addon-actions';
+import { Button } from '../src/lib/components/buttonv2/Buttonv2.component';
+import { Wrapper } from './common';
+const steps = [
+  {
+    title: 'Node Registered',
+    content: (
+      <Button
+        variant="secondary"
+        label="Apply"
+        onClick={action('Button Apply Click')}
+      />
+    ),
+    'data-cy': 'Node_Registered',
+  },
+  {
+    title: 'Deploy Salt Minion on node',
+    inProgress: false,
+    content: (
+      <Button
+        label="Apply"
+        variant="secondary"
+        onClick={action('Button Apply Click')}
+      />
+    ),
+    'data-cy': 'Deploy_Salt',
+  },
+  {
+    title: 'Add node to Workload Plane',
+    error: false,
+    content: (
+      <Button
+        label="Apply"
+        variant="secondary"
+        onClick={action('Button Apply Click')}
+      />
+    ),
+    'data-cy': 'Add_Node_WP',
+  },
+  {
+    title: 'Add node to Control Plane',
+    content: (
+      <Button
+        label="Apply"
+        variant="secondary"
+        onClick={action('Button Apply Click')}
+      />
+    ),
+    'data-cy': 'Add_Node_CP',
+  },
+  {
+    title: 'Extend etcd cluster to node',
+    content: (
+      <Button
+        label="Apply"
+        variant="secondary"
+        onClick={action('Button Apply Click')}
+      />
+    ),
+    'data-cy': 'Extend_Node',
+  },
+];
+const stepsWithProgress = [...steps];
+stepsWithProgress[1] = {
+  title: 'Deploy Salt Minion on node',
+  inProgress: true,
+  content: (
+    <Button
+      label="Apply"
+      variant="secondary"
+      onClick={action('Button Apply Click')}
+    />
+  ),
+  'data-cy': 'Deploy_Salt',
+};
+const stepsWithError = [...steps];
+stepsWithError[2] = {
+  title: 'Add node to Workload Plane',
+  error: true,
+  content: (
+    <Button
+      label="Apply"
+      variant="secondary"
+      onClick={action('Button Apply Click')}
+    />
+  ),
+  'data-cy': 'Add_Node_WP',
+};
+export default {
+  title: 'Components/Progress & loading/Steppers',
+  component: Steppers,
+};
+
+export const DefaultSteppers = {
+  args: {
+    steps,
+    activeStep: 1,
+  },
+};
+
+export const SteppersWithLoading = {
+  args: {
+    steps: stepsWithProgress,
+    activeStep: 1,
+  },
+};
+
+export const SteppersWithError = {
+  args: {
+    steps: stepsWithError,
+    activeStep: 2,
+  },
+};