109 lines
2.6 KiB
Markdown
109 lines
2.6 KiB
Markdown
import { TooltipProvider } from "@radix-ui/react-tooltip";
|
|
import { Canvas, Meta, Story } from "@storybook/addon-docs";
|
|
|
|
import {
|
|
CustomArgsTable,
|
|
Examples,
|
|
Example,
|
|
Title,
|
|
VariantsTable,
|
|
VariantRow,
|
|
} from "@calcom/storybook/components";
|
|
import { ArrowRight } from "@calcom/ui/components/icon";
|
|
|
|
import { ToggleGroup } from "./ToggleGroup";
|
|
|
|
<Meta title="UI/Form/ToggleGroup" component={ToggleGroup} />
|
|
|
|
<Title title="ToggleGroup" suffix="Brief" subtitle="Version 1.0 — Last Update: 17 Aug 2023" />
|
|
|
|
## Definition
|
|
|
|
The `ToggleGroup` component is used to create a group of toggle items with optional tooltips.
|
|
|
|
## Structure
|
|
|
|
<CustomArgsTable of={ToggleGroup} />
|
|
|
|
## Examples
|
|
|
|
<Examples title="Toggle Group With Icon Left">
|
|
<Example>
|
|
<TooltipProvider>
|
|
<ToggleGroup
|
|
options={[
|
|
{ value: "option1", label: "Option 1", tooltip: "Tooltip for Option 1", iconLeft: <ArrowRight /> },
|
|
{ value: "option2", label: "Option 2", iconLeft: <ArrowRight /> },
|
|
{ value: "option3", label: "Option 3", iconLeft: <ArrowRight /> },
|
|
{
|
|
value: "option4",
|
|
label: "Option 4",
|
|
tooltip: "Tooltip for Option 4",
|
|
iconLeft: <ArrowRight />,
|
|
},
|
|
{ value: "option5", label: "Option 5", iconLeft: <ArrowRight />, disabled: true },
|
|
]}
|
|
/>
|
|
</TooltipProvider>
|
|
</Example>
|
|
</Examples>
|
|
|
|
## ToggleGroup Story
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="Default"
|
|
args={{
|
|
options: [
|
|
{ value: "option1", label: "Option 1", tooltip: "Tooltip for Option 1" },
|
|
{ value: "option2", label: "Option 2" },
|
|
{ value: "option3", label: "Option 3" },
|
|
{
|
|
value: "option4",
|
|
label: "Option 4",
|
|
tooltip: "Tooltip for Option 4",
|
|
},
|
|
{ value: "option5", label: "Option 5", disabled: true },
|
|
],
|
|
}}
|
|
argTypes={{
|
|
options: {
|
|
value: {
|
|
control: {
|
|
type: "text",
|
|
},
|
|
},
|
|
lable: {
|
|
control: {
|
|
type: "text",
|
|
},
|
|
},
|
|
tooltip: {
|
|
control: {
|
|
type: "text",
|
|
},
|
|
},
|
|
disabled: {
|
|
control: {
|
|
type: "boolean",
|
|
},
|
|
},
|
|
isFullWidth: {
|
|
control: {
|
|
type: "boolean",
|
|
},
|
|
},
|
|
},
|
|
}}>
|
|
{({ options, isFullWidth }) => (
|
|
<VariantsTable titles={["Default"]} columnMinWidth={150}>
|
|
<VariantRow>
|
|
<TooltipProvider>
|
|
<ToggleGroup options={options} isFullWidth={isFullWidth} />
|
|
</TooltipProvider>
|
|
</VariantRow>
|
|
</VariantsTable>
|
|
)}
|
|
</Story>
|
|
</Canvas>
|