-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
📝 Add stories for input components (#12)
* ➕ Add storybook addon svelte-csf * ⬆️ Upgrade storybook * 📝 Add storybook stories for input components * ♻️ Use prop label for description of inputs * ♻️ Use prop value for radio group * 💄 Small style tweaks on input components * ⏪ Revert "♻️ Use prop value for radio group" This reverts commit cbd1d1e. * ♻️ Clean up css and use variables * ⬆️ Package lock version update * 🎨 Minor CSS changes - colors of button border - added CSS variable for modal header divider color - added pointer cursor for color input in AOI modification * ♻️ GeneralButton isDisabled fix - no dependency of GeneralButtonMajor on processing store - isDisabled state based on processing store moved to individual PanelButtons --------- Co-authored-by: misavojte <mich.vojtechovska@gmail.com>
- Loading branch information
1 parent
9ebbeda
commit 598c1b8
Showing
47 changed files
with
2,044 additions
and
533 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
Large diffs are not rendered by default.
Oops, something went wrong.
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,14 +1,34 @@ | ||
| html, | ||
| body { | ||
| margin: 0; | ||
| } | ||
| body { | ||
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, | ||
| Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', | ||
| sans-serif; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| display: flex; | ||
| flex-flow: column; | ||
| min-height: 100vh; | ||
| } | ||
| html, | ||
| body { | ||
| margin: 0; | ||
| } | ||
| body { | ||
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, | ||
| Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| display: flex; | ||
| flex-flow: column; | ||
| min-height: 100vh; | ||
| } | ||
|
|
||
| :root { | ||
| --c-brand: #cd1404; | ||
| --c-brand-dark: #a20d03; | ||
| --c-white: #ffffff; | ||
| --c-darkwhite: #f3f3f5; | ||
| --c-lightgrey: #ebebef; | ||
| --c-grey: #e4e4e9; | ||
| --c-midgrey: #d9d9d9; | ||
| --c-darkgrey: #888888; | ||
| --c-black: #202020; | ||
|
|
||
| --c-error: #ff4d4f; | ||
| --c-success: #22c55e; | ||
| --c-warning: #faad14; | ||
| --c-info: #1890ff; | ||
|
|
||
| --rounded: 4px; | ||
| --rounded-md: 8px; | ||
| --rounded-lg: 20px; | ||
| } |
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
21 changes: 21 additions & 0 deletions
21
src/lib/components/General/GeneralButton/GeneralButtonMajor.stories.svelte
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,21 @@ | ||
| <script context="module" lang="ts"> | ||
| import GeneralButtonMajor from './GeneralButtonMajor.svelte' | ||
| export const meta = { | ||
| title: 'Inputs/GeneralButtonMajor', | ||
| component: GeneralButtonMajor, | ||
| tags: ['autodocs'], | ||
| } | ||
| </script> | ||
|
|
||
| <script> | ||
| import { Story, Template } from '@storybook/addon-svelte-csf' | ||
| </script> | ||
|
|
||
| <Template let:args> | ||
| <GeneralButtonMajor {...args}>Primary Button</GeneralButtonMajor> | ||
| </Template> | ||
|
|
||
| <Story name="Default" /> | ||
|
|
||
| <Story name="Disabled" args={{ isDisabled: true }} /> |
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
27 changes: 27 additions & 0 deletions
27
src/lib/components/General/GeneralButton/GeneralButtonMinor.stories.svelte
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 context="module" lang="ts"> | ||
| import GeneralButtonMinor from './GeneralButtonMinor.svelte' | ||
| export const meta = { | ||
| title: 'Inputs/GeneralButtonMinor', | ||
| component: GeneralButtonMinor, | ||
| tags: ['autodocs'], | ||
| } | ||
| </script> | ||
|
|
||
| <script> | ||
| import { Story, Template } from '@storybook/addon-svelte-csf' | ||
| import User from 'lucide-svelte/icons/user' | ||
| </script> | ||
|
|
||
| <Template let:args> | ||
| <GeneralButtonMinor {...args}><User /></GeneralButtonMinor> | ||
| </Template> | ||
|
|
||
| <Story name="Default" /> | ||
|
|
||
| <!-- TODO: find out why this is not working here but workin for minor button --> | ||
| <Story name="Disabled" args={{ isDisabled: true }} /> | ||
|
|
||
| <Story name="with Text"> | ||
| <GeneralButtonMinor isIcon={false}>Minor Button</GeneralButtonMinor> | ||
| </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
29 changes: 29 additions & 0 deletions
29
src/lib/components/General/GeneralEmpty/GeneralEmpty.stories.svelte
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,29 @@ | ||
| <script context="module" lang="ts"> | ||
| import GeneralEmpty from './GeneralEmpty.svelte' | ||
| export const meta = { | ||
| title: 'Inputs/GeneralEmpty', | ||
| component: GeneralEmpty, | ||
| tags: ['autodocs'], | ||
| args: { | ||
| message: 'This is a default empty message.', | ||
| }, | ||
| } | ||
| </script> | ||
|
|
||
| <script> | ||
| import { Story, Template } from '@storybook/addon-svelte-csf' | ||
| </script> | ||
|
|
||
| <Template let:args> | ||
| <GeneralEmpty {...args} /> | ||
| </Template> | ||
|
|
||
| <Story name="Default" /> | ||
| <Story | ||
| name="Long empty text" | ||
| args={{ | ||
| message: | ||
| 'Case felt the edge of the room where Case waited. It was disturbing to think of the Flatline as a gliding cursor struck sparks from the missionaries.', | ||
| }} | ||
| /> |
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
33 changes: 33 additions & 0 deletions
33
src/lib/components/General/GeneralFieldset/GeneralFieldset.stories.svelte
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,33 @@ | ||
| <script context="module" lang="ts"> | ||
| import GeneralInputNumber from '../GeneralInput/GeneralInputNumber.svelte' | ||
| import GeneralRadio from '../GeneralRadio/GeneralRadio.svelte' | ||
| import GeneralFieldset from './GeneralFieldset.svelte' | ||
| export const meta = { | ||
| title: 'Inputs/GeneralFieldset', | ||
| component: GeneralFieldset, | ||
| tags: ['autodocs'], | ||
| args: { | ||
| legend: 'legend label', | ||
| }, | ||
| } | ||
| </script> | ||
|
|
||
| <script> | ||
| import { Story, Template } from '@storybook/addon-svelte-csf' | ||
| </script> | ||
|
|
||
| <Template let:args> | ||
| <GeneralFieldset {...args}> | ||
| <GeneralInputNumber label="A number input" /> | ||
| <GeneralRadio | ||
| options={[ | ||
| { value: 'this_stimulus', label: 'This stimulus' }, | ||
| { value: 'all_stimuli', label: 'All stimuli' }, | ||
| ]} | ||
| legend="A radio input" | ||
| /> | ||
| </GeneralFieldset> | ||
| </Template> | ||
|
|
||
| <Story name="Default" /> |
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
23 changes: 23 additions & 0 deletions
23
src/lib/components/General/GeneralInput/GeneralInputCheck.stories.svelte
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,23 @@ | ||
| <script context="module" lang="ts"> | ||
| import GeneralInputCheck from './GeneralInputCheck.svelte' | ||
| export const meta = { | ||
| title: 'Inputs/GeneralInputCheck', | ||
| component: GeneralInputCheck, | ||
| tags: ['autodocs'], | ||
| args: { | ||
| label: 'I ❤️ scarfplots label', | ||
| }, | ||
| } | ||
| </script> | ||
|
|
||
| <script> | ||
| import { Story, Template } from '@storybook/addon-svelte-csf' | ||
| </script> | ||
|
|
||
| <Template let:args> | ||
| <GeneralInputCheck {...args} /> | ||
| </Template> | ||
|
|
||
| <Story name="Default" /> | ||
| <Story name="Checked" args={{ ...meta.args, checked: true }} /> |
Oops, something went wrong.