From 03b8e2875ff18fba8de15788d2c1fa53c396a382 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Wed, 12 Jan 2022 15:44:07 -0800
Subject: [PATCH 01/25] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20merge=20recent=20m?=
 =?UTF-8?q?ain?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/admin/app/templates/scopes/scope/auth-methods/index.hbs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
index ea12808c3..b2380e0fb 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
@@ -35,7 +35,6 @@
   </page.actions>
 
   <page.body>
-
     {{#if
       (or
         @model

From af9bb1c618f2dc5f033b8fe283ff90803e96c48b Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Thu, 13 Jan 2022 09:06:09 -0800
Subject: [PATCH 02/25] updates to card style

---
 .../rose/form/radio/radio-card/index.js         |  7 +++++++
 .../styles/rose/components/form/_index.scss     |  1 +
 .../styles/rose/components/form/_radioCard.scss | 17 +++++++++++++++++
 .../components/rose/form/radio/radio-card.js    |  1 +
 .../scopes/scope/auth-methods/index.hbs         |  6 ++++++
 5 files changed, 32 insertions(+)
 create mode 100644 addons/rose/addon/components/rose/form/radio/radio-card/index.js
 create mode 100644 addons/rose/addon/styles/rose/components/form/_radioCard.scss
 create mode 100644 addons/rose/app/components/rose/form/radio/radio-card.js

diff --git a/addons/rose/addon/components/rose/form/radio/radio-card/index.js b/addons/rose/addon/components/rose/form/radio/radio-card/index.js
new file mode 100644
index 000000000..235f017f6
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/radio/radio-card/index.js
@@ -0,0 +1,7 @@
+import RoseFormRadioRadioComponent from '../radio';
+
+export default class RoseFormRadioRadioCardComponent extends RoseFormRadioRadioComponent {
+  // =attributes
+
+  className = 'rose-form-radio-card';
+}
\ No newline at end of file
diff --git a/addons/rose/addon/styles/rose/components/form/_index.scss b/addons/rose/addon/styles/rose/components/form/_index.scss
index 73137ac8d..677cee98c 100644
--- a/addons/rose/addon/styles/rose/components/form/_index.scss
+++ b/addons/rose/addon/styles/rose/components/form/_index.scss
@@ -6,3 +6,4 @@
 @import 'select';
 @import 'radio';
 @import 'fieldset';
+@import 'radioCard';
\ No newline at end of file
diff --git a/addons/rose/addon/styles/rose/components/form/_radioCard.scss b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
new file mode 100644
index 000000000..20210ff15
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
@@ -0,0 +1,17 @@
+.rose-form-radio-card {
+     position: relative;
+    width: 370px;
+    height: 115px;    
+    background: #FFFFFF;
+    border: 1px solid #BAC1CC;    
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 2px;
+  .rose-form-radio-field {
+    top: 89px;
+    right: 176px;
+    position: absolute;
+  }
+  .rose-form-radio-label {
+      color: #000;
+  }
+}
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/form/radio/radio-card.js b/addons/rose/app/components/rose/form/radio/radio-card.js
new file mode 100644
index 000000000..42acc95ea
--- /dev/null
+++ b/addons/rose/app/components/rose/form/radio/radio-card.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form/radio/radio-card';
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
index b2380e0fb..646098f1c 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
@@ -35,6 +35,12 @@
   </page.actions>
 
   <page.body>
+    <Rose::Form::Radio::RadioCard 
+      @name='Amazon Quipu' 
+      @label='Amazon Quipu'
+      @value='Amazon Quipu'
+    >
+    </Rose::Form::Radio::RadioCard>
     {{#if
       (or
         @model

From c807af02f496660284848284c1c0e769f17014d9 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Thu, 13 Jan 2022 14:19:43 -0800
Subject: [PATCH 03/25] add padding to label and align it

---
 .../rose/addon/styles/rose/components/form/_radioCard.scss   | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/addons/rose/addon/styles/rose/components/form/_radioCard.scss b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
index 20210ff15..1bfff39e5 100644
--- a/addons/rose/addon/styles/rose/components/form/_radioCard.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
@@ -6,6 +6,8 @@
     border: 1px solid #BAC1CC;    
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     border-radius: 2px;
+    font-size: 14px;
+    font-weight: bold;
   .rose-form-radio-field {
     top: 89px;
     right: 176px;
@@ -13,5 +15,8 @@
   }
   .rose-form-radio-label {
       color: #000;
+      margin-top: 16px;
+      display: block;
+      margin-left: 48px;
   }
 }
\ No newline at end of file

From bf09c9b0b83834a2456901f6e95b724eff4e2ee2 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Sun, 16 Jan 2022 16:37:55 -0800
Subject: [PATCH 04/25] more updates

---
 .../rose/form/radio/radio-card/index.js       |   2 +-
 .../form/radio/radio-card/index.stories.mdx   | 120 ++++++++++++++++++
 .../rose/form/radio/radio/index.hbs           |   4 +-
 .../styles/rose/components/form/_index.scss   |   2 +-
 .../rose/components/form/_radioCard.scss      |  87 ++++++++++---
 .../scopes/scope/auth-methods/index.hbs       |   1 +
 6 files changed, 194 insertions(+), 22 deletions(-)
 create mode 100644 addons/rose/addon/components/rose/form/radio/radio-card/index.stories.mdx

diff --git a/addons/rose/addon/components/rose/form/radio/radio-card/index.js b/addons/rose/addon/components/rose/form/radio/radio-card/index.js
index 235f017f6..67337301e 100644
--- a/addons/rose/addon/components/rose/form/radio/radio-card/index.js
+++ b/addons/rose/addon/components/rose/form/radio/radio-card/index.js
@@ -4,4 +4,4 @@ export default class RoseFormRadioRadioCardComponent extends RoseFormRadioRadioC
   // =attributes
 
   className = 'rose-form-radio-card';
-}
\ No newline at end of file
+}
diff --git a/addons/rose/addon/components/rose/form/radio/radio-card/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/radio-card/index.stories.mdx
new file mode 100644
index 000000000..35a81b942
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/radio/radio-card/index.stories.mdx
@@ -0,0 +1,120 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { text, boolean, select } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Form/Radio/Radio/RadioCard" component="Form/Radio/Radio/RadioCard" />
+
+# Form Radiofield
+
+Renders a form radiofield.
+
+```htmlbars
+<Rose::Form::Radio::RadioCard
+  @label="Yes"
+  @error={{false}}
+  @value="yes-agree"
+  @selectedValue="yes-agree"
+  @disabled={{false}}
+  @changed={{fn}}
+  />
+```
+
+<Preview>
+  <Story name="Basic" height="10rem">{{
+    template: hbs`
+      <Rose::Form::Radio::RadioCard
+        @label={{label}}
+        @error={{error}}
+        @value={{value}}
+        @selectedValue={{selectedValue}}
+        @disabled={{disabled}}
+        @icon={{icon}}
+        />
+    `,
+    context: {
+      label: text('text', 'Radiofield'),
+      error: boolean('error', false),
+      value: text('value', 'value and selectedValue must match to select radiofield'),
+      selectedValue: text(
+        'selectedValue',
+        'value and selectedValue must match to select radiofield'
+      ),
+      disabled: boolean('disabled', false),
+      icon: select(
+        'icon',
+        {
+          'none': null,
+          'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
+          'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
+        },
+        null
+      ),
+    }
+  }}</Story>
+</Preview>
+
+
+```htmlbars
+<Rose::Form::Radio::RadioCard
+  @label="Yes"
+  @error={{false}}
+  @value="yes-agree"
+  @selectedValue="yes-agree"
+  @disabled={{false}}
+  @changed={{fn}}
+  @inline={{true}}
+  />
+```
+
+<Preview>
+  <Story name="Radio with inline style" height="10rem">{{
+    template: hbs`
+      <Rose::Form::Radio::RadioCard
+        @label='Radiofield1'
+        @error={{error}}
+        @value={{value}}
+        @selectedValue={{selectedValue}}
+        @disabled={{disabled}}
+        @icon={{icon}}
+        @inline={{inline}}
+        />
+      <Rose::Form::Radio::RadioCard
+        @label='Radiofield2'
+        @error={{error}}
+        @value={{value}}
+        @selectedValue={{selectedValue}}
+        @disabled={{disabled}}
+        @icon={{icon}}
+        @inline={{inline}}
+        />
+      <Rose::Form::Radio::RadioCard
+        @label='Radiofield3'
+        @error={{error}}
+        @value={{value}}
+        @selectedValue={{selectedValue}}
+        @disabled={{disabled}}
+        @icon={{icon}}
+        @inline={{inline}}
+        />
+    `,
+    context: {
+      error: boolean('error', false),
+      value: text('value', 'value and selectedValue must match to select radiofield'),
+      selectedValue: text(
+        'selectedValue',
+        'value and selectedValue must match to select radiofield'
+      ),
+      disabled: boolean('disabled', false),
+      icon: select(
+        'icon',
+        {
+          'none': null,
+          'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
+          'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
+        },
+        null
+      ),
+      inline: boolean('inline', false)
+    }
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.hbs b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
index 47621405d..8537a4d00 100644
--- a/addons/rose/addon/components/rose/form/radio/radio/index.hbs
+++ b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
@@ -1,5 +1,5 @@
 <div class="{{this.className}} {{if @error " error"}} {{if @inline "inline"}}">
-
+ <span class='radio-wrapper'>
   <RadioButton
     ...attributes
     @radioClass="rose-form-radio-field"
@@ -11,7 +11,7 @@
     @groupValue={{@selectedValue}}
     @disabled={{@disabled}}
     @changed={{@changed}} />
-
+  </span>
   <label class="rose-form-radio-label" for={{this.id}}>
 
     {{#if @icon}}
diff --git a/addons/rose/addon/styles/rose/components/form/_index.scss b/addons/rose/addon/styles/rose/components/form/_index.scss
index 677cee98c..2e00a9e1e 100644
--- a/addons/rose/addon/styles/rose/components/form/_index.scss
+++ b/addons/rose/addon/styles/rose/components/form/_index.scss
@@ -6,4 +6,4 @@
 @import 'select';
 @import 'radio';
 @import 'fieldset';
-@import 'radioCard';
\ No newline at end of file
+@import 'radioCard';
diff --git a/addons/rose/addon/styles/rose/components/form/_radioCard.scss b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
index 1bfff39e5..bfb66a079 100644
--- a/addons/rose/addon/styles/rose/components/form/_radioCard.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
@@ -1,22 +1,73 @@
 .rose-form-radio-card {
-     position: relative;
-    width: 370px;
-    height: 115px;    
-    background: #FFFFFF;
-    border: 1px solid #BAC1CC;    
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-    border-radius: 2px;
-    font-size: 14px;
-    font-weight: bold;
-  .rose-form-radio-field {
-    top: 89px;
-    right: 176px;
-    position: absolute;
+  box-sizing: content-box;
+  flex-basis: 7rem;
+  width: 350px;
+  flex-direction: column-reverse;
+  justify-content: space-between;
+  display: flex;
+  border-radius: 2px;
+  text-align: center;
+  color: #6f7682;
+  font-weight: 600;
+  line-height: 1;
+  font-size: 12px;
+  border: 1px solid #bac1cc;
+  min-height: 115px;
+  /* Elevation / Low */
+
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 2px;
+  .radio-wrapper {
+    background: #f7f8fa;
+    width: 100%;
+    padding-top: 7px;
+    padding-bottom: 7px;
+    .rose-form-radio-field {
+      &:checked {
+        .radio-wrapper {
+          background: red;
+        }
+      }
+    }
   }
+  &:hover {
+    border: 1px solid #6f7682;
+    .radio-wrapper {
+      background: #f7f8fa;
+    }
+  }
+
   .rose-form-radio-label {
-      color: #000;
-      margin-top: 16px;
-      display: block;
-      margin-left: 48px;
+    width: 350px;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 14px;
+    color: #000;
+    display: block;
+    position: absolute;
+    /* top: 40px; */
+    padding-top: 30px;
+    padding-bottom: 70px;
+    text-align: left;
+    &::before {
+      content: "";
+      padding-left: 40px;
+    }
+    &:checked {
+      background-color: salmon;
+    }
   }
-}
\ No newline at end of file
+  .rose-form-radio-label:checked {
+    background: red;
+  }
+
+  .rose-form-radio-field {
+    &:not(:disabled) {
+      &:checked {
+        ~ .rose-form-radio-label {
+          background: red;
+        }
+      }
+    }
+  }
+}
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
index 646098f1c..f45a32682 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
@@ -39,6 +39,7 @@
       @name='Amazon Quipu' 
       @label='Amazon Quipu'
       @value='Amazon Quipu'
+      @icon='flight-icons/svg/org-16'
     >
     </Rose::Form::Radio::RadioCard>
     {{#if

From 172c9dde69f46fef0106eeba06576791ae6b8143 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Tue, 18 Jan 2022 00:00:12 -0800
Subject: [PATCH 05/25] add tile and wider radiocard

---
 .../form/radio/radio-card/index.stories.mdx   |  38 +--
 .../form/radio/radio-card/{ => tile}/index.js |   4 +-
 .../rose/form/radio/radio-card/wide/index.js  |   7 +
 .../rose/form/radio/radio/index.hbs           |   7 +-
 .../rose/components/form/_radioCard.scss      | 241 ++++++++++++++----
 .../tile/index.js}                            |   2 +-
 .../rose/form/radio/radio-card/wide/index.js  |   1 +
 .../scopes/scope/auth-methods/index.hbs       |   5 +-
 8 files changed, 214 insertions(+), 91 deletions(-)
 rename addons/rose/addon/components/rose/form/radio/radio-card/{ => tile}/index.js (53%)
 create mode 100644 addons/rose/addon/components/rose/form/radio/radio-card/wide/index.js
 rename addons/rose/app/components/rose/form/radio/{radio-card.js => radio-card/tile/index.js} (85%)
 create mode 100644 addons/rose/app/components/rose/form/radio/radio-card/wide/index.js

diff --git a/addons/rose/addon/components/rose/form/radio/radio-card/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/radio-card/index.stories.mdx
index 35a81b942..6cd77c36b 100644
--- a/addons/rose/addon/components/rose/form/radio/radio-card/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/radio-card/index.stories.mdx
@@ -9,7 +9,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
 Renders a form radiofield.
 
 ```htmlbars
-<Rose::Form::Radio::RadioCard
+<Rose::Form::Radio::RadioCard::Wide
   @label="Yes"
   @error={{false}}
   @value="yes-agree"
@@ -20,9 +20,9 @@ Renders a form radiofield.
 ```
 
 <Preview>
-  <Story name="Basic" height="10rem">{{
+  <Story name="Wide" height="10rem">{{
     template: hbs`
-      <Rose::Form::Radio::RadioCard
+      <Rose::Form::Radio::RadioCard::Wide
         @label={{label}}
         @error={{error}}
         @value={{value}}
@@ -32,7 +32,7 @@ Renders a form radiofield.
         />
     `,
     context: {
-      label: text('text', 'Radiofield'),
+      label: text('text', 'AWS'),
       error: boolean('error', false),
       value: text('value', 'value and selectedValue must match to select radiofield'),
       selectedValue: text(
@@ -55,49 +55,30 @@ Renders a form radiofield.
 
 
 ```htmlbars
-<Rose::Form::Radio::RadioCard
+<Rose::Form::Radio::RadioCard::Tile
   @label="Yes"
   @error={{false}}
   @value="yes-agree"
   @selectedValue="yes-agree"
   @disabled={{false}}
   @changed={{fn}}
-  @inline={{true}}
   />
 ```
 
 <Preview>
-  <Story name="Radio with inline style" height="10rem">{{
+  <Story name="Tile" height="10rem">{{
     template: hbs`
-      <Rose::Form::Radio::RadioCard
-        @label='Radiofield1'
+      <Rose::Form::Radio::RadioCard::Tile
+        @label={{label}}
         @error={{error}}
         @value={{value}}
         @selectedValue={{selectedValue}}
         @disabled={{disabled}}
         @icon={{icon}}
-        @inline={{inline}}
-        />
-      <Rose::Form::Radio::RadioCard
-        @label='Radiofield2'
-        @error={{error}}
-        @value={{value}}
-        @selectedValue={{selectedValue}}
-        @disabled={{disabled}}
-        @icon={{icon}}
-        @inline={{inline}}
-        />
-      <Rose::Form::Radio::RadioCard
-        @label='Radiofield3'
-        @error={{error}}
-        @value={{value}}
-        @selectedValue={{selectedValue}}
-        @disabled={{disabled}}
-        @icon={{icon}}
-        @inline={{inline}}
         />
     `,
     context: {
+      label: text('text', 'AWS Tile'),
       error: boolean('error', false),
       value: text('value', 'value and selectedValue must match to select radiofield'),
       selectedValue: text(
@@ -114,7 +95,6 @@ Renders a form radiofield.
         },
         null
       ),
-      inline: boolean('inline', false)
     }
   }}</Story>
 </Preview>
diff --git a/addons/rose/addon/components/rose/form/radio/radio-card/index.js b/addons/rose/addon/components/rose/form/radio/radio-card/tile/index.js
similarity index 53%
rename from addons/rose/addon/components/rose/form/radio/radio-card/index.js
rename to addons/rose/addon/components/rose/form/radio/radio-card/tile/index.js
index 67337301e..c670c00be 100644
--- a/addons/rose/addon/components/rose/form/radio/radio-card/index.js
+++ b/addons/rose/addon/components/rose/form/radio/radio-card/tile/index.js
@@ -1,7 +1,7 @@
-import RoseFormRadioRadioComponent from '../radio';
+import RoseFormRadioRadioComponent from '../../radio';
 
 export default class RoseFormRadioRadioCardComponent extends RoseFormRadioRadioComponent {
   // =attributes
 
-  className = 'rose-form-radio-card';
+  className = 'rose-form-radio-card-tile';
 }
diff --git a/addons/rose/addon/components/rose/form/radio/radio-card/wide/index.js b/addons/rose/addon/components/rose/form/radio/radio-card/wide/index.js
new file mode 100644
index 000000000..3ba04b04d
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/radio/radio-card/wide/index.js
@@ -0,0 +1,7 @@
+import RoseFormRadioRadioComponent from '../../radio';
+
+export default class RoseFormRadioRadioCardComponent extends RoseFormRadioRadioComponent {
+  // =attributes
+
+  className = 'rose-form-radio-card-wide';
+}
diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.hbs b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
index 8537a4d00..40f460dad 100644
--- a/addons/rose/addon/components/rose/form/radio/radio/index.hbs
+++ b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
@@ -1,5 +1,4 @@
 <div class="{{this.className}} {{if @error " error"}} {{if @inline "inline"}}">
- <span class='radio-wrapper'>
   <RadioButton
     ...attributes
     @radioClass="rose-form-radio-field"
@@ -11,7 +10,8 @@
     @groupValue={{@selectedValue}}
     @disabled={{@disabled}}
     @changed={{@changed}} />
-  </span>
+
+
   <label class="rose-form-radio-label" for={{this.id}}>
 
     {{#if @icon}}
@@ -22,9 +22,8 @@
     {{/if}}
 
     {{@label}}
-
+  <span class="overlay"></span>
   </label>
-
   {{yield}}
 
 </div>
diff --git a/addons/rose/addon/styles/rose/components/form/_radioCard.scss b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
index bfb66a079..d74f0f2d7 100644
--- a/addons/rose/addon/styles/rose/components/form/_radioCard.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
@@ -1,73 +1,208 @@
-.rose-form-radio-card {
-  box-sizing: content-box;
-  flex-basis: 7rem;
-  width: 350px;
-  flex-direction: column-reverse;
-  justify-content: space-between;
+@use '../../variables/sizing';
+@use '../../utilities/type';
+
+.rose-form-radio-card-wide {
+  position: relative;
   display: flex;
-  border-radius: 2px;
-  text-align: center;
-  color: #6f7682;
-  font-weight: 600;
-  line-height: 1;
-  font-size: 12px;
-  border: 1px solid #bac1cc;
-  min-height: 115px;
-  /* Elevation / Low */
+  align-items: center;
+  width: 350px;
+  justify-content: center;
 
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border-radius: 2px;
-  .radio-wrapper {
-    background: #f7f8fa;
-    width: 100%;
-    padding-top: 7px;
-    padding-bottom: 7px;
-    .rose-form-radio-field {
-      &:checked {
-        .radio-wrapper {
-          background: red;
-        }
-      }
-    }
-  }
-  &:hover {
-    border: 1px solid #6f7682;
-    .radio-wrapper {
-      background: #f7f8fa;
-    }
-  }
 
+  .overlay {
+    position: absolute;
+    height: 30px;
+    background-color: #f7f8fa;
+    width: 348px;
+    bottom: 1px;
+    right: 0;
+  }
   .rose-form-radio-label {
-    width: 350px;
     font-style: normal;
     font-weight: bold;
     font-size: 14px;
     color: #000;
+    width: 350px;
+    height: 115px;
     display: block;
-    position: absolute;
-    /* top: 40px; */
-    padding-top: 30px;
-    padding-bottom: 70px;
+    position: relative;
     text-align: left;
-    &::before {
-      content: "";
-      padding-left: 40px;
-    }
-    &:checked {
-      background-color: salmon;
-    }
+    word-break: break-all;
+    border: 1px solid #bac1cc;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 2px;
+    padding: 19px;
+    box-sizing: border-box;
+    background-color: #FFFFFF;
   }
-  .rose-form-radio-label:checked {
-    background: red;
-  }
-
   .rose-form-radio-field {
+    position: absolute;
+    margin-bottom: 3px;
+    z-index: 1;
+    bottom: 3px;
     &:not(:disabled) {
+      &:hover {
+        ~ .rose-form-radio-label {
+          border: 1px solid #6f7682;
+        }
+      }
       &:checked {
         ~ .rose-form-radio-label {
-          background: red;
+          .overlay {
+            background-color: #f0f5ff;
+          }
+          border: 1px solid #1563ff;
         }
       }
     }
+
+    &:disabled {
+      ~ .rose-form-radio-label {
+        border: 1px solid #dce0e6;
+        background-color: #fbfbfc;
+        color: #626873;
+      }
+    }
+  }
+
+  &.error {
+    color: var(--failure);
+    .rose-form-radio-field {
+      opacity: 0;
+      &:not(:disabled):not(:focus) {
+        ~ .rose-form-radio-label {
+          .overlay {
+            background-color: #f9ecee;
+          }
+          border: 1px solid #c73445;
+        }
+        &:checked {
+          ~ .rose-form-radio-label {
+            &::after {
+              position: absolute;
+              bottom: 3px;
+              right: 161px;
+              display: block;
+              width: 1.2rem;
+              height: 1.2rem;
+              transform: scale(2);
+              pointer-events: none;
+              content: " ";
+              background: no-repeat 50%/50% 50%;
+              background-image: url($data-svg-prefix + map-get(
+                $radio-svg,
+                'error-checked'
+              ));              /* text-align: center; */
+              z-index: 2;       
+            }
+          }
+        }
+      }
+
+
+    }
+  }
+}
+
+.rose-form-radio-card-tile {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 240px;
+  justify-content: center;
+
+
+  .overlay {
+    position: absolute;
+    height: 30px;
+    background-color: #f7f8fa;
+    width: 238px;
+    bottom: 1px;
+    right: 0;
+  }
+  .rose-form-radio-label {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 14px;
+    color: #000;
+    width: 240px;
+    height: 145px;
+    display: block;
+    position: relative;
+    text-align: left;
+    word-break: break-all;
+    border: 1px solid #bac1cc;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 2px;
+    padding: 19px;
+    box-sizing: border-box;
+    background-color: #FFFFFF;
+  }
+  .rose-form-radio-field {
+    position: absolute;
+    margin-bottom: 3px;
+    z-index: 1;
+    bottom: 3px;
+    &:not(:disabled) {
+      &:hover {
+        ~ .rose-form-radio-label {
+          border: 1px solid #6f7682;
+        }
+      }
+      &:checked {
+        ~ .rose-form-radio-label {
+          .overlay {
+            background-color: #f0f5ff;
+          }
+          border: 1px solid #1563ff;
+        }
+      }
+    }
+
+    &:disabled {
+      ~ .rose-form-radio-label {
+        border: 1px solid #dce0e6;
+        background-color: #fbfbfc;
+        color: #626873;
+      }
+    }
+  }
+
+  &.error {
+    color: var(--failure);
+    .rose-form-radio-field {
+      opacity: 0;
+      &:not(:disabled):not(:focus) {
+        ~ .rose-form-radio-label {
+          .overlay {
+            background-color: #f9ecee;
+          }
+          border: 1px solid #c73445;
+        }
+        &:checked {
+          ~ .rose-form-radio-label {
+            &::after {
+              position: absolute;
+              bottom: 3px;
+              right: 109px;
+              display: block;
+              width: 1.2rem;
+              height: 1.2rem;
+              transform: scale(2);
+              pointer-events: none;
+              content: " ";
+              background: no-repeat 50%/50% 50%;
+              background-image: url($data-svg-prefix + map-get(
+                $radio-svg,
+                'error-checked'
+              ));              /* text-align: center; */
+              z-index: 2;       
+            }
+          }
+        }
+      }
+
+
+    }
   }
 }
diff --git a/addons/rose/app/components/rose/form/radio/radio-card.js b/addons/rose/app/components/rose/form/radio/radio-card/tile/index.js
similarity index 85%
rename from addons/rose/app/components/rose/form/radio/radio-card.js
rename to addons/rose/app/components/rose/form/radio/radio-card/tile/index.js
index 42acc95ea..d3d617b77 100644
--- a/addons/rose/app/components/rose/form/radio/radio-card.js
+++ b/addons/rose/app/components/rose/form/radio/radio-card/tile/index.js
@@ -1 +1 @@
-export { default } from 'rose/components/rose/form/radio/radio-card';
+export { default } from 'rose/components/rose/form/radio/radio-card/tile';
diff --git a/addons/rose/app/components/rose/form/radio/radio-card/wide/index.js b/addons/rose/app/components/rose/form/radio/radio-card/wide/index.js
new file mode 100644
index 000000000..5c17ecb7e
--- /dev/null
+++ b/addons/rose/app/components/rose/form/radio/radio-card/wide/index.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form/radio/radio-card/wide';
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
index f45a32682..41d16fc56 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
@@ -35,13 +35,14 @@
   </page.actions>
 
   <page.body>
-    <Rose::Form::Radio::RadioCard 
+    <Rose::Form::Radio::RadioCard::Wide
       @name='Amazon Quipu' 
       @label='Amazon Quipu'
       @value='Amazon Quipu'
       @icon='flight-icons/svg/org-16'
+      @disabled=true
     >
-    </Rose::Form::Radio::RadioCard>
+    </Rose::Form::Radio::RadioCard::Wide>
     {{#if
       (or
         @model

From 5c4d7e29fd7184d893408cf5563a5168df7fd470 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Tue, 18 Jan 2022 09:49:18 -0800
Subject: [PATCH 06/25] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20tile=20and?=
 =?UTF-8?q?=20wide=20radiocard=20field?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/templates/scopes/scope/auth-methods/index.hbs     | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
index 41d16fc56..b2380e0fb 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
@@ -35,14 +35,6 @@
   </page.actions>
 
   <page.body>
-    <Rose::Form::Radio::RadioCard::Wide
-      @name='Amazon Quipu' 
-      @label='Amazon Quipu'
-      @value='Amazon Quipu'
-      @icon='flight-icons/svg/org-16'
-      @disabled=true
-    >
-    </Rose::Form::Radio::RadioCard::Wide>
     {{#if
       (or
         @model

From 0fcd55ef4159f02155915b47cccf4265c4bef9f9 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Tue, 18 Jan 2022 10:19:45 -0800
Subject: [PATCH 07/25] =?UTF-8?q?fix:=20=F0=9F=90=9B=20lint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/components/form/_radioCard.scss      | 30 ++++++++-----------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/form/_radioCard.scss b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
index d74f0f2d7..9bb96bcae 100644
--- a/addons/rose/addon/styles/rose/components/form/_radioCard.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
@@ -8,7 +8,6 @@
   width: 350px;
   justify-content: center;
 
-
   .overlay {
     position: absolute;
     height: 30px;
@@ -33,7 +32,7 @@
     border-radius: 2px;
     padding: 19px;
     box-sizing: border-box;
-    background-color: #FFFFFF;
+    background-color: #ffffff;
   }
   .rose-form-radio-field {
     position: absolute;
@@ -87,19 +86,17 @@
               height: 1.2rem;
               transform: scale(2);
               pointer-events: none;
-              content: " ";
+              content: ' ';
               background: no-repeat 50%/50% 50%;
               background-image: url($data-svg-prefix + map-get(
-                $radio-svg,
-                'error-checked'
-              ));              /* text-align: center; */
-              z-index: 2;       
+                  $radio-svg,
+                  'error-checked'
+                )); /* text-align: center; */
+              z-index: 2;
             }
           }
         }
       }
-
-
     }
   }
 }
@@ -111,7 +108,6 @@
   width: 240px;
   justify-content: center;
 
-
   .overlay {
     position: absolute;
     height: 30px;
@@ -136,7 +132,7 @@
     border-radius: 2px;
     padding: 19px;
     box-sizing: border-box;
-    background-color: #FFFFFF;
+    background-color: #ffffff;
   }
   .rose-form-radio-field {
     position: absolute;
@@ -190,19 +186,17 @@
               height: 1.2rem;
               transform: scale(2);
               pointer-events: none;
-              content: " ";
+              content: ' ';
               background: no-repeat 50%/50% 50%;
               background-image: url($data-svg-prefix + map-get(
-                $radio-svg,
-                'error-checked'
-              ));              /* text-align: center; */
-              z-index: 2;       
+                  $radio-svg,
+                  'error-checked'
+                )); /* text-align: center; */
+              z-index: 2;
             }
           }
         }
       }
-
-
     }
   }
 }

From 7b5070115eaefdcc4879476d10aaccf6271cad30 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Tue, 18 Jan 2022 10:32:52 -0800
Subject: [PATCH 08/25] lint again

---
 addons/rose/addon/styles/rose/components/form/_radioCard.scss | 2 +-
 ui/admin/app/templates/scopes/scope/auth-methods/index.hbs    | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/addons/rose/addon/styles/rose/components/form/_radioCard.scss b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
index 9bb96bcae..043cfa53b 100644
--- a/addons/rose/addon/styles/rose/components/form/_radioCard.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
@@ -191,7 +191,7 @@
               background-image: url($data-svg-prefix + map-get(
                   $radio-svg,
                   'error-checked'
-                )); /* text-align: center; */
+                ));
               z-index: 2;
             }
           }
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
index b2380e0fb..ea12808c3 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
@@ -35,6 +35,7 @@
   </page.actions>
 
   <page.body>
+
     {{#if
       (or
         @model

From 4837cb353ed999e33953a59f4022ea549ee5dffa Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Tue, 18 Jan 2022 11:10:38 -0800
Subject: [PATCH 09/25] =?UTF-8?q?fix:=20=F0=9F=90=9B=20lint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/components/rose/form/radio/radio/index.hbs |  7 ++++---
 .../styles/rose/components/form/_radioCard.scss      | 12 ++++++------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.hbs b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
index 40f460dad..f8b992601 100644
--- a/addons/rose/addon/components/rose/form/radio/radio/index.hbs
+++ b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
@@ -1,4 +1,5 @@
-<div class="{{this.className}} {{if @error " error"}} {{if @inline "inline"}}">
+<div class="rose-form-radio{{if @error " error"}} {{if @inline "inline"}}">
+
   <RadioButton
     ...attributes
     @radioClass="rose-form-radio-field"
@@ -11,7 +12,6 @@
     @disabled={{@disabled}}
     @changed={{@changed}} />
 
-
   <label class="rose-form-radio-label" for={{this.id}}>
 
     {{#if @icon}}
@@ -22,8 +22,9 @@
     {{/if}}
 
     {{@label}}
-  <span class="overlay"></span>
+  <span class="radio-card-overlay"></span>
   </label>
+
   {{yield}}
 
 </div>
diff --git a/addons/rose/addon/styles/rose/components/form/_radioCard.scss b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
index 043cfa53b..0fd98e0fa 100644
--- a/addons/rose/addon/styles/rose/components/form/_radioCard.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
@@ -8,7 +8,7 @@
   width: 350px;
   justify-content: center;
 
-  .overlay {
+  .radio-card-overlay {
     position: absolute;
     height: 30px;
     background-color: #f7f8fa;
@@ -47,7 +47,7 @@
       }
       &:checked {
         ~ .rose-form-radio-label {
-          .overlay {
+          .radio-card-overlay {
             background-color: #f0f5ff;
           }
           border: 1px solid #1563ff;
@@ -70,7 +70,7 @@
       opacity: 0;
       &:not(:disabled):not(:focus) {
         ~ .rose-form-radio-label {
-          .overlay {
+          .radio-card-overlay {
             background-color: #f9ecee;
           }
           border: 1px solid #c73445;
@@ -108,7 +108,7 @@
   width: 240px;
   justify-content: center;
 
-  .overlay {
+  .radio-card-overlay {
     position: absolute;
     height: 30px;
     background-color: #f7f8fa;
@@ -147,7 +147,7 @@
       }
       &:checked {
         ~ .rose-form-radio-label {
-          .overlay {
+          .radio-card-overlay {
             background-color: #f0f5ff;
           }
           border: 1px solid #1563ff;
@@ -170,7 +170,7 @@
       opacity: 0;
       &:not(:disabled):not(:focus) {
         ~ .rose-form-radio-label {
-          .overlay {
+          .radio-card-overlay {
             background-color: #f9ecee;
           }
           border: 1px solid #c73445;

From bda7c7c88ea401f24e7224b02e5f34c45d988b8f Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Tue, 18 Jan 2022 11:35:53 -0800
Subject: [PATCH 10/25] add separate story files

---
 .../radio-card/{ => tile}/index.stories.mdx   | 52 ++----------------
 .../radio/radio-card/wide/index.stories.mdx   | 54 +++++++++++++++++++
 .../rose/components/form/_radioCard.scss      |  3 +-
 3 files changed, 59 insertions(+), 50 deletions(-)
 rename addons/rose/addon/components/rose/form/radio/radio-card/{ => tile}/index.stories.mdx (50%)
 create mode 100644 addons/rose/addon/components/rose/form/radio/radio-card/wide/index.stories.mdx

diff --git a/addons/rose/addon/components/rose/form/radio/radio-card/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/radio-card/tile/index.stories.mdx
similarity index 50%
rename from addons/rose/addon/components/rose/form/radio/radio-card/index.stories.mdx
rename to addons/rose/addon/components/rose/form/radio/radio-card/tile/index.stories.mdx
index 6cd77c36b..cd22b4f24 100644
--- a/addons/rose/addon/components/rose/form/radio/radio-card/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/radio-card/tile/index.stories.mdx
@@ -2,57 +2,11 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 import { hbs } from 'ember-cli-htmlbars';
 import { text, boolean, select } from '@storybook/addon-knobs';
 
-<Meta title="Rose|Form/Radio/Radio/RadioCard" component="Form/Radio/Radio/RadioCard" />
+<Meta title="Rose|Form/Radio/Radio/RadioCard/Tile" component="Form/Radio/Radio/RadioCard/Tile" />
 
-# Form Radiofield
-
-Renders a form radiofield.
-
-```htmlbars
-<Rose::Form::Radio::RadioCard::Wide
-  @label="Yes"
-  @error={{false}}
-  @value="yes-agree"
-  @selectedValue="yes-agree"
-  @disabled={{false}}
-  @changed={{fn}}
-  />
-```
-
-<Preview>
-  <Story name="Wide" height="10rem">{{
-    template: hbs`
-      <Rose::Form::Radio::RadioCard::Wide
-        @label={{label}}
-        @error={{error}}
-        @value={{value}}
-        @selectedValue={{selectedValue}}
-        @disabled={{disabled}}
-        @icon={{icon}}
-        />
-    `,
-    context: {
-      label: text('text', 'AWS'),
-      error: boolean('error', false),
-      value: text('value', 'value and selectedValue must match to select radiofield'),
-      selectedValue: text(
-        'selectedValue',
-        'value and selectedValue must match to select radiofield'
-      ),
-      disabled: boolean('disabled', false),
-      icon: select(
-        'icon',
-        {
-          'none': null,
-          'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
-          'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
-        },
-        null
-      ),
-    }
-  }}</Story>
-</Preview>
+# Form RadioCard field in tile format
 
+Renders a form radioCard field in a tile format.
 
 ```htmlbars
 <Rose::Form::Radio::RadioCard::Tile
diff --git a/addons/rose/addon/components/rose/form/radio/radio-card/wide/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/radio-card/wide/index.stories.mdx
new file mode 100644
index 000000000..b188d3793
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/radio/radio-card/wide/index.stories.mdx
@@ -0,0 +1,54 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { text, boolean, select } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Form/Radio/Radio/RadioCard/Wide" component="Form/Radio/Radio/RadioCard/Wide" />
+
+# Form Radiofield in a wide format
+
+Renders a form radiofield in a Wide format.
+
+```htmlbars
+<Rose::Form::Radio::RadioCard::Wide
+  @label="Yes"
+  @error={{false}}
+  @value="yes-agree"
+  @selectedValue="yes-agree"
+  @disabled={{false}}
+  @changed={{fn}}
+  />
+```
+
+<Preview>
+  <Story name="Wide" height="10rem">{{
+    template: hbs`
+      <Rose::Form::Radio::RadioCard::Wide
+        @label={{label}}
+        @error={{error}}
+        @value={{value}}
+        @selectedValue={{selectedValue}}
+        @disabled={{disabled}}
+        @icon={{icon}}
+        />
+    `,
+    context: {
+      label: text('text', 'AWS'),
+      error: boolean('error', false),
+      value: text('value', 'value and selectedValue must match to select radiofield'),
+      selectedValue: text(
+        'selectedValue',
+        'value and selectedValue must match to select radiofield'
+      ),
+      disabled: boolean('disabled', false),
+      icon: select(
+        'icon',
+        {
+          'none': null,
+          'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
+          'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
+        },
+        null
+      ),
+    }
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/styles/rose/components/form/_radioCard.scss b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
index 0fd98e0fa..68f75b88a 100644
--- a/addons/rose/addon/styles/rose/components/form/_radioCard.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
@@ -1,11 +1,12 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
 
+//sizing 
 .rose-form-radio-card-wide {
   position: relative;
   display: flex;
   align-items: center;
-  width: 350px;
+  width: (sizing.rems(m)) * 20;
   justify-content: center;
 
   .radio-card-overlay {

From b1ec40d72a9b21461c64efe20966dcb016532a80 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Tue, 18 Jan 2022 15:57:59 -0800
Subject: [PATCH 11/25] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20updates=20to?=
 =?UTF-8?q?=20css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/form/radio/radio/index.hbs           |  2 +-
 .../rose/components/form/_radioCard.scss      | 43 +++++++++----------
 2 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.hbs b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
index f8b992601..0562c76f0 100644
--- a/addons/rose/addon/components/rose/form/radio/radio/index.hbs
+++ b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
@@ -1,4 +1,4 @@
-<div class="rose-form-radio{{if @error " error"}} {{if @inline "inline"}}">
+<div class="{{this.className}}{{if @error " error"}} {{if @inline "inline"}}">
 
   <RadioButton
     ...attributes
diff --git a/addons/rose/addon/styles/rose/components/form/_radioCard.scss b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
index 68f75b88a..db4a1979a 100644
--- a/addons/rose/addon/styles/rose/components/form/_radioCard.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
@@ -1,19 +1,19 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
+@use '../../variables/typography';
 
-//sizing 
 .rose-form-radio-card-wide {
   position: relative;
   display: flex;
   align-items: center;
-  width: (sizing.rems(m)) * 20;
+  width: (sizing.rems(m)) * 23;
   justify-content: center;
 
   .radio-card-overlay {
     position: absolute;
-    height: 30px;
+    height: sizing.rems(l) + sizing.rems(xxs);
     background-color: #f7f8fa;
-    width: 348px;
+    width: 100%;
     bottom: 1px;
     right: 0;
   }
@@ -22,8 +22,8 @@
     font-weight: bold;
     font-size: 14px;
     color: #000;
-    width: 350px;
-    height: 115px;
+    width: (sizing.rems(m)) * 23;
+    height: (sizing.rems(m)) * 7.5;
     display: block;
     position: relative;
     text-align: left;
@@ -37,9 +37,8 @@
   }
   .rose-form-radio-field {
     position: absolute;
-    margin-bottom: 3px;
     z-index: 1;
-    bottom: 3px;
+    bottom: sizing.rems(xs);
     &:not(:disabled) {
       &:hover {
         ~ .rose-form-radio-label {
@@ -80,11 +79,11 @@
           ~ .rose-form-radio-label {
             &::after {
               position: absolute;
-              bottom: 3px;
-              right: 161px;
+              bottom: 5px;
+              right: 174px;
               display: block;
-              width: 1.2rem;
-              height: 1.2rem;
+              width: sizing.rems(m);
+              height: sizing.rems(m);
               transform: scale(2);
               pointer-events: none;
               content: ' ';
@@ -106,14 +105,14 @@
   position: relative;
   display: flex;
   align-items: center;
-  width: 240px;
+  width: (sizing.rems(m)) * 15;
   justify-content: center;
 
   .radio-card-overlay {
     position: absolute;
-    height: 30px;
+    height: sizing.rems(l) + sizing.rems(xxs);
     background-color: #f7f8fa;
-    width: 238px;
+    width: 100%;
     bottom: 1px;
     right: 0;
   }
@@ -122,8 +121,9 @@
     font-weight: bold;
     font-size: 14px;
     color: #000;
-    width: 240px;
-    height: 145px;
+    width: (sizing.rems(m)) * 15;
+    height: (sizing.rems(m)) * 9;
+
     display: block;
     position: relative;
     text-align: left;
@@ -137,9 +137,8 @@
   }
   .rose-form-radio-field {
     position: absolute;
-    margin-bottom: 3px;
     z-index: 1;
-    bottom: 3px;
+    bottom: sizing.rems(xs);
     &:not(:disabled) {
       &:hover {
         ~ .rose-form-radio-label {
@@ -180,11 +179,11 @@
           ~ .rose-form-radio-label {
             &::after {
               position: absolute;
-              bottom: 3px;
+              bottom: sizing.rems(xxs);
               right: 109px;
               display: block;
-              width: 1.2rem;
-              height: 1.2rem;
+              width: sizing.rems(m);
+              height: sizing.rems(m);
               transform: scale(2);
               pointer-events: none;
               content: ' ';

From ecf460d89b153398e8f1030d116b0fa6317ffa7a Mon Sep 17 00:00:00 2001
From: Dharini Jeeva <dharini@hashicorp.com>
Date: Tue, 18 Jan 2022 16:12:36 -0800
Subject: [PATCH 12/25] Update index.hbs

---
 addons/rose/addon/components/rose/form/radio/radio/index.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.hbs b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
index 0562c76f0..ddc2a6b34 100644
--- a/addons/rose/addon/components/rose/form/radio/radio/index.hbs
+++ b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
@@ -1,4 +1,4 @@
-<div class="{{this.className}}{{if @error " error"}} {{if @inline "inline"}}">
+<div class="{{this.className}} {{if @error " error"}} {{if @inline "inline"}}">
 
   <RadioButton
     ...attributes

From 6ad1691750bf9151ff1dfe4278c115a3522b312c Mon Sep 17 00:00:00 2001
From: Dharini Jeeva <dharini@hashicorp.com>
Date: Tue, 18 Jan 2022 16:13:00 -0800
Subject: [PATCH 13/25] Update _radioCard.scss

---
 addons/rose/addon/styles/rose/components/form/_radioCard.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/rose/addon/styles/rose/components/form/_radioCard.scss b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
index db4a1979a..a0863e26f 100644
--- a/addons/rose/addon/styles/rose/components/form/_radioCard.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
@@ -91,7 +91,7 @@
               background-image: url($data-svg-prefix + map-get(
                   $radio-svg,
                   'error-checked'
-                )); /* text-align: center; */
+                ));
               z-index: 2;
             }
           }

From f0becdcdc41c73628452d439ccffa08ebf1b5b7c Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Wed, 19 Jan 2022 00:21:15 -0800
Subject: [PATCH 14/25] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20use=20scss=20v?=
 =?UTF-8?q?ariables?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/components/form/_radioCard.scss      | 92 ++++++++++---------
 .../styles/rose/variables/color/_css.scss     |  2 +
 .../scopes/scope/auth-methods/index.hbs       |  1 -
 3 files changed, 52 insertions(+), 43 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/form/_radioCard.scss b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
index a0863e26f..b9874c831 100644
--- a/addons/rose/addon/styles/rose/components/form/_radioCard.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
@@ -2,17 +2,24 @@
 @use '../../utilities/type';
 @use '../../variables/typography';
 
+$l: sizing.rems(l); // 16
+$m: sizing.rems(m); // 16
+$size-xs: sizing.rems(xs); // 8
+$size-xxs: sizing.rems(xxs); // 4
+$size-xxxs: sizing.rems(xxxs); // 2
+$size-xxxxs: sizing.rems(xxxxs); // 1
+
 .rose-form-radio-card-wide {
   position: relative;
   display: flex;
   align-items: center;
-  width: (sizing.rems(m)) * 23;
+  width: ($m) * 23;
   justify-content: center;
 
   .radio-card-overlay {
     position: absolute;
-    height: sizing.rems(l) + sizing.rems(xxs);
-    background-color: #f7f8fa;
+    height: $l + $size-xxs;
+    background-color: var(--ui-gray-subtler-5);
     width: 100%;
     bottom: 1px;
     right: 0;
@@ -21,34 +28,35 @@
     font-style: normal;
     font-weight: bold;
     font-size: 14px;
-    color: #000;
-    width: (sizing.rems(m)) * 23;
-    height: (sizing.rems(m)) * 7.5;
+    color: var(--black);
+    width: ($m) * 23;
+    height: ($m) * 7.5;
     display: block;
     position: relative;
     text-align: left;
     word-break: break-all;
     border: 1px solid #bac1cc;
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 $size-xxs $size-xxs
+      rgba(var(--stark-components), var(--opacity-2));
     border-radius: 2px;
     padding: 19px;
     box-sizing: border-box;
-    background-color: #ffffff;
+    background-color: var(--white);
   }
   .rose-form-radio-field {
     position: absolute;
     z-index: 1;
-    bottom: sizing.rems(xs);
+    bottom: $size-xs;
     &:not(:disabled) {
       &:hover {
         ~ .rose-form-radio-label {
-          border: 1px solid #6f7682;
+          border: 1px solid var(--ui-gray);
         }
       }
       &:checked {
         ~ .rose-form-radio-label {
           .radio-card-overlay {
-            background-color: #f0f5ff;
+            background-color: var(--action-subtler-1h);
           }
           border: 1px solid #1563ff;
         }
@@ -57,9 +65,9 @@
 
     &:disabled {
       ~ .rose-form-radio-label {
-        border: 1px solid #dce0e6;
-        background-color: #fbfbfc;
-        color: #626873;
+        border: 1px solid var(--ui-border-subtler-1);
+        background-color: var(--ui-gray-subtler-6);
+        color: var(--ui-gray-starker-1);
       }
     }
   }
@@ -67,23 +75,23 @@
   &.error {
     color: var(--failure);
     .rose-form-radio-field {
-      opacity: 0;
       &:not(:disabled):not(:focus) {
         ~ .rose-form-radio-label {
           .radio-card-overlay {
-            background-color: #f9ecee;
+            background-color: var(--action-subtler-1h);
           }
-          border: 1px solid #c73445;
+          border: $xxxxs solid #c73445;
         }
         &:checked {
+          opacity: 0;
           ~ .rose-form-radio-label {
             &::after {
               position: absolute;
               bottom: 5px;
               right: 174px;
               display: block;
-              width: sizing.rems(m);
-              height: sizing.rems(m);
+              width: $m;
+              height: $m;
               transform: scale(2);
               pointer-events: none;
               content: ' ';
@@ -105,13 +113,13 @@
   position: relative;
   display: flex;
   align-items: center;
-  width: (sizing.rems(m)) * 15;
+  width: ($m) * 15;
   justify-content: center;
 
   .radio-card-overlay {
     position: absolute;
-    height: sizing.rems(l) + sizing.rems(xxs);
-    background-color: #f7f8fa;
+    height: $l + $size-xxs;
+    background-color: var(--ui-gray-subtler-5);
     width: 100%;
     bottom: 1px;
     right: 0;
@@ -120,46 +128,46 @@
     font-style: normal;
     font-weight: bold;
     font-size: 14px;
-    color: #000;
-    width: (sizing.rems(m)) * 15;
-    height: (sizing.rems(m)) * 9;
+    color: var(--black);
+    width: ($m) * 15;
+    height: ($m) * 9;
 
     display: block;
     position: relative;
     text-align: left;
     word-break: break-all;
-    border: 1px solid #bac1cc;
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border: $xxxxs solid var(--ui-border);
+    box-shadow: 0 $size-xxs $size-xxs
+      rgba(var(--stark-components), var(--opacity-2));
     border-radius: 2px;
     padding: 19px;
     box-sizing: border-box;
-    background-color: #ffffff;
+    background-color: var(--white);
   }
   .rose-form-radio-field {
     position: absolute;
     z-index: 1;
-    bottom: sizing.rems(xs);
+    bottom: $size-xs;
     &:not(:disabled) {
       &:hover {
         ~ .rose-form-radio-label {
-          border: 1px solid #6f7682;
+          border: $xxxxs solid var(--ui-gray);
         }
       }
       &:checked {
         ~ .rose-form-radio-label {
           .radio-card-overlay {
-            background-color: #f0f5ff;
+            background-color: var(--action-subtler-1h);
           }
-          border: 1px solid #1563ff;
+          border: $xxxxs solid #1563ff;
         }
       }
     }
-
     &:disabled {
       ~ .rose-form-radio-label {
-        border: 1px solid #dce0e6;
-        background-color: #fbfbfc;
-        color: #626873;
+        border: $xxxxs solid var(--ui-border-subtler-1);
+        background-color: var(--ui-gray-subtler-6);
+        color: var(--ui-gray-starker-1);
       }
     }
   }
@@ -167,23 +175,23 @@
   &.error {
     color: var(--failure);
     .rose-form-radio-field {
-      opacity: 0;
       &:not(:disabled):not(:focus) {
         ~ .rose-form-radio-label {
           .radio-card-overlay {
-            background-color: #f9ecee;
+            background-color: var(--failure--subtler-1);
           }
-          border: 1px solid #c73445;
+          border: $xxxxs solid #c73445;
         }
         &:checked {
+          opacity: 0;
           ~ .rose-form-radio-label {
             &::after {
               position: absolute;
-              bottom: sizing.rems(xxs);
+              bottom: $size-xxs;
               right: 109px;
               display: block;
-              width: sizing.rems(m);
-              height: sizing.rems(m);
+              width: $m;
+              height: $m;
               transform: scale(2);
               pointer-events: none;
               content: ' ';
diff --git a/addons/rose/addon/styles/rose/variables/color/_css.scss b/addons/rose/addon/styles/rose/variables/color/_css.scss
index 3e554cc07..be294f8ea 100644
--- a/addons/rose/addon/styles/rose/variables/color/_css.scss
+++ b/addons/rose/addon/styles/rose/variables/color/_css.scss
@@ -49,6 +49,7 @@
   --failure-subtler-1: #{color(red, 100)};
   --failure: #{color(red)};
   --failure-starker-1: #{color(red, 800)};
+  --failure--subtler-1: #{color(red, 050)};
 
   --success-subtler-2: #{color(green, 010)};
   --success-subtler-1: #{color(green, 100)};
@@ -108,6 +109,7 @@
   --failure-subtler-1: #{color(red, 800)};
   --failure: #{color(red, 300)};
   --failure-starker-1: #{color(red, 200)};
+  --failure--subtler-1: #{color(red, 050)};
 
   --success-subtler-2: #{color(green, 900)};
   --success-subtler-1: #{color(green, 800)};
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
index ea12808c3..b2380e0fb 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
@@ -35,7 +35,6 @@
   </page.actions>
 
   <page.body>
-
     {{#if
       (or
         @model

From 2738dcfef3b01ec48db172e5f03d9d580a713088 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Wed, 19 Jan 2022 14:17:23 -0800
Subject: [PATCH 15/25] =?UTF-8?q?fix:=20=F0=9F=90=9B=20lint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/admin/app/templates/scopes/scope/auth-methods/index.hbs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
index b2380e0fb..ea12808c3 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
@@ -35,6 +35,7 @@
   </page.actions>
 
   <page.body>
+
     {{#if
       (or
         @model

From 521250b6cbade314a274c2ac33772cebfc5bb4d8 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Wed, 19 Jan 2022 16:13:30 -0800
Subject: [PATCH 16/25] =?UTF-8?q?fix:=20=F0=9F=90=9B=20color=20label?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/styles/rose/components/form/_radioCard.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/rose/addon/styles/rose/components/form/_radioCard.scss b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
index b9874c831..4be2c5908 100644
--- a/addons/rose/addon/styles/rose/components/form/_radioCard.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radioCard.scss
@@ -78,7 +78,7 @@ $size-xxxxs: sizing.rems(xxxxs); // 1
       &:not(:disabled):not(:focus) {
         ~ .rose-form-radio-label {
           .radio-card-overlay {
-            background-color: var(--action-subtler-1h);
+            background-color: var(--failure--subtler-1);
           }
           border: $xxxxs solid #c73445;
         }

From b85a4dd71933bd7cd267aaf4ed5bfd2ca1018276 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Thu, 20 Jan 2022 16:07:48 -0800
Subject: [PATCH 17/25] =?UTF-8?q?fix:=20=F0=9F=90=9B=20lint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/admin/app/templates/scopes/scope/auth-methods/index.hbs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
index b2380e0fb..ea12808c3 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
@@ -35,6 +35,7 @@
   </page.actions>
 
   <page.body>
+
     {{#if
       (or
         @model

From dd8cb5a77ea4249c6b18ac41716e03f6be0083a5 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Thu, 20 Jan 2022 16:29:17 -0800
Subject: [PATCH 18/25] =?UTF-8?q?fix:=20=F0=9F=90=9B=20add=20helpertext=20?=
 =?UTF-8?q?in=20storybook=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/rose/form/radio/card/tile/index.stories.mdx      | 2 ++
 .../components/rose/form/radio/card/wide/index.stories.mdx      | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/addons/rose/addon/components/rose/form/radio/card/tile/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/card/tile/index.stories.mdx
index b45073e6e..84bb7f9be 100644
--- a/addons/rose/addon/components/rose/form/radio/card/tile/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/card/tile/index.stories.mdx
@@ -29,6 +29,7 @@ Renders a form radioCard field in a tile format.
         @selectedValue={{selectedValue}}
         @disabled={{disabled}}
         @icon={{icon}}
+        @helperText={{helperText}}
         />
     `,
     context: {
@@ -39,6 +40,7 @@ Renders a form radioCard field in a tile format.
         'selectedValue',
         'value and selectedValue must match to select radiofield'
       ),
+      helperText: text('helperText', 'Record financial transactions using'),
       disabled: boolean('disabled', false),
       icon: select(
         'icon',
diff --git a/addons/rose/addon/components/rose/form/radio/card/wide/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/card/wide/index.stories.mdx
index f9470d1bb..aa9b903a0 100644
--- a/addons/rose/addon/components/rose/form/radio/card/wide/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/card/wide/index.stories.mdx
@@ -29,6 +29,7 @@ Renders a form radiofield in a Wide format.
         @selectedValue={{selectedValue}}
         @disabled={{disabled}}
         @icon={{icon}}
+        @helperText={{helperText}}
         />
     `,
     context: {
@@ -39,6 +40,7 @@ Renders a form radiofield in a Wide format.
         'selectedValue',
         'value and selectedValue must match to select radiofield'
       ),
+      helperText: text('helperText', 'Record financial transactions using'),
       disabled: boolean('disabled', false),
       icon: select(
         'icon',

From e374213553621de9916cdb09f7c8aba7cfc4bcf5 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Sun, 23 Jan 2022 21:13:00 -0800
Subject: [PATCH 19/25] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20refactor=20com?=
 =?UTF-8?q?ponent=20layouts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/rose/form/radio/card/index.js  |   7 ++
 .../rose/form/radio/card/index.stories.mdx    | 110 ++++++++++++++++++
 .../rose/form/radio/card/tile/index.js        |   7 --
 .../form/radio/card/tile/index.stories.mdx    |  56 ---------
 .../rose/form/radio/card/wide/index.js        |   7 --
 .../form/radio/card/wide/index.stories.mdx    |  56 ---------
 .../app/components/rose/form/radio/card.js    |   1 +
 .../rose/form/radio/card/tile/index.js        |   1 -
 .../rose/form/radio/card/wide/index.js        |   1 -
 .../components/rose/form/radio/card-test.js   |  53 +++++++++
 10 files changed, 171 insertions(+), 128 deletions(-)
 create mode 100644 addons/rose/addon/components/rose/form/radio/card/index.js
 create mode 100644 addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
 delete mode 100644 addons/rose/addon/components/rose/form/radio/card/tile/index.js
 delete mode 100644 addons/rose/addon/components/rose/form/radio/card/tile/index.stories.mdx
 delete mode 100644 addons/rose/addon/components/rose/form/radio/card/wide/index.js
 delete mode 100644 addons/rose/addon/components/rose/form/radio/card/wide/index.stories.mdx
 create mode 100644 addons/rose/app/components/rose/form/radio/card.js
 delete mode 100644 addons/rose/app/components/rose/form/radio/card/tile/index.js
 delete mode 100644 addons/rose/app/components/rose/form/radio/card/wide/index.js
 create mode 100644 addons/rose/tests/integration/components/rose/form/radio/card-test.js

diff --git a/addons/rose/addon/components/rose/form/radio/card/index.js b/addons/rose/addon/components/rose/form/radio/card/index.js
new file mode 100644
index 000000000..39463c62c
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/radio/card/index.js
@@ -0,0 +1,7 @@
+import RoseFormRadioRadioComponent from '../radio';
+
+export default class RoseFormRadioCardComponent extends RoseFormRadioRadioComponent {
+  // =attributes
+  layout = this.args.layout;
+  className = `rose-form-radio-card-${this.layout}`;
+}
diff --git a/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
new file mode 100644
index 000000000..f527def6c
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
@@ -0,0 +1,110 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { text, boolean, select } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Form/Radio/Radio/Card" component="Form/Radio/Radio/Card" />
+
+# Form Radiofield in a wide format
+
+Renders a form radiofield in a Wide format.
+
+```htmlbars
+<Rose::Form::Radio::Card
+  @label="Yes"
+  @error={{false}}
+  @value="yes-agree"
+  @selectedValue="yes-agree"
+  @disabled={{false}}
+  @changed={{fn}}
+  @layout='wide'
+  />
+```
+
+<Preview>
+  <Story name="Basic Wide" height="10rem">{{
+    template: hbs`
+      <Rose::Form::Radio::Card
+        @label={{label}}
+        @error={{error}}
+        @value={{value}}
+        @selectedValue={{selectedValue}}
+        @disabled={{disabled}}
+        @icon={{icon}}
+        @helperText={{helperText}}
+        @layout='wide'
+        />
+    `,
+    context: {
+      label: text('text', 'AWS'),
+      error: boolean('error', false),
+      value: text('value', 'value and selectedValue must match to select radiofield'),
+      selectedValue: text(
+        'selectedValue',
+        'value and selectedValue must match to select radiofield'
+      ),
+      helperText: text('helperText', 'Record financial transactions using'),
+      disabled: boolean('disabled', false),
+      icon: select(
+        'icon',
+        {
+          'none': null,
+          'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
+          'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
+        },
+        null
+      ),
+    }
+  }}</Story>
+</Preview>
+
+
+Renders a form radiofield in a tile format.
+
+```htmlbars
+<Rose::Form::Radio::Card
+  @label="Yes"
+  @error={{false}}
+  @value="yes-agree"
+  @selectedValue="yes-agree"
+  @disabled={{false}}
+  @changed={{fn}}
+  @layout='tile'
+  />
+```
+
+<Preview>
+  <Story name="Basic tile" height="10rem">{{
+    template: hbs`
+      <Rose::Form::Radio::Card
+        @label={{label}}
+        @error={{error}}
+        @value={{value}}
+        @selectedValue={{selectedValue}}
+        @disabled={{disabled}}
+        @icon={{icon}}
+        @helperText={{helperText}}
+        @layout='tile'
+        />
+    `,
+    context: {
+      label: text('text', 'AWS'),
+      error: boolean('error', false),
+      value: text('value', 'value and selectedValue must match to select radiofield'),
+      selectedValue: text(
+        'selectedValue',
+        'value and selectedValue must match to select radiofield'
+      ),
+      helperText: text('helperText', 'Record financial transactions using'),
+      disabled: boolean('disabled', false),
+      icon: select(
+        'icon',
+        {
+          'none': null,
+          'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
+          'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
+        },
+        null
+      ),
+    }
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/components/rose/form/radio/card/tile/index.js b/addons/rose/addon/components/rose/form/radio/card/tile/index.js
deleted file mode 100644
index 10546dd73..000000000
--- a/addons/rose/addon/components/rose/form/radio/card/tile/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import RoseFormRadioRadioComponent from '../../radio';
-
-export default class RoseFormRadioCardComponent extends RoseFormRadioRadioComponent {
-  // =attributes
-
-  className = 'rose-form-radio-card-tile';
-}
diff --git a/addons/rose/addon/components/rose/form/radio/card/tile/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/card/tile/index.stories.mdx
deleted file mode 100644
index 84bb7f9be..000000000
--- a/addons/rose/addon/components/rose/form/radio/card/tile/index.stories.mdx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { hbs } from 'ember-cli-htmlbars';
-import { text, boolean, select } from '@storybook/addon-knobs';
-
-<Meta title="Rose|Form/Radio/Radio/Card/Tile" component="Form/Radio/Radio/Card/Tile" />
-
-# Form RadioCard field in tile format
-
-Renders a form radioCard field in a tile format.
-
-```htmlbars
-<Rose::Form::Radio::Card::Tile
-  @label="Yes"
-  @error={{false}}
-  @value="yes-agree"
-  @selectedValue="yes-agree"
-  @disabled={{false}}
-  @changed={{fn}}
-  />
-```
-
-<Preview>
-  <Story name="Tile" height="10rem">{{
-    template: hbs`
-      <Rose::Form::Radio::Card::Tile
-        @label={{label}}
-        @error={{error}}
-        @value={{value}}
-        @selectedValue={{selectedValue}}
-        @disabled={{disabled}}
-        @icon={{icon}}
-        @helperText={{helperText}}
-        />
-    `,
-    context: {
-      label: text('text', 'AWS Tile'),
-      error: boolean('error', false),
-      value: text('value', 'value and selectedValue must match to select radiofield'),
-      selectedValue: text(
-        'selectedValue',
-        'value and selectedValue must match to select radiofield'
-      ),
-      helperText: text('helperText', 'Record financial transactions using'),
-      disabled: boolean('disabled', false),
-      icon: select(
-        'icon',
-        {
-          'none': null,
-          'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
-          'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
-        },
-        null
-      ),
-    }
-  }}</Story>
-</Preview>
diff --git a/addons/rose/addon/components/rose/form/radio/card/wide/index.js b/addons/rose/addon/components/rose/form/radio/card/wide/index.js
deleted file mode 100644
index 3ba04b04d..000000000
--- a/addons/rose/addon/components/rose/form/radio/card/wide/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import RoseFormRadioRadioComponent from '../../radio';
-
-export default class RoseFormRadioRadioCardComponent extends RoseFormRadioRadioComponent {
-  // =attributes
-
-  className = 'rose-form-radio-card-wide';
-}
diff --git a/addons/rose/addon/components/rose/form/radio/card/wide/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/card/wide/index.stories.mdx
deleted file mode 100644
index aa9b903a0..000000000
--- a/addons/rose/addon/components/rose/form/radio/card/wide/index.stories.mdx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { hbs } from 'ember-cli-htmlbars';
-import { text, boolean, select } from '@storybook/addon-knobs';
-
-<Meta title="Rose|Form/Radio/Radio/Card/Wide" component="Form/Radio/Radio/Card/Wide" />
-
-# Form Radiofield in a wide format
-
-Renders a form radiofield in a Wide format.
-
-```htmlbars
-<Rose::Form::Radio::Card::Wide
-  @label="Yes"
-  @error={{false}}
-  @value="yes-agree"
-  @selectedValue="yes-agree"
-  @disabled={{false}}
-  @changed={{fn}}
-  />
-```
-
-<Preview>
-  <Story name="Wide" height="10rem">{{
-    template: hbs`
-      <Rose::Form::Radio::Card::Wide
-        @label={{label}}
-        @error={{error}}
-        @value={{value}}
-        @selectedValue={{selectedValue}}
-        @disabled={{disabled}}
-        @icon={{icon}}
-        @helperText={{helperText}}
-        />
-    `,
-    context: {
-      label: text('text', 'AWS'),
-      error: boolean('error', false),
-      value: text('value', 'value and selectedValue must match to select radiofield'),
-      selectedValue: text(
-        'selectedValue',
-        'value and selectedValue must match to select radiofield'
-      ),
-      helperText: text('helperText', 'Record financial transactions using'),
-      disabled: boolean('disabled', false),
-      icon: select(
-        'icon',
-        {
-          'none': null,
-          'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
-          'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
-        },
-        null
-      ),
-    }
-  }}</Story>
-</Preview>
diff --git a/addons/rose/app/components/rose/form/radio/card.js b/addons/rose/app/components/rose/form/radio/card.js
new file mode 100644
index 000000000..8a1494dac
--- /dev/null
+++ b/addons/rose/app/components/rose/form/radio/card.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/form/radio/card';
diff --git a/addons/rose/app/components/rose/form/radio/card/tile/index.js b/addons/rose/app/components/rose/form/radio/card/tile/index.js
deleted file mode 100644
index a050dcff9..000000000
--- a/addons/rose/app/components/rose/form/radio/card/tile/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/form/radio/card/tile';
diff --git a/addons/rose/app/components/rose/form/radio/card/wide/index.js b/addons/rose/app/components/rose/form/radio/card/wide/index.js
deleted file mode 100644
index b239d9820..000000000
--- a/addons/rose/app/components/rose/form/radio/card/wide/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/form/radio/card/wide';
diff --git a/addons/rose/tests/integration/components/rose/form/radio/card-test.js b/addons/rose/tests/integration/components/rose/form/radio/card-test.js
new file mode 100644
index 000000000..ba0f66206
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/form/radio/card-test.js
@@ -0,0 +1,53 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/form/radio/card', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Form::Radio::Card />`);
+    assert.ok(await find('input'));
+    assert.equal(await find('input').type, 'radio');
+  });
+
+  test('it renders in a tile format when tile layout is applied', async function (assert) {
+    await render(hbs`<Rose::Form::Radio::Card @layout="tile"/>`);
+    assert.ok(await find('.rose-form-radio-card-tile'));
+  });
+
+  test('it supports an icon', async function (assert) {
+    await render(
+      hbs`<Rose::Form::Radio::Card @icon="flight-icons/svg/user-circle-16" />`
+    );
+    assert.ok(find('svg'));
+  });
+
+  test('it is checked when @value and @selectedValue values match', async function (assert) {
+    await render(
+      hbs`<Rose::Form::Radio::Card @value="tree" @selectedValue="tree"/>`
+    );
+    assert.true(await find('input').checked);
+  });
+
+  test('it is not disabled by default', async function (assert) {
+    await render(hbs`<Rose::Form::Radio::Card />`);
+    assert.false(await find('input').disabled);
+  });
+
+  test('it is not in error state by default', async function (assert) {
+    await render(hbs`<Rose::Form::Radio::Card />`);
+    assert.notOk(await find('.error'));
+  });
+
+  test('it is disabled when @disabled={{true}}', async function (assert) {
+    await render(hbs`<Rose::Form::Radio::Card @disabled={{true}}/>`);
+    assert.true(await find('input').disabled);
+  });
+
+  test('it is in error state when @error={{true}}', async function (assert) {
+    await render(hbs`<Rose::Form::Radio::Card @error={{true}} />`);
+    assert.ok(await find('.error'));
+  });
+});

From bd7834ca8192e20cc85df5ba76d011ec93c7e1f1 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Sun, 23 Jan 2022 22:28:20 -0800
Subject: [PATCH 20/25] =?UTF-8?q?fix:=20=F0=9F=90=9B=20name?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/styles/rose/components/form/_index.scss       | 2 +-
 .../rose/components/form/{_radioCard.scss => _radio-card.scss}  | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename addons/rose/addon/styles/rose/components/form/{_radioCard.scss => _radio-card.scss} (100%)

diff --git a/addons/rose/addon/styles/rose/components/form/_index.scss b/addons/rose/addon/styles/rose/components/form/_index.scss
index 2e00a9e1e..b06e535f6 100644
--- a/addons/rose/addon/styles/rose/components/form/_index.scss
+++ b/addons/rose/addon/styles/rose/components/form/_index.scss
@@ -6,4 +6,4 @@
 @import 'select';
 @import 'radio';
 @import 'fieldset';
-@import 'radioCard';
+@import 'radio-card';
diff --git a/addons/rose/addon/styles/rose/components/form/_radioCard.scss b/addons/rose/addon/styles/rose/components/form/_radio-card.scss
similarity index 100%
rename from addons/rose/addon/styles/rose/components/form/_radioCard.scss
rename to addons/rose/addon/styles/rose/components/form/_radio-card.scss

From ff514b076b762f4e30f3fa3df342b1a232e144fe Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Mon, 24 Jan 2022 15:43:44 -0800
Subject: [PATCH 21/25] =?UTF-8?q?fix:=20=F0=9F=90=9B=20sizing=20var=20cons?=
 =?UTF-8?q?istency?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/rose/form/radio/card/index.js  |   2 +-
 .../rose/form/radio/card/index.stories.mdx    |   6 +-
 .../rose/components/form/_radio-card.scss     | 238 ++++++++----------
 .../components/rose/form/radio/card-test.js   |   2 +-
 4 files changed, 113 insertions(+), 135 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/radio/card/index.js b/addons/rose/addon/components/rose/form/radio/card/index.js
index 39463c62c..c05cf1a5b 100644
--- a/addons/rose/addon/components/rose/form/radio/card/index.js
+++ b/addons/rose/addon/components/rose/form/radio/card/index.js
@@ -3,5 +3,5 @@ import RoseFormRadioRadioComponent from '../radio';
 export default class RoseFormRadioCardComponent extends RoseFormRadioRadioComponent {
   // =attributes
   layout = this.args.layout;
-  className = `rose-form-radio-card-${this.layout}`;
+  className = `rose-form-radio-card ${this.layout}`;
 }
diff --git a/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
index f527def6c..82310fb57 100644
--- a/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
@@ -48,8 +48,7 @@ Renders a form radiofield in a Wide format.
         'icon',
         {
           'none': null,
-          'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
-          'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
+          'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16',
         },
         null
       ),
@@ -100,8 +99,7 @@ Renders a form radiofield in a tile format.
         'icon',
         {
           'none': null,
-          'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
-          'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
+          'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16',
         },
         null
       ),
diff --git a/addons/rose/addon/styles/rose/components/form/_radio-card.scss b/addons/rose/addon/styles/rose/components/form/_radio-card.scss
index 048390e9e..a1576d5b0 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio-card.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio-card.scss
@@ -2,23 +2,68 @@
 @use '../../utilities/type';
 @use '../../variables/typography';
 
-$l: sizing.rems(l); // 16
-$m: sizing.rems(m); // 16
+$size-xxl: sizing.rems(xxl); //48
+$size-xl: sizing.rems(xl); //48
+$size-l: sizing.rems(l); // 24
+$size-m: sizing.rems(m); // 16
+$size-s: sizing.rems(s); //12
 $size-xs: sizing.rems(xs); // 8
 $size-xxs: sizing.rems(xxs); // 4
 $size-xxxs: sizing.rems(xxxs); // 2
 $size-xxxxs: sizing.rems(xxxxs); // 1
 
-.rose-form-radio-card-wide {
+
+$radio-svg: (
+  'default':
+    "<svg viewBox='0 0 24 24' fill='%23aaaaaa' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
+  'hover':
+    "<svg viewBox='0 0 24 24' fill='%236f7682' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
+  'focus':
+    "<svg viewBox='0 0 24 24' fill='%231563ff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
+  'checked':
+    "<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%231563ff'/></svg>",
+  'disabled':
+    "<svg viewBox='0 0 24 24' fill='%23bac1cc' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
+  'disabled-checked':
+    "<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23bac1cc'/></svg>",
+  'error':
+    "<svg viewBox='0 0 24 24' fill='%23c73445' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
+  'error-checked':
+    "<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23c73445'/></svg>",
+);
+
+.rose-form-radio-card {
+  &.wide {
+    width:  ($size-m) * 23;
+    .rose-icon {
+      --size: #{$size-m};
+    }
+  }
+
+  &.tile {
+    width: ($size-m) * 15;
+   
+    .rose-icon {
+      --size: #{$size-m + $size-xxs + $size-xxxs};
+    }
+    .rose-form-radio-label {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      height: $size-m * 9;
+      &::after {
+        left:  $size-xl * 3.1;
+      }
+    }
+  }
   position: relative;
   display: flex;
   align-items: center;
-  width: ($m) * 23;
   justify-content: center;
 
   .radio-card-overlay {
     position: absolute;
-    height: $l + $size-xxs;
+    height: $size-l + $size-xxs;
     background-color: var(--ui-gray-subtler-5);
     width: 100%;
     bottom: 0;
@@ -29,32 +74,54 @@ $size-xxxxs: sizing.rems(xxxxs); // 1
     font-weight: bold;
     font-size: typography.font-size(s);
     color: var(--black);
-    width: ($m) * 23;
-    height: ($m) * 7.5;
+    width: ($size-m) * 23;
+    height: ($size-m) * 7.4;
     display: block;
     position: relative;
     text-align: left;
     word-break: break-all;
-    border: $size-xxxxs solid #bac1cc;
+    border: $size-xxxxs solid var(--ui-gray-subtler-6);
     box-shadow: 0 $size-xxs $size-xxs
       rgba(var(--stark-components), var(--opacity-2));
     border-radius: $size-xxxs;
-    padding: $s $l;
+    padding: $size-s $size-m;
     box-sizing: border-box;
     background-color: var(--white);
     .rose-form-helper-text {
       font-weight: normal;
     }
-    .rose-icon {
-      padding-right: $size-xxs;
-      padding-left: $size-xxs;
+
+    &::after {
+      position: absolute;
+      bottom: $size-xxs;
+      right: $size-xxl * 3.7;
+      display: block;
+      width: $size-m;
+      height: $size-m;
+      transform: scale(2);
+      pointer-events: none;
+      content: ' ';
+      background: no-repeat 50%/50% 50%;
+      background-image: url($data-svg-prefix + map-get($radio-svg, 'default'));
     }
   }
   .rose-form-radio-field {
     position: absolute;
     z-index: 1;
     bottom: $size-xs;
+    opacity: 0;
+
     &:not(:disabled) {
+      &:focus {
+        ~ .rose-form-radio-label {
+          &::after {
+            background-image: url($data-svg-prefix + map-get(
+                $radio-svg,
+                'focus'
+              ));
+          }
+        }
+      }
       &:hover {
         ~ .rose-form-radio-label {
           border: $size-xxxxs solid var(--ui-gray);
@@ -62,10 +129,16 @@ $size-xxxxs: sizing.rems(xxxxs); // 1
       }
       &:checked {
         ~ .rose-form-radio-label {
+          &::after {
+            background-image: url($data-svg-prefix + map-get(
+                $radio-svg,
+                'checked'
+              ));
+          }
           .radio-card-overlay {
             background-color: var(--action-subtler-1h);
           }
-          border: $size-xxxxs solid #1563ff;
+          border: $size-xxxxs solid var(--info-subtler-1);
         }
       }
     }
@@ -75,141 +148,48 @@ $size-xxxxs: sizing.rems(xxxxs); // 1
         border: $size-xxxxs solid var(--ui-border-subtler-1);
         background-color: var(--ui-gray-subtler-6);
         color: var(--ui-gray-starker-1);
-      }
-    }
-  }
-
-  &.error {
-    .rose-form-radio-field {
-      &:not(:disabled):not(:focus) {
-        ~ .rose-form-radio-label {
-          .radio-card-overlay {
-            background-color: var(--failure-subtler-1);
-          }
-          border-color: var(--failure);
-        }
-        &:checked {
-          opacity: 0;
-          ~ .rose-form-radio-label {
-            &::after {
-              position: absolute;
-              bottom: $size-xxs + $size-xxxs;
-              right: sizing.rems(m) * 10.9;
-              display: block;
-              width: $m;
-              height: $m;
-              transform: scale(2);
-              pointer-events: none;
-              content: ' ';
-              background: no-repeat 50%/50% 50%;
-              background-image: url($data-svg-prefix + map-get(
-                  $radio-svg,
-                  'error-checked'
-                ));
-              z-index: 2;
-            }
-          }
+        &::after {
+          background-image: url($data-svg-prefix + map-get(
+              $radio-svg,
+              'disabled'
+            ));
         }
       }
-    }
-  }
-}
 
-.rose-form-radio-card-tile {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: ($m) * 15;
-  justify-content: center;
-
-  .radio-card-overlay {
-    position: absolute;
-    height: $l + $size-xxs;
-    background-color: var(--ui-gray-subtler-5);
-    width: 100%;
-    bottom: 0;
-    right: 0;
-  }
-  .rose-form-radio-label {
-    font-style: normal;
-    font-weight: bold;
-    font-size: typography.font-size(s);
-    color: var(--black);
-    width: ($m) * 15;
-    height: ($m) * 9;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-    text-align: left;
-    word-break: break-all;
-    border: $xxxxs solid var(--ui-border);
-    box-shadow: 0 $size-xxs $size-xxs
-      rgba(var(--stark-components), var(--opacity-2));
-    border-radius: $size-xxxs;
-    padding: $m $size-xxs;
-    box-sizing: border-box;
-    background-color: var(--white);
-    .rose-form-helper-text {
-      font-weight: normal;
-    }
-  }
-  .rose-form-radio-field {
-    position: absolute;
-    z-index: 1;
-    bottom: $size-xs;
-    &:not(:disabled) {
-      &:hover {
-        ~ .rose-form-radio-label {
-          border: $xxxxs solid var(--ui-gray);
-        }
-      }
       &:checked {
         ~ .rose-form-radio-label {
-          .radio-card-overlay {
-            background-color: var(--action-subtler-1h);
+          &::after {
+            background-image: url($data-svg-prefix + map-get(
+                $radio-svg,
+                'disabled-checked'
+              ));
           }
-          border: $xxxxs solid #1563ff;
         }
       }
     }
-    &:disabled {
-      ~ .rose-form-radio-label {
-        border: $xxxxs solid var(--ui-border-subtler-1);
-        background-color: var(--ui-gray-subtler-6);
-        color: var(--ui-gray-starker-1);
-      }
-    }
   }
 
   &.error {
     .rose-form-radio-field {
       &:not(:disabled):not(:focus) {
-        ~ .rose-form-radio-label {
-          .radio-card-overlay {
-            background-color: var(--failure-subtler-1);
-          }
-          border-color: var(--failure);
-        }
-        &:checked {
-          opacity: 0;
+        &:not(:disabled):not(:focus) {
           ~ .rose-form-radio-label {
             &::after {
-              position: absolute;
-              bottom: $size-xxs;
-              right: sizing.rems(m) * 6.8;
-              display: block;
-              width: $m;
-              height: $m;
-              transform: scale(2);
-              pointer-events: none;
-              content: ' ';
-              background: no-repeat 50%/50% 50%;
               background-image: url($data-svg-prefix + map-get(
                   $radio-svg,
-                  'error-checked'
+                  'error'
                 ));
-              z-index: 2;
+            }
+          }
+
+          &:checked {
+            ~ .rose-form-radio-label {
+              &::after {
+                background-image: url($data-svg-prefix + map-get(
+                    $radio-svg,
+                    'error-checked'
+                  ));
+              }
             }
           }
         }
diff --git a/addons/rose/tests/integration/components/rose/form/radio/card-test.js b/addons/rose/tests/integration/components/rose/form/radio/card-test.js
index ba0f66206..f3dff2206 100644
--- a/addons/rose/tests/integration/components/rose/form/radio/card-test.js
+++ b/addons/rose/tests/integration/components/rose/form/radio/card-test.js
@@ -14,7 +14,7 @@ module('Integration | Component | rose/form/radio/card', function (hooks) {
 
   test('it renders in a tile format when tile layout is applied', async function (assert) {
     await render(hbs`<Rose::Form::Radio::Card @layout="tile"/>`);
-    assert.ok(await find('.rose-form-radio-card-tile'));
+    assert.ok(await find('.tile'));
   });
 
   test('it supports an icon', async function (assert) {

From 5544f87cc247ea0f114784031f1effa7289c5231 Mon Sep 17 00:00:00 2001
From: Dharini Jeeva <dharini@hashicorp.com>
Date: Mon, 24 Jan 2022 16:01:48 -0800
Subject: [PATCH 22/25] Update _radio-card.scss

---
 addons/rose/addon/styles/rose/components/form/_radio-card.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/rose/addon/styles/rose/components/form/_radio-card.scss b/addons/rose/addon/styles/rose/components/form/_radio-card.scss
index a1576d5b0..2e5c53c8c 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio-card.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio-card.scss
@@ -3,7 +3,7 @@
 @use '../../variables/typography';
 
 $size-xxl: sizing.rems(xxl); //48
-$size-xl: sizing.rems(xl); //48
+$size-xl: sizing.rems(xl); //36
 $size-l: sizing.rems(l); // 24
 $size-m: sizing.rems(m); // 16
 $size-s: sizing.rems(s); //12

From 7b2acf162d8eb8baa5f7931a878a2d25c8533dc6 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Mon, 24 Jan 2022 16:54:45 -0800
Subject: [PATCH 23/25] =?UTF-8?q?fix:=20=F0=9F=90=9B=20updates?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/components/form/_radio-card.scss      | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/form/_radio-card.scss b/addons/rose/addon/styles/rose/components/form/_radio-card.scss
index a1576d5b0..b1bfe78e4 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio-card.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio-card.scss
@@ -3,7 +3,7 @@
 @use '../../variables/typography';
 
 $size-xxl: sizing.rems(xxl); //48
-$size-xl: sizing.rems(xl); //48
+$size-xl: sizing.rems(xl); //36
 $size-l: sizing.rems(l); // 24
 $size-m: sizing.rems(m); // 16
 $size-s: sizing.rems(s); //12
@@ -12,7 +12,6 @@ $size-xxs: sizing.rems(xxs); // 4
 $size-xxxs: sizing.rems(xxxs); // 2
 $size-xxxxs: sizing.rems(xxxxs); // 1
 
-
 $radio-svg: (
   'default':
     "<svg viewBox='0 0 24 24' fill='%23aaaaaa' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' /></svg>",
@@ -34,7 +33,7 @@ $radio-svg: (
 
 .rose-form-radio-card {
   &.wide {
-    width:  ($size-m) * 23;
+    width: ($size-m) * 23;
     .rose-icon {
       --size: #{$size-m};
     }
@@ -42,9 +41,9 @@ $radio-svg: (
 
   &.tile {
     width: ($size-m) * 15;
-   
+
     .rose-icon {
-      --size: #{$size-m + $size-xxs + $size-xxxs};
+      --size: #{$size-xl - $size-xxs - $size-xxxs};
     }
     .rose-form-radio-label {
       display: flex;
@@ -52,7 +51,7 @@ $radio-svg: (
       align-items: center;
       height: $size-m * 9;
       &::after {
-        left:  $size-xl * 3.1;
+        left: $size-xl * 3.1;
       }
     }
   }
@@ -70,9 +69,8 @@ $radio-svg: (
     right: 0;
   }
   .rose-form-radio-label {
-    font-style: normal;
-    font-weight: bold;
-    font-size: typography.font-size(s);
+    @include type.type(s, bold);
+    display: flex;
     color: var(--black);
     width: ($size-m) * 23;
     height: ($size-m) * 7.4;
@@ -88,7 +86,7 @@ $radio-svg: (
     box-sizing: border-box;
     background-color: var(--white);
     .rose-form-helper-text {
-      font-weight: normal;
+      @include type.type(xs, normal);
     }
 
     &::after {

From a04b9d90dd5f62bfd699910c3a01b619f2d4f249 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Tue, 25 Jan 2022 10:13:34 -0800
Subject: [PATCH 24/25] =?UTF-8?q?fix:=20=F0=9F=90=9B=20refactor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/styles/rose/components/form/_radio-card.scss    | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/form/_radio-card.scss b/addons/rose/addon/styles/rose/components/form/_radio-card.scss
index b1bfe78e4..1f5f47394 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio-card.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio-card.scss
@@ -32,6 +32,10 @@ $radio-svg: (
 );
 
 .rose-form-radio-card {
+  $cardWideWidth: $size-m * 11;
+  $cardTileWidth: $size-m * 7.25;
+  $borderWidth: $size-xxxs * 2;
+
   &.wide {
     width: ($size-m) * 23;
     .rose-icon {
@@ -51,7 +55,7 @@ $radio-svg: (
       align-items: center;
       height: $size-m * 9;
       &::after {
-        left: $size-xl * 3.1;
+        left: $cardTileWidth - $borderWidth;
       }
     }
   }
@@ -92,7 +96,7 @@ $radio-svg: (
     &::after {
       position: absolute;
       bottom: $size-xxs;
-      right: $size-xxl * 3.7;
+      right: $cardWideWidth - $borderWidth;
       display: block;
       width: $size-m;
       height: $size-m;

From d1b8318dbe27b6404006a2a15117349501177555 Mon Sep 17 00:00:00 2001
From: dharini <dharini@hashicorp.com>
Date: Tue, 25 Jan 2022 13:47:12 -0800
Subject: [PATCH 25/25] =?UTF-8?q?fix:=20=F0=9F=90=9B=20border-radius,=20er?=
 =?UTF-8?q?ror=20state,=20vertically=20align=20radiobtn?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/form/radio/card/index.stories.mdx    | 12 ++-------
 .../rose/components/form/_radio-card.scss     | 26 ++++++++++++++-----
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx b/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
index 82310fb57..360108563 100644
--- a/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
+++ b/addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
@@ -35,7 +35,7 @@ Renders a form radiofield in a Wide format.
         />
     `,
     context: {
-      label: text('text', 'AWS'),
+      label: text('text', 'Azure'),
       error: boolean('error', false),
       value: text('value', 'value and selectedValue must match to select radiofield'),
       selectedValue: text(
@@ -44,14 +44,6 @@ Renders a form radiofield in a Wide format.
       ),
       helperText: text('helperText', 'Record financial transactions using'),
       disabled: boolean('disabled', false),
-      icon: select(
-        'icon',
-        {
-          'none': null,
-          'flight-icons/svg/azure-color-16': 'flight-icons/svg/azure-color-16',
-        },
-        null
-      ),
     }
   }}</Story>
 </Preview>
@@ -86,7 +78,7 @@ Renders a form radiofield in a tile format.
         />
     `,
     context: {
-      label: text('text', 'AWS'),
+      label: text('text', 'Azure'),
       error: boolean('error', false),
       value: text('value', 'value and selectedValue must match to select radiofield'),
       selectedValue: text(
diff --git a/addons/rose/addon/styles/rose/components/form/_radio-card.scss b/addons/rose/addon/styles/rose/components/form/_radio-card.scss
index 1f5f47394..85364923a 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio-card.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio-card.scss
@@ -38,16 +38,14 @@ $radio-svg: (
 
   &.wide {
     width: ($size-m) * 23;
-    .rose-icon {
-      --size: #{$size-m};
-    }
   }
 
   &.tile {
     width: ($size-m) * 15;
 
     .rose-icon {
-      --size: #{$size-xl - $size-xxs - $size-xxxs};
+      --size: #{$size-xl};
+      padding: $size-xxxs;
     }
     .rose-form-radio-label {
       display: flex;
@@ -71,6 +69,8 @@ $radio-svg: (
     width: 100%;
     bottom: 0;
     right: 0;
+    border-bottom-left-radius: $size-xxxs;
+    border-bottom-right-radius: $size-xxxs;
   }
   .rose-form-radio-label {
     @include type.type(s, bold);
@@ -85,7 +85,7 @@ $radio-svg: (
     border: $size-xxxxs solid var(--ui-gray-subtler-6);
     box-shadow: 0 $size-xxs $size-xxs
       rgba(var(--stark-components), var(--opacity-2));
-    border-radius: $size-xxxs;
+    border-radius: $size-xxs;
     padding: $size-s $size-m;
     box-sizing: border-box;
     background-color: var(--white);
@@ -95,7 +95,7 @@ $radio-svg: (
 
     &::after {
       position: absolute;
-      bottom: $size-xxs;
+      bottom: $size-xxs + $size-xxxxs;
       right: $cardWideWidth - $borderWidth;
       display: block;
       width: $size-m;
@@ -176,6 +176,15 @@ $radio-svg: (
       &:not(:disabled):not(:focus) {
         &:not(:disabled):not(:focus) {
           ~ .rose-form-radio-label {
+            color: var(--ui-gray);
+            border: $size-xxxxs solid var(--failure);
+
+            .radio-card-overlay {
+              background-color: var(--failure-subtler-2);
+            }
+            .rose-form-helper-text.error {
+              color: var(--ui-gray);
+            }
             &::after {
               background-image: url($data-svg-prefix + map-get(
                   $radio-svg,
@@ -186,6 +195,11 @@ $radio-svg: (
 
           &:checked {
             ~ .rose-form-radio-label {
+              color: var(--ui-gray);
+              border: $size-xxxxs solid var(--failure);
+              .radio-card-overlay {
+                background-color: var(--failure-subtler-2);
+              }
               &::after {
                 background-image: url($data-svg-prefix + map-get(
                     $radio-svg,