From b97836aa1862793f7c1932eb6679c8951efc8783 Mon Sep 17 00:00:00 2001
From: kokoakuma <aikw9101@gmail.com>
Date: Sat, 24 Feb 2024 14:53:04 +0000
Subject: [PATCH] add submit button

---
 .../components/forms/SubmitButton.stories.ts  | 35 ++++++++++++
 packages/ui/components/forms/SubmitButton.vue | 53 +++++++++++++++++++
 2 files changed, 88 insertions(+)
 create mode 100644 packages/ui/components/forms/SubmitButton.stories.ts
 create mode 100644 packages/ui/components/forms/SubmitButton.vue

diff --git a/packages/ui/components/forms/SubmitButton.stories.ts b/packages/ui/components/forms/SubmitButton.stories.ts
new file mode 100644
index 00000000..d6fea3f7
--- /dev/null
+++ b/packages/ui/components/forms/SubmitButton.stories.ts
@@ -0,0 +1,35 @@
+import { StoryFn } from '@storybook/vue3'
+import SubmitButton from './SubmitButton.vue'
+
+export default {
+  title: 'Forms/SubmitButton',
+  component: SubmitButton,
+  args: {
+    default: 'Submit',
+    disabled: false,
+  },
+  argTypes: {
+    default: {
+      description: 'Slot for submit button',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+}
+
+const StoryTemplate: StoryFn<unknown> = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { SubmitButton },
+  setup() {
+    return { args }
+  },
+  template: '<SubmitButton v-bind="args">{{ args.default }}</SubmitButton>',
+})
+
+export const Default = StoryTemplate.bind({})
+
+export const Disabled = StoryTemplate.bind({})
+Disabled.args = {
+  disabled: true,
+}
diff --git a/packages/ui/components/forms/SubmitButton.vue b/packages/ui/components/forms/SubmitButton.vue
new file mode 100644
index 00000000..a6066235
--- /dev/null
+++ b/packages/ui/components/forms/SubmitButton.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { toRefs, ButtonHTMLAttributes } from 'vue'
+import CssResetButton from '../CssResetButton.vue'
+
+type _SubmitButtonProps = Omit<ButtonHTMLAttributes, 'disabled' | 'onClick'>
+interface SubmitButtonProps extends /* @vue-ignore */ _SubmitButtonProps {
+  disabled?: boolean
+}
+interface SubmitButtonEmit {
+  (event: 'on-click'): void
+}
+const props = defineProps<SubmitButtonProps>()
+const { disabled = false } = toRefs(props)
+const emit = defineEmits<SubmitButtonEmit>()
+const handleClick = () => {
+  emit('on-click')
+}
+</script>
+
+<template>
+  <CssResetButton 
+    type="submit"
+    class="submit-button"
+    v-bind="props"
+    @click="handleClick"
+  >
+    <slot />
+  </CssResetButton>
+</template>
+
+<style scoped>
+  /* TODO デザイン適用 */
+.submit-button {
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 500px;
+  height: 80px;
+  border-radius: 40px;
+  font-weight: bold;
+  font-size: 20px;
+  cursor: pointer;
+  background: #42B983;
+  color: #FFFFFF;
+}
+
+.submit-button:disabled {
+  pointer-events: none;
+  background-color: #C9DAEA;
+}
+</style>
\ No newline at end of file