-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
move title and desctiption to be props
- Loading branch information
1 parent
7ef672d
commit 02c17c3
Showing
2 changed files
with
62 additions
and
61 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,62 +1,62 @@ | ||
| <script lang="ts"> | ||
| import { Meta, Story } from '@storybook/addon-svelte-csf'; | ||
| import Modal from './Modal.svelte'; | ||
| import Button from '../atoms/Button.svelte'; | ||
| import Select from '../atoms/Select.svelte'; | ||
| import { Close } from '../shadcnComponents/ui/dialog'; | ||
| import {Meta, Story} from '@storybook/addon-svelte-csf'; | ||
| import Modal from './Modal.svelte'; | ||
| import Button from '../atoms/Button.svelte'; | ||
| import Select from '../atoms/Select.svelte'; | ||
| import {Close} from '../shadcnComponents/ui/dialog'; | ||
| export let label = 'Select Option'; | ||
| export let description = 'Please choose an option'; | ||
| export let placeholder = 'Select an option...'; | ||
| export let isRequired = false; | ||
| export let options = [ | ||
| { optionLabel: 'Option 1', value: '1' }, | ||
| { optionLabel: 'Option 2', value: '2' }, | ||
| { optionLabel: 'Option 3', value: '3' }, | ||
| ]; | ||
| // select props | ||
| export let label = 'Select Option'; | ||
| export let selectDescription = 'Please choose an option'; | ||
| export let placeholder = 'Select an option...'; | ||
| export let isRequired = false; | ||
| export let options = [ | ||
| {optionLabel: 'Option 1', value: '1'}, | ||
| {optionLabel: 'Option 2', value: '2'}, | ||
| {optionLabel: 'Option 3', value: '3'}, | ||
| ]; | ||
| // Modal props | ||
| export let title = "Title"; | ||
| export let description = "This is the description."; | ||
| </script> | ||
|
|
||
| <Meta title="UI Components/Features/Modal" component={Modal} /> | ||
| <Meta title="UI Components/Features/Modal" component={Modal}/> | ||
|
|
||
| <!--Primary--> | ||
| <Story name="Primary Modal"> | ||
| <Modal> | ||
| <Button slot="trigger">Open</Button> | ||
| <div slot="title">Title</div> | ||
| <div slot="description">Description goes here.</div> | ||
| <form slot="body"> | ||
| <Select {label} {description} {placeholder} {isRequired} {options} /> | ||
| <Close> | ||
| <Button class="mt-f20">Submit</Button> | ||
| </Close> | ||
| </form> | ||
| </Modal> | ||
| <Modal {title} {description}> | ||
| <Button slot="trigger">Open</Button> | ||
| <form slot="body"> | ||
| <Select {label} description={selectDescription} {placeholder} {isRequired} {options}/> | ||
| <Close> | ||
| <Button class="mt-f20">Submit</Button> | ||
| </Close> | ||
| </form> | ||
| </Modal> | ||
| </Story> | ||
|
|
||
| <!--No Description--> | ||
| <Story name="No Description"> | ||
| <Modal> | ||
| <Button slot="trigger">Open</Button> | ||
| <div slot="title">Title</div> | ||
| <form slot="body"> | ||
| <Select {label} {description} {placeholder} {isRequired} {options} /> | ||
| <Close> | ||
| <Button class="mt-f20">Submit</Button> | ||
| </Close> | ||
| </form> | ||
| </Modal> | ||
| <Modal {title}> | ||
| <Button slot="trigger">Open</Button> | ||
| <form slot="body"> | ||
| <Select {label} description={selectDescription} {placeholder} {isRequired} {options}/> | ||
| <Close> | ||
| <Button class="mt-f20">Submit</Button> | ||
| </Close> | ||
| </form> | ||
| </Modal> | ||
| </Story> | ||
|
|
||
| <!--Text Body--> | ||
| <Story name="Text Body"> | ||
| <Modal> | ||
| <Button slot="trigger">Open</Button> | ||
| <div slot="title">Title</div> | ||
| <div slot="description">Description goes here.</div> | ||
| <div slot="body"> | ||
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium ad aliquam animi aperiam blanditiis | ||
| excepturi inventore ipsum iste, labore maiores minus nostrum obcaecati, quasi, ratione reprehenderit rerum | ||
| suscipit temporibus. | ||
| </div> | ||
| </Modal> | ||
| <Modal {title} {description}> | ||
| <Button slot="trigger">Open</Button> | ||
| <div slot="body"> | ||
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium ad aliquam animi aperiam blanditiis | ||
| excepturi inventore ipsum iste, labore maiores minus nostrum obcaecati, quasi, ratione reprehenderit rerum | ||
| suscipit temporibus. | ||
| </div> | ||
| </Modal> | ||
| </Story> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,21 @@ | ||
| <script lang="ts"> | ||
| import { Root, Trigger, Content, Header, Title, Description } from '../shadcnComponents/ui/dialog'; | ||
| import {Root, Trigger, Content, Header, Title, Description} from '../shadcnComponents/ui/dialog'; | ||
| export let title = ''; | ||
| export let description; | ||
| </script> | ||
|
|
||
| <Root> | ||
| <Trigger> | ||
| <slot name="trigger" /> | ||
| </Trigger> | ||
| <Content> | ||
| <Header> | ||
| <Title> | ||
| <slot name="title" /> | ||
| </Title> | ||
| <Description> | ||
| <slot name="description" /> | ||
| </Description> | ||
| </Header> | ||
| <slot name="body" /> | ||
| </Content> | ||
| <Trigger> | ||
| <slot name="trigger"/> | ||
| </Trigger> | ||
| <Content> | ||
| <Header> | ||
| <Title>{title}</Title> | ||
| {#if description} | ||
| <Description>{description}</Description> | ||
| {/if} | ||
| </Header> | ||
| <slot name="body"/> | ||
| </Content> | ||
| </Root> |