From 5150a631095d766c0e8919fbb992e52e84d87043 Mon Sep 17 00:00:00 2001 From: Jake Strawn Date: Sat, 9 Apr 2022 12:55:49 -0400 Subject: [PATCH] fix(documentation): Adjust docs per story stucture. --- .../base/outline-icon/outline-icon.stories.ts | 787 +++++++++++++----- 1 file changed, 566 insertions(+), 221 deletions(-) diff --git a/src/components/base/outline-icon/outline-icon.stories.ts b/src/components/base/outline-icon/outline-icon.stories.ts index 0a08ef949..cbc8b5140 100644 --- a/src/components/base/outline-icon/outline-icon.stories.ts +++ b/src/components/base/outline-icon/outline-icon.stories.ts @@ -31,16 +31,24 @@ The \`outline-icon\` component will render all manner of icons for your componen argTypes: { icon: { name: 'name', - table: { category: 'Properties', defaultValue: { summary: outline.icons.defaults.icon } }, - description: 'The name of the icon to draw. Refer to the proper naming of icons from the library you are using.', + table: { + category: 'Properties', + defaultValue: { summary: outline.icons.defaults.icon }, + }, + description: + 'The name of the icon to draw. Refer to the proper naming of icons from the library you are using.', control: { type: 'text', }, }, size: { name: 'size', - table: { category: 'Properties', defaultValue: { summary: outline.icons.defaults.size } }, - description: 'The size of icon. Required when `library === \'system\'`. Omit for other libraries to allow parent text size to control icon sizing. Valid values include `px`, `rem`, `em`, `%`, `vw`, and `vh`.', + table: { + category: 'Properties', + defaultValue: { summary: outline.icons.defaults.size }, + }, + description: + "The size of icon. Required when `library === 'system'`. Omit for other libraries to allow parent text size to control icon sizing. Valid values include `px`, `rem`, `em`, `%`, `vw`, and `vh`.", control: { type: 'text', }, @@ -48,11 +56,25 @@ The \`outline-icon\` component will render all manner of icons for your componen library: { name: 'library', table: { category: 'Properties', defaultValue: { summary: 'system' } }, - description: 'The icon library to use. Custom libraries can be registered with `outline.registerIconLibrary()`.', + description: + 'The icon library to use. Custom libraries can be registered with `outline.registerIconLibrary()`.', control: { type: 'select', }, - options: ['system', 'custom', 'bootstrap', 'boxicon', 'heroicons', 'iconoir', 'ionicons', 'jam', 'lucide', 'material', 'remix', 'unicons'], + options: [ + 'system', + 'custom', + 'bootstrap', + 'boxicon', + 'heroicons', + 'iconoir', + 'ionicons', + 'jam', + 'lucide', + 'material', + 'remix', + 'unicons', + ], }, sizeEnabled: { description: @@ -62,11 +84,13 @@ The \`outline-icon\` component will render all manner of icons for your componen }, name: 'Enable Size Property', table: { category: 'Custom Controls', defaultValue: { summary: 'true' } }, - } + }, }, args: { icon: outline.icons.defaults.icon, - library: outline.icons.defaults.library ? outline.icons.defaults.library : 'system', + library: outline.icons.defaults.library + ? outline.icons.defaults.library + : 'system', size: outline.icons.defaults.size, sizeEnabled: true, }, @@ -76,15 +100,15 @@ export default configuration; const specificLibraryArgTypes = { library: { table: { - disable: true - } + disable: true, + }, }, icon: { table: { - disable: true - } - } -} + disable: true, + }, + }, +}; const inlineIconDecorator = [ (Story): TemplateResult => html`
@@ -112,10 +136,10 @@ const DefaultTemplate = (customArguments = {}): TemplateResult => { export const AnIcon = (customArguments = {}) => DefaultTemplate(customArguments); - AnIcon.args = { - size: '64px', - }; - AnIcon.decorators = inlineIconDecorator; +AnIcon.args = { + size: '64px', +}; +AnIcon.decorators = inlineIconDecorator; const SystemTemplate = (customArguments = {}): TemplateResult => { const args = { @@ -124,18 +148,32 @@ const SystemTemplate = (customArguments = {}): TemplateResult => { }; return html` - - - - - - - + + + + + + + `; }; export const SystemIcons = (customArguments = {}) => -SystemTemplate(customArguments); + SystemTemplate(customArguments); SystemIcons.argTypes = specificLibraryArgTypes; SystemIcons.args = { size: '48px', @@ -143,7 +181,8 @@ SystemIcons.args = { }; SystemIcons.parameters = { docs: { - storyDescription: ` + description: { + story: ` ## The \`system\` icon library. The system library contains only the icons used by Outline components. @@ -151,8 +190,9 @@ The icons are hard-coded as data URIs into the icon resolver to ensure their ava This method is ideal for a small library of icons where you prefer to ensure "hard coded" availability of the icons. `, + }, }, -} +}; SystemIcons.decorators = inlineIconDecorator; const CustomTemplate = (customArguments = {}): TemplateResult => { @@ -163,14 +203,18 @@ const CustomTemplate = (customArguments = {}): TemplateResult => { return html`
- - + +
`; }; export const CustomIcons = (customArguments = {}) => -CustomTemplate(customArguments); + CustomTemplate(customArguments); CustomIcons.argTypes = specificLibraryArgTypes; CustomIcons.args = { size: '48px', @@ -179,15 +223,16 @@ CustomIcons.args = { }; CustomIcons.parameters = { docs: { - storyDescription: ` + description: { + story: ` ## The \`custom\` icon library. The \`custom\` library is a dynamic icon library that can be used to create custom icons. It uses the \`src/assets/svg\` directory to store the icons. - `, +`, + }, }, -} - +}; const BootstrapIconsTemplate = (customArguments = {}): TemplateResult => { const args = { @@ -198,29 +243,57 @@ const BootstrapIconsTemplate = (customArguments = {}): TemplateResult => { return html` Outline
- - - - - - - + + + + + + +
Fill
- - - - - - - + + + + + + +
`; }; export const Bootstrap = (customArguments = {}) => -BootstrapIconsTemplate(customArguments); + BootstrapIconsTemplate(customArguments); Bootstrap.argTypes = specificLibraryArgTypes; Bootstrap.args = { size: '48px', @@ -228,14 +301,16 @@ Bootstrap.args = { }; Bootstrap.parameters = { docs: { - storyDescription: ` + description: { + story: ` ## The \`bootstrap\` icon library. The \`bootstrap\` library uses the jsDelivr CDN to implement the [Bootstrap Icons library](https://icons.getbootstrap.com/). Please see the icon list on their site for the list of available icons. - `, +`, + }, }, -} +}; const BoxiconsTemplate = (customArguments = {}): TemplateResult => { const args = { @@ -247,36 +322,72 @@ const BoxiconsTemplate = (customArguments = {}): TemplateResult => { Outline
- - - - - - + + + + + +
Solid
- - - - - - + + + + + +
Brands
- - - - - - + + + + + +
`; }; export const Boxicons = (customArguments = {}) => -BoxiconsTemplate(customArguments); + BoxiconsTemplate(customArguments); Boxicons.argTypes = specificLibraryArgTypes; Boxicons.args = { size: '48px', @@ -284,14 +395,16 @@ Boxicons.args = { }; Boxicons.parameters = { docs: { - storyDescription: ` + description: { + story: ` ## The \`boxicons\` icon library. The \`boxicons\` library uses the jsDelivr CDN to implement [Boxicons](https://boxicons.com/). Please see the icon list on their site for the list of available icons. - `, +`, + }, }, -} +}; const FaTemplate = (customArguments = {}): TemplateResult => { const args = { @@ -302,36 +415,72 @@ const FaTemplate = (customArguments = {}): TemplateResult => { return html` Regular
- - - - - - + + + + + +
Solid
- - - - - - + + + + + +
Brands
- - - - - - + + + + + +
`; }; export const FontAwesomeFree = (customArguments = {}) => -FaTemplate(customArguments); + FaTemplate(customArguments); FontAwesomeFree.argTypes = specificLibraryArgTypes; FontAwesomeFree.args = { size: '48px', @@ -339,14 +488,16 @@ FontAwesomeFree.args = { }; FontAwesomeFree.parameters = { docs: { - storyDescription: ` + description: { + story: ` ## The \`fa\` icon library. The \`fa\` library uses the jsDelivr CDN to implement [Font Awesome (free)](https://fontawesome.com). Please see the [icon list](https://fontawesome.com/icons) on their site for the list of available icons. - `, +`, + }, }, -} +}; const HeroiconsTemplate = (customArguments = {}): TemplateResult => { const args = { @@ -357,18 +508,30 @@ const HeroiconsTemplate = (customArguments = {}): TemplateResult => { return html` Standard
- - - - - - + + + + + +
`; }; export const Heroicons = (customArguments = {}) => -HeroiconsTemplate(customArguments); + HeroiconsTemplate(customArguments); Heroicons.argTypes = specificLibraryArgTypes; Heroicons.args = { size: '48px', @@ -376,14 +539,16 @@ Heroicons.args = { }; Heroicons.parameters = { docs: { - storyDescription: ` + description: { + story: ` ## The \`heroicons\` icon library. The \`heroicons\` library uses the jsDelivr CDN to implement [Heroicons](https://heroicons.com/). Please see the icon list on their site for the list of available icons. - `, +`, + }, }, -} +}; const IconoirTemplate = (customArguments = {}): TemplateResult => { const args = { @@ -394,18 +559,30 @@ const IconoirTemplate = (customArguments = {}): TemplateResult => { return html` Standard
- - - - - - + + + + + +
`; }; export const Iconoir = (customArguments = {}) => -IconoirTemplate(customArguments); + IconoirTemplate(customArguments); Iconoir.argTypes = specificLibraryArgTypes; Iconoir.args = { size: '48px', @@ -413,14 +590,16 @@ Iconoir.args = { }; Iconoir.parameters = { docs: { - storyDescription: ` + description: { + story: ` ## The \`iconoir\` icon library. The \`iconoir\` library uses the jsDelivr CDN to implement [Iconoir](https://iconoir.com/). Please see the icon list on their site for the list of available icons. - `, +`, + }, }, -} +}; const IonIconsTemplate = (customArguments = {}): TemplateResult => { const args = { @@ -431,36 +610,72 @@ const IonIconsTemplate = (customArguments = {}): TemplateResult => { return html` Regular
- - - - - - + + + + + +
Outline
- - - - - - + + + + + +
Sharp
- - - - - - + + + + + +
`; }; export const Ionicons = (customArguments = {}) => -IonIconsTemplate(customArguments); + IonIconsTemplate(customArguments); Ionicons.argTypes = specificLibraryArgTypes; Ionicons.args = { size: '48px', @@ -468,14 +683,16 @@ Ionicons.args = { }; Ionicons.parameters = { docs: { - storyDescription: ` + description: { + story: ` ## The \`ionicons\` icon library. The \`ionicons\` library uses the jsDelivr CDN to implement [Ionicons](https://ionic.io/ionicons). Please see the icon list on their site for the list of available icons. - `, +`, + }, }, -} +}; const JamIconsTemplate = (customArguments = {}): TemplateResult => { const args = { @@ -486,27 +703,50 @@ const JamIconsTemplate = (customArguments = {}): TemplateResult => { return html` Stroke
- - - - - - + + + + + +
Fill
- - - - - - + + + + + +
`; }; -export const Jam = (customArguments = {}) => -JamIconsTemplate(customArguments); +export const Jam = (customArguments = {}) => JamIconsTemplate(customArguments); Jam.argTypes = specificLibraryArgTypes; Jam.args = { size: '48px', @@ -514,14 +754,16 @@ Jam.args = { }; Jam.parameters = { docs: { - storyDescription: ` + description: { + story: ` ## The \`jam\` icon library. The \`jam\` library uses the jsDelivr CDN to implement [Jam Icons](https://jam-icons.com/). Please see the icon list on their site for the list of available icons. - `, +`, + }, }, -} +}; const LucideTemplate = (customArguments = {}): TemplateResult => { const args = { @@ -532,18 +774,29 @@ const LucideTemplate = (customArguments = {}): TemplateResult => { return html` Standard
- - - - - - + + + + + +
`; }; -export const Lucide = (customArguments = {}) => -LucideTemplate(customArguments); +export const Lucide = (customArguments = {}) => LucideTemplate(customArguments); Lucide.argTypes = specificLibraryArgTypes; Lucide.args = { size: '48px', @@ -551,14 +804,16 @@ Lucide.args = { }; Lucide.parameters = { docs: { - storyDescription: ` + description: { + story: ` ## The \`lucide\` icon library. The \`lucide\` library uses the jsDelivr CDN to implement [Lucide Icons](https://lucide.dev/). Please see the icon list on their site for the list of available icons. - `, +`, + }, }, -} +}; const MaterialIconsTemplate = (customArguments = {}): TemplateResult => { const args = { @@ -569,36 +824,72 @@ const MaterialIconsTemplate = (customArguments = {}): TemplateResult => { return html` Regular
- - - - - - + + + + + +
Round
- - - - - - + + + + + +
Sharp
- - - - - - + + + + + +
`; }; export const Material = (customArguments = {}) => -MaterialIconsTemplate(customArguments); + MaterialIconsTemplate(customArguments); Material.argTypes = specificLibraryArgTypes; Material.args = { size: '48px', @@ -606,14 +897,16 @@ Material.args = { }; Material.parameters = { docs: { - storyDescription: ` + description: { + story: ` ## The \`material\` icon library. The \`material\` library uses the jsDelivr CDN to implement [Material Icons](https://mui.com/components/material-icons/). Please see the icon list on their site for the list of available icons. - `, +`, + }, }, -} +}; const RemixIconsTemplate = (customArguments = {}): TemplateResult => { const args = { @@ -624,27 +917,51 @@ const RemixIconsTemplate = (customArguments = {}): TemplateResult => { return html` Line
- - - - - - + + + + + +
Fill
- - - - - - + + + + + +
`; }; export const Remix = (customArguments = {}) => -RemixIconsTemplate(customArguments); + RemixIconsTemplate(customArguments); Remix.argTypes = specificLibraryArgTypes; Remix.args = { size: '48px', @@ -652,14 +969,16 @@ Remix.args = { }; Remix.parameters = { docs: { - storyDescription: ` + description: { + story: ` ## The \`remix\` icon library. The \`remix\` library uses the jsDelivr CDN to implement [Remix Icons](http://remixicon.com/). Please see the icon list on their site for the list of available icons. - `, +`, + }, }, -} +}; const UniconsTemplate = (customArguments = {}): TemplateResult => { const args = { @@ -670,27 +989,51 @@ const UniconsTemplate = (customArguments = {}): TemplateResult => { return html` Regular
- - - - - - + + + + + +
Solid
- - - - - - + + + + + +
`; }; export const Unicons = (customArguments = {}) => -UniconsTemplate(customArguments); + UniconsTemplate(customArguments); Unicons.argTypes = specificLibraryArgTypes; Unicons.args = { size: '48px', @@ -698,11 +1041,13 @@ Unicons.args = { }; Unicons.parameters = { docs: { - storyDescription: ` + description: { + story: ` ## The \`unicons\` icon library. The \`unicons\` library uses the jsDelivr CDN to implement [Unicons](https://iconscout.com/unicons). Please see the icon list on their site for the list of available icons. - `, +`, + }, }, -} +};