add required option

src/autocomplete/Autocomplete.tsx

@@ -120,6 +120,10 @@ type autocompleteProps = {
    * onRemoveAll of the selected listItems
    */
   onRemoveAll?: () => void;
+  /**
+   * Specifies if that field needs to be filled or not
+   */
+  required?:  boolean;
 };
 
 //remove the default style from a button
@@ -161,6 +165,7 @@ export const Autocomplete = ({
   onRemove,
   onRemoveAll,
   onFocus,
+  required = false,
   props,
 }: autocompleteProps) => {
   const [activeOption, setActiveOption] = useState<number>(0);
@@ -280,6 +285,7 @@ export const Autocomplete = ({
           type="text"
           value={userInput}
           onChange={handleChange}
+          required = {required}
           inputProps={{
             onKeyDown: onKeyDown,
             autoComplete: 'off',
@@ -314,6 +320,7 @@ export const Autocomplete = ({
         type="text"
         value={userInput}
         onChange={handleChange}
+        required = {required}
         inputProps={{
           onKeyDown: onKeyDown,
           autoComplete: 'off',

src/autocomplete/__tests__/Autocomplete.test.tsx

@@ -353,4 +353,16 @@ describe('FormInput', () => {
 
     expect(onRemoveAllHandler).toHaveBeenCalled();
   });
+
+  it('should check that required attribute is defaulted to false', () => {
+    render(<Autocomplete options={[]} />);
+    const input: any = screen.getByRole('textbox');
+    expect(input.required).toBe(false);
+  });
+
+  it('should check that if required is set to true, input child is rendered with the attribute', () => {
+    render(<Autocomplete options={[]} required />);
+    const input: any = screen.getByRole('textbox');
+    expect(input.required).toBe(true);
+  });
 });

src/formInput/FormInput.tsx

@@ -103,6 +103,10 @@ type FormInputProps = {
    * allow to define an hint
    */
   hint?: HintProps;
+   /**
+   * Specifies if that field needs to be filled or not
+   */
+    required?:  boolean;
 };
 
 export enum ErrorPosition {
@@ -133,6 +137,7 @@ export const FormInput = ({
   containerClassName,
   containerClassNameError,
   labelClassName,
+  required,
   hint,
   inputDivProps = { style: { display: 'flex' } },
 }: FormInputProps) => {
@@ -202,6 +207,7 @@ export const FormInput = ({
             type={type}
             value={value}
             onChange={handleChange}
+            required = {required}
             className={inputClassName}
             aria-label={ariaLabel || name}
             {...inputProps}
@@ -216,6 +222,7 @@ export const FormInput = ({
           type={type}
           value={value}
           onChange={handleChange}
+          required = {required}
           className={inputClassName}
           aria-label={ariaLabel || name}
           {...inputProps}

stories/Autocomplete/Documentation.stories.mdx

@@ -48,6 +48,7 @@ An example with all the available properties is (the only mandatory property is
   resultActiveClass="resultActiveClass"
   notFoundText="No fruit found"
   onSelected={handleSelected}
+  required = {false}
 />
 ```
 

stories/Autocomplete/Styled.stories.mdx

@@ -159,6 +159,47 @@ The list of available options are:
   </Story>
 </Canvas>
 
+
+# Required
+
+<Canvas>
+  <Story name="required">
+    {() => {
+      const handleSelected = value => {
+        console.log(value);
+      };
+      return (
+        <form>
+        <Autocomplete
+          options={[
+            'Papaya',
+            'Persimmon',
+            'Paw Paw',
+            'Prickly Pear',
+            'Peach',
+            'Pomegranate',
+            'Pineapple',
+          ]}
+          minCharsBeforeSearch={1}
+          debounceMs={100}
+          hintText="Select your fruit"
+          hintClass="autocomplete__label"
+          inputProps={{ className: 'govuk-input' }}
+          resultUlClass="autocomplete__menu"
+          resultlLiClass="autocomplete__option"
+          resultNoOptionClass="resultNoOptionClass"
+          resultActiveClass="autocomplete__option"
+          notFoundText="No fruit found"
+          onSelected={handleSelected}
+          required 
+        />
+        <button type="submit">Search</button>
+        </form>
+      );
+    }}
+  </Story>
+</Canvas>
+
 # Properties
 
 <Props of={Autocomplete} />

stories/Input/Documentation.stories.mdx

@@ -37,6 +37,7 @@ An example with all the available properties is:
   inputClassName="someClassName"
   containerClassName="myClassName"
   labelClassName="myClassName"
+  required = {required}
   inputProps={{
     id: 'password'
     placeholder: 'enter your password',

stories/liveEdit/AutocompleteLive.tsx

@@ -33,7 +33,7 @@ function AutocompleteDemo() {
       resultActiveClass=""
       inputProps={{}}
       notFoundText="No fruit found"
-      onSelected={handleSelected}  
+      onSelected={handleSelected} 
     />
   )
 }