diff --git a/website/docs/components/accordion/index.md b/website/docs/components/accordion/index.md index 055a612330e..d701b116df7 100644 --- a/website/docs/components/accordion/index.md +++ b/website/docs/components/accordion/index.md @@ -1,15 +1,31 @@ --- title: Accordion -description: An accordion is a vertically stacked list of container-like toggles that reveal or hide associated sections of content. +description: >- + An accordion is a vertically stacked list of container-like toggles that + reveal or hide associated sections of content. caption: A list of toggles that reveal or hide associated content. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67221-87751&t=gWdKy44MzTP4cTRo-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/accordion -related: ['components/reveal','components/flyout','components/modal','components/tabs'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67221-87751&t=gWdKy44MzTP4cTRo-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/accordion +related: + - components/reveal + - components/flyout + - components/modal + - components/tabs previewImage: assets/illustrations/components/accordion.jpg navigation: hidden: false - keywords: ['toggle', 'disclosure', 'details', 'reveal', 'list', 'summary', 'expand', 'collapse'] + keywords: + - toggle + - disclosure + - details + - reveal + - list + - summary + - expand + - collapse ---
diff --git a/website/docs/components/alert/index.md b/website/docs/components/alert/index.md index 8494e30e065..705070f5a94 100644 --- a/website/docs/components/alert/index.md +++ b/website/docs/components/alert/index.md @@ -3,12 +3,23 @@ title: Alert description: Displays a brief message without interrupting a user’s task. caption: Displays a brief message without interrupting a user’s task. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67382-70353&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/alert -related: ['components/modal', 'components/toast'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67382-70353&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/alert +related: + - components/modal + - components/toast previewImage: assets/illustrations/components/alert.jpg navigation: - keywords: ['alert', 'toast', 'notification', 'banner', 'message'] + keywords: + - alert + - toast + - notification + - banner + - message +status: + updated: 4.15.0 ---
diff --git a/website/docs/components/app-footer/index.md b/website/docs/components/app-footer/index.md index c4e3099dc00..eb480d49dd2 100644 --- a/website/docs/components/app-footer/index.md +++ b/website/docs/components/app-footer/index.md @@ -1,14 +1,28 @@ --- title: App Footer -description: A footer that appears on every screen to display supplementary information and links. +description: >- + A footer that appears on every screen to display supplementary information and + links. caption: Displays supplementary information and links for the application. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67351-171799&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/app-footer -related: ['layouts/app-frame', 'components/side-nav'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67351-171799&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/app-footer +related: + - layouts/app-frame + - components/side-nav previewImage: assets/illustrations/components/app-footer.jpg navigation: - keywords: ['footer', 'copyright', 'support', 'terms', 'privacy', 'security', 'accessibility', 'system status'] + keywords: + - footer + - copyright + - support + - terms + - privacy + - security + - accessibility + - system status ---
@@ -28,4 +42,4 @@ navigation:
@include "partials/accessibility/accessibility.md" -
\ No newline at end of file +
diff --git a/website/docs/components/app-header/index.md b/website/docs/components/app-header/index.md index 736f454ab98..1d9d66117ba 100644 --- a/website/docs/components/app-header/index.md +++ b/website/docs/components/app-header/index.md @@ -1,15 +1,27 @@ --- title: App Header -description: A header navigation that provides access to global elements and application utilities. +description: >- + A header navigation that provides access to global elements and application + utilities. caption: Used as a global and utility navigation within an application. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67337-16625&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/app-header -related: ['components/side-nav', 'components/app-footer', 'layouts/app-frame'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67337-16625&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/app-header +related: + - components/side-nav + - components/app-footer + - layouts/app-frame previewImage: assets/illustrations/components/app-header.jpg navigation: hidden: true - keywords: ['navigation', 'header', 'navbar', 'menubar', 'topbar'] + keywords: + - navigation + - header + - navbar + - menubar + - topbar ---
diff --git a/website/docs/components/app-side-nav/index.md b/website/docs/components/app-side-nav/index.md index 47f6a394664..8d90438f4ea 100644 --- a/website/docs/components/app-side-nav/index.md +++ b/website/docs/components/app-side-nav/index.md @@ -1,15 +1,27 @@ --- title: App Side Nav description: Used as a contextual navigation for subpages within an application. -caption: A side navigation menu that provides access to subpages within a product or application. +caption: >- + A side navigation menu that provides access to subpages within a product or + application. links: - figma: - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/app-side-nav -related: ['components/side-nav', 'components/breadcrumb','components/tabs','layouts/app-frame','components/app-header'] + figma: null + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/app-side-nav +related: + - components/side-nav + - components/breadcrumb + - components/tabs + - layouts/app-frame + - components/app-header previewImage: assets/illustrations/components/app-side-nav.jpg navigation: hidden: true - keywords: ['navigation', 'side navigation', 'sidenav', 'sidebar'] + keywords: + - navigation + - side navigation + - sidenav + - sidebar ---
diff --git a/website/docs/components/application-state/index.md b/website/docs/components/application-state/index.md index 6fc36c50fe9..246f2f67fa6 100644 --- a/website/docs/components/application-state/index.md +++ b/website/docs/components/application-state/index.md @@ -3,11 +3,16 @@ title: Application State description: An informational element that displays the current state of the application. caption: An informational element that displays the current state of the application. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67278-131631&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/application-state + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67278-131631&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/application-state previewImage: assets/illustrations/components/application-state.jpg navigation: - keywords: ['empty state', 'error state', 'message'] + keywords: + - empty state + - error state + - message ---
diff --git a/website/docs/components/badge-count/index.md b/website/docs/components/badge-count/index.md index 8979cc4ed22..238aa7cf7e0 100644 --- a/website/docs/components/badge-count/index.md +++ b/website/docs/components/badge-count/index.md @@ -1,14 +1,24 @@ --- title: Badge Count -description: A numeric label used to display things like version number or collection enumerations. +description: >- + A numeric label used to display things like version number or collection + enumerations. caption: A non-interactive numeric label. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67246-60779&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/badge-count -related: ['components/badge', 'components/tag'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67246-60779&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/badge-count +related: + - components/badge + - components/tag previewImage: assets/illustrations/components/badge-count.jpg navigation: - keywords: ['chip', 'pill', 'version number', 'counter'] + keywords: + - chip + - pill + - version number + - counter ---
diff --git a/website/docs/components/badge/index.md b/website/docs/components/badge/index.md index c97fe3e335a..885c0a894fb 100644 --- a/website/docs/components/badge/index.md +++ b/website/docs/components/badge/index.md @@ -1,14 +1,22 @@ --- title: Badge -description: Concise, non-interactive labels that represent metadata. -caption: Concise, non-interactive labels that represent metadata. +description: 'Concise, non-interactive labels that represent metadata.' +caption: 'Concise, non-interactive labels that represent metadata.' links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67237-59854&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/badge -related: ['components/badge-count','components/tag'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67237-59854&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/badge +related: + - components/badge-count + - components/tag previewImage: assets/illustrations/components/badge.jpg navigation: - keywords: ['chip', 'pill', 'tag', 'label'] + keywords: + - chip + - pill + - tag + - label ---
diff --git a/website/docs/components/breadcrumb/index.md b/website/docs/components/breadcrumb/index.md index bd4cbaf5382..e1c9d8f726e 100644 --- a/website/docs/components/breadcrumb/index.md +++ b/website/docs/components/breadcrumb/index.md @@ -1,14 +1,23 @@ --- title: Breadcrumb -description: A Breadcrumb is a type of secondary navigation that reveals the user’s location in an application. +description: >- + A Breadcrumb is a type of secondary navigation that reveals the user’s + location in an application. caption: A secondary navigation that shows the user’s current location. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67385-83191&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/breadcrumb -related: ['components/side-nav', 'components/tabs'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67385-83191&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/breadcrumb +related: + - components/side-nav + - components/tabs previewImage: assets/illustrations/components/breadcrumb.jpg navigation: - keywords: ['navigation', 'crumb', 'path'] + keywords: + - navigation + - crumb + - path ---
diff --git a/website/docs/components/button-set/index.md b/website/docs/components/button-set/index.md index fc449301321..50105ad3815 100644 --- a/website/docs/components/button-set/index.md +++ b/website/docs/components/button-set/index.md @@ -3,11 +3,20 @@ title: Button Set description: Provides consistent layout and spacing for a set of buttons. caption: A set of buttons. links: - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/button-set -related: ['components/button','patterns/button-organization','components/segmented-group'] + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/button-set +related: + - components/button + - patterns/button-organization + - components/segmented-group previewImage: assets/illustrations/components/button-set.jpg navigation: - keywords: ['button group', 'button', 'button spacing', 'button alignment', 'button layout'] + keywords: + - button group + - button + - button spacing + - button alignment + - button layout ---
diff --git a/website/docs/components/button/index.md b/website/docs/components/button/index.md index 16feb2a105a..58b20222a51 100644 --- a/website/docs/components/button/index.md +++ b/website/docs/components/button/index.md @@ -1,14 +1,24 @@ --- title: Button -description: An interactive element that initiates an action or event, such as a form submission. +description: >- + An interactive element that initiates an action or event, such as a form + submission. caption: An interactive element that initiates an action. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67397-95918&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/button -related: ['components/button-set','patterns/button-organization','components/link/inline','components/link/standalone'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67397-95918&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/button +related: + - components/button-set + - patterns/button-organization + - components/link/inline + - components/link/standalone previewImage: assets/illustrations/components/button.jpg navigation: - keywords: ['action', 'link'] + keywords: + - action + - link ---
diff --git a/website/docs/components/card/index.md b/website/docs/components/card/index.md index c027eb817d2..6a0e6a6d483 100644 --- a/website/docs/components/card/index.md +++ b/website/docs/components/card/index.md @@ -1,13 +1,18 @@ --- title: Card -description: A block container that provides styling for elevation, border, and background. -caption: A block container that provides styling for elevation, border, and background. +description: 'A block container that provides styling for elevation, border, and background.' +caption: 'A block container that provides styling for elevation, border, and background.' links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67251-87362&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/card + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67251-87362&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/card previewImage: assets/illustrations/components/card.jpg navigation: - keywords: ['tile', 'container', 'box'] + keywords: + - tile + - container + - box ---
diff --git a/website/docs/components/code-block/index.md b/website/docs/components/code-block/index.md index 60aa13a9963..1d34fbfa5ce 100644 --- a/website/docs/components/code-block/index.md +++ b/website/docs/components/code-block/index.md @@ -1,16 +1,29 @@ --- title: Code Block -description: A container for displaying formatted chunks of code with syntax highlighting and related features. +description: >- + A container for displaying formatted chunks of code with syntax highlighting + and related features. caption: A container for formatting chunks of code with syntax highlighting. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67166-37020&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/code-block -related: ['components/copy/snippet', 'components/copy/button'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67166-37020&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/code-block +related: + - components/copy/snippet + - components/copy/button previewImage: assets/illustrations/components/code-block.jpg navigation: - keywords: ['code', 'snippet', 'copy', 'text', 'editor', 'language', 'example', 'syntax', 'highlight'] -status: - updated: 4.13.0 + keywords: + - code + - snippet + - copy + - text + - editor + - language + - example + - syntax + - highlight ---
diff --git a/website/docs/components/dropdown/index.md b/website/docs/components/dropdown/index.md index 57d6717fc84..c7805f2e9d2 100644 --- a/website/docs/components/dropdown/index.md +++ b/website/docs/components/dropdown/index.md @@ -1,14 +1,24 @@ --- title: Dropdown -description: Displays a list of actions or options revealed by a toggle button. Identifiable by the chevron icon in the button. +description: >- + Displays a list of actions or options revealed by a toggle button. + Identifiable by the chevron icon in the button. caption: Hide/Show a list of actions or options with a toggle button. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67385-76599&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/dropdown -related: ['components/segmented-group','patterns/filter-patterns'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67385-76599&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/dropdown +related: + - components/segmented-group + - patterns/filter-patterns previewImage: assets/illustrations/components/dropdown.jpg navigation: - keywords: ['select', 'menu', 'action menu', 'list'] + keywords: + - select + - menu + - action menu + - list status: updated: 4.15.0 --- diff --git a/website/docs/components/flyout/index.md b/website/docs/components/flyout/index.md index bf80fddff5f..4c52838ef3f 100644 --- a/website/docs/components/flyout/index.md +++ b/website/docs/components/flyout/index.md @@ -1,16 +1,28 @@ --- title: Flyout -description: Displays additional details and information about an item or object, overlaid on the main page content. -caption: Displays additional details and information about an item or object, overlaid on the main page content. +description: >- + Displays additional details and information about an item or object, overlaid + on the main page content. +caption: >- + Displays additional details and information about an item or object, overlaid + on the main page content. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67212-27152&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/flyout -related: ['components/reveal','components/modal','components/accordion', 'utilities/dialog-primitive'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67212-27152&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/flyout +related: + - components/reveal + - components/modal + - components/accordion + - utilities/dialog-primitive previewImage: assets/illustrations/components/flyout.jpg navigation: - keywords: ['drawer', 'panel', 'side', 'modal'] -status: - updated: 4.13.0 + keywords: + - drawer + - panel + - side + - modal ---
diff --git a/website/docs/components/form/checkbox/index.md b/website/docs/components/form/checkbox/index.md index ebb3a8944ed..122c2da1ade 100644 --- a/website/docs/components/form/checkbox/index.md +++ b/website/docs/components/form/checkbox/index.md @@ -1,14 +1,25 @@ --- title: Checkbox -description: A form element that allows users to select one or more items from a group of items. -caption: A form element that allows users to select one or more items from a group of items. +description: >- + A form element that allows users to select one or more items from a group of + items. +caption: >- + A form element that allows users to select one or more items from a group of + items. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67397-102811&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/checkbox -related: ['components/form/toggle','components/form/radio','components/form/select'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67397-102811&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/checkbox +related: + - components/form/toggle + - components/form/radio + - components/form/select previewImage: assets/illustrations/components/form/checkbox.jpg navigation: - keywords: ['option', 'select'] + keywords: + - option + - select ---
diff --git a/website/docs/components/form/file-input/index.md b/website/docs/components/form/file-input/index.md index ac703aae0ec..09c685c378d 100644 --- a/website/docs/components/form/file-input/index.md +++ b/website/docs/components/form/file-input/index.md @@ -1,13 +1,21 @@ --- title: File Input -description: A form input that enables users to select one or more files from their local device for upload. +description: >- + A form input that enables users to select one or more files from their local + device for upload. caption: A form input that enables users to upload files. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67397-97027&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/file-input + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67397-97027&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/file-input previewImage: assets/illustrations/components/form/file-input.jpg navigation: - keywords: ['file', 'upload', 'input', 'form'] + keywords: + - file + - upload + - input + - form ---
@@ -26,4 +34,4 @@ navigation:
@include "partials/accessibility/accessibility.md" -
\ No newline at end of file +
diff --git a/website/docs/components/form/masked-input/index.md b/website/docs/components/form/masked-input/index.md index 38d55a5f5d8..3ce8342a47a 100644 --- a/website/docs/components/form/masked-input/index.md +++ b/website/docs/components/form/masked-input/index.md @@ -1,16 +1,28 @@ --- title: Masked Input -description: A form input that visually obfuscates characters to protect sensitive information by replacing them with a shape. +description: >- + A form input that visually obfuscates characters to protect sensitive + information by replacing them with a shape. caption: A form input that obfuscates sensitive information. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67397-98270&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/masked-input -related: ['components/form/text-input', 'components/form/textarea'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67397-98270&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/masked-input +related: + - components/form/text-input + - components/form/textarea previewImage: assets/illustrations/components/form/masked-input.jpg navigation: - keywords: ['masked' ,'sensitive', 'obscured', 'obfuscated', 'secret', 'form', 'input', 'textarea'] -status: - updated: 4.12.0 + keywords: + - masked + - sensitive + - obscured + - obfuscated + - secret + - form + - input + - textarea ---
diff --git a/website/docs/components/form/primitives/index.md b/website/docs/components/form/primitives/index.md index aa14509557c..71552e02f14 100644 --- a/website/docs/components/form/primitives/index.md +++ b/website/docs/components/form/primitives/index.md @@ -3,12 +3,22 @@ title: Primitives description: Elements used to compose form fields. caption: Elements used to compose form fields. links: - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form -related: ['patterns/form-patterns'] + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form +related: + - patterns/form-patterns previewImage: assets/illustrations/components/form/primitives.jpg navigation: order: 99 - keywords: ['form', 'base controls', 'field', 'label', 'legend', 'fieldset', 'input', 'character count'] + keywords: + - form + - base controls + - field + - label + - legend + - fieldset + - input + - character count ---
diff --git a/website/docs/components/form/radio-card/index.md b/website/docs/components/form/radio-card/index.md index abead4ec0c0..b4052f4fa78 100644 --- a/website/docs/components/form/radio-card/index.md +++ b/website/docs/components/form/radio-card/index.md @@ -3,12 +3,19 @@ title: Radio Card description: A type of radio input represented as a card. caption: A type of radio input represented as a card. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67412-41814&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/radio-card -related: ['components/form/radio'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67412-41814&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/radio-card +related: + - components/form/radio previewImage: assets/illustrations/components/form/radio-card.jpg navigation: - keywords: ['container', 'tile', 'select', 'box'] + keywords: + - container + - tile + - select + - box ---
diff --git a/website/docs/components/form/radio/index.md b/website/docs/components/form/radio/index.md index 3aa73d44f08..1a2c428adfb 100644 --- a/website/docs/components/form/radio/index.md +++ b/website/docs/components/form/radio/index.md @@ -3,12 +3,20 @@ title: Radio description: A form element that allows users to select a single item from group of items. caption: A form element that allows users to select a single item from group of items. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67406-104016&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/radio -related: ['components/form/checkbox', 'components/form/toggle', 'components/form/select'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67406-104016&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/radio +related: + - components/form/checkbox + - components/form/toggle + - components/form/select previewImage: assets/illustrations/components/form/radio.jpg navigation: - keywords: ['radio group', 'radio button', 'select'] + keywords: + - radio group + - radio button + - select ---
diff --git a/website/docs/components/form/select/index.md b/website/docs/components/form/select/index.md index 5b7c79476f8..4ca02f4f043 100644 --- a/website/docs/components/form/select/index.md +++ b/website/docs/components/form/select/index.md @@ -3,12 +3,19 @@ title: Select description: A form element that allows users to choose one option from a list. caption: A form element that allows users to choose one option from a list. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67406-104821&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/select -related: ['components/form/text-input','components/form/radio','components/form/checkbox'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67406-104821&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/select +related: + - components/form/text-input + - components/form/radio + - components/form/checkbox previewImage: assets/illustrations/components/form/select.jpg navigation: - keywords: ['dropdown', 'form'] + keywords: + - dropdown + - form ---
diff --git a/website/docs/components/form/super-select/index.md b/website/docs/components/form/super-select/index.md index 14e4fcfc3a5..cd524312695 100644 --- a/website/docs/components/form/super-select/index.md +++ b/website/docs/components/form/super-select/index.md @@ -1,16 +1,24 @@ --- title: Super Select -description: An enhanced selection component that enables users to search and select items from a list of options and supports flexible custom content. -caption: Enhanced selection component that enables users to search and select items from a list. +description: >- + An enhanced selection component that enables users to search and select items + from a list of options and supports flexible custom content. +caption: >- + Enhanced selection component that enables users to search and select items + from a list. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67543-48702&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/super-select -related: ['components/form/select', 'components/dropdown'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67543-48702&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/super-select +related: + - components/form/select + - components/dropdown previewImage: assets/illustrations/components/form/super-select.jpg navigation: - keywords: ['dropdown', 'powerselect'] -status: - updated: 4.13.0 + keywords: + - dropdown + - powerselect ---
diff --git a/website/docs/components/form/text-input/index.md b/website/docs/components/form/text-input/index.md index 9043415e0d5..efacea7f970 100644 --- a/website/docs/components/form/text-input/index.md +++ b/website/docs/components/form/text-input/index.md @@ -1,14 +1,22 @@ --- title: Text Input -description: A form element that provides users with a way to read, input, or edit data. -caption: A form element that provides users with a way to read, input, or edit data. +description: 'A form element that provides users with a way to read, input, or edit data.' +caption: 'A form element that provides users with a way to read, input, or edit data.' links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67406-107808&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/text-input -related: ['components/form/select', 'components/form/textarea', 'components/form/masked-input'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67406-107808&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/text-input +related: + - components/form/select + - components/form/textarea + - components/form/masked-input previewImage: assets/illustrations/components/form/text-input.jpg navigation: - keywords: ['text field', 'search', 'form'] + keywords: + - text field + - search + - form ---
diff --git a/website/docs/components/form/textarea/index.md b/website/docs/components/form/textarea/index.md index d723cc03f2a..d721bfa2ef3 100644 --- a/website/docs/components/form/textarea/index.md +++ b/website/docs/components/form/textarea/index.md @@ -3,12 +3,20 @@ title: Textarea description: A form input that accepts multi-line text. caption: A form input that accepts multi-line text. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67406-106340&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/textarea -related: ['components/form/text-input','components/form/masked-input'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67406-106340&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/textarea +related: + - components/form/text-input + - components/form/masked-input previewImage: assets/illustrations/components/form/textarea.jpg navigation: - keywords: ['text field', 'textbox', 'text box', 'form'] + keywords: + - text field + - textbox + - text box + - form ---
diff --git a/website/docs/components/form/toggle/index.md b/website/docs/components/form/toggle/index.md index cad55a5890c..bda6e1da175 100644 --- a/website/docs/components/form/toggle/index.md +++ b/website/docs/components/form/toggle/index.md @@ -1,14 +1,25 @@ --- title: Toggle -description: A form element that allows users to select between two mutually exclusive states. -caption: A form element that allows users to select between two mutually exclusive states. +description: >- + A form element that allows users to select between two mutually exclusive + states. +caption: >- + A form element that allows users to select between two mutually exclusive + states. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67453-80240&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/toggle -related: ['components/form/checkbox', 'components/form/radio'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67453-80240&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/toggle +related: + - components/form/checkbox + - components/form/radio previewImage: assets/illustrations/components/form/toggle.jpg navigation: - keywords: ['toggle button', 'switch', 'light switch'] + keywords: + - toggle button + - switch + - light switch ---
diff --git a/website/docs/components/icon-tile/index.md b/website/docs/components/icon-tile/index.md index 4dd23ee6a31..bab2167c2b9 100644 --- a/website/docs/components/icon-tile/index.md +++ b/website/docs/components/icon-tile/index.md @@ -3,11 +3,17 @@ title: Icon Tile description: Used to display an icon in a tile-like object. caption: Used to display an icon in a tile-like object. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67361-50167&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/icon-tile + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67361-50167&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/icon-tile previewImage: assets/illustrations/components/icon-tile.jpg navigation: - keywords: ['symbol', 'logo'] + keywords: + - symbol + - logo +status: + updated: 4.15.0 ---
diff --git a/website/docs/components/icon/index.md b/website/docs/components/icon/index.md index 2c88f3071c6..a082e35c288 100644 --- a/website/docs/components/icon/index.md +++ b/website/docs/components/icon/index.md @@ -1,16 +1,22 @@ --- title: Icon -description: Displays an icon from the Helios icon library to enhance the communication of text and UI elements. +description: >- + Displays an icon from the Helios icon library to enhance the communication of + text and UI elements. caption: Used to display an icon. links: - figma: https://www.figma.com/design/TLnoT5AYQfy3tZ0H68BgOr/HDS-Icons?m=auto&node-id=164-0&t=zAxxcBG32ycFg6Ew-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/icon -related: ['icons/library'] + figma: >- + https://www.figma.com/design/TLnoT5AYQfy3tZ0H68BgOr/HDS-Icons?m=auto&node-id=164-0&t=zAxxcBG32ycFg6Ew-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/icon +related: + - icons/library previewImage: assets/illustrations/components/icon.jpg navigation: - keywords: ['icon', 'glyph', 'flight'] -status: - added: 4.9.0 + keywords: + - icon + - glyph + - flight ---
diff --git a/website/docs/components/modal/index.md b/website/docs/components/modal/index.md index 28dfd96495c..3b727a5b18e 100644 --- a/website/docs/components/modal/index.md +++ b/website/docs/components/modal/index.md @@ -1,16 +1,29 @@ --- title: Modal -description: A pop-up window used to request information or feedback from the user, confirm a decision, or provide additional context about a function or feature. -caption: A pop-up window used to request information, confirm a decision, or provide additional context. +description: >- + A pop-up window used to request information or feedback from the user, confirm + a decision, or provide additional context about a function or feature. +caption: >- + A pop-up window used to request information, confirm a decision, or provide + additional context. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67199-34072&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/modal -related: ['components/alert','components/flyout','components/accordion','components/tooltip', 'utilities/dialog-primitive'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67199-34072&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/modal +related: + - components/alert + - components/flyout + - components/accordion + - components/tooltip + - utilities/dialog-primitive previewImage: assets/illustrations/components/modal.jpg navigation: - keywords: ['flyout', 'popover', 'popup', 'dialog'] -status: - updated: 4.13.0 + keywords: + - flyout + - popover + - popup + - dialog ---
diff --git a/website/docs/components/page-header/index.md b/website/docs/components/page-header/index.md index 7b869c5875f..6a72b597cb9 100644 --- a/website/docs/components/page-header/index.md +++ b/website/docs/components/page-header/index.md @@ -1,15 +1,30 @@ --- title: Page Header -description: An informational element that displays the title of the page, relevant metadata, and page-level actions. -caption: Displays the title of the page, metadata, and page-level actions. +description: >- + An informational element that displays the title of the page, relevant + metadata, and page-level actions. +caption: 'Displays the title of the page, metadata, and page-level actions.' links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67352-177318&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/page-header -related: ['components/breadcrumb', 'components/button', 'components/dropdown', 'components/icon-tile'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67352-177318&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/page-header +related: + - components/breadcrumb + - components/button + - components/dropdown + - components/icon-tile previewImage: assets/illustrations/components/page-header.jpg navigation: keywords: - ['title', 'action bar', 'breadcrumb', 'landmark', 'banner', 'heading'] + - title + - action bar + - breadcrumb + - landmark + - banner + - heading +status: + updated: 4.15.0 ---
diff --git a/website/docs/components/pagination/index.md b/website/docs/components/pagination/index.md index f890517d7b6..64ac835b297 100644 --- a/website/docs/components/pagination/index.md +++ b/website/docs/components/pagination/index.md @@ -1,11 +1,18 @@ --- title: Pagination -description: Used to let users navigate through content broken down into pages. Usually paired with tables. +description: >- + Used to let users navigate through content broken down into pages. Usually + paired with tables. caption: Used to let users navigate through content broken down into pages. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67460-85524&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/pagination -related: ['components/table','patterns/filter-patterns', 'patterns/table-multi-select'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67460-85524&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/pagination +related: + - components/table + - patterns/filter-patterns + - patterns/table-multi-select previewImage: assets/illustrations/components/pagination.jpg --- diff --git a/website/docs/components/reveal/index.md b/website/docs/components/reveal/index.md index 3339b4813a6..5b9488e3cea 100644 --- a/website/docs/components/reveal/index.md +++ b/website/docs/components/reveal/index.md @@ -1,15 +1,27 @@ --- title: Reveal -description: A toggle that reveals additional information or details about an element or content to the user when triggered. +description: >- + A toggle that reveals additional information or details about an element or + content to the user when triggered. caption: A toggle that reveals additional content to the user when triggered. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67413-49383&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/reveal -related: ['components/flyout','components/accordion','components/tooltip'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67413-49383&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/reveal +related: + - components/flyout + - components/accordion + - components/tooltip previewImage: assets/illustrations/components/reveal.jpg navigation: hidden: false - keywords: ['toggle', 'disclosure', 'summary', 'details', 'accordion'] + keywords: + - toggle + - disclosure + - summary + - details + - accordion ---
@@ -33,4 +45,4 @@ navigation:
@include "partials/version-history/version-history.md" -
\ No newline at end of file +
diff --git a/website/docs/components/rich-tooltip/index.md b/website/docs/components/rich-tooltip/index.md index d3305f8fd4a..37396f9ca41 100644 --- a/website/docs/components/rich-tooltip/index.md +++ b/website/docs/components/rich-tooltip/index.md @@ -1,14 +1,27 @@ --- title: Rich Tooltip -description: The Rich Tooltip component provides additional information to users in a concise and unobtrusive way while supporting more complex and structured content. +description: >- + The Rich Tooltip component provides additional information to users in a + concise and unobtrusive way while supporting more complex and structured + content. caption: Provides additional structured informational content for a UI element. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67421-82911&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/rich-tooltip -related: ['components/tooltip', 'components/modal'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67421-82911&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/rich-tooltip +related: + - components/tooltip + - components/modal previewImage: assets/illustrations/components/rich-tooltip.jpg navigation: - keywords: ['tooltip', 'popover', 'popup', 'modal'] + keywords: + - tooltip + - popover + - popup + - modal +status: + updated: 4.15.0 ---
diff --git a/website/docs/components/segmented-group/index.md b/website/docs/components/segmented-group/index.md index 521beaba042..36e035c72f2 100644 --- a/website/docs/components/segmented-group/index.md +++ b/website/docs/components/segmented-group/index.md @@ -1,14 +1,34 @@ --- title: Segmented Group -description: Combines one or more input fields and actions to handle complex filtering and data collection. -caption: Combines one or more input fields and actions to handle complex filtering and data collection. +description: >- + Combines one or more input fields and actions to handle complex filtering and + data collection. +caption: >- + Combines one or more input fields and actions to handle complex filtering and + data collection. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67406-110590&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/segmented-group -related: ['components/dropdown', 'components/button-set', 'patterns/filter-patterns'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67406-110590&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/segmented-group +related: + - components/dropdown + - components/button-set + - patterns/filter-patterns previewImage: assets/illustrations/components/form/segmented-group.jpg navigation: - keywords: [ 'filter', 'connected', 'fields', 'set', 'group', 'segment', 'form', 'button', 'dropdown', 'input', 'select' ] + keywords: + - filter + - connected + - fields + - set + - group + - segment + - form + - button + - dropdown + - input + - select ---
diff --git a/website/docs/components/separator/index.md b/website/docs/components/separator/index.md index 5462f20bfc3..2574b652b70 100644 --- a/website/docs/components/separator/index.md +++ b/website/docs/components/separator/index.md @@ -3,11 +3,20 @@ title: Separator description: Creates visual breaks between different sections of content caption: Creates visual breaks between different sections of content links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67421-83925&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/separator + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67421-83925&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/separator previewImage: assets/illustrations/components/separator.jpg navigation: - keywords: ['horizontal', 'rule', 'line' , 'hr', 'section', 'divider', 'break'] + keywords: + - horizontal + - rule + - line + - hr + - section + - divider + - break ---
@@ -22,4 +31,4 @@ navigation:
@include "partials/accessibility/accessibility.md" -
\ No newline at end of file +
diff --git a/website/docs/components/side-nav/index.md b/website/docs/components/side-nav/index.md index 186fad8ef52..99e65eb3806 100644 --- a/website/docs/components/side-nav/index.md +++ b/website/docs/components/side-nav/index.md @@ -1,15 +1,26 @@ --- title: Side Nav description: Used as a contextual navigation for subpages within an application. -caption: A side navigation menu that provides access to subpages within a product or application. +caption: >- + A side navigation menu that provides access to subpages within a product or + application. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67379-82642&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/side-nav -related: ['components/breadcrumb','components/tabs','layouts/app-frame'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67379-82642&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/side-nav +related: + - components/breadcrumb + - components/tabs + - layouts/app-frame previewImage: assets/illustrations/components/side-nav.jpg navigation: hidden: false - keywords: ['navigation', 'side navigation', 'sidenav', 'sidebar'] + keywords: + - navigation + - side navigation + - sidenav + - sidebar ---
diff --git a/website/docs/components/stepper/index.md b/website/docs/components/stepper/index.md index 1f52a6d9587..0ddccf5ffc4 100644 --- a/website/docs/components/stepper/index.md +++ b/website/docs/components/stepper/index.md @@ -1,13 +1,24 @@ --- title: Stepper Indicator -description: Helps the user maintain context and directionality when advancing through a multi-step flow or feature; generally assembled as part of a larger stepper pattern. -caption: Helps the user maintain context and directionality when advancing through a multi-step flow or feature. +description: >- + Helps the user maintain context and directionality when advancing through a + multi-step flow or feature; generally assembled as part of a larger stepper + pattern. +caption: >- + Helps the user maintain context and directionality when advancing through a + multi-step flow or feature. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67221-68491&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/stepper + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67221-68491&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/stepper previewImage: assets/illustrations/components/stepper.jpg navigation: - keywords: ['progress', 'progress bar', 'steps', 'tracker'] + keywords: + - progress + - progress bar + - steps + - tracker ---
diff --git a/website/docs/components/table/index.md b/website/docs/components/table/index.md index 15a747933b8..dbf5e234864 100644 --- a/website/docs/components/table/index.md +++ b/website/docs/components/table/index.md @@ -1,19 +1,24 @@ --- title: Table -description: Used to display organized, two-dimensional tabular data. -caption: Used to display organized, two-dimensional tabular data. +description: 'Used to display organized, two-dimensional tabular data.' +caption: 'Used to display organized, two-dimensional tabular data.' links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67216-35163&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/table + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67216-35163&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/table related: - [ - 'components/pagination', - 'patterns/filter-patterns', - 'patterns/table-multi-select', - ] + - components/pagination + - patterns/filter-patterns + - patterns/table-multi-select previewImage: assets/illustrations/components/table.jpg navigation: - keywords: ['data table', 'data grid', 'datagrid', 'grid', 'list'] + keywords: + - data table + - data grid + - datagrid + - grid + - list status: updated: 4.15.0 --- diff --git a/website/docs/components/tabs/index.md b/website/docs/components/tabs/index.md index d9d1128be00..683aed2c37b 100644 --- a/website/docs/components/tabs/index.md +++ b/website/docs/components/tabs/index.md @@ -1,14 +1,22 @@ --- title: Tabs -description: Allows users to move among different views within the same context and at the same level of hierarchy. +description: >- + Allows users to move among different views within the same context and at the + same level of hierarchy. caption: Allows users to move among different views within the same context. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67274-9902&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/tabs -related: ['components/accordion','components/breadcrumb','components/side-nav'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67274-9902&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/tabs +related: + - components/accordion + - components/breadcrumb + - components/side-nav previewImage: assets/illustrations/components/tabs.jpg navigation: - keywords: ['tabbed interface'] + keywords: + - tabbed interface ---
diff --git a/website/docs/components/tag/index.md b/website/docs/components/tag/index.md index 06a9374008a..8911a5ed7a9 100644 --- a/website/docs/components/tag/index.md +++ b/website/docs/components/tag/index.md @@ -3,12 +3,21 @@ title: Tag description: Used to indicate an object’s categorization. caption: Used to indicate an object’s categorization. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67200-19755&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/tag -related: ['components/badge','components/badge-count'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67200-19755&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/tag +related: + - components/badge + - components/badge-count previewImage: assets/illustrations/components/tag.jpg navigation: - keywords: ['chip', 'badge', 'pill', 'label', 'filter'] + keywords: + - chip + - badge + - pill + - label + - filter ---
diff --git a/website/docs/components/text/index.md b/website/docs/components/text/index.md index 800b610ffc2..0f25a507f82 100644 --- a/website/docs/components/text/index.md +++ b/website/docs/components/text/index.md @@ -3,12 +3,21 @@ title: Text description: A component that applies predefined typographic styles to a block of content. caption: A component that applies predefined typographic styles to its content. links: - figma: https://www.figma.com/design/uX4OEaJQdWfzULADchjAeN/HDS-Foundations-v2.0?node-id=1262-9192&t=z7hDCKFFuGUMDRYe-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/text -related: ['foundations/typography'] + figma: >- + https://www.figma.com/design/uX4OEaJQdWfzULADchjAeN/HDS-Foundations-v2.0?node-id=1262-9192&t=z7hDCKFFuGUMDRYe-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/text +related: + - foundations/typography previewImage: assets/illustrations/components/text.jpg navigation: - keywords: ['text', 'typography', 'style', 'display', 'body', 'code'] + keywords: + - text + - typography + - style + - display + - body + - code ---
@@ -18,4 +27,4 @@ navigation:
@include "partials/accessibility/accessibility.md" -
\ No newline at end of file +
diff --git a/website/docs/components/time/index.md b/website/docs/components/time/index.md index f51c909c0a8..6f56fb7caf0 100644 --- a/website/docs/components/time/index.md +++ b/website/docs/components/time/index.md @@ -3,11 +3,14 @@ title: Time description: The Time component displays dates and times in a consistent format. caption: Displays dates and times in a consistent format. links: - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/time -related: ['components/text'] + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/time +related: + - components/text previewImage: assets/illustrations/components/time.jpg navigation: - keywords: ['time'] + keywords: + - time status: added: 4.15.0 --- diff --git a/website/docs/components/toast/index.md b/website/docs/components/toast/index.md index 1e33deb7e3f..b582f93b796 100644 --- a/website/docs/components/toast/index.md +++ b/website/docs/components/toast/index.md @@ -3,12 +3,20 @@ title: Toast description: Used to display messages that are the result of a user’s actions. caption: Used to display messages that are the result of a user’s actions. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67421-85911&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/toast -related: ['components/alert'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67421-85911&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/toast +related: + - components/alert previewImage: assets/illustrations/components/toast.jpg navigation: - keywords: ['alert', 'toast', 'notification', 'banner', 'message'] + keywords: + - alert + - toast + - notification + - banner + - message ---
diff --git a/website/docs/components/tooltip/index.md b/website/docs/components/tooltip/index.md index 994da2a0f03..4844735ca91 100644 --- a/website/docs/components/tooltip/index.md +++ b/website/docs/components/tooltip/index.md @@ -1,15 +1,26 @@ --- title: Tooltip -description: The Tooltip component provides additional information to users in a concise and unobtrusive way. +description: >- + The Tooltip component provides additional information to users in a concise + and unobtrusive way. caption: Provides additional information or context for a UI element. links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67458-63977&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/tooltip-button -related: ['components/modal'] + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67458-63977&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/tooltip-button +related: + - components/modal previewImage: assets/illustrations/components/tooltip.jpg navigation: hidden: false - keywords: ['tooltip', 'hint', 'info', 'tip', 'popover', 'popup'] + keywords: + - tooltip + - hint + - info + - tip + - popover + - popup ---
@@ -29,4 +40,4 @@ navigation:
@include "partials/accessibility/accessibility.md" -
\ No newline at end of file +
diff --git a/website/docs/utilities/dialog-primitive/index.md b/website/docs/utilities/dialog-primitive/index.md index b57ae510143..d92a7001e08 100644 --- a/website/docs/utilities/dialog-primitive/index.md +++ b/website/docs/utilities/dialog-primitive/index.md @@ -1,16 +1,22 @@ --- title: DialogPrimitive -description: Dialog Primitives are the foundational blocks for dialog components such as modals, flyouts, and similar dialog-based components. +description: >- + Dialog Primitives are the foundational blocks for dialog components such as + modals, flyouts, and similar dialog-based components. caption: The foundational blocks of dialog components. -related: ['components/modal', 'components/flyout'] +related: + - components/modal + - components/flyout previewImage: assets/illustrations/utilities/dialog-primitive.jpg links: - figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67199-32008&t=w8xQlWxzH7bwXLe2-1 - github: https://github.com/hashicorp/design-system/tree/main/packages/components/addon/components/hds/dialog-primitive + figma: >- + https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67199-32008&t=w8xQlWxzH7bwXLe2-1 + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/addon/components/hds/dialog-primitive navigation: - keywords: ['modal', 'flyout'] -status: - updated: 4.12.0 + keywords: + - modal + - flyout ---
diff --git a/website/docs/utilities/disclosure-primitive/index.md b/website/docs/utilities/disclosure-primitive/index.md index 4db2ad33717..12e84933c37 100644 --- a/website/docs/utilities/disclosure-primitive/index.md +++ b/website/docs/utilities/disclosure-primitive/index.md @@ -2,13 +2,21 @@ title: DisclosurePrimitive description: An internal utility component that provides show/hide functionality. caption: An internal utility component that provides show/hide functionality. -related: ['components/accordion', 'components/reveal', 'utilities/menu-primitive'] +related: + - components/accordion + - components/reveal + - utilities/menu-primitive previewImage: assets/illustrations/utilities/disclosure-primitive.jpg navigation: - keywords: ['show', 'hide', 'accordion', 'dropdown', 'reveal'] + keywords: + - show + - hide + - accordion + - dropdown + - reveal ---
@include "partials/code/how-to-use.md" @include "partials/code/component-api.md" -
\ No newline at end of file +
diff --git a/website/docs/utilities/dismiss-button/index.md b/website/docs/utilities/dismiss-button/index.md index 4d89665faa8..7e55564f876 100644 --- a/website/docs/utilities/dismiss-button/index.md +++ b/website/docs/utilities/dismiss-button/index.md @@ -1,11 +1,22 @@ --- title: Dismiss Button -description: An internal utility component used to provide "dismiss" functionality in other components. -caption: An internal utility component used to provide "dismiss" functionality in other components. -related: ['components/alert', 'components/flyout', 'components/modal'] +description: >- + An internal utility component used to provide "dismiss" functionality in other + components. +caption: >- + An internal utility component used to provide "dismiss" functionality in other + components. +related: + - components/alert + - components/flyout + - components/modal previewImage: assets/illustrations/utilities/dismiss-button.jpg navigation: - keywords: ['dismiss', 'button', 'close', 'exit'] + keywords: + - dismiss + - button + - close + - exit ---
diff --git a/website/docs/utilities/interactive/index.md b/website/docs/utilities/interactive/index.md index 4e89d92f0dd..b329992ad1a 100644 --- a/website/docs/utilities/interactive/index.md +++ b/website/docs/utilities/interactive/index.md @@ -1,11 +1,25 @@ --- title: Interactive -description: An internal utility component used to provide interactivity to other components. -caption: An internal utility component used to provide interactivity to other components. -related: ['components/button', 'components/dropdown', 'components/link/standalone', 'components/link/inline', 'components/pagination', 'components/side-nav', 'components/tag'] +description: >- + An internal utility component used to provide interactivity to other + components. +caption: >- + An internal utility component used to provide interactivity to other + components. +related: + - components/button + - components/dropdown + - components/link/standalone + - components/link/inline + - components/pagination + - components/side-nav + - components/tag previewImage: assets/illustrations/utilities/interactive.jpg navigation: - keywords: ['interactive', 'button', 'link'] + keywords: + - interactive + - button + - link ---
diff --git a/website/docs/utilities/menu-primitive/index.md b/website/docs/utilities/menu-primitive/index.md index 92c09f0219c..bea8e07e917 100644 --- a/website/docs/utilities/menu-primitive/index.md +++ b/website/docs/utilities/menu-primitive/index.md @@ -2,10 +2,18 @@ title: MenuPrimitive description: An internal utility component that provides show/hide functionality. caption: An internal utility component that provides show/hide functionality. -related: ['components/breadcrumb', 'components/dropdown', 'utilities/disclosure-primitive'] +related: + - components/breadcrumb + - components/dropdown + - utilities/disclosure-primitive previewImage: assets/illustrations/utilities/menu-primitive.jpg navigation: - keywords: ['show', 'hide', 'accordion', 'dropdown', 'reveal'] + keywords: + - show + - hide + - accordion + - dropdown + - reveal status: deprecated: 4.10.0 --- diff --git a/website/docs/utilities/popover-primitive/index.md b/website/docs/utilities/popover-primitive/index.md index 13a0c24d927..d838d295bca 100644 --- a/website/docs/utilities/popover-primitive/index.md +++ b/website/docs/utilities/popover-primitive/index.md @@ -1,16 +1,31 @@ --- title: PopoverPrimitive -description: An internal utility component that provides popover, anchoring, and collision detection functionalities. -caption: An internal utility component that provides popover, anchoring, and collision detection functionalities. +description: >- + An internal utility component that provides popover, anchoring, and collision + detection functionalities. +caption: >- + An internal utility component that provides popover, anchoring, and collision + detection functionalities. links: - github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/popover-primitive -related: ['utilities/disclosure-primitive', 'utilities/menu-primitive'] + github: >- + https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/popover-primitive +related: + - utilities/disclosure-primitive + - utilities/menu-primitive previewImage: assets/illustrations/utilities/popover-primitive.jpg navigation: - keywords: ['popover', 'popup', 'tooltip', 'toggle', 'anchoring', 'collision', 'detection', 'bubble'] + keywords: + - popover + - popup + - tooltip + - toggle + - anchoring + - collision + - detection + - bubble ---
@include "partials/code/how-to-use.md" @include "partials/code/component-api.md" -
\ No newline at end of file +
diff --git a/website/lib/changelog/generate-component-changelog-entries.mjs b/website/lib/changelog/generate-component-changelog-entries.mjs index d84fad484ca..fc047adddc3 100644 --- a/website/lib/changelog/generate-component-changelog-entries.mjs +++ b/website/lib/changelog/generate-component-changelog-entries.mjs @@ -4,6 +4,7 @@ */ import fs from 'fs'; +import matter from 'gray-matter'; const readVersionFromPackageJson = (filePath) => { try { @@ -99,6 +100,83 @@ const updateComponentVersionHistory = (componentChangelogEntries, version) => { }); }; +const updateComponentFrontMatter = (componentChangelogEntries, version) => { + Object.keys(componentChangelogEntries).forEach((componentName) => { + const indexPath = `${allComponentsPath[componentName]}/index.md`; + + if (fs.existsSync(indexPath)) { + // Fetch the index markdown file + const indexContent = fs.readFileSync(indexPath, 'utf8'); + + // Parse the index file content + const parsedFrontMatter = matter(indexContent); + + // Update the front matter + if (!parsedFrontMatter.data.status) { + parsedFrontMatter.data.status = {}; + } + if ( + parsedFrontMatter.data.status.added !== version && + parsedFrontMatter.data.status.updated !== version + ) { + // Remove any potential added badge before setting the updated badge + delete parsedFrontMatter.data.status.added; + parsedFrontMatter.data.status.updated = version; + } + + // Stringify the updated content + const updatedContent = matter.stringify( + parsedFrontMatter.content, + parsedFrontMatter.data + ); + + // Write the updated content back to the index markdown file + fs.writeFileSync(indexPath, updatedContent); + } + }); +}; + +const cleanComponentFrontMatter = (components, version) => { + Object.keys(components).forEach((componentName) => { + const indexPath = `${components[componentName]}/index.md`; + + if (fs.existsSync(indexPath)) { + // Fetch the index markdown file + const indexContent = fs.readFileSync(indexPath, 'utf8'); + + // Parse the index file content + const parsedFrontMatter = matter(indexContent); + + // Clean the front matter status if 'added' or 'updated' are not matching the current version + // Removing the deprecated status will be done manually as we cannot anticipate the removal + if ( + parsedFrontMatter.data.status && + parsedFrontMatter.data.status.added !== version && + parsedFrontMatter.data.status.updated !== version && + (parsedFrontMatter.data.status.added || + parsedFrontMatter.data.status.updated) + ) { + delete parsedFrontMatter.data.status; + } + + // Stringify the updated content + const updatedContent = matter.stringify( + parsedFrontMatter.content, + parsedFrontMatter.data + ); + + // Write the updated content back to the index markdown file + fs.writeFileSync(indexPath, updatedContent); + } + }); +}; + +const isNotPatchVersion = (version) => { + // eslint-disable-next-line no-unused-vars + const [major, minor, patch] = version.split('.').map(Number); + return patch === 0; +}; + // Extract current version const version = readVersionFromPackageJson( '../packages/components/package.json' @@ -107,7 +185,12 @@ const version = readVersionFromPackageJson( // Determine component paths const componentPaths = getComponentPaths('./docs/components'); const formComponentPaths = getComponentPaths('./docs/components/form'); -const allComponentsPath = { ...componentPaths, ...formComponentPaths }; +const utilityComponentPaths = getComponentPaths('./docs/utilities'); +const allComponentsPath = { + ...componentPaths, + ...formComponentPaths, + ...utilityComponentPaths, +}; // Read the main changelog entry for components const changelogContent = readChangelogContent( @@ -122,5 +205,14 @@ const componentChangelogEntries = extractComponentChangelogEntries( currentVersionContent ); -// Add changelog entries for each component +// Add changelog entries for each updated component updateComponentVersionHistory(componentChangelogEntries, version); + +// Check if the current version is a new minor version +if (isNotPatchVersion(version)) { + // Clean previous front matter status for all components + cleanComponentFrontMatter(allComponentsPath, version); +} + +// Update front matter for each updated component +updateComponentFrontMatter(componentChangelogEntries, version); diff --git a/website/package.json b/website/package.json index 42d0857d769..f51cfe82bb0 100644 --- a/website/package.json +++ b/website/package.json @@ -102,6 +102,7 @@ "eslint-plugin-prettier": "^5.2.1", "eslint-plugin-qunit": "^8.1.2", "fs-extra": "^11.2.0", + "gray-matter": "^4.0.3", "jsonapi-serializer": "^3.6.9", "loader.js": "^4.7.0", "lodash": "^4.17.21", diff --git a/yarn.lock b/yarn.lock index 53145f11356..0cec1390229 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16255,6 +16255,18 @@ __metadata: languageName: node linkType: hard +"gray-matter@npm:^4.0.3": + version: 4.0.3 + resolution: "gray-matter@npm:4.0.3" + dependencies: + js-yaml: "npm:^3.13.1" + kind-of: "npm:^6.0.2" + section-matter: "npm:^1.0.0" + strip-bom-string: "npm:^1.0.0" + checksum: 10/9a8f146a7a918d2524d5d60e0b4d45729f5bca54aa41247f971d9e4bc984943fda58159435763d463ec2abc8a0e238e807bd9b05e3a48f4a613a325c9dd5ad0c + languageName: node + linkType: hard + "growly@npm:^1.3.0": version: 1.3.0 resolution: "growly@npm:1.3.0" @@ -18880,7 +18892,7 @@ __metadata: languageName: node linkType: hard -"kind-of@npm:^6.0.2": +"kind-of@npm:^6.0.0, kind-of@npm:^6.0.2": version: 6.0.3 resolution: "kind-of@npm:6.0.3" checksum: 10/5873d303fb36aad875b7538798867da2ae5c9e328d67194b0162a3659a627d22f742fc9c4ae95cd1704132a24b00cae5041fc00c0f6ef937dc17080dc4dbb962 @@ -24149,6 +24161,16 @@ __metadata: languageName: node linkType: hard +"section-matter@npm:^1.0.0": + version: 1.0.0 + resolution: "section-matter@npm:1.0.0" + dependencies: + extend-shallow: "npm:^2.0.1" + kind-of: "npm:^6.0.0" + checksum: 10/cedfda3a9238f66942d92531fe043dd134702a462cdc9e254cd6aa418c66ca0d229900e4da78ffd1a07051e7b239251c4dc4748e9d1c76bf41a37bff7a478556 + languageName: node + linkType: hard + "select@npm:^1.1.2": version: 1.1.2 resolution: "select@npm:1.1.2" @@ -25279,6 +25301,13 @@ __metadata: languageName: node linkType: hard +"strip-bom-string@npm:^1.0.0": + version: 1.0.0 + resolution: "strip-bom-string@npm:1.0.0" + checksum: 10/5635a3656d8512a2c194d6c8d5dee7ef0dde6802f7be9413b91e201981ad4132506656d9cf14137f019fd50f0269390d91c7f6a2601b1bee039a4859cfce4934 + languageName: node + linkType: hard + "strip-bom@npm:^3.0.0": version: 3.0.0 resolution: "strip-bom@npm:3.0.0" @@ -27562,6 +27591,7 @@ __metadata: eslint-plugin-prettier: "npm:^5.2.1" eslint-plugin-qunit: "npm:^8.1.2" fs-extra: "npm:^11.2.0" + gray-matter: "npm:^4.0.3" jsonapi-serializer: "npm:^3.6.9" loader.js: "npm:^4.7.0" lodash: "npm:^4.17.21"