-
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.
created individual icon story files with preview stories for icongallery
- Loading branch information
1 parent
1b379d1
commit 5e46a96
Showing
6 changed files
with
225 additions
and
115 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,50 @@ | ||
| <script context="module"> | ||
| import IconClose from "./IconClose.svelte"; | ||
| export const meta = { | ||
| title: "Components/IconLibrary", | ||
| component: IconClose, | ||
| //tags: ["autodocs"], | ||
| argTypes: { | ||
| size: { | ||
| default: 40 | ||
| }, | ||
| fill: { | ||
| control: { | ||
| type: "color", | ||
| presetColors: ["#000", "#1696D2", "#fbdf11"] | ||
| } | ||
| } | ||
| }, | ||
| parameters: { | ||
| backgrounds: { | ||
| default: "light", | ||
| values: [ | ||
| { name: "light", value: "#ffffff" }, | ||
| { name: "dark", value: "#0A4C6A" } | ||
| ] | ||
| }, | ||
| docs: { | ||
| description: { | ||
| component: | ||
| "Any of these icons can be pulled in as standalone components. They are intended as decorations, and do not include `onClick` parameters. " | ||
| } | ||
| }, | ||
| githubLink: { | ||
| url: "/IconLibrary/IconClose.svelte" | ||
| } | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <script> | ||
| import { Story, Template } from "@storybook/addon-svelte-csf"; | ||
| </script> | ||
|
|
||
| <Template let:args> | ||
| <IconClose {...args} /> | ||
| </Template> | ||
|
|
||
| <Story name="ClosePreview"> | ||
| <IconClose size={25}/> | ||
| </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
This file was deleted.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| <script context="module"> | ||
| import IconMinus from "./IconMinus.svelte"; | ||
| export const meta = { | ||
| title: "Components/IconLibrary", | ||
| component: IconMinus, | ||
| //tags: ["autodocs"], | ||
| argTypes: { | ||
| size: { | ||
| default: 40 | ||
| }, | ||
| fill: { | ||
| control: { | ||
| type: "color", | ||
| presetColors: ["#000", "#1696D2", "#fbdf11"] | ||
| } | ||
| } | ||
| }, | ||
| parameters: { | ||
| backgrounds: { | ||
| default: "light", | ||
| values: [ | ||
| { name: "light", value: "#ffffff" }, | ||
| { name: "dark", value: "#0A4C6A" } | ||
| ] | ||
| }, | ||
| docs: { | ||
| description: { | ||
| component: | ||
| "Any of these icons can be pulled in as standalone components. They are intended as decorations, and do not include `onClick` parameters. " | ||
| } | ||
| }, | ||
| githubLink: { | ||
| url: "/IconLibrary/IconMinus.svelte" | ||
| } | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <script> | ||
| import { Story, Template } from "@storybook/addon-svelte-csf"; | ||
| </script> | ||
|
|
||
| <Template let:args> | ||
| <IconMinus {...args} /> | ||
| </Template> | ||
|
|
||
| <Story name="MinusPreview"> | ||
| <IconMinus size={25}/> | ||
| </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 |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| <script context="module"> | ||
| import IconPlus from "./IconPlus.svelte"; | ||
| export const meta = { | ||
| title: "Components/IconLibrary", | ||
| component: IconPlus, | ||
| //tags: ["autodocs"], | ||
| argTypes: { | ||
| size: { | ||
| default: 40 | ||
| }, | ||
| fill: { | ||
| control: { | ||
| type: "color", | ||
| presetColors: ["#000", "#1696D2", "#fbdf11"] | ||
| } | ||
| } | ||
| }, | ||
| parameters: { | ||
| backgrounds: { | ||
| default: "light", | ||
| values: [ | ||
| { name: "light", value: "#ffffff" }, | ||
| { name: "dark", value: "#0A4C6A" } | ||
| ] | ||
| }, | ||
| docs: { | ||
| description: { | ||
| component: | ||
| "Any of these icons can be pulled in as standalone components. They are intended as decorations, and do not include `onClick` parameters. " | ||
| } | ||
| }, | ||
| githubLink: { | ||
| url: "/IconLibrary/IconPlus.svelte" | ||
| } | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <script> | ||
| import { Story, Template } from "@storybook/addon-svelte-csf"; | ||
| import urbanColors from "$lib/utils/urbanColors.js"; | ||
| </script> | ||
|
|
||
| <Template let:args> | ||
| <IconPlus {...args} /> | ||
| </Template> | ||
|
|
||
| <Story name="Default" /> | ||
|
|
||
| <Story name="PlusPreview"> | ||
| <IconPlus size={25}/> | ||
| </Story> | ||
|
|
||
| <Story name="WithColor"> | ||
| <IconPlus fill={urbanColors.blue} /> | ||
| </Story> | ||
|
|
||
| <Story name="ChangingSize"> | ||
| <IconPlus size={65} /> | ||
| </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 |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| <script context="module"> | ||
| import IconSearch from "./IconSearch.svelte"; | ||
| export const meta = { | ||
| title: "Components/IconSearch", | ||
| component: IconSearch, | ||
| //tags: ["autodocs"], | ||
| argTypes: { | ||
| size: { | ||
| default: 40 | ||
| }, | ||
| fill: { | ||
| control: { | ||
| type: "color", | ||
| presetColors: ["#000", "#1696D2", "#fbdf11"] | ||
| } | ||
| } | ||
| }, | ||
| parameters: { | ||
| backgrounds: { | ||
| default: "light", | ||
| values: [ | ||
| { name: "light", value: "#ffffff" }, | ||
| { name: "dark", value: "#0A4C6A" } | ||
| ] | ||
| }, | ||
| docs: { | ||
| description: { | ||
| component: | ||
| "Any of these icons can be pulled in as standalone components. They are intended as decorations, and do not include `onClick` parameters. " | ||
| } | ||
| }, | ||
| githubLink: { | ||
| url: "/IconLibrary/IconSearch.svelte" | ||
| } | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <script> | ||
| import { Story, Template } from "@storybook/addon-svelte-csf"; | ||
| </script> | ||
|
|
||
| <Template let:args> | ||
| <IconSearch {...args} /> | ||
| </Template> | ||
|
|
||
| <Story name="SearchPreview"> | ||
| <IconSearch size={25}/> | ||
| </Story> |