Feat/20 prepare icon component

src/components/Button/Button.stories.mdx

@@ -1,6 +1,8 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 
 import Button from './Button.vue';
+import IconList from '../Shared/IconList.js';
+export const icons = Object.keys(IconList.solid);
 
 <Meta
   title="Components/Button"
@@ -10,46 +12,57 @@ import Button from './Button.vue';
       control: {
         type: 'select',
         options: ['primary', 'secondary', 'icon', 'text', 'outline'],
-        defaultValue: 'primary',
       },
     },
     loading: {
       control: {
         type: 'boolean',
-        defaultValue: false,
       },
     },
     disabled: {
       control: {
         type: 'boolean',
-        defaultValue: false,
       },
     },
     size: {
       control: {
         type: 'select',
         options: ['small', 'medium', 'large'],
-        defaultValue: 'medium',
       },
     },
     icon: {
       control: {
-        type: 'text',
-        defaultValue: 'PlusCircleSolid',
+        type: 'select',
+        options: icons,
       },
     },
     type: {
       control: {
         type: 'select',
         options: ['button', 'submit', 'reset'],
-        defaultValue: 'button',
       },
     },
     backgroundColor: {
       control: {
         type: 'color',
       },
     },
+    iconColor: {
+      control: {
+        type: 'color',
+      },
+    },
+    iconSize: {
+      control: {
+        type: 'text',
+      },
+    },
+    iconKind: {
+      control: {
+        type: 'radio',
+        options: ['solid', 'outline'],
+      },
+    },
   }}
 />
 
@@ -78,6 +91,7 @@ export const Default = ({ slot1, slot2, ...rest }) => {
     argTypes={{ ...Default.argTypes }}
     args={{
       variant: 'primary',
+      icon: 'PlusCircleIcon',
       slot1: '<span>Primary</span>',
     }}
   >

src/components/Button/Button.vue

@@ -1,13 +1,22 @@
 <script setup lang="ts">
 import './button.css';
 import { computed } from 'vue';
-import { PlusCircleIcon as PlusCircleOutline } from '@heroicons/vue/outline';
-import { PlusCircleIcon as PlusCircleSolid } from '@heroicons/vue/solid';
+import Icon from '../Icon/Icon.vue';
+import { IconKind, type IconSize } from '../Shared/Enums';
 export interface Props {
   variant?: 'primary' | 'secondary' | 'icon' | 'text' | 'outline';
   loading?: boolean;
   disabled?: boolean;
   icon?: string;
+  iconColor?: string;
+  iconSize?:
+    | IconSize.XSmall
+    | IconSize.Small
+    | IconSize.Medium
+    | IconSize.Large
+    | IconSize.XLarge
+    | string;
+  iconKind?: IconKind.Outline | IconKind.Solid;
   size?: 'small' | 'medium' | 'large';
   type?: 'button' | 'submit' | 'reset';
   backgroundColor?: string;
@@ -23,9 +32,6 @@ const classes = computed(() => ({
 const style = computed(() => ({
   backgroundColor: props.backgroundColor,
 }));
-const Icon = computed(() => {
-  return props.icon?.includes('Outline') ? PlusCircleOutline : PlusCircleSolid;
-});
 const onClick = () => {
   emit('click');
 };
@@ -38,7 +44,13 @@ const onClick = () => {
     :disabled="disabled || loading"
     @click="onClick"
   >
-    <component v-if="props.icon?.length" :is="Icon" class="icon" />
+    <Icon
+      :name="`${icon}`"
+      :size="iconSize || '24'"
+      :color="iconColor"
+      :kind="iconKind || IconKind.Solid"
+      class="icon"
+    />
     <slot name="custom-icon" />
     <slot v-if="props.variant !== 'icon'" />
   </button>

src/components/Button/button.css

@@ -32,5 +32,5 @@
   @apply font-normal text-sm px-4 py-2;
 }
 .icon {
-  @apply h-5 w-5 mx-2;
+  @apply mr-2;
 }

src/components/Icon/Icon.stories.mdx

@@ -0,0 +1,66 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+
+import Icon from './Icon.vue';
+import IconList from '../Shared/IconList.js';
+export const icons = Object.keys(IconList.solid);
+
+<Meta
+  title="Components/Icon"
+  component={Icon}
+  argTypes={{
+    name: {
+      control: {
+        type: 'select',
+        options: icons,
+      },
+    },
+    size: {
+      control: {
+        type: 'radio',
+        options: ['20', '24', '32', '48', '64'],
+      },
+    },
+    color: {
+      control: {
+        type: 'color',
+      },
+    },
+    kind: {
+      control: {
+        type: 'radio',
+        options: ['solid', 'outline'],
+      },
+    },
+  }}
+/>
+
+export const Default = (args) => {
+  return {
+    components: { Icon },
+    setup() {
+      return { args };
+    },
+    template: `<Icon v-bind="args" />`,
+  };
+};
+
+# Default
+
+<Canvas>
+  <Story
+    name="Default"
+    argTypes={{ ...Default.argTypes }}
+    args={{
+      name: 'AcademicCapIcon',
+      size: '24',
+      color: '#000',
+      kind: 'solid',
+    }}
+  >
+    {Default.bind({})}
+  </Story>
+</Canvas>
+
+# Reference
+
+<ArgsTable />

src/components/Icon/Icon.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import IconList from '../Shared/IconList';
+import type { IconKind, IconSize } from '../Shared/Enums';
+export interface Props {
+  name: string;
+  kind?: IconKind.Outline | IconKind.Solid;
+  size?:
+    | IconSize.XSmall
+    | IconSize.Small
+    | IconSize.Medium
+    | IconSize.Large
+    | IconSize.XLarge
+    | string;
+  color?: string;
+}
+
+const props = defineProps<Props>();
+
+const styles = computed(() => {
+  const { size, color } = props;
+  return {
+    color,
+    width: size,
+    height: size,
+  };
+});
+
+const Icon = computed(() => {
+  return IconList[props.kind || 'solid'][props.name || 'AcademicCapIcon'];
+});
+</script>
+<template>
+  <component :is="Icon" :style="styles" />
+</template>

src/components/Icon/__snapshots__/icon.spec.ts.snap

@@ -0,0 +1,15 @@
+// Vitest Snapshot v1
+
+exports[`Icon > renders properly 1`] = `
+<svg
+  aria-hidden="true"
+  fill="currentColor"
+  style="color: rgb(255, 255, 255);"
+  viewBox="0 0 20 20"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"
+  />
+</svg>
+`;

src/components/Icon/icon.spec.ts

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import Icon from './Icon.vue';
+
+describe('Icon', () => {
+  it('renders properly', () => {
+    const wrapper = mount(Icon, {
+      props: {
+        name: 'AdjustmentsIcon',
+        size: '24',
+        color: 'rgb(255, 255, 255)',
+        kind: 'solid',
+      },
+    });
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.find('svg').exists()).toBe(true);
+    expect(wrapper.find('svg').element.getAttribute('aria-hidden')).toBe(
+      'true'
+    );
+    expect(wrapper.find('svg').element.getAttribute('style')).toBe(
+      'color: rgb(255, 255, 255);'
+    );
+    expect(wrapper.find('svg').element.getAttribute('fill')).toBe(
+      'currentColor'
+    );
+  });
+});

src/components/Shared/Enums.ts

@@ -0,0 +1,12 @@
+export enum IconKind {
+  Solid = 'solid',
+  Outline = 'outline',
+}
+
+export enum IconSize {
+  XSmall = '20',
+  Small = '24',
+  Medium = '32',
+  Large = '40',
+  XLarge = '48',
+}

src/components/Shared/IconList.js

@@ -0,0 +1,6 @@
+import solid from '@heroicons/vue/solid/index.js';
+import outline from '@heroicons/vue/outline/index.js';
+export default {
+  solid,
+  outline,
+};