feat: improve the vue textarea component (#1107)

* feat: improve the vue textarea component * docs: add the vue textarea component stories * docs: remove live textarea binding
nl-design-system · Aug 4, 2022 · 6cf0c99 · 6cf0c99
1 parent d8e595a
commit 6cf0c99
Show file tree

Hide file tree

Showing 7 changed files with 350 additions and 23 deletions.
diff --git a/packages/component-library-vue/src/UtrechtTextarea.vue b/packages/component-library-vue/src/UtrechtTextarea.vue
@@ -1,32 +1,30 @@
-<script setup lang="ts">
-  defineEmits<(_type: "update:modelValue", _value: unknown) => void>();
+<script lang="ts">
+  import { defineComponent } from "vue";
+  import { useModelWrapper } from "./helpers/modelWrapper";
 
-  defineProps<{
-    disabled?: boolean;
-    invalid?: boolean;
-    modelValue?: string;
-    readonly?: boolean;
-    required?: boolean;
-    type?: string;
-  }>();
+  export default defineComponent({
+    props: {
+      invalid: { type: Boolean, required: false },
+      modelValue: { type: [String, Number, Boolean], require: false, default: "" },
+    },
+    setup(props, { emit }) {
+      return {
+        value: useModelWrapper(props, emit),
+      };
+    },
+  });
 </script>
 
 <template>
   <textarea
-    class="utrecht-textarea"
+    v-model="value"
     :aria-invalid="invalid || undefined"
-    :class="{
-      'utrecht-textarea--disabled': disabled,
-      'utrecht-textarea--invalid': invalid,
-      'utrecht-textarea--required': required,
-      'utrecht-textarea--readonly': readonly,
-    }"
-    :disabled="disabled"
-    :readonly="readonly"
-    :required="required"
-    :value="modelValue"
-    @input="$emit('update:modelValue', (($event as InputEvent).target as HTMLTextAreaElement).value)"
-  ></textarea>
+    :class="[
+    { 'utrecht-textarea--invalid': invalid },
+    'utrecht-textarea',
+    'utrecht-textarea--html-textarea'
+    ]"
+  />
 </template>
 
 <style src="@utrecht/components/textarea/css/index.scss"></style>
diff --git a/packages/storybook-vue/src/stories/Textarea/Textarea.stories.mdx b/packages/storybook-vue/src/stories/Textarea/Textarea.stories.mdx
@@ -0,0 +1,65 @@
+import { action } from "@storybook/addon-actions";
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+import { Textarea } from "@utrecht/component-library-vue";
+import { argTypes } from "./argTypes.ts";
+
+<Meta id="vue-textarea" title="Vue.js Component/Textarea" component={Textarea} argTypes={argTypes} />
+
+# Textarea
+
+export const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Textarea },
+  setup() {
+    return { args };
+  },
+  template: `<Textarea v-bind="args" @change="action" />`,
+  methods: { action: action("change") },
+});
+
+## Default
+
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      placeholder: "Default Textarea",
+      name: "default-textarea",
+      id: "default-textarea",
+    }}
+    parameters={{
+      docs: {
+        source: {
+          code: `<Textarea placeholder="Default Textarea" name="default-textarea" id="default-textarea" />`,
+        },
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## With Placeholder
+
+<Canvas>
+  <Story
+    name="With Placeholder"
+    args={{
+      placeholder: "With Placeholder",
+      name: "with-placeholder-textarea",
+      id: "with-placeholder-textarea",
+      modelValue: "",
+    }}
+    parameters={{
+      docs: {
+        source: {
+          code: `<Textarea placeholder="With Placeholder" name="with-placeholder-textarea" id="with-placeholder-textarea" value=""/>`,
+        },
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable of={Textarea} />
diff --git a/packages/storybook-vue/src/stories/Textarea/TextareaBinding.stories.mdx b/packages/storybook-vue/src/stories/Textarea/TextareaBinding.stories.mdx
@@ -0,0 +1,42 @@
+import { action } from "@storybook/addon-actions";
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+import { Textarea } from "@utrecht/component-library-vue";
+import { argTypes } from "./argTypes.ts";
+
+<Meta id="vue-textarea-with-form-binding" title="Vue.js Component/Textarea" component={Textarea} argTypes={argTypes} />
+
+# Textarea
+
+export const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Textarea },
+  setup() {
+    return { args };
+  },
+  template: `<Textarea v-bind="args" @update:modelValue="action" />`,
+  methods: { action: action("modelValue") },
+});
+
+## With form binding
+
+<Canvas>
+  <Story
+    name="With form binding"
+    args={{
+      placeholder: "With form binding",
+      name: "with-form-binding-textarea",
+      id: "with-form-binding-textarea",
+    }}
+    parameters={{
+      docs: {
+        source: {
+          code: `<Textarea placeholder="With form binding" name="with-form-binding-textarea" id="with-form-binding-textarea" />`,
+        },
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable of={Textarea} />
diff --git a/packages/storybook-vue/src/stories/Textarea/TextareaStates.stories.mdx b/packages/storybook-vue/src/stories/Textarea/TextareaStates.stories.mdx
@@ -0,0 +1,159 @@
+import { action } from "@storybook/addon-actions";
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+import { Textarea } from "@utrecht/component-library-vue";
+import { argTypes } from "./argTypes.ts";
+
+<Meta id="vue-textarea-states" title="Vue.js Component/Textarea/States" component={Textarea} argTypes={argTypes} />
+
+# Textarea States
+
+export const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Textarea },
+  setup() {
+    return { args };
+  },
+  template: `<Textarea v-bind="args" @change="action" />`,
+  methods: { action: action("change") },
+});
+
+## Disabled
+
+<Canvas>
+  <Story
+    name="Disabled"
+    args={{
+      placeholder: "Default Textarea",
+      name: "default-textarea",
+      id: "default-textarea",
+      disabled: true,
+    }}
+    parameters={{
+      docs: {
+        source: {
+          code: `<Textarea placeholder="Disabled Textarea" name="disabled-textarea" id="disabled-textarea" :disabled="true" />`,
+        },
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Invalid
+
+<Canvas>
+  <Story
+    name="Invalid"
+    args={{
+      placeholder: "Invalid Textarea",
+      name: "invalid-textarea",
+      id: "invalid-textarea",
+      invalid: true,
+    }}
+    parameters={{
+      docs: {
+        source: {
+          code: `<Textarea placeholder="Invalid Textarea" name="invalid-textarea" id="invalid-textarea" :invalid="true"/>`,
+        },
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Read-only
+
+<Canvas>
+  <Story
+    name="Read-only"
+    args={{
+      placeholder: "Read-only Textarea",
+      name: "readonly-textarea",
+      id: "readonly-textarea",
+      readonly: true,
+    }}
+    parameters={{
+      docs: {
+        source: {
+          code: `<Textarea placeholder="Read-only Textarea" name="readonly-textarea" id="readonly-textarea" :readonly="true" />`,
+        },
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Required
+
+<Canvas>
+  <Story
+    name="Required"
+    args={{
+      placeholder: "Required Textarea",
+      name: "required-textarea",
+      id: "required-textarea",
+      required: true,
+      modelValue: "",
+    }}
+    parameters={{
+      docs: {
+        source: {
+          code: `<Textarea placeholder="Required Textarea" name="required-textarea" id="required-textarea" :required="true" />`,
+        },
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Focus
+
+<Canvas>
+  <Story
+    name="Focus"
+    args={{
+      placeholder: "Focus Textarea",
+      name: "focus-textarea",
+      id: "focus-textarea",
+    }}
+    parameters={{
+      pseudo: { focus: true },
+      docs: {
+        source: {
+          code: `<Textarea placeholder="Focus Textarea" name="focus-textarea" id="focus-textarea" />`,
+        },
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Hover
+
+<Canvas>
+  <Story
+    name="Hover"
+    args={{
+      placeholder: "Hover Textarea",
+      name: "hover-textarea",
+      id: "hover-textarea",
+    }}
+    parameters={{
+      pseudo: { hover: true },
+      docs: {
+        source: {
+          code: `<Textarea placeholder="Hover Textarea" name="hover-textarea" id="hover-textarea" />`,
+        },
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable of={Textarea} />
diff --git a/packages/storybook-vue/src/stories/Textarea/argTypes.ts b/packages/storybook-vue/src/stories/Textarea/argTypes.ts
@@ -0,0 +1,35 @@
+export const argTypes = {
+  disabled: {
+    name: 'disabled',
+    type: { name: 'boolean', required: false },
+    defaultValue: false,
+  },
+  invalid: {
+    name: 'invalid',
+    type: { name: 'boolean', required: false },
+    defaultValue: false,
+  },
+  required: {
+    name: 'required',
+    type: { name: 'boolean', required: false },
+    defaultValue: false,
+  },
+  readonly: {
+    name: 'readonly',
+    type: { name: 'boolean', required: false },
+    defaultValue: false,
+  },
+  modelValue: {
+    name: 'modelValue',
+    type: { name: 'string', required: false },
+    defaultValue: 'The Quick Brown Fox Jumps Over The Lazy Dog',
+  },
+  rows: {
+    name: 'rows',
+    type: { name: 'number', required: false },
+  },
+  cols: {
+    name: 'cols',
+    type: { name: 'number', required: false },
+  },
+};
diff --git a/packages/storybook-vue/src/stories/Textarea/docs.stories.mdx b/packages/storybook-vue/src/stories/Textarea/docs.stories.mdx
@@ -0,0 +1,8 @@
+import { Description, Meta } from "@storybook/addon-docs";
+import document from "@utrecht/components/textarea/README.md";
+
+<Meta title="Vue.js Component/Textarea/Documentation" />
+
+<!-- @license CC0-1.0 -->
+
+<Description markdown={document} />
diff --git a/packages/storybook-vue/src/stories/Textarea/tokens.stories.mdx b/packages/storybook-vue/src/stories/Textarea/tokens.stories.mdx
@@ -0,0 +1,20 @@
+<!-- @license CC0-1.0 -->
+
+import { Meta } from "@storybook/addon-docs";
+import tokensDefinition from "@utrecht/components/textarea/tokens.json";
+import tokens from "@utrecht/design-tokens/dist/index.json";
+import { ComponentTokensSection } from "@utrecht/documentation/components/ComponentTokensSection.jsx";
+
+<Meta
+  id="vue-textarea--design-tokens"
+  title="Vue.js Component/Textarea/Design Tokens"
+  parameters={{
+    status: {
+      type: "ALPHA",
+    },
+  }}
+/>
+
+# Textarea Design Tokens
+
+<ComponentTokensSection tokens={tokens} definition={tokensDefinition} component="utrecht-textarea" />