From b8599b3a85833883bf16ce65bbf59879f70072b7 Mon Sep 17 00:00:00 2001
From: AssisrMatheus <assisr.matheus@gmail.com>
Date: Mon, 22 Aug 2022 15:27:48 -0400
Subject: [PATCH] feat: added error and success status to `AutocompleteInput`

---
 CHANGELOG.md                                  |  6 +++
 package.json                                  |  2 +-
 .../AutocompleteInput.stories.tsx             | 10 +++++
 src/components/AutocompleteInput/index.tsx    | 45 +++++++++++++++++--
 src/components/DropdownInput/index.css        | 28 ++++++++++++
 5 files changed, 87 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dc2a09a..8a0132c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [7.7.0] 2022-08-22
+
+### Changes
+
+- Added error and success status to `AutocompleteInput`
+
 ## [7.6.0] 2022-08-22
 
 ### Changes
diff --git a/package.json b/package.json
index 1b36d99..5ba8dcc 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@perimetre/ui",
   "description": "A component library made by @perimetre",
-  "version": "7.6.0",
+  "version": "7.7.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/perimetre/ui.git"
diff --git a/src/components/AutocompleteInput/AutocompleteInput.stories.tsx b/src/components/AutocompleteInput/AutocompleteInput.stories.tsx
index 146cded..a84babc 100644
--- a/src/components/AutocompleteInput/AutocompleteInput.stories.tsx
+++ b/src/components/AutocompleteInput/AutocompleteInput.stories.tsx
@@ -45,6 +45,16 @@ InitialText.args = {
   defaultValue: 'Option 999'
 };
 
+export const WithHelp = Template.bind({});
+WithHelp.args = {
+  help: 'You can also have a help text'
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  error: 'Input is required'
+};
+
 /**
  * A story that displays an Autocomplete example
  *
diff --git a/src/components/AutocompleteInput/index.tsx b/src/components/AutocompleteInput/index.tsx
index 84610b9..989af6b 100644
--- a/src/components/AutocompleteInput/index.tsx
+++ b/src/components/AutocompleteInput/index.tsx
@@ -34,6 +34,22 @@ export type AutocompleteInputProps<Item> =
      * @default false
      */
     displayRegardlessIfSearching?: boolean;
+    /**
+     * If provided, displays a help text under the input
+     */
+    help?: string;
+    /**
+     * The error text to replace the help text with
+     */
+    error?: string;
+    /**
+     * Shows a success status
+     */
+    success?: boolean;
+    /**
+     * The classname string prepended to the input container className
+     */
+    containerClassName?: string;
     /**
      * Whether or not should always show the result list regardless if the input is focused or not
      * (Only relevant when using TAB to focus the input)
@@ -111,6 +127,10 @@ type DownshiftAutocompleteContentProps<Item> = ControllerStateAndHelpers<Item> &
  * @param props.options The options that should be displayed in the dropdown
  * @param props.initialSelectedItem The initial selected item
  * @param props.displayRegardlessIfSearching Whether or not should always show the result list regardless if the user is searching or not.
+ * @param props.help If provided, displays a help text under the input
+ * @param props.error The error text to replace the help text with
+ * @param props.success Shows a success status
+ * @param props.containerClassName The classname string prepended to the input container className
  * @param props.onItemToggle A callback that is called every time the user selects or unselects an item
  * @param props.defaultValue The input defaultValue property
  * @param props.ignoreFilter Whether or not the options should be filtered based on user's input
@@ -196,6 +216,10 @@ const DownshiftAutocompleteContent = <Item extends { id: string | number }>({
   setItemCount,
   setState,
   unsetItemCount,
+  containerClassName,
+  error,
+  success,
+  help,
 
   ...props
 }: DownshiftAutocompleteContentProps<Item> &
@@ -251,10 +275,22 @@ const DownshiftAutocompleteContent = <Item extends { id: string | number }>({
   );
 
   return (
-    <>
+    <div>
       {label && <label {...getLabelProps({ className: 'pui-label-input' })}>{label}</label>}
       {/* Render the combo container for the input and the results */}
-      <div className="pui-dropdown-input-container">
+      <div
+        className={classnames('pui-dropdown-input-container', {
+          error: !!error,
+          success: success
+        })}
+      >
+        {/* <span
+          className={classnames(containerClassName, {
+            'pui-text-input-error': !!error,
+            'pui-text-input-success': success,
+            'pui-text-input-loading': loading
+          })}
+        > */}
         <input
           {...getInputProps({
             className: classnames('pui-text-input', className),
@@ -262,6 +298,7 @@ const DownshiftAutocompleteContent = <Item extends { id: string | number }>({
           })}
           onClick={() => !isOpen && toggleMenu()}
         />
+        {/* </span> */}
         {/* <button aria-label={'toggle menu'} className="p-2" type="button" {...getToggleButtonProps()}></button> */}
 
         {/* The container for the results must be in the DOM at all times for accessibility reasons */}
@@ -332,7 +369,9 @@ const DownshiftAutocompleteContent = <Item extends { id: string | number }>({
             ))}
         </ul>
       </div>
-    </>
+      {help && !error && <p className="pui-help-text-input">{help}</p>}
+      {error && <p className="pui-animate-fadeDown pui-help-text-input text-pui-error">{error}</p>}
+    </div>
   );
 };
 
diff --git a/src/components/DropdownInput/index.css b/src/components/DropdownInput/index.css
index 42c4821..130d163 100644
--- a/src/components/DropdownInput/index.css
+++ b/src/components/DropdownInput/index.css
@@ -19,6 +19,34 @@
       @apply z-20;
     }
 
+    &.error {
+      @apply pui-icon-attention;
+
+      /* First child = input */
+      :first-child {
+        @apply border-pui-error;
+      }
+
+      &::after {
+        /* By setting the bg color, the color of the icon itself is set */
+        @apply bg-pui-error;
+      }
+    }
+
+    &.success {
+      @apply pui-icon-check;
+
+      /* First child = input */
+      :first-child {
+        @apply border-pui-success;
+      }
+
+      &::after {
+        /* By setting the bg color, the color of the icon itself is set */
+        @apply bg-pui-success;
+      }
+    }
+
     /* On open */
     &.open {
       /* First child = input */