-
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.
Co-authored-by: Claire Olmstead <olmsteadclaire@gmail.com>
- Loading branch information
1 parent
7a3827a
commit 7c14454
Showing
8 changed files
with
217 additions
and
167 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 |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <script> | ||
| import {Meta, Story} from '@storybook/addon-svelte-csf'; | ||
| </script> | ||
|
|
||
| <Meta title="Spacing"/> | ||
|
|
||
| <Story name="Spacing"> | ||
| <div class="whitespace-nowrap flex flex-col gap-f12"> | ||
| <div class="w-f4 bg-teal">f4 - 4px</div> | ||
| <div class="w-f8 bg-teal">f8 - 8px</div> | ||
| <div class="w-f12 bg-teal">f12 - 12px</div> | ||
| <div class="w-f16 bg-teal">f16 - 16px</div> | ||
| <div class="w-f20 bg-teal">f20 - 20px</div> | ||
| <div class="w-f24 bg-teal">f24 - 24px</div> | ||
| <div class="w-f32 bg-teal">f32 - 32px</div> | ||
| <div class="w-f40 bg-teal">f40 - 40px</div> | ||
| <div class="w-f48 bg-teal">f48 - 48px</div> | ||
| <div class="w-f64 bg-teal">f64 - 64px</div> | ||
| <div class="w-f80 bg-teal">f80 - 80px</div> | ||
| <div class="w-f96 bg-teal">f96 - 96px</div> | ||
| <div class="w-f128 bg-teal">f128 - 128px</div> | ||
| <div class="w-f160 bg-teal">f160 - 160px</div> | ||
| <div class="w-f192 bg-teal">f192 - 192px</div> | ||
| <div class="w-f224 bg-teal">f224 - 224px</div> | ||
| <div class="w-f256 bg-teal">f256 - 256px</div> | ||
| </div> | ||
| </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,40 +1,40 @@ | ||
| <script> | ||
| import { Meta, Story } from '@storybook/addon-svelte-csf'; | ||
| import {Meta, Story} from '@storybook/addon-svelte-csf'; | ||
| import Button from './Button.svelte'; | ||
| import Button from './Button.svelte'; | ||
| </script> | ||
|
|
||
| <Meta title="Design System/Atoms/Button" component={Button} /> | ||
| <Meta title="Design System/Atoms/Button" component={Button}/> | ||
|
|
||
| <!-- Primary --> | ||
| <Story name="PrimaryButton"> | ||
| <div class="flex flex-col gap-2"> | ||
| <Button size="xs">P-XS</Button> | ||
| <Button size="sm">Primary SM</Button> | ||
| <Button size="normal">Primary Normal</Button> | ||
| <Button size="md">Primary MD</Button> | ||
| <Button size="lg">Primary LG</Button> | ||
| </div> | ||
| <div class="flex flex-col gap-f8"> | ||
| <Button size="xs">P-XS</Button> | ||
| <Button size="sm">Primary SM</Button> | ||
| <Button size="normal">Primary Normal</Button> | ||
| <Button size="md">Primary MD</Button> | ||
| <Button size="lg">Primary LG</Button> | ||
| </div> | ||
| </Story> | ||
|
|
||
| <!-- Secondary --> | ||
| <Story name="Secondary"> | ||
| <div class="flex flex-col gap-2"> | ||
| <Button type="secondary" size="xs">S-XS</Button> | ||
| <Button type="secondary" size="sm">Secondary SM</Button> | ||
| <Button type="secondary" size="normal">Secondary Normal</Button> | ||
| <Button type="secondary" size="md">Secondary MD</Button> | ||
| <Button type="secondary" size="lg">Secondary LG</Button> | ||
| </div> | ||
| <div class="flex flex-col gap-f8"> | ||
| <Button type="secondary" size="xs">S-XS</Button> | ||
| <Button type="secondary" size="sm">Secondary SM</Button> | ||
| <Button type="secondary" size="normal">Secondary Normal</Button> | ||
| <Button type="secondary" size="md">Secondary MD</Button> | ||
| <Button type="secondary" size="lg">Secondary LG</Button> | ||
| </div> | ||
| </Story> | ||
|
|
||
| <!-- Disabled --> | ||
| <Story name="Disabled"> | ||
| <div class="flex flex-col gap-2"> | ||
| <Button size="xs" disabled={true}>P-XS</Button> | ||
| <Button size="sm" disabled={true}>Primary SM</Button> | ||
| <Button size="normal" disabled={true}>Primary Normal</Button> | ||
| <Button size="md" disabled={true}>Primary MD</Button> | ||
| <Button size="lg" disabled={true}>Primary LG</Button> | ||
| </div> | ||
| <div class="flex flex-col gap-f8"> | ||
| <Button size="xs" disabled={true}>P-XS</Button> | ||
| <Button size="sm" disabled={true}>Primary SM</Button> | ||
| <Button size="normal" disabled={true}>Primary Normal</Button> | ||
| <Button size="md" disabled={true}>Primary MD</Button> | ||
| <Button size="lg" disabled={true}>Primary LG</Button> | ||
| </div> | ||
| </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,54 +1,55 @@ | ||
| <script lang="ts"> | ||
| import Typography from '../typography/Typography.svelte'; | ||
| export let onClick = () => {}; | ||
| /** | ||
| * Specify the kind of button. | ||
| */ | ||
| export let type: 'primary' | 'secondary' = 'primary'; | ||
| /** | ||
| * Specify the size of the component. | ||
| */ | ||
| export let size: 'xs' | 'sm' | 'normal' | 'md' | 'lg' = 'normal'; | ||
| /** | ||
| * Specify if the component is disabled. | ||
| */ | ||
| export let disabled: boolean = false; | ||
| // Define button type classes | ||
| $: typeClass = | ||
| type === 'primary' | ||
| ? 'bg-secondary border-secondary hover:border-white hover:bg-transparent' | ||
| : 'bg-transparent border-white hover:border-primary hover:text-primary'; | ||
| // Define disabled classes | ||
| $: disabledClass = disabled ? 'bg-gray3 border-gray3 cursor-default pointer-events-none' : ''; | ||
| // Define final brn style classes | ||
| $: btnStylesClass = disabled ? disabledClass : typeClass; | ||
| // Define button size classes | ||
| $: btnSizeClass = | ||
| { | ||
| xs: 'w-[115px]', | ||
| sm: 'w-[197px]', | ||
| md: 'w-[339px]', | ||
| lg: 'w-[388px]', | ||
| normal: 'w-[263px]', | ||
| }[size] || 'w-[263px]'; | ||
| import Typography from '../typography/Typography.svelte'; | ||
| export let onClick = () => { | ||
| }; | ||
| /** | ||
| * Specify the kind of button. | ||
| */ | ||
| export let type: 'primary' | 'secondary' = 'primary'; | ||
| /** | ||
| * Specify the size of the component. | ||
| */ | ||
| export let size: 'xs' | 'sm' | 'normal' | 'md' | 'lg' = 'normal'; | ||
| /** | ||
| * Specify if the component is disabled. | ||
| */ | ||
| export let disabled: boolean = false; | ||
| // Define button type classes | ||
| $: typeClass = | ||
| type === 'primary' | ||
| ? 'bg-teal border-teal hover:border-white hover:bg-transparent' | ||
| : 'bg-transparent border-white hover:border-navy hover:text-primary'; | ||
| // Define disabled classes | ||
| $: disabledClass = disabled ? 'bg-gray3 border-gray3 cursor-default pointer-events-none' : ''; | ||
| // Define final brn style classes | ||
| $: btnStylesClass = disabled ? disabledClass : typeClass; | ||
| // Define button size classes | ||
| $: btnSizeClass = | ||
| { | ||
| xs: 'w-[115px]', | ||
| sm: 'w-[197px]', | ||
| md: 'w-[339px]', | ||
| lg: 'w-[388px]', | ||
| normal: 'w-[263px]', | ||
| }[size] || 'w-[263px]'; | ||
| </script> | ||
|
|
||
| <button | ||
| {...$$restProps} | ||
| on:click|preventDefault={onClick} | ||
| class={`rounded-full border p-2.5 text-center text-white transition-all | ||
| {...$$restProps} | ||
| on:click|preventDefault={onClick} | ||
| class={`rounded-full border p-f8 text-center text-white transition-all | ||
| ${btnStylesClass} ${btnSizeClass} ${$$restProps.class ?? ''}`} | ||
| {disabled} | ||
| {disabled} | ||
| > | ||
| <Typography bold={true} class="flex items-center justify-center gap-2"> | ||
| <slot /> | ||
| </Typography> | ||
| <Typography bold={true} class="flex items-center justify-center gap-f8"> | ||
| <slot/> | ||
| </Typography> | ||
| </button> |
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
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,39 +1,39 @@ | ||
| <script lang="ts"> | ||
| import { Select as SelectPrimitive } from 'bits-ui'; | ||
| import { scale } from 'svelte/transition'; | ||
| import { cn, flyAndScale } from '../../../../utils'; | ||
| import {Select as SelectPrimitive} from 'bits-ui'; | ||
| import {scale} from 'svelte/transition'; | ||
| import {cn, flyAndScale} from '../../../../utils'; | ||
| type $$Props = SelectPrimitive.ContentProps; | ||
| type $$Events = SelectPrimitive.ContentEvents; | ||
| type $$Props = SelectPrimitive.ContentProps; | ||
| type $$Events = SelectPrimitive.ContentEvents; | ||
| export let sideOffset: $$Props['sideOffset'] = 4; | ||
| export let inTransition: $$Props['inTransition'] = flyAndScale; | ||
| export let inTransitionConfig: $$Props['inTransitionConfig'] = undefined; | ||
| export let outTransition: $$Props['outTransition'] = scale; | ||
| export let outTransitionConfig: $$Props['outTransitionConfig'] = { | ||
| start: 0.95, | ||
| opacity: 0, | ||
| duration: 50, | ||
| }; | ||
| export let sideOffset: $$Props['sideOffset'] = 4; | ||
| export let inTransition: $$Props['inTransition'] = flyAndScale; | ||
| export let inTransitionConfig: $$Props['inTransitionConfig'] = undefined; | ||
| export let outTransition: $$Props['outTransition'] = scale; | ||
| export let outTransitionConfig: $$Props['outTransitionConfig'] = { | ||
| start: 0.95, | ||
| opacity: 0, | ||
| duration: 50, | ||
| }; | ||
| let className: $$Props['class'] = undefined; | ||
| export { className as class }; | ||
| let className: $$Props['class'] = undefined; | ||
| export {className as class}; | ||
| </script> | ||
|
|
||
| <SelectPrimitive.Content | ||
| {inTransition} | ||
| {inTransitionConfig} | ||
| {outTransition} | ||
| {outTransitionConfig} | ||
| {sideOffset} | ||
| class={cn( | ||
| {inTransition} | ||
| {inTransitionConfig} | ||
| {outTransition} | ||
| {outTransitionConfig} | ||
| {sideOffset} | ||
| class={cn( | ||
| 'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white text-black shadow-md outline-none', | ||
| className | ||
| )} | ||
| {...$$restProps} | ||
| on:keydown | ||
| {...$$restProps} | ||
| on:keydown | ||
| > | ||
| <div class="w-full p-1"> | ||
| <slot /> | ||
| </div> | ||
| <div class="w-full p-f4"> | ||
| <slot/> | ||
| </div> | ||
| </SelectPrimitive.Content> |
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
Oops, something went wrong.