CSR-341 WIP nested radio demo

src/layouts/nested-radio-poc/nested-radio.vue

@@ -1,27 +1,89 @@
 <template>
-<h5>POC</h5>
+
+  <div class="container-fluid nested-radio">
+    <div class="row mb-1 demo-animate"><!-- demo-animate for demo only -->
+      <div class="col">
+        <listCard
+        groupName="listcard1"
+        isWide="true"
+        buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+        buttonLabel="Green Tint, Blue Shade"
+        buttonID="radio1"
+        />
+      </div>
+    </div>
+    <div class="row mb-1 show-hide"><!-- show-hide for demo only -->
+      <div class="col">
+        <p class="mb-0 fw-bold">Ok, select the features</p>
+        <radio ref="radio"
+        groupName="group1"
+        buttonLabel="rain sensor, solar, 3rd visor band"
+        buttonID="button1"
+        isRequired
+        value="test button"
+        screenReaderOnlyText="rain sensor, solar, 3rd visor band"
+        />
+        <radio ref="radio"
+        groupName="group1"
+        buttonLabel="rain sensor, heated glass, solar, 3rd visor band"
+        buttonID="button2"
+        isRequired
+        value="test button"
+        screenReaderOnlyText="rain sensor, heated glass, solar, 3rd visor band"
+        />
+      </div>
+    </div>
+    <div class="row mb-2">
+      <div class="col">
+        <listCard
+        groupName="listcard1"
+        isWide="true"
+        buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+        buttonLabel="Green Tint"
+        buttonID="radio2"
+        />
+      </div>
+    </div>
+  </div>
 
 </template>
 
 <script>
-
 import listCard from "@/ux-components/list-card/list-card";
 import radio from "@/ux-components/radio/radio";
 
 export default {
   name: "nestedRadio",
-  props: {
-    groupName: String,
-    buttonLabel: String,
-    buttonID: String,
-    isRequired: Boolean,
-    value: {
-      type: [String, Number],
-      default: "",
-    },
-    screenReaderOnlyText: String,
-    hasError: Boolean,
-  },
+  components: {
+    radio,
+    listCard,
+  }
 };
-
 </script>
+
+<style lang="scss">
+.nested-radio {
+  padding: 20px; // For demo only
+  .ui-radio {
+    margin: .25rem 0;
+  }
+  p {
+    font-size: .875rem;
+  }
+  // For demo only
+  .show-hide {
+    max-height: 0;
+    transition: max-height 0.35s ease-out;
+    overflow: hidden;
+  }
+  .demo-animate {
+    &:hover {
+      + .show-hide {
+        max-height: 100px;
+        transition: max-height 0.35s ease-in;
+      }
+    }
+  }
+  // END for demo only
+}
+</style>

src/ux-components/list-card/list-card.vue

@@ -173,6 +173,7 @@ export default {
     &:checked + label {
       p {
         color: $black;
+        font-weight: 500;
       }
       .sub-copy {
         color: $gray-600;

src/ux-components/radio/radio.vue

@@ -11,7 +11,7 @@
     :v-model="checkValue"
     @change="handleCheckChanged"
     />
-    <label class="d-flex align-items-center" :for="buttonID">
+    <label class="d-flex align-items-center radio-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
       <span v-if="screenReaderOnlyText" class="sr-only">{{
         screenReaderOnlyText
@@ -81,58 +81,66 @@ export default {
 .ui-radio {
   position: relative;
   input[type="radio"] {
-    position: absolute !important;
+    position: absolute!important;
     height: 1px;
     width: 1px;
     overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-    + label {
-      display: block;
-      position: relative;
-      &:hover {
+    clip: rect(1px,1px,1px,1px);
+    + .radio-label {
+      &:before {
+        content: '';
+        background: $white;
+        border-radius: 100%;
+        border: 1px solid $gray-500;
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        position: relative;
+        margin-right: .5rem;
+        vertical-align: top;
         cursor: pointer;
+        transition: all 250ms ease;
+        flex-shrink: 0;
       }
     }
-    + label::before {
-      content: "";
-      position: relative;
-      display: inline-block;
-      margin-right: 8px;
-      width: 16px;
-      height: 16px;
-      background: white;
-      border: 1px solid $gray-500;
-      border-radius: 50%;
+    &:checked {
+      + .radio-label {
+        &:before {
+          background-color: $blue;
+          box-shadow: inset 0 0 0 2px $white;
+        }
+      }
     }
-    &:checked + label::before {
-      background: $white;
-      border: 1px solid $blue;
+    &:hover {
+      + label {
+        cursor: pointer;
+        &:before {
+          box-shadow: 0 0 0 4px #9fcee6;
+        }
+      }
     }
-    &:checked + label::after {
-      content: "";
-      position: absolute;
-      top: 8px;
-      left: 3px;
-      height: 6px;
-      width: 6px;
-      transform: rotate(-45deg);
-      border: 5px solid $blue;
-      border-radius: 50%;
+    &:focus {
+      + label {
+        &:before {
+          box-shadow: 0 0 0 2px #1574a1;
+        }
+      }
     }
-    &:hover + label::before {
-      box-shadow: 0 0 0 4px $blue-300;
+    &:disabled {
+      + .radio-label {
+        &:before {
+          box-shadow: inset 0 0 0 4px $gray-550;
+          border-color: $gray-550;
+          background: $gray-550;
+        }
+      }
     }
-    &:focus + label::before {
-      box-shadow: 0 0 0 2px $blue;
-    }
-    &:focus:checked + label::before {
-      box-shadow: 0 0 0 2px transparent;
-    }
-    &:disabled + label {
-      color: $gray-200;
-    }
-    &:disabled + label::before {
-      background: $gray-200;
+    + .radio-label {
+      &:empty {
+        &:before {
+          margin-right: 0;
+        }
+      }
     }
   }
 }