Merge pull request #1153 from hashicorp/new-docs-website/fix-links

New docs website / Fix links

website/docs/components/alert/partials/code/component-api.md

@@ -8,7 +8,7 @@
     Sets the color scheme for `background`, `border`, `title`, and `description`, which **cannot** be overridden.<br/><br/>`color` results in a default `icon`, which **can** be overridden.
   </C.Property>
   <C.Property @name="icon" @type="string | false">
-    Override the default `icon` name, which is determined by the `color` argument.<br/><br/>Accepts any [icon](/foundations/icons) name, or `false`, for no icon.
+    Override the default `icon` name, which is determined by the `color` argument.<br/><br/>Accepts any [icon](/icons/library) name, or `false`, for no icon.
   </C.Property>
   <C.Property @name="onDismiss" @type="function">
     The alert can be dismissed by the user. When a function is passed, the "dismiss" button is displayed.
@@ -30,10 +30,10 @@ Title, description, actions, and generic content are passed into the alert as yi
     A container that yields its content inside the `"description"` block. Content inherits its style.<br/><br/>Accepts complex content, such as logic/conditionals, HTML elements, other Ember components, etc. Styling is applied for simple HTML elements, such as `strong`, `em`, `a`, `code/pre`. Application teams will need to style the rest of the content.<br/><br/>This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
   </C.Property>
   <C.Property @name="<[A].Button>" @type="yielded component">
-    A yielded `HDS::Button` component. It exposes the same API of the [`Button` component](/components/button/), apart from the `@size` argument, which is pre-defined to be `small`, and the `@color` argument that accepts only `secondary` or `tertiary`.
+    A yielded `HDS::Button` component. It exposes the same API of the [`Button` component](/components/button), apart from the `@size` argument, which is pre-defined to be `small`, and the `@color` argument that accepts only `secondary` or `tertiary`.
   </C.Property>
   <C.Property @name="<[A].Link::Standalone>" @type="yielded component">
-    A yielded `HDS::Link::Standalone` component. It exposes the same API of the [`Link::Standalone` component](/components/link/standalone/), apart from the `@size` argument, which is pre-defined to be `small`.
+    A yielded `HDS::Link::Standalone` component. It exposes the same API of the [`Link::Standalone` component](/components/link/standalone), apart from the `@size` argument, which is pre-defined to be `small`.
   </C.Property>
   <C.Property @name="<[A].Generic>" @type="yielded component">
     A component that yields its content.

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

@@ -56,7 +56,7 @@ A different color can be applied to the alert using the `color` argument. This w
 
 ### Icons
 
-A different icon can be used in the alert using the `icon` argument. This accepts any [Helios icon](/foundations/icons/) name.
+A different icon can be used in the alert using the `icon` argument. This accepts any [Helios icon](/icons/library) name.
 
 ```handlebars
 <Hds::Alert @type="inline" @color="success" @icon="bulb" as |A|>

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

@@ -127,7 +127,7 @@ Avoid using critical buttons in alerts. We handle the prominence and importance
 
 #### Links
 
-Use [standalone links](/components/link/standalone) when an action takes the user to a new destination (URL). Follow the standalone link [usage guidelines](https://www.figma.com/file/8I4u10OyhYZIea4MpXwJwm/Design-guidelines-migration?node-id=2522%3A8014) to determine what variant “type” to use.
+Use [standalone links](/components/link/standalone) when an action takes the user to a new destination (URL). Follow the standalone link [usage guidelines](https://www.figma.com/file/noyY6dUMDYjmySpHcMjhkN/HDS-Product---Components?node-id=2522%3A8014&t=s1vlvHztHFnd5T9i-1) to determine what variant “type” to use.
 
 <Hds::Alert @type="inline" as |A|>
   <A.Title>Links in alerts</A.Title>

website/docs/components/alert/partials/guidelines/overview.md

@@ -1,4 +1,4 @@
-Use alerts to display brief but important system-generated messages. They attract the user’s attention without interrupting their task. For messages that are the result of a user’s actions, see [Toast](/components/toast/).
+Use alerts to display brief but important system-generated messages. They attract the user’s attention without interrupting their task. For messages that are the result of a user’s actions, see [Toast](/components/toast).
 
 ## Types of alerts
 

website/docs/components/badge-count/partials/guidelines/overview.md

@@ -8,7 +8,7 @@ To display version numbers (e.g., “v1.2.0”), collection counts in tabs, or s
 
 ### When not to use
 
-To display non-numeric information, consider [Badge](/components/badge/).
+To display non-numeric information, consider [Badge](/components/badge).
 
 ### Type
 
@@ -35,4 +35,4 @@ There are three sizes: small, medium, and large.
 
 ## Related
 
-- [Badge](/components/badge/)
+- [Badge](/components/badge)

website/docs/components/badge/partials/code/component-api.md

@@ -8,7 +8,7 @@
     The text of the badge or value of the screen-reader only element if `isIconOnly` is set to `true`. If no text value is defined an error will be thrown.
   </C.Property>
   <C.Property @name="icon" @type="string">
-    Use this parameter to show an icon. Any Helios [icon name](/foundations/icons) is acceptable.
+    Use this parameter to show an icon. Any Helios [icon name](/icons/library) is acceptable.
   </C.Property>
   <C.Property @name="isIconOnly" @type="boolean" @values={{array "false" "true" }} @default="false">
     This indicates if the button will only contain an icon. An internal check is in place to ensure that accessible text is still applied to the component.

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

@@ -132,4 +132,4 @@ Badges come in a few icon and text combinations; text only, icon only, and icon
 
 ## Related
 
-- [Badge Count](/components/badge-count/)
+- [Badge Count](/components/badge-count)

website/docs/components/breadcrumb/partials/code/component-api.md

@@ -28,7 +28,7 @@ The Breadcrumb component is composed of three different parts, each with their o
     The text displayed within the item.
   </C.Property>
   <C.Property @name="icon" @type="string">
-    Use to show an icon. Any Helios [icon name](/foundations/icons/library) is acceptable.
+    Use to show an icon. Any Helios [icon name](/icons/library) is acceptable.
   </C.Property>
   <C.Property @name="route/models/model/query">
     These parameters are passed down as arguments to the `<LinkTo>` component.
@@ -45,7 +45,7 @@ The Breadcrumb component is composed of three different parts, each with their o
 
 <Doc::ComponentApi as |C|>
   <C.Property @name="yield">
-    Elements passed as children of this child component are yielded to the content of the [Disclosure](../utilities/disclosure) component (used to show/hide the yielded Breadcrumb Items via a "toggle" button).
+    Elements passed as children of this child component are yielded to the content of the [Disclosure](/utilities/disclosure) component (used to show/hide the yielded Breadcrumb Items via a "toggle" button).
   </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).

website/docs/components/button/partials/code/component-api.md

@@ -7,7 +7,7 @@
     Text of the button or value of `aria-label` if `isIconOnly` is set to `true`. If no text value is defined an error will be thrown.
   </C.Property>
   <C.Property @name="icon" @type="string">
-    Used to show an icon. Any [Helios icon name](/foundations/icons/library) is accepted. 
+    Used to show an icon. Any [Helios icon name](/icons/library) is accepted. 
     <br/><br/>
     Tertiary buttons have transparent backgrounds, and interactive elements must communicate interactivity with more than just color. Therefore, a leading or trailing icon is required when using the `tertiary` color. [WCAG 2.1 Criterion 1.4.1: Use of Color (Level A)](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=141#use-of-color)
   </C.Property>

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

@@ -99,7 +99,7 @@ If you’re passing a `@href` or a `@route` argument to the component, this will
 
 !!! Info
 
-The `Hds::Button` component uses the generic `Hds::Interactive` component. For more details about how this utility component works please refer to [its documentation page](/utilities/interactive/).
+The `Hds::Button` component uses the generic `Hds::Interactive` component. For more details about how this utility component works please refer to [its documentation page](/utilities/interactive).
 !!!
 
 #### With @href
@@ -116,7 +116,7 @@ If you pass a `@href` argument a `<a>` link will be generated.
 
 If you pass a `@route` argument a `<a>` link will be generated using a `<LinkTo>` Ember component. All of the standard arguments for the `<LinkTo/LinkToExternal>` components are supported (eg. `models/model/query/current-when/replace`).
 
-If the route is external to your current engine you have to pass `@isRouteExternal={{true}}` so it will use `<LinkToExternal>` instead of `<LinkTo>` for the `@route`. For more details see the [Hds::Interactive component](/utilities/interactive/).
+If the route is external to your current engine you have to pass `@isRouteExternal={{true}}` so it will use `<LinkToExternal>` instead of `<LinkTo>` for the `@route`. For more details see the [Hds::Interactive component](/utilities/interactive).
 
 ```handlebars
 <Hds::Button @text="Back to homepage" @icon="arrow-left" @route="index" />

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

@@ -84,7 +84,7 @@ ToggleButtons come in two sizes: **small** and **medium**. This allows for place
 
 Open Toggles use Helios icon `chevron-up`, while closed Toggles use `chevron-down`.
 
-ToggleButtons require a visible chevron to indicate interactivity and provide distinction between Dropdowns and standard Buttons. 
+ToggleButtons require a visible chevron to indicate interactivity and provide distinction between Dropdowns and standard Buttons.
 
 ![Example of open and closed dropdowns](/assets/components/dropdown/dropdown-button-chevrons.png =286x*)
 
@@ -168,11 +168,12 @@ Users may not understand why something is taking additional time to load. If pos
 
 ### Icon usage
 
-Icons in ListItems are optional, and we recommend letting the text speak for itself unless an icon provides additional value. 
+Icons in ListItems are optional, and we recommend letting the text speak for itself unless an icon provides additional value.
 
 We don’t recommend mixing and matching icon use; that’s to say, if using an icon in one ListItem, use an icon in all ListItems. Doing so keeps the text aligned so the eye can scan the list of options more easily.
 
 !!! Do
+
 <Doc::ListContainer class="hds-dropdown-list">
   <Hds::Dropdown::ListItem::Title @text="About" />
   <Hds::Dropdown::ListItem::Interactive @text="About Consul" @color="action" @icon="play-circle" />
@@ -182,6 +183,7 @@ We don’t recommend mixing and matching icon use; that’s to say, if using an
 !!!
 
 !!! Dont
+
 <Doc::ListContainer class="hds-dropdown-list">
   <Hds::Dropdown::ListItem::Title @text="About" />
   <Hds::Dropdown::ListItem::Interactive @text="About Consul" @color="action" @icon="play-circle" />
@@ -206,4 +208,3 @@ While icons are optional, we recommend using a relevant icon for Critical ListIt
 There is no character limit for interactive ListItems, but we recommend keeping them short and concise (~36 characters).
 
 Take care to use dropdowns correctly. A crowded or overly complex dropdown can lead to a frustrating user experience, especially for assistive technology users. Contact the [Design Systems Team](/about/support) to discuss alternative options if a dropdown feels too complex.
-

website/docs/components/form/checkbox/partials/code/component-api.md

@@ -29,18 +29,18 @@ The Checkbox component has three different variants with their own APIs:
 
 <Doc::ComponentApi as |C|>
   <C.Property @name="<[G].Legend>" @type="yielded component">
-    Optional container that yields its content inside the `<legend>` element. The content can be a simple string or a more complex/structured string, in which case it inherits the text style. For details about its API, check the [`Form::Legend`](/components/form/primitives/) component.
+    Optional container that yields its content inside the `<legend>` element. The content can be a simple string or a more complex/structured string, in which case it inherits the text style. For details about its API, check the [`Form::Legend`](/components/form/primitives) component.
   </C.Property>
   <C.Property @name="<[G].HelperText>" @type="yielded component">
-    Container that yields its content inside the “helper text” block at group level. The content can be a simple string or a more complex/structured string, in which case it inherits the text style. For details about its API, check the [`Form::HelperText`](/components/form/primitives/) component.
+    Container that yields its content inside the “helper text” block at group level. The content can be a simple string or a more complex/structured string, in which case it inherits the text style. For details about its API, check the [`Form::HelperText`](/components/form/primitives) component.
     <br/><br/>
     The `id` attribute of the element is automatically generated.
   </C.Property>
   <C.Property @name="<[G].Checkbox::Field>" @type="yielded component">
     Used to yield one or more fields inside the group. For details about its API, check the `Form::Checkbox::Field` API details.
   </C.Property>
   <C.Property @name="<[G].Error>" @type="yielded component">
-    Container that yields its content inside the “error” block at group level. The content can be a simple string or a more complex/structured string, in which case it inherits the text style. For details about its API check the [`Form::Error`](/components/form/primitives/) component.
+    Container that yields its content inside the “error” block at group level. The content can be a simple string or a more complex/structured string, in which case it inherits the text style. For details about its API check the [`Form::Error`](/components/form/primitives) component.
     <br/><br/>
     The `id` attribute of the `Error` element is automatically generated.
   </C.Property>
@@ -77,17 +77,17 @@ The Checkbox component has three different variants with their own APIs:
 
 <Doc::ComponentApi as |C|>
   <C.Property @name="<[F].Label>" @type="yielded component">
-    Container that yields its content inside the `<label>` element. The content can be a simple string or a more complex/structured string, in which case it inherits the text style. For details about its API, check the [`Form::Label`](/components/form/primitives/) component.
+    Container that yields its content inside the `<label>` element. The content can be a simple string or a more complex/structured string, in which case it inherits the text style. For details about its API, check the [`Form::Label`](/components/form/primitives) component.
     <br/><br/>
     The `for` attribute of the label is automatically generated using the `controlId` value of the control.
   </C.Property>
   <C.Property @name="<[F].HelperText>" @type="yielded component">
-    Container that yields its content inside the “helper text” block. The content can be a simple string or a more complex/structured string, in which case it inherits the text style. For details about its API, check the [`Form::HelperText`](/components/form/primitives/) component.
+    Container that yields its content inside the “helper text” block. The content can be a simple string or a more complex/structured string, in which case it inherits the text style. For details about its API, check the [`Form::HelperText`](/components/form/primitives) component.
     <br/><br/>
     The `id` attribute of the element is automatically generated using the `controlId` value of the control.
   </C.Property>
   <C.Property @name="<[F].Error>" @type="yielded component">
-    Container that yields its content inside the “error” block. The content can be a simple string or a more complex/structured string, in which case it inherits the text style. For details about its API, check the [`Form::Error`](/components/form/primitives/) component.
+    Container that yields its content inside the “error” block. The content can be a simple string or a more complex/structured string, in which case it inherits the text style. For details about its API, check the [`Form::Error`](/components/form/primitives) component.
     <br/><br/>
     The `id` attribute of the `Error` element is automatically generated.
   </C.Property>

website/docs/components/form/radio-card/partials/code/component-api.md

@@ -47,15 +47,15 @@
 
 <Doc::ComponentApi as |C|>
   <C.Property @name="<[R].Icon>">
-    Yields an icon inside the card container. For details about its API check the [`icon`](/foundations/icons/usage-guidelines?tab=code) component.
+    Yields an icon inside the card container. For details about its API check the [icon](/icons/usage-guidelines?tab=code) component.
   </C.Property>
   <C.Property @name="<[R].Label>" @type="yielded component">
     A container that yields its content emphasized inside the card.
     <br/><br/>
     This component supports use of [`...attributes`](https://guides.emberjs.com/release/in-depth-topics/patterns-for-components/#toc_attribute-ordering).
   </C.Property>
   <C.Property @name="<[R].Badge>">
-    A badge inside the card container. For details about its API check the [`Badge`](/components/badge/) component.
+    A badge inside the card container. For details about its API check the [Badge](/components/badge) component.
   </C.Property>
   <C.Property @name="<[R].Description>" @type="yielded component">
     A container that yields its content inside the card. The content can be a simple string or a more complex/structured one, in which case it inherits the text style.
@@ -97,18 +97,18 @@ The group of elements is automatically wrapped in a `<fieldset>` element.
 
 <Doc::ComponentApi as |C|>
   <C.Property @name="<[G].Legend>" @type="yielded component">
-    An optional container that yields its content inside the `<legend>` element. The content can be a simple string, or a more complex/structured one (in which case it inherits the text style). For details about its API check the [`Form::Legend`](/components/form/primitives/) component.
+    An optional container that yields its content inside the `<legend>` element. The content can be a simple string, or a more complex/structured one (in which case it inherits the text style). For details about its API check the [`Form::Legend`](/components/form/primitives) component.
   </C.Property>
   <C.Property @name="<[G].HelperText>" @type="yielded component">
-    A container that yields its content inside the "helper text" block (at group level). The content can be a simple string, or a more complex/structured one (in which case it inherits the text style). For details about its API check the [`Form::HelperText`](/components/form/primitives/) component.
+    A container that yields its content inside the "helper text" block (at group level). The content can be a simple string, or a more complex/structured one (in which case it inherits the text style). For details about its API check the [`Form::HelperText`](/components/form/primitives) component.
     <br/><br/>
     The `id` attribute of the element is automatically generated.
   </C.Property>
   <C.Property @name="<[G].RadioCard>" @type="yielded component">
     Used to yield one or more cards inside the group. For details about its API check the `RadioCard` component above.
   </C.Property>
   <C.Property @name="<[G].Error>" @type="yielded component">
-    A container that yields its content inside the "error" block (at group level). The content can be a simple string, or a more complex/structured one (in which case it inherits the text style). For details about its API check the [`Form::Error`](/components/form/primitives/) component.
+    A container that yields its content inside the "error" block (at group level). The content can be a simple string, or a more complex/structured one (in which case it inherits the text style). For details about its API check the [`Form::Error`](/components/form/primitives) component.
     <br/><br/>
     The `id` attribute of the `Error` element is automatically generated.
   </C.Property>

website/docs/components/form/radio-card/partials/code/how-to-use.md

@@ -43,7 +43,7 @@ Customizable options include:
 
 - Defining custom content using the `Generic` block
 - Defining a custom width using the `maxWidth` argument
-- Adding multiple [`Badge`](/components/badge) components
+- Adding multiple [Badge](/components/badge) components
 
 ```handlebars
 <Hds::Form::RadioCard::Group @name="radio-card-custom-example" as |G|>