mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +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

95
src/Tooltip/Tooltip.Story.svelte
View file

@ -1,95 +0,0 @@
<script>
export let story = undefined;
import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16";
import { Link } from "../Link";
import { Button } from "../Button";
import Tooltip from "./Tooltip.svelte";
$: ref = null;
$: console.log(ref);
$: open = story === "uncontrolled";
</script>
<style>
.custom-icon-class {
width: 10px;
height: 4px;
border-radius: 5px;
background-color: red;
}
</style>
<div style="margin: 3rem">
{#if story === 'custom icon'}
<Tooltip
{...$$props}
bind:ref
bind:open
on:open="{() => {
console.log('on:open');
}}"
on:close="{() => {
console.log('on:close');
}}"
>
<div slot="icon" class="custom-icon-class"></div>
<p>
This is some tooltip text. This box shows the maximum amount of text
that should appear inside. If more room is needed please use a modal
instead.
</p>
<div class="bx--tooltip__footer">
<Link href="/">Learn More</Link>
<Button size="small">Create</Button>
</div>
</Tooltip>
{:else if story === 'uncontrolled'}
<Button
style="padding: 15px 20px; margin: 4px 20px"
on:click="{() => {
open = false;
}}"
>
Hide
</Button>
<Button
style="padding: 15px 20px; margin: 4px 20px"
on:click="{() => {
open = true;
}}"
>
Show
</Button>
<div style="padding: 15px 20px; margin: 4px 20px">
<Tooltip {...$$props} bind:ref bind:open hideIcon>
<div slot="triggerText">My text wrapped with tooltip</div>
Tooltip content
</Tooltip>
</div>
{:else}
<Tooltip
{...$$props}
bind:ref
bind:open
on:open="{() => {
console.log('on:open');
}}"
on:close="{() => {
console.log('on:close');
}}"
icon="{story === 'custom icon only' ? OverflowMenuVertical16 : undefined}"
>
<p>
This is some tooltip text. This box shows the maximum amount of text
that should appear inside. If more room is needed please use a modal
instead.
</p>
<div class="bx--tooltip__footer">
<Link href="/">Learn More</Link>
<Button size="small">Create</Button>
</div>
</Tooltip>
{/if}
</div>

60
src/Tooltip/Tooltip.stories.js
View file

@ -1,60 +0,0 @@
import { withKnobs, select, text } from "@storybook/addon-knobs";
import Component from "./Tooltip.Story.svelte";
export default { title: "Tooltip", decorators: [withKnobs] };
const directions = {
"Top (top)": "top",
"Right (right)": "right",
"Bottom (bottom)": "bottom",
"Left (left)": "left",
};
export const Default = () => ({
Component,
props: {
direction: select("Tooltip direction (direction)", directions, "bottom"),
triggerText: text("Trigger text (triggerText)", "Tooltip label"),
tabindex: text("Tab index (tabindex in <Tooltip>)", "0"),
},
});
export const NoIcon = () => ({
Component,
props: {
story: "no icon",
hideIcon: true,
direction: select("Tooltip direction (direction)", directions, "bottom"),
triggerText: text("Trigger text (triggerText)", "Tooltip label"),
tabindex: text("Tab index (tabindex in <Tooltip>)", "0"),
},
});
export const CustomIcon = () => ({
Component,
props: {
story: "custom icon",
showIcon: true,
direction: select("Tooltip direction (direction)", directions, "bottom"),
triggerText: text("Trigger text (triggerText)", "Tooltip label"),
tabindex: text("Tab index (tabindex in <Tooltip>)", "0"),
},
});
export const CustomIconOnly = () => ({
Component,
props: {
story: "custom icon only",
direction: select("Tooltip direction (direction)", directions, "bottom"),
iconDescription: "Helpful Information",
tabindex: text("Tab index (tabindex in <Tooltip>)", "0"),
},
});
export const UncontrolledTooltip = () => ({
Component,
props: {
story: "uncontrolled",
direction: select("Tooltip direction (direction)", directions, "bottom"),
},
});