[SDPL-169] Adds border radius to option group (#603)

* Fix list group exports

* [SDPL-169] Adds rounding to first and last option to match design

* [SDPL-169] Fix clear button text color

* Fix option group label reference, fix CR issues

* fix name attr

* use string for a-z

* update snapshot

packages/components/Molecules/Form/fields/fieldRplclearform.vue

@@ -25,6 +25,7 @@ export default {
 <style lang="scss">
 @import "~@dpc-sdp/ripple-global/scss/settings";
 @import "~@dpc-sdp/ripple-global/scss/tools";
+@import "../scss/form";
 
 $rpl-clearform-typography-emphasis: ('s', 1.6em, 'bold') !default;
 $rpl-clearform-padding: $rpl-space-2;
@@ -33,6 +34,7 @@ $rpl-clearform-padding: $rpl-space-2;
   padding: $rpl-clearform-padding 0;
   border: 0;
   background: none;
+  color: $rpl-form-element-text-color;
   cursor: pointer;
 
   &:active {

packages/components/Molecules/Form/fields/fieldRploptionbutton.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="rpl-option-button" :disabled="disabled" v-attributes="'wrapper'">
-    <label v-for="(item, index) in optionValues" :key="index" class="rpl-option-button__label" :class="{ 'rpl-option-button__label--checked': isItemChecked(item) }">
-      <input :id="getFieldID(schema, true)" type="radio" :name="id" class="rpl-option-button__radio" @click="onSelection(item)" :value="item" :class="schema.fieldClasses" :required="schema.required" />
+  <div :id="getFieldID(schema)" class="rpl-option-button" :disabled="disabled" v-attributes="'wrapper'">
+    <label v-for="(item, index) in optionValues" :key="index" :for="getId(index)" class="rpl-option-button__label" :class="{ 'rpl-option-button__label--checked': isItemChecked(item) }">
+      <input :id="getId(index)" type="radio" :name="getFieldID(schema)" class="rpl-option-button__radio" @click="onSelection(item)" :value="item" :class="schema.fieldClasses" :required="schema.required" />
       <span class="rpl-option-button__text">{{ item }}</span>
     </label>
   </div>
@@ -15,7 +15,7 @@ export default {
   mixins: [abstractField],
   data () {
     return {
-      optionValues: this.schema.optionValues || [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' ]
+      optionValues: this.schema.optionValues || 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
     }
   },
   computed: {
@@ -24,6 +24,9 @@ export default {
     }
   },
   methods: {
+    getId (idx) {
+      return `${this.getFieldID(this.schema)}-opt-${idx + 1}`
+    },
     onSelection (item) {
       this.value = item
     },
@@ -37,11 +40,11 @@ export default {
 <style lang="scss">
   @import "~@dpc-sdp/ripple-global/scss/settings";
   @import "~@dpc-sdp/ripple-global/scss/tools";
+  @import "../scss/form";
 
   $rpl-option-button-label-background-color: rpl-color('white') !default;
-  $rpl-option-button-label-color: rpl-color('extra_dark_neutral') !default;
   $rpl-option-button-label-border-width: 1px !default;
-  $rpl-option-button-label-border: $rpl-option-button-label-border-width solid rpl-color('mid_neutral_1') !default;
+  $rpl-option-button-label-border: $rpl-option-button-label-border-width solid $rpl-form-element-border-color !default;
   $rpl-option-button-label-checked-border: $rpl-option-button-label-border-width solid rpl-color('primary') !default;
   $rpl-option-button-text-focused-color: rpl-color('primary') !default;
   $rpl-option-button-text-focused-border: $rpl-option-button-label-border-width solid rpl-color('primary') !default;
@@ -55,7 +58,7 @@ export default {
       position: relative;
       display: inline-block;
       background-color: $rpl-option-button-label-background-color;
-      color: $rpl-option-button-label-color;
+      color: $rpl-form-element-text-color;
       border: $rpl-option-button-label-border;
       padding: $rpl-space-2;
       min-width: rem(40px);
@@ -82,6 +85,15 @@ export default {
           text-decoration: none;
         }
       }
+
+      @include rpl-breakpoint('l') {
+        &:first-child {
+          border-radius: $rpl-form-element-border-radius 0 0 $rpl-form-element-border-radius;
+        }
+        &:last-child {
+          border-radius: 0 $rpl-form-element-border-radius $rpl-form-element-border-radius 0;
+        }
+      }
     }
 
     &__radio {

packages/components/Molecules/ListGroup/index.js

@@ -1,4 +1,7 @@
 import RplListGroup from './ListGroup.vue'
+import RplListGroupItem from './ListGroupItem.vue'
 
-export { RplListGroup }
-export default RplListGroup
+export default {
+  RplListGroup,
+  RplListGroupItem
+}