fix: add autocomplete attribute to input and textarea

libs/core/src/components.d.ts

@@ -375,6 +375,10 @@ export namespace Components {
         "width"?: number;
     }
     interface PdsInput {
+        /**
+          * Specifies if and how the browser provides `autocomplete` assistance for the field.
+         */
+        "autocomplete": string;
         /**
           * A unique identifier used for the underlying component `id` attribute.
          */
@@ -752,6 +756,10 @@ export namespace Components {
         "variant": 'primary' | 'availability' | 'filter';
     }
     interface PdsTextarea {
+        /**
+          * Specifies if and how the browser provides `autocomplete` assistance for the field.
+         */
+        "autocomplete": string;
         /**
           * A unique identifier used for the underlying component `id` attribute.
          */
@@ -1641,6 +1649,10 @@ declare namespace LocalJSX {
         "width"?: number;
     }
     interface PdsInput {
+        /**
+          * Specifies if and how the browser provides `autocomplete` assistance for the field.
+         */
+        "autocomplete"?: string;
         /**
           * A unique identifier used for the underlying component `id` attribute.
          */
@@ -2055,6 +2067,10 @@ declare namespace LocalJSX {
         "variant": 'primary' | 'availability' | 'filter';
     }
     interface PdsTextarea {
+        /**
+          * Specifies if and how the browser provides `autocomplete` assistance for the field.
+         */
+        "autocomplete"?: string;
         /**
           * A unique identifier used for the underlying component `id` attribute.
          */

libs/core/src/components/pds-input/docs/pds-input.mdx

@@ -120,3 +120,4 @@ import { components } from '../../../../dist/docs.json';
 ## Additional Resources
 
 [MDN Web Docs: Input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
+[MDN Web Docs: HTML autocomplete attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)

libs/core/src/components/pds-input/pds-input.tsx

@@ -8,6 +8,12 @@ import { PdsLabel } from '../_internal/pds-label/pds-label';
   shadow: true,
 })
 export class PdsInput {
+
+  /**
+   * Specifies if and how the browser provides `autocomplete` assistance for the field.
+   */
+  @Prop() autocomplete: string;
+
   /**
    * A unique identifier used for the underlying component `id` attribute.
    */
@@ -93,6 +99,7 @@ export class PdsInput {
           <input class="pds-input__field"
             aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}
             aria-invalid={this.invalid ? "true" : undefined}
+            autocomplete={this.autocomplete}
             disabled={this.disabled}
             id={this.componentId}
             name={this.name}

libs/core/src/components/pds-input/readme.md

@@ -9,6 +9,7 @@
 
 | Property                   | Attribute        | Description                                                                                                  | Type      | Default     |
 | -------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------ | --------- | ----------- |
+| `autocomplete`             | `autocomplete`   | Specifies if and how the browser provides `autocomplete` assistance for the field.                           | `string`  | `undefined` |
 | `componentId` _(required)_ | `component-id`   | A unique identifier used for the underlying component `id` attribute.                                        | `string`  | `undefined` |
 | `disabled`                 | `disabled`       | Indicates whether or not the input field is disabled.                                                        | `boolean` | `undefined` |
 | `errorMessage`             | `error-message`  | Specifies the error message and provides an error-themed treatment to the field.                             | `string`  | `undefined` |

libs/core/src/components/pds-input/stories/pds-input.stories.js

@@ -5,6 +5,7 @@ import { withActions } from '@storybook/addon-actions/decorator';
 export default {
   argTypes: extractArgTypes('pds-input'),
   args: {
+    autocomplete: null,
     disabled: false,
     errorMessage: null,
     helperMessage: null,
@@ -26,6 +27,7 @@ export default {
 }
 
 const BaseTemplate = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
   disabled="${args.disabled}"
   error-message="${args.errorMessage}"
   helper-message="${args.helperMessage}"
@@ -108,3 +110,11 @@ Invalid.args = {
   type: 'email',
   value: 'Frank Dux'
 };
+
+export const Autocomplete = BaseTemplate.bind({});
+Autocomplete.args = {
+  componentId: 'pds-input-autocomplete',
+  label: 'First name',
+  type: 'text',
+  autocomplete: 'given-name',
+};

libs/core/src/components/pds-input/test/pds-input.spec.tsx

@@ -133,6 +133,25 @@ describe('pds-input', () => {
     `);
   });
 
+  it('renders autocomplete attribute', async () => {
+    const { root } = await newSpecPage({
+      components: [PdsInput],
+      html: `<pds-input component-id="field-1" value="Frank Dux" autocomplete="given-name"></pds-input>`
+    });
+
+    expect(root).toEqualHtml(`
+    <pds-input component-id="field-1" value="Frank Dux" autocomplete="given-name">
+      <mock:shadow-root>
+        <div class="pds-input">
+          <label htmlFor="field-1">
+          </label>
+          <input id="field-1" class="pds-input__field" type="text" value="Frank Dux" autocomplete="given-name" />
+        </div>
+      </mock:shadow-root>
+    </pds-input>
+    `);
+  });
+
   it('renders a helper message', async () => {
     const { root } = await newSpecPage({
       components: [PdsInput],

libs/core/src/components/pds-textarea/docs/pds-textarea.mdx

@@ -119,3 +119,7 @@ The rows property is used to pass a number of expected rows visible within the t
 }}>
   <pds-textarea name="Rows" label="Name" rows="4" component-id="textarea-rows"></pds-textarea>
 </DocCanvas>
+
+## Additional Resources
+
+[MDN Web Docs: HTML autocomplete attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)

libs/core/src/components/pds-textarea/pds-textarea.tsx

@@ -11,6 +11,11 @@ import { PdsLabel } from '../_internal/pds-label/pds-label';
 export class PdsTextarea {
   @Element() el: HTMLPdsTextareaElement;
 
+  /**
+   * Specifies if and how the browser provides `autocomplete` assistance for the field.
+   */
+  @Prop() autocomplete: string;
+
   /**
    * A unique identifier used for the underlying component `id` attribute.
    */
@@ -113,6 +118,7 @@ export class PdsTextarea {
           <textarea
             aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}
             aria-invalid={this.invalid ? "true" : undefined}
+            autocomplete={this.autocomplete}
             class={this.textareaClassNames()}
             disabled={this.disabled}
             id={this.componentId}

libs/core/src/components/pds-textarea/readme.md

@@ -9,6 +9,7 @@
 
 | Property                   | Attribute        | Description                                                                                         | Type      | Default            |
 | -------------------------- | ---------------- | --------------------------------------------------------------------------------------------------- | --------- | ------------------ |
+| `autocomplete`             | `autocomplete`   | Specifies if and how the browser provides `autocomplete` assistance for the field.                  | `string`  | `undefined`        |
 | `componentId` _(required)_ | `component-id`   | A unique identifier used for the underlying component `id` attribute.                               | `string`  | `undefined`        |
 | `disabled`                 | `disabled`       | Indicates whether or not the textarea is disabled                                                   | `boolean` | `false`            |
 | `errorMessage`             | `error-message`  | Specifies the error text and provides an error-themed treatment to the field                        | `string`  | `undefined`        |

libs/core/src/components/pds-textarea/stories/pds-textarea.stories.js

@@ -4,6 +4,7 @@ import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
   args: {
+    autocomplete: null,
     componentId: null,
     disabled: false,
     errorMessage: null,
@@ -28,6 +29,7 @@ export default {
 }
 
 const BaseTemplate = (args) => html`<pds-textarea
+  autocomplete="${args.autocomplete}"
   component-id="${args.componentId}"
   disabled="${args.disabled}"
   error-message="${args.errorMessage}"
@@ -47,46 +49,46 @@ const BaseTemplate = (args) => html`<pds-textarea
 export const Default = BaseTemplate.bind({});
 Default.args = {
   componentId: 'pds-textarea-default-example',
-  label: 'Name',
+  label: 'Message',
   name: 'Default',
 };
 
 export const Rows = BaseTemplate.bind({});
 Rows.args = {
   componentId: 'pds-textarea-rows-example',
-  label: 'Name',
+  label: 'Message',
   name: 'Rows',
   rows: 4,
 };
 
 export const Required = BaseTemplate.bind({});
 Required.args = {
   componentId: 'pds-textarea-required-example',
-  label: 'Name',
+  label: 'Message',
   name: 'Required',
   required: true,
 };
 
 export const Placeholder = BaseTemplate.bind({});
 Placeholder.args = {
   componentId: 'pds-textarea-placeholder-example',
-  label: 'Name',
+  label: 'Message',
   name: 'Placeholder',
-  placeholder: 'Placeholder...'
+  placeholder: 'Enter a message...'
 };
 
 export const Disabled = BaseTemplate.bind({});
 Disabled.args = {
   componentId: 'pds-textarea-disabled-example',
   disabled: true,
-  label: 'Name',
+  label: 'Message',
   name: 'Disabled',
 };
 
 export const Readonly = BaseTemplate.bind({});
 Readonly.args = {
   componentId: 'pds-textarea-readonly-example',
-  label: 'Name',
+  label: 'Message',
   name: 'Readonly',
   readonly: true,
   value: 'Readonly Value'
@@ -96,7 +98,7 @@ export const Message = BaseTemplate.bind({});
 Message.args = {
   componentId: 'pds-textarea-helper-example',
   helperMessage: 'Helper message text',
-  label: 'Name',
+  label: 'Message',
   name: 'Message',
 };
 
@@ -105,7 +107,16 @@ Invalid.args = {
   componentId: 'pds-textarea-error-example',
   errorMessage: 'Error',
   invalid: true,
-  label: 'Name',
+  label: 'Message',
   name: 'Error',
   required: true,
 };
+
+export const Autocomplete = BaseTemplate.bind({});
+Autocomplete.args = {
+  componentId: 'pds-textarea-autocomplete',
+  label: 'Message',
+  name: 'message',
+  autocomplete: 'on',
+  placeholder: 'Enter a message...',
+};

libs/core/src/components/pds-textarea/test/pds-textarea.spec.tsx

@@ -210,6 +210,23 @@ describe('pds-textarea', () => {
     `);
   });
 
+  it('renders autocomplete attribute when property is passed', async () => {
+    const {root} = await newSpecPage({
+      components: [PdsTextarea],
+      html: `<pds-textarea autocomplete="off"></pds-textarea>`,
+    });
+
+    expect(root).toEqualHtml(`
+      <pds-textarea autocomplete="off">
+        <mock:shadow-root>
+          <div class="pds-textarea">
+            <textarea class="pds-textarea__field" autocomplete="off"></textarea>
+          </div>
+        </mock:shadow-root>
+      </pds-textarea>
+    `);
+  });
+
   it('renders a helper and error message and assigns aria-description to the input', async () => {
     const {root} = await newSpecPage({
       components: [PdsTextarea],