From 9b1197d03a254eefeafea37034d7e4e7e05392c7 Mon Sep 17 00:00:00 2001
From: ClemCornet <cornet.clement@gmail.com>
Date: Wed, 7 Jul 2021 12:12:01 +0200
Subject: [PATCH 1/3] feat(LcRadio): [ch5583] create LcRadio component

---
 src/components/LcForm.vue                     |  8 ++
 src/components/LcRadio/LcRadio.d.ts           |  3 +
 src/components/LcRadio/LcRadio.stories.ts     | 81 +++++++++++++++
 src/components/LcRadio/LcRadio.vue            | 99 +++++++++++++++++++
 src/components/LcRadio/LcRadioGroup.vue       | 90 +++++++++++++++++
 .../LcRadio/__tests__/LcRadio.spec.ts         | 58 +++++++++++
 .../LcRadio/__tests__/LcRadioGroup.spec.ts    | 74 ++++++++++++++
 src/components/LcRadio/index.ts               |  2 +
 src/stories/LcForm.stories.ts                 | 16 +++
 9 files changed, 431 insertions(+)
 create mode 100644 src/components/LcRadio/LcRadio.d.ts
 create mode 100644 src/components/LcRadio/LcRadio.stories.ts
 create mode 100644 src/components/LcRadio/LcRadio.vue
 create mode 100644 src/components/LcRadio/LcRadioGroup.vue
 create mode 100644 src/components/LcRadio/__tests__/LcRadio.spec.ts
 create mode 100644 src/components/LcRadio/__tests__/LcRadioGroup.spec.ts
 create mode 100644 src/components/LcRadio/index.ts

diff --git a/src/components/LcForm.vue b/src/components/LcForm.vue
index 191a7f2..9ec60ac 100644
--- a/src/components/LcForm.vue
+++ b/src/components/LcForm.vue
@@ -33,6 +33,12 @@
           v-model="field.model"
           v-bind="field.attr"
         />
+        <lc-radio-group
+          v-if="field.inputType === 'radio' && !field.hidden"
+          v-model="field.model"
+          :options="field.options || []"
+          v-bind="field.attr"
+        />
       </div>
 
       <slot name="before-submit-button" />
@@ -86,6 +92,7 @@ import LcMultiselect from './LcMultiselect/LcMultiselect.vue'
 import LcCheckbox from './LcCheckbox.vue'
 import LcInput from './LcInput.vue'
 import LcTextarea from './LcTextarea'
+import { LcRadioGroup } from './LcRadio'
 
 configure({
   generateMessage: localize({
@@ -108,6 +115,7 @@ export default defineComponent({
     LcInput,
     LcMultiselect,
     LcTextarea,
+    LcRadioGroup,
     vForm,
   },
   props: {
diff --git a/src/components/LcRadio/LcRadio.d.ts b/src/components/LcRadio/LcRadio.d.ts
new file mode 100644
index 0000000..dd6e676
--- /dev/null
+++ b/src/components/LcRadio/LcRadio.d.ts
@@ -0,0 +1,3 @@
+import { DefineComponent } from 'vue'
+const component: DefineComponent<{}, {}, any>
+export default component
diff --git a/src/components/LcRadio/LcRadio.stories.ts b/src/components/LcRadio/LcRadio.stories.ts
new file mode 100644
index 0000000..8b1af9c
--- /dev/null
+++ b/src/components/LcRadio/LcRadio.stories.ts
@@ -0,0 +1,81 @@
+import LcRadio from './LcRadio.vue'
+import LcRadioGroup from './LcRadioGroup.vue'
+
+export default {
+  title: 'Example/LcRadio',
+  component: LcRadioGroup,
+  subcomponents: { LcRadio },
+}
+
+const Template = (args: any) => ({
+  components: { LcRadioGroup, LcRadio },
+  setup() {
+    return { args }
+  },
+  template: `
+  <lc-radio-group v-model="args.modelValue" v-bind="args">
+    <lc-radio v-model="args.modelValue" />
+    <lc-radio v-model="args.modelValue" />
+    <lc-radio v-model="args.modelValue" />
+  </lc-radio-group>`,
+})
+
+export const Base = Template.bind({}) as any
+Base.args = {
+  modelValue: '',
+  name: 'civility',
+  options: [
+    {
+      label: 'Monsieur',
+      value: 'mr',
+    },
+    {
+      label: 'Madame',
+      value: 'ms',
+    },
+    {
+      label: 'Non binaire',
+      value: 'unknown',
+    },
+  ],
+}
+
+export const WithLabel = Template.bind({}) as any
+WithLabel.args = {
+  ...Base.args,
+  label: 'Choisir votre civilité :',
+}
+
+export const Vertical = Template.bind({}) as any
+Vertical.args = {
+  ...Base.args,
+  vertical: true,
+}
+
+export const VerticalWithLabel = Template.bind({}) as any
+VerticalWithLabel.args = {
+  ...Base.args,
+  label: 'Choisir votre civilité :',
+  vertical: true,
+}
+
+export const Disabled = Template.bind({}) as any
+Disabled.args = {
+  ...Base.args,
+  label: 'Choisir votre civilité :',
+  options: [
+    {
+      label: 'Monsieur',
+      value: 'mr',
+      disabled: true,
+    },
+    {
+      label: 'Madame',
+      value: 'ms',
+    },
+    {
+      label: 'Non binaire',
+      value: 'unknown',
+    },
+  ],
+}
diff --git a/src/components/LcRadio/LcRadio.vue b/src/components/LcRadio/LcRadio.vue
new file mode 100644
index 0000000..b422c8c
--- /dev/null
+++ b/src/components/LcRadio/LcRadio.vue
@@ -0,0 +1,99 @@
+<template>
+  <label
+    :class="[
+      'label',
+      disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+      vertical ? 'mb-2' : 'mr-4',
+      {'text-gray-500': disabled },
+    ]
+    "
+    :for="value"
+  >
+    <input
+      :id="value"
+      :checked="modelValue === value"
+      :disabled="disabled"
+      :name="name"
+      :value="value"
+      type="radio"
+      v-bind="$attrs"
+      @change="onChange"
+    >
+    <span class="radio" />
+    {{ label }}
+  </label>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'LcRadio',
+  inheritAttrs: false,
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: [Number, String],
+      default: '',
+    },
+    value: {
+      type: [Number, String],
+      required: true,
+    },
+    vertical: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  emits: ['update:modelValue'],
+  setup(_, { emit }) {
+    function onChange(event: Event & { target: HTMLInputElement }): void {
+      emit('update:modelValue', event.target.value)
+    }
+
+    return {
+      onChange,
+    }
+  },
+})
+</script>
+<style scoped>
+.label {
+  @apply inline-flex justify-start items-center mr-4;
+}
+
+input[type="radio"] {
+  @apply appearance-none cursor-pointer mr-2 border border-gray-400 rounded-full checked:bg-primary-500 checked:border-primary-500 w-6 h-6 md:w-4 md:h-4;
+}
+
+input[type="radio"]:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
+  border-color: transparent;
+  background-size: 120% 120%;
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+
+input[type="radio"]:hover:not(:checked) {
+  @apply bg-gray-200;
+}
+
+input[type="radio"]:disabled {
+  @apply bg-gray-300 cursor-not-allowed;
+}
+
+input[type="radio"]:hover:disabled {
+  @apply bg-gray-300;
+}
+</style>
diff --git a/src/components/LcRadio/LcRadioGroup.vue b/src/components/LcRadio/LcRadioGroup.vue
new file mode 100644
index 0000000..1f3972e
--- /dev/null
+++ b/src/components/LcRadio/LcRadioGroup.vue
@@ -0,0 +1,90 @@
+<template>
+  <div :class="wrapperClass">
+    <label v-if="label" class="mb-2">
+      {{ label }}
+    </label>
+    <div :class="['flex', { 'flex-col': vertical }]">
+      <lc-radio
+        v-for="option in options"
+        :key="option.value"
+        :model-value="inputValue"
+        :name="name"
+        :vertical="vertical"
+        v-bind="{...option}"
+        @update:modelValue="onChange"
+      />
+    </div>
+    <error-message :name="name" as="span" class="lc-radio--error" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { ErrorMessage, useField } from 'vee-validate'
+import LcRadio from './LcRadio.vue'
+
+interface Option {
+  disabled?: boolean
+  label: string
+  value: string|number
+}
+
+export default defineComponent({
+  name: 'LcRadioGroup',
+  components: { LcRadio, ErrorMessage },
+  props: {
+    rules: {
+      type: String,
+      default: '',
+    },
+    options: {
+      type: Array as PropType<Option[]>,
+      required: true,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    modelValue: {
+      type: [String, Number],
+      required: true,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    vertical: {
+      type: Boolean,
+      default: false,
+    },
+    wrapperClass: {
+      type: String,
+      default: 'w-full flex flex-col mb-4',
+    },
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const {
+      value: inputValue,
+      handleChange,
+    } = useField<number|string>(props.name, props.rules, {
+      initialValue: props.modelValue,
+    })
+
+    function onChange(payload: string): void {
+      handleChange(payload)
+      emit('update:modelValue', payload)
+    }
+
+    return {
+      onChange,
+      inputValue,
+    }
+  },
+})
+</script>
+<style scoped>
+.lc-radio--error {
+  @apply text-sm text-error mt-1;
+}
+</style>
diff --git a/src/components/LcRadio/__tests__/LcRadio.spec.ts b/src/components/LcRadio/__tests__/LcRadio.spec.ts
new file mode 100644
index 0000000..b74fb1b
--- /dev/null
+++ b/src/components/LcRadio/__tests__/LcRadio.spec.ts
@@ -0,0 +1,58 @@
+import { mount } from '@vue/test-utils'
+import { LcRadio } from '../index'
+
+let wrapper: any
+
+beforeEach(() => {
+  wrapper = mount(LcRadio, {
+    props: {
+      name: 'civility',
+      value: 'mr',
+      vertical: false,
+    },
+  })
+})
+
+afterEach(() => {
+  wrapper?.unmount()
+})
+
+describe('LcRadio', () => {
+  it('is a Vue instance', () => {
+    expect(wrapper.vm).toBeTruthy()
+  })
+
+  describe('input behaviour', () => {
+    it('should emit the event', () => {
+      const radioButton = wrapper.find('input[type="radio"]')
+      radioButton.trigger('change')
+
+      expect(wrapper.emitted()).toHaveProperty('update:modelValue')
+    })
+
+    it('should emit the right value', () => {
+      const radioButton = wrapper.find('input[type="radio"]')
+      radioButton.trigger('change')
+
+      const changeEvent = wrapper.emitted('update:modelValue')
+
+      expect(changeEvent[0]).toEqual(['mr'])
+    })
+
+    it('should disabled the radio button', async() => {
+      await wrapper.setProps({ disabled: true })
+      const radioButton = wrapper.find('input[type="radio"]')
+
+      expect(radioButton.attributes()).toHaveProperty('disabled')
+    })
+  })
+
+  describe('input style', () => {
+    it('should set style for vertical layout', async() => {
+      await wrapper.setProps({ vertical: true })
+      const label = wrapper.find('label')
+
+      expect(label.classes()).toContain('mb-2')
+    })
+  })
+})
diff --git a/src/components/LcRadio/__tests__/LcRadioGroup.spec.ts b/src/components/LcRadio/__tests__/LcRadioGroup.spec.ts
new file mode 100644
index 0000000..abf9da2
--- /dev/null
+++ b/src/components/LcRadio/__tests__/LcRadioGroup.spec.ts
@@ -0,0 +1,74 @@
+import { mount } from '@vue/test-utils'
+import { LcRadioGroup, LcRadio } from '../index'
+
+let wrapper: any
+
+beforeEach(() => {
+  wrapper = mount(LcRadioGroup, {
+    props: {
+      options: [
+        { label: 'Monsieur', value: 'mr' },
+        { label: 'Madame', value: 'ms' },
+        { label: 'Non spécifié', value: 'unspecified' },
+      ],
+      name: 'civility',
+      modelValue: '',
+    },
+    global: {
+      components: { LcRadio },
+    },
+  })
+})
+
+afterEach(() => {
+  wrapper?.unmount()
+})
+
+describe('LcRadioGroup', () => {
+  it('is a Vue instance', () => {
+    expect(wrapper.vm).toBeTruthy()
+  })
+
+  describe('input behaviour', () => {
+    it('should render good number of radio-buttons', () => {
+      const radiosButtons = wrapper.findAll('input[type="radio"]')
+
+      expect(radiosButtons).toHaveLength(3)
+    })
+
+    it('should set good name attribute', () => {
+      const radiosButtons = wrapper.findAll('input[type="radio"]')
+
+      expect(radiosButtons[1].attributes('value')).toEqual('ms')
+    })
+
+    it('should set good value attributes', () => {
+      const radiosButtons = wrapper.findAll('input[type="radio"]')
+
+      expect(radiosButtons[1].attributes('value')).toEqual('ms')
+    })
+
+    it('should emit the event', () => {
+      const radioButton = wrapper.find('input[type="radio"]')
+      radioButton.trigger('change')
+
+      expect(wrapper.emitted()).toHaveProperty('update:modelValue')
+    })
+  })
+
+  describe('input layout', () => {
+    it('it should render the right label', async() => {
+      await wrapper.setProps({ label: 'Your civility :' })
+
+      const label = wrapper.find('label')
+      expect(label.text()).toEqual('Your civility :')
+    })
+
+    it('it should render vertical layout', async() => {
+      await wrapper.setProps({ vertical: true })
+
+      const wrapperBtn = wrapper.findAll('div')[1]
+      expect(wrapperBtn.classes()).toContain('flex-col')
+    })
+  })
+})
diff --git a/src/components/LcRadio/index.ts b/src/components/LcRadio/index.ts
new file mode 100644
index 0000000..2a78255
--- /dev/null
+++ b/src/components/LcRadio/index.ts
@@ -0,0 +1,2 @@
+export { default as LcRadio } from './LcRadio.vue'
+export { default as LcRadioGroup } from './LcRadioGroup.vue'
diff --git a/src/stories/LcForm.stories.ts b/src/stories/LcForm.stories.ts
index 2e0a8e4..ff2b2ce 100644
--- a/src/stories/LcForm.stories.ts
+++ b/src/stories/LcForm.stories.ts
@@ -72,11 +72,27 @@ Base.args = {
       model: false,
       inputType: 'checkbox',
       attr: {
+        class: 'mb-4',
         label: 'Je souhaite recevoir occasionnellement une sélection d’expériences et de maisons.',
         name: 'newsletter',
         rules: 'required',
       },
     },
+    {
+      model: '',
+      inputType: 'radio',
+      attr: {
+        label: 'Votre civilité :',
+        name: 'civility',
+        rules: 'required',
+        vertical: false,
+      },
+      options: [
+        { label: 'Monsieur', value: 'mr' },
+        { label: 'Madame', value: 'ms' },
+        { label: 'Non spécifié', value: 'unspecified' },
+      ],
+    },
     {
       model: null,
       inputType: 'select',

From 64955fd2873a5149398539940bf389d100fc3225 Mon Sep 17 00:00:00 2001
From: ClemCornet <cornet.clement@gmail.com>
Date: Mon, 12 Jul 2021 13:28:30 +0200
Subject: [PATCH 2/3] feat(LcRadio): [ch5583] feedbacks: use css class, fix
 unit test & add storie

---
 README.md                                     |  1 +
 src/components/LcRadio/LcRadio.stories.ts     | 64 +++------------
 src/components/LcRadio/LcRadio.vue            | 38 +++++----
 .../LcRadio/LcRadioGroup.stories.ts           | 78 +++++++++++++++++++
 src/components/LcRadio/LcRadioGroup.vue       | 20 ++++-
 .../LcRadio/__tests__/LcRadio.spec.ts         | 14 ++--
 .../LcRadio/__tests__/LcRadioGroup.spec.ts    | 34 ++++----
 src/library.ts                                |  3 +
 8 files changed, 155 insertions(+), 97 deletions(-)
 create mode 100644 src/components/LcRadio/LcRadioGroup.stories.ts

diff --git a/README.md b/README.md
index 87c83b9..e329c20 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,7 @@ This repo provides a basic setup for developing component libraries in Vite with
 - [x] LcInput
 - [x] LcModal
 - [x] LcPagination
+- [x] LcRadioGroup & LcRadio
 - [x] LcTable
 - [x] LcTooltip
 
diff --git a/src/components/LcRadio/LcRadio.stories.ts b/src/components/LcRadio/LcRadio.stories.ts
index 8b1af9c..ca789bc 100644
--- a/src/components/LcRadio/LcRadio.stories.ts
+++ b/src/components/LcRadio/LcRadio.stories.ts
@@ -1,81 +1,37 @@
+// import { action } from '@storybook/addon-actions'
+
 import LcRadio from './LcRadio.vue'
-import LcRadioGroup from './LcRadioGroup.vue'
 
 export default {
   title: 'Example/LcRadio',
-  component: LcRadioGroup,
-  subcomponents: { LcRadio },
+  component: LcRadio,
 }
 
 const Template = (args: any) => ({
-  components: { LcRadioGroup, LcRadio },
+  components: { LcRadio },
   setup() {
     return { args }
   },
-  template: `
-  <lc-radio-group v-model="args.modelValue" v-bind="args">
-    <lc-radio v-model="args.modelValue" />
-    <lc-radio v-model="args.modelValue" />
-    <lc-radio v-model="args.modelValue" />
-  </lc-radio-group>`,
+  template: '<lc-radio v-bind="args" />',
 })
 
 export const Base = Template.bind({}) as any
 Base.args = {
   modelValue: '',
   name: 'civility',
-  options: [
-    {
-      label: 'Monsieur',
-      value: 'mr',
-    },
-    {
-      label: 'Madame',
-      value: 'ms',
-    },
-    {
-      label: 'Non binaire',
-      value: 'unknown',
-    },
-  ],
+  value: 'mr',
+  vertical: false,
 }
 
 export const WithLabel = Template.bind({}) as any
 WithLabel.args = {
   ...Base.args,
-  label: 'Choisir votre civilité :',
-}
-
-export const Vertical = Template.bind({}) as any
-Vertical.args = {
-  ...Base.args,
-  vertical: true,
-}
-
-export const VerticalWithLabel = Template.bind({}) as any
-VerticalWithLabel.args = {
-  ...Base.args,
-  label: 'Choisir votre civilité :',
-  vertical: true,
+  label: 'Monsieur',
 }
 
 export const Disabled = Template.bind({}) as any
 Disabled.args = {
   ...Base.args,
-  label: 'Choisir votre civilité :',
-  options: [
-    {
-      label: 'Monsieur',
-      value: 'mr',
-      disabled: true,
-    },
-    {
-      label: 'Madame',
-      value: 'ms',
-    },
-    {
-      label: 'Non binaire',
-      value: 'unknown',
-    },
-  ],
+  label: 'Monsieur',
+  disabled: true,
 }
diff --git a/src/components/LcRadio/LcRadio.vue b/src/components/LcRadio/LcRadio.vue
index b422c8c..3187243 100644
--- a/src/components/LcRadio/LcRadio.vue
+++ b/src/components/LcRadio/LcRadio.vue
@@ -1,10 +1,9 @@
 <template>
   <label
     :class="[
-      'label',
-      disabled ? 'cursor-not-allowed' : 'cursor-pointer',
-      vertical ? 'mb-2' : 'mr-4',
-      {'text-gray-500': disabled },
+      'lc-radio-label',
+      {'lc-radio-label--disabled': disabled },
+      {'lc-radio-label--vertical': vertical },
     ]
     "
     :for="value"
@@ -15,6 +14,7 @@
       :disabled="disabled"
       :name="name"
       :value="value"
+      class="lc-radio"
       type="radio"
       v-bind="$attrs"
       @change="onChange"
@@ -35,10 +35,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    name: {
-      type: String,
-      required: true,
-    },
     label: {
       type: String,
       default: '',
@@ -47,6 +43,10 @@ export default defineComponent({
       type: [Number, String],
       default: '',
     },
+    name: {
+      type: String,
+      required: true,
+    },
     value: {
       type: [Number, String],
       required: true,
@@ -69,15 +69,23 @@ export default defineComponent({
 })
 </script>
 <style scoped>
-.label {
-  @apply inline-flex justify-start items-center mr-4;
+.lc-radio-label {
+  @apply inline-flex justify-start items-center mr-4 cursor-pointer;
+}
+
+.lc-radio-label--disabled {
+  @apply text-gray-500 cursor-not-allowed;
+}
+
+.lc-radio-label--vertical {
+  @apply mb-2 mr-0
 }
 
-input[type="radio"] {
+.lc-radio {
   @apply appearance-none cursor-pointer mr-2 border border-gray-400 rounded-full checked:bg-primary-500 checked:border-primary-500 w-6 h-6 md:w-4 md:h-4;
 }
 
-input[type="radio"]:checked {
+.lc-radio:checked {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
   border-color: transparent;
   background-size: 120% 120%;
@@ -85,15 +93,15 @@ input[type="radio"]:checked {
   background-repeat: no-repeat;
 }
 
-input[type="radio"]:hover:not(:checked) {
+.lc-radio:hover:not(:checked) {
   @apply bg-gray-200;
 }
 
-input[type="radio"]:disabled {
+.lc-radio:disabled {
   @apply bg-gray-300 cursor-not-allowed;
 }
 
-input[type="radio"]:hover:disabled {
+.lc-radio:hover:disabled {
   @apply bg-gray-300;
 }
 </style>
diff --git a/src/components/LcRadio/LcRadioGroup.stories.ts b/src/components/LcRadio/LcRadioGroup.stories.ts
new file mode 100644
index 0000000..e56796d
--- /dev/null
+++ b/src/components/LcRadio/LcRadioGroup.stories.ts
@@ -0,0 +1,78 @@
+// import { action } from '@storybook/addon-actions'
+
+import LcRadio from './LcRadio.vue'
+import LcRadioGroup from './LcRadioGroup.vue'
+
+export default {
+  title: 'Example/LcRadioGroup',
+  component: LcRadioGroup,
+  subcomponents: { LcRadio },
+}
+
+const Template = (args: any) => ({
+  components: { LcRadioGroup, LcRadio },
+  setup() {
+    return { args }
+  },
+  template: '<lc-radio-group v-bind="args" />',
+})
+
+export const Base = Template.bind({}) as any
+Base.args = {
+  modelValue: '',
+  name: 'civility',
+  options: [
+    {
+      label: 'Monsieur',
+      value: 'mr',
+    },
+    {
+      label: 'Madame',
+      value: 'ms',
+    },
+    {
+      label: 'Non binaire',
+      value: 'unknown',
+    },
+  ],
+}
+
+export const WithLabel = Template.bind({}) as any
+WithLabel.args = {
+  ...Base.args,
+  label: 'Choisir votre civilité :',
+}
+
+export const Vertical = Template.bind({}) as any
+Vertical.args = {
+  ...Base.args,
+  vertical: true,
+}
+
+export const VerticalWithLabel = Template.bind({}) as any
+VerticalWithLabel.args = {
+  ...Base.args,
+  label: 'Choisir votre civilité :',
+  vertical: true,
+}
+
+export const Disabled = Template.bind({}) as any
+Disabled.args = {
+  ...Base.args,
+  label: 'Choisir votre civilité :',
+  options: [
+    {
+      label: 'Monsieur',
+      value: 'mr',
+      disabled: true,
+    },
+    {
+      label: 'Madame',
+      value: 'ms',
+    },
+    {
+      label: 'Non binaire',
+      value: 'unknown',
+    },
+  ],
+}
diff --git a/src/components/LcRadio/LcRadioGroup.vue b/src/components/LcRadio/LcRadioGroup.vue
index 1f3972e..38f4938 100644
--- a/src/components/LcRadio/LcRadioGroup.vue
+++ b/src/components/LcRadio/LcRadioGroup.vue
@@ -1,9 +1,9 @@
 <template>
   <div :class="wrapperClass">
-    <label v-if="label" class="mb-2">
+    <label v-if="label" class="lc-radiogroup-label">
       {{ label }}
     </label>
-    <div :class="['flex', { 'flex-col': vertical }]">
+    <div :class="['lc-radiogroup-layout', {'lc-radiogroup-layout--vertical': vertical }]">
       <lc-radio
         v-for="option in options"
         :key="option.value"
@@ -14,7 +14,7 @@
         @update:modelValue="onChange"
       />
     </div>
-    <error-message :name="name" as="span" class="lc-radio--error" />
+    <error-message :name="name" as="span" class="lc-radiogroup--error" />
   </div>
 </template>
 
@@ -84,7 +84,19 @@ export default defineComponent({
 })
 </script>
 <style scoped>
-.lc-radio--error {
+.lc-radiogroup-label {
+  @apply mb-2
+}
+
+.lc-radiogroup-layout {
+  @apply flex
+}
+
+.lc-radiogroup-layout--vertical {
+  @apply flex-col
+}
+
+.lc-radiogroup--error {
   @apply text-sm text-error mt-1;
 }
 </style>
diff --git a/src/components/LcRadio/__tests__/LcRadio.spec.ts b/src/components/LcRadio/__tests__/LcRadio.spec.ts
index b74fb1b..60a2217 100644
--- a/src/components/LcRadio/__tests__/LcRadio.spec.ts
+++ b/src/components/LcRadio/__tests__/LcRadio.spec.ts
@@ -22,16 +22,16 @@ describe('LcRadio', () => {
     expect(wrapper.vm).toBeTruthy()
   })
 
-  describe('input behaviour', () => {
+  describe('Input behaviour', () => {
     it('should emit the event', () => {
-      const radioButton = wrapper.find('input[type="radio"]')
+      const radioButton = wrapper.find('.lc-radio')
       radioButton.trigger('change')
 
       expect(wrapper.emitted()).toHaveProperty('update:modelValue')
     })
 
     it('should emit the right value', () => {
-      const radioButton = wrapper.find('input[type="radio"]')
+      const radioButton = wrapper.find('.lc-radio')
       radioButton.trigger('change')
 
       const changeEvent = wrapper.emitted('update:modelValue')
@@ -41,18 +41,18 @@ describe('LcRadio', () => {
 
     it('should disabled the radio button', async() => {
       await wrapper.setProps({ disabled: true })
-      const radioButton = wrapper.find('input[type="radio"]')
+      const radioButton = wrapper.find('.lc-radio')
 
       expect(radioButton.attributes()).toHaveProperty('disabled')
     })
   })
 
-  describe('input style', () => {
+  describe('Input style', () => {
     it('should set style for vertical layout', async() => {
       await wrapper.setProps({ vertical: true })
-      const label = wrapper.find('label')
+      const label = wrapper.find('.lc-radio-label')
 
-      expect(label.classes()).toContain('mb-2')
+      expect(label.classes()).toContain('lc-radio-label--vertical')
     })
   })
 })
diff --git a/src/components/LcRadio/__tests__/LcRadioGroup.spec.ts b/src/components/LcRadio/__tests__/LcRadioGroup.spec.ts
index abf9da2..aaa27a5 100644
--- a/src/components/LcRadio/__tests__/LcRadioGroup.spec.ts
+++ b/src/components/LcRadio/__tests__/LcRadioGroup.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { LcRadioGroup, LcRadio } from '../index'
+import { LcRadioGroup } from '../index'
 
 let wrapper: any
 
@@ -14,9 +14,6 @@ beforeEach(() => {
       name: 'civility',
       modelValue: '',
     },
-    global: {
-      components: { LcRadio },
-    },
   })
 })
 
@@ -29,46 +26,49 @@ describe('LcRadioGroup', () => {
     expect(wrapper.vm).toBeTruthy()
   })
 
-  describe('input behaviour', () => {
+  describe('Input behaviour', () => {
     it('should render good number of radio-buttons', () => {
-      const radiosButtons = wrapper.findAll('input[type="radio"]')
+      const radiosButtons = wrapper.findAll('.lc-radio')
 
       expect(radiosButtons).toHaveLength(3)
     })
 
     it('should set good name attribute', () => {
-      const radiosButtons = wrapper.findAll('input[type="radio"]')
+      const radiosButtons = wrapper.findAll('.lc-radio')
 
       expect(radiosButtons[1].attributes('value')).toEqual('ms')
     })
 
-    it('should set good value attributes', () => {
-      const radiosButtons = wrapper.findAll('input[type="radio"]')
+    it('should emit the event', () => {
+      const radioButton = wrapper.find('.lc-radio')
+      radioButton.trigger('change')
 
-      expect(radiosButtons[1].attributes('value')).toEqual('ms')
+      expect(wrapper.emitted()).toHaveProperty('update:modelValue')
     })
 
-    it('should emit the event', () => {
-      const radioButton = wrapper.find('input[type="radio"]')
+    it('should emit the right value', () => {
+      const radioButton = wrapper.find('.lc-radio')
       radioButton.trigger('change')
 
-      expect(wrapper.emitted()).toHaveProperty('update:modelValue')
+      const changeEvent = wrapper.emitted('update:modelValue')
+
+      expect(changeEvent[0]).toEqual(['mr'])
     })
   })
 
-  describe('input layout', () => {
+  describe('Input layout', () => {
     it('it should render the right label', async() => {
       await wrapper.setProps({ label: 'Your civility :' })
 
-      const label = wrapper.find('label')
+      const label = wrapper.find('.lc-radiogroup-label')
       expect(label.text()).toEqual('Your civility :')
     })
 
     it('it should render vertical layout', async() => {
       await wrapper.setProps({ vertical: true })
 
-      const wrapperBtn = wrapper.findAll('div')[1]
-      expect(wrapperBtn.classes()).toContain('flex-col')
+      const wrapperBtn = wrapper.find('.lc-radiogroup-layout')
+      expect(wrapperBtn.classes()).toContain('lc-radiogroup-layout--vertical')
     })
   })
 })
diff --git a/src/library.ts b/src/library.ts
index 618093f..501fe4d 100644
--- a/src/library.ts
+++ b/src/library.ts
@@ -6,6 +6,7 @@ import LcInput from './components/LcInput.vue'
 import LcModal from './components/LcModal.vue'
 import LcMultiselect from './components/LcMultiselect'
 import LcPagination from './components/LcPagination.vue'
+import { LcRadio, LcRadioGroup } from './components/LcRadio'
 import LcTable from './components/LcTable.vue'
 import LcTextarea from './components/LcTextarea'
 import LcTooltip from './components/LcTooltip.vue'
@@ -19,6 +20,8 @@ export {
   LcModal,
   LcMultiselect,
   LcPagination,
+  LcRadio,
+  LcRadioGroup,
   LcTable,
   LcTextarea,
   LcTooltip,

From 9b79c4a3bdbf446caf11678a771ad75e5a31c96f Mon Sep 17 00:00:00 2001
From: ClemCornet <cornet.clement@gmail.com>
Date: Mon, 12 Jul 2021 14:41:47 +0200
Subject: [PATCH 3/3] feat(LcRadio): [ch5583] feedbacks: add actions into
 stories

---
 src/components/LcRadio/LcRadio.stories.ts      | 15 ++++++---------
 src/components/LcRadio/LcRadio.vue             |  2 +-
 src/components/LcRadio/LcRadioGroup.stories.ts | 13 +++++++------
 src/components/LcRadio/LcRadioGroup.vue        |  6 +++---
 4 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/components/LcRadio/LcRadio.stories.ts b/src/components/LcRadio/LcRadio.stories.ts
index ca789bc..d8314dd 100644
--- a/src/components/LcRadio/LcRadio.stories.ts
+++ b/src/components/LcRadio/LcRadio.stories.ts
@@ -1,4 +1,4 @@
-// import { action } from '@storybook/addon-actions'
+import { action } from '@storybook/addon-actions'
 
 import LcRadio from './LcRadio.vue'
 
@@ -12,26 +12,23 @@ const Template = (args: any) => ({
   setup() {
     return { args }
   },
-  template: '<lc-radio v-bind="args" />',
+  template: '<lc-radio v-bind="args" @update:modelValue="onChange" />',
+  methods: {
+    onChange: action('onChange'),
+  },
 })
 
 export const Base = Template.bind({}) as any
 Base.args = {
+  label: 'Monsieur',
   modelValue: '',
   name: 'civility',
   value: 'mr',
   vertical: false,
 }
 
-export const WithLabel = Template.bind({}) as any
-WithLabel.args = {
-  ...Base.args,
-  label: 'Monsieur',
-}
-
 export const Disabled = Template.bind({}) as any
 Disabled.args = {
   ...Base.args,
-  label: 'Monsieur',
   disabled: true,
 }
diff --git a/src/components/LcRadio/LcRadio.vue b/src/components/LcRadio/LcRadio.vue
index 3187243..8aeeb93 100644
--- a/src/components/LcRadio/LcRadio.vue
+++ b/src/components/LcRadio/LcRadio.vue
@@ -78,7 +78,7 @@ export default defineComponent({
 }
 
 .lc-radio-label--vertical {
-  @apply mb-2 mr-0
+  @apply mb-2 mr-0;
 }
 
 .lc-radio {
diff --git a/src/components/LcRadio/LcRadioGroup.stories.ts b/src/components/LcRadio/LcRadioGroup.stories.ts
index e56796d..0f8b963 100644
--- a/src/components/LcRadio/LcRadioGroup.stories.ts
+++ b/src/components/LcRadio/LcRadioGroup.stories.ts
@@ -1,4 +1,4 @@
-// import { action } from '@storybook/addon-actions'
+import { action } from '@storybook/addon-actions'
 
 import LcRadio from './LcRadio.vue'
 import LcRadioGroup from './LcRadioGroup.vue'
@@ -14,7 +14,10 @@ const Template = (args: any) => ({
   setup() {
     return { args }
   },
-  template: '<lc-radio-group v-bind="args" />',
+  template: '<lc-radio-group v-bind="args" @update:modelValue="onChange" />',
+  methods: {
+    onChange: action('onChange'),
+  },
 })
 
 export const Base = Template.bind({}) as any
@@ -51,15 +54,13 @@ Vertical.args = {
 
 export const VerticalWithLabel = Template.bind({}) as any
 VerticalWithLabel.args = {
-  ...Base.args,
-  label: 'Choisir votre civilité :',
+  ...WithLabel.args,
   vertical: true,
 }
 
 export const Disabled = Template.bind({}) as any
 Disabled.args = {
-  ...Base.args,
-  label: 'Choisir votre civilité :',
+  ...WithLabel.args,
   options: [
     {
       label: 'Monsieur',
diff --git a/src/components/LcRadio/LcRadioGroup.vue b/src/components/LcRadio/LcRadioGroup.vue
index 38f4938..46eb8e3 100644
--- a/src/components/LcRadio/LcRadioGroup.vue
+++ b/src/components/LcRadio/LcRadioGroup.vue
@@ -85,15 +85,15 @@ export default defineComponent({
 </script>
 <style scoped>
 .lc-radiogroup-label {
-  @apply mb-2
+  @apply mb-2;
 }
 
 .lc-radiogroup-layout {
-  @apply flex
+  @apply flex;
 }
 
 .lc-radiogroup-layout--vertical {
-  @apply flex-col
+  @apply flex-col;
 }
 
 .lc-radiogroup--error {