From d773c4829492b2ecba8ab17889429cc7d3d2f3b9 Mon Sep 17 00:00:00 2001
From: Micah Jones <48889844+micahjones13@users.noreply.github.com>
Date: Tue, 31 Oct 2023 10:51:19 -0600
Subject: [PATCH] feat(input): add autocomplete (#1254)

* feat(input): add autocomplete

* docs: changeset
---
 .changeset/nine-baboons-sleep.md              |  8 ++++
 packages/web-components/src/components.d.ts   |  8 ++++
 .../src/components/rux-input/readme.md        | 37 ++++++++++---------
 .../src/components/rux-input/rux-input.tsx    |  8 ++++
 .../components/rux-input/test/input.spec.ts   | 36 +++++++++---------
 .../src/components/rux-timeline/readme.md     | 17 +++++----
 .../rux-timeline/rux-track/readme.md          |  7 ++++
 7 files changed, 77 insertions(+), 44 deletions(-)
 create mode 100644 .changeset/nine-baboons-sleep.md

diff --git a/.changeset/nine-baboons-sleep.md b/.changeset/nine-baboons-sleep.md
new file mode 100644
index 000000000..0658a9549
--- /dev/null
+++ b/.changeset/nine-baboons-sleep.md
@@ -0,0 +1,8 @@
+---
+"@astrouxds/angular": minor
+"@astrouxds/astro-web-components": minor
+"angular-workspace": minor
+"@astrouxds/react": minor
+---
+
+Added autocomplete property to rux-input
diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
index 2b0eea4de..f8e3fcc75 100644
--- a/packages/web-components/src/components.d.ts
+++ b/packages/web-components/src/components.d.ts
@@ -19380,6 +19380,10 @@ export namespace Components {
     interface RuxIndeterminateProgress {
     }
     interface RuxInput {
+        /**
+          * The inputs autocomplete attribute. In password inputs, this attribute gets set to 'off'.
+         */
+        "autocomplete": string;
         /**
           * Disables the button via HTML disabled attribute. Button takes on a distinct visual state. Cursor uses the not-allowed system replacement and all keyboard and mouse events are ignored.
          */
@@ -54907,6 +54911,10 @@ declare namespace LocalJSX {
     interface RuxIndeterminateProgress {
     }
     interface RuxInput {
+        /**
+          * The inputs autocomplete attribute. In password inputs, this attribute gets set to 'off'.
+         */
+        "autocomplete"?: string;
         /**
           * Disables the button via HTML disabled attribute. Button takes on a distinct visual state. Cursor uses the not-allowed system replacement and all keyboard and mouse events are ignored.
          */
diff --git a/packages/web-components/src/components/rux-input/readme.md b/packages/web-components/src/components/rux-input/readme.md
index 81cdd773e..0a0da1830 100644
--- a/packages/web-components/src/components/rux-input/readme.md
+++ b/packages/web-components/src/components/rux-input/readme.md
@@ -5,24 +5,25 @@
 
 ## Properties
 
-| Property      | Attribute     | Description                                                                                                                                                                             | Type                                                                                                                | Default     |
-| ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `disabled`    | `disabled`    | Disables the button via HTML disabled attribute. Button takes on a distinct visual state. Cursor uses the not-allowed system replacement and all keyboard and mouse events are ignored. | `boolean`                                                                                                           | `false`     |
-| `errorText`   | `error-text`  | The validation error text                                                                                                                                                               | `string \| undefined`                                                                                               | `undefined` |
-| `helpText`    | `help-text`   | The help or explanation text                                                                                                                                                            | `string \| undefined`                                                                                               | `undefined` |
-| `invalid`     | `invalid`     | Presentational only. Renders the Input Field as invalid.                                                                                                                                | `boolean`                                                                                                           | `false`     |
-| `label`       | `label`       | The input label text. For HTML content, use the `label` slot instead.                                                                                                                   | `string \| undefined`                                                                                               | `undefined` |
-| `max`         | `max`         | The input max attribute                                                                                                                                                                 | `string \| undefined`                                                                                               | `undefined` |
-| `min`         | `min`         | The input min attribute                                                                                                                                                                 | `string \| undefined`                                                                                               | `undefined` |
-| `name`        | `name`        | The input name                                                                                                                                                                          | `string`                                                                                                            | `''`        |
-| `placeholder` | `placeholder` | The input placeholder text                                                                                                                                                              | `string \| undefined`                                                                                               | `undefined` |
-| `readonly`    | `readonly`    | The inputs readonly attribute                                                                                                                                                           | `boolean`                                                                                                           | `false`     |
-| `required`    | `required`    | Sets the input as required                                                                                                                                                              | `boolean`                                                                                                           | `false`     |
-| `size`        | `size`        | Control the padding around the input field                                                                                                                                              | `"large" \| "medium" \| "small"`                                                                                    | `'medium'`  |
-| `spellcheck`  | `spellcheck`  | The input's spellcheck attribute                                                                                                                                                        | `boolean`                                                                                                           | `false`     |
-| `step`        | `step`        | The input step attribute                                                                                                                                                                | `string \| undefined`                                                                                               | `undefined` |
-| `type`        | `type`        | The input type                                                                                                                                                                          | `"date" \| "datetime-local" \| "email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "time" \| "url"` | `'text'`    |
-| `value`       | `value`       | The input value                                                                                                                                                                         | `string`                                                                                                            | `''`        |
+| Property       | Attribute      | Description                                                                                                                                                                             | Type                                                                                                                | Default     |
+| -------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `autocomplete` | `autocomplete` |                                                                                                                                                                                         | `string`                                                                                                            | `'off'`     |
+| `disabled`     | `disabled`     | Disables the button via HTML disabled attribute. Button takes on a distinct visual state. Cursor uses the not-allowed system replacement and all keyboard and mouse events are ignored. | `boolean`                                                                                                           | `false`     |
+| `errorText`    | `error-text`   | The validation error text                                                                                                                                                               | `string \| undefined`                                                                                               | `undefined` |
+| `helpText`     | `help-text`    | The help or explanation text                                                                                                                                                            | `string \| undefined`                                                                                               | `undefined` |
+| `invalid`      | `invalid`      | Presentational only. Renders the Input Field as invalid.                                                                                                                                | `boolean`                                                                                                           | `false`     |
+| `label`        | `label`        | The input label text. For HTML content, use the `label` slot instead.                                                                                                                   | `string \| undefined`                                                                                               | `undefined` |
+| `max`          | `max`          | The input max attribute                                                                                                                                                                 | `string \| undefined`                                                                                               | `undefined` |
+| `min`          | `min`          | The input min attribute                                                                                                                                                                 | `string \| undefined`                                                                                               | `undefined` |
+| `name`         | `name`         | The input name                                                                                                                                                                          | `string`                                                                                                            | `''`        |
+| `placeholder`  | `placeholder`  | The input placeholder text                                                                                                                                                              | `string \| undefined`                                                                                               | `undefined` |
+| `readonly`     | `readonly`     | The inputs readonly attribute                                                                                                                                                           | `boolean`                                                                                                           | `false`     |
+| `required`     | `required`     | Sets the input as required                                                                                                                                                              | `boolean`                                                                                                           | `false`     |
+| `size`         | `size`         | Control the padding around the input field                                                                                                                                              | `"large" \| "medium" \| "small"`                                                                                    | `'medium'`  |
+| `spellcheck`   | `spellcheck`   | The input's spellcheck attribute                                                                                                                                                        | `boolean`                                                                                                           | `false`     |
+| `step`         | `step`         | The input step attribute                                                                                                                                                                | `string \| undefined`                                                                                               | `undefined` |
+| `type`         | `type`         | The input type                                                                                                                                                                          | `"date" \| "datetime-local" \| "email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "time" \| "url"` | `'text'`    |
+| `value`        | `value`        | The input value                                                                                                                                                                         | `string`                                                                                                            | `''`        |
 
 
 ## Events
diff --git a/packages/web-components/src/components/rux-input/rux-input.tsx b/packages/web-components/src/components/rux-input/rux-input.tsx
index 6ca0134a4..df79150d9 100644
--- a/packages/web-components/src/components/rux-input/rux-input.tsx
+++ b/packages/web-components/src/components/rux-input/rux-input.tsx
@@ -143,6 +143,11 @@ export class RuxInput implements FormFieldInterface {
      */
     @Prop() readonly = false
 
+    /**
+     * The inputs autocomplete attribute. In password inputs, this attribute gets set to 'off'.
+     */
+    @Prop() autocomplete = 'off'
+
     /**
      * Fired when the value of the input changes - [HTMLElement/input_event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
      */
@@ -244,6 +249,7 @@ export class RuxInput implements FormFieldInterface {
         this.type === 'password'
             ? (this.togglePassword = true)
             : (this.togglePassword = false)
+        if (this.type === 'password') this.autocomplete = 'off'
     }
 
     private _handleTogglePassword() {
@@ -281,6 +287,7 @@ export class RuxInput implements FormFieldInterface {
             readonly,
             togglePassword,
             isPasswordVisible,
+            autocomplete,
         } = this
 
         renderHiddenInput(true, el, name, value, disabled)
@@ -360,6 +367,7 @@ export class RuxInput implements FormFieldInterface {
                             onBlur={_onBlur}
                             onFocus={_onFocus}
                             part="input"
+                            autocomplete={autocomplete}
                         ></input>
                         {togglePassword ? (
                             <button
diff --git a/packages/web-components/src/components/rux-input/test/input.spec.ts b/packages/web-components/src/components/rux-input/test/input.spec.ts
index a11de309e..353924dbf 100644
--- a/packages/web-components/src/components/rux-input/test/input.spec.ts
+++ b/packages/web-components/src/components/rux-input/test/input.spec.ts
@@ -299,24 +299,24 @@ test.describe('Input with form', () => {
         await expect(spellCheckInput).toHaveAttribute('spellcheck', 'true')
     })
     //! Uncomment autocomplete tests when the attribute is added back in and working.
-    // test('applies autocomplete prop to shadow input', async ({ page }) => {
-    //     //Arrange
-    //     const autocomplete = page.locator('#autocomplete')
-    //     const autocompleteInput = autocomplete.locator('input').nth(1)
-
-    //     //Assert
-    //     await expect(autocompleteInput).toHaveAttribute('autocomplete', 'on')
-    // })
-    // test('changes autocomplete to false if type is password', async ({
-    //     page,
-    // }) => {
-    //     //Arrange
-    //     const autocomplete = page.locator('#autocomplete-to-off')
-    //     const autocompleteInput = autocomplete.locator('input').nth(1)
-
-    //     //Assert
-    //     await expect(autocompleteInput).toHaveAttribute('autocomplete', 'off')
-    // })
+    test('applies autocomplete prop to shadow input', async ({ page }) => {
+        //Arrange
+        const autocomplete = page.locator('#autocomplete')
+        const autocompleteInput = autocomplete.locator('input').nth(1)
+
+        //Assert
+        await expect(autocompleteInput).toHaveAttribute('autocomplete', 'on')
+    })
+    test('changes autocomplete to off if type is password', async ({
+        page,
+    }) => {
+        //Arrange
+        const autocomplete = page.locator('#autocomplete-to-off')
+        const autocompleteInput = autocomplete.locator('input').nth(1)
+
+        //Assert
+        await expect(autocompleteInput).toHaveAttribute('autocomplete', 'off')
+    })
     test('submits the correct value in type date', async ({ page }) => {
         //Arrange
         const dateType = page.locator('#date-type')
diff --git a/packages/web-components/src/components/rux-timeline/readme.md b/packages/web-components/src/components/rux-timeline/readme.md
index 1e7597970..dee2754da 100644
--- a/packages/web-components/src/components/rux-timeline/readme.md
+++ b/packages/web-components/src/components/rux-timeline/readme.md
@@ -5,14 +5,15 @@
 
 ## Properties
 
-| Property   | Attribute  | Description                                                                                                                       | Type                  | Default     |
-| ---------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
-| `end`      | `end`      | The timeline's end date. Must be an ISO string "2021-02-02T05:00:00Z"                                                             | `string`              | `''`        |
-| `interval` | `interval` | The timeline's date time interval                                                                                                 | `"day" \| "hour"`     | `'hour'`    |
-| `playhead` | `playhead` | The timeline's playhead date time. Must be an ISO string "2021-02-02T05:00:00Z"                                                   | `string \| undefined` | `undefined` |
-| `start`    | `start`    | The timeline's start date. Must be an ISO string "2021-02-02T05:00:00Z"                                                           | `string`              | `''`        |
-| `timezone` | `timezone` | Controls the timezone that the timeline is localized to. Must be an IANA time zone name ("America/New_York") or an offset string. | `string`              | `'UTC'`     |
-| `zoom`     | `zoom`     | The timeline's zoom level.                                                                                                        | `number`              | `1`         |
+| Property             | Attribute              | Description                                                                                                                       | Type                  | Default     |
+| -------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
+| `end`                | `end`                  | The timeline's end date. Must be an ISO string "2021-02-02T05:00:00Z"                                                             | `string`              | `''`        |
+| `hasPlayedIndicator` | `has-played-indicator` | Visually marks past time as played in each track                                                                                  | `boolean`             | `false`     |
+| `interval`           | `interval`             | The timeline's date time interval                                                                                                 | `"day" \| "hour"`     | `'hour'`    |
+| `playhead`           | `playhead`             | The timeline's playhead date time. Must be an ISO string "2021-02-02T05:00:00Z"                                                   | `string \| undefined` | `undefined` |
+| `start`              | `start`                | The timeline's start date. Must be an ISO string "2021-02-02T05:00:00Z"                                                           | `string`              | `''`        |
+| `timezone`           | `timezone`             | Controls the timezone that the timeline is localized to. Must be an IANA time zone name ("America/New_York") or an offset string. | `string`              | `'UTC'`     |
+| `zoom`               | `zoom`                 | The timeline's zoom level.                                                                                                        | `number`              | `1`         |
 
 
 ## Shadow Parts
diff --git a/packages/web-components/src/components/rux-timeline/rux-track/readme.md b/packages/web-components/src/components/rux-timeline/rux-track/readme.md
index d621660b2..3978a62aa 100644
--- a/packages/web-components/src/components/rux-timeline/rux-track/readme.md
+++ b/packages/web-components/src/components/rux-timeline/rux-track/readme.md
@@ -3,6 +3,13 @@
 <!-- Auto Generated Below -->
 
 
+## Properties
+
+| Property   | Attribute  | Description | Type  | Default     |
+| ---------- | ---------- | ----------- | ----- | ----------- |
+| `playhead` | `playhead` |             | `any` | `undefined` |
+
+
 ## Slots
 
 | Slot          | Description         |