From b06b3f56e7fdcc59deb4bcbe63acacda93871b4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D0=B8=D0=BA=D1=82=D0=BE=D1=80=D0=B8=D1=8F=20=D0=93?=
 =?UTF-8?q?=D1=80=D0=B8=D0=B3=D0=BE=D1=80=D1=8C=D0=B5=D0=B2=D0=BD=D0=B0=20?=
 =?UTF-8?q?=D0=9A=D0=B0=D1=80=D0=BF=D0=BE=D0=B2=D0=B0?= <vkarpova@stsoft.ru>
Date: Thu, 23 Nov 2023 10:24:49 +0300
Subject: [PATCH] feat: Radio button element (refs #DH-898)

---
 package-lock.json                             | 28 +++++--
 package.json                                  |  1 +
 src/components/BuiRadio/BuiRadio.spec.ts      |  0
 src/components/BuiRadio/BuiRadio.story.vue    | 41 ++++++++++
 src/components/BuiRadio/BuiRadio.vue          | 76 +++++++++++++++++++
 .../svgComponents/ActiveRadioIcon.vue         | 18 +++++
 .../svgComponents/InactiveRadioIcon.vue       | 48 ++++++++++++
 src/components/BuiRadio/types.ts              |  0
 tailwind.config.ts                            |  2 +
 9 files changed, 209 insertions(+), 5 deletions(-)
 create mode 100644 src/components/BuiRadio/BuiRadio.spec.ts
 create mode 100644 src/components/BuiRadio/BuiRadio.story.vue
 create mode 100644 src/components/BuiRadio/BuiRadio.vue
 create mode 100644 src/components/BuiRadio/svgComponents/ActiveRadioIcon.vue
 create mode 100644 src/components/BuiRadio/svgComponents/InactiveRadioIcon.vue
 create mode 100644 src/components/BuiRadio/types.ts

diff --git a/package-lock.json b/package-lock.json
index b606ff1..5e96fef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@fontsource-variable/inter": "^5.0.15",
         "@vueuse/core": "^10.6.1",
+        "nanoid": "^5.0.3",
         "tailwind-merge": "^1.14.0",
         "unplugin-auto-import": "^0.16.7"
       },
@@ -12719,9 +12720,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.3.tgz",
+      "integrity": "sha512-I7X2b22cxA4LIHXPSqbBCEQSL+1wv8TuoefejsX4HFWyC6jc5JG7CEaxOltiKjc1M+YCS2YkrZZcj4+dytw9GA==",
       "funding": [
         {
           "type": "github",
@@ -12729,10 +12730,10 @@
         }
       ],
       "bin": {
-        "nanoid": "bin/nanoid.cjs"
+        "nanoid": "bin/nanoid.js"
       },
       "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+        "node": "^18 || >=20"
       }
     },
     "node_modules/natural-compare": {
@@ -13716,6 +13717,23 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/postcss/node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
diff --git a/package.json b/package.json
index 24f9147..f86c0e6 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
   "dependencies": {
     "@fontsource-variable/inter": "^5.0.15",
     "@vueuse/core": "^10.6.1",
+    "nanoid": "^5.0.3",
     "tailwind-merge": "^1.14.0",
     "unplugin-auto-import": "^0.16.7"
   },
diff --git a/src/components/BuiRadio/BuiRadio.spec.ts b/src/components/BuiRadio/BuiRadio.spec.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/BuiRadio/BuiRadio.story.vue b/src/components/BuiRadio/BuiRadio.story.vue
new file mode 100644
index 0000000..dbe3e1d
--- /dev/null
+++ b/src/components/BuiRadio/BuiRadio.story.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import BuiRadio  from './BuiRadio.vue'
+import {reactive, ref} from 'vue'
+
+const model = ref("1")
+
+</script>
+
+<template>
+  <Story title="BuiRadio" :layout="{ type: 'grid', width: '400px' }">
+    <Variant title="INFO">
+      {{`v-model value: ${model}`}}
+    </Variant>
+    <Variant title="Only radio">
+      <div class="p-2">
+        <BuiRadio option-value="1" v-model="model" />
+      </div>
+      <div class="p-2">
+        <BuiRadio option-value="1" v-model="model" />
+      </div>
+    </Variant>
+    <Variant title="Default">
+      <div class="p-2">
+        <BuiRadio option-value="1" v-model="model" >My Label <template #description>My description</template></BuiRadio>
+      </div>
+    </Variant>
+    <Variant title="Disabled">
+      <div class="p-2">
+        <BuiRadio :disabled="true" option-value="2" v-model="model" >My Label <template #description>My description</template></BuiRadio>
+      </div>
+    </Variant>
+    <Variant title="List">
+      <fieldset>
+        <div class="flex flex-col">
+          <BuiRadio groupName="options" option-value="1" v-model="model" >Option 1 </BuiRadio>
+          <BuiRadio  groupName="options" option-value="2" v-model="model">Option 2</BuiRadio>
+        </div>
+      </fieldset>
+    </Variant>
+  </Story>
+</template>
diff --git a/src/components/BuiRadio/BuiRadio.vue b/src/components/BuiRadio/BuiRadio.vue
new file mode 100644
index 0000000..92bc52f
--- /dev/null
+++ b/src/components/BuiRadio/BuiRadio.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { twJoin, twMerge } from 'tailwind-merge'
+import { computed } from 'vue'
+import InactiveRadioIcon from '@/components/BuiRadio/svgComponents/InactiveRadioIcon.vue'
+import ActiveRadioIcon from '@/components/BuiRadio/svgComponents/ActiveRadioIcon.vue'
+import { nanoid } from 'nanoid'
+
+interface IBuiRadioProps {
+  disabled?: boolean | undefined
+  groupName?: string
+  optionValue: string
+  value: string
+}
+const props = withDefaults(defineProps<IBuiRadioProps>(), {
+  disabled: false
+})
+
+const emit = defineEmits(['input'])
+const model = computed({
+  get() {
+    return props.value
+  },
+  set(event) {
+    emit('input', event)
+  }
+})
+
+const id = nanoid(10)
+
+const disabledAttrValue = computed(() => {
+  return Object.keys(props).includes('disabled') && props.disabled !== false ? true : undefined
+})
+
+const baseLabelClasses = 'font-semibold leading-6 text-sm hover:cursor-pointer'
+const disabledLabelClasses = 'hover:!cursor-default text-gray-400'
+
+const baseDescriptionClasses = 'font-normal leading-4 text-xs '
+const disabledDescriptionClasses = 'text-gray-400'
+
+const finalClasses = computed(() => {
+  return {
+    labelClasses: twMerge(baseLabelClasses, !!disabledAttrValue.value && disabledLabelClasses),
+    descriptionClasses: twMerge(
+      baseDescriptionClasses,
+      !!disabledAttrValue.value && disabledDescriptionClasses
+    )
+  }
+})
+</script>
+<template>
+  <div class="flex flex-row gap-2 group">
+    <div class="pt-1">
+      <input
+        :id="id"
+        v-model="model"
+        type="radio"
+        :name="props.groupName"
+        :value="props.optionValue"
+        class="peer hidden"
+        :disabled="disabledAttrValue"
+      />
+      <label :for="id" class="hidden peer-checked:!block">
+        <ActiveRadioIcon :disabled="disabledAttrValue" />
+      </label>
+      <label class="block peer-checked:!hidden" :for="id">
+        <InactiveRadioIcon :disabled="disabledAttrValue" />
+      </label>
+    </div>
+    <label class="flex-1 flex flex-col" :for="id">
+      <div v-if="$slots.default" :class="finalClasses.labelClasses"><slot></slot></div>
+      <div v-if="$slots.description" :class="finalClasses.descriptionClasses">
+        <slot name="description"></slot>
+      </div>
+    </label>
+  </div>
+</template>
diff --git a/src/components/BuiRadio/svgComponents/ActiveRadioIcon.vue b/src/components/BuiRadio/svgComponents/ActiveRadioIcon.vue
new file mode 100644
index 0000000..b993b1f
--- /dev/null
+++ b/src/components/BuiRadio/svgComponents/ActiveRadioIcon.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <rect x="2" y="2" width="12" height="12" rx="6" stroke-width="4" :class="rectClasses" />
+    />
+  </svg>
+</template>
+<script setup lang="ts">
+import { twMerge } from 'tailwind-merge'
+const props = withDefaults(defineProps<{ disabled: boolean }>(), {
+  disabled: false
+})
+
+const rectClasses = twMerge(
+  'cursor-pointer stroke-primary-500 group-hover:stroke-primary-550  fill-white group-hover:fill-slate-150',
+  props.disabled &&
+    'cursor-default group-hover:stroke-primary-500 group-hover:fill-transparent opacity-[0.32] fill-transparent'
+)
+</script>
diff --git a/src/components/BuiRadio/svgComponents/InactiveRadioIcon.vue b/src/components/BuiRadio/svgComponents/InactiveRadioIcon.vue
new file mode 100644
index 0000000..a89f46a
--- /dev/null
+++ b/src/components/BuiRadio/svgComponents/InactiveRadioIcon.vue
@@ -0,0 +1,48 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    class="group"
+  >
+    <rect x="0.5" y="0.5" width="15" height="15" rx="7.5" :class="rectClasses" />
+  </svg>
+</template>
+
+<style scoped>
+.bui-radiobutton:not(.disabled) {
+  fill-opacity: 0.16;
+  stroke-opacity: 1;
+}
+.group:hover .bui-radiobutton {
+  fill-opacity: 1;
+  stroke-opacity: 1;
+}
+.dark .group:hover .bui-radiobutton {
+  fill-opacity: 0.32;
+  stroke-opacity: 1;
+}
+
+.dark .bui-radiobutton.disabled {
+  fill-opacity: 0.16 !important;
+  stroke-opacity: 0.16 !important;
+}
+</style>
+
+<script setup lang="ts">
+import { twMerge } from 'tailwind-merge'
+
+const props = withDefaults(defineProps<{ disabled: boolean }>(), {
+  disabled: false
+})
+
+const rectClasses = twMerge(
+  'bui-radiobutton',
+  'dark:stroke-primary-500 dark:fill-primary-500  dark:group-hover:fill-primary-500 dark:group-hover:[.bui-radiobutton-hover]',
+  'cursor-pointer stroke-gray-300 fill-white group-hover:fill-gray-150',
+  props.disabled &&
+    'disabled cursor-default dark:fill-white dark:stroke-white dark:group-hover:fill-white fill-slate-200 group-hover:fill-slate-200'
+)
+</script>
diff --git a/src/components/BuiRadio/types.ts b/src/components/BuiRadio/types.ts
new file mode 100644
index 0000000..e69de29
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 80817f3..96de869 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -28,6 +28,8 @@ module.exports = {
           500: '#292841'
         },
         slate: {
+          150: '#F0F3FF',
+          200: '#EBECEF',
           300: '#D0D3DA'
         },
         gray: {