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] 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