From e061d2643c389b242de9bf88b9a5605c972618e6 Mon Sep 17 00:00:00 2001
From: joffrey <joffrey.berrier@gmail.com>
Date: Fri, 28 May 2021 16:51:44 +0200
Subject: [PATCH] create LcTooltip + LcButton with LcIcon

---
 README.md                        |   1 +
 package.json                     |   4 +-
 src/components/LcButton.vue      |  69 +++++++++-
 src/components/LcCheckbox.vue    |   6 +-
 src/components/LcTooltip.d.ts    |   3 +
 src/components/LcTooltip.vue     | 213 +++++++++++++++++++++++++++++++
 src/main.ts                      |   2 +
 src/stories/LcButton.stories.ts  |  30 ++++-
 src/stories/LcTooltip.stories.ts |  47 +++++++
 src/validators/LcButton.ts       |  11 +-
 src/validators/LcTooltip.ts      |   5 +
 tailwind.config.js               |   6 +-
 12 files changed, 379 insertions(+), 18 deletions(-)
 create mode 100644 src/components/LcTooltip.d.ts
 create mode 100644 src/components/LcTooltip.vue
 create mode 100644 src/stories/LcTooltip.stories.ts
 create mode 100644 src/validators/LcTooltip.ts

diff --git a/README.md b/README.md
index 9616954..87c83b9 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,7 @@ This repo provides a basic setup for developing component libraries in Vite with
 - [x] LcModal
 - [x] LcPagination
 - [x] LcTable
+- [x] LcTooltip
 
 ## Commands
 ```bash
diff --git a/package.json b/package.json
index 89cecb4..851b23f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lc-component-library",
-  "version": "1.2.8",
+  "version": "1.3.0",
   "license": "MIT",
   "files": [
     "dist"
@@ -9,7 +9,7 @@
   "module": "./dist/lc-component-library.es.js",
   "types": "./dist/main.d.ts",
   "scripts": {
-    "build": "node build/exports.js && vite build && tsc --emitDeclarationOnly",
+    "build": "vite build",
     "storybook": "start-storybook -p 6006",
     "dev": "vite",
     "build-storybook": "build-storybook"
diff --git a/src/components/LcButton.vue b/src/components/LcButton.vue
index 69af295..3c2faa5 100644
--- a/src/components/LcButton.vue
+++ b/src/components/LcButton.vue
@@ -13,6 +13,7 @@
     >
       <i class="lc-btn-loader__spin" />
     </span>
+
     <slot />
   </component>
 </template>
@@ -107,18 +108,40 @@ export default defineComponent({
           grey: 'lc-outline--grey',
           disabled: 'lc-outline--disabled',
         },
+        icon: {
+          primary: 'lc-icon--primary',
+          secondary: 'lc-icon--secondary',
+          red: 'lc-icon--red',
+        },
       },
       btnSizes: {
-        xs: 'lc-btn--xs',
-        sm: 'lc-btn--sm',
-        md: 'lc-btn--md',
-        lg: 'lc-btn--lg',
-        xl: 'lc-btn--xl',
+        btn: {
+          xs: 'lc-btn--xs',
+          sm: 'lc-btn--sm',
+          md: 'lc-btn--md',
+          lg: 'lc-btn--lg',
+          xl: 'lc-btn--xl',
+        },
+        outline: {
+          xs: 'lc-btn--xs',
+          sm: 'lc-btn--sm',
+          md: 'lc-btn--md',
+          lg: 'lc-btn--lg',
+          xl: 'lc-btn--xl',
+        },
+        icon: {
+          xs: 'lc-icon--xs',
+          sm: 'lc-icon--sm',
+          md: 'lc-icon--md',
+          lg: 'lc-icon--lg',
+          xl: 'lc-icon--xl',
+        },
       },
       btnVariants: {
         btn: 'lc-btn',
         link: 'lc-link',
         outline: 'lc-outline',
+        icon: 'lc-icon',
       },
     }
   },
@@ -132,10 +155,12 @@ export default defineComponent({
       // Variants
       const color = this.disabled ? 'disabled' : this.color as string
       const size = this.variant === 'link' ? '' : this.size as string
+
       const blockClass: ComputedClass = {
         btn: this.block ? 'lc-btn--block' : '',
         link: this.block ? 'lc-link--block' : '',
         outline: this.block ? 'lc-outline--block' : '',
+        icon: this.block ? 'lc-icon--block' : '',
       }
       const blockFullClass: ComputedClass = {
         btn: this.blockFull ? 'lc-btn--block-full' : '',
@@ -151,6 +176,7 @@ export default defineComponent({
         btn: `lc-btn--${this.fontWeight}`,
         link: `lc-link--${this.fontWeight}`,
         outline: `lc-outline--${this.fontWeight}`,
+        icon: `lc-icon--${this.fontWeight}`,
       }
 
       return [
@@ -158,7 +184,7 @@ export default defineComponent({
         blockFullClass[this.variant],
         hasIconClass[this.variant],
         this.btnColors[this.variant][color],
-        this.btnSizes[size],
+        this.btnSizes[this.variant][size],
         this.btnVariants[this.variant],
         weightClass[this.variant],
       ]
@@ -174,6 +200,7 @@ export default defineComponent({
 
 <style>
 /* Sizes */
+/* Btn */
 .lc-btn--xs {
   @apply p-0;
 }
@@ -189,6 +216,22 @@ export default defineComponent({
 .lc-btn--xl {
   @apply py-4 px-12;
 }
+/* Icon */
+.lc-icon--xs {
+  @apply w-8 h-8 p-2;
+}
+.lc-icon--sm {
+  @apply w-8 h-8 p-3;
+}
+.lc-icon--md {
+  @apply w-8 h-8 p-4;
+}
+.lc-icon--lg {
+  @apply w-8 h-8 p-5;
+}
+.lc-icon--xl {
+  @apply w-8 h-8 p-6;
+}
 
 /* Types */
 .lc-btn {
@@ -205,6 +248,9 @@ export default defineComponent({
 .lc-outline {
   @apply rounded-sm inline-block text-center cursor-pointer align-middle border border-solid text-base leading-tight hover:no-underline focus:outline-none focus:border-primary-focus;
 }
+.lc-icon {
+  @apply flex items-center justify-center transition-colors rounded-full outline-none cursor-pointer focus:outline-none box-content;
+}
 
 /* HasIcon */
 .lc-btn.lc-btn--has-icon,
@@ -316,6 +362,17 @@ export default defineComponent({
   @apply pointer-events-none bg-white font-medium text-gray-500 border border-gray-500 text-gray-400 md:hover:text-gray-400;
 }
 
+/* Icon Colors */
+.lc-icon--primary {
+  @apply bg-primary-400 hover:bg-primary-500;
+}
+.lc-icon--secondary {
+  @apply bg-secondary-400 hover:bg-secondary-500;
+}
+.lc-icon--red {
+  @apply bg-red-100 hover:bg-red-200;
+}
+
 /* Btn Loader */
 .lc-btn-loader {
   @apply w-5 h-5 inline-block relative align-middle mr-4;
diff --git a/src/components/LcCheckbox.vue b/src/components/LcCheckbox.vue
index a6fc986..3f4d4ee 100644
--- a/src/components/LcCheckbox.vue
+++ b/src/components/LcCheckbox.vue
@@ -28,7 +28,7 @@
       <span :style="inputValue && color ? { color: color } : ''">{{ label }}</span>
     </label>
 
-    <error-message as="div" :name="name" class="text-small text-red" />
+    <error-message as="div" :name="name" class="text-small text-red-300" />
   </div>
 </template>
 
@@ -100,12 +100,12 @@ export default defineComponent({
   @apply cursor-pointer inline-flex justify-start items-center mr-4;
 }
 .checkbox-custom {
-  @apply appearance-none cursor-pointer mr-2 h-4 w-4 border rounded-sm border-gray-400 checked:bg-primary-500 checked:border-primary-500 focus:outline-none;
+  @apply appearance-none cursor-pointer mr-2 h-4 w-4 border rounded-md border-gray-400 checked:bg-primary-500 checked:border-primary-500 focus:outline-none;
 }
 .form-tick: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: 140% 140%;
+  background-size: 120% 120%;
   background-position: 50%;
   background-repeat: no-repeat;
 }
diff --git a/src/components/LcTooltip.d.ts b/src/components/LcTooltip.d.ts
new file mode 100644
index 0000000..dd6e676
--- /dev/null
+++ b/src/components/LcTooltip.d.ts
@@ -0,0 +1,3 @@
+import { DefineComponent } from 'vue'
+const component: DefineComponent<{}, {}, any>
+export default component
diff --git a/src/components/LcTooltip.vue b/src/components/LcTooltip.vue
new file mode 100644
index 0000000..df91a4e
--- /dev/null
+++ b/src/components/LcTooltip.vue
@@ -0,0 +1,213 @@
+<template>
+  <div
+    :class="[
+      'relative lc_tooltip',
+      {
+        'lc_tooltip--appear': showTooltip && clickable,
+        'lc_tooltip--hover': showTooltip,
+      },
+    ]"
+    @click.stop="toggleTooltip"
+  >
+    <slot name="element" />
+
+    <div v-if="show && $slots['text']" :class="tooltipClass">
+      <slot name="text" />
+      <lc-icon
+        v-if="clickable"
+        class="lc_tooltip-icon"
+        name="exit"
+        size="xs"
+        @click.stop="toggleTooltip"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import { vPosition, vVariant, vSize } from '../validators/LcTooltip'
+import LcIcon from './LcIcon.vue'
+
+export default defineComponent({
+  name: 'LcTooltip',
+  components: { LcIcon },
+  props: {
+    blockFull: {
+      type: Boolean,
+      default: false,
+    },
+    clickable: {
+      type: Boolean,
+      default: false,
+    },
+    hoveringTooltip: {
+      type: Boolean,
+      default: true,
+    },
+    position: {
+      type: String,
+      default: 'top',
+      validator: (value) => {
+        return vPosition.includes(value)
+      },
+    },
+    rounded: {
+      type: Boolean,
+      default: false,
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: (value) => {
+        return vSize.includes(value)
+      },
+    },
+    variant: {
+      type: String,
+      default: 'grey',
+      validator: (value) => {
+        return vVariant.includes(value)
+      },
+    },
+  },
+  data() {
+    return {
+      showTooltip: !this.clickable,
+    }
+  },
+  computed: {
+    tooltipClass() {
+      const baseClass = 'lc_tooltip-content'
+
+      if (!this.hoveringTooltip) return `text-center ${baseClass}`
+
+      return [
+        baseClass,
+        `${baseClass}--${this.position}`,
+        `${baseClass}--${this.size}`,
+        `${baseClass}--${this.variant}`,
+        `${baseClass}--absolute`,
+        { rounded: this.rounded },
+        this.blockFull ? `${baseClass}--full` : null,
+      ]
+    },
+  },
+  methods: {
+    toggleTooltip() {
+      if (this.clickable) this.showTooltip = !this.showTooltip
+    },
+  },
+})
+</script>
+
+<style>
+.lc_tooltip-content {
+  @apply mt-6 mx-0 mb-0;
+}
+.lc_tooltip-icon {
+  @apply absolute cursor-pointer top-4 right-3;
+}
+.lc_tooltip-content--absolute {
+  @apply opacity-0 invisible absolute w-max text-white font-normal transition-opacity m-0 z-10;
+  display: inline-table;
+}
+.lc_tooltip-content--grey {
+  @apply bg-gray-600 border border-gray-600;
+}
+.lc_tooltip-content--white {
+  @apply bg-white border border-gray-400 text-gray-700 shadow-sm;
+}
+.lc_tooltip--appear .lc_tooltip-content--absolute,
+.lc_tooltip--hover:hover .lc_tooltip-content--absolute {
+  @apply opacity-100 visible;
+}
+.lc_tooltip--appear .lc_tooltip-content:before,
+.lc_tooltip--hover:hover .lc_tooltip-content:before {
+  @apply absolute;
+  content: "";
+  height: 0.8rem;
+  width: 0.8rem;
+}
+.lc_tooltip--appear .lc_tooltip-content--grey:before,
+.lc_tooltip--hover:hover .lc_tooltip-content--grey:before {
+  @apply bg-gray-600 border-gray-600;
+}
+.lc_tooltip--appear .lc_tooltip-content--white:before,
+.lc_tooltip--hover:hover .lc_tooltip-content--white:before {
+  @apply bg-white border-gray-400;
+}
+.lc_tooltip-content--top {
+  @apply my-0 mx-auto left-0;
+  bottom: calc(100% + 10px);
+}
+@screen md {
+  .lc_tooltip-content--top {
+    @apply left-1/2;
+    transform: translateX(-50%);
+  }
+}
+.lc_tooltip-content--top:before {
+  @apply border-b border-r bottom-[-2px] left-[15px];
+  transform: translateX(-50%) translateY(calc(50% - 1px)) rotate(45deg);
+}
+@screen md {
+  .lc_tooltip-content--top:before {
+    @apply left-1/2;
+  }
+}
+.lc_tooltip-content--bottom {
+  @apply my-0 mx-auto left-0;
+  top: calc(100% + 10px);
+}
+@screen md {
+  .lc_tooltip-content--bottom {
+    @apply left-1/2;
+    transform: translateX(-50%);
+  }
+}
+.lc_tooltip-content--bottom:before {
+  @apply border-l border-t top-0;
+  left: 15px;
+  transform: translateX(-50%) translateY(calc(-50% - 1px)) rotate(45deg);
+}
+@screen md {
+  .lc_tooltip-content--bottom:before {
+    @apply left-1/2;
+  }
+}
+.lc_tooltip-content--right {
+  @apply top-1/2;
+  left: calc(100% + 10px);
+  transform: translateY(-50%);
+}
+.lc_tooltip-content--right:before {
+  @apply border-b border-l left-0 top-1/2;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+.lc_tooltip-content--left {
+  @apply top-1/2;
+  right: calc(100% + 10px);
+  transform: translateY(-50%);
+}
+.lc_tooltip-content--left:before {
+  @apply left-auto border-t border-r top-1/2;
+  right: -0.85rem;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+.lc_tooltip-content--small {
+  @apply text-sm py-2 px-3;
+  max-width: 15rem;
+}
+.lc_tooltip-content--medium {
+  @apply max-w-xs text-base p-4 text-center;
+}
+.lc_tooltip-content--full {
+  @apply max-w-full;
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index a3d0b5a..6ce119b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,6 +6,7 @@ import LcInput from './components/LcInput.vue'
 import LcModal from './components/LcModal.vue'
 import LcPagination from './components/LcPagination.vue'
 import LcTable from './components/LcTable.vue'
+import LcTooltip from './components/LcTooltip.vue'
 
 export {
   LcButton,
@@ -16,4 +17,5 @@ export {
   LcModal,
   LcPagination,
   LcTable,
+  LcTooltip,
 }
diff --git a/src/stories/LcButton.stories.ts b/src/stories/LcButton.stories.ts
index c39f780..cab77d7 100644
--- a/src/stories/LcButton.stories.ts
+++ b/src/stories/LcButton.stories.ts
@@ -1,4 +1,6 @@
 import LcButton from '../components/LcButton'
+import LcIcon from '../components/LcIcon'
+
 import { vColor, vFontWeight, vSize, vVariant } from '../validators/LcButton'
 
 export default {
@@ -20,14 +22,40 @@ const Template = (args: any) => ({
   template: '<lc-button v-bind="args">Hello world</lc-button>',
 })
 
+const TemplateIcon = (args: any) => ({
+  components: { LcButton, LcIcon },
+  setup() {
+    return { args }
+  },
+  template: `
+  <lc-button v-bind="args" size="sm">
+    <lc-icon name="requests" class="text-white" />
+  </lc-button>`,
+})
+
 export const Primary = Template.bind({}) as any
 Primary.args = {
   color: 'primary',
   variant: 'btn',
 }
-
 export const Secondary = Template.bind({}) as any
 Secondary.args = {
   color: 'secondary',
   variant: 'btn',
 }
+
+export const IconPrimary = TemplateIcon.bind({}) as any
+IconPrimary.args = {
+  color: 'primary',
+  variant: 'icon',
+}
+export const IconSecondary = TemplateIcon.bind({}) as any
+IconSecondary.args = {
+  color: 'secondary',
+  variant: 'icon',
+}
+export const IconRed = TemplateIcon.bind({}) as any
+IconRed.args = {
+  color: 'red',
+  variant: 'icon',
+}
diff --git a/src/stories/LcTooltip.stories.ts b/src/stories/LcTooltip.stories.ts
new file mode 100644
index 0000000..a30b88a
--- /dev/null
+++ b/src/stories/LcTooltip.stories.ts
@@ -0,0 +1,47 @@
+import LcTooltip from '../components/LcTooltip'
+import LcButton from '../components/LcButton'
+
+import { vPosition, vVariant, vSize } from '../validators/LcTooltip'
+
+export default {
+  title: 'Example/LcTooltip',
+  component: LcTooltip,
+  argTypes: {
+    position: { control: { type: 'select', options: vPosition } },
+    variant: { control: { type: 'select', options: vVariant } },
+    size: { control: { type: 'select', options: vSize } },
+  },
+}
+
+const Template = (args: any) => ({
+  components: { LcTooltip, LcButton },
+  setup() {
+    return { args }
+  },
+  template: `
+    <lc-tooltip
+      v-bind="args"
+    >
+      <template #element>
+        <lc-button
+          color="secondary"
+        >
+          Element
+        </lc-button>
+      </template>
+
+      <template #text>
+        <p class="mb-0">
+          Texte
+        </p>
+      </template>
+    </lc-tooltip>
+  `,
+})
+
+export const Base = Template.bind({}) as any
+Base.args = {
+  position: 'bottom',
+  variant: 'white',
+  blockFull: true,
+}
diff --git a/src/validators/LcButton.ts b/src/validators/LcButton.ts
index a8de485..5f85bda 100644
--- a/src/validators/LcButton.ts
+++ b/src/validators/LcButton.ts
@@ -1,14 +1,15 @@
 const vColor: string[] = [
-  'primary',
+  'black',
+  'grey',
+  'light',
   'primary-light',
+  'primary',
+  'red',
   'secondary',
-  'light',
   'white',
-  'grey',
-  'black',
 ]
 const vFontWeight: string[] = ['font-bold', 'font-medium', 'font-normal']
 const vSize: string[] = ['xs', 'sm', 'md', 'lg', 'xl']
-const vVariant: string[] = ['btn', 'link', 'outline']
+const vVariant: string[] = ['btn', 'link', 'outline', 'icon']
 
 export { vColor, vFontWeight, vSize, vVariant }
diff --git a/src/validators/LcTooltip.ts b/src/validators/LcTooltip.ts
new file mode 100644
index 0000000..72fbf9c
--- /dev/null
+++ b/src/validators/LcTooltip.ts
@@ -0,0 +1,5 @@
+const vPosition: string[] = ['top', 'left', 'right', 'bottom']
+const vVariant: string[] = ['grey', 'white']
+const vSize: string[] = ['small', 'medium']
+
+export { vPosition, vVariant, vSize }
diff --git a/tailwind.config.js b/tailwind.config.js
index f55e2dc..237a27f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -34,13 +34,17 @@ module.exports = {
           500: '#195252',
           600: '#0B4141',
         },
+        red: {
+          100: '#E38687',
+          200: '#DC6869',
+          300: '#EFCCC3',
+        },
         transparent: 'transparent',
         'primary-focus': '#dbbc8f40',
         'secondary-focus': '#dbbc8f40',
         active: '#448084',
         black: '#202020',
         error: '#DC6869',
-        red: '#DC6869',
         white: '#ffffff',
       },
       fontSize: {