docs(ListItem): adds parent props to ListItem

rdkcentral · Nov 20, 2023 · b83ed88 · b83ed88
1 parent 125fc78
commit b83ed88
Show file tree

Hide file tree

Showing 10 changed files with 123 additions and 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
@@ -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
@@ -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';
 
-<Meta title="Components/CardContent" />
+<Meta title="Components/CardContent" />;
 
 # 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
+
+<ArgTypes of={CardStories} />
diff --git 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';
 
-<Meta title="Components/ListItem" />
+<Meta of={ListItemStories} />
 
-# ListItem
+<Title />
 
-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
@@ -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,47 +54,40 @@ 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: {
     control: 'boolean',
     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: {
     control: 'radio',
     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,15 +96,17 @@ 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: {
     control: 'radio',
     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
@@ -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
@@ -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,20 +55,25 @@ ListItemPicker.argTypes = {
     control: 'text',
     description: 'Title text',
     table: {
-      defaultValue: { summary: 'undefined' }
+      defaultValue: { summary: 'undefined' },
+      type: { summary: 'string' }
     }
   },
   shouldCollapse: {
     control: 'boolean',
     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
@@ -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
@@ -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,29 +48,31 @@ 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: {
     control: 'boolean',
     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' }
     }
   }
 };