From b83ed8808494c477f2b93605c359fa824d69ff08 Mon Sep 17 00:00:00 2001 From: Mandy Wehrman Date: Mon, 20 Nov 2023 16:33:40 -0500 Subject: [PATCH] docs(ListItem): adds parent props to ListItem --- .../src/components/Button/Button.stories.js | 6 +- .../components/CardContent/CardContent.mdx | 9 ++- .../src/components/ListItem/ListItem.mdx | 28 ++++----- .../components/ListItem/ListItem.stories.js | 58 ++++++++++++------- .../components/ListItem/ListItemPicker.mdx | 21 ++++--- .../ListItem/ListItemPicker.stories.js | 15 ++++- .../components/ListItem/ListItemSlider.mdx | 21 +++++-- .../ListItem/ListItemSlider.stories.js | 16 +++-- .../src/components/Slider/Slider.stories.js | 13 +++-- .../lightning-ui-docs/.storybook/preview.js | 6 +- 10 files changed, 123 insertions(+), 70 deletions(-) diff --git a/packages/@lightningjs/ui-components/src/components/Button/Button.stories.js b/packages/@lightningjs/ui-components/src/components/Button/Button.stories.js index 60c01ced6..85e2c7919 100644 --- a/packages/@lightningjs/ui-components/src/components/Button/Button.stories.js +++ b/packages/@lightningjs/ui-components/src/components/Button/Button.stories.js @@ -41,14 +41,16 @@ export default { control: 'text', description: 'Title text', table: { - defaultValue: { summary: 'undefined' } + defaultValue: { summary: 'undefined' }, + type: { summary: 'string' } } }, fixed: { control: 'boolean', description: controlDescriptions.fixed, table: { - defaultValue: { summary: false } + defaultValue: { summary: false }, + type: { summary: 'boolean' } } }, w: { diff --git a/packages/@lightningjs/ui-components/src/components/CardContent/CardContent.mdx b/packages/@lightningjs/ui-components/src/components/CardContent/CardContent.mdx index 91b7fa5a1..30c382a1c 100644 --- a/packages/@lightningjs/ui-components/src/components/CardContent/CardContent.mdx +++ b/packages/@lightningjs/ui-components/src/components/CardContent/CardContent.mdx @@ -17,9 +17,10 @@ limitations under the License. SPDX-License-Identifier: Apache-2.0 \*/} -import { Meta, Title } from '@storybook/blocks'; +import { Meta, Title, ArgTypes } from '@storybook/blocks'; +import * as CardStories from '../Card/Card.stories.js'; - +; # CardContent @@ -71,3 +72,7 @@ class Basic extends lng.Component { | metadata | string \| object | text style for the metadata | | paddingHorizontal | number | padding on the x-axis between the right and left of the card and its content | | paddingVertical | number | padding on the y-axis between the top and bottom of the card and its content | + +### Parent Componet Properties + + diff --git a/packages/@lightningjs/ui-components/src/components/ListItem/ListItem.mdx b/packages/@lightningjs/ui-components/src/components/ListItem/ListItem.mdx index 0eec2c490..b4f50b4ec 100644 --- a/packages/@lightningjs/ui-components/src/components/ListItem/ListItem.mdx +++ b/packages/@lightningjs/ui-components/src/components/ListItem/ListItem.mdx @@ -17,21 +17,17 @@ limitations under the License. SPDX-License-Identifier: Apache-2.0 \*/} -import { - Meta, - Title, - ArgTypes, - Description, - Subtitle -} from '@storybook/blocks'; +import { Meta, Title, ArgTypes, Description } from '@storybook/blocks'; import * as ListItemStories from './ListItem.stories'; import * as ButtonStories from '../Button/Button.stories'; - + -# ListItem + -Component to represent a single item within a list. +<Description of={ListItemStories} /> + +<Description of={ListItemStories.ListItem} /> ## Source @@ -65,12 +61,10 @@ class Basic extends lng.Component { `ListItem` has the same properties as the ones listed in [Button](?path=/docs/components-button--basic) in addition to a couple listed below: -| name | type | default | description | -| -------------- | ------- | --------- | ------------------------------------------------------------------------------------- | -| description | string | undefined | description text | -| prefixLogo | string | undefined | Logo to be placed to the left of the title and description | -| shouldCollapse | boolean | false | flag that if `true`, hides the title when `ListItem` is in unfocused or disabled mode | -| suffixLogo | string | undefined | Logo to be placed to the right of the title and description | +<ArgTypes + of={ListItemStories.ListItem} + exclude={['suffix', 'prefix', 'title', 'mode']} +/> ### Style Properties @@ -87,4 +81,4 @@ class Basic extends lng.Component { List item extends button -<ArgTypes of={ButtonStories} /> +<ArgTypes of={ButtonStories} exclude={['mode']} /> diff --git a/packages/@lightningjs/ui-components/src/components/ListItem/ListItem.stories.js b/packages/@lightningjs/ui-components/src/components/ListItem/ListItem.stories.js index 6f28869fc..e0717f272 100644 --- a/packages/@lightningjs/ui-components/src/components/ListItem/ListItem.stories.js +++ b/packages/@lightningjs/ui-components/src/components/ListItem/ListItem.stories.js @@ -24,8 +24,21 @@ import { default as Checkbox } from '../Checkbox'; import { default as Radio } from '../Radio'; import { default as Toggle } from '../Toggle'; +/** + * ListItem component with the ability to let a user pick from a list of options. + */ export default { - title: 'Components/ListItem/ListItem' + title: 'Components/ListItem/ListItem', + args: { + title: 'List Item', + shouldCollapse: false, + description: 'Description', + prefix: null, + prefixLogo: 'none', + suffix: null, + suffixLogo: 'none', + mode: 'focused' + } }; export const ListItem = () => @@ -41,31 +54,22 @@ export const ListItem = () => ListItem.storyName = 'ListItem'; -ListItem.args = { - title: 'List Item', - shouldCollapse: false, - description: 'Description', - prefix: null, - prefixLogo: 'none', - suffix: null, - suffixLogo: 'none', - mode: 'focused' -}; - ListItem.argTypes = { - ...createModeControl({ summaryValue: ListItem.args.mode }), + ...createModeControl({ summaryValue: 'focused' }), title: { control: 'text', description: 'Title text', table: { - defaultValue: { summary: 'undefined' } + defaultValue: { summary: 'undefined' }, + type: { summary: 'string' } } }, description: { control: 'text', description: 'Description text', table: { - defaultValue: { summary: 'undefined' } + defaultValue: { summary: 'undefined' }, + type: { summary: 'string' } } }, shouldCollapse: { @@ -73,7 +77,8 @@ ListItem.argTypes = { description: 'When in unfocused or disabled mode, if this flag is true the description will collapse (when focused, it will always be expanded)', table: { - defaultValue: { summary: false } + defaultValue: { summary: false }, + type: { summary: 'boolean' } } }, prefix: { @@ -81,7 +86,8 @@ ListItem.argTypes = { options: [null, 'toggle', 'radio', 'checkbox'], description: 'Lightning components to be placed to the left of the title', table: { - defaultValue: { summary: 'undefined' } + defaultValue: { summary: 'undefined' }, + type: { summary: 'object or array' } } }, prefixLogo: { @@ -90,7 +96,8 @@ ListItem.argTypes = { description: 'Logo to be placed to the left of the title. If prefix and prefixLogo are both set, prefixLogo will take precedence for what is rendered and prefix will be ignored', table: { - defaultValue: { summary: 'undefined' } + defaultValue: { summary: 'undefined' }, + type: { summary: 'string' } } }, suffix: { @@ -98,7 +105,8 @@ ListItem.argTypes = { options: [null, 'toggle', 'radio', 'checkbox'], description: 'Lightning components to be placed to the right of the title', table: { - defaultValue: { summary: 'undefined' } + defaultValue: { summary: 'undefined' }, + type: { summary: 'object or array' } } }, suffixLogo: { @@ -107,7 +115,8 @@ ListItem.argTypes = { description: 'Logo to be placed to the right of the title. If suffix and suffixLogo are both set, suffixLogo will take precedence for what is rendered and suffix will be ignored', table: { - defaultValue: { summary: 'undefined' } + defaultValue: { summary: 'undefined' }, + type: { summary: 'string' } } } }; @@ -155,4 +164,11 @@ const sharedArgActions = { } }; -ListItem.parameters = { argActions: sharedArgActions }; +ListItem.parameters = { + argActions: sharedArgActions, + docs: { + description: { + story: 'story tests' + } + } +}; diff --git a/packages/@lightningjs/ui-components/src/components/ListItem/ListItemPicker.mdx b/packages/@lightningjs/ui-components/src/components/ListItem/ListItemPicker.mdx index 958c04066..917dcba55 100644 --- a/packages/@lightningjs/ui-components/src/components/ListItem/ListItemPicker.mdx +++ b/packages/@lightningjs/ui-components/src/components/ListItem/ListItemPicker.mdx @@ -17,14 +17,15 @@ limitations under the License. SPDX-License-Identifier: Apache-2.0 \*/} -import { Meta, Title } from '@storybook/blocks'; +import { Meta, Title, ArgTypes, Description } from '@storybook/blocks'; import * as ListItemPickerStories from './ListItemPicker.stories'; +import * as ListItemStories from './ListItem.stories.js'; <Meta of={ListItemPickerStories} /> <Title /> -ListItem component with the ability to let a user pick from a list of options. +<Description /> ## Source @@ -52,14 +53,18 @@ class Basic extends lng.Component { ## API -### Properties +### Parent Properties + +`ListItemPicker` has the same properties as `ListItem` -`ListItemPicker` has the same properties as the ones listed in [ListItem](?path=/docs/components-listitem--list-item) in addition to a couple listed below: +<ArgTypes + of={ListItemStories.ListItem} + exclude={['suffix', 'prefix', 'title', 'mode']} +/> + +### Properties -| name | type | default | description | -| ------------- | -------- | --------- | -------------------------------- | -| options | string[] | undefined | list of selectable options | -| selectedIndex | number | undefined | index of current selected option | +<ArgTypes of={ListItemPickerStories.ListItemPicker} /> ### Style Properties diff --git a/packages/@lightningjs/ui-components/src/components/ListItem/ListItemPicker.stories.js b/packages/@lightningjs/ui-components/src/components/ListItem/ListItemPicker.stories.js index f21f76c62..84e739433 100644 --- a/packages/@lightningjs/ui-components/src/components/ListItem/ListItemPicker.stories.js +++ b/packages/@lightningjs/ui-components/src/components/ListItem/ListItemPicker.stories.js @@ -20,6 +20,10 @@ import lng from '@lightningjs/core'; import { default as ListItemPickerComponent } from './ListItemPicker'; import { createModeControl } from '../../docs/utils'; +/** + * + */ + export default { title: 'Components/ListItem/ListItemPicker' }; @@ -51,7 +55,8 @@ ListItemPicker.argTypes = { control: 'text', description: 'Title text', table: { - defaultValue: { summary: 'undefined' } + defaultValue: { summary: 'undefined' }, + type: { summary: 'string' } } }, shouldCollapse: { @@ -59,12 +64,16 @@ ListItemPicker.argTypes = { description: 'When in unfocused or disabled mode,if this flag is true the description will collapse (when focused, it will always be expanded)', table: { - defaultValue: { summary: false } + defaultValue: { summary: false }, + type: { summary: 'boolean' } } }, options: { control: 'object', description: 'List of selectable options', - table: { defaultValue: { summary: 'undefined' } } + table: { + defaultValue: { summary: 'undefined' }, + type: { summary: 'object' } + } } }; diff --git a/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.mdx b/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.mdx index a766f20cb..7db8f67cf 100644 --- a/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.mdx +++ b/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.mdx @@ -1,11 +1,13 @@ -import { Meta, Title } from '@storybook/blocks'; +import { Meta, Title, ArgTypes, Description } from '@storybook/blocks'; import * as ListItemSliderStories from './ListItemSlider.stories'; +import * as ListItemStories from './ListItem.stories'; +import * as SliderStories from '../Slider/Slider.stories'; <Meta of={ListItemSliderStories} /> <Title /> -A ListItem component with slider functionality +<Description /> ## Source @@ -33,12 +35,19 @@ class Basic extends lng.Component { ## API +### Parent Properties + +`ListItemSlider` contains all the properties of `ListItem` + +<ArgTypes of={ListItemStories.ListItem} /> + ### Properties -| name | type | required | default | description | -| ------ | ------ | -------- | --------- | ---------------------------------------------------------------------------------------------------------- | -| slider | object | false | undefined | object containing all properties supported in the [Slider component](?path=/docs/components-slider--basic) | -| value | string | false | undefined | current value of slider | +<ArgTypes of={ListItemSliderStories.ListItemSlider} /> + +### Slider Properties + +<ArgTypes of={SliderStories.Basic} /> ### Style Properties diff --git a/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.stories.js b/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.stories.js index 67878b3f1..9cdc1da4a 100644 --- a/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.stories.js +++ b/packages/@lightningjs/ui-components/src/components/ListItem/ListItemSlider.stories.js @@ -21,6 +21,10 @@ import { default as ListItemSliderComponent } from './ListItemSlider'; import { createModeControl, generateSubStory } from '../../docs/utils'; import { Basic as SliderStory } from '../Slider/Slider.stories'; +/** + * A ListItem component with slider functionality + */ + export default { title: 'Components/ListItem/ListItemSlider' }; @@ -44,21 +48,22 @@ ListItemSlider.args = { shouldCollapse: false, mode: 'focused' }; - ListItemSlider.argTypes = { - ...createModeControl({ summaryValue: ListItemSlider.args.mode }), + ...createModeControl({ summaryValue: 'focused' }), title: { control: 'text', description: 'Title text', table: { - defaultValue: { summary: 'undefined' } + defaultValue: { summary: 'undefined' }, + type: { summary: 'string' } } }, value: { control: 'number', description: 'Current slider value', table: { - defaultValue: { summary: 'undefined' } + defaultValue: { summary: 'undefined' }, + type: { summary: 'number' } } }, shouldCollapse: { @@ -66,7 +71,8 @@ ListItemSlider.argTypes = { description: 'When in unfocused or disabled mode, if shouldCollapse property is true it will collapse the slider (when focused, it will always be expanded)', table: { - defaultValue: { summary: false } + defaultValue: { summary: false }, + type: { summary: 'boolean' } } } }; diff --git a/packages/@lightningjs/ui-components/src/components/Slider/Slider.stories.js b/packages/@lightningjs/ui-components/src/components/Slider/Slider.stories.js index 20af18fb7..3de5337a5 100644 --- a/packages/@lightningjs/ui-components/src/components/Slider/Slider.stories.js +++ b/packages/@lightningjs/ui-components/src/components/Slider/Slider.stories.js @@ -61,27 +61,30 @@ Basic.argTypes = { min: { control: 'number', description: 'Lower bound of value', - table: { defaultValue: { summary: 0 } } + table: { defaultValue: { summary: 0 }, type: { summary: 'number' } } }, max: { control: 'number', description: 'Upper bound of value', - table: { defaultValue: { summary: 100 } } + table: { defaultValue: { summary: 100 }, type: { summary: 'number' } } }, value: { control: 'number', description: 'Current value', - table: { defaultValue: { summary: '0 or min' } } + table: { + defaultValue: { summary: '0 or min' }, + type: { summary: 'number' } + } }, step: { control: 'number', description: '+/- value on change', - table: { defaultValue: { summary: 1 } } + table: { defaultValue: { summary: 1 }, type: { summary: 'number' } } }, vertical: { control: 'boolean', description: 'If true, the slider is displayed vertically', - table: { defaultValue: { summary: false } } + table: { defaultValue: { summary: false }, type: { summary: 'boolean' } } } }; diff --git a/packages/apps/lightning-ui-docs/.storybook/preview.js b/packages/apps/lightning-ui-docs/.storybook/preview.js index 91a977bf0..ab7271668 100644 --- a/packages/apps/lightning-ui-docs/.storybook/preview.js +++ b/packages/apps/lightning-ui-docs/.storybook/preview.js @@ -41,7 +41,11 @@ const preview = { sort: 'requiredFirst' }, docs: { - theme: themes.dark + theme: themes.dark, + argTypes: { + sort: 'alpha', + exclude: ['mode'] + } }, options: { /** NOTE: v7 storySort must be self-contained function & no reference to outside variables