added external control

added tests
pinterest · Dec 23, 2020 · 6ac9a56 · 6ac9a56
1 parent bfaf1e4
commit 6ac9a56
Show file tree

Hide file tree

Showing 6 changed files with 410 additions and 5 deletions.
diff --git a/docs/src/Module.doc.js b/docs/src/Module.doc.js
@@ -36,6 +36,16 @@ card(
         type: 'string',
         required: true,
       },
+      {
+        name: 'extExpandedId',
+        type: '?string',
+        required: false,
+      },
+      {
+        name: 'setExtExpandedId',
+        type: '(?string) => void',
+        required: false,
+      },
       {
         name: 'items',
         type:
@@ -159,4 +169,65 @@ function ModuleExample4() {
   />
 );
 
+card(
+  <Example
+    name="Multiple items with external control"
+    defaultCode={`
+function ModuleExample5() {
+  const [extExpandedId, setExtExpandedId] = React.useState(null);
+  return (
+    <Box maxWidth={800} padding={2} column={12}>
+      <Box display="flex" paddingY={2}>
+        <Box paddingX={2}>
+          <Button
+            size="sm"
+            text={extExpandedId === "ModuleExample5-0"? "collapse 1": "expand 1"}
+            onClick={() => extExpandedId === "ModuleExample5-0"? setExtExpandedId("-1"): setExtExpandedId("ModuleExample5-0")}
+          />
+        </Box>
+        <Box paddingX={2}>
+          <Button
+            size="sm"
+            text={extExpandedId === "ModuleExample5-1"? "collapse 2": "expand 2"}
+            onClick={() => extExpandedId === "ModuleExample5-1"? setExtExpandedId("-1"): setExtExpandedId("ModuleExample5-1")}
+          />
+        </Box>
+        <Box paddingX={2}>
+          <Button
+            size="sm"
+            text={extExpandedId === "ModuleExample5-2"? "collapse 3": "expand 3"}
+            onClick={() => extExpandedId === "ModuleExample5-2"? setExtExpandedId("-1"): setExtExpandedId("ModuleExample5-2")}
+          />
+        </Box>
+      </Box>
+      <Module.Expandable
+        id="ModuleExample5"
+        accessibilityExpandLabel="Expand the module"
+        accessibilityCollapseLabel="Collapse the module"
+        extExpandedId={extExpandedId}
+        setExtExpandedId={setExtExpandedId}
+        items={[
+          {
+            title: 'Title1',
+            summary: ['summary1'],
+            children: <Text size="md">Children1</Text>,
+          },
+          {
+            title: 'Title2',
+            summary: ['summary2'],
+            children: <Text size="md">Children2</Text>,
+          },
+          {
+            title: 'Title3',
+            summary: ['summary3'],
+            children: <Text size="md">Children3</Text>,
+          }]}>
+      </Module.Expandable>
+    </Box>
+  );
+}
+`}
+  />
+);
+
 export default cards;
diff --git a/packages/gestalt/src/ModuleExpandable.flowtest.js b/packages/gestalt/src/ModuleExpandable.flowtest.js
@@ -7,6 +7,8 @@ const Valid = (
     id="uniqueTestID"
     accessibilityExpandLabel="click to expand"
     accessibilityCollapseLabel="click to collapse"
+    extExpandedId="uniqueTestID-0"
+    setExtExpandedId={() => {}}
     items={[
       {
         title: 'Title',

diff --git a/packages/gestalt/src/ModuleExpandable.js b/packages/gestalt/src/ModuleExpandable.js
@@ -9,6 +9,8 @@ type Props = {|
   id: string,
   accessibilityExpandLabel: string,
   accessibilityCollapseLabel: string,
+  extExpandedId?: ?string,
+  setExtExpandedId?: (?string) => void,
   items: Array<{|
     title: string,
     icon?: $Keys<typeof icons>,
@@ -23,9 +25,13 @@ export default function ModuleExpandable({
   id,
   accessibilityExpandLabel,
   accessibilityCollapseLabel,
+  extExpandedId,
+  setExtExpandedId,
   items,
 }: Props): Node {
-  const [expandedId, setExpandedId] = useState(-1);
+  const [localExpandedId, setLocalExpandedId] = useState(null);
+  const expandedId = extExpandedId || localExpandedId;
+  const setExpandedId = setExtExpandedId || setLocalExpandedId;
 
   return (
     <Box rounding={2} borderStyle="shadow">
@@ -42,13 +48,13 @@ export default function ModuleExpandable({
                 icon={icon}
                 iconAccessibilityLabel={iconAccessibilityLabel}
                 summary={summary}
-                isCollapsed={expandedId !== index}
+                isCollapsed={expandedId !== `${id}-${index}`}
                 type={type}
                 accessibilityExpandLabel={accessibilityExpandLabel}
                 accessibilityCollapseLabel={accessibilityCollapseLabel}
-                onModuleClicked={(isExpanded) =>
-                  setExpandedId(isExpanded ? -1 : index)
-                }
+                onModuleClicked={(isExpanded) => {
+                  setExpandedId(isExpanded ? null : `${id}-${index}`);
+                }}
               >
                 {children}
               </ModuleExpandableBase>

diff --git a/packages/gestalt/src/ModuleExpandable.jsdom.test.js b/packages/gestalt/src/ModuleExpandable.jsdom.test.js
@@ -74,4 +74,33 @@ describe('ModuleExpandable', () => {
     expect(screen.queryByText(/Children2/i)).toBeNull();
     expect(screen.getByText(/Children3/i)).toBeInTheDocument();
   });
+
+  it('should expand the module correctly with extExpandedId', () => {
+    const newProps = {
+      ...props,
+      extExpandedId: 'uniqueTestID-0',
+      setExtExpandedId: jest.fn(),
+    };
+    render(<ModuleExpandable {...newProps} />);
+
+    // Item 1 is default to be expanded
+    expect(screen.getByText(/Children1/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Children2/i)).toBeNull();
+    expect(screen.queryByText(/Children3/i)).toBeNull();
+
+    // Click on Item 1 to collapse the item
+    const button1 = screen.getByRole('button', {
+      name: /click to collapse/i,
+    });
+    fireEvent.click(button1);
+    expect(newProps.setExtExpandedId).toHaveBeenCalledWith(null);
+
+    // Click on Item 2 to expand it
+    const expandButtons = screen.getAllByRole('button', {
+      name: /click to expand/i,
+    });
+    expect(expandButtons).toHaveLength(2);
+    fireEvent.click(expandButtons[0]);
+    expect(newProps.setExtExpandedId).toHaveBeenCalledWith('uniqueTestID-1');
+  });
 });
diff --git a/packages/gestalt/src/ModuleExpandable.test.js b/packages/gestalt/src/ModuleExpandable.test.js
@@ -53,3 +53,36 @@ test('renders correctly with multiple items', () => {
     .toJSON();
   expect(tree).toMatchSnapshot();
 });
+
+test('renders correctly with multiple items with extExpandedId', () => {
+  const tree = renderer
+    .create(
+      <ModuleExpandable
+        id="uniqueTestID"
+        accessibilityExpandLabel="click to expand"
+        accessibilityCollapseLabel="click to collapse"
+        extExpandedId="uniqueTestID-0"
+        setExtExpandedId={() => {}}
+        items={[
+          {
+            title: 'Title1',
+            summary: ['summary1'],
+            children: 'Children1',
+          },
+          {
+            title: 'Title2',
+            summary: ['summary2'],
+            children: 'Children2',
+          },
+          {
+            title: 'Title3',
+            summary: ['summary3'],
+            children: 'Children3',
+            type: 'error',
+          },
+        ]}
+      />
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});