Add LinkButton

packages/ui/components/LinkButton.stories.ts

@@ -0,0 +1,39 @@
+import { StoryFn } from '@storybook/vue3'
+import LinkButton from './LinkButton.vue'
+
+export default {
+  title: 'common/LinkButton',
+  component: LinkButton,
+  args: {
+    title: 'button',
+    backgroundColor: 'vue-green',
+    color: 'white',
+    href: 'https://example.com',
+    iconName: 'x',
+  },
+}
+
+const Template: StoryFn<unknown> = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { LinkButton },
+  setup() {
+    return { args }
+  },
+  template: `<div style="width: 400px;">
+    <LinkButton :="args">{{ args.title }}</LinkButton>
+  </div>`,
+})
+
+export const Default = Template.bind({})
+
+export const TargetBlank = Template.bind({})
+TargetBlank.args = {
+  target:'_blank'
+}
+
+export const SubLinkButton = Template.bind({})
+SubLinkButton.args = {
+  backgroundColor: 'white',
+  color: 'vue-blue',
+  iconName: 'note',
+}

packages/ui/components/LinkButton.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ButtonHTMLAttributes, ref, computed } from 'vue'
+import CssResetButton from './CssResetButton.vue'
+import Icon from './Icon.vue'
+import type { Color as ColorType, IconName } from '@vuejs-jp/model'
+import { useColor } from '@vuejs-jp/composable'
+
+type _LinkButtonProps = Omit<ButtonHTMLAttributes, 'onClick'>
+interface LinkButtonProps extends /* @vue-ignore */ _LinkButtonProps {
+  backgroundColor: ColorType
+  color: ColorType
+  href: string
+  target: string
+  iconName: IconName
+}
+const props = defineProps<LinkButtonProps>()
+
+const { color } = useColor()
+
+const hover = ref(false)
+const hoverIn = () => {
+  hover.value = true
+}
+const hoverOut = () => {
+  hover.value = false
+}
+const style = computed(() =>{
+  if (hover.value){
+    return { 
+      color: color(props.backgroundColor),
+      backgroundColor: color(props.color),
+      borderSize:'1px',
+      borderColor:props.backgroundColor
+    }
+  }
+  return { 
+    backgroundColor: color(props.backgroundColor),
+    color: color(props.color)
+  }
+})
+const iconColor = computed(() =>{
+  if (hover.value){
+    return props.backgroundColor
+  }
+  return props.color
+})
+</script>
+
+<template>
+  <a :href="props.href" :target="target" @mouseover="hoverIn" @mouseleave="hoverOut" @focus="{}" @blur="{}">
+    <CssResetButton 
+      type="button"
+      :style="style"
+      class="link-button"
+      :="props"
+    >
+      <Icon
+        :color="iconColor"
+        :name="props.iconName"
+        class="icon"
+      />
+      <slot />
+    </CssResetButton>
+  </a>
+</template>
+
+<style scoped>
+.link-button {
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 22px 66px;
+  border-radius: 40px;
+  font-weight: bold;
+  font-size: 20px;  
+  cursor: pointer;
+  border-style: solid;
+}
+.link-button:hover {
+  transition: .2s;
+}
+.icon {
+  margin-right: 8px;
+}
+</style>