-
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.
Merge pull request #112 from UrbanInstitute/patch-icon-library
Icon gallery reorganization
- Loading branch information
Showing
7 changed files
with
147 additions
and
213 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,14 @@ | ||
| <style> | ||
| .docblock-icongallery > div { | ||
| min-width: 150px; | ||
| } | ||
|
|
||
| .docblock-icongallery > div > div:first-child { | ||
| height: 60px; | ||
| width: 60px; | ||
| } | ||
|
|
||
| .docblock-icongallery .sb-story { | ||
| height: 40px; | ||
| } | ||
| </style> |
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,50 +1,24 @@ | ||
| <script context="module"> | ||
| import IconClose from "./IconClose.svelte"; | ||
| export const meta = { | ||
| title: "Icons/Other Icons/IconClose", | ||
| component: IconClose, | ||
| tags: ["!dev","!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: "/Icons/IconClose.svelte" | ||
| } | ||
| import IconClose from "./IconClose.svelte"; | ||
| export const meta = { | ||
| title: "Icons/Icons/IconClose", | ||
| component: IconClose, | ||
| tags: ["!dev", "!autodocs"], | ||
| parameters: { | ||
| githubLink: { | ||
| url: "/Icons/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> | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <script> | ||
| import { Story, Template } from "@storybook/addon-svelte-csf"; | ||
| </script> | ||
|
|
||
| <Template let:args> | ||
| <IconClose {...args} /> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,50 +1,24 @@ | ||
| <script context="module"> | ||
| import IconMinus from "./IconMinus.svelte"; | ||
| export const meta = { | ||
| title: "Icons/Other Icons/IconMinus", | ||
| component: IconMinus, | ||
| tags: ["!dev","!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: "/Icons/IconMinus.svelte" | ||
| } | ||
| import IconMinus from "./IconMinus.svelte"; | ||
| export const meta = { | ||
| title: "Icons/Icons/IconMinus", | ||
| component: IconMinus, | ||
| tags: ["!dev", "!autodocs"], | ||
| parameters: { | ||
| githubLink: { | ||
| url: "/Icons/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> | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <script> | ||
| import { Story, Template } from "@storybook/addon-svelte-csf"; | ||
| </script> | ||
|
|
||
| <Template let:args> | ||
| <IconMinus {...args} /> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,58 +1,57 @@ | ||
| <script context="module"> | ||
| import IconPlus from "./IconPlus.svelte"; | ||
| export const meta = { | ||
| title: "Icons/Icon", | ||
| component: IconPlus, | ||
| //tags: ["autodocs"], | ||
| argTypes: { | ||
| size: { | ||
| default: 40 | ||
| }, | ||
| fill: { | ||
| control: { | ||
| type: "color", | ||
| presetColors: ["#000", "#1696D2", "#fbdf11"] | ||
| } | ||
| import IconPlus from "./IconPlus.svelte"; | ||
| export const meta = { | ||
| title: "Icons/Icons/IconPlus", | ||
| 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" } | ||
| ] | ||
| }, | ||
| 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: "/Icons/IconPlus.svelte" | ||
| 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: "/Icons/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="WithColor"> | ||
| <IconPlus fill={urbanColors.blue} /> | ||
| </Story> | ||
| <Story name="ChangingSize"> | ||
| <IconPlus size={65} /> | ||
| </Story> | ||
| } | ||
| }; | ||
| </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="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 |
|---|---|---|
| @@ -1,50 +1,24 @@ | ||
| <script context="module"> | ||
| import IconSearch from "./IconSearch.svelte"; | ||
| export const meta = { | ||
| title: "Icons/Other Icons/IconSearch", | ||
| component: IconSearch, | ||
| tags: ["!dev","!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: "/Icons/IconSearch.svelte" | ||
| } | ||
| import IconSearch from "./IconSearch.svelte"; | ||
| export const meta = { | ||
| title: "Icons/Icons/IconSearch", | ||
| component: IconSearch, | ||
| tags: ["!dev", "!autodocs"], | ||
| parameters: { | ||
| githubLink: { | ||
| url: "/Icons/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> | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <script> | ||
| import { Story, Template } from "@storybook/addon-svelte-csf"; | ||
| </script> | ||
|
|
||
| <Template let:args> | ||
| <IconSearch {...args} /> | ||
| </Template> | ||
|
|
||
| <Story name="Default" /> |
Oops, something went wrong.