From c5bd8b7944961e0abb4d080c1312e181ba19c435 Mon Sep 17 00:00:00 2001
From: Shanna Murry <shanna.murry84@gmail.com>
Date: Tue, 10 Jan 2023 12:05:01 -0500
Subject: [PATCH] Dang-1757/RadioButton & RadioButtonLarge design update (#361)

* default state for default radio button

* hover state

* active state

* error state for default radio buttons

* font weights for label, typography for helper text

* disabled states for default radio buttons

* work on spacing for large buttons

* large button default and active state; hover state; selected state

* disabled state for large radio buttons

* error state for large radio buttons

* working on spacing

* forgot to commit for several hours - so not sure what this entails - outline stuff for focus states

* refresh

* pr suggestions

* change dotted outline to dashed

* remove div wrapper - add v-if to helper text

* fix height issue

* update height stuff on large radio buttons

* remove empty class

* add customOutline class so that the outline shows only on tabbing

* package version & changelog

Co-authored-by: Myrtle <myrtle.tzouma@lob.com>
Co-authored-by: Myrtle <50080618+Mrtly@users.noreply.github.com>
---
 CHANGELOG.md                                  |   7 +
 package-lock.json                             |   4 +-
 package.json                                  |   2 +-
 .../RadioButton/RadioButton.stories.js        |   4 +-
 src/components/RadioButton/RadioButton.vue    | 151 +++++-------
 .../RadioButtonLarge.stories.js               |  17 --
 .../RadioButtonLarge/RadioButtonLarge.vue     | 217 +++++++++++-------
 .../RadioGroup/RadioGroup.stories.js          |   7 +-
 src/components/RadioGroup/RadioGroup.vue      |  16 +-
 9 files changed, 221 insertions(+), 204 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2290ee095..f47957135 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## v2.0.0-beta.28
+
+### Features
+
+`RadioButton` and `RadioButtonLarge` design updates
+
 ## v2.0.0-beta.27
 
 ### Features
@@ -11,6 +17,7 @@ changes the `LoadingIndicator` background color to transparent
 ### Bug fixes
 
 Restores the Badge background color
+
 ## v2.0.0-beta.25
 
 ### Features
diff --git a/package-lock.json b/package-lock.json
index 84a924f84..f233c8225 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.0-beta.27",
+  "version": "2.0.0-beta.28",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@lob/ui-components",
-      "version": "2.0.0-beta.27",
+      "version": "2.0.0-beta.28",
       "dependencies": {
         "date-fns": "^2.29.3",
         "date-fns-holiday-us": "^0.3.1",
diff --git a/package.json b/package.json
index e22d5b02b..c7aed6676 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.0-beta.27",
+  "version": "2.0.0-beta.28",
   "engines": {
     "node": ">=14.18.2",
     "npm": ">=8.3.0"
diff --git a/src/components/RadioButton/RadioButton.stories.js b/src/components/RadioButton/RadioButton.stories.js
index 1f3676553..397f42678 100644
--- a/src/components/RadioButton/RadioButton.stories.js
+++ b/src/components/RadioButton/RadioButton.stories.js
@@ -34,7 +34,7 @@ const WithHelperTextTemplate = (args, { argTypes }) => ({
   components: { RadioButton },
   data: () => ({ vModel }),
   setup: () => ({ args }),
-  template: '<radio-button v-bind="args" v-model="vModel" />'
+  template: '<div style="width:200px"><radio-button v-bind="args" v-model="vModel" /></div>'
 });
 
 export const WithHelperText = WithHelperTextTemplate.bind({});
@@ -43,5 +43,5 @@ WithHelperText.args = {
   id: '4x6',
   label: '4x6',
   value: '4x6',
-  helperText: 'Standard Postcard Size'
+  helperText: 'Standard Postcard Size and a second line of text'
 };
diff --git a/src/components/RadioButton/RadioButton.vue b/src/components/RadioButton/RadioButton.vue
index 421d1da1d..0696674e3 100644
--- a/src/components/RadioButton/RadioButton.vue
+++ b/src/components/RadioButton/RadioButton.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="inline-block mr-6 mt-1">
+  <div class="customOutline py-1 mr-5 relative">
     <input
       :id="id"
       type="radio"
       :class="[
-        'm-0 p-0 opacity-0 mt-2',
+        'absolute opacity-0',
         {'radio__input--error': error},
         {'!cursor-not-allowed': disabled}
       ]"
@@ -13,34 +13,30 @@
       :checked="checked"
       :disabled="disabled"
       :required="required"
+      :readonly="readonly"
       @input="onInput"
       @click="onClick"
     >
     <label
       :for="id"
       :class="[
-        'relative flex font-light',
-        {'text-gray-100 !cursor-not-allowed': disabled},
-        {'text-primary-500' : checked && !disabled},
-        {'largeButton w-4/5 pt-2 ml-1' : large},
-        {'largeHover' : largeHover},
-        {'!pt-0.5 helperText' : large && helperText}
+        'relative flex type-base-500 left-[31px] pr-10 cursor-pointer',
+        {'text-gray-400 !cursor-not-allowed': disabled}
       ]"
     >
-      <div class="ml-4">
+      <div>
         <slot>
           {{ label }}
         </slot>
-      </div>
-      <div
-        :class="[
-          'text-sm ml-4 text-gray-500 !font-normal',
-          {'!text-error' : error},
-          {'!text-primary-500' : checked},
-          {'!text-gray-100' : disabled}
-        ]"
-      >
-        {{ helperText }}
+        <div
+          v-if="helperText"
+          :class="[
+            'type-xs-400 text-gray-500',
+            {'!text-gray-300' : disabled}
+          ]"
+        >
+          {{ helperText }}
+        </div>
       </div>
     </label>
   </div>
@@ -84,19 +80,11 @@ export default {
       type: String,
       default: ''
     },
-    large: {
-      type: Boolean,
-      default: false
-    },
-    largeChecked: {
-      type: Boolean,
-      default: false
-    },
-    largeHover: {
+    error: {
       type: Boolean,
       default: false
     },
-    error: {
+    readonly: {
       type: Boolean,
       default: false
     }
@@ -109,7 +97,7 @@ export default {
   },
   computed: {
     checked () {
-      return this.modelValue === this.value || this.largeChecked;
+      return this.modelValue === this.value;
     }
   },
   created () {
@@ -130,80 +118,51 @@ export default {
 <style scoped lang="scss">
 input {
   + label {
-    @apply relative;
-    @apply inline-block;
-    @apply cursor-pointer;
-
     &::before {
       content: "";
       top: 3px;
-      left: -8px;
+      left: -22px;
 
       @apply absolute;
-      @apply bg-transparent;
-      @apply border-gray-300;
+      @apply bg-white;
+      @apply border-gray-400;
       @apply border-solid;
       @apply border;
       @apply h-4;
-      @apply rounded-full;
+      @apply rounded-lg;
       @apply w-4;
     }
 
     &::after {
       content: "";
-      left: -4px;
+      left: -17px;
 
-      @apply top-[7px];
+      @apply top-2;
       @apply absolute;
-      @apply h-2;
+      @apply h-1.5;
       @apply inline-block;
       @apply rounded-full;
-      @apply w-2;
-    }
-  }
-
-  + label.largeButton {
-    &::before {
-      @apply mt-2;
-    }
-
-    &::after {
-      @apply mt-2;
+      @apply w-1.5;
+      @apply bg-white;
     }
   }
 
-  + label.helperText {
-    &::before {
-      @apply mt-0.5;
-    }
-
-    &::after {
-      @apply mt-0.5;
-    }
-  }
-
-  &:disabled + label::before {
-    @apply border-gray-100;
-  }
-
   &.radio__input--error + label::before {
-    @apply border-error;
+    @apply border-red-500;
   }
 
-  &:checked:not(:disabled) + label::before {
-    @apply border-2;
-    @apply border-primary-500;
+  &:disabled:not(:checked) + label::before {
+    @apply border-gray-300;
+    @apply bg-gray-50;
   }
 
-  &:checked:not(:disabled) + label::after {
-    @apply bg-primary-500;
+  &:disabled:not(:checked) + label::after {
+    @apply bg-gray-50;
   }
 
-  &:checked:disabled + label::after {
-    @apply bg-gray-100;
-    @apply h-2;
-    @apply w-2;
-    @apply top-[7px];
+  &:disabled:checked + label::before {
+    @apply border-gray-300;
+    @apply bg-gray-300;
   }
 
   &.radio__input--error:checked + label::before {
@@ -211,34 +170,40 @@ input {
     @apply border-error;
   }
 
-  &:hover:not(:disabled):not(:checked) + label::before {
-    @apply border-gray-900;
+  &.radio__input--error:not(:checked) + label::before {
+    @apply bg-red-50;
   }
 
-  &.radio__input--error:focus + label.largeButton::before {
-    @apply shadow-none;
+  &.radio__input--error:not(:checked) + label::after {
+    @apply bg-red-50;
   }
 
-  &.radio__input--error:focus:checked + label.largeButton::before {
-    @apply border-error;
+  &.radio__input--error:checked:not(:disabled) + label::before {
+    @apply bg-red-500;
   }
 
-  &.radio__input--error:checked:focus + label::before {
-    @apply border-error;
+  &.radio__input--error:checked:not(:disabled) + label::after {
+    @apply bg-white;
   }
 
-  &:hover:not(:disabled):not(:checked):not(.radio__input--error) + label::before {
-    @apply shadow-input;
-    @apply border-primary-500;
+  &:checked:not(:disabled):not(.radio__input--error) + label::before {
+    @apply bg-black;
+    @apply border-black;
   }
 
-  &:not(:disabled):not(:checked):not(.radio__input--error) + label.largeHover::before {
-    @apply shadow-input;
-    @apply border-primary-500;
+  &:hover:not(:disabled):not(:checked):not(.radio__input--error) + label::before {
+    @apply border-gray-500;
+    @apply bg-gray-50;
   }
 
-  &.radio__input--error:checked + label::after {
-    @apply bg-transparent;
+  &:hover:not(:disabled):not(:checked):not(.radio__input--error) + label::after {
+    @apply bg-gray-50;
   }
 }
+
+.customOutline:has(:focus-visible) {
+  @apply outline-dashed;
+  @apply outline-black;
+  @apply outline-offset-1;
+}
 </style>
diff --git a/src/components/RadioButtonLarge/RadioButtonLarge.stories.js b/src/components/RadioButtonLarge/RadioButtonLarge.stories.js
index a2af63db8..ac7b7ca8e 100644
--- a/src/components/RadioButtonLarge/RadioButtonLarge.stories.js
+++ b/src/components/RadioButtonLarge/RadioButtonLarge.stories.js
@@ -63,23 +63,6 @@ WithShortHelperText.args = {
   helperText: 'Looks good'
 };
 
-const WithRevealTextTemplate = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { RadioButtonLarge },
-  data: () => ({ vModel }),
-  setup: () => ({ args }),
-  template: '<radio-button-large v-bind="args" v-model="vModel" />'
-});
-
-export const WithRevealText = WithRevealTextTemplate.bind({});
-WithRevealText.args = {
-  name: 'postcard-size',
-  id: '4x6',
-  label: '4x6',
-  value: '4x6',
-  revealText: 'Standard postcard size'
-};
-
 const WithFullWidthTemplate = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { RadioButtonLarge },
diff --git a/src/components/RadioButtonLarge/RadioButtonLarge.vue b/src/components/RadioButtonLarge/RadioButtonLarge.vue
index 612ac79d4..f1c2bc260 100644
--- a/src/components/RadioButtonLarge/RadioButtonLarge.vue
+++ b/src/components/RadioButtonLarge/RadioButtonLarge.vue
@@ -1,69 +1,64 @@
 <template>
   <div
     :class="[
-      {'min-h-[60px]': revealText},
-      {'!cursor-not-allowed': disabled},
-      {'h-full': fullHeight}
+      'buttonContainer cursor-pointer border border-gray-300 rounded-sm pt-3 pb-3 mr-4 mb-1 customOutline',
+      fullWidth ? 'w-full' : 'w-[234px]',
+      {'h-full' : fullHeight},
+      {'!pb-8' : helperText},
+      {'hover:border-gray-400': !disabled && !error},
+      {'!border-black checked': checked && !disabled && !error},
+      {'disabled !cursor-not-allowed border-gray-100': disabled},
+      {'!border-red-500 radio__input--error': error && !disabled}
     ]"
+    @click="onInput"
   >
-    <div
+    <input
+      :id="id"
+      ref="radioInput"
+      type="radio"
       :class="[
-        'min-h-[3rem] cursor-pointer bg-white top-1 inline-block mr-4 border border-gray-300 rounded-lg pl-2',
-        fullWidth ? 'w-full' : 'w-[200px]',
-        {'h-full': fullHeight},
-        {'hover:border-gray-300': !disabled},
-        {'!border-primary-500 ring-inset ring-1 ring-primary-500': checked && !disabled && !error},
-        {'bg-white-100 !cursor-not-allowed': disabled},
-        {'!border-error': error}
+        'absolute opacity-0',
+        {'radio__input--error': error},
+        {'!cursor-not-allowed': disabled}
       ]"
-      @mouseenter="onContainerHover"
-      @mouseleave="onContainerLeaveHover"
-      @click="onLargeButtonClick"
+      :name="name"
+      :value="value.toString()"
+      :checked="checked"
+      :disabled="disabled"
+      :required="required"
+      @input="onInput"
+      @click="onClick"
     >
-      <div
-        ref="contentContainer"
-        class="pb-1"
-      >
-        <RadioButton
-          :id="id"
-          class="w-full"
-          :v-model="modelValue"
-          :value="value"
-          :name="name"
-          :label="label"
-          :required="required"
-          :disabled="disabled"
-          :helper-text="helperText"
-          :large="true"
-          :large-checked="checked"
-          :large-hover="largeHover"
-          :error="error"
-          @click="onClick"
-          @input="onInput"
-        />
+    <label
+      :for="id"
+      :class="[
+        'relative flex type-base-500 top-[1px] left-[46px] cursor-pointer h-full pr-16',
+        {'text-gray-400 !cursor-not-allowed': disabled}
+      ]"
+    >
+      <div>
+        <slot>
+          {{ label }}
+        </slot>
         <div
-          v-if="revealText"
-          ref="revealText"
           :class="[
-            'hidden ml-8 text-sm text-gray-300 !font-normal cursor-pointer',
-            {'!block !text-primary-500' : checked},
-            {'!text-gray-100 cursor-not-allowed' : disabled}
+            'type-xs-400 text-gray-500',
+            {'!text-gray-300' : disabled},
+            {'-mb-4' : helperText}
           ]"
         >
-          {{ revealText }}
+          {{ helperText }}
         </div>
       </div>
-    </div>
+    </label>
   </div>
 </template>
 
 <script>
 import { getCurrentInstance } from 'vue';
-import RadioButton from '../RadioButton/RadioButton.vue';
 
 export default {
   name: 'RadioButtonLarge',
-  components: { RadioButton },
   props: {
     id: {
       type: String,
@@ -81,10 +76,6 @@ export default {
       type: [String, Boolean],
       default: ''
     },
-    error: {
-      type: Boolean,
-      default: false
-    },
     label: {
       type: String,
       default: ''
@@ -101,24 +92,23 @@ export default {
       type: String,
       default: ''
     },
-    revealText: {
-      type: String,
-      default: ''
-    },
-    fullWidth: {
+    error: {
       type: Boolean,
       default: false
     },
     fullHeight: {
       type: Boolean,
       default: false
+    },
+    fullWidth: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue', 'input', 'click'],
   data () {
     return {
-      parent: null,
-      largeHover: false
+      parent: null
     };
   },
   computed: {
@@ -131,35 +121,104 @@ export default {
   },
   methods: {
     onInput () {
-      this.$emit('update:modelValue', this.value);
-      this.$emit('input', this.value);
-    },
-    onClick ($event) {
-      this.$emit('click', $event);
-    },
-    onLargeButtonClick () {
       if (!this.disabled) {
         this.$emit('update:modelValue', this.value);
+        this.$emit('input', this.value);
+        this.$refs.radioInput.focus();
       }
     },
-    onContainerHover () {
-      const revealText = this.$refs.revealText;
-      const contentContainer = this.$refs.contentContainer;
-      if (revealText) {
-        revealText.classList.add('!block');
-        contentContainer.classList.add('!-mt-1.5');
-      }
-      this.largeHover = true;
-    },
-    async onContainerLeaveHover () {
-      const revealText = this.$refs.revealText;
-      const contentContainer = this.$refs.contentContainer;
-      if (revealText && !this.checked) {
-        revealText.classList.remove('!block');
-        contentContainer.classList.remove('!-mt-1.5');
-      }
-      this.largeHover = false;
+    onClick ($event) {
+      this.$emit('click', $event);
     }
   }
 };
 </script>
+
+<style scoped lang="scss">
+input {
+  + label {
+    &::before {
+      content: "";
+      top: 3px;
+      left: -22px;
+
+      @apply absolute;
+      @apply bg-white;
+      @apply border-gray-400;
+      @apply border-solid;
+      @apply border;
+      @apply h-4;
+      @apply rounded-lg;
+      @apply w-4;
+    }
+
+    &::after {
+      content: "";
+      left: -17px;
+
+      @apply top-2;
+      @apply absolute;
+      @apply h-1.5;
+      @apply inline-block;
+      @apply rounded-full;
+      @apply w-1.5;
+      @apply bg-white;
+    }
+  }
+
+  &.radio__input--error + label::before {
+    @apply border;
+    @apply border-red-500;
+  }
+
+  &:disabled:not(:checked) + label::before {
+    @apply border-gray-300;
+    @apply bg-gray-50;
+  }
+
+  &:disabled:not(:checked) + label::after {
+    @apply bg-gray-50;
+  }
+
+  &:disabled:checked + label::before {
+    @apply border-gray-300;
+    @apply bg-gray-300;
+  }
+
+  &.radio__input--error:not(:checked):not(:disabled) + label::before {
+    @apply bg-red-50;
+  }
+
+  &.radio__input--error:not(:checked):not(:disabled) + label::after {
+    @apply bg-red-50;
+  }
+
+  &.radio__input--error:checked:not(:disabled) + label::before {
+    @apply bg-red-500;
+  }
+
+  &.radio__input--error:checked:not(:disabled) + label::after {
+    @apply bg-white;
+  }
+
+  &:checked:not(:disabled):not(.radio__input--error) + label::before {
+    @apply bg-black;
+    @apply border-black;
+  }
+}
+
+.buttonContainer:hover:not(.radio__input--error):not(.disabled):not(.checked) label::before {
+  @apply border-gray-500;
+  @apply bg-gray-50;
+}
+
+.buttonContainer:hover:not(.radio__input--error):not(.disabled):not(.checked) label::after {
+  @apply bg-gray-50;
+}
+
+.customOutline:has(:focus-visible) {
+  @apply outline-dashed;
+  @apply outline-black;
+  @apply outline-offset-1;
+}
+</style>
diff --git a/src/components/RadioGroup/RadioGroup.stories.js b/src/components/RadioGroup/RadioGroup.stories.js
index a33e2ced0..746896cee 100644
--- a/src/components/RadioGroup/RadioGroup.stories.js
+++ b/src/components/RadioGroup/RadioGroup.stories.js
@@ -95,7 +95,7 @@ const WithHelperTextTemplate = (args, { argTypes }) => ({
   data: () => ({ withHelperTextModel }),
   setup: () => ({ args }),
   template: `
-    <radio-group v-bind="args" :separate-lines="true">
+    <radio-group v-bind="args">
     <radio-button
     id="4x6"
     name="postcard-size"
@@ -130,7 +130,7 @@ WithHelperText.args = {
   separateLines: false
 };
 
-const largeGroupModel = '';
+const largeGroupModel = '4x6';
 
 const LargeGroupTemplate = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
@@ -145,7 +145,6 @@ const LargeGroupTemplate = (args, { argTypes }) => ({
     label="4x6"
     value="4x6"
     v-model="largeGroupModel"
-    reveal-text="Reveal text"
   />
   <radio-button-large
     id="5x7"
@@ -153,7 +152,6 @@ const LargeGroupTemplate = (args, { argTypes }) => ({
     label="5x7"
     value="5x7"
     v-model="largeGroupModel"
-    reveal-text="Reveal text"
   />
   <radio-button-large
     id="big"
@@ -161,7 +159,6 @@ const LargeGroupTemplate = (args, { argTypes }) => ({
     label="Really Big"
     value="big"
     v-model="largeGroupModel"
-    reveal-text="Reveal text"
   />
     </radio-group>
   `
diff --git a/src/components/RadioGroup/RadioGroup.vue b/src/components/RadioGroup/RadioGroup.vue
index c17255b83..969996884 100644
--- a/src/components/RadioGroup/RadioGroup.vue
+++ b/src/components/RadioGroup/RadioGroup.vue
@@ -1,20 +1,26 @@
 <template>
   <fieldset
     :class="[
-      'border-none m-0 p-0 flex',
-      {'flex-col' : separateLines}
+      'border-none flex'
     ]"
   >
-    <legend :class="[{'text-sm font-normal normal-case tracking-normal text-gray-500 mb-1 border-b-0':!srOnlyLegend}, {'sr-only': srOnlyLegend}]">
+    <legend :class="srOnlyLegend ? 'sr-only' : 'type-small-700 text-black mb-1.5'">
       {{ legend }}
       <span
         v-if="required"
-        class="text-sm text-error"
+        class="text-sm text-red-500"
       >
         *
       </span>
     </legend>
-    <slot />
+    <div
+      :class="[
+        'flex',
+        {'flex-col' : separateLines}
+      ]"
+    >
+      <slot />
+    </div>
   </fieldset>
 </template>