mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore: remove storybook

Browse source
This commit is contained in:
Eric Liu 2020-10-14 16:23:44 -07:00
commit 378fe06e03
116 changed files with 103 additions and 14249 deletions
Download patch file Download diff file Expand all files Collapse all files

67
src/DatePicker/DatePicker.Story.svelte
View file

@ -1,67 +0,0 @@
<script>
export let story = undefined;
import DatePicker from "./DatePicker.svelte";
import DatePickerInput from "./DatePickerInput.svelte";
import DatePickerSkeleton from "./DatePicker.Skeleton.svelte";
$: datePickerType = "simple";
$: value = "";
</script>
{#if story === 'skeleton'}
<DatePickerSkeleton range />
{:else if story === 'single'}
<div>
<DatePicker
{...$$props.datePicker}
bind:value
datePickerType="single"
on:change="{({ detail }) => {
console.log('change', detail);
}}"
>
<DatePickerInput
{...$$props.datePickerInput}
on:close="{() => {
console.log('on:close');
}}"
on:input="{() => {
console.log('on:input');
}}"
/>
</DatePicker>
<button
on:click|preventDefault="{() => {
value = '12/12/2020';
}}"
style="margin-top: 1rem"
>
Set date to 12/12/2020
</button>
</div>
{:else if story === 'range'}
<DatePicker {...$$props.datePicker} bind:value datePickerType="range">
<DatePickerInput
{...$$props.datePickerInput}
id="date-picker-input-id-start"
labelText="Start date"
/>
<DatePickerInput
{...$$props.datePickerInput}
id="date-picker-input-id-end"
labelText="End date"
/>
</DatePicker>
{:else}
<DatePicker
{...$$props.datePicker}
bind:datePickerType
bind:value
on:change="{({ detail }) => {
console.log('on:change', detail);
}}"
>
<DatePickerInput {...$$props.datePickerInput} />
</DatePicker>
{/if}

148
src/DatePicker/DatePicker.stories.js
View file

@ -1,148 +0,0 @@
import { withKnobs, select, text, boolean } from "@storybook/addon-knobs";
import Component from "./DatePicker.Story.svelte";
export default { title: "DatePicker", decorators: [withKnobs] };
const patterns = {
"Short (d{1,2}/d{4})": "d{1,2}/d{4}",
"Regular (d{1,2}/d{1,2}/d{4})": "d{1,2}/d{1,2}/d{4}",
};
const sizes = {
"Extra large size (xl)": "xl",
"Default size": undefined,
"Small size (sm)": "sm",
};
export const Default = () => ({
Component,
props: {
datePicker: {
id: "date-picker",
light: boolean("Light variant (light in <DatePicker>)", false),
short: boolean("Use shorter width (short in <DatePicker>)", false),
},
datePickerInput: {
id: "date-picker-input-id",
name: "date-picker-input-name",
size: select("Field size (size)", sizes, undefined) || undefined,
labelText: text(
"Label text (labelText in <DatePickerInput>)",
"Date Picker label"
),
hideLabel: boolean("Hide label (hideLabel)", false),
pattern: select(
"The date format (pattern in <DatePickerInput>)",
patterns,
"d{1,2}/d{4}"
),
placeholder: text(
"Placeholder text (placeholder in <DatePickerInput>)",
"mm/dd/yyyy"
),
disabled: boolean("Disabled (disabled in <DatePickerInput>)", false),
invalid: boolean(
"Show form validation UI (invalid in <DatePickerInput>)",
false
),
invalidText: text(
"Form validation UI content (invalidText in <DatePickerInput>)",
"A valid value is required"
),
iconDescription: text(
"Icon description (iconDescription in <DatePickerInput>)",
"Icon description"
),
},
},
});
Default.story = { name: "Default (simple)" };
export const Single = () => ({
Component,
props: {
story: "single",
datePicker: {
id: "date-picker",
light: boolean("Light variant (light in <DatePicker>)", false),
dateFormat: text("The date format (dateFormat in <DatePicker>)", "m/d/Y"),
},
datePickerInput: {
id: "date-picker-input-id",
size: select("Field size (size)", sizes, undefined) || undefined,
labelText: text(
"Label text (labelText in <DatePickerInput>)",
"Date Picker label"
),
hideLabel: boolean("Hide label (hideLabel)", false),
pattern: select(
"The date format (pattern in <DatePickerInput>)",
patterns,
"d{1,2}/d{4}"
),
placeholder: text(
"Placeholder text (placeholder in <DatePickerInput>)",
"mm/dd/yyyy"
),
disabled: boolean("Disabled (disabled in <DatePickerInput>)", false),
invalid: boolean(
"Show form validation UI (invalid in <DatePickerInput>)",
false
),
invalidText: text(
"Form validation UI content (invalidText in <DatePickerInput>)",
"A valid value is required"
),
iconDescription: text(
"Icon description (iconDescription in <DatePickerInput>)",
"Icon description"
),
},
},
});
export const Range = () => ({
Component,
props: {
story: "range",
datePicker: {
id: "date-picker",
light: boolean("Light variant (light in <DatePicker>)", false),
dateFormat: text("The date format (dateFormat in <DatePicker>)", "m/d/Y"),
},
datePickerInput: {
id: "date-picker-input-id",
size: select("Field size (size)", sizes, undefined) || undefined,
labelText: text(
"Label text (labelText in <DatePickerInput>)",
"Date Picker label"
),
hideLabel: boolean("Hide label (hideLabel)", false),
pattern: select(
"The date format (pattern in <DatePickerInput>)",
patterns,
"d{1,2}/d{4}"
),
placeholder: text(
"Placeholder text (placeholder in <DatePickerInput>)",
"mm/dd/yyyy"
),
disabled: boolean("Disabled (disabled in <DatePickerInput>)", false),
invalid: boolean(
"Show form validation UI (invalid in <DatePickerInput>)",
false
),
invalidText: text(
"Form validation UI content (invalidText in <DatePickerInput>)",
"A valid value is required"
),
iconDescription: text(
"Icon description (iconDescription in <DatePickerInput>)",
"Icon description"
),
},
},
});
export const Skeleton = () => ({ Component, props: { story: "skeleton" } });