diff --git a/packages/vue-component-library/src/lib-components/ButtonSubmit.vue b/packages/vue-component-library/src/lib-components/ButtonSubmit.vue new file mode 100644 index 000000000..3de17d6a5 --- /dev/null +++ b/packages/vue-component-library/src/lib-components/ButtonSubmit.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/packages/vue-component-library/src/stories/ButtonSubmit.spec.js b/packages/vue-component-library/src/stories/ButtonSubmit.spec.js new file mode 100644 index 000000000..6020f3f39 --- /dev/null +++ b/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') + }) +}) diff --git a/packages/vue-component-library/src/stories/ButtonSubmit.stories.js b/packages/vue-component-library/src/stories/ButtonSubmit.stories.js new file mode 100644 index 000000000..5f017161a --- /dev/null +++ b/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: '', + } +} + +export function WithCustomIcon() { + return { + components: { ButtonSubmit }, + provide() { + return { + theme: computed(() => 'dlc'), + } + }, + data() { + return { + customIcon: SvgIconEye, + } + }, + methods, + template: ` + + + + `, + } +} + +// Variant: No theme provided (falls back to base styles) +export function NoThemeProvided() { + return { + components: { ButtonSubmit }, + methods, + template: '', + } +} diff --git a/packages/vue-component-library/src/styles/dlc/_button-submit.scss b/packages/vue-component-library/src/styles/dlc/_button-submit.scss new file mode 100644 index 000000000..6d6c0c7ca --- /dev/null +++ b/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); + } + } +}