Skip to content

Commit

Permalink
refactor(batch-selection): refactor stories to TS
Browse files Browse the repository at this point in the history
  • Loading branch information
@mkrds
mkrds committed Dec 15, 2022
1 parent f4053e6 commit 510a305
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 99 deletions.
46 changes: 17 additions & 29 deletions ...election/batch-selection-test.stories.mdx → ...election/batch-selection-test.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,27 @@
import { Meta, Story, Canvas } from "@storybook/addon-docs";
import { action } from "@storybook/addon-actions";

import BatchSelection from ".";
import React from "react";
import BatchSelection, { BatchSelectionProps } from ".";
import IconButton from "../icon-button";
import Icon from "../icon";

<Meta
title="Batch Selection/Test"
parameters={{
export default {
title: "Batch Selection/Test",
parameters: {
info: { disable: true },
chromatic: {
disable: true,
},
}}
argTypes={{
},
argTypes: {
colorTheme: {
options: ["dark", "light", "white", "transparent"],
control: {
type: "select",
},
},
}}
/>
},
};

export const BatchSelectionStory = (args) => (
export const Default = (args: Omit<BatchSelectionProps, "children">) => (
<BatchSelection {...args}>
<IconButton onAction={() => {}}>
<Icon type="csv" />
Expand All @@ -37,20 +35,10 @@ export const BatchSelectionStory = (args) => (
</BatchSelection>
);

# Batch Selection

### Default

<Canvas>
<Story
name="default"
args={{
disabled: false,
hidden: false,
selectedCount: 0,
colorTheme: "transparent",
}}
>
{BatchSelectionStory.bind({})}
</Story>
</Canvas>
Default.storyName = "default";
Default.args = {
disabled: false,
hidden: false,
selectedCount: 0,
colorTheme: "transparent",
};
76 changes: 6 additions & 70 deletions src/components/batch-selection/batch-selection.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ import TranslationKeysTable from "../../../.storybook/utils/translation-keys-tab

import BatchSelection from ".";
import IconButton from "../icon-button";
import Icon from "../icon";
import Link from "../link";
import * as stories from "./batch-selection.stories";

<Meta title="Batch Selection" parameters={{ info: { disable: true } }} />

Expand Down Expand Up @@ -33,94 +32,31 @@ import IconButton from "carbon-react/lib/components/icon-button";
### Basic usage

<Canvas>
<Story name="default">
<BatchSelection selectedCount={0}>
<span style={{ paddingRight: "5px" }}>
(<Link>Select All 38 items</Link>)
</span>
<IconButton onAction={() => {}}>
<Icon type="csv" />
</IconButton>
<IconButton onAction={() => {}}>
<Icon type="bin" />
</IconButton>
<IconButton onAction={() => {}}>
<Icon type="pdf" />
</IconButton>
</BatchSelection>
</Story>
<Story name="default" story={stories.Default} />
</Canvas>

### On dark background

<Canvas>
<Story name="dark">
<BatchSelection selectedCount={1} colorTheme="dark">
<IconButton onAction={() => {}}>
<Icon type="csv" />
</IconButton>
<IconButton onAction={() => {}}>
<Icon type="bin" />
</IconButton>
<IconButton onAction={() => {}}>
<Icon type="pdf" />
</IconButton>
</BatchSelection>
</Story>
<Story name="dark" story={stories.Dark} />
</Canvas>

### On light background

<Canvas>
<Story name="light">
<BatchSelection selectedCount={2} colorTheme="light">
<IconButton onAction={() => {}}>
<Icon type="csv" />
</IconButton>
<IconButton onAction={() => {}}>
<Icon type="bin" />
</IconButton>
<IconButton onAction={() => {}}>
<Icon type="pdf" />
</IconButton>
</BatchSelection>
</Story>
<Story name="light" story={stories.Light} />
</Canvas>

### On white background

<Canvas>
<Story name="white">
<BatchSelection selectedCount={3} colorTheme="white">
<IconButton onAction={() => {}}>
<Icon type="csv" />
</IconButton>
<IconButton onAction={() => {}}>
<Icon type="bin" />
</IconButton>
<IconButton onAction={() => {}}>
<Icon type="pdf" />
</IconButton>
</BatchSelection>
</Story>
<Story name="white" story={stories.White} />
</Canvas>

### Disabled

<Canvas>
<Story name="disabled">
<BatchSelection selectedCount={4} disabled>
<IconButton onAction={() => {}}>
<Icon type="csv" />
</IconButton>
<IconButton onAction={() => {}}>
<Icon type="bin" />
</IconButton>
<IconButton onAction={() => {}}>
<Icon type="pdf" />
</IconButton>
</BatchSelection>
</Story>
<Story name="disabled" story={stories.Disabled} />
</Canvas>

## Props
Expand Down
62 changes: 62 additions & 0 deletions src/components/batch-selection/batch-selection.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import React from "react";
import { ComponentStory } from "@storybook/react";

import BatchSelection from ".";
import IconButton from "../icon-button";
import Icon from "../icon";
import Button from "../button";

export const Default = () => (
<BatchSelection selectedCount={0}>
<Button size="small" mx={1} buttonType="secondary">
Select All 38 items
</Button>
<IconButton onAction={() => {}}>
<Icon type="csv" />
</IconButton>
<IconButton onAction={() => {}}>
<Icon type="bin" />
</IconButton>
<IconButton onAction={() => {}}>
<Icon type="pdf" />
</IconButton>
</BatchSelection>
);

export const Themed: ComponentStory<typeof BatchSelection> = (args) => (
<BatchSelection {...args}>
<IconButton onAction={() => {}}>
<Icon type="csv" />
</IconButton>
<IconButton onAction={() => {}}>
<Icon type="bin" />
</IconButton>
<IconButton onAction={() => {}}>
<Icon type="pdf" />
</IconButton>
</BatchSelection>
);

export const Dark = Themed.bind({});
Dark.args = {
selectedCount: 1,
colorTheme: "dark",
};

export const Light = Themed.bind({});
Light.args = {
selectedCount: 2,
colorTheme: "light",
};

export const White = Themed.bind({});
White.args = {
selectedCount: 3,
colorTheme: "white",
};

export const Disabled = Themed.bind({});
Disabled.args = {
selectedCount: 4,
disabled: true,
};

0 comments on commit 510a305

Please sign in to comment.