cerner · sycombs · Mar 22, 2024 · Mar 22, 2024 · Mar 22, 2024 · Mar 22, 2024
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Fixed typos and imports in `terra-list` docs.
+
 ## 1.68.0 - (March 20, 2024)
 
 * Added

@@ -18,9 +18,10 @@ import ListPropsTable from 'terra-list/lib/List?dev-site-props-table';
 
 The Terra List is a structural component to vertically arrange content within list/list items.
 
-If a list implementation contains selectable list options the role prop should be set to "listbox" for accesibility.
+If a list implementation contains selectable list options the role prop should be set to "listbox" for accessibility.
 
-Two padding variants are provide for list item content, standard and compact. If different padding is desired use the defaulted style of 'none' and set the padding on the list item's child content with your own css values, preferrably themeable variables.
+Two padding variants are provided for list item content, standard and compact.
+If different padding is desired, use the default style of 'none' and set the padding on the list item's child content with the custom css values, preferrably themeable variables.
 
 ## Getting Started
 

@@ -10,12 +10,15 @@ import ListItemPropsTable from 'terra-list/lib/ListItem?dev-site-props-table';
 
 # List Item
 
-The list item provides a pattern for selection/selectability for li surrounded child content. Whenever, the list item has a prop `isSelectable=true` then `aria-label` must be provided to List for accessibility.  The onSelect event is the primary means for interaction, as it yields the associated metaData when valid selection occurs, though individual onClick and onKeyDown events can be applied through the use of customProps if greater granularity is required.
+The list item provides a pattern for selection/selectability for `<li>`-encapsulated child content.
+When the list item has `isSelectable=true`, then `aria-label` must be provided to List for accessibility.
+The onSelect event is the primary means for interaction, as it yields the associated metaData when valid selection occurs,
+though individual onClick and onKeyDown events can be applied through the use of customProps if greater granularity is required.
 
 ## Usage
 
 ```jsx
-import List, { Item } from 'terra-list/lib/List';
+import List, { Item } from 'terra-list';
 ```
 
 ## Examples

@@ -13,7 +13,7 @@ The list section component creates a section header and layouts it out with the
 ## Usage
 
 ```jsx
-import List, { Item, Section } from 'terra-list/lib/List';
+import List, { Item, Section } from 'terra-list';
 ```
 
 ## Examples

@@ -15,7 +15,7 @@ When consumed by itself as an individual list item avoid enabling the collapsibl
 ## Usage
 
 ```jsx
-import List, { SectionHeader } from 'terra-list/lib/List';
+import List, { SectionHeader } from 'terra-list';
 ```
 
 ## Examples

@@ -13,7 +13,7 @@ The list subsection component creates a subsection header and layouts it out wit
 ## Usage
 
 ```jsx
-import List, { Item, Subsection } from 'terra-list/lib/List';\
+import List, { Item, Subsection } from 'terra-list';
 ```
 
 ## Examples

@@ -15,7 +15,7 @@ When consumed by itself as an individual list item avoid enabling the collapsibl
 ## Usage
 
 ```jsx
-import List, { SubsectionHeader } from 'terra-list/lib/List';
+import List, { SubsectionHeader } from 'terra-list';
 ```
 
 ## Examples

@@ -1,5 +1,5 @@
 import React from 'react';
-import List, { Item } from 'terra-list/lib/index';
+import List, { Item } from 'terra-list';
 import { Placeholder } from '@cerner/terra-docs';
 import VisuallyHiddenText from 'terra-visually-hidden-text';
 import classNames from 'classnames/bind';

@@ -1,5 +1,5 @@
 import React from 'react';
-import List, { Item } from 'terra-list/lib/index';
+import List, { Item } from 'terra-list';
 import { Placeholder } from '@cerner/terra-docs';
 import classNames from 'classnames/bind';
 import styles from './ListDocCommon.module.scss';

@@ -1,5 +1,5 @@
 import React from 'react';
-import List, { Item } from 'terra-list/lib/index';
+import List, { Item } from 'terra-list';
 import { Placeholder } from '@cerner/terra-docs';
 import classNames from 'classnames/bind';
 import styles from './ListDocCommon.module.scss';

@@ -1,5 +1,5 @@
 import React from 'react';
-import List, { Item } from 'terra-list/lib/index';
+import List, { Item } from 'terra-list';
 import { Placeholder } from '@cerner/terra-docs';
 import classNames from 'classnames/bind';
 import styles from './ListDocCommon.module.scss';

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import List, { Item } from 'terra-list/lib/index';
+import List, { Item } from 'terra-list';
 import { Placeholder } from '@cerner/terra-docs';
 import classNames from 'classnames/bind';
 import styles from './ListDocCommon.module.scss';

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import List, { Item } from 'terra-list/lib/index';
+import List, { Item } from 'terra-list';
 import classNames from 'classnames/bind';
 import Checkbox from 'terra-form-checkbox';
 import styles from './ListDocCommon.module.scss';

@@ -1,5 +1,5 @@
 import React from 'react';
-import List, { Item } from 'terra-list/lib/index';
+import List, { Item } from 'terra-list';
 import { Placeholder } from '@cerner/terra-docs';
 import classNames from 'classnames/bind';
 import styles from './ListDocCommon.module.scss';

@@ -1,5 +1,5 @@
 import React from 'react';
-import List, { Item } from 'terra-list/lib/index';
+import List, { Item } from 'terra-list';
 import { Placeholder } from '@cerner/terra-docs';
 import classNames from 'classnames/bind';
 import styles from './ListDocCommon.module.scss';

@@ -1,5 +1,5 @@
 import React from 'react';
-import List, { Item } from 'terra-list/lib/index';
+import List, { Item } from 'terra-list';
 import { Placeholder } from '@cerner/terra-docs';
 import classNames from 'classnames/bind';
 import styles from './ListDocCommon.module.scss';

@@ -1,5 +1,5 @@
 import React from 'react';
-import List, { Item } from 'terra-list/lib/index';
+import List, { Item } from 'terra-list';
 import { Placeholder } from '@cerner/terra-docs';
 import classNames from 'classnames/bind';
 import styles from './ListDocCommon.module.scss';

@@ -1,5 +1,5 @@
 import React from 'react';
-import List, { Item, Section } from 'terra-list/lib/index';
+import List, { Item, Section } from 'terra-list';
 import { Placeholder } from '@cerner/terra-docs';
 import classNames from 'classnames/bind';
 import styles from './ListDocCommon.module.scss';

@@ -1,5 +1,5 @@
 import React from 'react';
-import List, { SectionHeader } from 'terra-list/lib/index';
+import List, { SectionHeader } from 'terra-list';
 
 const ListSectionHeaderExample = () => (
   <List>

@@ -1,5 +1,5 @@
 import React from 'react';
-import List, { Item, Subsection } from 'terra-list/lib/index';
+import List, { Item, Subsection } from 'terra-list';
 import { Placeholder } from '@cerner/terra-docs';
 import classNames from 'classnames/bind';
 import styles from './ListDocCommon.module.scss';

@@ -1,5 +1,5 @@
 import React from 'react';
-import List, { SubsectionHeader } from 'terra-list/lib/index';
+import List, { SubsectionHeader } from 'terra-list';
 
 const ListSubsectionHeaderExample = () => (
   <List>

@@ -1,5 +1,5 @@
 import React from 'react';
-import List, { Item, Utils } from 'terra-list/lib/index';
+import List, { Item, Utils } from 'terra-list';
 import { Placeholder } from '@cerner/terra-docs';
 import classNames from 'classnames/bind';
 import mockData from './mock-data/mock-select';

@@ -1,5 +1,5 @@
 import React from 'react';
-import List, { Item } from 'terra-list/lib/index';
+import List, { Item } from 'terra-list';
 import { Placeholder } from '@cerner/terra-docs';
 import classNames from 'classnames/bind';
 import mockData from './mock-data/mock-select';
@@ -58,7 +58,8 @@ class SingleSelectList extends React.Component {
         <p>
           <b>Note</b>
           {' '}
-          Tab key Navigation is disabled for below list items. Inorder to interact with list-item user should set programmatic focus to one of the list item depending on the required scenario.
+          Tab key navigation is disabled for the below list items.
+          In scenarios where tab key navigation is disabled, consumers should enable interaction by setting programmatic focus to one of the list items.
           {' '}
         </p>
         <button type="button" onClick={this.handleOnClick}>Select Item 0</button>