AdvancedTable: Website documentation (#2628)

Co-authored-by: Dylan Hyun <dylan.hyun@hashicorp.com>
Co-authored-by: Kristin Bradley <kristin.bradley@hashicorp.com>
Co-authored-by: Andrew Gendel <124841193+andgen404@users.noreply.github.com>
Co-authored-by: Jory Tindall <jory.tindall@hashicorp.com>
Co-authored-by: Heather Larsen <hlarsen@hashicorp.com>
Co-authored-by: Majed <156002572+majedelass@users.noreply.github.com>
Co-authored-by: LilithJames-HDS <lilith.james@hashicorp.com>

Author: 8 people

website/app/styles/app.scss

@@ -30,6 +30,7 @@
 @use "pages/foundations/icon" as foundations-icon;
 @use "pages/foundations/typography" as foundations-typography;
 @use "pages/components/accordion" as components-accordion;
+@use "pages/components/advanced-table" as components-advanced-table;
 @use "pages/components/alert" as components-alert;
 @use "pages/components/app-footer" as components-app-footer;
 @use "pages/components/application-state" as components-application-state;

website/app/styles/pages/components/advanced-table.scss

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// COMPONENTS > TABLE > ADVANCEDTABLE
+
+#show-content-components-table-advanced-table {
+  .doc-advanced-table-scrollable-wrapper {
+    overflow-x: auto;
+  }
+
+  .doc-advanced-table-vertical-scrollable-wrapper {
+    max-height: 500px;
+    overflow-y: auto;
+  }
+
+  .doc-advanced-table-multiselect-with-pagination-demo {
+    .hds-advanced-table + .hds-pagination {
+      margin-top: 16px;
+    }
+  }
+}

website/app/styles/pages/components/table.scss

@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-// COMPONENTS > TABLE
+// COMPONENTS > TABLE > TABLE
 
-#show-content-components-table {
+#show-content-components-table-table {
   .doc-table-valign-demo {
     display: flex;
     gap: 5px;

website/docs/components/copy/snippet/partials/guidelines/guidelines.md

@@ -28,7 +28,7 @@ The Copy Snippet comes in two colors: `primary` and `secondary`
 
 !!! Do
 
-When multiple Copy Snippets are needed in a single page, such as in a [Table](/components/table), consider using the `secondary` color to reduce the prominence of each Copy Snippet.
+When multiple Copy Snippets are needed in a single page, such as in a [Table](/components/table/table), consider using the `secondary` color to reduce the prominence of each Copy Snippet.
 
 ![Example of the Copy Snippet component in a table](/assets/components/copy/copy-snippet-table-do.png)
 

website/docs/components/dropdown/partials/code/how-to-use.md

@@ -51,7 +51,7 @@ Alternatively, pass `secondary` to `@color` to display a secondary button with a
 
 #### ToggleIcon as overflow menu
 
-Overflow menus are often found in the last column of a [Tables](/components/table). This is the only use case where it is acceptable to use
+Overflow menus are often found in the last column of a [Table](/components/table/table). This is the only use case where it is acceptable to use
 `@hasChevron={{false}}`. `@text` is still required, because it supplies the `aria-label` for ToggleIcon.
 
 ```handlebars

website/docs/components/dropdown/partials/guidelines/guidelines.md

@@ -76,7 +76,7 @@ ToggleIcons come in two sizes: **small** and **medium**.
 
 !!! Info
 
-While we provide a small size variant, we recommend only using this for the Overflow menu within [Tables](/components/table) because the icons and images start to become unrecognizable in smaller sizes.
+While we provide a small size variant, we recommend only using this for the Overflow menu within [Tables](/components/table/table) because the icons and images start to become unrecognizable in smaller sizes.
 !!!
 
 <Doc::Layout @spacing="24px">
@@ -104,7 +104,7 @@ ToggleButtons require a visible chevron to indicate interactivity and provide di
 
 ![Example of open and closed dropdowns](/assets/components/dropdown/dropdown-button-chevrons.png =286x*)
 
-We strongly recommend providing visible chevrons on most instances of ToggleIcons to indicate interactivity. That said, it’s common to see ToggleIcons that use the `more-horizontal` icon without chevrons. Their placement, usually in the last column of a [Table](/components/table), is typically indicative of this type of interaction.
+We strongly recommend providing visible chevrons on most instances of ToggleIcons to indicate interactivity. That said, it’s common to see ToggleIcons that use the `more-horizontal` icon without chevrons. Their placement, usually in the last column of a [Table](/components/table/table), is typically indicative of this type of interaction.
 
 ![Example of open and closed dropdowns](/assets/components/dropdown/dropdown-icon-chevrons.png =750x*)
 

website/docs/components/pagination/index.md

@@ -10,7 +10,8 @@ links:
   github: >-
     https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/pagination
 related:
-  - components/table
+  - components/table/table
+  - components/table/advanced-table
   - patterns/filter-patterns
   - patterns/table-multi-select
 previewImage: assets/illustrations/components/pagination.jpg

website/docs/components/pagination/partials/code/how-to-use.md

@@ -148,7 +148,7 @@ The reason for using a consumer-side function to determine the `query` argument
 
 Even if the Pagination is based on routing, the `onPageChange/onPageSizeChange` callbacks are still available and can be used to respond to the users’ actions (eg. for logging, tracking, etc.).
 
-Below you can find an example of an integration between the sortable [`Table`](/components/table) component and the `Pagination::Numbered` component that uses query parameters in the URL to preserve the UI state:
+Below you can find an example of an integration between the sortable [`Table`](/components/table/table) component and the `Pagination::Numbered` component that uses query parameters in the URL to preserve the UI state:
 
 ```handlebars
 <div class="doc-pagination-table-demo">
@@ -271,7 +271,7 @@ The reason for using a consumer-side function to determine the `query` argument
 
 Even if the Pagination is based on routing, the `onPageChange/onPageSizeChange` callbacks are still available and can be used to respond to the users' actions (eg. for logging, tracking, etc.).
 
-Below you can find an example of an integration between the [`Table`](/components/table) component and the `Pagination::Compact` component that uses query parameters in the URL to preserve the UI state:
+Below you can find an example of an integration between the [`Table`](/components/table/table) component and the `Pagination::Compact` component that uses query parameters in the URL to preserve the UI state:
 
 ```handlebars
 <div class="doc-pagination-table-demo">