feat: Add Button

packages/vue-component-library/src/lib-components/Button.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import type { ButtonProps } from "@/types/components/button.types"
+import { ButtonColor, ButtonVariant } from "@/types/components/button.types"
+import SmartLink from "./SmartLink.vue"
+
+// Props
+const props = withDefaults(defineProps<ButtonProps>(), {
+    variant: ButtonVariant.Primary,
+    color: ButtonColor.Default,
+    type: "button",
+    isDisabled: false,
+    isOutlined: false,
+    isGrey: false,
+    linkTarget: "",
+    isDownload: false,
+})
+
+// Emits
+const emit = defineEmits<{
+    click: [event: MouseEvent]
+}>()
+
+// Computeds
+const classes = computed(() => [
+    "button",
+    props.variant,
+    props.color ? `color-${props.color}` : "",
+    { "is-outlined": props.isOutlined },
+    { "is-disabled": props.isDisabled },
+])
+
+// Methods
+function handleClick(event: MouseEvent) {
+    if (!props.isDisabled) emit("click", event)
+}
+</script>
+
+<template>
+    <SmartLink
+        v-if="to"
+        :class="classes"
+        :to="to"
+        :link-target="linkTarget"
+        :is-download="isDownload"
+    >
+        {{ text }}
+    </SmartLink>
+
+    <button
+        v-else
+        :class="classes"
+        :type="type"
+        :disabled="isDisabled"
+        @click="handleClick"
+    >
+        {{ text }}
+    </button>
+</template>
+
+<style lang="scss" scoped>
+@import "../styles/default/_button.scss";
+</style>

packages/vue-component-library/src/stories/Button.stories.js

@@ -0,0 +1,149 @@
+import Button from "@/lib-components/Button.vue"
+import { ButtonColor, ButtonVariant } from "@/types/components/button.types"
+
+// Storybook default settings
+export default {
+    title: "Funkhaus / Button",
+    component: Button,
+    argTypes: {
+        text: { control: "text" },
+        to: { control: "text" },
+        variant: {
+            control: "select",
+            options: ["primary", "secondary"],
+        },
+        type: {
+            control: "select",
+            options: ["button", "submit", "reset"],
+        },
+        isDisabled: { control: "boolean" },
+        isOutlined: { control: "boolean" },
+        linkTarget: { control: "text" },
+        isDownload: { control: "boolean" },
+        click: { action: "clicked" },
+    },
+    decorators: [
+        () => ({
+            template: "<story />",
+        }),
+    ],
+}
+
+function Template(args) {
+    return {
+        setup() {
+            return { args }
+        },
+        components: { Button },
+        template: '<Button v-bind="args" @click="args.click" />',
+    }
+}
+
+// Default stories
+export const Primary = Template.bind({})
+Primary.args = {
+    text: "Primary Button",
+    onClick: () => {
+        alert("Primary Button Clicked!")
+    },
+}
+
+export const PrimaryOutlined = Template.bind({})
+PrimaryOutlined.args = {
+    text: "Primary Outlined Button",
+    isOutlined: true,
+    onClick: () => {
+        alert("Primary Button Clicked!")
+    },
+}
+
+export const PrimaryDisabled = Template.bind({})
+PrimaryDisabled.args = {
+    text: "Primary Disabled Button",
+    isDisabled: true,
+    onClick: () => {
+        alert("Primary Button Clicked!")
+    },
+}
+
+export const PrimaryGray = Template.bind({})
+PrimaryGray.args = {
+    text: "Primary Gray Button",
+    color: ButtonColor.Grey,
+    onClick: () => {
+        alert("Primary Button Clicked!")
+    },
+}
+
+export const PrimaryOutlinedGray = Template.bind({})
+PrimaryOutlinedGray.args = {
+    text: "Primary Outlined Gray Button",
+    isOutlined: true,
+    color: ButtonColor.Grey,
+    onClick: () => {
+        alert("Primary Button Clicked!")
+    },
+}
+
+export const PrimaryLink = Template.bind({})
+PrimaryLink.args = {
+    text: "External Link Button",
+    to: "https://www.google.com",
+}
+
+export const Secondary = Template.bind({})
+Secondary.args = {
+    text: "Secondary Button",
+    variant: ButtonVariant.Secondary,
+    onClick: () => {
+        alert("Secondray Button Clicked!")
+    },
+}
+
+export const SecondaryOutlined = Template.bind({})
+SecondaryOutlined.args = {
+    text: "Secondary Outlined Button",
+    variant: ButtonVariant.Secondary,
+    isOutlined: true,
+    onClick: () => {
+        alert("Secondray Button Clicked!")
+    },
+}
+
+export const SecondaryGray = Template.bind({})
+SecondaryGray.args = {
+    text: "Secondary Gray Button",
+    variant: ButtonVariant.Secondary,
+    color: ButtonColor.Grey,
+    onClick: () => {
+        alert("Secondray Button Clicked!")
+    },
+}
+
+export const SecondaryOutlinedGray = Template.bind({})
+SecondaryOutlinedGray.args = {
+    text: "Secondary Outlined Gray Button",
+    variant: ButtonVariant.Secondary,
+    isOutlined: true,
+    color: ButtonColor.Grey,
+    onClick: () => {
+        alert("Secondray Button Clicked!")
+    },
+}
+
+export const SecondaryDisabled = Template.bind({})
+SecondaryDisabled.args = {
+    text: "Secondary Disabled Button",
+    variant: ButtonVariant.Secondary,
+    isDisabled: true,
+    onClick: () => {
+        alert("Secondray Button Clicked!")
+    },
+}
+
+export const SecondaryLink = Template.bind({})
+SecondaryLink.args = {
+    text: "External Link Button",
+    variant: ButtonVariant.Secondary,
+    to: "https://www.google.com",
+}

packages/vue-component-library/src/styles/default/_button.scss

@@ -0,0 +1,117 @@
+.button {
+    --transition-duration: 0.3s;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    transition: background-color var(--transition-duration),
+        color var(--transition-duration),
+        border-color var(--transition-duration);
+
+    // Primary variant
+    &.primary {
+        padding: 10px 15px;
+        border-radius: 30px;
+        background-color: var(--color-secondary-blue-01);
+
+        font-size: 18px;
+        font-family: var(--font-secondary);
+        font-weight: 400;
+        line-height: 1;
+        color: var(--color-white);
+
+        &.is-outlined {
+            padding-block: 9px;
+            background-color: transparent;
+            border: 1px solid var(--color-secondary-blue-01);
+            color: var(--color-secondary-blue-01);
+        }
+    }
+
+    // Secondary variant
+    &.secondary {
+        padding: 9px 20px;
+        border-radius: 5px;
+        background-color: $accent-blue;
+
+        font-size: 18px;
+        font-family: var(--font-primary);
+        font-weight: 600;
+        line-height: 1;
+        color: var(--color-white);
+
+        &.is-outlined {
+            padding-block: 8px;
+            background-color: transparent;
+            border: 1px solid var(--color-secondary-blue-01);
+            color: var(--color-secondary-blue-01);
+        }
+    }
+
+    // When disabled
+    &.is-disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    &.color-grey {
+        background-color: $subtitle-grey;
+        color: var(--color-white);
+
+        &.is-outlined {
+            background-color: transparent;
+            border: 1px solid $subtitle-grey;
+            color: $subtitle-grey;
+        }
+    }
+
+    // Hovers
+    @media #{$has-hover} {
+        &:hover:not(.is-disabled) {
+            background-color: var(--color-primary-blue-05);
+
+            &.is-outlined {
+                background-color: var(--color-secondary-blue-01);
+                border-color: var(--color-secondary-blue-01);
+                color: var(--color-white);
+            }
+
+            &.color-grey {
+                background-color: var(--color-secondary-blue-01);
+                color: var(--color-white);
+
+                &.is-outlined {
+                    background-color: var(--color-secondary-blue-01);
+                    border-color: var(--color-secondary-blue-01);
+                    color: var(--color-white);
+                }
+            }
+
+            // Secondary variant
+            &.secondary {
+                background-color: var(--color-primary-blue-05);
+
+                &.is-outlined {
+                    background-color: $accent-blue;
+                    border-color: $accent-blue;
+                    color: var(--color-white);
+                }
+
+                // Grey variant
+                &.color-grey {
+                    background-color: $accent-blue;
+                    color: var(--color-white);
+
+                    &.is-outlined {
+                        background-color: $accent-blue;
+                        border-color: $accent-blue;
+                        color: var(--color-white);
+                    }
+                }
+            }
+        }
+    }
+}

packages/vue-component-library/src/types/components/button.types.ts

@@ -0,0 +1,22 @@
+// Button component types
+export enum ButtonVariant {
+    Primary = "primary",
+    Secondary = "secondary",
+}
+
+export enum ButtonColor {
+    Default = "default",
+    Grey = "grey",
+}
+
+export interface ButtonProps {
+    text: string
+    to?: string
+    variant?: ButtonVariant
+    type?: "button" | "submit" | "reset"
+    isOutlined?: boolean
+    isDisabled?: boolean
+    color?: ButtonColor
+    linkTarget?: string
+    isDownload?: boolean
+}