create LcTooltip + LcButton with LcIcon

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

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"

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,14 +176,15 @@ export default defineComponent({
         btn: `lc-btn--${this.fontWeight}`,
         link: `lc-link--${this.fontWeight}`,
         outline: `lc-outline--${this.fontWeight}`,
+        icon: `lc-icon--${this.fontWeight}`,
       }
 
       return [
         blockClass[this.variant],
         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;

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;
 }

src/components/LcTooltip.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent } from 'vue'
+const component: DefineComponent<{}, {}, any>
+export default component