Skip to content

Commit

Permalink
docs: refactored the segment control component story (#1049)
Browse files Browse the repository at this point in the history
  • Loading branch information
@electron97
electron97 authored Oct 6, 2023
1 parent 663702f commit 180f6c4
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 143 deletions.
248 changes: 134 additions & 114 deletions packages/segmentedControl/stories/SegmentedControl.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import * as React from "react";
import { StoryFn, Meta } from "@storybook/react";
import { SegmentedControl } from "../index";
import SegmentedControlButton from "../components/SegmentedControlButton";
import SegmentedControlStoryHelper from "./helpers/SegmentedControlStoryHelper";
import { Icon } from "../../icon";
import { SystemIcons } from "../../icons/dist/system-icons-enum";

Expand All @@ -11,122 +10,143 @@ export default {
component: SegmentedControl
} as Meta;

const Template: StoryFn = args => (
<SegmentedControlStoryHelper>
{({ changeHandler, selectedSegment }) => (
<SegmentedControl
id="default"
selectedSegment={selectedSegment}
onSelect={changeHandler}
>
<SegmentedControlButton value="exosphere">
Exosphere
</SegmentedControlButton>
<SegmentedControlButton value="thermosphere">
Thermosphere
</SegmentedControlButton>
<SegmentedControlButton value="mesosphere">
Mesosphere
</SegmentedControlButton>
<SegmentedControlButton value="stratosphere">
Stratosphere
</SegmentedControlButton>
</SegmentedControl>
)}
</SegmentedControlStoryHelper>
);
const Template: StoryFn = args => {
const [selectedSegment, setSelectedSegment] = React.useState<string>("");

const handleChange = value => {
setSelectedSegment(value);
};

return (
<SegmentedControl
id="default"
selectedSegment={selectedSegment}
onSelect={handleChange}
>
<SegmentedControlButton value="exosphere">
Exosphere
</SegmentedControlButton>
<SegmentedControlButton value="thermosphere">
Thermosphere
</SegmentedControlButton>
<SegmentedControlButton value="mesosphere">
Mesosphere
</SegmentedControlButton>
<SegmentedControlButton value="stratosphere">
Stratosphere
</SegmentedControlButton>
</SegmentedControl>
);
};

export const Default = {
render: Template
};

export const WithASelectedSegment = () => (
<SegmentedControlStoryHelper selectedSegment="exosphere">
{({ changeHandler, selectedSegment }) => (
<SegmentedControl
id="selectedSegment"
selectedSegment={selectedSegment}
onSelect={changeHandler}
>
<SegmentedControlButton value="exosphere">
Exosphere
</SegmentedControlButton>
<SegmentedControlButton value="thermosphere">
Thermosphere
</SegmentedControlButton>
<SegmentedControlButton value="mesosphere">
Mesosphere
</SegmentedControlButton>
<SegmentedControlButton value="stratosphere">
Stratosphere
</SegmentedControlButton>
</SegmentedControl>
)}
</SegmentedControlStoryHelper>
);

export const IconOnlyButtonLabels = () => (
<SegmentedControlStoryHelper>
{({ changeHandler, selectedSegment }) => (
<SegmentedControl
id="nontextChildren"
selectedSegment={selectedSegment}
onSelect={changeHandler}
>
<SegmentedControlButton value="list">
<Icon ariaLabel="list view" shape={SystemIcons.List} size="xs" />
</SegmentedControlButton>
<SegmentedControlButton value="charts">
<Icon ariaLabel="chart view" shape={SystemIcons.Donut} size="xs" />
</SegmentedControlButton>
</SegmentedControl>
)}
</SegmentedControlStoryHelper>
);

export const WithTooltipContent = () => (
<SegmentedControlStoryHelper>
{({ changeHandler, selectedSegment }) => (
<SegmentedControl
id="nontextChildren"
selectedSegment={selectedSegment}
onSelect={changeHandler}
>
<SegmentedControlButton value="list" tooltipContent="Turn on the list">
<Icon ariaLabel="list view" shape={SystemIcons.List} size="xs" />
</SegmentedControlButton>
<SegmentedControlButton
value="charts"
tooltipContent="Turn on the charts"
>
<Icon ariaLabel="chart view" shape={SystemIcons.Donut} size="xs" />
</SegmentedControlButton>
</SegmentedControl>
)}
</SegmentedControlStoryHelper>
);

export const CustomSegmentedControlButtonIdProp = () => (
<SegmentedControlStoryHelper>
{({ changeHandler, selectedSegment }) => (
<SegmentedControl
id="test"
selectedSegment={selectedSegment}
onSelect={changeHandler}
export const WithASelectedSegment = () => {
const [selectedSegment, setSelectedSegment] =
React.useState<string>("exosphere");

const handleChange = value => {
setSelectedSegment(value);
};

return (
<SegmentedControl
id="selectedSegment"
selectedSegment={selectedSegment}
onSelect={handleChange}
>
<SegmentedControlButton value="exosphere">
Exosphere
</SegmentedControlButton>
<SegmentedControlButton value="thermosphere">
Thermosphere
</SegmentedControlButton>
<SegmentedControlButton value="mesosphere">
Mesosphere
</SegmentedControlButton>
<SegmentedControlButton value="stratosphere">
Stratosphere
</SegmentedControlButton>
</SegmentedControl>
);
};

export const IconOnlyButtonLabels = () => {
const [selectedSegment, setSelectedSegment] = React.useState<string>("");

const handleChange = value => {
setSelectedSegment(value);
};

return (
<SegmentedControl
id="nontextChildren"
selectedSegment={selectedSegment}
onSelect={handleChange}
>
<SegmentedControlButton value="list">
<Icon ariaLabel="list view" shape={SystemIcons.List} size="xs" />
</SegmentedControlButton>
<SegmentedControlButton value="charts">
<Icon ariaLabel="chart view" shape={SystemIcons.Donut} size="xs" />
</SegmentedControlButton>
</SegmentedControl>
);
};

export const WithTooltipContent = () => {
const [selectedSegment, setSelectedSegment] = React.useState<string>("");

const handleChange = value => {
setSelectedSegment(value);
};

return (
<SegmentedControl
id="nontextChildren"
selectedSegment={selectedSegment}
onSelect={handleChange}
>
<SegmentedControlButton value="list" tooltipContent="Turn on the list">
<Icon ariaLabel="list view" shape={SystemIcons.List} size="xs" />
</SegmentedControlButton>
<SegmentedControlButton
value="charts"
tooltipContent="Turn on the charts"
>
<SegmentedControlButton id="btn.exosphere" value="exosphere">
Exosphere
</SegmentedControlButton>
<SegmentedControlButton id="btn.thermosphere" value="thermosphere">
Thermosphere
</SegmentedControlButton>
<SegmentedControlButton id="btn.mesosphere" value="mesosphere">
Mesosphere
</SegmentedControlButton>
<SegmentedControlButton id="btn.stratosphere" value="stratosphere">
Stratosphere
</SegmentedControlButton>
</SegmentedControl>
)}
</SegmentedControlStoryHelper>
);
<Icon ariaLabel="chart view" shape={SystemIcons.Donut} size="xs" />
</SegmentedControlButton>
</SegmentedControl>
);
};

export const CustomSegmentedControlButtonIdProp = () => {
const [selectedSegment, setSelectedSegment] = React.useState<string>("");

const handleChange = value => {
setSelectedSegment(value);
};

return (
<SegmentedControl
id="test"
selectedSegment={selectedSegment}
onSelect={handleChange}
>
<SegmentedControlButton id="btn.exosphere" value="exosphere">
Exosphere
</SegmentedControlButton>
<SegmentedControlButton id="btn.thermosphere" value="thermosphere">
Thermosphere
</SegmentedControlButton>
<SegmentedControlButton id="btn.mesosphere" value="mesosphere">
Mesosphere
</SegmentedControlButton>
<SegmentedControlButton id="btn.stratosphere" value="stratosphere">
Stratosphere
</SegmentedControlButton>
</SegmentedControl>
);
};
29 changes: 0 additions & 29 deletions packages/segmentedControl/stories/helpers/SegmentedControlStoryHelper.tsx
View file

This file was deleted.

0 comments on commit 180f6c4

Please sign in to comment.