Add SqButton Component and some fixes

.storybook/preview.ts

@@ -42,7 +42,6 @@ export const parameters: Parameters = {
       order: ['Getting Started', 'Components'],
     },
   },
-  layout: 'centered',
 }
 
 const themeSelect = (Story, context) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squidit/vue-css",
-  "version": "1.3.12",
+  "version": "1.3.2",
   "scripts": {
     "start": "vite",
     "storybook": "storybook dev -p 6006",

src/components/SqAccordion/__docs__/SqAccordion.stories.ts

@@ -18,12 +18,12 @@ export const Default: Story = (args) => ({
     return { args }
   },
   template: `
-    <SqAccordion :onlyOne="args.onlyOne" :openFirst="args.openFirst">
+    <SqAccordion :only-one="args.openFirst" :open-first="args.openFirst">
       <SqCollapse
         :open="false"
         color="var(--pink)"
-        colorIcons="var(--background)"
-        >
+        icons-color="var(--background)"
+      >
         <template #header>
           <span :style="{ color: 'var(--background)' }">Title 1</span>
         </template>
@@ -32,8 +32,8 @@ export const Default: Story = (args) => ({
       <SqCollapse
         :open="false"
         color="var(--lilac)"
-        colorIcons="var(--background)"
-        >
+        icons-color="var(--background)"
+      >
         <template #header>
           <span :style="{ color: 'var(--background)' }">Title 2</span>
         </template>
@@ -42,8 +42,8 @@ export const Default: Story = (args) => ({
       <SqCollapse
         :open="false"
         color="var(--cian)"
-        colorIcons="var(--background)"
-        >
+        icons-color="var(--background)"
+      >
         <template #header>
           <span :style="{ color: 'var(--background)' }">Title 3</span>
         </template>

src/components/SqButton/SqButton.vue

@@ -0,0 +1,181 @@
+<script lang="ts" setup>
+import { SqColorsHelper } from '../../helpers/index'
+import { SqLoader } from '../index'
+import { ref, StyleValue } from 'vue'
+
+const sqColorsHelper = new SqColorsHelper()
+
+const props = defineProps<{
+  type?: 'submit' | 'reset' | 'button'
+  color?: string
+  textColor?: string
+  borderColor?: string
+  borderStyle?: string
+  textTransform?: string
+  borderWidth?: string
+  borderRadius?: string
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  fontSize?: string
+  loading?: boolean
+  disabled?: boolean
+  block?: boolean
+  noPadding?: boolean
+  id?: string
+  buttonAsLink?: boolean
+  hideOnLoading?: boolean
+  invertedHover?: boolean
+  noUnderline?: boolean
+  boxShadow?: string
+  width?: string
+}>()
+
+type Emits = {
+  'click-emitter': [event: MouseEvent]
+}
+
+const emit = defineEmits<Emits>()
+
+const hover = ref(false)
+
+const validatePresetColors = () => {
+  if (
+    !props.color?.startsWith('var(--') &&
+    !props.color?.startsWith('#') &&
+    !props.color?.startsWith('rgb') &&
+    !props.color?.startsWith('hsl') &&
+    !props.color?.startsWith('transparent')
+  ) {
+    return !!sqColorsHelper?.getCssVariableValue(props.color || '')
+  }
+  return false
+}
+
+const doHoverOnText = () => {
+  if (hover.value) {
+    return setHoverText()
+  }
+  return props.textColor
+}
+
+const doHoverOnBackground = () => {
+  if (hover.value) {
+    return setHoverBg()
+  }
+  return props.color
+}
+
+const doHoverOnBorder = () => {
+  if (hover.value) {
+    return setHover(props.borderColor || props.textColor || '')
+  }
+  return props.borderColor || props.textColor || ''
+}
+
+const doHoverAction = (type: 'text' | 'background' | 'border') => {
+  if (validatePresetColors()) {
+    return ''
+  }
+
+  switch (type) {
+    case 'text':
+      return doHoverOnText()
+    case 'background':
+      return doHoverOnBackground()
+    case 'border':
+      return doHoverOnBorder()
+    default:
+      return ''
+  }
+}
+
+const setHover = (color: string) => {
+  return sqColorsHelper?.lightenDarkenColor(sqColorsHelper?.getCssVariableValue(color), -25)
+}
+
+const setHoverBg = () => {
+  if (props.invertedHover) {
+    return setHover(props.textColor !== 'transparent' ? props.textColor || '' : 'var(--text_color)')
+  }
+  return setHover(props.color && props.color !== 'transparent' ? props.color : 'var(--color_bg_button_inverse-hover)')
+}
+
+const setHoverText = () => {
+  if (props.invertedHover) {
+    return setHover(props.color && props.color !== 'transparent' ? props.color : 'var(--color_bg_button_inverse-hover)')
+  }
+  return setHover(props.textColor !== 'transparent' ? props.textColor || '' : 'var(--text_color)')
+}
+
+const executeFunction = (event: MouseEvent) => {
+  if (!props.loading && !props.disabled) {
+    emit('click-emitter', event)
+  }
+}
+</script>
+
+<template>
+  <button
+    class="button"
+    :class="{
+      [`button-${props?.color}`]: props?.color,
+      [`button-${props?.size}`]: props?.size,
+      disabled: props?.disabled,
+      loading: props?.loading,
+      block: props?.block,
+      'p-0': props?.noPadding,
+      'button-as-link': props?.buttonAsLink,
+      'no-underline': props?.noUnderline,
+      inverted: props?.invertedHover,
+    }"
+    :id="id"
+    :type="props?.type || 'button'"
+    :disabled="props?.disabled"
+    @mouseover="hover = true"
+    @mouseleave="hover = false"
+    @click="executeFunction($event)"
+    :style="
+      {
+        fontSize: props?.fontSize,
+        color: doHoverAction('text'),
+        backgroundColor: doHoverAction('background'),
+        borderColor: doHoverAction('border'),
+        borderStyle: props?.borderStyle,
+        borderRadius: props?.borderRadius,
+        borderWidth: props?.borderWidth,
+        boxShadow: props?.boxShadow,
+        width: props?.width,
+        textTransform: props?.textTransform,
+      } as StyleValue
+    "
+  >
+    <slot v-if="!props?.hideOnLoading || (props?.hideOnLoading && !props?.loading)"></slot>
+    <SqLoader
+      v-if="props?.loading"
+      :class="{ 'hide-on-loading': props?.hideOnLoading }"
+      custom-size="1rem"
+      :color="props?.textColor"
+    ></SqLoader>
+  </button>
+</template>
+
+<style lang="scss" scoped>
+.button {
+  &.p-0 {
+    padding: 0;
+  }
+  &.block {
+    width: 100%;
+  }
+  &.button-as-link {
+    border-style: none !important;
+    background-color: transparent !important;
+    text-decoration: underline;
+    color: initial !important;
+    white-space: nowrap;
+    text-transform: none;
+  }
+  &.no-underline {
+    text-decoration: none;
+  }
+}
+</style>

src/components/SqButton/__docs__/SqButton.stories.ts

@@ -0,0 +1,83 @@
+import type { Meta, StoryFn } from '@storybook/vue3'
+import { SqButton } from '../index'
+
+const meta: Meta<typeof SqButton> = {
+  title: 'Components/SqButton',
+  component: SqButton,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'radio',
+      options: ['submit', 'reset', 'button'],
+    },
+    size: {
+      control: 'radio',
+      options: ['sm', 'md', 'lg', 'xl'],
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryFn<typeof SqButton>
+
+export const Default: Story = (args) => ({
+  components: { SqButton },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <SqButton
+        :type="args.type"
+        :color="args.color"
+        :text-color="args.textColor"
+        :border-color="args.borderColor"
+        :border-style="args.borderStyle"
+        :text-transform="args.textTransform"
+        :border-width="args.borderWidth"
+        :border-radius="args.borderRadius"
+        :size="args.size"
+        :font-size="args.fontSize"
+        :loading="args.loading"
+        :disabled="args.disabled"
+        :block="args.block"
+        :no-padding="args.noPadding"
+        :id="args.id"
+        :button-as-link="args.buttonAsLink"
+        :hide-on-loading="args.hideOnLoading"
+        :inverted-hover="args.invertedHover"
+        :no-under-line="args.noUnderline"
+        :box-shadow="args.boxShadow"
+        :width="args.width"
+        @click-emitter="() => console.log('Button clicked')"
+      >
+        Click me
+      </SqButton>
+    </div>
+  `,
+})
+
+Default.args = {
+  type: 'button',
+  color: 'var(--pink)',
+  textColor: '',
+  borderColor: 'var(--pink)',
+  borderStyle: '',
+  textTransform: '',
+  borderWidth: '',
+  borderRadius: '',
+  size: 'md',
+  fontSize: '',
+  loading: false,
+  disabled: false,
+  block: false,
+  noPadding: false,
+  id: '',
+  buttonAsLink: false,
+  hideOnLoading: false,
+  invertedHover: false,
+  noUnderline: false,
+  boxShadow: '',
+  width: '',
+}

src/components/SqButton/__tests__/SqButton.spec.ts

@@ -0,0 +1,9 @@
+import { mount } from '@vue/test-utils'
+import { SqButton } from '../index'
+
+describe('SqButton', () => {
+  it('Should Render', () => {
+    const mountLoader = mount(SqButton)
+    expect(mountLoader).toBeTruthy()
+  })
+})

src/components/SqButton/index.ts

@@ -0,0 +1 @@
+export { default as SqButton } from './SqButton.vue'