From 0ae376fa45065cb171c19a91bd281226508affde Mon Sep 17 00:00:00 2001
From: Rakesh Mistry <mistryrn@mcmaster.ca>
Date: Thu, 29 Jul 2021 16:58:01 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20Update=20DropdownPanel=20storybo?=
 =?UTF-8?q?ok=20to=20more=20accurately=20reflect=20usage=20(#1983)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 uikit/DropdownPanel/stories.tsx | 73 +++++++++------------------------
 1 file changed, 19 insertions(+), 54 deletions(-)

diff --git a/uikit/DropdownPanel/stories.tsx b/uikit/DropdownPanel/stories.tsx
index 3b885b377..d2e254494 100644
--- a/uikit/DropdownPanel/stories.tsx
+++ b/uikit/DropdownPanel/stories.tsx
@@ -21,16 +21,8 @@ import React, { useRef, useState } from 'react';
 import { storiesOf } from '@storybook/react';
 import { boolean, select, text } from '@storybook/addon-knobs';
 
-import DropdownPanel, {
-  DropdownPanelFieldset,
-  DropdownPanelLegend,
-  DropdownPanelInputSection,
-  ForwardedDropdownInput as DropdownPanelInput,
-  DropdownPanelButtonSection,
-} from '.';
-import Icon from 'uikit/Icon';
+import DropdownPanel, { TextInputFilter } from '.';
 import icons, { UikitIconNames } from 'uikit/Icon/icons';
-import Button from 'uikit/Button';
 
 const DropdownPanelStories = storiesOf(`${__dirname}`, module).add('Basic', () => {
   const [filterText, setFilterText] = useState('');
@@ -58,9 +50,10 @@ const DropdownPanelStories = storiesOf(`${__dirname}`, module).add('Basic', () =
   const knobs = {
     customTrigger: text('customTrigger', ''),
     inputLabel: text('inputLabel', 'Filter'),
+    inputPlaceholder: text('inputPlaceholder', 'Search...'),
+    panelLegend: text('panelLegend', 'Filter Legend'),
     triggerIcon: select('triggerIcon', Object.keys(icons) as UikitIconNames[], 'filter'),
     triggerTooltip: text('triggerTooltip', 'Filter'),
-    active: boolean('active', false),
   };
 
   return (
@@ -71,52 +64,24 @@ const DropdownPanelStories = storiesOf(`${__dirname}`, module).add('Basic', () =
       handleBlur={handleBlur}
       open={open}
       setOpen={setOpen}
+      active={filterText?.length > 0}
       {...knobs}
     >
-      <form>
-        <DropdownPanelFieldset>
-          <DropdownPanelLegend>{knobs.inputLabel}</DropdownPanelLegend>
-          <DropdownPanelInputSection>
-            <DropdownPanelInput
-              aria-label="Filter"
-              icon={<Icon name="search" />}
-              placeholder="Search IDs..."
-              size="sm"
-              value={filterText}
-              onChange={(e) => {
-                setFilterText(e.target.value);
-              }}
-              ref={inputRef}
-            />
-          </DropdownPanelInputSection>
-          <DropdownPanelButtonSection>
-            <Button
-              variant="text"
-              size="sm"
-              onClick={(e) => {
-                e.preventDefault();
-                setOpen(false);
-              }}
-              onBlur={handleBlur}
-              type="button"
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="primary"
-              size="sm"
-              disabled={!filterText.length}
-              onClick={(e) => {
-                e.preventDefault();
-              }}
-              onBlur={handleBlur}
-              type="submit"
-            >
-              Apply
-            </Button>
-          </DropdownPanelButtonSection>
-        </DropdownPanelFieldset>
-      </form>
+      <TextInputFilter
+        onConfirmClick={(text) => setFilterText(text)}
+        inputLabel={knobs.inputLabel}
+        inputPlaceholder={knobs.inputPlaceholder}
+        panelLegend={knobs.panelLegend}
+        inputRef={inputRef}
+        setOpen={setOpen}
+        handleBlur={handleBlur}
+        onInputChange={(text: string) => {
+          if (text?.length === 0) {
+            setFilterText('');
+          }
+        }}
+        initialValue={filterText}
+      />
     </DropdownPanel>
   );
 });