diff --git a/showcase/app/templates/page-components/app-side-nav/index.hbs b/showcase/app/templates/page-components/app-side-nav/index.hbs index ab37ff51897..b1c3b0c8986 100644 --- a/showcase/app/templates/page-components/app-side-nav/index.hbs +++ b/showcase/app/templates/page-components/app-side-nav/index.hbs @@ -364,8 +364,24 @@ + + + - + + + + diff --git a/showcase/app/templates/page-components/side-nav.hbs b/showcase/app/templates/page-components/side-nav.hbs index f8272e4fe68..482e78262ca 100644 --- a/showcase/app/templates/page-components/side-nav.hbs +++ b/showcase/app/templates/page-components/side-nav.hbs @@ -834,8 +834,19 @@ + + + - + + + + diff --git a/website/docs/components/app-footer/partials/code/component-api.md b/website/docs/components/app-footer/partials/code/component-api.md index 283f92ca9d4..8f2bc5f406c 100644 --- a/website/docs/components/app-footer/partials/code/component-api.md +++ b/website/docs/components/app-footer/partials/code/component-api.md @@ -59,8 +59,8 @@ The `AppFooter::StatusLink` component, yielded as contextual component. Pass a custom href for the link. (URL parameter that’s passed down to the `` element.) - - Controls if the `` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default. + + Controls whether or not the `` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `` tag (for security reasons). Parameters that are passed down as arguments to the ``/`` components. @@ -115,8 +115,8 @@ The `AppFooter::Link` component, yielded as contextual component. URL parameter that’s passed down to the `` element. - - Controls if the `` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default. + + Controls whether or not the `` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `` tag (for security reasons). Parameters that are passed down as arguments to the ``/`` components. diff --git a/website/docs/components/app-header/partials/code/component-api.md b/website/docs/components/app-header/partials/code/component-api.md index 98d013c6968..09f83bcd8a1 100644 --- a/website/docs/components/app-header/partials/code/component-api.md +++ b/website/docs/components/app-header/partials/code/component-api.md @@ -54,7 +54,7 @@ The `AppHeader::HomeLink` component uses the generic `Hds::Interactive` componen 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 `` tag. - 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. + 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. 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. @@ -62,8 +62,8 @@ The `AppHeader::HomeLink` component uses the generic `Hds::Interactive` componen URL parameter that’s passed down to the `` element. - - This controls if the `` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default. + + Controls whether or not the `` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `` tag (for security reasons). Parameters that are passed down as arguments to the ``/`` components. diff --git a/website/docs/components/app-side-nav/partials/code/component-api.md b/website/docs/components/app-side-nav/partials/code/component-api.md index 1dc403da56a..a4e7cf41252 100644 --- a/website/docs/components/app-side-nav/partials/code/component-api.md +++ b/website/docs/components/app-side-nav/partials/code/component-api.md @@ -133,8 +133,8 @@ It internally uses the [`Hds::Interactive`](/utilities/interactive) utility comp URL parameter that’s passed down to the `` element. - - This controls if the `` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default. + + Controls whether or not the `` link is external, in which case (for security reasons) we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default. Parameters that are passed down as arguments to the ``/`` components. @@ -190,8 +190,8 @@ It internally uses the [`Hds::Interactive`](/utilities/interactive) utility comp URL parameter that’s passed down to the `` element. - - This controls if the `` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default. If set to `true`, displays a right aligned “external-link” icon. + + Controls whether or not the `` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `` tag (for security reasons). If explicitly set to `true`, it displays also a right aligned “external-link” icon. Parameters that are passed down as arguments to the ``/`` components. diff --git a/website/docs/components/button/partials/code/component-api.md b/website/docs/components/button/partials/code/component-api.md index 6b181277312..eb2f40a0aae 100644 --- a/website/docs/components/button/partials/code/component-api.md +++ b/website/docs/components/button/partials/code/component-api.md @@ -26,8 +26,8 @@ URL parameter that is passed down to the `` element. - - Controls if the `` link is external and so for security reasons we need to add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it. + + Controls whether or not the `` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `` tag (for security reasons). Parameters that are passed down as arguments to the `` component. diff --git a/website/docs/components/button/partials/code/how-to-use.md b/website/docs/components/button/partials/code/how-to-use.md index 10cc61875dd..4fc7c54f082 100644 --- a/website/docs/components/button/partials/code/how-to-use.md +++ b/website/docs/components/button/partials/code/how-to-use.md @@ -114,18 +114,21 @@ If you’re passing an `@href` or a `@route` argument to the component, this wil !!! 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). + !!! #### With @href If you pass an `@href` argument, an `` link will be generated. -`target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied by default. This is the most common case, as internal links are generally handled using a `@route` argument but can be overridden. If the `href` points to an internal link, or uses a different protocol (e.g., "mailto" of "ftp"), pass `@isHrefExternal={{false}}` and it will not add the `target` and `rel` attributes. +By default, the link is considered "external", which means that the `target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied to the `` element. This is the most common case, as internal links are generally handled using a `@route` argument. ```handlebars ``` +If the `@href` points to an internal link, or uses a different protocol (e.g., "mailto" or "ftp"), pass `@isHrefExternal={{false}}` to the component and it will omit the `target` and `rel` attributes. + #### With @route If you pass a `@route` argument, an `` link will be generated using a `` Ember component. All of the standard arguments for the `` components are supported (eg. `models/model/query/current-when/replace`). diff --git a/website/docs/components/dropdown/partials/code/component-api.md b/website/docs/components/dropdown/partials/code/component-api.md index 97384e1620e..4eb658a8d10 100644 --- a/website/docs/components/dropdown/partials/code/component-api.md +++ b/website/docs/components/dropdown/partials/code/component-api.md @@ -227,8 +227,8 @@ It internally uses the [`Hds::Interactive`](/utilities/interactive) utility comp URL passed to the `` element. - - Indicates whether or not the `` link is external, in which case `target="_blank"` and `rel="noopener noreferrer"` attributes are added automatically. + + Controls whether or not the `` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `` tag (for security reasons). Parameters passed as arguments to the `` component. @@ -287,8 +287,8 @@ The `Dropdown::ListItem::Checkmark` component, yielded as contextual component. URL passed to the `` element. - - Indicates whether or not the `` link is external, in which case `target="_blank"` and `rel="noopener noreferrer"` attributes are added automatically. + + Indicates whether or not the `` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `` tag (for security reasons). Parameters passed as arguments to the `` component. diff --git a/website/docs/components/dropdown/partials/code/how-to-use.md b/website/docs/components/dropdown/partials/code/how-to-use.md index a000c6bf200..4f6f427dd97 100644 --- a/website/docs/components/dropdown/partials/code/how-to-use.md +++ b/website/docs/components/dropdown/partials/code/how-to-use.md @@ -219,7 +219,13 @@ To change this behavior, you can use the `@preserveContentInDom` argument so tha ### ListItem::Interactive `ListItem::Interactive` renders the correct element based on the passing of a `@route`, `@href`, or the addition of a click event (e.g., -`\{{on "click" this.myAction}}`). Internally, the component uses the [Hds::Interactive](/utilities/interactive) utility component. +`\{{on "click" this.myAction}}`). + +!!! Info + +The `ListItem::Interactive` component uses the generic `Hds::Interactive` component. For more details about how this utility component works, please refer to [its documentation page](/utilities/interactive). + +!!! #### Rendering a button @@ -245,13 +251,6 @@ You can pass an `@icon` argument to add a leading icon: #### Rendering a link with `@href` -!!! Info - -**Internal Link?** - -When using the `@href` argument, you’re indicating an external link (instead of a route). So, a few relevant HTML attributes are added—`target="_blank"` and `rel="noopener noreferrer"`. However, if the `@href` really _does_ point to an internal link or uses a different protocol (e.g., `mailto` or `ftp`), pass `@isHrefExternal={{false}}` to the component and it will not add any extra HTML attributes. -!!! - If you pass an `@href` argument, a link (`` element) will be generated: ```handlebars @@ -261,8 +260,9 @@ If you pass an `@href` argument, a link (`` element) will be generated: ``` +By default, the link is considered "external", which means that the `target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied to the `` element. This is the most common case, as internal links are generally handled using a `@route` argument. -To indicate that the link points to an external resource, you can use `@trailingIcon` and assign it an icon name like `external-link`, `docs-link`, `guide-link`, or `learn-link`. +To visually indicate that the link points to an external resource, you can use `@trailingIcon` and assign it an icon name like `external-link`, `docs-link`, `guide-link`, or `learn-link`. ```handlebars ``` +If the `@href` points to an internal link, or uses a different protocol (e.g., "mailto" or "ftp"), pass `@isHrefExternal={{false}}` to the component and it will omit the `target` and `rel` attributes. + #### Rendering a LinkTo (with `@route`) Pass a `@route` to render Ember ``. If the route is external to your current engine, pass `@isRouteExternal={{true}}` to use `` instead of ``. For more details see the [Hds::Interactive component](/utilities/interactive/) documentation. All the standard arguments for the `` components are supported (e.g., `models/model/query/current-when/replace`). @@ -384,4 +386,4 @@ When using the “generic” ListItem, the product team is responsible for imple -``` \ No newline at end of file +``` diff --git a/website/docs/components/link/inline/partials/code/component-api.md b/website/docs/components/link/inline/partials/code/component-api.md index 037b1f204fa..a626e68cca7 100644 --- a/website/docs/components/link/inline/partials/code/component-api.md +++ b/website/docs/components/link/inline/partials/code/component-api.md @@ -13,8 +13,8 @@ URL parameter that’s passed down to the `` element. - - Controls if the `` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default. + + Controls whether or not the `` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `` tag (for security reasons). Parameters that are passed down as arguments to the ``/`` components. diff --git a/website/docs/components/link/inline/partials/code/how-to-use.md b/website/docs/components/link/inline/partials/code/how-to-use.md index d2c22434629..9abd61bc399 100644 --- a/website/docs/components/link/inline/partials/code/how-to-use.md +++ b/website/docs/components/link/inline/partials/code/how-to-use.md @@ -47,23 +47,23 @@ Inline Links use the generic `Hds::Interactive` component. Learn more about [how #### With `@href` -To generate an `` link, pass an `@href` argument with a URL as the value. +To generate an `` link, pass an `@href` argument with a URL as the value. -`target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied by default. This is the most common case, as internal links are generally handled using a `@route` argument. +By default, the link is considered "external", which means that the `target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied to the `` element. This is the most common case, as internal links are generally handled using a `@route` argument. ```handlebars Lorem ipsum dolor sit amet consectetur adipiscing elit. ``` -If the `@href` argument points to an internal link, or uses a different protocol (e.g., "mailto" of "ftp"), pass `@isHrefExternal={{true}}` to the component and it will omit the `target` and `rel` attributes. +If the `@href` argument points to an internal link, or uses a different protocol (e.g., "mailto" or "ftp"), pass `@isHrefExternal={{false}}` to the component and it will omit the `target` and `rel` attributes. -#### With `@route` +#### With `@route` All the standard arguments for the `` components are supported (e.g., `models/model/query/current-when/replace`). ##### For `` -To generate an `` link using a `` Ember component, pass a `@route` argument. +To generate an `` link using a `` Ember component, pass a `@route` argument. ```handlebars Lorem ipsum dolor sit amet consectetur adipiscing elit. diff --git a/website/docs/components/link/standalone/partials/code/component-api.md b/website/docs/components/link/standalone/partials/code/component-api.md index 9f07943fea4..e2b2e563c20 100644 --- a/website/docs/components/link/standalone/partials/code/component-api.md +++ b/website/docs/components/link/standalone/partials/code/component-api.md @@ -17,8 +17,8 @@ URL parameter that’s passed down to the `` element. - - Controls if the `` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default. + + Controls whether or not the `` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `` tag (for security reasons). Parameters that are passed down as arguments to the ``/`` components. diff --git a/website/docs/components/link/standalone/partials/code/how-to-use.md b/website/docs/components/link/standalone/partials/code/how-to-use.md index 78efb9df2ba..ffa98a85d08 100644 --- a/website/docs/components/link/standalone/partials/code/how-to-use.md +++ b/website/docs/components/link/standalone/partials/code/how-to-use.md @@ -31,7 +31,7 @@ There are two available colors for a Standalone Link: `primary` and `secondary`. ```handlebars -``` +``` ### Size @@ -53,21 +53,23 @@ Standalone Links use the generic `Hds::Interactive` component. Learn more about #### With `@href` -To generate an `` link, pass an `@href` argument with a URL as the value. +To generate an `` link, pass an `@href` argument with a URL as the value. -`target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied by default. This is the most common case, as internal links are generally handled using a `@route` argument. +By default, the link is considered "external", which means that the `target=“_blank”` and `rel=“noopener noreferrer”` attributes are applied to the `` element. This is the most common case, as internal links are generally handled using a `@route` argument. ```handlebars ``` +If the `@href` points to an internal link, or uses a different protocol (e.g., "mailto" or "ftp"), pass `@isHrefExternal={{false}}` to the component and it will omit the `target` and `rel` attributes. + #### With `@route` All the standard arguments for the `` components are supported (eg. `models/model/query/current-when/replace`). ##### For `` -To generate an `` link using a `` Ember component, pass a `@route` argument. +To generate an `` link using a `` Ember component, pass a `@route` argument. ```handlebars @@ -75,4 +77,4 @@ To generate an `` link using a `` Ember component, pass a `@route` ar ##### For `` -If the route is external to your current engine, pass `@isRouteExternal={{true}}` to the component so that it will use `` instead of ``. \ No newline at end of file +If the route is external to your current engine, pass `@isRouteExternal={{true}}` to the component so that it will use `` instead of ``. diff --git a/website/docs/components/side-nav/partials/code/component-api.md b/website/docs/components/side-nav/partials/code/component-api.md index 83a1f32c070..b9445b8a7f3 100644 --- a/website/docs/components/side-nav/partials/code/component-api.md +++ b/website/docs/components/side-nav/partials/code/component-api.md @@ -115,8 +115,8 @@ It internally uses the [`Hds::Interactive`](/utilities/interactive) utility comp URL parameter that’s passed down to the `` element. - - This controls if the `` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default. + + Controls whether or not the `` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `` tag (for security reasons). Parameters that are passed down as arguments to the ``/`` components. @@ -154,8 +154,8 @@ It internally uses the [`Hds::Interactive`](/utilities/interactive) utility comp URL parameter that’s passed down to the `` element. - - This controls if the `` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default. + + Controls whether or not the `` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `` tag (for security reasons). Parameters that are passed down as arguments to the ``/`` components. @@ -269,8 +269,8 @@ It internally uses the [`Hds::Interactive`](/utilities/interactive) utility comp URL parameter that’s passed down to the `` element. - - This controls if the `` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default. + + Controls whether or not the `` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `` tag (for security reasons). Parameters that are passed down as arguments to the ``/`` components. @@ -326,8 +326,8 @@ It internally uses the [`Hds::Interactive`](/utilities/interactive) utility comp URL parameter that’s passed down to the `` element. - - This controls if the `` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default. If set to `true`, displays a right aligned “external-link” icon. + + Controls whether or not the `` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `` tag (for security reasons). If explicitly set to `true`, it displays also a right aligned “external-link” icon. Parameters that are passed down as arguments to the ``/`` components. diff --git a/website/docs/components/tag/partials/code/component-api.md b/website/docs/components/tag/partials/code/component-api.md index 80be8a3ca54..750922bf0e9 100644 --- a/website/docs/components/tag/partials/code/component-api.md +++ b/website/docs/components/tag/partials/code/component-api.md @@ -15,8 +15,8 @@ URL parameter that’s passed down to the `` element. - - This controls if the `` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default. + + Controls whether or not the `` link is external. When left `undefined` or explicitly set to `true` it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `` tag (for security reasons). Parameters that are passed down as arguments to the ``/`` components. diff --git a/website/docs/utilities/interactive/partials/code/component-api.md b/website/docs/utilities/interactive/partials/code/component-api.md index 5d40cf864ec..1a5f7822b72 100644 --- a/website/docs/utilities/interactive/partials/code/component-api.md +++ b/website/docs/utilities/interactive/partials/code/component-api.md @@ -6,8 +6,8 @@ URL parameter that’s passed down to the `` element. - - This controls if the `` link is external. For security reasons, we add the `target="_blank"` and `rel="noopener noreferrer"` attributes to it by default. + + Controls whether or not the `` link is external, in which case it adds the `target="_blank"` and `rel="noopener noreferrer"` attributes to the `` tag (for security reasons). Parameters that are passed down as arguments to the ``/`` components. diff --git a/website/docs/utilities/interactive/partials/code/how-to-use.md b/website/docs/utilities/interactive/partials/code/how-to-use.md index accd2b391eb..89c5a11b6ba 100644 --- a/website/docs/utilities/interactive/partials/code/how-to-use.md +++ b/website/docs/utilities/interactive/partials/code/how-to-use.md @@ -7,7 +7,7 @@ This component is intended only for internal Helios use. If you need to use it, ### Default use for `