mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
chore: remove storybook
This commit is contained in:
parent
856086dc71
commit
378fe06e03
116 changed files with 103 additions and 14249 deletions
|
@ -1,54 +0,0 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
export let status = undefined;
|
||||
export let iconDescription = undefined;
|
||||
export let description = undefined;
|
||||
export let successDelay = undefined;
|
||||
|
||||
import { Button } from "../Button";
|
||||
import InlineLoading from "./InlineLoading.svelte";
|
||||
|
||||
const props = { status, iconDescription, description, successDelay };
|
||||
|
||||
let isSubmitting = false;
|
||||
let success = false;
|
||||
let ariaLive = "off";
|
||||
let loadingDescription = "Submitting...";
|
||||
|
||||
function handleSubmit() {
|
||||
isSubmitting = true;
|
||||
ariaLive = "assertive";
|
||||
|
||||
setTimeout(() => {
|
||||
isSubmitting = false;
|
||||
loadingDescription = "Submitted!";
|
||||
success = true;
|
||||
setTimeout(() => {
|
||||
success = false;
|
||||
isSubmitting = false;
|
||||
loadingDescription = "Submitting...";
|
||||
ariaLive = "off";
|
||||
}, 1500);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
$: disabled = isSubmitting || success;
|
||||
</script>
|
||||
|
||||
{#if story === 'ux-example'}
|
||||
<div style="display: flex; width: 300px">
|
||||
<Button kind="secondary" disabled="{disabled}">Cancel</Button>
|
||||
{#if disabled}
|
||||
<InlineLoading
|
||||
style="margin-left: 1rem;"
|
||||
description="{loadingDescription}"
|
||||
status="{success ? 'finished' : 'active'}"
|
||||
aria-live="{ariaLive}"
|
||||
/>
|
||||
{:else}
|
||||
<Button on:click="{handleSubmit}">Submit</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<InlineLoading {...props} />
|
||||
{/if}
|
|
@ -1,29 +0,0 @@
|
|||
import { withKnobs, select, text, number } from "@storybook/addon-knobs";
|
||||
import Component from "./InlineLoading.Story.svelte";
|
||||
|
||||
export default { title: "InlineLoading", decorators: [withKnobs] };
|
||||
|
||||
const loadingStatus = ["inactive", "active", "finished", "error"];
|
||||
|
||||
export const Default = () => ({
|
||||
Component,
|
||||
props: {
|
||||
status: select("Loading status (status)", loadingStatus, "active"),
|
||||
iconDescription: text(
|
||||
"Icon description (iconDescription)",
|
||||
"Active loading indicator"
|
||||
),
|
||||
description: text(
|
||||
"Loading progress description (description)",
|
||||
"Loading data..."
|
||||
),
|
||||
successDelay: number(
|
||||
"The duration for successful state before `on:success` fires (successDelay)",
|
||||
1500
|
||||
),
|
||||
},
|
||||
});
|
||||
|
||||
export const UxExample = () => ({ Component, props: { story: "ux-example" } });
|
||||
|
||||
UxExample.story = { name: "UX Example" };
|
Loading…
Add table
Add a link
Reference in a new issue