+1
30ba168fc3
30ba168fc3
Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Co-authored-by: Benny Joo <sldisek783@gmail.com> Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> Co-authored-by: Gergő Móricz <mo.geryy@gmail.com> Co-authored-by: Keith Williams <keithwillcode@gmail.com>
84 lines
1.9 KiB
Plaintext
84 lines
1.9 KiB
Plaintext
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 { StorybookTrpcProvider } from "../../mocks/trpc";
|
|
import { TimezoneSelect } from "./TimezoneSelect";
|
|
|
|
<Meta title="UI/Form/TimezoneSelect" component={TimezoneSelect} />
|
|
|
|
<Title title="TimezoneSelect" suffix="Brief" subtitle="Version 1.0 — Last Update: 25 Aug 2023" />
|
|
|
|
## Definition
|
|
|
|
The `TimezoneSelect` component is used to display timezone options.
|
|
|
|
## Structure
|
|
|
|
The `TimezoneSelect` component can be used to display timezone options.
|
|
|
|
<CustomArgsTable of={TimezoneSelect} />
|
|
|
|
## Examples
|
|
|
|
<Examples title="TimezoneSelect">
|
|
<Example title="Default">
|
|
<StorybookTrpcProvider>
|
|
<TimezoneSelect value="Africa/Douala" />
|
|
</StorybookTrpcProvider>
|
|
</Example>
|
|
<Example title="Disabled">
|
|
<StorybookTrpcProvider>
|
|
<TimezoneSelect value="Africa/Douala" isDisabled />
|
|
</StorybookTrpcProvider>
|
|
</Example>
|
|
</Examples>
|
|
|
|
## TimezoneSelect Story
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="TimezoneSelect"
|
|
args={{
|
|
className: "mt-24",
|
|
value: "Africa/Douala",
|
|
variant: "default",
|
|
isDisabled: false,
|
|
timezones: {
|
|
"Timezone 1": "City 1",
|
|
"Timezone 2": "City 2",
|
|
"Timezone 3": "City 3",
|
|
},
|
|
isPending: false,
|
|
}}
|
|
argTypes={{
|
|
value: {
|
|
control: { disable: true },
|
|
},
|
|
variant: {
|
|
control: {
|
|
type: "inline-radio",
|
|
options: ["default", "minimal"],
|
|
},
|
|
},
|
|
}}>
|
|
{(args) => (
|
|
<VariantsTable titles={["Default"]} columnMinWidth={350}>
|
|
<VariantRow>
|
|
<StorybookTrpcProvider>
|
|
<TimezoneSelect {...args} />
|
|
</StorybookTrpcProvider>
|
|
</VariantRow>
|
|
</VariantsTable>
|
|
)}
|
|
</Story>
|
|
</Canvas>
|