[Website] 4.21 Release Docs (#2975)

Co-authored-by: Kristin Bradley <[email protected]>
Co-authored-by: Cristiano Rastelli <[email protected]>
Co-authored-by: Cristiano Rastelli <[email protected]>
Co-authored-by: LilithJames-HDS <[email protected]>
Co-authored-by: Heather Larsen <[email protected]>
Co-authored-by: Lee White <[email protected]>
Co-authored-by: Majed <[email protected]>
Co-authored-by: Jory Tindall <[email protected]>
Co-authored-by: shleewhite <[email protected]>
Co-authored-by: Zack Moore <[email protected]>

Author: 10 people

website/app/styles/doc-components/form/index.scss

@@ -8,4 +8,4 @@
 @use "./label";
 @use "./filter";
 @use "./select";
-
+@use "./layout";

website/app/styles/doc-components/form/layout.scss

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// FORM LAYOUT HELPER COMPONENTS
+
+#show-content-components-form-layout {
+  .doc-form-layout-mobile-view {
+    position: relative;
+    max-width: 280px;
+    padding: 16px 16px 65px;
+    background: #fff;
+    border: 1px solid;
+    border-radius: 16px;
+    aspect-ratio: 9 / 16;
+
+    // home button
+    &::before {
+      position: absolute;
+      inset: auto 0 15px 0;
+      width: 40px;
+      height: 40px;
+      margin: 0 auto;
+      background: var(--token-color-palette-neutral-200);
+      border-radius: 50%;
+      content: "";
+    }
+
+    // simulate responsive layout
+    .hds-form__section-multi-field-group {
+      flex-direction: column;
+      align-items: start;
+    }
+  }
+}

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

@@ -11,4 +11,17 @@
       margin-top: 16px;
     }
   }
+
+  .doc-advanced-table-cell-content-div {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .doc-advanced-table-text-truncate {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 }

website/cspell-config/dictionary-docs-examples.txt

@@ -6,6 +6,8 @@ O’Shaughnessy
 pharell
 Picoult
 Tartt
+Maxene
+Aishah
 
 # Example Spanish words
 adicional
@@ -22,4 +24,4 @@ Tcqv
 tyng
 
 # Example incorrectly spelled word
-organisation
+organisation

website/docs/components/app-header/partials/code/component-api.md

@@ -50,6 +50,12 @@ The `AppHeader::HomeLink` component uses the generic `Hds::Interactive` componen
   <C.Property @name="icon" @type="string" @required={{true}}>
     Used to show an icon. Any [icon](/icons/library) name is accepted. [See guidance on which icon to use depending on the product](/components/app-header#home-link).
   </C.Property>
+  <C.Property @name="text" @type="string" @required={{true}}>
+    Used to display text inline with the logo. If `@isIconOnly` is set to `true`, this value will instead be passed to the `aria-label` of the `<a>` tag.
+  </C.Property>
+  <C.Property @name="isIconOnly" @type="boolean" @default="true">
+    Indicates if the Home Link will only contain a icon/logo. If set to `false`, the `@text` property will be rendered adjacent to the logo. 
+  </C.Property>
   <C.Property @name="color" @type="string">
     Used to specify an optional custom color provided as any valid CSS color. For more details on acceptable values, see the [Icon color argument](/components/icon?tab=code#fill). If unspecified, it will use the App Headers’s default white text color.
   </C.Property>
@@ -65,9 +71,6 @@ The `AppHeader::HomeLink` component uses the generic `Hds::Interactive` componen
   <C.Property @name="isRouteExternal" @type="boolean" @default="false">
     This controls whether the “LinkTo” is external to the Ember engine, in which case it will use a `<LinkToExternal>` for the `@route`.
   </C.Property>
-  <C.Property @name="ariaLabel" @type="string" @required={{true}}>
-    The value of the aria-label. If no text value is defined, an error will be thrown.
-  </C.Property>
   <C.Property @name="...attributes">
     This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
   </C.Property>

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

@@ -53,7 +53,7 @@ When adding Dropdown components within the App Header, be sure to set `enableCol
 
 The `Hds::AppHeader::HomeLink` child component should be yielded within the `<:logo>` block. It provides consistent branding and navigates the user to the “home” or main dashboard page.
 
-It requires a value for the `@icon` and `@ariaLabel` arguments.
+It requires a value for the `@icon` and `@text` arguments.
 
 It is built on top of the [`Hds::Interactive` component](/utilities/interactive), so it accepts all its routing arguments (eg. `@href`, `@route`, `@query`, `@model(s)`, etc.).
 
@@ -68,7 +68,7 @@ probably need to be set to `true` (or omitted to rely on defaults)
   <:logo>
     <Hds::AppHeader::HomeLink 
       @icon="hashicorp" 
-      @ariaLabel="HashiCorp home menu"
+      @text="HashiCorp home menu"
       @href="/"
     />
   </:logo>
@@ -84,6 +84,26 @@ probably need to be set to `true` (or omitted to rely on defaults)
 </Hds::AppHeader>
 ```
 
+When `@isIconOnly` is set to `false`, the `@text` argument displays text inline with the logo and can be used to more deliberately title an application or provide other differentiating text.
+
+```handlebars
+<Hds::AppHeader @hasA11yRefocus={{false}}>
+  <:logo>
+    <Hds::AppHeader::HomeLink 
+      @icon="terraform" 
+      @text="Admin Console"
+      @isIconOnly={{false}}
+      @href="/"
+    />
+  </:logo>
+
+  <:utilityActions>
+    <Doc::Placeholder @height="2em" @width="auto" @text="HelpMenu" @background="#e4e4e4" />
+    <Doc::Placeholder @height="2em" @width="auto" @text="UserMenu" @background="#e4e4e4" />
+  </:utilityActions>
+</Hds::AppHeader>
+```
+
 The `HomeLink` also accepts optional arguments; for example, it’s possible to provide a custom color for the icon if needed:
 
 ```handlebars
@@ -95,7 +115,7 @@ probably need to be set to `true` (or omitted to rely on defaults)
   <:logo>
     <Hds::AppHeader::HomeLink 
       @icon="terraform" 
-      @ariaLabel="Terraform home menu"
+      @text="Terraform home menu"
       @color="var(--token-color-terraform-brand)"
       @href="/"
     />
@@ -125,7 +145,7 @@ probably need to be set to `true` (or omitted to rely on defaults)
   <:logo>
     <Hds::AppHeader::HomeLink 
       @icon="hashicorp" 
-      @ariaLabel="HashiCorp home menu"
+      @text="HashiCorp home menu"
       @href="/"
     />
   </:logo>
@@ -159,7 +179,7 @@ probably need to be set to `true` (or omitted to rely on defaults)
   <:logo>
     <Hds::AppHeader::HomeLink 
       @icon="hashicorp" 
-      @ariaLabel="HashiCorp home menu"
+      @text="HashiCorp home menu"
       @href="/"
     />
   </:logo>

website/docs/components/app-header/partials/guidelines/guidelines.md

@@ -31,6 +31,12 @@ For cloud products, the icon should always be `hcp`. For standalone or open-sour
 
 ![Examples of the Home link using different logos](/assets/components/app-header/app-header-home-link.png)
 
+#### Text
+
+The home link supports an optional `text` property to more explicitly title an application. We recommend using this property sparingly as it's often unnecessary to title a HashiCorp application in such an explicit manner.
+
+![Example of text displayed in the Home Link that reads Admin UI](/assets/components/app-header/app-header-home-link-text.png)
+
 ### Context switcher
 
 !!! Info

website/docs/components/form/key-value-inputs/index.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class Index extends Component {
+  @tracked updatingRowsExampleData = [
+    { id: 1, name: 'Judith Maxene', email: '[email protected]' },
+    { id: 2, name: 'Elmira Aishah', email: '[email protected]' },
+  ];
+  @tracked maxRowsExampleData = [
+    { id: 1, os: 'darwin' },
+    { id: 2, os: 'linux' },
+    { id: 3, os: 'windows' },
+  ];
+
+  @action
+  updatingRowsExampleOnAddRow() {
+    this.updatingRowsExampleData = [
+      ...this.updatingRowsExampleData,
+      { name: '', email: '', id: this.updatingRowsExampleData.length + 1 },
+    ];
+  }
+
+  @action
+  updatingRowsExampleOnDeleteRow(rowToDelete) {
+    this.updatingRowsExampleData = this.updatingRowsExampleData.filter(
+      (item) => item.id !== rowToDelete.id,
+    );
+  }
+
+  @action
+  maxRowsExampleOnAddRow() {
+    this.maxRowsExampleData = [
+      ...this.maxRowsExampleData,
+      { name: '', email: '', id: this.maxRowsExampleData.length + 1 },
+    ];
+  }
+
+  @action
+  maxRowsExampleOnDeleteRow(rowToDelete) {
+    this.maxRowsExampleData = this.maxRowsExampleData.filter(
+      (item) => item.id !== rowToDelete.id,
+    );
+  }
+}

website/docs/components/form/key-value-inputs/index.md

@@ -0,0 +1,45 @@
+---
+title: Key Value Inputs
+description: >-
+  Rows of related inputs that can be individually added & deleted.
+caption: Rows of related inputs that can be individually added & deleted.
+links:
+  figma: >-
+    https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?m=auto&node-id=82680-53759&t=MwE1WlTzeH6NeUOf-1
+  github: >-
+    https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/form/key-value-inputs
+related:
+  - components/form/text-input
+  - components/form/masked-input
+  - components/form/select
+  - components/form/textarea
+previewImage: assets/illustrations/components/form/key-value-inputs.jpg
+navigation:
+  keywords:
+    - key
+    - value
+    - pair
+    - input
+    - form
+---
+
+<section data-tab="Guidelines">
+  @include "partials/guidelines/guidelines.md"
+</section>
+
+<section data-tab="Code">
+  @include "partials/code/how-to-use.md"
+  @include "partials/code/component-api.md"
+</section>
+
+<section data-tab="Specifications">
+  @include "partials/specifications/anatomy.md"
+</section>
+
+<section data-tab="Accessibility">
+  @include "partials/accessibility/accessibility.md"
+</section>
+
+<section data-tab="Version history">
+  @include "partials/version-history/version-history.md"
+</section>

website/docs/components/form/key-value-inputs/partials/accessibility/accessibility.md

@@ -0,0 +1,15 @@
+## Conformance rating
+
+<Doc::Badge @type="warning">Conditionally conformant</Doc::Badge>
+
+To be conformant, a Legend must be included in the `:header` named block identifying the purpose of the input groups.
+
+## Applicable WCAG Success Criteria
+
+This section is for reference only. This component intends to conform to the following WCAG Success Criteria:
+
+<Doc::WcagList @criteriaList={{array "1.3.1" "1.3.2" "1.3.4" "1.3.5" "1.4.1" "1.4.3" "1.4.4" "1.4.10" "1.4.11" "1.4.12" "2.1.1" "2.1.2" "2.4.6" "2.4.7" "3.2.1" "3.2.2" "3.2.4" "3.3.1" "3.3.2" "4.1.2" }} />
+
+---
+
+<Doc::A11ySupport />