From 6cef50b4b2ef986f37d3b487591fc8f7c2df8838 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 25 May 2022 09:55:31 +0100
Subject: [PATCH 1/6] =?UTF-8?q?added=20controller=20for=20the=20=E2=80=9Cc?=
 =?UTF-8?q?omponents=E2=80=9D=20pages=20that=20takes=20care=20of=20handlin?=
 =?UTF-8?q?g=20`mock-state`=20attributes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tests/dummy/app/controllers/components.js | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 packages/components/tests/dummy/app/controllers/components.js

diff --git a/packages/components/tests/dummy/app/controllers/components.js b/packages/components/tests/dummy/app/controllers/components.js
new file mode 100644
index 00000000000..d9521a943cf
--- /dev/null
+++ b/packages/components/tests/dummy/app/controllers/components.js
@@ -0,0 +1,24 @@
+import Controller from '@ember/controller';
+import { scheduleOnce } from '@ember/runloop';
+
+function replaceDummyStates() {
+  document.querySelectorAll('[mock-state-value]').forEach(function (element) {
+    let target;
+    if (element.attributes['mock-state-selector']) {
+      target = element.querySelector(
+        element.attributes['mock-state-selector'].value
+      );
+    } else {
+      target = element;
+    }
+    const state = element.attributes['mock-state-value'].value;
+    target.classList.add(`mock-${state}`);
+  });
+}
+
+export default class ComponentsController extends Controller {
+  constructor() {
+    super(...arguments);
+    scheduleOnce('afterRender', this, replaceDummyStates);
+  }
+}

From 479aea4418e2648f46209b26fc031e2af101a645 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 25 May 2022 09:57:58 +0100
Subject: [PATCH 2/6] updated `Dropdown` + `Button` dummy pages (and related
 components and CSS files) to use the new `mock-status` approach

---
 .../hds/dropdown/list-item/copy-item.hbs      |  2 +-
 .../hds/dropdown/list-item/interactive.hbs    |  5 +--
 .../app/styles/components/button.scss         | 38 +++++++++----------
 .../app/styles/components/dropdown.scss       | 20 +++++-----
 .../app/styles/mixins/_focus-ring.scss        | 12 ++++--
 .../dummy/app/templates/components/button.hbs | 10 ++++-
 .../app/templates/components/dropdown.hbs     | 23 ++++++-----
 7 files changed, 62 insertions(+), 48 deletions(-)

diff --git a/packages/components/addon/components/hds/dropdown/list-item/copy-item.hbs b/packages/components/addon/components/hds/dropdown/list-item/copy-item.hbs
index d1cc4f8ff8a..68a34c67c4c 100644
--- a/packages/components/addon/components/hds/dropdown/list-item/copy-item.hbs
+++ b/packages/components/addon/components/hds/dropdown/list-item/copy-item.hbs
@@ -6,7 +6,7 @@
   {{/if}}
   <button
     type="button"
-    class="{{if @state (concat 'is-' @state)}} {{if this.isSuccess 'is-success'}}"
+    class="{{if this.isSuccess 'is-success'}}"
     {{on "click" this.copyCode}}
   >
     <div class="hds-dropdown-list-item__copy-item-text hds-typography-code-100">
diff --git a/packages/components/addon/components/hds/dropdown/list-item/interactive.hbs b/packages/components/addon/components/hds/dropdown/list-item/interactive.hbs
index 2329862bb32..832b7a521e9 100644
--- a/packages/components/addon/components/hds/dropdown/list-item/interactive.hbs
+++ b/packages/components/addon/components/hds/dropdown/list-item/interactive.hbs
@@ -1,7 +1,6 @@
 <li class={{this.classNames}}>
   {{#if @route}}
     <LinkTo
-      class="{{if @state (concat 'is-' @state)}}"
       @current-when={{@current-when}}
       @models={{hds-link-to-models @model @models}}
       @query={{hds-link-to-query @query}}
@@ -19,7 +18,7 @@
       </div>
     </LinkTo>
   {{else if @href}}
-    <a target="_blank" rel="noopener noreferrer" href={{@href}} class="{{if @state (concat 'is-' @state)}}">
+    <a target="_blank" rel="noopener noreferrer" href={{@href}}>
       {{#if @icon}}
         <div class="hds-dropdown-list-item__interactive-icon">
           <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
@@ -30,7 +29,7 @@
       </div>
     </a>
   {{else}}
-    <button class="{{if @state (concat 'is-' @state)}}" type="button" ...attributes>
+    <button type="button" ...attributes>
       {{#if @icon}}
         <div class="hds-dropdown-list-item__interactive-icon">
           <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
diff --git a/packages/components/app/styles/components/button.scss b/packages/components/app/styles/components/button.scss
index c5e194f0519..437cd31a8d9 100644
--- a/packages/components/app/styles/components/button.scss
+++ b/packages/components/app/styles/components/button.scss
@@ -29,13 +29,13 @@ $hds-button-focus-border-width: 3px;
   // This covers all of the browsers and focus scenarios (due to the custom focus design).
   &:disabled,
   &[disabled],
-  &.is-disabled,
+  &.mock-disabled,
   &:disabled:focus,
   &[disabled]:focus,
-  &.is-disabled:focus,
+  &.mock-disabled:focus,
   &:disabled:hover,
   &[disabled]:hover,
-  &.is-disabled:hover {
+  &.mock-disabled:hover {
     background-color: var(--token-color-surface-faint);
     border-color: var(--token-color-border-primary);
     box-shadow: none;
@@ -57,7 +57,7 @@ $hds-button-focus-border-width: 3px;
   }
 
   &:focus,
-  &.is-focus {
+  &.mock-focus {
     box-shadow: none;
 
     &::before {
@@ -145,7 +145,7 @@ $size-props: (
   color: var(--token-color-foreground-high-contrast);
 
   &:hover,
-  &.is-hover {
+  &.mock-hover {
     background-color: var(--token-color-palette-blue-300);
     border-color: var(--token-color-palette-blue-400);
     color: var(--token-color-foreground-high-contrast);
@@ -153,7 +153,7 @@ $size-props: (
   }
 
   &:focus,
-  &.is-focus {
+  &.mock-focus {
     background-color: var(--token-color-palette-blue-200);
     border-color: var(--token-color-focus-action-internal);
     color: var(--token-color-foreground-high-contrast);
@@ -172,7 +172,7 @@ $size-props: (
   }
 
   &:active,
-  &.is-active {
+  &.mock-active {
     background-color: var(--token-color-palette-blue-400);
     border-color: var(--token-color-palette-blue-400);
     box-shadow: none;
@@ -190,7 +190,7 @@ $size-props: (
   color: var(--token-color-foreground-primary);
 
   &:hover,
-  &.is-hover {
+  &.mock-hover {
     background-color: var(--token-color-surface-primary);
     border-color: var(--token-color-border-strong);
     color: var(--token-color-foreground-primary);
@@ -198,7 +198,7 @@ $size-props: (
   }
 
   &:focus,
-  &.is-focus {
+  &.mock-focus {
     background-color: var(--token-color-surface-faint);
     border-color: var(--token-color-focus-action-internal);
     color: var(--token-color-foreground-primary);
@@ -208,7 +208,7 @@ $size-props: (
   }
 
   &:active,
-  &.is-active {
+  &.mock-active {
     background-color: var(--token-color-surface-interactive-active);
     border-color: var(--token-color-border-strong);
     box-shadow: none;
@@ -225,7 +225,7 @@ $size-props: (
   color: var(--token-color-foreground-action);
 
   &:hover,
-  &.is-hover {
+  &.mock-hover {
     background-color: var(--token-color-surface-primary);
     border-color: var(--token-color-border-strong);
     color: var(--token-color-foreground-action-hover);
@@ -233,7 +233,7 @@ $size-props: (
   }
 
   &:focus,
-  &.is-focus {
+  &.mock-focus {
     border-color: var(--token-color-focus-action-internal);
     color: var(--token-color-foreground-action);
     &::before {
@@ -242,7 +242,7 @@ $size-props: (
   }
 
   &:active,
-  &.is-active {
+  &.mock-active {
     background-color: var(--token-color-surface-interactive-active);
     border-color: var(--token-color-border-strong);
     box-shadow: none;
@@ -254,13 +254,13 @@ $size-props: (
 
   &:disabled,
   &[disabled],
-  &.is-disabled,
+  &.mock-disabled,
   &:disabled:focus,
   &[disabled]:focus,
-  &.is-disabled:focus,
+  &.mock-disabled:focus,
   &:disabled:hover,
   &[disabled]:hover,
-  &.is-disabled:hover {
+  &.mock-disabled:hover {
     background-color: transparent;
     border-color: transparent;
 
@@ -277,7 +277,7 @@ $size-props: (
   color: var(--token-color-foreground-critical-on-surface);
 
   &:hover,
-  &.is-hover {
+  &.mock-hover {
     background-color: var(--token-color-palette-red-300);
     border-color: var(--token-color-palette-red-400);
     color: var(--token-color-foreground-high-contrast);
@@ -285,7 +285,7 @@ $size-props: (
   }
 
   &:focus,
-  &.is-focus {
+  &.mock-focus {
     background-color: var(--token-color-surface-critical);
     border-color: var(--token-color-focus-critical-internal);
     color: var(--token-color-foreground-critical-on-surface);
@@ -295,7 +295,7 @@ $size-props: (
   }
 
   &:active,
-  &.is-active {
+  &.mock-active {
     background-color: var(--token-color-palette-red-400);
     border-color: var(--token-color-palette-red-400);
     box-shadow: none;
diff --git a/packages/components/app/styles/components/dropdown.scss b/packages/components/app/styles/components/dropdown.scss
index 41c09dc7282..bf968160f08 100644
--- a/packages/components/app/styles/components/dropdown.scss
+++ b/packages/components/app/styles/components/dropdown.scss
@@ -40,7 +40,7 @@ $hds-dropdown-toggle-border-radius: 5px;
   padding: 1px;
 
   &:hover,
-  &.is-hover {
+  &.mock-hover {
     background-color: var(--token-color-surface-interactive);
     border-color: var(--token-color-border-strong);
     cursor: pointer;
@@ -49,7 +49,7 @@ $hds-dropdown-toggle-border-radius: 5px;
   @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px, $radius: $hds-dropdown-toggle-border-radius);
 
   &:active,
-  &.is-active {
+  &.mock-active {
     background-color: var(--token-color-surface-interactive-active);
     border-color: var(--token-color-border-strong);
   }
@@ -166,7 +166,7 @@ $hds-dropdown-toggle-border-radius: 5px;
     width: 100%;
 
     &:hover,
-    &.is-hover {
+    &.mock-hover {
       background-color: var(--token-color-surface-interactive-hover);
       cursor: pointer;
     }
@@ -174,18 +174,18 @@ $hds-dropdown-toggle-border-radius: 5px;
     @include hds-focus-ring-basic();
 
     &:focus,
-    &.is-focus {
+    &.mock-focus {
       //TODO this focus is just way too complex
       background-color:  var(--token-color-surface-action);
       border-color: var(--token-color-focus-action-internal);
     }
 
     &:active,
-    &.is-active {
+    &.mock-active {
       background-color: var(--token-color-surface-interactive-active);
     }
 
-    &.is-success {
+    &.mock-success {
       background-color: var(--token-color-surface-success);
       border-color: var(--token-color-border-success);
 
@@ -275,7 +275,7 @@ $hds-dropdown-toggle-border-radius: 5px;
     // and define their values in the color variants below
 
     &:hover,
-    &.is-hover {
+    &.mock-hover {
       color: var(--current-color-hover);
       &::before {
         background-color: currentColor;
@@ -284,7 +284,7 @@ $hds-dropdown-toggle-border-radius: 5px;
 
     // default focus for browsers that still rely on ":focus"
     &:focus,
-    &.is-focus {
+    &.mock-focus {
       color: var(--current-color-focus);
       &::after {
         background-color: var(--current-background-color);
@@ -312,7 +312,7 @@ $hds-dropdown-toggle-border-radius: 5px;
     // remove the focus ring on "active + focused" state (by design)
     &:focus:active,
     &:focus-visible:active,
-    &.is-focus.is-active {
+    &.mock-focus.mock-active {
       &::after {
         background-color: var(--current-background-color);
         box-shadow: none;
@@ -321,7 +321,7 @@ $hds-dropdown-toggle-border-radius: 5px;
     }
 
     &:active,
-    &.is-active {
+    &.mock-active {
       color: var(--current-color-active);
       &::before {
         background-color: currentColor;
diff --git a/packages/components/app/styles/mixins/_focus-ring.scss b/packages/components/app/styles/mixins/_focus-ring.scss
index 0c09493ba5d..f5d775f43de 100644
--- a/packages/components/app/styles/mixins/_focus-ring.scss
+++ b/packages/components/app/styles/mixins/_focus-ring.scss
@@ -8,7 +8,8 @@
 
   // default focus for browsers that still rely on ":focus"
   &:focus,
-  &.is-focus {
+  &.is-focus,
+  &.mock-focus {
     box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
   }
   // undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
@@ -21,7 +22,8 @@
   }
   // remove the focus ring on "active + focused" state (by design)
   &:focus:active,
-  &.is-focus.is-active {
+  &.is-focus.is-active,
+  &.mock-focus.is-active {
     box-shadow: none;
   }
 }
@@ -45,7 +47,8 @@
 
   // default focus for browsers that still rely on ":focus"
   &:focus,
-  &.is-focus {
+  &.is-focus,
+  &.mock-focus {
     &::before {
       box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
     }
@@ -64,7 +67,8 @@
   }
   // remove the focus ring on "active + focused" state (by design)
   &:focus:active,
-  &.is-focus.is-active {
+  &.is-focus.is-active,
+  &.mock-focus.is-active {
     &::before {
       box-shadow: none;
     }
diff --git a/packages/components/tests/dummy/app/templates/components/button.hbs b/packages/components/tests/dummy/app/templates/components/button.hbs
index 81854a2ec5d..dff9bfbf6a2 100644
--- a/packages/components/tests/dummy/app/templates/components/button.hbs
+++ b/packages/components/tests/dummy/app/templates/components/button.hbs
@@ -344,7 +344,13 @@
           <div>
             <span class="dummy-text-small">{{capitalize size}}/{{state}}:</span>
             <br />
-            <Hds::Button @icon="plus" @text={{capitalize state}} @size={{size}} @color={{color}} class="is-{{state}}" />
+            <Hds::Button
+              @icon="plus"
+              @text={{capitalize state}}
+              @size={{size}}
+              @color={{color}}
+              mock-state-value={{state}}
+            />
           </div>
         {{/each}}
       {{/each}}
@@ -358,7 +364,7 @@
               @text={{capitalize state}}
               @color={{color}}
               @isFullWidth={{true}}
-              class="is-{{state}}"
+              mock-state-value={{state}}
             />
           </div>
         {{/each}}
diff --git a/packages/components/tests/dummy/app/templates/components/dropdown.hbs b/packages/components/tests/dummy/app/templates/components/dropdown.hbs
index 053144bd408..026515a7948 100644
--- a/packages/components/tests/dummy/app/templates/components/dropdown.hbs
+++ b/packages/components/tests/dummy/app/templates/components/dropdown.hbs
@@ -860,7 +860,7 @@
         <div>
           <span class="dummy-text-small">{{color}}/{{state}}:</span>
           <br />
-          <Hds::Dropdown::Toggle::Button @text={{capitalize state}} @color={{color}} class="is-{{state}}" />
+          <Hds::Dropdown::Toggle::Button @text={{capitalize state}} @color={{color}} mock-state-value={{state}} />
         </div>
       {{/each}}
       <div>
@@ -878,7 +878,7 @@
           @icon="more-horizontal"
           @text="overflow menu"
           @hasChevron={{false}}
-          class="is-{{state}}"
+          mock-state-value={{state}}
         />
       </div>
     {{/each}}
@@ -897,7 +897,7 @@
       <div>
         <span class="dummy-text-small">icon+chevron/{{state}}:</span>
         <br />
-        <Hds::Dropdown::Toggle::Icon @icon="user" @text={{state}} class="is-{{state}}" />
+        <Hds::Dropdown::Toggle::Icon @icon="user" @text={{state}} mock-state-value={{state}} />
       </div>
     {{/each}}
     <div>
@@ -910,7 +910,7 @@
       <div>
         <span class="dummy-text-small">avatar+chevron/{{state}}:</span>
         <br />
-        <Hds::Dropdown::Toggle::Icon @text={{state}} @imageSrc="/assets/images/avatar.png" class="is-{{state}}" />
+        <Hds::Dropdown::Toggle::Icon @text={{state}} @imageSrc="/assets/images/avatar.png" mock-state-value={{state}} />
       </div>
     {{/each}}
     <div>
@@ -1020,7 +1020,7 @@
     <div class="dummy-dropdown-list-items-base-sample">
       <ul class="hds-dropdown-list">
         {{#each @model.ITEM_STATES as |state|}}
-          <Hds::Dropdown::ListItem::Interactive @text={{state}} @color={{color}} @state={{state}} />
+          <Hds::Dropdown::ListItem::Interactive @text={{state}} @color={{color}} mock-state-value={{state}} />
         {{/each}}
       </ul>
       <ul class="hds-dropdown-list">
@@ -1029,7 +1029,7 @@
             @icon={{if (eq color "critical") "trash" "settings"}}
             @text="{{state}} with icon"
             @color={{color}}
-            @state={{state}}
+            mock-state-value={{state}}
           />
         {{/each}}
       </ul>
@@ -1039,7 +1039,7 @@
             @icon={{if (eq color "critical") "trash" "settings"}}
             @text="{{state}} with a longer text string that may wrap since max-width is defined on the container"
             @color={{color}}
-            @state={{state}}
+            mock-state-value={{state}}
           />
         {{/each}}
       </ul>
@@ -1083,12 +1083,17 @@
     {{! template-lint-disable no-inline-styles }}
     <ul class="hds-dropdown-list" style="width: 250px">
       {{#each @model.ITEM_STATES as |state|}}
-        <Hds::Dropdown::ListItem::CopyItem @text="{{state}}: 91ee1e8ef65b337f0e70d793f456c71d" @state={{state}} />
+        <Hds::Dropdown::ListItem::CopyItem
+          @text="{{state}}: 91ee1e8ef65b337f0e70d793f456c71d"
+          mock-state-value={{state}}
+          mock-state-selector="button"
+        />
       {{/each}}
       <Hds::Dropdown::ListItem::CopyItem
         @text="success: 91ee1e8ef65b337f0e70d793f456c71d91ee1e8ef65b337f0e70d793f456c71d91ee1e8ef65b337f0e70d793f456c71d"
-        @state="success"
         @isSuccess="true"
+        mock-state-value="success"
+        mock-state-selector="button"
       />
     </ul>
     {{! template-lint-enable no-inline-styles }}

From 5420f941adfcb29f607c4b32c7e53fae7960425f Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 25 May 2022 10:35:43 +0100
Subject: [PATCH 3/6] linting

---
 .../addon/components/hds/dropdown/list-item/copy-item.hbs   | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/components/addon/components/hds/dropdown/list-item/copy-item.hbs b/packages/components/addon/components/hds/dropdown/list-item/copy-item.hbs
index 68a34c67c4c..35f77a9c41a 100644
--- a/packages/components/addon/components/hds/dropdown/list-item/copy-item.hbs
+++ b/packages/components/addon/components/hds/dropdown/list-item/copy-item.hbs
@@ -4,11 +4,7 @@
       class="hds-dropdown-list-item__copy-item-title hds-typography-body-100 hds-font-weight-semibold"
     >{{@copyItemTitle}}</div>
   {{/if}}
-  <button
-    type="button"
-    class="{{if this.isSuccess 'is-success'}}"
-    {{on "click" this.copyCode}}
-  >
+  <button type="button" class="{{if this.isSuccess 'is-success'}}" {{on "click" this.copyCode}}>
     <div class="hds-dropdown-list-item__copy-item-text hds-typography-code-100">
       {{this.text}}
     </div>

From 2ed672e5f9a4a6e5449ebc0e0965025fc1dddc3a Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 25 May 2022 12:24:07 +0100
Subject: [PATCH 4/6] generalized `replaceMockStates` function to handle
 multiple states + multiple targets

---
 .../tests/dummy/app/controllers/components.js | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/components/tests/dummy/app/controllers/components.js b/packages/components/tests/dummy/app/controllers/components.js
index d9521a943cf..e2725ca1ab7 100644
--- a/packages/components/tests/dummy/app/controllers/components.js
+++ b/packages/components/tests/dummy/app/controllers/components.js
@@ -1,24 +1,26 @@
 import Controller from '@ember/controller';
 import { scheduleOnce } from '@ember/runloop';
 
-function replaceDummyStates() {
-  document.querySelectorAll('[mock-state-value]').forEach(function (element) {
-    let target;
+function replaceMockStates() {
+  document.querySelectorAll('[mock-state-value]').forEach((element) => {
+    let targets;
     if (element.attributes['mock-state-selector']) {
-      target = element.querySelector(
+      targets = element.querySelectorAll(
         element.attributes['mock-state-selector'].value
       );
     } else {
-      target = element;
+      targets = [element];
     }
-    const state = element.attributes['mock-state-value'].value;
-    target.classList.add(`mock-${state}`);
+    const states = element.attributes['mock-state-value'].value.split('+');
+    const classes = states.map((state) => `mock-${state.trim()}`);
+    targets.forEach((target) => {
+      target.classList.add(...classes);
+    });
   });
 }
-
 export default class ComponentsController extends Controller {
   constructor() {
     super(...arguments);
-    scheduleOnce('afterRender', this, replaceDummyStates);
+    scheduleOnce('afterRender', this, replaceMockStates);
   }
 }

From ddfc49a004e53c7c216be330fb2170bf4ced158d Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 25 May 2022 14:55:45 +0100
Subject: [PATCH 5/6] changes suggested by Jamie White to fix issue with
 `constructor()`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ah yeah, this is the ultimate gotcha with controllers — they’re singletons. So that constructor will only be run once for the lifetime of the application.
---
 .../tests/dummy/app/controllers/components.js         | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/components/tests/dummy/app/controllers/components.js b/packages/components/tests/dummy/app/controllers/components.js
index e2725ca1ab7..fb466da9e9c 100644
--- a/packages/components/tests/dummy/app/controllers/components.js
+++ b/packages/components/tests/dummy/app/controllers/components.js
@@ -1,4 +1,5 @@
 import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
 import { scheduleOnce } from '@ember/runloop';
 
 function replaceMockStates() {
@@ -19,8 +20,18 @@ function replaceMockStates() {
   });
 }
 export default class ComponentsController extends Controller {
+  @service router;
+
   constructor() {
     super(...arguments);
+    this.router.on('routeDidChange', this, 'routeDidChange');
+  }
+
+  routeDidChange() {
     scheduleOnce('afterRender', this, replaceMockStates);
   }
+
+  willDestroy() {
+    this.router.off('routeDidChange', this, 'routeDidChange');
+  }
 }

From a3ad600e670bc6be86a15392c2e568db64222895 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Wed, 25 May 2022 15:18:56 +0100
Subject: [PATCH 6/6] updated tests for CTA to avoid Percy failing tests

---
 .../dummy/app/templates/components/link-to/cta.hbs     |  4 ++--
 .../tests/dummy/app/templates/components/link/cta.hbs  | 10 ++++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/components/tests/dummy/app/templates/components/link-to/cta.hbs b/packages/components/tests/dummy/app/templates/components/link-to/cta.hbs
index e2ef9a12498..a3448015abc 100644
--- a/packages/components/tests/dummy/app/templates/components/link-to/cta.hbs
+++ b/packages/components/tests/dummy/app/templates/components/link-to/cta.hbs
@@ -278,8 +278,8 @@
             @icon="plus"
             @text={{capitalize state}}
             @size={{size}}
-            class="is-{{state}}"
             @route="components.link-to.cta"
+            mock-state-value={{state}}
           />
         </div>
       {{/each}}
@@ -292,8 +292,8 @@
           @icon="plus"
           @text={{capitalize state}}
           @isFullWidth={{true}}
-          class="is-{{state}}"
           @route="components.link-to.cta"
+          mock-state-value={{state}}
         />
       </div>
     {{/each}}
diff --git a/packages/components/tests/dummy/app/templates/components/link/cta.hbs b/packages/components/tests/dummy/app/templates/components/link/cta.hbs
index 946ad1ac13b..c424112b511 100644
--- a/packages/components/tests/dummy/app/templates/components/link/cta.hbs
+++ b/packages/components/tests/dummy/app/templates/components/link/cta.hbs
@@ -256,7 +256,7 @@
         <div>
           <span class="dummy-text-small">{{capitalize size}}/{{state}}:</span>
           <br />
-          <Hds::Link::Cta @icon="plus" @text={{capitalize state}} @size={{size}} class="is-{{state}}" href="#" />
+          <Hds::Link::Cta @icon="plus" @text={{capitalize state}} @size={{size}} href="#" mock-state-value={{state}} />
         </div>
       {{/each}}
     {{/each}}
@@ -264,7 +264,13 @@
       <div>
         <span class="dummy-text-small">Full width/{{state}}:</span>
         <br />
-        <Hds::Link::Cta @icon="plus" @text={{capitalize state}} @isFullWidth={{true}} class="is-{{state}}" href="#" />
+        <Hds::Link::Cta
+          @icon="plus"
+          @text={{capitalize state}}
+          @isFullWidth={{true}}
+          href="#"
+          mock-state-value={{state}}
+        />
       </div>
     {{/each}}
   </div>