feat: Add ButtonSubmit

NOTES.md

@@ -0,0 +1,11 @@
+Designs:
+https://www.figma.com/design/CDhWDARLb36ftkQce1LyLC/Breakpoints?node-id=1-25&m=dev
+
+https://www.figma.com/design/CDhWDARLb36ftkQce1LyLC/Breakpoints?node-id=1-26&p=f&m=dev
+
+Read in Recording: 
+https://drive.google.com/file/d/17tiGmE4aax-faoo5Rjue2Idbx3OGCFGa/view?usp=sharing
+
+Relevant Links
+https://www.library.ucla.edu/
+https://digital.library.ucla.edu/catalog/ark:/21198/z1x98m6j

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

@@ -0,0 +1,31 @@
+<script setup>
+// Imports
+import { computed, useSlots } from 'vue'
+import IconSearch from 'ucla-library-design-tokens/assets/svgs/icon-search.svg'
+import { useTheme } from '@/composables/useTheme'
+
+const emit = defineEmits(['click'])
+const slots = useSlots()
+
+const theme = useTheme()
+
+// Computeds
+const classes = computed(() => ['button-submit', theme?.value || ''])
+
+// Methods
+function handleClick() {
+  emit('click')
+}
+</script>
+
+<template>
+  <button :class="classes" type="submit" @click="handleClick">
+    <slot>
+      <IconSearch />
+    </slot>
+  </button>
+</template>
+
+<style lang="scss" scoped>
+@import "@/styles/dlc/_button-submit.scss";
+</style>

packages/vue-component-library/src/stories/ButtonSubmit.spec.js

@@ -0,0 +1,8 @@
+describe('Funkhaus / Button Submit', () => {
+  it('Default', () => {
+    cy.visit('/iframe.html?id=funkhaus-button-submit--default&args=&viewMode=story')
+    cy.get('.button-submit').should('exist')
+
+    cy.percySnapshot('Funkhaus / Button Submit')
+  })
+})

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

@@ -0,0 +1,61 @@
+import SvgIconEye from 'ucla-library-design-tokens/assets/svgs/icon-eye.svg'
+import { computed } from 'vue'
+import ButtonSubmit from '@/lib-components/ButtonSubmit'
+
+export default {
+  title: 'Funkhaus / Button Submit',
+  component: ButtonSubmit,
+}
+
+const methods = {
+  onSubmit() {
+    alert('Button clicked!')
+  },
+}
+
+// Variations of stories below
+export function Default() {
+  return {
+    components: { ButtonSubmit },
+    provide() {
+      return {
+        theme: computed(() => 'dlc'),
+      }
+    },
+    methods,
+    template: '<button-submit @click="onSubmit" />',
+  }
+}
+
+export function WithCustomIcon() {
+  return {
+    components: { ButtonSubmit },
+    provide() {
+      return {
+        theme: computed(() => 'dlc'),
+      }
+    },
+    data() {
+      return {
+        customIcon: SvgIconEye,
+      }
+    },
+    methods,
+    template: `
+            <button-submit @click="onSubmit">
+                <template #default>
+                    <component :is="customIcon" />
+                </template>
+            </button-submit>
+        `,
+  }
+}
+
+// Variant: No theme provided (falls back to base styles)
+export function NoThemeProvided() {
+  return {
+    components: { ButtonSubmit },
+    methods,
+    template: '<button-submit @click="onSubmit" />',
+  }
+}

packages/vue-component-library/src/styles/dlc/_button-submit.scss

@@ -0,0 +1,38 @@
+.button-submit,
+.dlc.button-submit {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    height: 74px;
+    width: 74px;
+    padding: 0;
+    background-color: var(--color-primary-blue-01);
+
+    // Target SVG elements
+    :deep(svg path) {
+        fill: var(--color-primary-blue-04);
+        transition: fill 0.3s ease-in-out;
+    }
+
+    // Hovers
+    @media #{$has-hover} {
+        &:hover {
+            :deep(svg path) {
+                fill: var(--color-default-cyan-03);
+            }
+        }
+    }
+    // Breakpoints
+    @media #{$medium} {
+        height: 53px;
+    }
+    @media #{$small} {
+        height: 60px;
+
+        // Target SVG elements
+        :deep(svg path) {
+            fill: var(--color-default-cyan-03);
+        }
+    }
+}