refactor(pie-textarea): DSW-2469 replace label with form-label compon…

…ent (#2054) * refactor(pie-textarea): DSW-2469 replace label with form-label component * refactor(pie-textarea): DSW-2469 update yarn lock * fix(pie-textarea): DSW-2469 update changeset * fix(pie-textarea): DSW-2469 update var name * fix(pie-textarea): DSW-2469 update var name * fix(pie-docs): DSW-2469 update the alt message * fix(pie-docs): DSW-2469 update the alt message * fix(pie-textarea): DSW-2469 add assistive text as a dep --------- Co-authored-by: Xander Marjoram <[email protected]>
justeattakeaway · Nov 14, 2024 · 6454457 · 6454457
1 parent 669e7c0
commit 6454457
Show file tree

Hide file tree

Showing 14 changed files with 168 additions and 237 deletions.
diff --git a/.changeset/tiny-books-reply.md b/.changeset/tiny-books-reply.md
@@ -0,0 +1,7 @@
+---
+"@justeattakeaway/pie-textarea": minor
+"pie-storybook": minor
+"pie-docs": minor
+---
+
+[Updated] - remove the `label` prop and use the pie-form-label component instead.
diff --git a/apps/pie-docs/src/assets/img/components/textarea/character-counter.svg b/apps/pie-docs/src/assets/img/components/textarea/character-counter.svg
diff --git a/apps/pie-docs/src/componentStatusData.js b/apps/pie-docs/src/componentStatusData.js
@@ -1938,7 +1938,7 @@ const rows = [
         },
         {
             resource: resourceTypes.WEB_COMPONENTS,
-            status: statusTypes.PLANNED,
+            status: webComponentStatuses['pie-textarea'],
         },
         {
             resource: resourceTypes.VUE,

diff --git a/apps/pie-docs/src/components/textarea/code/code.md b/apps/pie-docs/src/components/textarea/code/code.md
@@ -74,7 +74,6 @@ import '@justeattakeaway/pie-webc/components/textarea.js';
     name="my-textarea"
     placeholder="Please enter a value"
     autocomplete="on"
-    label="Label"
     value=""
     autoFocus
     readonly>
@@ -90,7 +89,6 @@ import { PieTextarea } from '@justeattakeaway/pie-webc/react/textarea.js';
     name="my-textarea"
     placeholder="Please enter a value"
     autocomplete="on"
-    label="Label"
     value=""
     autoFocus
     readonly>
@@ -105,7 +103,6 @@ import { PieTextarea } from '@justeattakeaway/pie-textarea/dist/react';
     name="my-textarea"
     placeholder="Please enter a value"
     autocomplete="on"
-    label="Label"
     value=""
     autoFocus
     readonly>

diff --git a/apps/pie-docs/src/components/textarea/code/props.json b/apps/pie-docs/src/components/textarea/code/props.json
@@ -86,22 +86,6 @@
         ]
       }
     ],
-    [
-      "label",
-      {
-        "type": "code",
-        "item": [
-          "string"
-        ]
-      },
-      "The label of the textarea field.",
-      {
-        "type": "code",
-        "item": [
-          "\"\""
-        ]
-      }
-    ],
     [
       "name",
       {

diff --git a/apps/pie-docs/src/components/textarea/overview/overview.md b/apps/pie-docs/src/components/textarea/overview/overview.md
@@ -279,7 +279,7 @@ The character limit and counter is used to let users know how long their entry c
 
 {% notification {
   type: "warning",
-  message: "Once the user reaches the character limit, they can’t enter any more characters."
+  message: "This is the suggested pattern for development. The functionality can be handled by consumers if required."
 } %}
 
 {% contentLayout %}
@@ -294,7 +294,7 @@ The character limit and counter is used to let users know how long their entry c
     {% contentPageImage {
       src: "../../../assets/img/components/textarea/character-counter.svg",
       width: "256px",
-      alt: "A textarea component with a label, and text inside it. The character counter on the top right of the component shows fifty out of fifty characters."
+      alt: "A textarea component with a label and text inside it. The character counter at the top right shows 93 out of 50 characters. At the bottom, assistive text in an error state indicates that the character limit has been exceeded by 43 characters."
     } %}
   {% endcontentItem %}
 {% endcontentLayout %}

diff --git a/apps/pie-storybook/stories/pie-text-input.stories.ts b/apps/pie-storybook/stories/pie-text-input.stories.ts
@@ -9,6 +9,7 @@ import {
     type TextInputProps as TextInputPropsBase, types, inputModes, statusTypes, sizes, defaultProps,
 } from '@justeattakeaway/pie-text-input';
 import '@justeattakeaway/pie-button';
+import '@justeattakeaway/pie-link';
 import '@justeattakeaway/pie-form-label';
 import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js';
 import '@justeattakeaway/pie-icons-webc/dist/IconEmail.js';

diff --git a/apps/pie-storybook/stories/pie-textarea.stories.ts b/apps/pie-storybook/stories/pie-textarea.stories.ts
@@ -10,70 +10,14 @@ import {
 } from '@justeattakeaway/pie-textarea';
 import '@justeattakeaway/pie-button';
 import '@justeattakeaway/pie-form-label';
+import '@justeattakeaway/pie-link';
 
 import { createStory, type TemplateFunction } from '../utilities';
 
 type TextareaStoryMeta = Meta<TextareaProps>;
 
 const defaultArgs: TextareaProps = { ...defaultProps, name: 'testName' };
 
-const Template = ({
-    disabled,
-    resize,
-    size,
-    required,
-    readonly,
-    value,
-    defaultValue,
-    name,
-    autocomplete,
-    autoFocus,
-    label,
-    assistiveText,
-    status,
-    placeholder,
-}: TextareaProps) => {
-    const [, updateArgs] = UseArgs();
-
-    function onInput (event: InputEvent) {
-        const textareaElement = event.target as HTMLTextAreaElement;
-        updateArgs({ value: textareaElement?.value });
-
-        action('input')({
-            data: event.data,
-            value: textareaElement.value,
-        });
-    }
-
-    function onChange (event: CustomEvent) {
-        action('change')({
-            detail: event.detail,
-        });
-    }
-
-    return html`
-        <pie-textarea
-            id="${ifDefined(name)}"
-            name="${ifDefined(name)}"
-            .value="${value}"
-            defaultValue="${ifDefined(defaultValue)}"
-            ?disabled="${disabled}"
-            size="${ifDefined(size)}"
-            resize="${ifDefined(resize)}"
-            autocomplete="${ifDefined(autocomplete)}"
-            placeholder="${ifDefined(placeholder)}"
-            ?autoFocus="${autoFocus}"
-            ?readonly="${readonly}"
-            ?required="${required}"
-            label="${ifDefined(label)}"
-            @input="${onInput}"
-            @change="${onChange}"
-            assistiveText="${ifDefined(assistiveText)}"
-            status=${ifDefined(status)}>
-        </pie-textarea>
-    `;
-};
-
 const textareaStoryMeta: TextareaStoryMeta = {
     title: 'Textarea',
     component: 'pie-textarea',
@@ -165,13 +109,6 @@ const textareaStoryMeta: TextareaStoryMeta = {
                 summary: 'off',
             },
         },
-        label: {
-            description: 'The label for the textarea field.',
-            control: 'text',
-            defaultValue: {
-                summary: defaultProps.label,
-            },
-        },
         placeholder: {
             description: 'The placeholder text to display when the textarea is empty.',
             control: 'text',
@@ -189,6 +126,61 @@ const textareaStoryMeta: TextareaStoryMeta = {
     },
 };
 
+const Template = ({
+    disabled,
+    resize,
+    size,
+    required,
+    readonly,
+    value,
+    defaultValue,
+    name,
+    autocomplete,
+    autoFocus,
+    assistiveText,
+    status,
+    placeholder,
+}: TextareaProps) => {
+    const [, updateArgs] = UseArgs();
+
+    function onInput (event: InputEvent) {
+        const textareaElement = event.target as HTMLTextAreaElement;
+        updateArgs({ value: textareaElement?.value });
+
+        action('input')({
+            data: event.data,
+            value: textareaElement.value,
+        });
+    }
+
+    function onChange (event: CustomEvent) {
+        action('change')({
+            detail: event.detail,
+        });
+    }
+
+    return html`
+        <pie-textarea
+            id="${ifDefined(name)}"
+            name="${ifDefined(name)}"
+            .value="${value}"
+            defaultValue="${ifDefined(defaultValue)}"
+            ?disabled="${disabled}"
+            size="${ifDefined(size)}"
+            resize="${ifDefined(resize)}"
+            autocomplete="${ifDefined(autocomplete)}"
+            placeholder="${ifDefined(placeholder)}"
+            ?autoFocus="${autoFocus}"
+            ?readonly="${readonly}"
+            ?required="${required}"
+            @input="${onInput}"
+            @change="${onChange}"
+            assistiveText="${ifDefined(assistiveText)}"
+            status=${ifDefined(status)}>
+        </pie-textarea>
+    `;
+};
+
 const ExampleFormTemplate: TemplateFunction<TextareaProps> = () => html`
     <style>
         .form {
@@ -225,15 +217,22 @@ const ExampleFormTemplate: TemplateFunction<TextareaProps> = () => html`
     </form>
 `;
 
+const WithLabelTemplate: TemplateFunction<TextareaProps> = (props: TextareaProps) => html`
+        <p>Please note, the label is a separate component. See <pie-link href="/?path=/story/form-label">pie-form-label</pie-link>.</p>
+        <pie-form-label for="${ifDefined(props.name)}">Label</pie-form-label>
+        ${Template(props)}
+    `;
+
 const CreateTextareaStory = createStory<TextareaProps>(Template, defaultArgs);
 const CreateTextareaStoryWithForm = createStory<TextareaProps>(ExampleFormTemplate, defaultArgs);
+const CreateTextareaStoryWithLabel = (props: TextareaProps) => createStory<TextareaProps>(WithLabelTemplate, props);
 
 export const Default = CreateTextareaStory({}, {
     argTypes: {
         defaultValue: { table: { readonly: true }, description: 'This prop only works when the textarea is inside a form. To interact with this, view the Example Form story.' },
     },
 });
-
+export const WithLabel = CreateTextareaStoryWithLabel(defaultArgs)();
 export const ExampleForm = CreateTextareaStoryWithForm();
 
 export default textareaStoryMeta;
diff --git a/packages/components/pie-textarea/package.json b/packages/components/pie-textarea/package.json
@@ -42,7 +42,7 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-form-label": "0.14.4",
+    "@justeattakeaway/pie-assistive-text": "0.8.0",
     "@justeattakeaway/pie-webc-core": "0.24.2",
     "lodash.throttle": "4.1.1"
   },

diff --git a/packages/components/pie-textarea/src/defs.ts b/packages/components/pie-textarea/src/defs.ts
@@ -71,11 +71,6 @@ export interface TextareaProps {
      */
     required?: boolean;
 
-    /**
-    * The label text for the textarea field.
-    */
-    label?: string;
-
     /**
      * The placeholder text to display when the textarea is empty.
      */
@@ -94,7 +89,6 @@ export const defaultProps: DefaultProps = {
     disabled: false,
     size: 'medium',
     resize: 'auto',
-    label: '',
     value: '',
     placeholder: '',
     status: 'default',

diff --git a/packages/components/pie-textarea/src/index.ts b/packages/components/pie-textarea/src/index.ts
@@ -8,7 +8,6 @@ import { live } from 'lit/directives/live.js';
 import throttle from 'lodash.throttle';
 
 import '@justeattakeaway/pie-assistive-text';
-import '@justeattakeaway/pie-form-label';
 import {
     validPropertyValues, RtlMixin, defineCustomElement, FormControlMixin, wrapNativeEvent, type PIEInputElement,
 } from '@justeattakeaway/pie-webc-core';
@@ -49,9 +48,6 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
     @validPropertyValues(componentSelector, resizeModes, defaultProps.resize)
     public resize = defaultProps.resize;
 
-    @property({ type: String })
-    public label = defaultProps.label;
-
     @property({ type: Boolean })
     public readonly = defaultProps.readonly;
 
@@ -181,12 +177,6 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
         window.removeEventListener('resize', () => this.handleResize());
     }
 
-    renderLabel (label: string) {
-        return label?.length
-            ? html`<pie-form-label for="${componentSelector}">${label}</pie-form-label>`
-            : nothing;
-    }
-
     renderAssistiveText () {
         if (!this.assistiveText) {
             return nothing;
@@ -214,7 +204,6 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
             placeholder,
             value,
             required,
-            label,
             status,
             assistiveText,
         } = this;
@@ -229,7 +218,6 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
         };
 
         return html`<div>
-            ${this.renderLabel(label)}
             <div
                 class="${classMap(classes)}"
                 data-test-id="pie-textarea-wrapper">

diff --git a/packages/components/pie-textarea/test/component/pie-textarea.spec.ts b/packages/components/pie-textarea/test/component/pie-textarea.spec.ts
@@ -1,6 +1,5 @@
 import { expect, test } from '@sand4rt/experimental-ct-web';
 import { getFormDataObject, setupFormDataExtraction } from '@justeattakeaway/pie-webc-testing/src/helpers/form-helpers.ts';
-import { PieFormLabel } from '@justeattakeaway/pie-form-label';
 import { PieTextarea, type TextareaProps } from '../../src/index.ts';
 
 import { statusTypes } from '../../src/defs.ts';
@@ -14,9 +13,6 @@ test.describe('PieTextarea - Component tests', () => {
     test.beforeEach(async ({ mount }) => {
         const component = await mount(PieTextarea);
         await component.unmount();
-
-        const label = await mount(PieFormLabel);
-        await label.unmount();
     });
 
     test('should render successfully', async ({ mount, page }) => {
@@ -336,34 +332,6 @@ test.describe('PieTextarea - Component tests', () => {
             });
         });
 
-        test.describe('label', () => {
-            test('should not render a label when the label is absent', async ({ mount }) => {
-                // Arrange
-                const component = await mount(PieTextarea, {});
-
-                // Act
-                const labelNodes = component.locator('pie-form-label');
-
-                // Assert
-                await expect(labelNodes).toHaveCount(0);
-            });
-
-            test('should render a label when the label is present', async ({ mount }) => {
-                // Arrange
-                const component = await mount(PieTextarea, {
-                    props: {
-                        label: 'foo label',
-                    } as TextareaProps,
-                });
-
-                // Act
-                const label = component.getByText('foo label');
-
-                // Assert
-                await expect(label).toBeVisible();
-            });
-        });
-
         test.describe('assistiveText', () => {
             test('should NOT render the assistive-text component if this property is not provided', async ({ mount, page }) => {
                 // Arrange