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

chore: update dependencies, remove jest

Browse source 
- remove docs/palimpsest folders (to be replaced)
- remove Layout Storybook component
This commit is contained in:
Eric Liu 2020-07-19 06:53:10 -07:00
commit 76df51674d
110 changed files with 2604 additions and 17979 deletions
Download patch file Download diff file Expand all files Collapse all files

136
src/components/Tooltip/Tooltip.Story.svelte
View file

@ -2,7 +2,7 @@
export let story = undefined;
import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16";
import Layout from "../../internal/ui/Layout.svelte";
import { Link } from "../Link";
import { Button } from "../Button";
import Tooltip from "./Tooltip.svelte";
@ -21,73 +21,71 @@
}
</style>
<Layout>
<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" />
<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 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" />
<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>
{: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>
{: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>
{/if}
</div>
</Layout>
</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>