chore(ui): Add storybook and styles for Autocomplete #26376

* fix (autocomplete styles): focus state

* fix (autocomplete styles): add styles for clear icon

* dev (autocomplete story): add controls for the autocomplete

core-web/apps/dotcms-ui/src/stories/primeng/form/AutoComplete.stories.ts

@@ -1,11 +1,35 @@
 // also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
 import { moduleMetadata } from '@storybook/angular';
 import { Meta, Story } from '@storybook/angular/types-6-0';
+import { UPDATE_STORY_ARGS } from '@storybook/core-events';
 
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { BrowserModule } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';
 
+import type { Channel } from '@storybook/channels';
+
+const originalData = [
+    { name: 'Afghanistan', code: 'AF' },
+    { name: 'Albania', code: 'AL' },
+    { name: 'Venezuela', code: 'VE' },
+    { name: 'Vietnam', code: 'VN' },
+    { name: 'Zimbabwe', code: 'ZW' },
+    { name: 'Zambia', code: 'ZM' },
+    { name: 'Yemen', code: 'YE' },
+    { name: 'Western Sahara', code: 'EH' },
+    { name: 'Wallis and Futuna', code: 'WF' },
+    { name: 'Virgin Islands (U.S.)', code: 'VI' },
+    { name: 'Virgin Islands (British)', code: 'VG' },
+    { name: 'Viet Nam', code: 'VN' },
+    { name: 'Vanuatu', code: 'VU' },
+    { name: 'Uzbekistan', code: 'UZ' },
+    { name: 'Uruguay', code: 'UY' },
+    { name: 'United States', code: 'US' },
+    { name: 'United States Minor Outlying Islands', code: 'UM' }
+];
+
 export default {
     title: 'PrimeNG/Form/AutoComplete',
     component: AutoComplete,
@@ -19,51 +43,95 @@ export default {
     },
     decorators: [
         moduleMetadata({
-            imports: [AutoCompleteModule, BrowserAnimationsModule]
+            imports: [AutoCompleteModule, NoopAnimationsModule, BrowserModule]
         })
     ],
     args: {
-        results: [
-            { name: 'Afghanistan', code: 'AF' },
-            { name: 'Albania', code: 'AL' },
-            { name: 'Venezuela', code: 'VE' }
-        ],
-        // tslint:disable-next-line: typedef
-        search() {
-            this.results = [
-                { name: 'Afghanistan', code: 'AF' },
-                { name: 'Albania', code: 'AL' },
-                { name: 'Venezuela', code: 'VE' }
-            ];
+        suggestions: [...originalData],
+        dropdown: true,
+        multiple: false,
+        field: 'name',
+        showClear: false,
+        dropdownIcon: 'pi pi-chevron-down',
+        delay: 300,
+        unique: true
+    },
+
+    argTypes: {
+        dropdown: {
+            control: 'boolean',
+            description: 'Show or hide the dropdown button'
+        },
+        showClear: {
+            control: 'boolean',
+            description: 'Show or hide the clear button'
+        },
+        multiple: {
+            control: 'boolean',
+            description: 'Allow multiple values'
+        },
+        unique: {
+            control: 'boolean',
+            description: 'Allow only unique values',
+            if: {
+                arg: 'multiple'
+            }
+        },
+        field: {
+            control: 'select',
+            options: ['name', 'code'],
+            description: 'Field to use as label of the object'
+        },
+        dropdownIcon: {
+            control: 'text',
+            description: 'Icon to use in the dropdown button (check primeNG icons)'
+        },
+        delay: {
+            control: 'number',
+            description: 'Delay in milliseconds before the suggestions are shown'
+        },
+        suggestions: {
+            table: {
+                disable: true
+            }
         }
     }
 } as Meta;
 
-const AutocompleteTemplate = `
-<p-autoComplete
-(completeMethod)="search($event)"
-[(ngModel)]="text"
-[dropdown]="true"
-[suggestions]="results"
-field="name"
-></p-autoComplete>
-`;
-
-const Template: Story<AutoComplete> = (props: AutoComplete) => {
-    const template = AutocompleteTemplate;
-
+// First arguments is the Args from Meta, the second one is the whole storybook context
+export const Main: Story = (args, { id }) => {
     return {
-        props,
-        template
-    };
-};
+        props: {
+            ...args,
+            filterCountries: ({ query }: { query: string }) => {
+                // This hack is to emit a change and update the story args https://github.com/storybookjs/storybook/issues/17089#issuecomment-1663403902
+                const filtered = [...originalData].filter((country: { name: string }) =>
+                    country.name.toLowerCase().includes(query.toLowerCase())
+                );
 
-export const Primary: Story = Template.bind({});
+                const channel = (
+                    window as Window & typeof globalThis & { __STORYBOOK_ADDONS_CHANNEL__: Channel }
+                ).__STORYBOOK_ADDONS_CHANNEL__;
 
-Primary.parameters = {
-    docs: {
-        source: {
-            code: AutocompleteTemplate
-        }
-    }
+                channel.emit(UPDATE_STORY_ARGS, {
+                    storyId: id,
+                    updatedArgs: {
+                        suggestions: filtered // This way the reference of suggestions change in runtime and primeng finish its change detection lifecycle
+                    }
+                });
+            }
+        },
+        template: `<p-autoComplete
+        (completeMethod)="filterCountries($event)"
+        [dropdown]="dropdown"
+        [suggestions]="suggestions"
+        [field]="field"
+        appendTo="body"
+        [multiple]="multiple"
+        [showClear]="showClear"
+        [dropdownIcon]="dropdownIcon"
+        [delay]="delay"
+        [unique]="unique"
+        ></p-autoComplete>`
+    };
 };

core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_autocomplete.scss

@@ -1,14 +1,22 @@
 @use "variables" as *;
 @import "common";
 
+p-autocomplete.p-inputwrapper-focus {
+    .p-autocomplete {
+        @extend #form-field-focus;
+    }
+}
+
 .p-autocomplete {
     @extend #form-field-extend;
     height: auto;
     padding-right: 0;
 
-    .p-autocomplete-loader {
+    .p-autocomplete-loader,
+    .p-autocomplete-clear-icon {
         right: $spacing-2;
         color: $color-palette-primary;
+        margin-top: -0.6rem; // Couldn't use flex for this
     }
 
     .p-autocomplete-input {
@@ -25,7 +33,8 @@
     }
 
     &.p-autocomplete-dd {
-        .p-autocomplete-loader {
+        .p-autocomplete-loader,
+        .p-autocomplete-clear-icon {
             right: $spacing-7;
         }
     }