diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 42dcd588c..eabee3140 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -57,7 +57,7 @@ The following is a set of guidelines for contributing to `@lightningjs/ui-compon **Documentation** -- [See the README for setup help](../?path=/story/docs-read-me--page) +- [See the README for setup help](?path=/docs/docs-read-me--docs) - [See Storybook for component docs with live examples](https://rdkcentral.github.io/Lightning-UI-Components/) **Discuss on Slack** diff --git a/LUI.md b/LUI.md index 004a3d81e..40caf7a45 100644 --- a/LUI.md +++ b/LUI.md @@ -27,6 +27,7 @@ The team presented LUI 2.0 during an RDK Webinar. Please view the videos below f ## Structure LUI is a monorepo containing the following packages: + - @lightningjs/ui-components - @lightningjs/ui-components-test-utils - @lightningjs/ui-components-theme-base @@ -63,7 +64,7 @@ Theming is a way to easily reskin or style components via a set of style propert Each of the components references specific style properties that map back to a global style sheet, which we call a "theme." This is a similar concept as CSS for web components. -You can find our complete documentation on theming in our [Storybook here](https://rdkcentral.github.io/Lightning-UI-Components/?path=/story/docs-theming-overview--page). +You can find our complete documentation on theming in our [Storybook here](https://rdkcentral.github.io/Lightning-UI-Components/?path=/docs/docs-theming-overview--docs). ### Capabilities of Theming @@ -84,6 +85,7 @@ You can find our complete documentation on theming in our [Storybook here](https ### Theming Schema Theme files consist of the following overarching properties: + - alpha (opacity) - animation (curves) - color @@ -96,7 +98,7 @@ Theme files consist of the following overarching properties: - componentConfig - extensions -For more information on the properties that make up a **theme** file, check out our [Storybook here](https://rdkcentral.github.io/Lightning-UI-Components/?path=/story/docs-theming-theme-properties--page). +For more information on the properties that make up a **theme** file, check out our [Storybook here](https://rdkcentral.github.io/Lightning-UI-Components/?path=/docs/docs-theming-theme-properties--docs). #### Component Config @@ -107,10 +109,13 @@ The `componentConfig` object can take in key value pairs of component names to n The `style` object can be used to override the predetermined style properties of the given component type. For example: + ```js componentConfig: { ProgressBar: { - style: { radius: 20 } + style: { + radius: 20 + } } } ``` @@ -118,6 +123,7 @@ componentConfig: { ##### Tones The `tone` property expects a string which will determine the default color palette to apply to a component. It should match one of the following: + - neutral (meant for use on dark backgrounds) - inverse (meant for use on light backgrounds) - brand (meant to call branded focus to an element) @@ -125,10 +131,11 @@ The `tone` property expects a string which will determine the default color pale When specified, these strings will override the default tone used by the component in our library to quickly change the appearance of the component. For example: + ```js componentConfig: { ProgressBar: { - tone: 'brand' + tone: 'brand'; } } ``` @@ -136,6 +143,7 @@ componentConfig: { ##### Modes The `mode` property expects a string which will determine the default interaction state to apply to a component. By default, components are in the unfocused mode, but depending on the platform, can be switched into modes like: + - unfocused (default) - focused (the active component being interacted with) - disabled (when a user should not be able to interact with a component) @@ -144,10 +152,11 @@ The `mode` property expects a string which will determine the default interactio - pressed (can change the style when a Button is clicked down versus hovered on) For example: + ```js componentConfig: { ProgressBar: { - mode: 'disabled' + mode: 'disabled'; } } ``` @@ -157,6 +166,7 @@ componentConfig: { The `styleConfig` object contains overrides for a component's `tone` and `mode` styles that will be applied when a component is switched into those tone or mode states. For example: + ```js componentConfig: { ProgressBar: { @@ -174,4 +184,4 @@ componentConfig: { #### Extensions -The `extensions` array supplies custom behavior to a component library. This is a way for developers to dynamically adjust component code without having to extend and create their own custom component. For more information on Extensions, check out our [documentation here](https://rdkcentral.github.io/Lightning-UI-Components/?path=/story/docs-theming-extensions--page). +The `extensions` array supplies custom behavior to a component library. This is a way for developers to dynamically adjust component code without having to extend and create their own custom component. For more information on Extensions, check out our [documentation here](https://rdkcentral.github.io/Lightning-UI-Components/?path=/docs/docs-theming-theme-properties--docs). diff --git a/packages/@lightningjs/ui-components/src/components/Card/CardRadio.mdx b/packages/@lightningjs/ui-components/src/components/Card/CardRadio.mdx index 7383a09d5..fdd6b95de 100644 --- a/packages/@lightningjs/ui-components/src/components/Card/CardRadio.mdx +++ b/packages/@lightningjs/ui-components/src/components/Card/CardRadio.mdx @@ -57,10 +57,10 @@ class Basic extends lng.Component { ### Properties -| name | type | required | default | description | -| -------- | ---------------- | -------- | --------- | -------------------------------------------------------------------------------------------------------- | +| name | type | required | default | description | +| -------- | ---------------- | -------- | --------- | ------------------------------------------------------------------------------------------------------- | | radio | object | false | undefined | Object containing all properties supported in the [Radio component](?path=/docs/components-radio--docs) | -| subtitle | string \| object | false | undefined | The text to be displayed in the subtitle section of the card. | +| subtitle | string \| object | false | undefined | The text to be displayed in the subtitle section of the card. | ### Style Properties diff --git a/packages/@lightningjs/ui-components/src/components/Card/CardSection.mdx b/packages/@lightningjs/ui-components/src/components/Card/CardSection.mdx index c2bbd55fb..57cdaba15 100644 --- a/packages/@lightningjs/ui-components/src/components/Card/CardSection.mdx +++ b/packages/@lightningjs/ui-components/src/components/Card/CardSection.mdx @@ -33,7 +33,7 @@ https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/%40l ## Usage `CardSection` can display a title and an icon. If an icon is being passed in, iconWidth and iconHeight will also have to be passed in for the icon to render. Additionally, a title can be passed in. -`CardSection` extends [Card](?path=/docs/components-card--card) +`CardSection` extends [Card](?path=/docs/components-card--docs) ```js import { CardSection } from '@lightningjs/ui-components'; diff --git a/packages/@lightningjs/ui-components/src/components/Card/CardTitle.mdx b/packages/@lightningjs/ui-components/src/components/Card/CardTitle.mdx index f304ba6ef..f1cda2ee0 100644 --- a/packages/@lightningjs/ui-components/src/components/Card/CardTitle.mdx +++ b/packages/@lightningjs/ui-components/src/components/Card/CardTitle.mdx @@ -33,7 +33,7 @@ https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/%40l ## Usage `CardTitle` can display both a title and a description if a title and description are passed in. -`CardTitle` extends [Card](?path=/docs/components-card--card) +`CardTitle` extends [Card](?path=/docs/components-card--docs) ```js import { CardTitle } from '@lightningjs/ui-components'; diff --git a/packages/@lightningjs/ui-components/src/components/Column/Column.mdx b/packages/@lightningjs/ui-components/src/components/Column/Column.mdx index fbd5dfc7e..0fb16f032 100644 --- a/packages/@lightningjs/ui-components/src/components/Column/Column.mdx +++ b/packages/@lightningjs/ui-components/src/components/Column/Column.mdx @@ -121,11 +121,7 @@ If both of those properties are enabled, `alwaysScroll` will take precedence ove ### Style Properties -The Column component shares a few of the same style properties as the ones listed in NavigationManager. For a detailed description, please refer to style properties section in the [NavigationManager component](?path=/docs/components-navigationmanager--docs) - -scrollIndex: number -itemSpacing: number -itemTransition: +The Column component shares the same style properties as the ones listed in NavigationManager. For a detailed description, please refer to style properties section in the [NavigationManager component](?path=/docs/components-navigationmanager--docs#style-properties) ### Child Item Properties diff --git a/packages/@lightningjs/ui-components/src/components/Column/Column.stories.js b/packages/@lightningjs/ui-components/src/components/Column/Column.stories.js index 821240618..686c6aa00 100644 --- a/packages/@lightningjs/ui-components/src/components/Column/Column.stories.js +++ b/packages/@lightningjs/ui-components/src/components/Column/Column.stories.js @@ -600,7 +600,7 @@ LazyUpCount.argTypes = { lazyUpCount: { control: 'number', description: - 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**', + 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/components-navigationmanager--docs#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**', table: { defaultValue: { summary: 'undefined' } } @@ -608,7 +608,7 @@ LazyUpCount.argTypes = { lazyUpCountBuffer: { control: 'number', description: - 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**', + 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/components-navigationmanager--docs#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**', table: { defaultValue: { summary: 2 } } @@ -708,7 +708,7 @@ AddingItems.argTypes = { lazyUpCount: { control: 'number', description: - 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**', + 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/components-navigationmanager--docs#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**', table: { defaultValue: { summary: 'undefined' } } @@ -716,7 +716,7 @@ AddingItems.argTypes = { lazyUpCountBuffer: { control: 'number', description: - 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**', + 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/components-navigationmanager--docs#properties) for more details.
**NOTE: changing this value requires refreshing the story to see its effect.**', table: { defaultValue: { summary: 2 } } diff --git a/packages/@lightningjs/ui-components/src/components/Control/Control.mdx b/packages/@lightningjs/ui-components/src/components/Control/Control.mdx index 7ca49c3ce..9842037bd 100644 --- a/packages/@lightningjs/ui-components/src/components/Control/Control.mdx +++ b/packages/@lightningjs/ui-components/src/components/Control/Control.mdx @@ -79,7 +79,7 @@ Optional flag for the `Control` element to collapse (hide the title) when `Contr ### Style Properties -`Control` contains the same style properties as [Button](?path=/docs/components-button--docs) in additional to a couple other style properties listed below: +`Control` contains the same style properties as [Button](?path=/docs/components-button--docs) in addition to a couple other style properties listed below: | name | type | description | | --------- | ------ | ----------------------------------- | diff --git a/packages/@lightningjs/ui-components/src/components/ControlRow/ControlRow.mdx b/packages/@lightningjs/ui-components/src/components/ControlRow/ControlRow.mdx index 7ca3f0ac5..3a5687723 100644 --- a/packages/@lightningjs/ui-components/src/components/ControlRow/ControlRow.mdx +++ b/packages/@lightningjs/ui-components/src/components/ControlRow/ControlRow.mdx @@ -25,7 +25,7 @@ import * as ControlRowStories from './ControlRow.stories'; The `ControlRow` component renders a -[TitleRow](/docs/components-titlerow--basic) component with optional left controls content items, and right controls +[TitleRow](?path=/docs/components-titlerow--docs) component with optional left controls content items, and right controls which are rendered as row items in that order. ## Source @@ -34,7 +34,7 @@ https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lig ## Usage -`ControlRow` accepts all [properties supported by TitleRow](/docs/components-titlerow--basic#properties) +`ControlRow` accepts all [properties supported by TitleRow](?path=/docs/components-titlerow--docs#properties) as well as optional `leftControls`, `contentItems`, and `rightControls` properties. ```js @@ -99,7 +99,7 @@ class LazyLoad extends lng.Component { ### Properties -**`ControlRow` is a subclass of the [`TitleRow`](/docs/components-titlerow--basic)**, +**`ControlRow` is a subclass of the [`TitleRow`](?path=/docs/components-titlerow--docs)**, so allows setting all properties that are available on `TitleRow`. | name | type | required | default | description | diff --git a/packages/@lightningjs/ui-components/src/components/Keyboard/Keyboard.mdx b/packages/@lightningjs/ui-components/src/components/Keyboard/Keyboard.mdx index 063424c46..23be12f45 100644 --- a/packages/@lightningjs/ui-components/src/components/Keyboard/Keyboard.mdx +++ b/packages/@lightningjs/ui-components/src/components/Keyboard/Keyboard.mdx @@ -98,7 +98,7 @@ All of the following examples will yield the same result. | defaultFormat | string | true | undefined | default format of the keyboard to be shown. should be a key of `formats`. | | formats | object | true | undefined | object containing arrays that represent different formats that the keyboard can be presented in. These arrays can contain strings or objects. | | inline | boolean | false | false | if the keyboard is an inline keyboard and can ignore row/column count requirements | -| input | object | true | undefined | object with all of the properties for [Input](?path=/docs/components-input--input) | +| input | object | true | undefined | object with all of the properties for [Input](?path=/docs/components-input--docs) | | keyComponent | lng.Component | false | Key | component to display for each key | | rowCount | number | false | undefined | number of rows down the keyboard if passing a flat array | | rowWrap | boolean | false | true | wrap keyboard rows when navigating left and right | diff --git a/packages/@lightningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.mdx b/packages/@lightningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.mdx index d48e3fb34..2be6716b4 100644 --- a/packages/@lightningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.mdx +++ b/packages/@lightningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.mdx @@ -24,7 +24,7 @@ import * as MetadataCardContentStories from './MetadataCardContent.stories'; <Title /> -A component to format metadata on CardContent. Contains a [Provider](?path=/docs/components-provider--basic) to format [Icon(s)](?path=/docs/components-icon--png). +A component to format metadata on CardContent. Contains a [Provider](?path=/docs/components-provider--docs) to format [Icon(s)](?path=/docs/components-icon--docs). ## Source @@ -59,20 +59,20 @@ class Basic extends lng.Component { ### Properties -| name | type | required | default | description | -| ------------------ | ----------------------------------------------------- | -------- | --------- | ----------------------------------------------------------------------------------------- | -| title | string | false | undefined | title text | -| description | string | false | undefined | description text directly below title | -| descriptionDetails | string | false | undefined | details text directly below description | -| details | string | false | undefined | details text at bottom left of component | -| provider | [Provider](?path=/docs/components-provider--provider) | false | undefined | an object of [Provider](?path=/docs/components-provider--provider) properties to patch in | +| name | type | required | default | description | +| ------------------ | ------------------------------------------------- | -------- | --------- | ------------------------------------------------------------------------------------- | +| title | string | false | undefined | title text | +| description | string | false | undefined | description text directly below title | +| descriptionDetails | string | false | undefined | details text directly below description | +| details | string | false | undefined | details text at bottom left of component | +| provider | [Provider](?path=/docs/components-provider--docs) | false | undefined | an object of [Provider](?path=/docs/components-provider--docs) properties to patch in | ### Style Properties -| name | type | description | -| ----------------------- | ---------------- | ---------------------------------------------------------------------------------------- | -| detailsTextStyle | string \| object | text style for details | -| descriptionDetailsStyle | object | style for description details | -| providerStyle | object | style properties to pass along to the [Provider](?path=/docs/components-provider--basic) | +| name | type | description | +| ----------------------- | ---------------- | --------------------------------------------------------------------------------------- | +| detailsTextStyle | string \| object | text style for details | +| descriptionDetailsStyle | object | style for description details | +| providerStyle | object | style properties to pass along to the [Provider](?path=/docs/components-provider--docs) | ### Methods diff --git a/packages/@lightningjs/ui-components/src/components/NavigationManager/NavigationManager.mdx b/packages/@lightningjs/ui-components/src/components/NavigationManager/NavigationManager.mdx index dcc7a2d57..d8c0cbcef 100644 --- a/packages/@lightningjs/ui-components/src/components/NavigationManager/NavigationManager.mdx +++ b/packages/@lightningjs/ui-components/src/components/NavigationManager/NavigationManager.mdx @@ -25,8 +25,8 @@ import * as NavigationManagerStories from './NavigationManager.stories'; <Title /> -NavigationManager is a subclass of [FocusManager](?path=/docs/components-focusmanager--rows), -and parent class of [Row](?path=/docs/components-row--row) and [Column](?path=/docs/components-column--column). +NavigationManager is a subclass of [FocusManager](?path=/docs/components-focusmanager--docs), +and parent class of [Row](?path=/docs/components-row--docs) and [Column](?path=/docs/components-column--docs). It contains shared properties and methods primarily concerned with scrolling and layout. ## Source diff --git a/packages/@lightningjs/ui-components/src/components/Row/Row.mdx b/packages/@lightningjs/ui-components/src/components/Row/Row.mdx index 70317c07c..46f95757a 100644 --- a/packages/@lightningjs/ui-components/src/components/Row/Row.mdx +++ b/packages/@lightningjs/ui-components/src/components/Row/Row.mdx @@ -75,7 +75,7 @@ If multiple of these properties are enabled, the order of precedence from highes ### Style Properties -The Row component shares the same style properties as the ones listed in NavigationManager. For a detailed description, please refer to style properties section in the [NavigationManager component](?path=/docs/components-navigationmanager--row) +The Row component shares the same style properties as the ones listed in NavigationManager. For a detailed description, please refer to style properties section in the [NavigationManager component](?path=/docs/components-navigationmanager--docs#style-properties) ### Child Item Properties diff --git a/packages/@lightningjs/ui-components/src/components/Row/Row.stories.js b/packages/@lightningjs/ui-components/src/components/Row/Row.stories.js index 7d2501f41..52dd12e7e 100644 --- a/packages/@lightningjs/ui-components/src/components/Row/Row.stories.js +++ b/packages/@lightningjs/ui-components/src/components/Row/Row.stories.js @@ -458,7 +458,7 @@ AddingItems.argTypes = { lazyUpCount: { control: 'number', description: - 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details. <br/> **NOTE: changing this value requires refreshing the story to see its effect.**', + 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/components-navigationmanager--docs#properties) for more details. <br/> **NOTE: changing this value requires refreshing the story to see its effect.**', table: { defaultValue: { summary: 'undefined' } } @@ -466,7 +466,7 @@ AddingItems.argTypes = { lazyUpCountBuffer: { control: 'number', description: - 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details. <br/> **NOTE: changing this value requires refreshing the story to see its effect.**', + 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/components-navigationmanager--docs#properties) for more details. <br/> **NOTE: changing this value requires refreshing the story to see its effect.**', table: { defaultValue: { summary: 2 } } @@ -502,7 +502,7 @@ LazyUpCount.argTypes = { lazyUpCount: { control: 'number', description: - 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details. <br/> **NOTE: changing this value requires refreshing the story to see its effect.**', + 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/components-navigationmanager--docs#properties) for more details. <br/> **NOTE: changing this value requires refreshing the story to see its effect.**', table: { defaultValue: { summary: 'undefined' } } @@ -510,7 +510,7 @@ LazyUpCount.argTypes = { lazyUpCountBuffer: { control: 'number', description: - 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/navigation-navigationmanager--row#properties) for more details. <br/> **NOTE: changing this value requires refreshing the story to see its effect.**', + 'Used to calculate the number of items to display on the first render, see [Docs](?path=/docs/components-navigationmanager--docs#properties) for more details. <br/> **NOTE: changing this value requires refreshing the story to see its effect.**', table: { defaultValue: { summary: 2 } } diff --git a/packages/@lightningjs/ui-components/src/components/Shadow/Shadow.mdx b/packages/@lightningjs/ui-components/src/components/Shadow/Shadow.mdx index 6c712ea1c..a739614df 100644 --- a/packages/@lightningjs/ui-components/src/components/Shadow/Shadow.mdx +++ b/packages/@lightningjs/ui-components/src/components/Shadow/Shadow.mdx @@ -32,7 +32,7 @@ https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lig ## Usage -Can be applied manaully or at the theme via the DropShadow.extension. +Can be applied manually or at the theme via the DropShadow.extension. The `maskShadow` property is available to cut out the shape of the component from the shadow, but requires an additional draw call. diff --git a/packages/@lightningjs/ui-components/src/components/Tile/Tile.mdx b/packages/@lightningjs/ui-components/src/components/Tile/Tile.mdx index af39bac81..4b404223c 100644 --- a/packages/@lightningjs/ui-components/src/components/Tile/Tile.mdx +++ b/packages/@lightningjs/ui-components/src/components/Tile/Tile.mdx @@ -89,18 +89,18 @@ class Basic extends lng.Component { ### Properties -| name | type | required | default | description | -| ------------------ | ------- | -------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| artwork | object | false | undefined | Object containing all properties supported in the [Artwork component](?path=/docs/components-artwork--artwork) | -| badge | object | false | undefined | Object containing all properties supported in the [Badge component](?path=/docs/components-badge--text) | -| checkbox | object | false | undefined | Object containing all properties supported in the [Checkbox component](?path=/docs/components-checkbox--checkbox) | -| circle | boolean | false | undefined | If true, changes format of itemLayout to circle | -| label | object | false | undefined | Object containing all properties supported in the [Label component](?path=/docs/components-label--label) | -| logo | string | false | undefined | Source of logo | -| metadata | object | false | undefined | Object containing all properties supported in the [MetadataTile component](?path=/docs/components-metadatatile--metadata-tile)<br /> Can use a different Metadata component by passing in a 'type' and then that component's properties | -| metadataLocation | string | false | 'standard' | Controls where there metadata is displayed in relation to the Tile. Available values are 'standard' and 'inset' | -| persistentMetadata | boolean | false | false | Metadata will be shown at all times if set to true, otherwise it will only show when the Tile has focus | -| progressBar | object | false | undefined | Object containing all properties supported in the [ProgressBar component](?path=/docs/components-progressbar--progress-bar) | +| name | type | required | default | description | +| ------------------ | ------- | -------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| artwork | object | false | undefined | Object containing all properties supported in the [Artwork component](?path=/docs/components-artwork--docs) | +| badge | object | false | undefined | Object containing all properties supported in the [Badge component](?path=/docs/components-badge--docs) | +| checkbox | object | false | undefined | Object containing all properties supported in the [Checkbox component](?path=/docs/components-checkboxes--docs) | +| circle | boolean | false | undefined | If true, changes format of itemLayout to circle | +| label | object | false | undefined | Object containing all properties supported in the [Label component](?path=/docs/components-label--docs) | +| logo | string | false | undefined | Source of logo | +| metadata | object | false | undefined | Object containing all properties supported in the [MetadataTile component](?path=/docs/components-metadatatile--docs)<br /> Can use a different Metadata component by passing in a 'type' and then that component's properties | +| metadataLocation | string | false | 'standard' | Controls where there metadata is displayed in relation to the Tile. Available values are 'standard' and 'inset' | +| persistentMetadata | boolean | false | false | Metadata will be shown at all times if set to true, otherwise it will only show when the Tile has focus | +| progressBar | object | false | undefined | Object containing all properties supported in the [ProgressBar component](?path=/docs/components-progressbar--docs) | ### Style Properties diff --git a/packages/@lightningjs/ui-components/src/docs/Introduction.mdx b/packages/@lightningjs/ui-components/src/docs/Introduction.mdx index 5daa126c4..50980a91c 100644 --- a/packages/@lightningjs/ui-components/src/docs/Introduction.mdx +++ b/packages/@lightningjs/ui-components/src/docs/Introduction.mdx @@ -35,6 +35,6 @@ In **The Canvas** we can see how the component stands in isolation as well as ad With **The Docs** panel, we can read through the use case for the component, see how it is implemented in code, view some examples, and see a table of its configurable properties and styles. -For information on leveraging `lightning-ui-components` in your application, check out the [README.md](../?path=/story/docs-read-me--page). +For information on leveraging `lightning-ui-components` in your application, check out the [README.md](?path=/docs/docs-read-me--docs). NOTE: Most images used within these stories are pulled from [The Movie Database](https://www.themoviedb.org/). diff --git a/packages/@lightningjs/ui-components/src/docs/Storybook.mdx b/packages/@lightningjs/ui-components/src/docs/Storybook.mdx index ee781c549..927fdf297 100644 --- a/packages/@lightningjs/ui-components/src/docs/Storybook.mdx +++ b/packages/@lightningjs/ui-components/src/docs/Storybook.mdx @@ -81,7 +81,7 @@ onChange(value) { } ``` -For example, in our [Slider component](../?path=/story/utilities-slider--basic), when in the `focused` mode, if a user hits left or right on their keyboard, the value of the Slider changes accordingly. However, the Storybook control for the current `value` never updates. This puts the component and the control out of sync. The next time the user updates a control, the value will be reapplied, wiping out whatever was set via the keyboard interaction. +For example, in our [Slider component](?path=/docs/components-slider--docs), when in the `focused` mode, if a user hits left or right on their keyboard, the value of the Slider changes accordingly. However, the Storybook control for the current `value` never updates. This puts the component and the control out of sync. The next time the user updates a control, the value will be reapplied, wiping out whatever was set via the keyboard interaction. To keep the Slider control in sync, we used the `updateArgs` method. In Slider.js, the component emits a signal called "onChange" whenever its value is updated: diff --git a/packages/@lightningjs/ui-components/src/docs/Theming.mdx b/packages/@lightningjs/ui-components/src/docs/Theming.mdx index c21a725ba..ac98b9fad 100644 --- a/packages/@lightningjs/ui-components/src/docs/Theming.mdx +++ b/packages/@lightningjs/ui-components/src/docs/Theming.mdx @@ -203,7 +203,7 @@ MyComponent: { **As a WARNING, it is strongly discouraged to make changes to an instance of a component**. Doing so comes with risks given that this is an anti-pattern and no other components will be changed. -**We highly RECOMMEND** that if you want to make a global change to an existing theme, it is best to make a custom theme based off of one of the existing themes and then update relevant theme values. This is a great place to use componentConfig overrides and [extensions](../?path=/docs/docs-theming-extensions--page). +**We highly RECOMMEND** that if you want to make a global change to an existing theme, it is best to make a custom theme based off of one of the existing themes and then update relevant theme values. This is a great place to use componentConfig overrides and [extensions](?path=/docs/docs-theming-extensions--docs). Continuing with the `ProgressBar` example, let's summarize all the different ways you can change the `ProgressBar` color (`progressColor`) and how it will impact other components: diff --git a/packages/@lightningjs/ui-components/src/docs/ThemingComponentConfig.mdx b/packages/@lightningjs/ui-components/src/docs/ThemingComponentConfig.mdx index 7efedb7e5..e41af5ccc 100644 --- a/packages/@lightningjs/ui-components/src/docs/ThemingComponentConfig.mdx +++ b/packages/@lightningjs/ui-components/src/docs/ThemingComponentConfig.mdx @@ -44,7 +44,7 @@ componentConfig: { ## Tones -For a deeper dive on `tones`, see ["Tones"](../?path=/docs/docs-theming-tones--page). +For a deeper dive on `tones`, see ["Tones"](?path=/docs/docs-theming-tones--docs). The `tone` property expects a string which will determine the default color palette to apply to a component. Unless you have created a custom tone, this string should match one of the following: @@ -67,7 +67,7 @@ componentConfig: { ## Modes -For a deeper dive on `modes`, see ["Modes"](../?path=/docs/docs-theming-modes--page). +For a deeper dive on `modes`, see ["Modes"](?path=/docs/docs-theming-modes--docs). The `mode` property expects a string which will determine the default interaction state to apply to a component. By default, components are in the unfocused mode, but depending on the platform, can be switched into modes like: diff --git a/packages/@lightningjs/ui-components/src/docs/ThemingExtensions.mdx b/packages/@lightningjs/ui-components/src/docs/ThemingExtensions.mdx index dd1555b20..497b66290 100644 --- a/packages/@lightningjs/ui-components/src/docs/ThemingExtensions.mdx +++ b/packages/@lightningjs/ui-components/src/docs/ThemingExtensions.mdx @@ -28,7 +28,7 @@ The component library cannot account for every design imaginable. That's where e For example, let's say a `Tile` element needs to have a certain feature. An extension containing that feature can be created and added to the `Tile` element without the developer having to make an entirely new component. -Overall, extensions make LUI as flexible with [theming](../?path=/story/docs-theming-overview--page) as possible. +Overall, extensions make LUI as flexible with [theming](?path=/docs/docs-theming-overview--docs) as possible. ### `withExtensions` Mixin diff --git a/packages/@lightningjs/ui-components/src/docs/ThemingHierarchy.mdx b/packages/@lightningjs/ui-components/src/docs/ThemingHierarchy.mdx index e966850bf..7608e24ad 100644 --- a/packages/@lightningjs/ui-components/src/docs/ThemingHierarchy.mdx +++ b/packages/@lightningjs/ui-components/src/docs/ThemingHierarchy.mdx @@ -30,7 +30,7 @@ The above flowchart serves to demonstrate how the different theming-related conc ## Component Style File -A component's style file can consist of a base style object, a [tone style object](path=/docs/docs-theming-tone--page), and a [mode style object](path=/docs/docs-theming-mode--page). These three objects are deep merged, in that order, to create a single style object that serves as the foundation for the final component style object. +A component's style file can consist of a base style object, a [tone style object](?path=/docs/docs-theming-tones--docs), and a [mode style object](?path=/docs/docs-theming-modes--docs). These three objects are deep merged, in that order, to create a single style object that serves as the foundation for the final component style object. ## Theme's _componentConfig_ @@ -38,7 +38,7 @@ Themes can have a `componentConfig` object that has nested component style objec ## In-line Component Style Overrides -When utilizing components within your application, you can use [withThemeStyles](?path=/docs/utilities-withthemestyles--with-theme-styles) to override particular style values in just that use case. Those custom styles are deep-merged with the resulting object from the previous steps. +When utilizing components within your application, you can use [withThemeStyles](?path=/docs/utilities-withthemestyles--docs) to override particular style values in just that use case. Those custom styles are deep-merged with the resulting object from the previous steps. ## Extensions diff --git a/packages/@lightningjs/ui-components/src/docs/ThemingMode.mdx b/packages/@lightningjs/ui-components/src/docs/ThemingMode.mdx index 22b0ab355..a639335ea 100644 --- a/packages/@lightningjs/ui-components/src/docs/ThemingMode.mdx +++ b/packages/@lightningjs/ui-components/src/docs/ThemingMode.mdx @@ -36,7 +36,7 @@ By default each component will attempt to find a `focused` mode when thte compon ### Theme Level -You can set any component's default mode by specifying it in the `componentConfig` property of your theme. For a deeper dive on `tones`, see ["Component Config"](../?path=/docs/docs-theming-component-config--page). +You can set any component's default mode by specifying it in the `componentConfig` property of your theme. For a deeper dive on `modes`, see ["Component Config"](?path=/docs/docs-theming-component-config--docs). {/* prettier-ignore */} ```js diff --git a/packages/@lightningjs/ui-components/src/docs/ThemingStorybook.mdx b/packages/@lightningjs/ui-components/src/docs/ThemingStorybook.mdx index 055da14ca..d3085c07c 100644 --- a/packages/@lightningjs/ui-components/src/docs/ThemingStorybook.mdx +++ b/packages/@lightningjs/ui-components/src/docs/ThemingStorybook.mdx @@ -41,7 +41,7 @@ Choosing a theme target at a **global level** means that the theme values you ha Choosing a theme target at a **component level** means that every instance of a particular component type will use the new values set by the controls, but the changes will not affect other types of components referencing the same theme values. -To learn more, check out ["Theming at a Global versus Component Level"](../?path=/story/docs-theming-overview--page#theming-at-a-global-versus-component-level). +To learn more, check out ["Theming at a Global versus Component Level"](?path=/docs/docs-theming-overview--docs#theming-at-a-global-versus-component-level). ## Downloading JSON data diff --git a/packages/@lightningjs/ui-components/src/docs/ThemingSubTheming.mdx b/packages/@lightningjs/ui-components/src/docs/ThemingSubTheming.mdx index 43e77fba8..db3d2d211 100644 --- a/packages/@lightningjs/ui-components/src/docs/ThemingSubTheming.mdx +++ b/packages/@lightningjs/ui-components/src/docs/ThemingSubTheming.mdx @@ -42,7 +42,7 @@ Likewise, if there are multiple elements to a page, we can set a certain element A sub-theme can't exist without a parent theme thus we first need to specify which theme our component(s) should be using. -Refer to [theming](../?path=/story/docs-theming-overview--page) for how to set the theme. +Refer to [theming](?path=/docs/docs-theming-overview--docs) for how to set the theme. > Reminder that without a specified theme, the Base open-source theme will be used by default. diff --git a/packages/@lightningjs/ui-components/src/docs/ThemingTone.mdx b/packages/@lightningjs/ui-components/src/docs/ThemingTone.mdx index 3207a22b6..3777f4650 100644 --- a/packages/@lightningjs/ui-components/src/docs/ThemingTone.mdx +++ b/packages/@lightningjs/ui-components/src/docs/ThemingTone.mdx @@ -32,7 +32,7 @@ A component's tone can be set at the theme or component level. It is also possib ### Theme Level -You may change the default tone across all LUI components by setting this value in your theme file's `componentConfig`. For a deeper dive on `tones`, see ["Component Config"](../?path=/docs/docs-theming-component-config--page). +You may change the default tone across all LUI components by setting this value in your theme file's `componentConfig`. For a deeper dive on `tones`, see ["Component Config"](?path=/docs/docs-theming-component-config--docs). For example, if you want to use a brand tone on all `ProgressBar` components, add ProgressBar's tone to `componentConfig`: diff --git a/packages/@lightningjs/ui-components/src/mixins/withSelections/withSelections.mdx b/packages/@lightningjs/ui-components/src/mixins/withSelections/withSelections.mdx index 2720991fd..f71c033b7 100644 --- a/packages/@lightningjs/ui-components/src/mixins/withSelections/withSelections.mdx +++ b/packages/@lightningjs/ui-components/src/mixins/withSelections/withSelections.mdx @@ -64,7 +64,7 @@ class Example extends lng.Component { <Canvas of={withSelectionsStories.withSelections} /> -Take a look at the preview above. The row of modified [Buttons](?path=/docs/components-button--button) has navigation managed by the [Row](?path=/docs/components-row--row) component, which is also wrapped in `withSelections`. Navigate with the arrow keys to see the `focus` state change for each [Button](?path=/docs/components-button--button). Hit the `Enter` key to set the currently focused `Button` to be `isSelected`, giving it an underline. Also notice that underline of the previously selected `Button` is removed. +Take a look at the preview above. The row of modified [Buttons](?path=/docs/components-button--docs) has navigation managed by the [Row](?path=/docs/components-row--docs) component, which is also wrapped in `withSelections`. Navigate with the arrow keys to see the `focus` state change for each [Button](?path=/docs/components-button--docs). Hit the `Enter` key to set the currently focused `Button` to be `isSelected`, giving it an underline. Also notice that underline of the previously selected `Button` is removed. In this example, `withSelections` is expecting the `Row` component to have a property called `items` which contains components that can handle an `isSelected` property. Fortunately, this describes the `Row` and `UnderlineButton` components perfectly! If your components are working with different property names, they can be customized with the `options` property. See the [Customization](#customization) section for options. diff --git a/packages/@lightningjs/ui-components/src/mixins/withThemeStyles/withThemeStyles.mdx b/packages/@lightningjs/ui-components/src/mixins/withThemeStyles/withThemeStyles.mdx index 8eb653bbe..68dba1c49 100644 --- a/packages/@lightningjs/ui-components/src/mixins/withThemeStyles/withThemeStyles.mdx +++ b/packages/@lightningjs/ui-components/src/mixins/withThemeStyles/withThemeStyles.mdx @@ -59,7 +59,7 @@ class BlueBox extends Box { } ``` -This is fine if you want a box that is always blue, but what if you want to change the color of your component without having to extend it and override that single value? Or if you want a box that changes based on certain factors, such as its [mode](?path=/docs/docs-theming-mode--page)? Or what if you want to have multiple color palettes (in LUI, these are called [tones](?path=/docs/docs-theming-tone--page)) that you can switch between depending on if your application is in light or dark mode? +This is fine if you want a box that is always blue, but what if you want to change the color of your component without having to extend it and override that single value? Or if you want a box that changes based on certain factors, such as its [mode](?path=/docs/docs-theming-modes--docs)? Or what if you want to have multiple color palettes (in LUI, these are called [tones](?path=/docs/docs-theming-tones--docs)) that you can switch between depending on if your application is in light or dark mode? By utilizing `withThemeStyles`, you can tie the color of your box to the tokens used in your theme or a single style object. The preferred way of accomplishing this is by extending the `Base` component, which utilizes `withThemeStyles` and saves you from additional setup. @@ -143,7 +143,7 @@ In both cases, you'll notice that there is a `__componentName` getter in our `Bo ### Mode Changes -Instead of extending a component to access the focus or unfocus methods of a component, or to add any custom functionality for a specific mode, you can tap into "on" methods for mode changes. Similarly to the `on[KeyName]` methods exposed via the [withHandleKey](?path=/docs/utilities-withhandlekey--with-handle-key) mixin, all mode changes are linked to `on[ModeName]` methods, which are triggered when the `mode` of the component is set to a new value. +Instead of extending a component to access the focus or unfocus methods of a component, or to add any custom functionality for a specific mode, you can tap into "on" methods for mode changes. Similarly to the `on[KeyName]` methods exposed via the [withHandleKey](?path=/docs/utilities-withhandlekey--docs) mixin, all mode changes are linked to `on[ModeName]` methods, which are triggered when the `mode` of the component is set to a new value. For example, if a component has an `unfocused`, `focused`, and `disabled` mode, the `onUnfocused`, `onFocused`, and `onDisabled` methods will be called on change to the associated mode. Any custom modes beyond these three will also be added to the method list. When using a component, all of those methods can be accessed and set like other component properties, like this: @@ -158,4 +158,4 @@ class NewComponent extends lng.Component { } ``` -For more information on all of the ways you can set up your styles to fully utilize this mixin, read through the [Theming Documentation](?path=/docs/docs-theming-overview--page). +For more information on all of the ways you can set up your styles to fully utilize this mixin, read through the [Theming Documentation](?path=/docs/docs-theming-overview--docs). diff --git a/packages/apps/lightning-ui-docs/src/Contributing.mdx b/packages/apps/lightning-ui-docs/src/Contributing.mdx index ce5a3fc1d..28237796f 100644 --- a/packages/apps/lightning-ui-docs/src/Contributing.mdx +++ b/packages/apps/lightning-ui-docs/src/Contributing.mdx @@ -54,7 +54,7 @@ The following is a set of guidelines for contributing to `@lightningjs/ui-compon **Documentation** -- [See the README for setup help](../?path=/story/docs-read-me--page) +- [See the README for setup help](?path=/docs/docs-read-me--docs) - [See Storybook for component docs with live examples](https://rdkcentral.github.io/Lightning-UI-Components/) **Discuss on Slack**