feat: add VFButton

apps/web/app/components/SponsorPageSection.vue

@@ -2,12 +2,7 @@
 import { useColor, useTypography } from '@vuejs-jp/composable'
 const { fontWeight, fontSize } = useTypography()
 const { color } = useColor()
-const onClickApply = () => {
-  console.log('onClickApply')
-}
-const onClickCheckDoc = () => {
-  console.log('onClickCheckDoc')
-}
+
 </script>
 
 <template>
@@ -29,13 +24,13 @@ const onClickCheckDoc = () => {
         height="82" />
       <div class="sponsor-buttons">
         <!-- 申し込む -->
-        <VFSubmitButton class="sponsor-button" @click="onClickApply">
+        <VFButton class="sponsor-button" fixed-width href="/">
           {{ $t('sponsor.apply') }}
-        </VFSubmitButton>
+        </VFButton>
         <!-- 資料を見る -->
-        <VFSubmitButton class="sponsor-button -border" @click="onClickCheckDoc">
+        <VFButton class="sponsor-button" fixed-width href="/" secondary>
           {{ $t('sponsor.check-doc') }}
-        </VFSubmitButton>
+        </VFButton>
 
       </div>
     </article>
@@ -86,27 +81,27 @@ const onClickCheckDoc = () => {
   margin-top: calc(var(--unit) * 4);
 }
 
-.sponsor-button+.sponsor-button {
-  margin: 0 calc(var(--unit) * 2);
+.sponsor-button {
+  margin: 0 calc(var(--unit) * 1.5);
 }
 
 /* この幅ルールはコンポーネント側に持たせるべき */
-.sponsor-button {
+/* .sponsor-button {
   min-width: 198px;
   max-width: 260px;
   width: 100%;
   padding: calc(var(--unit) * 2) 66px;
   background: var(--color-vue-green-gradation);
   font-size: 18px;
   white-space: nowrap;
-}
+} */
 
-.sponsor-button.-border {
+/* .sponsor-button.-border {
   padding: calc(var(--unit) * 2) 0;
   background: white;
   border: solid 2px var(--color-vue-blue);
   color: var(--color-vue-blue);
-}
+} */
 
 
 @media (--tablet) {
@@ -121,11 +116,6 @@ const onClickCheckDoc = () => {
   }
 
   .sponsor-button {
-    width: 100%;
-    max-width: none;
-  }
-
-  .sponsor-button+.sponsor-button {
     margin: calc(var(--unit) * 2) 0 0;
   }
 }

packages/ui/.storybook/preview.js

@@ -1,8 +1,14 @@
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+
 export const parameters = {
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
+  viewport: {
+    viewports: INITIAL_VIEWPORTS,
+    defaultViewport: 'responsive',
+  },
 }

packages/ui/components/Button.stories.ts

@@ -0,0 +1,91 @@
+import { StoryFn } from '@storybook/vue3'
+import Button from './Button.vue'
+
+export default {
+  title: 'Button',
+  component: Button,
+  args: {},
+}
+
+const Template: StoryFn<unknown> = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  viewport: { defaultViewport: 'iphonex' },
+  components: { Button },
+  setup() {
+    return { args }
+  },
+  template: `
+  <h2>Buttons</h2>
+
+  <div>
+    <p style="padding: 10px">
+      <Button :="args">あ</Button>
+      &emsp;通常
+    </p>
+    <p style="padding: 10px">
+      <Button :="args" fixed-width>申し込む</Button>
+      &emsp;長さ固定
+    </p>
+    <p style="padding: 10px">
+      <Button :="args">あいうえおかきくけこたちつてと</Button>
+      &emsp;ラベルに沿って伸長
+    </p>
+    <p style="padding: 10px">
+      <Button :="args" disabled>あ</Button>
+      &emsp;disabled
+    </p>
+  </div>
+  <h2>RouterLinks</h2>
+  <div>
+    <p style="padding: 10px">
+      <Button :="args" to="/">あ</Button>
+      &emsp;通常
+    </p>
+    <p style="padding: 10px">
+      <Button :="args" fixed-width to="/">申し込む</Button>
+      &emsp;長さ固定
+    </p>
+    <p style="padding: 10px">
+      <Button :="args" to="/">あいうえおかきくけこたちつてと</Button>
+      &emsp;ラベルに沿って伸長
+    </p>
+    <p style="padding: 10px">
+      <Button :="args" to="/" disabled>あ</Button>
+      &emsp;disabled
+    </p>
+  </div>
+  <h2>AnchorLinks</h2>
+  <div>
+    <p style="padding: 10px">
+      <Button :="args" href="/">あ</Button>
+      &emsp;通常
+    </p>
+    <p style="padding: 10px">
+      <Button :="args" fixed-width href="/">申し込む</Button>
+      &emsp;長さ固定
+    </p>
+    <p style="padding: 10px">
+      <Button :="args" href="/">あいうえおかきくけこたちつてと</Button>
+      &emsp;ラベルに沿って伸長
+    </p>
+    <p style="padding: 10px">
+      <Button :="args" href="/" disabled>あ</Button>
+      &emsp;disabled
+    </p>
+  </div>`,
+})
+
+export const Default = Template.bind({})
+Default.args = {}
+
+export const Secondary = Template.bind({})
+Secondary.args = {
+  secondary: true,
+}
+
+// export const SubLinkButton = Template.bind({})
+// SubLinkButton.args = {
+//   backgroundColor: 'white',
+//   color: 'vue-blue',
+//   iconName: 'note',
+// }

packages/ui/components/Button.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { ButtonHTMLAttributes, ref, computed } from 'vue'
+
+const emit = defineEmits(['click'])
+const props = defineProps({
+  secondary: {
+    type: Boolean,
+    default: false,
+  },
+  href: {
+    type: String,
+    default: '',
+  },
+  to: {
+    type: String,
+    default: '',
+  },
+  target: {
+    type: String,
+    default: '',
+  },
+  rel: {
+    type: String,
+    default: 'noreferrer',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  fixedWidth: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const isLink = Boolean(props.href)
+const isRouterLink = Boolean(props.to)
+const myclass = computed(() => {
+  const cls = ['button']
+  if (props.secondary) {
+    cls.push('-secondary')
+  }
+  if (props.disabled) {
+    cls.push('-disabled')
+  }
+  if (props.fixedWidth) {
+    cls.push('-fixedWidth')
+  }
+  return cls.join(' ')
+})
+
+const onClick = (e: Event) => {
+  emit('click', e)
+}
+
+const routerLinkProps = {
+  to: props.to,
+}
+const linkProps = {
+  href: props.href,
+  rel: props.rel,
+  target: props.target,
+}
+const buttonProps = {
+  type: props.type,
+  onClick,
+}
+
+const tag = computed(() => {
+  if (isRouterLink) {
+    return 'NuxtLink';
+  }
+  if (isLink) {
+    return 'a'
+  }
+  return 'button'
+})
+const bindProps = computed(() => {
+  if (isRouterLink) {
+    return { to: props.to, }
+  }
+  if (isLink) {
+    return {
+      href: props.href,
+      rel: props.rel,
+      target: props.target,
+    }
+  }
+  return {
+    onClick,
+  }
+})
+</script>
+
+
+<template>
+  <component :is="tag" :class="myclass" :disabled="props.disabled || null" :aria-disabled="props.disabled"
+    v-bind="{ ...bindProps }">
+    <span class="button-label">
+      <slot />
+    </span>
+  </component>
+</template>
+
+<style scoped>
+.button {
+  --color-vue-green-gradation: linear-gradient(to right, #42b883, #41b8aa);
+  --color-vue-green: #42b983;
+  --color-vue-blue: #35495e;
+  --color-disabled: #C6CACF;
+  --box-shadow: 0 2px 10px rgb(53, 73, 95, 0.14);
+
+  display: inline-flex;
+  justify-content: center;
+  min-width: 198px;
+  background: var(--color-vue-green-gradation);
+  font-size: 18px;
+  white-space: nowrap;
+  border-radius: 40px;
+  padding: 0;
+  cursor: pointer;
+  color: white;
+  border: none;
+  box-sizing: border-box;
+  text-decoration: none;
+  box-shadow: var(--box-shadow);
+  font-family: 'din-2014',
+    'Yu Gothic Medium',
+    '游ゴシック体',
+    YuGothic,
+    '游ゴシック',
+    'Yu Gothic',
+    sans-serif;
+}
+
+.button:hover {
+  background: white;
+  color: var(--color-vue-green);
+  box-shadow: var(--box-shadow), inset 0px 0px 0px 2px var(--color-vue-green);
+}
+
+.button.-fixedWidth {
+  width: 100%;
+  max-width: 260px;
+}
+
+.button.-secondary {
+  background: white;
+  box-shadow: var(--box-shadow), inset 0px 0px 0px 2px var(--color-vue-blue);
+  color: var(--color-vue-blue);
+
+  &:hover {
+    background: var(--color-vue-blue);
+    color: white;
+    box-shadow: none;
+  }
+}
+
+.button[disabled] {
+  pointer-events: none;
+  background: var(--color-disabled);
+  box-shadow: var(--box-shadow);
+  color: white;
+}
+
+.button.-secondary[disabled] {
+
+  color: var(--color-disabled);
+  box-shadow: var(--box-shadow), inset 0px 0px 0px 2px var(--color-disabled);
+  background: white;
+}
+
+.button-label {
+  padding: 24px 66px;
+  line-height: 1;
+}
+
+@media (width <=768px) {
+
+  .button,
+  .button.-fixedWidth {
+    width: 100%;
+    max-width: none;
+  }
+}
+</style>