fix(#2867): docs autocomplete prop for input, textarea, dropdown

src/components/component-properties/ComponentProperties.tsx

@@ -1,4 +1,5 @@
 import { GoabBadge, GoabContainer, GoabText } from "@abgov/react-components";
+import { GoabBadgeType } from "@abgov/ui-components-common";
 import { useContext, useEffect, useState } from "react";
 
 import css from "./ComponentProperties.module.css";
@@ -10,6 +11,7 @@ export type ComponentProperty = {
   required?: boolean;
   description?: string;
   defaultValue?: string;
+  badge?: { content: string; type: GoabBadgeType };
 };
 
 interface Props {
@@ -19,7 +21,7 @@ interface Props {
 }
 
 export const ComponentProperties = (props: Props) => {
-  const {language, version} = useContext(LanguageVersionContext);
+  const { language, version } = useContext(LanguageVersionContext);
 
   const [filteredProperties, setFilteredProperties] = useState<ComponentProperty[]>([]);
 
@@ -45,20 +47,17 @@ export const ComponentProperties = (props: Props) => {
   return (
     <>
       <h2
-        id={props.heading ? `components-${dasherize(props.heading)}` : "component-properties"} 
-        className="hidden" 
-        aria-hidden="true"
-      >
+        id={props.heading ? `components-${dasherize(props.heading)}` : "component-properties"}
+        className="hidden"
+        aria-hidden="true">
         {props.heading || "Properties"}
-      </h2> <GoabText size="heading-m" mb="l" mt="2xl">
-      {props.heading || "Properties"}
-    </GoabText>
-      <GoabContainer
-        type="interactive"
-      >
+      </h2>{" "}
+      <GoabText size="heading-m" mb="l" mt="2xl">
+        {props.heading || "Properties"}
+      </GoabText>
+      <GoabContainer type="interactive">
         <div>
           {filteredProperties.map((props, index) => (
-
             <ComponentProperty key={index} props={props} />
           ))}
         </div>
@@ -78,6 +77,7 @@ function ComponentProperty({ props }: ComponentPropertyProps) {
         <code className={`${css.code} ${css.name}`}>{props.name}</code>
 
         {props.required && <GoabBadge type="important" content="Required" />}
+        {props.badge && <GoabBadge type={props.badge.type} content={props.badge.content} />}
 
         {props.type && (
           <code className={`${css.code} ${css.type}`}>
@@ -90,11 +90,8 @@ function ComponentProperty({ props }: ComponentPropertyProps) {
         {props.description}
         {props.defaultValue && (
           <span>
-                        <br/>
-            {" "}
-            Defaults to <code className={css.code}>{props.defaultValue}</code>.
+            <br /> Defaults to <code className={css.code}>{props.defaultValue}</code>.
           </span>
-
         )}
       </div>
     </div>

src/routes/components/Dropdown.tsx

@@ -2,10 +2,11 @@ import { useContext, useState } from "react";
 import {
   GoabBadge,
   GoabDropdown,
-  GoabDropdownItem, GoabDropdownProps,
+  GoabDropdownItem,
+  GoabDropdownProps,
   GoabFormItem,
   GoabTab,
-  GoabTabs
+  GoabTabs,
 } from "@abgov/react-components";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import ICONS from "./icons.json";
@@ -19,11 +20,15 @@ import { ComponentContent } from "@components/component-content/ComponentContent
 import { DropdownExamples } from "@examples/dropdown/DropdownExamples";
 import { GoabDropdownOnChangeDetail } from "@abgov/ui-components-common";
 import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-import { LegacyMarginProperty, MarginProperty } from "@components/component-properties/common-properties.ts";
+import {
+  LegacyMarginProperty,
+  MarginProperty,
+} from "@components/component-properties/common-properties.ts";
 import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx";
 import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx";
 
-const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=105-42";
+const FIGMA_LINK =
+  "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=105-42";
 
 // == Page props ==
 const componentName = "Dropdown";
@@ -41,10 +46,10 @@ type CastingType = {
   value: string;
   [key: string]: unknown;
   onChange: (event: GoabDropdownOnChangeDetail) => void;
-}
+};
 
 export default function DropdownPage() {
-  const {version} = useContext(LanguageVersionContext);
+  const { version } = useContext(LanguageVersionContext);
   const [dropdownProps, setDropdownProps] = useState<ComponentPropsType>({
     name: "item",
     value: "",
@@ -82,7 +87,9 @@ export default function DropdownPage() {
     { label: "Filterable", type: "boolean", name: "filterable", value: false },
     { label: "ARIA label", type: "string", name: "ariaLabel", value: "" },
   ]);
-  const { formItemBindings, formItemProps, onFormItemChange } = useSandboxFormItem({ label: "Basic dropdown" });
+  const { formItemBindings, formItemProps, onFormItemChange } = useSandboxFormItem({
+    label: "Basic dropdown",
+  });
 
   const oldDropdownProperties: ComponentProperty[] = [
     {
@@ -217,6 +224,12 @@ export default function DropdownPage() {
       type: "string",
       description: "Stores the value of the item selected from the dropdown.",
     },
+    {
+      name: "autoComplete",
+      type: "string",
+      description: "Specifies the autocomplete attribute for the dropdown input. Native only.",
+    },
+
     {
       name: "leadingIcon",
       type: "GoAIconType",
@@ -315,15 +328,15 @@ export default function DropdownPage() {
       lang: "react",
       type: "append | prepend | reset",
       description: "The mount type for the dropdown item.",
-      defaultValue: "append"
+      defaultValue: "append",
     },
     {
-      name:"mount",
+      name: "mount",
       lang: "angular",
       type: "append | prepend | reset",
       description: "The mount type for the dropdown item.",
-      defaultValue: "append"
-    }
+      defaultValue: "append",
+    },
   ];
   const dropdownItemProperties: ComponentProperty[] = [
     {
@@ -348,8 +361,8 @@ export default function DropdownPage() {
       name: "mountType",
       type: "GoabDropdownItemMountType (append | prepend | reset)",
       description: "The mount type for the dropdown item.",
-      defaultValue: "append"
-    }
+      defaultValue: "append",
+    },
   ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
@@ -376,10 +389,11 @@ export default function DropdownPage() {
         githubLink="Dropdown"
       />
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-
         <GoabTabs initialTab={1}>
           <GoabTab heading="Code playground">
-            <h2 id="component" style={{ display: "none" }}>Playground</h2>
+            <h2 id="component" style={{ display: "none" }}>
+              Playground
+            </h2>
             <Sandbox
               properties={dropdownBindings}
               formItemProperties={formItemBindings}
@@ -396,7 +410,10 @@ export default function DropdownPage() {
               </GoabFormItem>
             </Sandbox>
 
-            <ComponentProperties properties={dropdownProperties} oldProperties={oldDropdownProperties} />
+            <ComponentProperties
+              properties={dropdownProperties}
+              oldProperties={oldDropdownProperties}
+            />
 
             <ComponentProperties
               heading="Dropdown item properties"
@@ -411,8 +428,7 @@ export default function DropdownPage() {
                 Examples
                 <GoabBadge type="information" content="2" />
               </>
-            }
-          >
+            }>
             <DropdownExamples />
           </GoabTab>
 

src/routes/components/TextArea.tsx

@@ -5,13 +5,7 @@ import {
   ComponentProperty,
 } from "@components/component-properties/ComponentProperties.tsx";
 import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
-import {
-  GoabBadge,
-  GoabFormItem,
-  GoabTab,
-  GoabTabs,
-  GoabTextarea,
-} from "@abgov/react-components";
+import { GoabBadge, GoabFormItem, GoabTab, GoabTabs, GoabTextarea } from "@abgov/react-components";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 import { useSandboxFormItem } from "@hooks/useSandboxFormItem.tsx";
 import { ComponentContent } from "@components/component-content/ComponentContent";
@@ -20,15 +14,16 @@ import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
 import {
   LegacyMarginProperty,
   MarginProperty,
-  TestIdProperty
+  TestIdProperty,
 } from "@components/component-properties/common-properties.ts";
 import { TextAreaExamples } from "@examples/textarea/TextAreaExamples.tsx";
 import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx";
 import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx";
 
 // == Page props ==
 
-const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=133-186";
+const FIGMA_LINK =
+  "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=133-186";
 const componentName = "Text area";
 const description = "A multi-line field where users can input and edit text.";
 const category = Category.INPUTS_AND_ACTIONS;
@@ -45,7 +40,7 @@ type CastingType = {
 };
 
 export default function TextAreaPage() {
-  const {version} = useContext(LanguageVersionContext);
+  const { version } = useContext(LanguageVersionContext);
   const [componentProps, setComponentProps] = useState<CastingType>({
     name: "item",
     value: "",
@@ -255,6 +250,11 @@ export default function TextAreaPage() {
       type: "string",
       description: "Bound to value",
     },
+    {
+      name: "autoComplete",
+      type: "string",
+      description: "Specifies the autocomplete attribute for the textarea input.",
+    },
     {
       name: "placeholder",
       type: "string",
@@ -508,8 +508,7 @@ export default function TextAreaPage() {
                 Examples
                 <GoabBadge type="information" content="2" />
               </>
-            }
-          >
+            }>
             <TextAreaExamples />
           </GoabTab>
 

src/routes/components/TextField.tsx

@@ -451,6 +451,11 @@ export default function TextFieldPage() {
       required: true,
       description: "Name of input value that is received in the onChange event.",
     },
+    {
+      name: "autoComplete",
+      type: "string",
+      description: "Specifies the autocomplete attribute for the input field.",
+    },
     {
       name: "value",
       type: "string||null",