[Prototype] Module changes

docs/src/Module.doc.js

@@ -36,6 +36,23 @@ card(
         type: 'string',
         required: true,
       },
+      {
+        name: 'expandedId',
+        type: '?string',
+        required: false,
+        description: [
+          'The ID of the item that the expand/collapse state can be controlled programatically from an external component',
+          'expandedId is constructed in the format of {id}-{index of the item}',
+        ],
+      },
+      {
+        name: 'setExpandedId',
+        type: '(?string) => void',
+        required: false,
+        description: [
+          'The callback function that controls the expand/collapse state of an item if controlled programatically from an external component',
+        ],
+      },
       {
         name: 'items',
         type:
@@ -50,20 +67,69 @@ card(
   <Example
     name="Example"
     defaultCode={`
-function ModuleExample1() {
+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
+            accessibilityExpanded
+            accessibilityControls={extExpandedId}
+            size="sm"
+            text={extExpandedId === 0 ? 'collapse 1' : 'expand 1'}
+            onClick={() =>
+              setExtExpandedId(extExpandedId === 0 ? '-1' : 0)
+            }
+          />
+        </Box>
+        <Box paddingX={2}>
+          <Button
+            accessibilityExpanded
+            accessibilityControls={extExpandedId}
+            size="sm"
+            text={extExpandedId === 1 ? 'collapse 2' : 'expand 2'}
+            onClick={() =>
+              setExtExpandedId(extExpandedId === 1 ? '-1' : 1)
+            }
+          />
+        </Box>
+        <Box paddingX={2}>
+          <Button
+            accessibilityExpanded
+            accessibilityControls={extExpandedId}
+            size="sm"
+            text={extExpandedId === 2 ? 'collapse 3' : 'expand 3'}
+            onClick={() =>
+              setExtExpandedId(extExpandedId === 2 ? '-1' : 2)
+            }
+          />
+        </Box>
+      </Box>
       <Module.Expandable
-        id="ModuleExample1"
+        id="ModuleExample5"
         accessibilityExpandLabel="Expand the module"
         accessibilityCollapseLabel="Collapse the module"
+        expandedIdx={extExpandedId}
         items={[
           {
-            title: 'Title',
-            summary: ['summary1', 'summary2', 'summary3'],
+            title: 'Title1',
+            summary: ['summary1'],
             children: <Text size="md">Children1</Text>,
-          }]}>
-      </Module.Expandable>
+          },
+          {
+            title: 'Title2',
+            summary: ['summary2'],
+            children: <Text size="md">Children2</Text>,
+          },
+          {
+            title: 'Title3',
+            summary: ['summary3'],
+            children: <Text size="md">Children3</Text>,
+          },
+        ]}
+      />
     </Box>
   );
 }

packages/gestalt/src/ModuleExpandable.flowtest.js

@@ -7,6 +7,8 @@ const Valid = (
     id="uniqueTestID"
     accessibilityExpandLabel="click to expand"
     accessibilityCollapseLabel="click to collapse"
+    expandedId="uniqueTestID-0"
+    setExpandedId={() => {}}
     items={[
       {
         title: 'Title',

packages/gestalt/src/ModuleExpandable.js

@@ -1,5 +1,5 @@
 // @flow strict
-import React, { useState, type Node } from 'react';
+import React, { useState, useEffect, type Node } from 'react';
 import Box from './Box.js';
 import Divider from './Divider.js';
 import ModuleExpandableBase from './ModuleExpandableBase.js';
@@ -9,6 +9,7 @@ type Props = {|
   id: string,
   accessibilityExpandLabel: string,
   accessibilityCollapseLabel: string,
+  expandedIdx?: ?number,
   items: $ReadOnlyArray<{|
     title: string,
     icon?: $Keys<typeof icons>,
@@ -23,9 +24,18 @@ export default function ModuleExpandable({
   id,
   accessibilityExpandLabel,
   accessibilityCollapseLabel,
+  expandedIdx,
   items,
 }: Props): Node {
-  const [expandedId, setExpandedId] = useState(-1);
+  const [localExpandedId, setLocalExpandedId] = useState(
+    expandedIdx ? `${id}-${expandedIdx}` : null
+  );
+
+  useEffect(() => {
+    setLocalExpandedId(
+      expandedIdx || expandedIdx === 0 ? `${id}-${expandedIdx}` : null
+    );
+  }, [id, expandedIdx, setLocalExpandedId]);
 
   return (
     <Box rounding={2} borderStyle="shadow">
@@ -42,13 +52,13 @@ export default function ModuleExpandable({
                 icon={icon}
                 iconAccessibilityLabel={iconAccessibilityLabel}
                 summary={summary}
-                isCollapsed={expandedId !== index}
+                isCollapsed={localExpandedId !== `${id}-${index}`}
                 type={type}
                 accessibilityExpandLabel={accessibilityExpandLabel}
                 accessibilityCollapseLabel={accessibilityCollapseLabel}
-                onModuleClicked={(isExpanded) =>
-                  setExpandedId(isExpanded ? -1 : index)
-                }
+                onModuleClicked={(isExpanded) => {
+                  setLocalExpandedId(isExpanded ? null : `${id}-${index}`);
+                }}
               >
                 {children}
               </ModuleExpandableBase>

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 expandedId', () => {
+    const newProps = {
+      ...props,
+      expandedId: 'uniqueTestID-0',
+      setExpandedId: 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.setExpandedId).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.setExpandedId).toHaveBeenCalledWith('uniqueTestID-1');
+  });
 });

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 expandedId', () => {
+  const tree = renderer
+    .create(
+      <ModuleExpandable
+        id="uniqueTestID"
+        accessibilityExpandLabel="click to expand"
+        accessibilityCollapseLabel="click to collapse"
+        expandedId="uniqueTestID-0"
+        setExpandedId={() => {}}
+        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();
+});