WIP CSR-186 horizontal radio button updates.

src/layouts/component-test/component-test.vue

@@ -241,6 +241,8 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
+        v-bind:totalInGroup="3"
+        v-bind:positionInGroup="1"
         />
         <radioHorizontal
         groupName="demo-4"
@@ -251,6 +253,20 @@
         loaderColor="blue"
         loaderPosition="right"
         sizeInRem="1"
+        v-bind:totalInGroup="3"
+        v-bind:positionInGroup="2"
+        />
+        <radioHorizontal
+        groupName="demo-4"
+        ariaLabelBy="vehicle-model"
+        radioID="horizontal-2"
+        radioLabelSubCopy=""
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        v-bind:totalInGroup="3"
+        v-bind:positionInGroup="3"
         />
       </div>
     </div>

src/ux-components/radio-horizontal/radio-horizontal.vue

@@ -1,29 +1,31 @@
 <template>
   <div class="col radiogroup radio-horizontal d-flex flex-column mb-2">
     <input type="radio" :id="radioID" :name="groupName" :value="radioID">
-    <label role="radio" tabindex="0" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent'>
+    <label role="radio" tabindex="0" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastItem" @click='displayComponent'>
       <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
       <span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
-    <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
+      <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
-  </label>
+    </label>
-  <p class="small">{{errorMessage}}</p>
+    <p class="small">{{errorMessage}}</p>
-</div>
+  </div>
 </template>
 
 <script>
 import loader from "@/ux-components/loader/loader";
 export default {
   name: "radioHorizontal",
-  props: [
+  props: {
-    "groupName", /* Required, unique for each radio button GROUP */
+    groupName: String, /* Required, unique for each radio button GROUP */
-    "radioID", /* Required, unique for each radio button. Used for button id, label and <label for> */
+    radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
-    "radioLabelSubCopy", /* Optional, used for multi-line radio buttons */
+    radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
-    "textPosition", /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
+    textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
-    "errorMessage", /* Optional */
+    errorMessage: String, /* Optional */
-    "loaderColor", /* Optional */
+    loaderColor: String, /* Optional */
-    "loaderPosition", /* Optional */
+    loaderPosition: String, /* Optional */
-    "sizeInRem" /* Optional */
+    sizeInRem: String, /* Optional */
-  ],
+    totalInGroup: Number,
+    positionInGroup: Number
+  },
   data() {
     return {
       isError: false,
@@ -38,53 +40,68 @@ export default {
   components: {
     loader,
   },
-};
+  computed: {
-</script>
+    isFirstOrLastItem() {
-
+      let className = '';
-<style lang="scss">
+      if(this.positionInGroup == this.totalInGroup) {
-  .radio-horizontal {
+        className = 'last-item'
-    input[type="radio"] {
+      } else if(this.positionInGroup == 1) {
-      opacity: 0;
+          className = 'first-item'
-      position: fixed;
-      width: 0;
-      &:focus-visible + label {
-        box-shadow: 0 0 0 2px $blue;
-      }
-      &:focus + label {
-        box-shadow: 0 0 0 2px $blue;
-      }
-      &:checked + label {
-        background: $blue-100;
-        box-shadow: 0 0 0 1px $blue;
-      }
-      &:checked + label p:first-child {
-        font-weight: 500;
-      }
-    }
-    label {
-      position: relative;
-      background: $white;
-      transition: all 150ms linear;
-      border: 1px solid $gray-500;
-      width: 100%;
-      &:hover {
-        box-shadow: 0 0 0 4px $blue-100;
-        cursor: pointer;
-      }
-      + p {
-        display: none;
-      }
-      &.error {
-        border: 1px solid $danger;
-        + p {
-          display: flex;
-          color: $danger;
-        }
-      }
-      &:first-of-type {
-        border-top-left-radius: .5rem;
-        border-bottom-left-radius: .5rem;
       }
+      console.log(typeof this.positionInGroup);
+      return className;
     }
   }
+};
+</script>
+<style lang="scss">
+.radio-horizontal {
+  input[type="radio"] {
+    opacity: 0;
+    position: fixed;
+    width: 0;
+    &:focus-visible + label {
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:focus + label {
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:checked + label {
+      background: $blue-100;
+      box-shadow: 0 0 0 1px $blue;
+    }
+    &:checked + label p:first-child {
+      font-weight: 500;
+    }
+  }
+  label {
+    position: relative;
+    background: $white;
+    transition: all 150ms linear;
+    border: 1px solid $gray-500;
+    width: 100%;
+    &:hover {
+      box-shadow: 0 0 0 4px $blue-100;
+      cursor: pointer;
+    }
+    + p {
+      display: none;
+    }
+    &.error {
+      border: 1px solid $danger;
+      + p {
+        display: flex;
+        color: $danger;
+      }
+    }
+    &.first-item {
+      border-bottom-left-radius: .5rem;
+      border-top-left-radius: .5rem;
+    }
+    &.last-item {
+      border-bottom-right-radius: .5rem;
+      border-top-right-radius: .5rem;
+    }
+  }
+}
 </style>