From 370777f0ddf0b173d950c6e25b8847af6f5e3b54 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 14 Apr 2022 15:52:42 +0100 Subject: [PATCH 01/75] =?UTF-8?q?added=20generic=20=E2=80=9Cinteractive?= =?UTF-8?q?=E2=80=9D=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit (it handles button/a/linkto/linktoexternal) --- .../components/hds/interactive/index.hbs | 34 +++++++++++++++++++ .../addon/components/hds/interactive/index.js | 3 ++ .../app/components/hds/interactive/index.js | 1 + 3 files changed, 38 insertions(+) create mode 100644 packages/components/addon/components/hds/interactive/index.hbs create mode 100644 packages/components/addon/components/hds/interactive/index.js create mode 100644 packages/components/app/components/hds/interactive/index.js diff --git a/packages/components/addon/components/hds/interactive/index.hbs b/packages/components/addon/components/hds/interactive/index.hbs new file mode 100644 index 0000000000..e4c3b74f63 --- /dev/null +++ b/packages/components/addon/components/hds/interactive/index.hbs @@ -0,0 +1,34 @@ +{{#if @route}} + {{#if @isRouteExternal}} + + {{yield}} + + {{else}} + + {{yield}} + + {{/if}} +{{else if @href}} + {{! IMPORTANT: we can't support the direct use of the "href" HTML attribute, because we need to rely on the "@href" Ember argument to differentiate between different types of generated output }} + + {{yield}} + +{{else}} + +{{/if}} \ No newline at end of file diff --git a/packages/components/addon/components/hds/interactive/index.js b/packages/components/addon/components/hds/interactive/index.js new file mode 100644 index 0000000000..dfc1e5b74a --- /dev/null +++ b/packages/components/addon/components/hds/interactive/index.js @@ -0,0 +1,3 @@ +import Component from '@glimmer/component'; + +export default class HdsInteractiveIndexComponent extends Component {} diff --git a/packages/components/app/components/hds/interactive/index.js b/packages/components/app/components/hds/interactive/index.js new file mode 100644 index 0000000000..b2ae123b27 --- /dev/null +++ b/packages/components/app/components/hds/interactive/index.js @@ -0,0 +1 @@ +export { default } from '@hashicorp/design-system-components/components/hds/interactive/index'; From 23d61b0e131621769b35b3393dcc463e7df405dd Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 14 Apr 2022 15:53:14 +0100 Subject: [PATCH 02/75] updated the `dropdown/list-item/interactive` to use the new `interactive` generic component --- .../components/hds/dropdown/list-item.hbs | 59 ++++++------------- 1 file changed, 18 insertions(+), 41 deletions(-) diff --git a/packages/components/addon/components/hds/dropdown/list-item.hbs b/packages/components/addon/components/hds/dropdown/list-item.hbs index c872272545..21580b9651 100644 --- a/packages/components/addon/components/hds/dropdown/list-item.hbs +++ b/packages/components/addon/components/hds/dropdown/list-item.hbs @@ -38,47 +38,24 @@ {{else if (eq this.item "interactive")}}
  • - {{#if @route}} - - {{#if @icon}} -
    - -
    - {{/if}} -
    - {{this.text}} -
    -     - {{else if @href}} - - {{#if this.icon}} -
    - -
    - {{/if}} -
    - {{this.text}} -
    -     - {{else}} - - {{/if}} + {{/if}} +
    + {{this.text}} +
    +
    • {{/if}} \ No newline at end of file From 891adeaa50d6ec58bc935e46a65e04a2ad4d9601 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 14 Apr 2022 15:53:44 +0100 Subject: [PATCH 03/75] added documentation page for `interactive` component --- packages/components/tests/dummy/app/router.js | 1 + .../tests/dummy/app/styles/app.scss | 1 + .../app/styles/pages/db-interactive.scss | 5 + .../tests/dummy/app/templates/index.hbs | 5 + .../app/templates/utilities/interactive.hbs | 186 ++++++++++++++++++ 5 files changed, 198 insertions(+) create mode 100644 packages/components/tests/dummy/app/styles/pages/db-interactive.scss create mode 100644 packages/components/tests/dummy/app/templates/utilities/interactive.hbs diff --git a/packages/components/tests/dummy/app/router.js b/packages/components/tests/dummy/app/router.js index 6d37a9e2d2..81d5560f60 100644 --- a/packages/components/tests/dummy/app/router.js +++ b/packages/components/tests/dummy/app/router.js @@ -35,5 +35,6 @@ Router.map(function () { }); this.route('utilities', function () { this.route('disclosure'); + this.route('interactive'); }); }); diff --git a/packages/components/tests/dummy/app/styles/app.scss b/packages/components/tests/dummy/app/styles/app.scss index 0258726a6c..6be9da1012 100644 --- a/packages/components/tests/dummy/app/styles/app.scss +++ b/packages/components/tests/dummy/app/styles/app.scss @@ -14,6 +14,7 @@ @import "./pages/db-elevation"; @import "./pages/db-focus-ring"; @import "./pages/db-icon-tile"; +@import "./pages/db-interactive"; @import "./pages/db-link"; @import "./pages/db-tokens"; @import "./pages/db-typography"; diff --git a/packages/components/tests/dummy/app/styles/pages/db-interactive.scss b/packages/components/tests/dummy/app/styles/pages/db-interactive.scss new file mode 100644 index 0000000000..028d88413f --- /dev/null +++ b/packages/components/tests/dummy/app/styles/pages/db-interactive.scss @@ -0,0 +1,5 @@ +// INTERACTIVE + +.dummy-interactive-sample { + margin-top: 30px; +} diff --git a/packages/components/tests/dummy/app/templates/index.hbs b/packages/components/tests/dummy/app/templates/index.hbs index c02cffee2a..d7bc647833 100644 --- a/packages/components/tests/dummy/app/templates/index.hbs +++ b/packages/components/tests/dummy/app/templates/index.hbs @@ -92,6 +92,11 @@ Disclosure +
  • + + Interactive + +

    • Content: diff --git a/packages/components/tests/dummy/app/templates/utilities/interactive.hbs b/packages/components/tests/dummy/app/templates/utilities/interactive.hbs new file mode 100644 index 0000000000..c4c62d975b --- /dev/null +++ b/packages/components/tests/dummy/app/templates/utilities/interactive.hbs @@ -0,0 +1,186 @@ +{{page-title "Interactive"}} + +

    Interactive

    +

    🚧 + Notice: this component is intended for internal use for now. It may be that in the future it will exposed as + official component of the design system but not for now. Please if you need to use it speak with the HDS team.

    + +
    +

    Component API

    +

    Here is the API for the component:

    +
    +
    href
    +
    +

    This is the URL parameter that is passed down to the + <a> + element (see URL handling for details).

    +
    +
    route/models/model/query/current-when/replace
    +
    +

    These are the parameters that are passed down as arguments to the + <LinkTo> + / + <LinkToExternal> + components.

    +
    +
    isRouteExternal boolean
    +
    +

    This controls if the "LinkTo" is external to the Ember engine (more details here) in which case it will use a + <LinkToExternal> + instead of a simple + <LinkTo> + for the @route.

    +
    +
    β€œsplattributes”
    +
    +

    ...attributes spreading is supported on this component.

    +
    +
    +
    + +
    +

    How to use

    + +

    Basic use (<button>)

    +

    Invocation of the component would look something like this:

    + {{! prettier-ignore-start }} + + {{! prettier-ignore-end }} +

    In this case, since no + @href + or + @route + argument is provided it will generate in output an HTML + <button> + element. +

    +

    Notice: a + type="button" + HTML attribute is applied by default to the element, but this can be overwritten using the "splattributes".

    + +

    With "@href" parameter (<a>)

    +

    If an @href argument is provided:

    + {{! prettier-ignore-start }} + + {{! prettier-ignore-end }} +

    it will generate in output an HTML + <a> + link element. +

    +

    🚨 ATTENTION: we can't support the direct use of the + href + HTML attribute because we need to rely on the + @href + Ember argument to differentiate between different types of generated output.

    +

    Notice: the + target="_blank" + and + rel="noopener noreferrer" + HTML attributes are applied by default to the element, but these can be overwritten using the "splattributes".

    + +

    With "@route" parameter (<LinkTo>/<LinkToExternal>)

    +

    If a @route argument is provided:

    + {{! prettier-ignore-start }} + + {{! prettier-ignore-end }} +

    it will generate in output a + <LinkTo> + component. +

    + +

    If the + @route + is external to the current engine (more details here), you need to provide an extra + @isRouteExternal + parameter:

    + {{! prettier-ignore-start }} + {{! template-lint-disable no-unbalanced-curlies }} + + {{! template-lint-enable no-unbalanced-curlies }} + {{! prettier-ignore-end }} +

    and it will generate in output a + <LinkToExternal> + component. +

    + +

    Notice: all the standard arguments for the + <LinkTo/LinkToExternal> + components are supported (eg. + models/model/query/current-when/replace).

    +
    + +
    +

    Showcase

    + +

    Generated elements

    + +
    +

    + <button> + (with no @route or @href provided / default) +

    + This is a button (default) +
    + +
    +

    + <a> + (with @href argument) +

    + This is a normal <a> link +
    + +
    +

    + <LinkTo> + (with @route argument but no @isRouteExternal) +

    + This is a <LinkTo> link +
    + +
    +

    + <LinkToExternal> + (with @route argument and @isRouteExternal set to true) +

    + {{!-- This is a <LinkToExternal> link --}} + 
    ⚠️ We can't render this component in this application (it will work only on Ember engines).
    +
    + +
    \ No newline at end of file From 647008f16f14f505bd16f0912db1bb6b91b1dd19 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 14 Apr 2022 16:00:31 +0100 Subject: [PATCH 04/75] small update --- .../tests/dummy/app/templates/utilities/interactive.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/tests/dummy/app/templates/utilities/interactive.hbs b/packages/components/tests/dummy/app/templates/utilities/interactive.hbs index c4c62d975b..6348ce07d5 100644 --- a/packages/components/tests/dummy/app/templates/utilities/interactive.hbs +++ b/packages/components/tests/dummy/app/templates/utilities/interactive.hbs @@ -13,7 +13,7 @@

    This is the URL parameter that is passed down to the <a> - element (see URL handling for details).

    + element.

    route/models/model/query/current-when/replace
    From f098f5cb3192c485b39fb748c16d8fc2511e4e9f Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 14 Apr 2022 18:24:33 +0100 Subject: [PATCH 05/75] small commit to open the main PR --- .../dummy/app/templates/components/link-to/standalone.hbs | 4 +--- .../tests/dummy/app/templates/components/link/standalone.hbs | 4 +--- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/components/tests/dummy/app/templates/components/link-to/standalone.hbs b/packages/components/tests/dummy/app/templates/components/link-to/standalone.hbs index 5a8911dd5d..1391b29859 100644 --- a/packages/components/tests/dummy/app/templates/components/link-to/standalone.hbs +++ b/packages/components/tests/dummy/app/templates/components/link-to/standalone.hbs @@ -1,8 +1,6 @@ {{page-title "LinkTo::Standalone component"}} -

    - LinkTo::Standalone -

    +

    LinkTo::Standalone

    diff --git a/packages/components/tests/dummy/app/templates/components/link/standalone.hbs b/packages/components/tests/dummy/app/templates/components/link/standalone.hbs index 2b93497616..b99c71637a 100644 --- a/packages/components/tests/dummy/app/templates/components/link/standalone.hbs +++ b/packages/components/tests/dummy/app/templates/components/link/standalone.hbs @@ -1,8 +1,6 @@ {{page-title "Link::Standalone Component"}} -

    - Link::Standalone -

    +

    Link::Standalone

    From 686f5ce727c4fefbcd6ebad11504f3a5c9d6a3fa Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 14 Apr 2022 19:19:35 +0100 Subject: [PATCH 06/75] =?UTF-8?q?added=20integration=20tests=20for=20the?= =?UTF-8?q?=20=E2=80=9Cinteractive=E2=80=9D=20element?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/hds/interactive/index-test.js | 101 ++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 packages/components/tests/integration/components/hds/interactive/index-test.js diff --git a/packages/components/tests/integration/components/hds/interactive/index-test.js b/packages/components/tests/integration/components/hds/interactive/index-test.js new file mode 100644 index 0000000000..497e203aae --- /dev/null +++ b/packages/components/tests/integration/components/hds/interactive/index-test.js @@ -0,0 +1,101 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render, pauseTest } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | hds/interactive/index', function (hooks) { + setupRenderingTest(hooks); + + // notice: since this element can generate different HTML element, to make the tests even more solid, in the DOM selectors we prefix the #ID of the element with the tag name + + test('it renders the interactive container', async function (assert) { + await render(hbs``); + assert.dom(this.element).exists(); + }); + + // GENERATED ELEMENTS + + test('it should render a \ No newline at end of file + \ No newline at end of file From 393f3306f29dbc32f2b5cfedc0036062c1ca2ac6 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 20 Apr 2022 14:26:02 +0100 Subject: [PATCH 14/75] fixed underline of text on links --- packages/components/app/styles/components/button.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/components/app/styles/components/button.scss b/packages/components/app/styles/components/button.scss index 3269329ca8..34b79035b8 100644 --- a/packages/components/app/styles/components/button.scss +++ b/packages/components/app/styles/components/button.scss @@ -27,6 +27,11 @@ $hds-button-focus-border-width: 3px; position: relative; width: auto; + @at-root a#{&} { + text-decoration: none; + width: fit-content; + } + // This covers all of the browsers and focus scenarios (due to the custom focus design). &:disabled, &[disabled], From 6b8441a9471e4c6042b9ca3adaadd376d8d7961b Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 20 Apr 2022 14:27:46 +0100 Subject: [PATCH 15/75] improved assertion guards in `button` to work differently between buttons and links --- .../addon/components/hds/button/index.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/components/addon/components/hds/button/index.js b/packages/components/addon/components/hds/button/index.js index 56db744c4c..117eba7da6 100644 --- a/packages/components/addon/components/hds/button/index.js +++ b/packages/components/addon/components/hds/button/index.js @@ -135,12 +135,19 @@ export default class HdsButtonIndexComponent extends Component { get type() { let { type = DEFAULT_TYPE } = this.args; - assert( - `@type for "Hds::Button" must be one of the following: ${TYPES.join( - ', ' - )}; received: ${type}`, - TYPES.includes(type) - ); + if (this.args.href || this.args.route) { + assert( + `@type for "Hds::Button" should be passed only to generate a
    +
    isHrefExternal boolean
    +
    +

    Default: true

    +

    This controls if the + <a> + link is external and so for security reasons we need to add the + target="_blank" + and + rel="noopener noreferrer" + attributes to it.

    +
    route/models/model/query/current-when/replace

    These are the parameters that are passed down as arguments to the @@ -25,6 +36,7 @@

    isRouteExternal boolean
    +

    Default: false

    This controls if the "LinkTo" is external to the Ember engine (<LinkTo> for the @route.

    -
    β€œsplattributes”
    +
    ...attributes

    ...attributes spreading is supported on this component.

    @@ -70,6 +82,11 @@ HTML attribute is applied by default to the element, but this can be overwritten using the "splattributes".

    With "@href" parameter (<a>)

    +

    🚨 ATTENTION: we can't support the direct use of the + href + HTML attribute because we need to rely on the + @href + Ember argument to differentiate between different types of generated output.

    If an @href argument is provided:

    {{! prettier-ignore-start }} it will generate in output an HTML <a> - link element. + link element with + target="_blank" + and + rel="noopener noreferrer" + attributes.

    -

    🚨 ATTENTION: we can't support the direct use of the - href - HTML attribute because we need to rely on the - @href - Ember argument to differentiate between different types of generated output.

    -

    Notice: in this case the component automatically adds the HTML attributes - target="_blank" - and - rel="noopener noreferrer" - to the - <a> - element (but their values can be overwritten passing those attributes to the component, as "splattributes"). +

    We add these attributes by default because this is the most common case (internal links + are generally handled using a + @route + argument). This behaviour can be overridden (see below). +

    +

    If an + @isHrefExternal + argument is provided with + false + value:

    + {{! prettier-ignore-start }} + {{! template-lint-disable no-unbalanced-curlies }} + + {{! template-lint-enable no-unbalanced-curlies }} + {{! prettier-ignore-end }} +

    it will generate in output an HTML + <a> + link element + without + the HTML + target + and + rel + attributes.

    With "@route" parameter (<LinkTo>/<LinkToExternal>)

    @@ -176,12 +216,18 @@ This is a button (default) -
    +

    <a> (with @href argument)

    - This is a normal <a> link + This is an external + <a> + link (default) +
    + This is an internal + <a> + link
    From b0bc06f9053b512ae0ddb3290fcb9bb2c1f5bc80 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 27 Apr 2022 11:51:41 +0100 Subject: [PATCH 26/75] updated documentation following the introduction of the `@isHrefExternal` argument --- .../dummy/app/templates/components/button.hbs | 37 ++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/packages/components/tests/dummy/app/templates/components/button.hbs b/packages/components/tests/dummy/app/templates/components/button.hbs index 3572b63b9f..68d09ece15 100644 --- a/packages/components/tests/dummy/app/templates/components/button.hbs +++ b/packages/components/tests/dummy/app/templates/components/button.hbs @@ -71,6 +71,17 @@ <a> element.

    +
    isHrefExternal boolean
    +
    +

    Default: true

    +

    This controls if the + <a> + link is external and so for security reasons we need to add the + target="_blank" + and + rel="noopener noreferrer" + attributes to it.

    +
    route/models/model/query/current-when/replace

    These are the parameters that are passed down as arguments to the @@ -333,6 +344,30 @@ {{! prettier-ignore-end }}

    Renders to:

    +

    ⚠️ + Important: when using the + @href + argument the component adds by default the attributes + target="_blank" + and + rel="noopener noreferrer" + to the + <a> + element (because this is the most common use case: internal links are generally handled using a + @route + argument). If the + href + points to an internal link, or uses a different protocol (eg. "mailto" of "ftp") you can pass + @isHrefExternal={{true}} + to the component and it will not add the + target + and + rel + attributes (but you can pass yours if needed, using the + ...attributes + spreading. For more details see the + Hds::Interactive component.

    +

    🚨 Notice: if a href @@ -368,7 +403,7 @@ <LinkTo> for the @route. For more details see the - Hds::Interactive component

    + Hds::Interactive component.

    Notice: all the standard arguments for the <LinkTo/LinkToExternal> components are supported (eg. From 934a3d540b8d51c2f9dbd3bee3e5386cafaa3ded Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 27 Apr 2022 11:57:36 +0100 Subject: [PATCH 27/75] forgot default --- .../components/tests/dummy/app/templates/components/button.hbs | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/tests/dummy/app/templates/components/button.hbs b/packages/components/tests/dummy/app/templates/components/button.hbs index 68d09ece15..b0ee7296bc 100644 --- a/packages/components/tests/dummy/app/templates/components/button.hbs +++ b/packages/components/tests/dummy/app/templates/components/button.hbs @@ -90,6 +90,7 @@

    isRouteExternal boolean
    +

    Default: false

    This controls if the "LinkTo" is external to the Ember engine ( Date: Thu, 5 May 2022 19:03:00 +0100 Subject: [PATCH 28/75] small changes --- .../components/hds/interactive/index.hbs | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/components/addon/components/hds/interactive/index.hbs b/packages/components/addon/components/hds/interactive/index.hbs index f65252f382..ceca4f38d1 100644 --- a/packages/components/addon/components/hds/interactive/index.hbs +++ b/packages/components/addon/components/hds/interactive/index.hbs @@ -22,19 +22,18 @@ {{yield}} {{/if}} -{{else if @href}} + {{! IMPORTANT: we can't support the direct use of the "href" HTML attribute via ...attributes, because we need to rely on the "@href" Ember argument to differentiate between different types of generated output }} - - {{yield}} - - {{!-- {{#if this.isHrefExternal}} +{{else if @href}} + {{#if this.isHrefExternal}} + + {{yield}} + {{else}} - {{/if}} --}} + + {{yield}} + + {{/if}} {{else}} - {{/if}} + {{/if}} +

    + {{this.text}} +
    + \ No newline at end of file From 9fd6809d968fcaefbacdf78e8d8816a680b12e94 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 5 May 2022 19:58:46 +0100 Subject: [PATCH 30/75] aligned documentation with most recent format for accessibility --- .../dummy/app/templates/utilities/interactive.hbs | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/tests/dummy/app/templates/utilities/interactive.hbs b/packages/components/tests/dummy/app/templates/utilities/interactive.hbs index f101fa9c0b..96df49a063 100644 --- a/packages/components/tests/dummy/app/templates/utilities/interactive.hbs +++ b/packages/components/tests/dummy/app/templates/utilities/interactive.hbs @@ -6,9 +6,9 @@ official component of the design system but not for now. Please if you need to use it speak with the HDS team.

    -

    Component API

    -

    Here is the API for the component:

    -
    +

    Β§ Component API

    +

    Here is the API for the component:

    +
    href

    This is the URL parameter that is passed down to the @@ -55,7 +55,7 @@

    -

    How to use

    +

    Β§ How to use

    Basic use (<button>)

    Invocation of the component would look something like this:

    @@ -204,7 +204,7 @@
    -

    Showcase

    +

    Β§ Showcase

    Generated elements

    From 61f54d90adb652d9a46a4f9cc0f1772d1898b5f0 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 5 May 2022 20:11:33 +0100 Subject: [PATCH 31/75] updated integration tests for `interactive` component --- .../components/hds/interactive/index-test.js | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/packages/components/tests/integration/components/hds/interactive/index-test.js b/packages/components/tests/integration/components/hds/interactive/index-test.js index 4883e4f022..0c9e654b43 100644 --- a/packages/components/tests/integration/components/hds/interactive/index-test.js +++ b/packages/components/tests/integration/components/hds/interactive/index-test.js @@ -20,6 +20,7 @@ module('Integration | Component | hds/interactive/index', function (hooks) { assert.dom('#test-interactive').hasTagName('button'); }); test('it should render a link if @href is passed', async function (assert) { + assert.expect(2); await render(hbs``); assert.dom('#test-interactive').hasTagName('a'); assert.dom('#test-interactive').hasAttribute('href', '#'); @@ -35,6 +36,31 @@ module('Integration | Component | hds/interactive/index', function (hooks) { .hasAttribute('href', '/utilities/interactive'); }); + // TARGET/REL ATTRIBUTES + + test('it should render a link with the right "target" and "rel" attributes if @href is passed', async function (assert) { + assert.expect(2); + await render(hbs``); + assert.dom('#test-interactive').hasAttribute('target', '_blank'); + assert.dom('#test-interactive').hasAttribute('rel', 'noopener noreferrer'); + }); + test('it should render a link with custom "target" and "rel" attributes if they are passed as attributes', async function (assert) { + assert.expect(2); + await render( + hbs`` + ); + assert.dom('#test-interactive').hasAttribute('target', 'test-target'); + assert.dom('#test-interactive').hasAttribute('rel', 'test-rel'); + }); + test('it should render a link withhout "target" and "rel" attributes if @isHrefExternal is false', async function (assert) { + assert.expect(2); + await render( + hbs`` + ); + assert.dom('#test-interactive').doesNotHaveAttribute('target'); + assert.dom('#test-interactive').doesNotHaveAttribute('rel'); + }); + // SPLATTRIBUTES test('it should spread all the attributes passed to the
    @@ -70,6 +71,18 @@ <a> HTML element.

    +
    icon string
    +
    +

    Use this parameter to show an icon. Acceptable value: any Flight icon name.

    +
    +
    iconPosition enum
    +
    +

    Positions the icon before or after the text. Acceptable values:

    +
      +
    1. leading
      2. +
    2. trailing
      3. +
    +
    href

    This is the URL parameter that is passed down to the @@ -152,6 +165,46 @@ <a> HTML element.

    +

    Add an icon

    +

    To add an icon to your inline link, give the + @icon + a + Flight icon + name: +

    + {{! prettier-ignore-start }} + + {{! prettier-ignore-end }} +

    Renders to:

    + Watch tutorial video + +

    Notice: since the + Hds::Link::Inline + doesn't have an intrinsic size, the size of the icon is calculated proportionally (via + em) in relation to the font-size of the text + .

    + +

    Icon position

    +

    By default, if you define an icon, it is placed after the text. If you would like to + position the icon before the text, define + @iconPosition: +

    + {{! prettier-ignore-start }} + + {{! prettier-ignore-end }} +

    Renders to:

    + Watch tutorial video +

    Color

    There are two available colors for a Link (Inline): @@ -267,9 +320,9 @@

    Showcase

    -

    Notice: in the following examples we apply a - .hds-typography-body-300 - style to the text for presentation purpose.

    +

    Notice: in the following examples we apply + .hds-typography + styles to the text for presentation purpose.

    Generated element

    @@ -305,7 +358,7 @@ Only text
    - Text + leading icon + Text + leading icon
    Text + trailing @@ -315,7 +368,7 @@
    Lorem - ipsum dolor + ipsum dolor sit amet consectetur adipiscing @@ -323,7 +376,7 @@
    Lorem - ipsum dolor + ipsum dolor sit amet consectetur adipiscing @@ -331,7 +384,7 @@
    Lorem - ipsum dolor + ipsum dolor sit amet consectetur adipiscing From 6e2da933b4ded16d7ab857c826b347a0d6e6e1a5 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 11 May 2022 13:50:52 +0100 Subject: [PATCH 50/75] updated tests for `Link::Inline` --- .../app/templates/components/link/inline.hbs | 4 ++-- .../components/hds/link/inline-test.js | 21 +++++++++++++++++-- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/packages/components/tests/dummy/app/templates/components/link/inline.hbs b/packages/components/tests/dummy/app/templates/components/link/inline.hbs index fe23b157f8..2887ce8b3a 100644 --- a/packages/components/tests/dummy/app/templates/components/link/inline.hbs +++ b/packages/components/tests/dummy/app/templates/components/link/inline.hbs @@ -198,12 +198,12 @@ {{! prettier-ignore-end }}

    Renders to:

    - Watch tutorial video + Watch tutorial video

    Color

    diff --git a/packages/components/tests/integration/components/hds/link/inline-test.js b/packages/components/tests/integration/components/hds/link/inline-test.js index ab4833a476..0097c7b133 100644 --- a/packages/components/tests/integration/components/hds/link/inline-test.js +++ b/packages/components/tests/integration/components/hds/link/inline-test.js @@ -9,7 +9,7 @@ module('Integration | Component | hds/link/inline', function (hooks) { resetOnerror(); }); - test('it renders the link(inline)', async function (assert) { + test('it renders the component', async function (assert) { await render(hbs``); assert.dom(this.element).exists(); }); @@ -20,9 +20,26 @@ module('Integration | Component | hds/link/inline', function (hooks) { assert.dom('#test-link').hasClass('hds-link-inline'); }); + // ICON + + test('it should render the icon in the trailing position by default', async function (assert) { + assert.expect(2); + await render( + hbs`watch video` + ); + assert.dom('#test-link .hds-link-inline__icon').exists(); + assert.dom('#test-link ').hasClass('hds-link-inline--icon-trailing'); + }); + test('it should render the icon in the leading position if @iconPosition is set to leading', async function (assert) { + await render( + hbs`watch video` + ); + assert.dom('#test-link ').hasClass('hds-link-inline--icon-leading'); + }); + // COLOR - test('it should render the primary color as the default if no color is declared', async function (assert) { + test('it should render the primary color as the default if no @color prop is declared', async function (assert) { await render( hbs`watch video` ); From c73fdec1f71b8fe8ca3f7a04146e38a73e5aa40b Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 11 May 2022 14:10:53 +0100 Subject: [PATCH 51/75] removed `LinkTo::Standalone` from `Alert` and `Toast` contextual components --- packages/components/addon/components/hds/alert/index.hbs | 4 +--- packages/components/addon/components/hds/toast/index.hbs | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/components/addon/components/hds/alert/index.hbs b/packages/components/addon/components/hds/alert/index.hbs index 605bd50495..294efd3be0 100644 --- a/packages/components/addon/components/hds/alert/index.hbs +++ b/packages/components/addon/components/hds/alert/index.hbs @@ -18,9 +18,7 @@

    {{yield (hash - Button=(component "hds/button" size="small") - Link::Standalone=(component "hds/link/standalone" size="small") - LinkTo::Standalone=(component "hds/link-to/standalone" size="small") + Button=(component "hds/button" size="small") Link::Standalone=(component "hds/link/standalone" size="small") ) }}
    diff --git a/packages/components/addon/components/hds/toast/index.hbs b/packages/components/addon/components/hds/toast/index.hbs index 875490696e..21b4160d25 100644 --- a/packages/components/addon/components/hds/toast/index.hbs +++ b/packages/components/addon/components/hds/toast/index.hbs @@ -10,6 +10,6 @@ as |A| > {{yield - (hash Button=A.Button Link::Standalone=A.Link::Standalone LinkTo::Standalone=A.LinkTo::Standalone Generic=A.Generic) + (hash Button=A.Button Link::Standalone=A.Link::Standalone Generic=A.Generic) }} \ No newline at end of file From 568de83980c215a622e46c2ad846d4a72abe28fe Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 11 May 2022 14:11:47 +0100 Subject: [PATCH 52/75] updated `Alert` and `Toast` documentation pages to fix errors for `LinkTo::Standalone` and `@href` --- .../dummy/app/templates/components/alert.hbs | 30 +++++-------------- .../dummy/app/templates/components/toast.hbs | 11 ++++--- 2 files changed, 13 insertions(+), 28 deletions(-) diff --git a/packages/components/tests/dummy/app/templates/components/alert.hbs b/packages/components/tests/dummy/app/templates/components/alert.hbs index 06dec8828c..d1de5e951a 100644 --- a/packages/components/tests/dummy/app/templates/components/alert.hbs +++ b/packages/components/tests/dummy/app/templates/components/alert.hbs @@ -163,7 +163,6 @@ the alert as yielded components, using the Button, Link::Standalone, - LinkTo::Standalone, Generic keys.

    @@ -196,18 +195,6 @@ argument that is pre-defined to be small.

    -
    <[A].LinkTo::Standalone> yielded component
    -
    -

    It is a yielded - HDS::LinkTo::Standalone - component, so it exposes exactly - the same API of the - LinkTo::Standalone - component, apart from the - @size - argument that is pre-defined to be - small.

    -
    <[A].Generic> yielded component

    It is a very simple component that yields its content (inside a @@ -393,10 +380,9 @@

    Actions

    Actions can optionally be passed to component using one of the suggested - Button, - Link::Standalone + Button or - LinkTo::Standalone + Link::Standalone contextual components.

    {{! prettier-ignore-start }} {{! template-lint-disable no-unbalanced-curlies }} @@ -405,8 +391,8 @@ @code=' - - + + ' /> @@ -415,8 +401,8 @@

    Renders to:

    - - + +

    Generic content

    @@ -679,7 +665,7 @@ > - + - +
    This for example could be extra text, specific for a special use case.
    diff --git a/packages/components/tests/dummy/app/templates/components/toast.hbs b/packages/components/tests/dummy/app/templates/components/toast.hbs index 598e13d201..9d3970dcea 100644 --- a/packages/components/tests/dummy/app/templates/components/toast.hbs +++ b/packages/components/tests/dummy/app/templates/components/toast.hbs @@ -186,10 +186,9 @@

    Actions

    Actions can optionally be passed into the component using one of the suggested - Button, - Link::Standalone + Button or - LinkTo::Standalone + Link::Standalone yielded components.

    {{! prettier-ignore-start }} {{! template-lint-disable no-unbalanced-curlies }} @@ -198,7 +197,7 @@ @code=' - + ' /> @@ -207,7 +206,7 @@

    Renders to:

    - +

    Generic content

    @@ -465,7 +464,7 @@ > - +
    \ No newline at end of file From 4e13bcffae81cf78e9362a8fcc63510eac126e6d Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 11 May 2022 14:20:12 +0100 Subject: [PATCH 53/75] added a comment --- packages/components/app/styles/components/button.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/app/styles/components/button.scss b/packages/components/app/styles/components/button.scss index b03945820a..40ef59fde0 100644 --- a/packages/components/app/styles/components/button.scss +++ b/packages/components/app/styles/components/button.scss @@ -26,6 +26,7 @@ $hds-button-focus-border-width: 3px; position: relative; width: auto; + // we remove the underline when the rendered HTML element is an link @at-root a#{&} { text-decoration: none; width: fit-content; From 4d1897e50b03d39219591b3aa4068e6daf1573c1 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 11 May 2022 14:25:54 +0100 Subject: [PATCH 54/75] linting --- packages/components/addon/components/hds/toast/index.hbs | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/components/addon/components/hds/toast/index.hbs b/packages/components/addon/components/hds/toast/index.hbs index 21b4160d25..1bbe9a2e02 100644 --- a/packages/components/addon/components/hds/toast/index.hbs +++ b/packages/components/addon/components/hds/toast/index.hbs @@ -9,7 +9,5 @@ ...attributes as |A| > - {{yield - (hash Button=A.Button Link::Standalone=A.Link::Standalone Generic=A.Generic) - }} + {{yield (hash Button=A.Button Link::Standalone=A.Link::Standalone Generic=A.Generic)}} \ No newline at end of file From ff0ba4088336a27c21e0111231d6c85da5da31b7 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 11 May 2022 14:27:03 +0100 Subject: [PATCH 55/75] fixed integration test --- .../tests/integration/components/hds/alert/index-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/tests/integration/components/hds/alert/index-test.js b/packages/components/tests/integration/components/hds/alert/index-test.js index a2efd26102..1d36e4efeb 100644 --- a/packages/components/tests/integration/components/hds/alert/index-test.js +++ b/packages/components/tests/integration/components/hds/alert/index-test.js @@ -127,7 +127,7 @@ module('Integration | Component | hds/alert/index', function (hooks) { test('it should render an Hds::Link::Standalone component yielded to the "actions" container', async function (assert) { assert.expect(5); await render( - hbs`` + hbs`` ); assert .dom('#test-alert .hds-alert__actions a') From ea4602e3e52da47b4beed0dd2e7788242527430b Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 12 May 2022 14:25:21 +0100 Subject: [PATCH 56/75] added missing anchors to the page --- .../app/templates/components/link/inline.hbs | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/components/tests/dummy/app/templates/components/link/inline.hbs b/packages/components/tests/dummy/app/templates/components/link/inline.hbs index 2887ce8b3a..f38ed621ce 100644 --- a/packages/components/tests/dummy/app/templates/components/link/inline.hbs +++ b/packages/components/tests/dummy/app/templates/components/link/inline.hbs @@ -7,9 +7,7 @@
    -

    - Overview -

    +

    Β§ Overview

    The Link::Inline @@ -50,9 +48,7 @@

    -

    - Component API -

    +

    Β§ Component API

    Here is the API for the component:

    @@ -138,7 +134,7 @@
    -

    Usage

    +

    Β§ How to use

    Basic use

    The most basic invocation requires some content to be passed as children and one of the two @@ -314,12 +310,14 @@

    -

    Design guidelines

    +

    Β§ + Design guidelines

    TODO
    -

    Showcase

    +

    Β§ Showcase

    +

    Notice: in the following examples we apply .hds-typography styles to the text for presentation purpose.

    From 64d9a5ee0092caf1096f417ac4242734d2a0cd47 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 12 May 2022 14:30:22 +0100 Subject: [PATCH 57/75] updated color according to design specs --- packages/components/app/styles/components/link/inline.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/app/styles/components/link/inline.scss b/packages/components/app/styles/components/link/inline.scss index babde0d50d..85962b2e1f 100644 --- a/packages/components/app/styles/components/link/inline.scss +++ b/packages/components/app/styles/components/link/inline.scss @@ -61,6 +61,6 @@ &:active, &.is-active { - color: var(--token-color-foreground-strong); + color: var(--token-color-foreground-faint); } } From 5e825732f6118108cebea58ad928c369a0a9a067 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 12 May 2022 19:00:07 +0100 Subject: [PATCH 58/75] removed underline on focus as per design specs --- packages/components/app/styles/components/link/inline.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/app/styles/components/link/inline.scss b/packages/components/app/styles/components/link/inline.scss index 85962b2e1f..700d770a63 100644 --- a/packages/components/app/styles/components/link/inline.scss +++ b/packages/components/app/styles/components/link/inline.scss @@ -15,7 +15,7 @@ &:focus-visible { outline: 2px solid var(--token-color-focus-action-internal); outline-offset: 1px; - // text-decoration: none; // TBD with CVeight + text-decoration: none; } } From 1e08d272875e36491f706bd16df213c6a70a79e2 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 18 May 2022 09:33:22 +0100 Subject: [PATCH 59/75] linting --- .../tests/dummy/app/templates/components/link/inline.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/tests/dummy/app/templates/components/link/inline.hbs b/packages/components/tests/dummy/app/templates/components/link/inline.hbs index f38ed621ce..a41b8877c6 100644 --- a/packages/components/tests/dummy/app/templates/components/link/inline.hbs +++ b/packages/components/tests/dummy/app/templates/components/link/inline.hbs @@ -7,7 +7,7 @@
    -

    Β§ Overview

    +

    Β§ Overview

    The Link::Inline From cc4dcd7a87cde5afd2b399454df1ddce07ce9132 Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 18 May 2022 12:43:34 +0100 Subject: [PATCH 60/75] Enable interactive links to be actioned using space To overcome potential barriers when users try to action a link element styled as a button using the space key we dispatch a click event. --- .../components/addon/components/hds/interactive/index.hbs | 4 ++-- .../components/addon/components/hds/interactive/index.js | 8 ++++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/components/addon/components/hds/interactive/index.hbs b/packages/components/addon/components/hds/interactive/index.hbs index ceca4f38d1..b35fdabc60 100644 --- a/packages/components/addon/components/hds/interactive/index.hbs +++ b/packages/components/addon/components/hds/interactive/index.hbs @@ -26,11 +26,11 @@ {{! IMPORTANT: we can't support the direct use of the "href" HTML attribute via ...attributes, because we need to rely on the "@href" Ember argument to differentiate between different types of generated output }} {{else if @href}} {{#if this.isHrefExternal}} - + {{yield}} {{else}} - + {{yield}} {{/if}} diff --git a/packages/components/addon/components/hds/interactive/index.js b/packages/components/addon/components/hds/interactive/index.js index 87fa5934fa..3b0ae362fb 100644 --- a/packages/components/addon/components/hds/interactive/index.js +++ b/packages/components/addon/components/hds/interactive/index.js @@ -1,4 +1,5 @@ import Component from '@glimmer/component'; +import { action } from '@ember/object'; export default class HdsInteractiveComponent extends Component { /** @@ -22,4 +23,11 @@ export default class HdsInteractiveComponent extends Component { get isRouteExternal() { return this.args.isRouteExternal ?? false; } + + @action + onKeyUp(event) { + if (event.key === ' ' || event.code === 'Space') { + event.target.click(); + } + } } From 07dd76ee5be5d3bb703ff50c669a15dee9a8b78f Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 18 May 2022 12:47:02 +0100 Subject: [PATCH 61/75] Test the dispatch of a click event when pressing space key on an interactive link In order to test a click event is dispatched when the space key is pressed on an interactive link element we need to be able to spy on events. As qunit doesn't have spies we add sinon, which seems to be the preferred library in Ember projects. --- packages/components/package.json | 3 ++- .../components/hds/interactive/index-test.js | 10 +++++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index 78b3baf2fc..f331ec1db3 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -43,7 +43,8 @@ "ember-focus-trap": "^1.0.1", "ember-keyboard": "^8.1.0", "ember-named-blocks-polyfill": "^0.2.5", - "sass": "^1.43.4" + "sass": "^1.43.4", + "sinon": "^14.0.0" }, "devDependencies": { "@ember/optional-features": "^2.0.0", diff --git a/packages/components/tests/integration/components/hds/interactive/index-test.js b/packages/components/tests/integration/components/hds/interactive/index-test.js index 0c9e654b43..ebb502d322 100644 --- a/packages/components/tests/integration/components/hds/interactive/index-test.js +++ b/packages/components/tests/integration/components/hds/interactive/index-test.js @@ -1,7 +1,8 @@ import { module, test, skip } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; +import { render, triggerKeyEvent } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; +import sinon from 'sinon'; module('Integration | Component | hds/interactive/index', function (hooks) { setupRenderingTest(hooks); @@ -129,4 +130,11 @@ module('Integration | Component | hds/interactive/index', function (hooks) { await render(hbs``); assert.dom('button#test-interactive').hasAttribute('type', 'submit'); }); + test('it should dispatch a click event when pressing space key on a link', async function (assert) { + await render(hbs``); + var interactiveComponent = document.querySelector('#test-interactive'); + var keyUpSpy = sinon.spy(interactiveComponent, 'click'); + await triggerKeyEvent(interactiveComponent, 'keyup', ' '); + assert.true(keyUpSpy.calledOnce); + }); }); From 2535a1dab0458fa5b8403f410e4def34162618d6 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 18 May 2022 17:24:43 +0100 Subject: [PATCH 62/75] re-added the underline to the text when `Hds::Button` is a link --- packages/components/app/styles/components/button.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/app/styles/components/button.scss b/packages/components/app/styles/components/button.scss index 40ef59fde0..3f56248b03 100644 --- a/packages/components/app/styles/components/button.scss +++ b/packages/components/app/styles/components/button.scss @@ -26,9 +26,8 @@ $hds-button-focus-border-width: 3px; position: relative; width: auto; - // we remove the underline when the rendered HTML element is an link + // the element behaves differently than a

    From e782b790014b61ecb65fbe0a443a89e2d89f2963 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Wed, 18 May 2022 17:39:03 +0100 Subject: [PATCH 65/75] updated tests after removing `@type` argument --- .../components/hds/button/index-test.js | 27 ------------------- 1 file changed, 27 deletions(-) diff --git a/packages/components/tests/integration/components/hds/button/index-test.js b/packages/components/tests/integration/components/hds/button/index-test.js index 25a7749496..66e44d7ff8 100644 --- a/packages/components/tests/integration/components/hds/button/index-test.js +++ b/packages/components/tests/integration/components/hds/button/index-test.js @@ -156,33 +156,6 @@ module('Integration | Component | hds/button/index', function (hooks) { throw new Error(errorMessage); }); }); - // for some strange reasons in "ember-lts-3.24" this test fails - skip('it should throw an assertion if an incorrect value for @type is provided', async function (assert) { - const errorMessage = - '@type for "Hds::Button" must be one of the following: button, submit, reset; received: foo'; - assert.expect(2); - setupOnerror(function (error) { - assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`); - }); - await render(hbs``); - assert.throws(function () { - throw new Error(errorMessage); - }); - }); - test('it should throw an assertion if @type is provided together with @href', async function (assert) { - const errorMessage = - '@type for "Hds::Button" should be passed only to generate a
    +
    +

    Β§ Accessibility

    +

    This component has been designed and implemented with accessibility in mind. When used as + recommended, there should not be any WCAG conformance issues with this component. +

    +

    + Applicable WCAG Success Criteria (Reference) +

    +

    + This section is for reference only. This component intends to conform to the following WCAG success criteria: +

    + +
    +

    Β§ Showcase

    Generated element

    From 32c837cc3d44a5840760e130f0bb8c050e20ad67 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 26 May 2022 16:19:00 +0100 Subject: [PATCH 74/75] fixed missed standalone link attribute --- .../tests/dummy/app/templates/components/dropdown.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/tests/dummy/app/templates/components/dropdown.hbs b/packages/components/tests/dummy/app/templates/components/dropdown.hbs index 026515a794..de71a6d020 100644 --- a/packages/components/tests/dummy/app/templates/components/dropdown.hbs +++ b/packages/components/tests/dummy/app/templates/components/dropdown.hbs @@ -505,7 +505,7 @@ - + From 0ca21798e190457fe51027d9b5d536b4c2a80d21 Mon Sep 17 00:00:00 2001 From: Cristiano Rastelli Date: Thu, 26 May 2022 16:38:12 +0100 Subject: [PATCH 75/75] updated link pages to use new mock status --- .../components/app/styles/components/link/inline.scss | 10 +++++----- .../app/styles/components/link/standalone.scss | 8 ++++---- .../dummy/app/templates/components/link/inline.hbs | 4 ++-- .../dummy/app/templates/components/link/standalone.hbs | 2 +- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/components/app/styles/components/link/inline.scss b/packages/components/app/styles/components/link/inline.scss index 700d770a63..d15ae8a760 100644 --- a/packages/components/app/styles/components/link/inline.scss +++ b/packages/components/app/styles/components/link/inline.scss @@ -11,7 +11,7 @@ border-radius: 2px; // this is used by the outline too &:focus, - &.is-focus, + &.mock-focus, &:focus-visible { outline: 2px solid var(--token-color-focus-action-internal); outline-offset: 1px; @@ -41,12 +41,12 @@ color: var(--token-color-foreground-action); &:hover, - &.is-hover { + &.mock-hover { color: var(--token-color-foreground-action-hover); } &:active, - &.is-active { + &.mock-active { color: var(--token-color-foreground-action-active); } } @@ -55,12 +55,12 @@ color: var(--token-color-foreground-strong); &:hover, - &.is-hover { + &.mock-hover { color: var(--token-color-foreground-primary); } &:active, - &.is-active { + &.mock-active { color: var(--token-color-foreground-faint); } } diff --git a/packages/components/app/styles/components/link/standalone.scss b/packages/components/app/styles/components/link/standalone.scss index 6a3b6efaf4..935e6422f2 100644 --- a/packages/components/app/styles/components/link/standalone.scss +++ b/packages/components/app/styles/components/link/standalone.scss @@ -84,7 +84,7 @@ $size-props: ( color: var(--token-color-foreground-action); &:hover, - &.is-hover { + &.mock-hover { color: var(--token-color-foreground-action-hover); .hds-link-standalone__text { @@ -93,7 +93,7 @@ $size-props: ( } &:active, - &.is-active { + &.mock-active { color: var(--token-color-foreground-action-active); .hds-link-standalone__text { @@ -110,14 +110,14 @@ $size-props: ( color: var(--token-color-foreground-strong); &:hover, - &.is-hover { + &.mock-hover { .hds-link-standalone__text { text-decoration-color: #4D4D4F; // custom color by design } } &:active, - &.is-active { + &.mock-active { color: var(--token-color-foreground-primary); .hds-link-standalone__text { diff --git a/packages/components/tests/dummy/app/templates/components/link/inline.hbs b/packages/components/tests/dummy/app/templates/components/link/inline.hbs index 44c3cf4b6c..00f1bcbcba 100644 --- a/packages/components/tests/dummy/app/templates/components/link/inline.hbs +++ b/packages/components/tests/dummy/app/templates/components/link/inline.hbs @@ -445,8 +445,8 @@
    This is the {{state}} state
    @@ -454,10 +454,10 @@
    This is the {{state}} state
    diff --git a/packages/components/tests/dummy/app/templates/components/link/standalone.hbs b/packages/components/tests/dummy/app/templates/components/link/standalone.hbs index 9b2ce740ff..57110241f8 100644 --- a/packages/components/tests/dummy/app/templates/components/link/standalone.hbs +++ b/packages/components/tests/dummy/app/templates/components/link/standalone.hbs @@ -422,8 +422,8 @@ @text={{capitalize state}} @size={{size}} @color={{color}} - class="is-{{state}}" @href="../components/link" + mock-state-value={{state}} /> {{/each}}