Helios Design System

https://helios.hashicorp.design
Admin
Helios is a comprehensive design system built by HashiCorp that provides components, foundations,...
Tokens:749,352
Snippets:6,761
Trust Score:5.9
Update:6 months ago
Show doc for...
Tokens:
Raw
### Basic PopoverPrimitive Invocation

Source: https://helios.hashicorp.design/utilities/popover-primitive

Demonstrates the fundamental setup of the PopoverPrimitive using three essential modifiers: setupPrimitiveContainer, setupPrimitiveToggle, and setupPrimitivePopover. This example shows how to associate a toggle button with a popover content area within a container.

```html
<Hds::PopoverPrimitive as |PP|> <div id="container" {{PP.setupPrimitiveContainer}}> <button id="toggle" type="button" {{PP.setupPrimitiveToggle}}> toggle </button> <div id="popover" {{PP.setupPrimitivePopover}}> popover content </div> </div> </Hds::PopoverPrimitive>
```

```handlebars
<Hds::PopoverPrimitive as |PP|>
  <div id="container" {{PP.setupPrimitiveContainer}}>
    <button id="toggle" type="button" {{PP.setupPrimitiveToggle}}>
      toggle
    </button>
    <div id="popover" {{PP.setupPrimitivePopover}}>
      popover content
    </div>
  </div>
</Hds::PopoverPrimitive>
```

--------------------------------

### Install @hashicorp/design-system-tokens

Source: https://helios.hashicorp.design/getting-started/for-engineers

Installs the design tokens package using pnpm. This package provides design tokens that can be used to maintain consistent styling across applications.

```bash
pnpm add @hashicorp/design-system-tokens
```

--------------------------------

### Integration Example: Table with Pagination::Compact

Source: https://helios.hashicorp.design/components/pagination?demoCurrentCursor=cHJldl9fNg%3D%3D&demoCurrentPage=8&demoCurrentPageSize=5&demoExtraParam=hello&preserveScrollPosition=true

An example demonstrating the integration of the `Hds::Table` component with `Hds::Pagination::Compact`, where pagination state is managed via URL query parameters.

```APIDOC
## Hds::Table with Hds::Pagination::Compact Integration

### Description
This example showcases how to use the `Hds::Table` component alongside `Hds::Pagination::Compact`, with the pagination state being controlled by URL query parameters. The `Hds::Pagination::Compact` component is configured with routing parameters, ensuring that page changes update the URL and the table data reflects the current URL state.

### Method
N/A (Component Integration)

### Endpoint
N/A (Component Integration)

### Parameters
#### Table Component Arguments
- **@model** (array) - Required - The data to be displayed in the table.
- **@columns** (array) - Required - Defines the columns of the table, including key and label.

#### Pagination Component Arguments (as shown previously)
- **@route** (string) - Required - The name of the route.
- **@queryFunction** (function) - Required - Function to get current query parameters.
- **@isDisabledPrev** (boolean) - Optional - Disables the previous button.
- **@isDisabledNext** (boolean) - Optional - Disables the next button.

### Request Example
```html
<div class="doc-pagination-table-demo">
  <Hds::Table
    @model={{this.demoPaginatedDataCompact}}
    @columns={{array
      (hash key="id" label="ID")
      (hash key="name" label="Name")
      (hash key="email" label="Email")
      (hash key="role" label="Role")
    }}
  >
    <:body as |B|>
      <B.Tr>
        <B.Td>{{B.data.id}}</B.Td>
        <B.Td>{{B.data.name}}</B.Td>
        <B.Td>{{B.data.email}}</B.Td>
        <B.Td>{{B.data.role}}</B.Td>
      </B.Tr>
    </:body>
  </Hds::Table>
  <Hds::Pagination::Compact
    @route={{this.demoRouteName}}
    @queryFunction={{this.demoQueryFunctionCompact}}
    @isDisabledPrev={{this.demoIsDisabledPrev}}
    @isDisabledNext={{this.demoIsDisabledNext}}
  />
</div>
```

### Response
N/A (Component Integration)

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Basic Dialog Example

Source: https://helios.hashicorp.design/utilities/dialog-primitive?tab=code

Example of how to create a basic dialog using DialogPrimitive components.

```APIDOC
## Basic dialog using DialogPrimitive components

### Description
Demonstrates the composition of a dialog using its primitive parts.

### Method
N/A (Component Usage Example)

### Endpoint
N/A (Component Usage Example)

### Parameters
N/A

### Request Example
```html
<DialogPrimitive.Wrapper>
  <DialogPrimitive.Header @titleTag="h2">Dialog Title</DialogPrimitive.Header>
  <DialogPrimitive.Description>This is the dialog description.</DialogPrimitive.Description>
  <DialogPrimitive.Body>Content of the dialog goes here.</DialogPrimitive.Body>
  <DialogPrimitive.Footer>
    <button>Cancel</button>
    <button>Confirm</button>
  </DialogPrimitive.Footer>
</DialogPrimitive.Wrapper>
```

### Response
N/A
```

--------------------------------

### Install Design System Components (pnpm)

Source: https://helios.hashicorp.design/getting-started/for-engineers

Installs the HashiCorp design system components package using the pnpm package manager. This is the first step to using the components in your project.

```bash
pnpm add @hashicorp/design-system-components
```

--------------------------------

### Table and Pagination Integration Example

Source: https://helios.hashicorp.design/components/pagination?demoCurrentCursor=bmV4dF9fMjE%3D&demoCurrentPage=4&demoCurrentPageSize=5&demoExtraParam=hello&preserveScrollPosition=true

An example showcasing the integration of the `Hds::Table` component with `Hds::Pagination::Compact`, utilizing query parameters in the URL to maintain UI state.

```APIDOC
## Table and Pagination Integration

### Description
This example demonstrates a practical integration of the `Hds::Table` component with the `Hds::Pagination::Compact` component. It shows how to use URL query parameters to persist the UI state, such as the current page and sorting, between user interactions.

### Method
Component Integration

### Endpoint
N/A (Component Usage)

### Parameters
#### Table Component Arguments
- **@model** (array) - Required - The data model for the table.
- **@columns** (array of objects) - Required - Defines the columns for the table, each with a `key` and `label`.

#### Pagination Component Arguments
- **@route** (string) - Required - The route name for pagination links.
- **@queryFunction** (function) - Required - Function to get current query parameters.
- **@isDisabledPrev** (boolean) - Optional - Disables the previous button.
- **@isDisabledNext** (boolean) - Optional - Disables the next button.

### Request Example
```handlebars
<div class="doc-pagination-table-demo">
  <Hds::Table
    @model={{this.demoPaginatedDataCompact}}
    @columns={{array
      (hash key="id" label="ID")
      (hash key="name" label="Name")
      (hash key="email" label="Email")
      (hash key="role" label="Role")
    }}
  >
    <:body as |B|>
      <B.Tr>
        <B.Td>{{B.data.id}}</B.Td>
        <B.Td>{{B.data.name}}</B.Td>
        <B.Td>{{B.data.email}}</B.Td>
        <B.Td>{{B.data.role}}</B.Td>
      </B.Tr>
    </:body>
  </Hds::Table>
  <Hds::Pagination::Compact
    @route={{this.demoRouteName}}
    @queryFunction={{this.demoQueryFunctionCompact}}
    @isDisabledPrev={{this.demoIsDisabledPrev}}
    @isDisabledNext={{this.demoIsDisabledNext}}
  />
</div>
```

### Response
#### Behavior
- The table displays paginated data.
- The pagination component updates the URL query parameters when page navigation occurs.
- User actions on pagination are reflected in the URL, allowing for state persistence.
```

--------------------------------

### Table and Pagination Integration with URL State (.hbs, .js, .gts)

Source: https://helios.hashicorp.design/components/pagination?demoCurrentCursor=cHJldl9fMjE%3D&demoCurrentPage=1&demoCurrentPageSize=5&demoExtraParam=hello&preserveScrollPosition=true

An example showcasing the integration of the Hds::Table and Hds::Pagination::Compact components. This setup uses URL query parameters to preserve the UI state of the table and pagination, demonstrating a controlled component pattern where external code manages the state.

```handlebars
<div class="doc-pagination-table-demo"> <Hds::Table @model={{this.demoPaginatedDataCompact}} @columns={{array (hash key="id" label="ID") (hash key="name" label="Name") (hash key="email" label="Email") (hash key="role" label="Role") }} > <:body as |B|> <B.Tr> <B.Td>{{B.data.id}}</B.Td> <B.Td>{{B.data.name}}</B.Td> <B.Td>{{B.data.email}}</B.Td> <B.Td>{{B.data.role}}</B.Td> </B.Tr> </:body> </Hds::Table> <Hds::Pagination::Compact @route={{this.demoRouteName}} @queryFunction={{this.demoQueryFunctionCompact}} @isDisabledPrev={{this.demoIsDisabledPrev}} @isDisabledNext={{this.demoIsDisabledNext}} /> </div>
```

```javascript
const tableElement = document.querySelector('.doc-pagination-table-demo .hds-table');
const paginationElement = document.querySelector('.doc-pagination-table-demo .hds-pagination-compact');

tableElement.model = this.demoPaginatedDataCompact;
tableElement.columns = [
  { key: 'id', label: 'ID' },
  { key: 'name', label: 'Name' },
  { key: 'email', label: 'Email' },
  { key: 'role', label: 'Role' }
];

paginationElement.route = this.demoRouteName;
paginationElement.queryFunction = this.demoQueryFunctionCompact;
paginationElement.isDisabledPrev = this.demoIsDisabledPrev;
paginationElement.isDisabledNext = this.demoIsDisabledNext;
```

```gts
<template>
  <div class="doc-pagination-table-demo">
    <Hds::Table
      @model={{this.demoPaginatedDataCompact}}
      @columns={{array
        (hash key="id" label="ID")
        (hash key="name" label="Name")
        (hash key="email" label="Email")
        (hash key="role" label="Role")
      }}
    >
      <:body as |B|>
        <B.Tr>
          <B.Td>{{B.data.id}}</B.Td>
          <B.Td>{{B.data.name}}</B.Td>
          <B.Td>{{B.data.email}}</B.Td>
          <B.Td>{{B.data.role}}</B.Td>
        </B.Tr>
      </:body>
    </Hds::Table>
    <Hds::Pagination::Compact
      @route={{this.demoRouteName}}
      @queryFunction={{this.demoQueryFunctionCompact}}
      @isDisabledPrev={{this.demoIsDisabledPrev}}
      @isDisabledNext={{this.demoIsDisabledNext}}
    />
  </div>
</template>
```

--------------------------------

### Table and Pagination::Compact Integration Example

Source: https://helios.hashicorp.design/components/pagination?demoCurrentPage=2&demoCurrentPageSize=5&preserveScrollPosition=true

This example shows a practical integration of the Hds::Table component with Hds::Pagination::Compact, where the pagination component uses URL query parameters to maintain the table's state.

```APIDOC
## Table and Pagination::Compact Integration Example

### Description
This example illustrates how to integrate the `Hds::Table` component with the `Hds::Pagination::Compact` component. The pagination component utilizes URL query parameters to preserve the UI state, ensuring that table data and pagination are synchronized with the URL.

### Method
N/A (Component Integration)

### Endpoint
N/A (Component Integration)

### Parameters
#### Table Component Arguments
- **@model** (array) - Required - The data model for the table.
- **@columns** (array) - Required - An array of column definitions for the table.

#### Pagination Component Arguments
- **@route** (string) - Required - The name of the route for URL updates.
- **@queryFunction** (function) - Required - Function to get current query parameters.
- **@isDisabledPrev** (boolean) - Optional - Disables the previous button.
- **@isDisabledNext** (boolean) - Optional - Disables the next button.

### Request Example
```handlebars
<div class="doc-pagination-table-demo">
  <Hds::Table
    @model={{this.demoPaginatedDataCompact}}
    @columns={{array
      (hash key="id" label="ID")
      (hash key="name" label="Name")
      (hash key="email" label="Email")
      (hash key="role" label="Role")
    }}
  >
    <:body as |B|>
      <B.Tr>
        <B.Td>{{B.data.id}}</B.Td>
        <B.Td>{{B.data.name}}</B.Td>
        <B.Td>{{B.data.email}}</B.Td>
        <B.Td>{{B.data.role}}</B.Td>
      </B.Tr>
    </:body>
  </Hds::Table>
  <Hds::Pagination::Compact
    @route={{this.demoRouteName}}
    @queryFunction={{this.demoQueryFunctionCompact}}
    @isDisabledPrev={{this.demoIsDisabledPrev}}
    @isDisabledNext={{this.demoIsDisabledNext}}
  />
</div>
```

### Response
N/A (Component Behavior)

### Notes
This setup ensures that when a user interacts with the pagination, the URL is updated, and conversely, if the URL is changed externally (e.g., by navigating back), the pagination and table will reflect the new state.
```

--------------------------------

### Integrated Table and Pagination Example

Source: https://helios.hashicorp.design/components/pagination?demoCurrentPage=8&demoCurrentPageSize=5&preserveScrollPosition=true

This example shows how to integrate the HDS::Table component with HDS::Pagination::Numbered, using URL query parameters to preserve UI state.

```APIDOC
## Integrated Table and Pagination

### Description
This example demonstrates a common use case where a sortable table is paired with a pagination component. The pagination component utilizes URL query parameters to maintain the state of both the table and pagination, ensuring a seamless user experience.

### Method
N/A (Component Integration)

### Endpoint
N/A (Component Integration)

### Parameters
See individual component documentation for `@model`, `@columns`, `@density` for `Hds::Table` and the pagination arguments listed previously.

### Request Example
```handlebars
<div class="doc-pagination-table-demo">
  <Hds::Table
    @model={{this.demoPaginatedDataNumbered}}
    @columns={{array
      (hash key="id" label="ID" isSortable=true)
      (hash key="name" label="Name" isSortable=true)
      (hash key="email" label="Email")
      (hash key="role" label="Role")
    }}
    @density={{if (eq this.demoCurrentPageSize 30) "short" "medium"}}
  >
    <:body as |B|>
      <B.Tr>
        <B.Td>{{B.data.id}}</B.Td>
        <B.Td>{{B.data.name}}</B.Td>
        <B.Td>{{B.data.email}}</B.Td>
        <B.Td>{{B.data.role}}</B.Td>
      </B.Tr>
    </:body>
  </Hds::Table>
  <Hds::Pagination::Numbered
    @totalItems={{this.demoTotalItems}}
    @currentPage={{this.demoCurrentPage}}
    @pageSizes={{this.demoPageSizes}}
    @currentPageSize={{this.demoCurrentPageSize}}
    @route={{this.demoRouteName}}
    @queryFunction={{this.demoQueryFunctionNumbered}}
    @onPageChange={{this.handlePageChange}}
    @onPageSizeChange={{this.handlePageSizeChangeNumbered}}
  />
</div>
```

### Response
N/A (Component Integration)

### Notes
- The `@density` argument for `Hds::Table` dynamically adjusts based on the selected page size.
- The `queryFunction` is crucial for defining how pagination state maps to URL query parameters.
```

--------------------------------

### Table and Pagination Integration Example

Source: https://helios.hashicorp.design/components/pagination?demoCurrentCursor=bmV4dF9fMjE%3D&demoCurrentPage=2&demoCurrentPageSize=5&demoExtraParam=hello&preserveScrollPosition=true

This example demonstrates how to integrate the Hds::Table component with the Hds::Pagination::Numbered component, using URL query parameters to maintain the UI state.

```APIDOC
## Table and Pagination Integration

### Description
This example showcases a common use case where a sortable table is paired with a numbered pagination component. The pagination component is configured to use URL query parameters for state management, ensuring that the current page and items per page are reflected in the URL.

### Method
Component Integration (Client-side)

### Endpoint
N/A (Client-side integration)

### Parameters
This integration involves configuring both the `Hds::Table` and `Hds::Pagination::Numbered` components. Key parameters for pagination include:

#### Pagination Component Arguments (as detailed in the previous snippet):
- **@totalItems**, **@currentPage**, **@pageSizes**, **@currentPageSize**, **@route**, **@queryFunction**, **@onPageChange**, **@onPageSizeChange**

#### Table Component Arguments (relevant for context):
- **@model**: The data to be displayed in the table.
- **@columns**: Configuration for table columns, including sorting capabilities.
- **@density**: Controls the table's density (e.g., 'short', 'medium').

### Request Example
```handlebars
<div class="doc-pagination-table-demo">
  <Hds::Table
    @model={{this.demoPaginatedDataNumbered}}
    @columns={{array
      (hash key="id" label="ID" isSortable=true)
      (hash key="name" label="Name" isSortable=true)
      (hash key="email" label="Email")
      (hash key="role" label="Role")
    }}
    @density={{if (eq this.demoCurrentPageSize 30) "short" "medium"}}
  >
    <:body as |B|>
      <B.Tr>
        <B.Td>{{B.data.id}}</B.Td>
        <B.Td>{{B.data.name}}</B.Td>
        <B.Td>{{B.data.email}}</B.Td>
        <B.Td>{{B.data.role}}</B.Td>
      </B.Tr>
    </:body>
  </Hds::Table>
  <Hds::Pagination::Numbered
    @totalItems={{this.demoTotalItems}}
    @currentPage={{this.demoCurrentPage}}
    @pageSizes={{this.demoPageSizes}}
    @currentPageSize={{this.demoCurrentPageSize}}
    @route={{this.demoRouteName}}
    @queryFunction={{this.demoQueryFunctionNumbered}}
    @onPageChange={{this.handlePageChange}}
    @onPageSizeChange={{this.handlePageSizeChangeNumbered}}
  />
</div>
```

### Response
N/A (Client-side integration)

### Error Handling
Ensure that the `@route` or other routing arguments are correctly passed to the pagination component if URL state management is desired. The table's data (`@model`) should be dynamically updated based on the pagination state.
```

--------------------------------

### Install and Use HDS Icons

Source: https://helios.hashicorp.design/getting-started/for-engineers

Provides the command to install the HDS components package and demonstrates the syntax for rendering an icon component in Ember templates.

```Bash
pnpm add @hashicorp/design-system-components
```

```Handlebars
<Hds::Icon @name="info" />
```

--------------------------------

### Dropdown Menu Example

Source: https://helios.hashicorp.design/components/dropdown?tab=accessibility

This example demonstrates how to use the Dropdown component to create a menu with a toggle button, title, description, interactive items, and a separator. It utilizes contextual components for flexibility.

```HBS
<Hds::Dropdown as |D|> <D.ToggleButton @text="Menu" /> <D.Title @text="Title Text" /> <D.Description @text="Descriptive text goes here." /> <D.Interactive @href="#">Add</D.Interactive> <D.Interactive @href="#">Add More</D.Interactive> <D.Interactive @href="#">Add Another Thing Too</D.Interactive> <D.Separator /> <D.Interactive @route="components" @icon="trash" @color="critical">Delete</D.Interactive> </Hds::Dropdown>
```

--------------------------------

### Table and Pagination Integration Example

Source: https://helios.hashicorp.design/components/pagination?demoCurrentCursor=cHJldl9fMjE%3D&demoCurrentPage=1&demoCurrentPageSize=5&demoExtraParam=hello&preserveScrollPosition=true

This example demonstrates how to integrate the Hds::Table component with the Hds::Pagination::Numbered component. It shows how to pass paginated data to the table and configure the pagination component to work with routing, updating the URL based on page and page size changes.

```APIDOC
## Integrating Hds::Table with Hds::Pagination::Numbered

### Description
This example showcases a common use case: displaying paginated data in an Hds::Table component, controlled by an Hds::Pagination::Numbered component. The pagination component is configured to use routing, meaning that changes in page number or items per page will update the URL's query parameters. The table receives its data from the paginated results.

### Method
Not Applicable (Component Integration)

### Endpoint
Not Applicable (Component Integration)

### Parameters
#### Hds::Table Arguments
- **@model** (Array) - Required - The data to be displayed in the table.
- **@columns** (Array<Object>) - Required - Defines the table columns, including headers and sortability.
- **@density** (String) - Optional - Controls the table row density ('short' or 'medium').

#### Hds::Pagination::Numbered Arguments (as shown in previous snippet)
- **@totalItems**, **@currentPage**, **@pageSizes**, **@currentPageSize**, **@route**, **@queryFunction**, **@onPageChange**, **@onPageSizeChange**

### Request Example
```handlebars
<div class="doc-pagination-table-demo">
  <Hds::Table
    @model={{this.demoPaginatedDataNumbered}}
    @columns={{array
      (hash key="id" label="ID" isSortable=true)
      (hash key="name" label="Name" isSortable=true)
      (hash key="email" label="Email")
      (hash key="role" label="Role")
    }}
    @density={{if (eq this.demoCurrentPageSize 30) "short" "medium"}}
  >
    <:body as |B|>
      <B.Tr>
        <B.Td>{{B.data.id}}</B.Td>
        <B.Td>{{B.data.name}}</B.Td>
        <B.Td>{{B.data.email}}</B.Td>
        <B.Td>{{B.data.role}}</B.Td>
      </B.Tr>
    </:body>
  </Hds::Table>
  <Hds::Pagination::Numbered
    @totalItems={{this.demoTotalItems}}
    @currentPage={{this.demoCurrentPage}}
    @pageSizes={{this.demoPageSizes}}
    @currentPageSize={{this.demoCurrentPageSize}}
    @route={{this.demoRouteName}}
    @queryFunction={{this.demoQueryFunctionNumbered}}
    @onPageChange={{this.handlePageChange}}
    @onPageSizeChange={{this.handlePageSizeChangeNumbered}}
  />
</div>
```

### Response
#### Success Response (UI Rendering)
- Displays a table with sortable columns and paginated data.
- Pagination controls below the table allow users to navigate pages and change items per page.
- URL query parameters (e.g., `?page=2&pageSize=10`) are updated dynamically.

#### Response Example
(UI Rendering - No direct API response)

### Notes
- The `@density` argument for `Hds::Table` can be dynamically set based on the selected page size from the pagination component.
- The `queryFunction` is crucial for defining how the pagination state translates into URL query parameters.
```

--------------------------------

### Ember ApplicationState Component Example

Source: https://helios.hashicorp.design/components/application-state

This snippet demonstrates the usage of the ApplicationState component in an Ember.js application. It includes a header, body with descriptive text, and a footer with action buttons and a link. This component is useful for displaying messages like 'No templates have been created yet' and guiding users through initial setup or actions.

```handlebars
<div class="doc-application-state-demo-heading">
  <Hds::Text::Display @tag="h1" @size="500">Templates</Hds::Text::Display>
</div>
<Hds::ApplicationState as |A|>
  <A.Header @title="No templates have been created yet" @titleTag="h2" />
  <A.Body
    @text="Make a template to easily provision infrastructure for any Waypoint application. You’ll need a Terraform co-node module and instructions for your application developers."
  />
  <A.Footer as |F|>
    <F.Button @icon="plus" @text="Create a template" />
    <F.Button @icon="upload" @text="Import" @color="secondary" />
    <F.LinkStandalone
      @icon="docs-link"
      @text="Learn more"
      @href="/components/application-state"
      @iconPosition="trailing"
    />
  </A.Footer>
</Hds::ApplicationState>
```

--------------------------------

### Ember Component for Donut Chart

Source: https://helios.hashicorp.design/patterns/data-visualization

An example of an Ember.js component that utilizes the Carbon Charts DonutChart. It includes setup for data, options, and chart instantiation within the component's lifecycle.

```javascript
// app/components/demo-carbon-donut/index.js

import Component from '@glimmer/component';
import { action } from '@ember/object';

import { DonutChart } from '@carbon/charts';
import data from './data';
import options from './options';
import '@carbon/charts/styles.css';

export default class DemoCarbonDonut extends Component {
  chart = null;

  @action
  setupChart(element) {
    // Merge the dynamic options into the default options
    const chartOptions = {
      ...options,
      title: this.args.title || options.title,
      color: {
        scale: this.args.colorMap,
      },
    };

    // Create the DonutChart instance
    this.chart = new DonutChart(element, {
      data,
      options: chartOptions,
    });
  }
}
```

--------------------------------

### CharacterCount: Set Max Length

Source: https://helios.hashicorp.design/components/form/text-input?tab=code

This example shows how to use the @maxLength argument on the CharacterCount component to limit the user's input to a specific number of characters. The component guides the user by displaying the remaining characters.

```Glimmer
<Hds::Form::TextInput::Field @value={{this.value}} name="demo-cluster-name" {{on "input" this.updateValue}} as |F|> <F.Label>Cluster name</F.Label> <F.CharacterCount @maxLength={{30}} /> </Hds::Form::TextInput::Field>
```

--------------------------------

### HBS Textarea with Min Character Count

Source: https://helios.hashicorp.design/components/form/textarea

This example shows how to configure the Hds::Form::Textarea::Field component with a CharacterCount to enforce a minimum character requirement. The `@minLength` attribute is set to 100, and the component guides the user to meet this length.

```HBS
<Hds::Form::Textarea::Field @value={{this.value}} name="demo-description" {{on "input" this.updateValue}} as |F|> <F.Label>Short description</F.Label> <F.CharacterCount @minLength={{100}} /> </Hds::Form::Textarea::Field>
```

--------------------------------

### Create Responsive Grid Layouts

Source: https://helios.hashicorp.design/layouts/grid

Demonstrates how to define responsive column widths by passing a hash object to the @columnWidth argument. This allows for different column percentages based on HDS breakpoints (sm, md, lg, xl, xxl).

```handlebars
<Hds::Layout::Grid @columnWidth={{hash sm="100%" md="50%" lg="33.33%" xl="25%" xxl="20%"}} @gap="16">
  <Doc::Placeholder @height="40px" @text="Item 1" @background="#e4c5f3" />
  <Doc::Placeholder @height="40px" @text="Item 2" @background="#e5ffd2" />
  <Doc::Placeholder @height="40px" @text="Item 3" @background="#d2f4ff" />
  <Doc::Placeholder @height="40px" @text="Item 4" @background="#fff8d2" />
  <Doc::Placeholder @height="40px" @text="Item 5" @background="#f3d9c5" />
</Hds::Layout::Grid>
```

--------------------------------

### Multiple Super Select Field Example

Source: https://helios.hashicorp.design/components/form/super-select

Illustrates how to use the `Form::SuperSelect::Multiple::Field` component for multiple selections. This component provides a complete field with the Super Select control, label, helper text, and error messaging. It relies on `ember-power-select` and requires proper setup and style imports.

```handlebars
<Hds::Form::SuperSelect::Multiple::Field @onChange={{fn (mut this.SELECTED_OPTIONS)}} @selected={{this.SELECTED_OPTIONS}} @options={{this.OPTIONS}} @searchEnabled={{true}} as |F| > <F.Label>This is the label</F.Label> <F.Options>{{F.options}}</F.Options> </Hds::Form::SuperSelect::Multiple::Field>
```

```javascript
<Hds::Form::SuperSelect::Multiple::Field
  @onChange={{fn (mut this.SELECTED_OPTIONS)}}
  @selected={{this.SELECTED_OPTIONS}}
  @options={{this.OPTIONS}}
  @searchEnabled={{true}}
  as |F|
>
  <F.Label>This is the label</F.Label>
  <F.Options>{{F.options}}</F.Options>
</Hds::Form::SuperSelect::Multiple::Field>
```

--------------------------------

### Modal with Form Example

Source: https://helios.hashicorp.design/components/modal

Demonstrates how to implement a Modal dialog containing a form, including focus management and confirmation messages.

```APIDOC
## Modal with Form Example

### Description
This example shows a Modal dialog that contains a form. It includes setting initial focus on the first form input using `autofocus`, associating the submit button with the form using the `form` attribute, and handling form submission and modal closing.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
N/A (Component Usage)

### Request Example
```html
<Hds::Button @text="Open form modal" @color="secondary" {{on "click" this.activateModal}} />

{{#if this.isOpen}}
  <Hds::Modal id="form-modal" @onClose={{this.deactivateModal}} as |M|>
    <M.Header>
      Why do you want to leave the beta?
    </M.Header>
    <M.Body>
      <Hds::Form id="leaving-beta-form" {{on "submit" this.submitForm}} as |FORM|>
        <FORM.Section>
          <Hds::Form::Select::Field autofocus @width="100%" as |F|>
            <F.Label>Select the primary reason</F.Label>
            <F.Options>
              <option></option>
            </F.Options>
          </Hds::Form::Select::Field>
          <Hds::Form::Textarea::Field @isOptional={{true}} as |F|>
            <F.Label>Your feedback</F.Label>
          </Hds::Form::Textarea::Field>
        </FORM.Section>
      </Hds::Form>
    </M.Body>
    <M.Footer as |F|>
      <Hds::ButtonSet>
        <Hds::Button type="submit" form="leaving-beta-form" @text="Leave Beta" />
        <Hds::Button type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
      </Hds::ButtonSet>
    </M.Footer>
  </Hds::Modal>
{{/if}}
```

### Response
N/A (Component Usage)
```

--------------------------------

### Import CSS Helper Classes

Source: https://helios.hashicorp.design/foundations/focus-ring

Shows how to import the necessary CSS helper files for focus rings in product applications or the HashiCorp developer platform.

```scss
// for product applications
@import "~@hashicorp/design-system-tokens/dist/products/css/helpers/focus-ring.css";

// for hashicorp developer platform
@import "~@hashicorp/design-system-tokens/dist/devdot/css/helpers/focus-ring.css";
```

--------------------------------

### Interactive Card Example

Source: https://helios.hashicorp.design/components/card

Example of an interactive card component with dynamic elevation for different states.

```APIDOC
## Interactive states
The `@level`, `@levelHover`, and `@levelActive` arguments can be used to declare the specific elevation of the Card for each interactive state. Following the guidelines, this example transitions between _mid → high → mid_ elevation for the corresponding interactive states; _default → hover → active_.

```html
<div class="doc-card-interactive-demo">
  <Hds::Card::Container @level="mid" @levelHover="high" @levelActive="mid" @hasBorder={{true}}>
    <a href="#">
      [Your static content here]
    </a>
  </Hds::Card::Container>
</div>
```

```scss
.doc-card-interactive-demo {
  .hds-card__container {
    a {
      display: block;
      padding: 16px;
      border-radius: inherit;

      &:focus {
        outline: none;
        box-shadow: var(--token-focus-ring-action-box-shadow);
      }
    }
  }
}
```
```

--------------------------------

### Indicating Status Example

Source: https://helios.hashicorp.design/components/stepper/indicator

Example of how to change the status of the Task Indicator component using the `@status` argument.

```APIDOC
## Indicating Status

To change the status of the Task Indicator, set the `@status` argument to `incomplete`, `progress`, `processing`, or `complete`.

### Request Example
```handlebars
<Hds::Stepper::Task::Indicator @status="progress" @isInteractive={{true}} />
<Hds::Stepper::Task::Indicator @status="processing" @isInteractive={{true}} />
<Hds::Stepper::Task::Indicator @status="complete" @isInteractive={{true}} />
```
```

--------------------------------

### Install @hashicorp/flight-icons

Source: https://helios.hashicorp.design/getting-started/for-engineers

Installs the Flight Icons package using pnpm. This package provides SVG assets and React components for icons.

```bash
pnpm add @hashicorp/flight-icons
```

--------------------------------

### Implement Responsive Layouts with Breakpoint Mixins

Source: https://helios.hashicorp.design/foundations/breakpoints?tab=code

Demonstrates how to use hds-breakpoint-above and hds-breakpoint-below mixins to create responsive layouts. These mixins allow for cleaner media query management based on standard system breakpoints.

```scss
// from @hashicorp/design-system-components package
@use "mixins/breakpoints" as *;

.my-responsive-layout {
  // this is the default behavior, that covers the range 0px–767px
  display: flex;
  gap: 1rem;
  direction: column;

  // at 768px the layout changes, from a vertical stack to an horizontal one
  @include hds-breakpoint-above('md') {
    direction: row;
  }

  // at larger viewports we increase the spacing between the items
  @include hds-breakpoint-above('xl') {
    gap: 2rem;
  }
}
```

```scss
// from @hashicorp/design-system-components package
@use "mixins/breakpoints" as *;

.my-responsive-layout {
  // this is the default behavior
  display: flex;
  gap: 2rem;
  direction: row;

  // at smaller viewports we decrease the spacing between the items
  @include hds-breakpoint-below('xl') {
    gap: 1rem;
  }

  // at 768px the layout changes, from an horizontal stack to a vertical one
  @include hds-breakpoint-below('md') {
    direction: column;
  }
}
```

--------------------------------

### Install ember-intl for Internationalization (Bash)

Source: https://helios.hashicorp.design/getting-started/for-engineers

Install the ember-intl package as a development dependency in your application using pnpm. This package is essential for handling internationalization within HDS components.

```bash
pnpm add ember-intl
```

--------------------------------

### Install Ember Sass Addon

Source: https://helios.hashicorp.design/getting-started/for-engineers

Installs the ember-cli-sass addon, which is required for processing Sass files within an Ember.js application. This enables the use of Sass syntax and features.

```bash
ember install ember-cli-sass
```

--------------------------------

### Implementing Responsive Layouts with Sass Mixins

Source: https://helios.hashicorp.design/foundations/breakpoints

Demonstrates how to use hds-breakpoint-above and hds-breakpoint-below mixins to create mobile-first and desktop-first responsive layouts.

```scss
@use "mixins/breakpoints" as *;

.my-responsive-layout {
  display: flex;
  gap: 1rem;
  direction: column;

  @include hds-breakpoint-above('md') {
    direction: row;
  }

  @include hds-breakpoint-above('xl') {
    gap: 2rem;
  }
}
```

```scss
@use "mixins/breakpoints" as *;

.my-responsive-layout {
  display: flex;
  gap: 2rem;
  direction: row;

  @include hds-breakpoint-below('xl') {
    gap: 1rem;
  }

  @include hds-breakpoint-below('md') {
    direction: column;
  }
}
```

--------------------------------

### Implement Split Window Dialog Layout

Source: https://helios.hashicorp.design/utilities/dialog-primitive

This example demonstrates how to compose a split-window dialog using the DialogPrimitive wrapper, header, body, and footer sub-components. It utilizes named blocks to structure the content and includes a button set for primary and secondary actions.

```handlebars
<div class="doc-dialog-primitive-grid-layout">
  <div class="doc-dialog-primitive-flex-layout">
    <Hds::Text::Display @tag="h1" @size="500">
      Page title
    </Hds::Text::Display>
    <Doc::Placeholder @text="Main content" @height="100%" @width="100%" @background="#eee" />
  </div>
  <Hds::DialogPrimitive::Wrapper class="doc-dialog-primitive-with-border">
    <:header>
      <Hds::DialogPrimitive::Header @icon="info" @tagline="Tagline" @titleTag="h2">
        Split Window
      </Hds::DialogPrimitive::Header>
    </:header>
    <:body>
      <Hds::DialogPrimitive::Body>
        <Doc::Placeholder @text="Split Window content" @height="10rem" @width="100%" @background="#eee" />
      </Hds::DialogPrimitive::Body>
    </:body>
    <:footer>
      <Hds::DialogPrimitive::Footer>
        <Hds::ButtonSet>
          <Hds::Button type="submit" @text="Primary" />
          <Hds::Button type="button" @text="Secondary" @color="secondary" />
        </Hds::ButtonSet>
      </Hds::DialogPrimitive::Footer>
    </:footer>
  </Hds::DialogPrimitive::Wrapper>
</div>
```

--------------------------------

### Configure Full-Width and Inline Layouts

Source: https://helios.hashicorp.design/components/button?tab=code

Demonstrates how to control button layout behavior using @isFullWidth and @isInline attributes.

```handlebars
<Hds::Button @text="Full width button" @isFullWidth={{true}} />
<div class="doc-button-mock-text-align-right">
  <Hds::Button @text="inline layout" @isInline={{true}} />
</div>
```

--------------------------------

### Pagination Component Best Practices

Source: https://helios.hashicorp.design/components/pagination?demoCurrentCursor=cHJldl9fNg%3D%3D&demoExtraParam=hello&preserveScrollPosition=true

Guidelines for optimal keyboard navigation and user experience with the Pagination component.

```APIDOC
## Pagination Component Best Practices

### Keyboard Navigation
- Numbered pagination generally provides a better user experience, allowing users to jump directly to pages.
- This is only supported for applications with offset pagination.
- Users can navigate between pagination controls using `tab` and trigger actions with `enter`.
```

--------------------------------

### Numbered Pagination - Customization Examples

Source: https://helios.hashicorp.design/components/pagination?demoCurrentCursor=bmV4dF9fMjY%3D&demoExtraParam=hello&preserveScrollPosition=true

Provides examples of customizing the Numbered Pagination component using extra arguments for Info, Controls, and SizeSelector, including disabling elements and setting page sizes.

```APIDOC
### Extra arguments

Customize the Info, Controls, and SizeSelector components by providing additional arguments.

#### Example: Hiding Total Items and Size Selector

```html
<Hds::Pagination::Numbered
  @totalItems={{40}}
  @showTotalItems={{false}}
  @showSizeSelector={{false}}
  @pageSizes={{array 5 20 60}}
  @currentPageSize={{20}}
/>
```

This example hides the total items count and the size selector, while also defining custom page sizes and the current page size.

#### Example: Custom Size Selector Label

```html
<Hds::Pagination::Numbered @totalItems={{40}} @sizeSelectorLabel="Per page" />
```

This example customizes the label for the size selector to "Per page".
```

--------------------------------

### Implement Responsive Grid with Breakpoints

Source: https://helios.hashicorp.design/layouts/grid

Demonstrates how to use the Hds::Layout::Grid component with responsive column widths and item spans. It uses a hash object to define different behaviors for small (sm) and medium (md) screen sizes.

```handlebars
<Hds::Layout::Grid @columnWidth={{hash sm="100%" md="33.33%"}} @gap="12" as |LG|>
  <LG.Item @colspan={{hash sm=1 md=2}}>
    <Doc::Placeholder @height="40px" @text="Item 1" @background="#e4c5f3" />
  </LG.Item>

  <Doc::Placeholder @height="40px" @text="Item 2" @background="#e5ffd2" />

  <Doc::Placeholder @height="40px" @text="Item 3" @background="#d2f4ff" />

  <LG.Item @colspan={{hash sm=1 md=2}}>
    <Doc::Placeholder @height="40px" @text="Item 4" @background="#fff8d2" />
  </LG.Item>
</Hds::Layout::Grid>
```
Tokens:
Raw