fix(docs): clean up links in docs (#525)

* fix(docs): clean up links in docs

* fix(docs): fix typos

* fix: doc updates

Co-authored-by: Carolyn Moneymaker <[email protected]>

---------

Co-authored-by: Carolyn Moneymaker <[email protected]>

Author: ImCoolNowRight

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**

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,35 +109,41 @@ 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
+    }
   }
 }
 ```
 
 ##### 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)
 
 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';
   }
 }
 ```
 
 ##### 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).

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
 

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';

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';

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: <DocsLink id="lng.Transition" />
+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
 

packages/@lightningjs/ui-components/src/components/Column/Column.stories.js

@@ -600,15 +600,15 @@ 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' }
     }
   },
   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 }
     }
@@ -708,15 +708,15 @@ 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' }
     }
   },
   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 }
     }

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                         |
 | --------- | ------ | ----------------------------------- |

packages/@lightningjs/ui-components/src/components/ControlRow/ControlRow.mdx

@@ -25,7 +25,7 @@ import * as ControlRowStories from './ControlRow.stories';
 <Title />
 
 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                                                                                   |

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                                                                                             |