DRAFT - Feature/split autocomplete

.storybook/preview.js

@@ -68,6 +68,8 @@ export const parameters = {
             ['Documentation', 'Live', 'Without style', 'Class based'],
             'Range',
             ['Documentation', 'Live', 'Without style', 'Class based'],
+            'StaticAutocomplete',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
             'Toggle',
             ['Documentation', 'Live', 'Without style', 'Class based'],
             'Tooltip',

example/src/components/StaticAutocompleteDemo.tsx

@@ -0,0 +1,187 @@
+import * as React from 'react';
+import { StaticAutocomplete } from '@capgeminiuk/dcx-react-library';
+
+const handleSearch = (value: string, options: string[]) => {
+  return options
+    .filter((optionsName) =>
+      optionsName.toLowerCase().includes(value.toLowerCase())
+    )
+    .sort((a, b) => {
+      if (a < b) {
+        return -1;
+      }
+      if (a > b) {
+        return 1;
+      }
+      return 0;
+    });
+};
+
+export const StaticAutocompleteDemo = () => {
+  const [selected, setSelected] = React.useState('');
+  const handleSelected = (value: string) => setSelected(value);
+
+  const [serverOptions, setServerOptions] = React.useState<String[]>([]);
+
+  const handleOnChange = (value: string, _options: string[]) => {
+    let result: string[] = []
+    switch (value) {
+      case 'p':
+        result = [
+          'Papaya',
+          'Persimmon',
+          'Paw Paw',
+          'Prickly Pear',
+          'Peach',
+          'Pomegranate',
+          'Pineapple',
+        ];
+        break;
+      case 'pe':
+        result = ['Persimmon', 'Peach'];
+        break;
+      case 'per':
+        result = ['Persimmon'];
+        break;
+      default:
+        result = ['no results'];
+    }
+
+    setServerOptions(result);
+    return result;
+  };
+
+  const [status, setStatus] = React.useState('');
+  const change = (length: number, property: string, position: number) => {
+    let newText = '';
+    if (length === 0) {
+      newText = 'No search results';
+    } else if (length > 0) {
+      newText = `${length} result${length > 1 ? 's are' : ' is'} available. ${property} ${position} of ${length} is highlighted`;
+    }
+    setStatus(newText);
+  };
+
+  return (
+    <>
+      <StaticAutocomplete
+        options={[
+          'Papaya',
+          'Persimmon',
+          'Paw Paw',
+          'Prickly Pear',
+          'Peach',
+          'Pomegranate',
+          'Pineapple',
+        ]}
+        id="fruitTest"
+        minCharsBeforeSearch={1}
+        debounceMs={2000}
+        onSelected={handleSelected}
+        labelText="search the list of fruits"
+        containerClassName="test"
+        notFoundText="No fruit found"
+        optionsId="fruit-option"
+        statusUpdate={(length, property, position) =>
+          change(length, property, position)
+        }
+        accessibilityStatus={status}
+        accessibilityHintText="When autocomplete results are available use up and down arrows to
+        review and enter to select. Touch device users, explore by touch or
+        with swipe gestures."
+      />
+      selected: {selected}
+
+      <h2>Server fetch</h2>
+      <StaticAutocomplete
+        //@ts-ignore
+        options={serverOptions}
+        minCharsBeforeSearch={1}
+        debounceMs={1000}
+        onSelected={handleSelected}
+        hintText="search the list of fruits dynamically"
+        search={handleOnChange}
+        notFoundText=" "
+      />
+      selected: {selected}
+
+      <h2>With conditional prompt</h2>
+      <StaticAutocomplete
+        options={[
+          'Papaya',
+          'Persimmon',
+          'Paw Paw',
+          'Prickly Pear',
+          'Peach',
+          'Pomegranate',
+          'Pineapple',
+        ]}
+        defaultValue=""
+        minCharsBeforeSearch={1}
+        promptCondition={() => true}
+        promptMessage="Enter a valid date before typing here"
+        debounceMs={100}
+        hintText="click inside the input to see the prompt"
+        hintClass="hintClass"
+        resultUlClass="resultUlClass"
+        resultlLiClass="resultlLiClass"
+        resultNoOptionClass="resultNoOptionClass"
+        resultActiveClass="resultActiveClass"
+        notFoundText="No fruit found"
+      />
+      <h2>With min-chars prompt</h2>
+      <StaticAutocomplete
+        options={[
+          'Papaya',
+          'Persimmon',
+          'Paw Paw',
+          'Prickly Pear',
+          'Peach',
+          'Pomegranate',
+          'Pineapple',
+        ]}
+        defaultValue=""
+        minCharsBeforeSearch={1}
+        minCharsMessage="Type at least 1 character to see the available options"
+        debounceMs={100}
+        hintText="click inside the input to see the prompt"
+        hintClass="hintClass"
+        resultUlClass="resultUlClass"
+        resultlLiClass="resultlLiClass"
+        resultNoOptionClass="resultNoOptionClass"
+        resultActiveClass="resultActiveClass"
+        notFoundText="No fruit found"
+      />
+      <h2>With search and alphabet sort</h2>
+      <StaticAutocomplete
+        options={[
+          'Zucchini',
+          'Tangelo',
+          'Kumquat',
+          'Jambul',
+          'Peach',
+          'Pomegranate',
+          'Pineapple',
+          'Coconut',
+          'Mulberry',
+          'Banana',
+          'Mango',
+          'Acerola',
+          'Lychee',
+        ]}
+        defaultValue=""
+        minCharsBeforeSearch={1}
+        minCharsMessage="Type at least 1 character to see the available options"
+        debounceMs={100}
+        hintText="click inside the input to see the prompt"
+        hintClass="hintClass"
+        resultUlClass="resultUlClass"
+        resultlLiClass="resultlLiClass"
+        resultNoOptionClass="resultNoOptionClass"
+        resultActiveClass="resultActiveClass"
+        notFoundText="No fruit found"
+        search={handleSearch}
+      />
+    </>
+  );
+};

example/src/components/index.ts

@@ -26,3 +26,4 @@ export { AccordionDemo } from './AccordionDemo';
 export * from './library-candidates';
 export { ButtonGroupDemo } from './ButtonGroupDemo';
 export { CardDemo } from './CardDemo';
+export { StaticAutocompleteDemo } from './StaticAutocompleteDemo';

example/src/index.tsx

@@ -26,6 +26,7 @@ import {
   AccordionDemo,
   ButtonGroupDemo,
   CardDemo,
+  StaticAutocompleteDemo,
 } from './components';
 import './global-styles.scss';
 import { Login } from './pages/Login';
@@ -75,6 +76,7 @@ const App = () => (
         <Route path="/accordion" element={<AccordionDemo />} />
         <Route path="/buttonGroup" element={<ButtonGroupDemo />} />
         <Route path="/card" element={<CardDemo />} />
+        <Route path="/StaticAutocompleteDemo" element={<StaticAutocompleteDemo />} />
       </Routes>
     </BrowserRouter>
   </div>

example/src/pages/HomePage.tsx

@@ -20,6 +20,9 @@ export const Home = () => (
         <li>
           <Link to="/AutocompleteDemo">AutocompleteDemo</Link>
         </li>
+        <li>
+          <Link to="/StaticAutocompleteDemo">StaticAutocompleteDemo</Link>
+        </li>
         <li>
           <Link to="/ButtonDemo">ButtonDemo</Link>
         </li>

example/src/pages/Register.tsx

@@ -239,6 +239,7 @@ export const Register = () => {
             }}
             validation={usernameValidation}
             errorPosition={ErrorPosition.BOTTOM}
+            hiddenErrorText=""
           />
         </div>
 
@@ -284,6 +285,7 @@ export const Register = () => {
                 onClick: updatePasswordInput,
               },
             }}
+            hiddenErrorText=""
           />
         </div>
 

src/index.ts

@@ -37,3 +37,4 @@ export * from './codesnippet';
 export * from './highlight';
 export * from './buttonGroup';
 export * from './card';
+export * from './staticAutocomplete';