📝 Update DropdownPanel storybook to more accurately reflect usage (#1983

)
icgc-argo · Jul 29, 2021 · 0ae376f · 0ae376f
1 parent b176ce4
commit 0ae376f
Showing 1 changed file with 19 additions and 54 deletions.
diff --git 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>
   );
 });