feat: form-field-textarea web component

nl-design-system · Aug 18, 2021 · 3c7d809 · 3c7d809
1 parent a190636
commit 3c7d809
Show file tree

Hide file tree

Showing 7 changed files with 242 additions and 18 deletions.
diff --git a/components/form-field-textarea/stencil.scss b/components/form-field-textarea/stencil.scss
@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+@import "../form-label/bem";
+@import "../form-field/bem";
+@import "../textarea/bem";
diff --git a/components/form-field-textarea/stencil.stories.mdx b/components/form-field-textarea/stencil.stories.mdx
@@ -0,0 +1,160 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Robbert Broersma
+-->
+
+import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
+
+export const Template = ({
+  disabled = false,
+  invalid = false,
+  label = "",
+  placeholder = "",
+  readOnly = false,
+  required = false,
+  value = "",
+}) =>
+  `<utrecht-form-field-textarea${disabled ? ' disabled="true"' : ""}${invalid ? ' invalid="true"' : ""}${
+    placeholder ? ` placeholder="${placeholder}"` : ""
+  }${readOnly ? ' readonly="true"' : ""}${required ? ' required="true"' : ""}${
+    value ? ` value="${value}"` : ""
+  }>${label}</utrecht-form-field-textarea>`;
+
+<Meta
+  title="Web Component/Form field with textarea"
+  argTypes={{
+    disabled: {
+      description: "Disabled",
+      control: "boolean",
+    },
+    invalid: {
+      description: "Invalid",
+      control: "boolean",
+    },
+    label: {
+      description: "Set the content of the label",
+      control: "text",
+    },
+    placeholder: {
+      description: "Placeholder",
+      control: "text",
+    },
+    readOnly: {
+      description: "Read-only",
+      control: "boolean",
+    },
+    required: {
+      description: "Required",
+      control: "boolean",
+    },
+    value: {
+      description: "Value",
+      control: "text",
+    },
+  }}
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => Template(args),
+    },
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+  }}
+/>
+
+# Form field with textarea
+
+<Canvas>
+  <Story
+    name="Form field with textarea"
+    args={{
+      disabled: false,
+      invalid: false,
+      label: "Message",
+      placeholder: "",
+      readOnly: false,
+      required: false,
+      value: "Lorem ipsum dolor sit amet",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Form field with textarea" />
+
+## States
+
+### Disabled
+
+<Canvas>
+  <Story
+    name="Disabled"
+    args={{
+      disabled: true,
+      label: "Message",
+      value: "Lorem ipsum dolor sit amet",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Invalid
+
+<Canvas>
+  <Story
+    name="Invalid"
+    args={{
+      invalid: true,
+      label: "Message",
+      value: "Lorem ipsum dolor sit amet",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Read-only
+
+<Canvas>
+  <Story
+    name="Read-only"
+    args={{
+      required: true,
+      label: "Message",
+      value: "Lorem ipsum dolor sit amet",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Required
+
+<Canvas>
+  <Story
+    name="Required"
+    args={{
+      required: true,
+      label: "Message",
+      value: "Lorem ipsum dolor sit amet",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Placeholder
+
+<Canvas>
+  <Story
+    name="Placeholder"
+    args={{
+      label: "Message",
+      placeholder: "Lorem ipsum dolor sit amet",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
diff --git a/components/form-field-textarea/stencil.tsx b/components/form-field-textarea/stencil.tsx
@@ -0,0 +1,59 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import { Component, Event, EventEmitter, Prop, h } from "@stencil/core";
+import clsx from "clsx";
+
+@Component({
+  tag: "utrecht-form-field-textarea",
+  styleUrl: "stencil.scss",
+  shadow: true,
+})
+export class FormFieldTextarea {
+  @Prop({ reflect: true }) disabled: boolean = false;
+  @Prop({ reflect: true }) invalid: boolean = false;
+  @Prop({ attribute: "readonly", reflect: true }) readOnly: boolean = false;
+  @Prop() placeholder: string = "";
+  @Prop({ reflect: true }) required: boolean = false;
+  @Prop() value: string = "";
+  @Event() utrechtBlur: EventEmitter;
+  @Event() utrechtChange: EventEmitter;
+  @Event() utrechtFocus: EventEmitter;
+  @Event() utrechtInput: EventEmitter;
+
+  render() {
+    const { disabled, invalid, placeholder, readOnly, required, value } = this;
+
+    return (
+      <div class="utrecht-form-field utrecht-form-field--textarea">
+        <textarea
+          id="input"
+          class={clsx(
+            "utrecht-textarea",
+            disabled && "utrecht-textarea--disabled",
+            invalid && "utrecht-textarea--invalid",
+            readOnly && "utrecht-textarea--readonly"
+          )}
+          disabled={disabled}
+          placeholder={placeholder || null}
+          readonly={readOnly}
+          required={required}
+          onBlur={(evt) => this.utrechtBlur.emit(evt)}
+          onChange={(evt) => this.utrechtChange.emit(evt)}
+          onFocus={(evt) => this.utrechtFocus.emit(evt)}
+          onInput={(evt) => {
+            this.value = (evt.target as HTMLTextAreaElement).value;
+            this.utrechtInput.emit(evt);
+          }}
+        >
+          {value}
+        </textarea>
+        <label class="utrecht-form-field-textarea__label utrecht-form-label" htmlFor="input">
+          <slot></slot>
+        </label>
+      </div>
+    );
+  }
+}
diff --git a/components/form-field-textbox/stencil.stories.mdx b/components/form-field-textbox/stencil.stories.mdx
@@ -150,7 +150,7 @@ export const Template = ({
       placeholder: "",
       readOnly: false,
       required: false,
-      value: "",
+      value: "Lorem ipsum dolor sit amet",
       type: "",
     }}
   >
@@ -162,20 +162,6 @@ export const Template = ({
 
 ## States
 
-### Checked
-
-<Canvas>
-  <Story
-    name="Checked"
-    args={{
-      checked: true,
-      label: "Message",
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
 ### Disabled
 
 <Canvas>
@@ -184,6 +170,7 @@ export const Template = ({
     args={{
       disabled: true,
       label: "Message",
+      value: "Lorem ipsum dolor sit amet",
     }}
   >
     {Template.bind({})}
@@ -198,6 +185,7 @@ export const Template = ({
     args={{
       invalid: true,
       label: "Message",
+      value: "Lorem ipsum dolor sit amet",
     }}
   >
     {Template.bind({})}
@@ -212,6 +200,7 @@ export const Template = ({
     args={{
       required: true,
       label: "Message",
+      value: "Lorem ipsum dolor sit amet",
     }}
   >
     {Template.bind({})}
@@ -227,7 +216,7 @@ export const Template = ({
       autoComplete: "new-password",
       label: "New password",
       type: "password",
-      value: "secret",
+      value: "Lorem ipsum dolor sit amet",
     }}
   >
     {Template.bind({})}
@@ -241,7 +230,7 @@ export const Template = ({
     name="Placeholder"
     args={{
       label: "Message",
-      placeholder: "Hello, ...",
+      placeholder: "Lorem ipsum dolor sit amet",
     }}
   >
     {Template.bind({})}

diff --git a/packages/component-library-formio/src/index.ts b/packages/component-library-formio/src/index.ts
@@ -54,6 +54,7 @@ export const sanitizeConfig = {
     'utrecht-checkbox',
     'utrecht-document',
     'utrecht-form-field-checkbox',
+    'utrecht-form-field-textarea',
     'utrecht-form-field-textbox',
     'utrecht-heading',
     'utrecht-heading-1',

diff --git a/packages/web-component-library-angular/src/index.module.ts b/packages/web-component-library-angular/src/index.module.ts
@@ -10,6 +10,7 @@ import {
   UtrechtDocument,
   UtrechtFormFieldCheckbox,
   UtrechtFormFieldDescription,
+  UtrechtFormFieldTextarea,
   UtrechtFormFieldTextbox,
   UtrechtHeading,
   UtrechtHeading1,
@@ -50,6 +51,7 @@ const components = [
   UtrechtDocument,
   UtrechtFormFieldCheckbox,
   UtrechtFormFieldDescription,
+  UtrechtFormFieldTextarea,
   UtrechtFormFieldTextbox,
   UtrechtHeading,
   UtrechtHeading1,

diff --git a/packages/web-component-library-stencil/stencil.config.ts b/packages/web-component-library-stencil/stencil.config.ts
@@ -9,7 +9,12 @@ import { vueOutputTarget } from '@stencil/vue-output-target';
 
 const valueAccessorConfigs: ValueAccessorConfig = [
   {
-    elementSelectors: ['utrecht-textarea', 'utrecht-textbox', 'utrecht-form-field-textbox'],
+    elementSelectors: [
+      'utrecht-textarea',
+      'utrecht-textbox',
+      'utrecht-form-field-textarea',
+      'utrecht-form-field-textbox',
+    ],
     event: 'utrechtInput',
     targetAttr: 'value',
     type: 'text',