chore: Add base components and stories

Also adds tests for applicable items

src/components/BaseButton.stories.js

@@ -0,0 +1,17 @@
+import BaseButton from './BaseButton.vue'
+
+export default {
+  title: 'Base button',
+  component: BaseButton,
+}
+
+const Template = (args) => ({
+  components: { BaseButton },
+  setup() {
+    return { args }
+  },
+  template: `<BaseButton>What a nice label!</BaseButton>`,
+})
+
+export const Primary = Template.bind({})
+Primary.args = {}

src/components/BaseButton.vue

@@ -0,0 +1,5 @@
+<template>
+  <button class="p-2 border border-slate-300">
+    <slot />
+  </button>
+</template>

src/components/BaseLabel.stories.js

@@ -0,0 +1,17 @@
+import BaseLabel from './BaseLabel.vue'
+
+export default {
+  title: 'Base label',
+  component: BaseLabel,
+}
+
+const Template = (args) => ({
+  components: { BaseLabel },
+  setup() {
+    return { args }
+  },
+  template: `<BaseLabel>What a nice label!</BaseLabel>`,
+})
+
+export const Primary = Template.bind({})
+Primary.args = {}

src/components/BaseLabel.vue

@@ -0,0 +1,5 @@
+<template>
+  <label>
+    <slot />
+  </label>
+</template>

src/components/BaseTextArea.stories.js

@@ -0,0 +1,19 @@
+import BaseTextArea from './BaseTextArea.vue'
+
+export default {
+  title: 'Base text area',
+  component: BaseTextArea,
+}
+
+const Template = (args) => ({
+  components: { BaseTextArea },
+  setup() {
+    return { args }
+  },
+  template: `<BaseTextArea v-bind="args" />`,
+})
+
+export const Primary = Template.bind({})
+Primary.args = {
+  modelValue: 'Cool text',
+}

src/components/BaseTextArea.vue

@@ -0,0 +1,13 @@
+<template>
+  <textarea
+    class="m-4 border"
+    rows="4"
+    :value="modelValue"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />
+</template>
+
+<script setup>
+defineProps(['modelValue'])
+defineEmits(['update:modelValue'])
+</script>

src/components/StepInput.spec.js

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest'
+
+import { shallowMount } from '@vue/test-utils'
+
+import StepInput from './StepInput.vue'
+import BaseTextArea from './BaseTextArea.vue'
+import BaseLabel from './BaseLabel.vue'
+
+describe('StepInput', () => {
+  it('passes a formatted id to the BaseTextArea', () => {
+    const wrapper = shallowMount(StepInput, {
+      props: {
+        stepNumber: 99,
+      },
+    })
+
+    expect(wrapper.findComponent(BaseTextArea).attributes('id')).toContain(99)
+  })
+
+  it('passes a formated for attr to the BaseLabel', () => {
+    const wrapper = shallowMount(StepInput, {
+      props: {
+        stepNumber: 99,
+      },
+    })
+
+    expect(wrapper.findComponent(BaseLabel).attributes('for')).toContain(99)
+  })
+})

src/components/StepInput.stories.js

@@ -0,0 +1,20 @@
+import StepInput from './StepInput.vue'
+
+export default {
+  title: 'Step input',
+  component: StepInput,
+}
+
+const Template = (args) => ({
+  components: { StepInput },
+  setup() {
+    return { args }
+  },
+  template: `<StepInput v-bind="args" />`,
+})
+
+export const Primary = Template.bind({})
+Primary.args = {
+  stepLabel: 'First step is best',
+  stepNumber: 99,
+}

src/components/StepInput.vue

@@ -0,0 +1,37 @@
+import BaseLabel from './BaseLabel.vue';
+
+<template>
+  <div class="flex flex-col border">
+    <BaseLabel :for="stepId">{{ stepLabel }}</BaseLabel>
+
+    <BaseTextArea
+      :id="stepId"
+      :modelValue="stepText"
+      @input="$emit('update:stepText', $event.target.value)"
+    />
+  </div>
+</template>
+
+<script setup>
+import BaseLabel from './BaseLabel.vue'
+import BaseTextArea from './BaseTextArea.vue'
+
+const props = defineProps({
+  stepNumber: {
+    type: Number,
+    required: true,
+  },
+  stepLabel: {
+    type: String,
+    default: '',
+  },
+  stepText: {
+    type: String,
+    default: '',
+  },
+})
+
+defineEmits(['update:stepText'])
+
+const stepId = `step-input-${props.stepNumber}`
+</script>