docs: Update List documentation to include subcomponents

packages/styleguide/src/lib/Foundations/System/Props/List.mdx

@@ -17,7 +17,7 @@ export const parameters = {
 
 List props control the appearance of ordered and unordered lists when components are rendered as `ul` or `ol` elements. These properties let you customize bullet styles, list positioning, and even use custom images as list markers, giving you full control over list presentation.
 
-For more advanced list features, refer to the <LinkTo id="Organisms/Lists & Tables/List">List component</LinkTo>.
+For more advanced list features, refer to the <LinkTo id="Organisms/Lists & Tables/List/List">List component</LinkTo>.
 
 ```tsx
 import styled from '@emotion/styled';

packages/styleguide/src/lib/Molecules/AccordionDeprecated/AccordionDeprecated.mdx

@@ -25,7 +25,7 @@ such as a "hint" section in the LE or a list of department jobs on a careers pag
     <>
       Note: This component is deprecated. For similar functionality, consider
       using <LinkTo id="Molecules/Disclosure">Disclosure</LinkTo> or a{' '}
-      <LinkTo id="Organisms/Lists & Tables/List">List </LinkTo> component.
+      <LinkTo id="Organisms/Lists & Tables/List/List">List </LinkTo> component.
     </>
   }
 />

packages/styleguide/src/lib/Molecules/Disclosure/Disclosure.mdx

@@ -34,7 +34,7 @@ Use a `Disclosure` to progressively reveal information, giving users the option
 
 ### When NOT to use:
 
-- If you need to use multiple `Disclosure` components, use the <LinkTo id="Organisms/Lists & Tables/List">List</LinkTo> component component with `<ExpandableRowClick>` for the time being.
+- If you need to use multiple `Disclosure` components, use the <LinkTo id="Organisms/Lists & Tables/List/List">List</LinkTo> component component with `<ExpandableRowClick>` for the time being.
 
 ## Variants
 

packages/styleguide/src/lib/Organisms/Lists & Tables/About.mdx

@@ -8,7 +8,7 @@ import {
 
 import { parameters as dataListParameters } from './DataList/DataList.mdx';
 import { parameters as dataTableParameters } from './DataTable/DataTable.mdx';
-import { parameters as listParameters } from './List/List.mdx';
+import { parameters as listParameters } from './List/About.mdx';
 
 export const parameters = {
   id: 'Organisms/Lists&Tables',

packages/styleguide/src/lib/Organisms/Lists & Tables/List/About.mdx

@@ -0,0 +1,40 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+import {
+  AboutHeader,
+  addParentPath,
+  TableOfContents,
+} from '~styleguide/blocks';
+
+import { parameters as listParameters } from './List.mdx';
+import { parameters as listColParameters } from './ListCol/ListCol.mdx';
+import { parameters as listRowParameters } from './ListRow/ListRow.mdx';
+import { parameters as tableHeaderParameters } from './TableHeader/TableHeader.mdx';
+
+export const parameters = {
+  id: 'Organisms/Lists & Tables/List',
+  title: 'List',
+  subtitle:
+    'List rows, columns, and table-style layouts for repeated, structured content.',
+};
+
+<Meta title="Organisms/Lists & Tables/List/About" />
+
+<AboutHeader {...parameters} />
+
+`List`, the component you need to build a list or table. It provides context to its children rows, columns, and the header to share spacing, variant, and responsive layout information.
+
+Use `ListRow` to compose a row of `ListCol` cells.
+
+When building a table, use `TableHeader` for the header row. It's the `thead` row, stays sticky when the list scrolls, and uses the same settings as the rows so the header matches the rows.
+
+Check out the documentation below to see how to use `List`, `ListRow`, `ListCol`, and `TableHeader` to build a list or table.
+
+<TableOfContents
+  links={addParentPath(parameters.id, [
+    listParameters,
+    listRowParameters,
+    listColParameters,
+    tableHeaderParameters,
+  ])}
+/>