rebased

pinterest · Jan 17, 2021 · 12e0c88 · 12e0c88
1 parent 99db708
commit 12e0c88
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 94 deletions.
diff --git a/packages/gestalt/src/ModuleExpandable.js b/packages/gestalt/src/ModuleExpandable.js
@@ -12,7 +12,7 @@ export default function ModuleExpandable({
   expandedIndex,
   onExpandedChange,
   items,
-}: Props): Node {
+}: ExpandableBaseProps): Node {
   const [expandedId, setExpandedId] = useState<?number>(
     Number.isFinite(expandedIndex) ? expandedIndex : null
   );

diff --git a/packages/gestalt/src/__snapshots__/ModuleExpandable.test.js.snap b/packages/gestalt/src/__snapshots__/ModuleExpandable.test.js.snap
@@ -273,7 +273,7 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
 </div>
 `;
 
-exports[`renders correctly with multiple items with expandedId 1`] = `
+exports[`Module Expandable renders correctly with one item 1`] = `
 <div
   className="box rounding2 shadow"
 >
@@ -283,8 +283,8 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
     <div
       aria-controls="uniqueTestID-0"
       aria-disabled={false}
-      aria-expanded={true}
-      aria-label="click to collapse"
+      aria-expanded={false}
+      aria-label="click to expand"
       className="hideOutline tapTransition rounding0 accessibilityOutline fullWidth pointer"
       onBlur={[Function]}
       onClick={[Function]}
@@ -309,13 +309,47 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
           className="box flexGrow itemsBaseline marginEnd6 xsDisplayFlex"
         >
           <div
-            className="box xsCol12 xsDisplayFlex"
+            className="box xsCol6 xsDisplayFlex"
           >
             <div
               className="Text fontSize3 darkGray alignLeft breakWord fontWeightBold truncate"
-              title="Title1"
+              title="Title"
             >
-              Title1
+              Title
+            </div>
+          </div>
+          <div
+            className="box marginStart6 xsCol6"
+          >
+            <div
+              className="box marginBottom2"
+            >
+              <div
+                className="Text fontSize2 darkGray alignLeft breakWord fontWeightNormal truncate"
+                title="summary1"
+              >
+                summary1
+              </div>
+            </div>
+            <div
+              className="box marginBottom2"
+            >
+              <div
+                className="Text fontSize2 darkGray alignLeft breakWord fontWeightNormal truncate"
+                title="summary2"
+              >
+                summary2
+              </div>
+            </div>
+            <div
+              className="box marginBottom0"
+            >
+              <div
+                className="Text fontSize2 darkGray alignLeft breakWord fontWeightNormal truncate"
+                title="summary3"
+              >
+                summary3
+              </div>
             </div>
           </div>
         </div>
@@ -328,7 +362,7 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
           >
             <svg
               aria-hidden={null}
-              aria-label="click to collapse"
+              aria-label="click to expand"
               className="icon darkGray iconBlock"
               height="12"
               role="img"
@@ -343,23 +377,22 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
         </div>
       </div>
     </div>
-    <div
-      className="box marginTopN6 paddingX6 paddingY6"
-    >
-      Children1
-    </div>
   </div>
-  <hr
-    className="divider"
-  />
+</div>
+`;
+
+exports[`renders correctly with multiple items with expandedId 1`] = `
+<div
+  className="box rounding2 shadow"
+>
   <div
     className="box"
   >
     <div
-      aria-controls="uniqueTestID-1"
+      aria-controls="uniqueTestID-0"
       aria-disabled={false}
-      aria-expanded={false}
-      aria-label="click to expand"
+      aria-expanded={true}
+      aria-label="click to collapse"
       className="hideOutline tapTransition rounding0 accessibilityOutline fullWidth pointer"
       onBlur={[Function]}
       onClick={[Function]}
@@ -384,40 +417,26 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
           className="box flexGrow itemsBaseline marginEnd6 xsDisplayFlex"
         >
           <div
-            className="box xsCol6 xsDisplayFlex"
+            className="box xsCol12 xsDisplayFlex"
           >
             <div
               className="Text fontSize3 darkGray alignLeft breakWord fontWeightBold truncate"
-              title="Title2"
-            >
-              Title2
-            </div>
-          </div>
-          <div
-            className="box marginStart6 xsCol6"
-          >
-            <div
-              className="box marginBottom0"
+              title="Title1"
             >
-              <div
-                className="Text fontSize2 darkGray alignLeft breakWord fontWeightNormal truncate"
-                title="summary2"
-              >
-                summary2
-              </div>
+              Title1
             </div>
           </div>
         </div>
         <div
           className="box"
-          id="uniqueTestID-1"
+          id="uniqueTestID-0"
         >
           <div
             className="box paddingX1 paddingY1"
           >
             <svg
               aria-hidden={null}
-              aria-label="click to expand"
+              aria-label="click to collapse"
               className="icon darkGray iconBlock"
               height="12"
               role="img"
@@ -432,6 +451,11 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
         </div>
       </div>
     </div>
+    <div
+      className="box marginTopN6 paddingX6 paddingY6"
+    >
+      Children1
+    </div>
   </div>
   <hr
     className="divider"
@@ -440,7 +464,7 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
     className="box"
   >
     <div
-      aria-controls="uniqueTestID-2"
+      aria-controls="uniqueTestID-1"
       aria-disabled={false}
       aria-expanded={false}
       aria-label="click to expand"
@@ -471,27 +495,10 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
             className="box xsCol6 xsDisplayFlex"
           >
             <div
-              className="box marginEnd2"
-            >
-              <svg
-                aria-hidden={true}
-                aria-label=""
-                className="icon red iconBlock"
-                height={16}
-                role="img"
-                viewBox="0 0 24 24"
-                width={16}
-              >
-                <path
-                  d="test-file-stub"
-                />
-              </svg>
-            </div>
-            <div
-              className="Text fontSize3 red alignLeft breakWord fontWeightBold truncate"
-              title="Title3"
+              className="Text fontSize3 darkGray alignLeft breakWord fontWeightBold truncate"
+              title="Title2"
             >
-              Title3
+              Title2
             </div>
           </div>
           <div
@@ -502,16 +509,16 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
             >
               <div
                 className="Text fontSize2 darkGray alignLeft breakWord fontWeightNormal truncate"
-                title="summary3"
+                title="summary2"
               >
-                summary3
+                summary2
               </div>
             </div>
           </div>
         </div>
         <div
           className="box"
-          id="uniqueTestID-2"
+          id="uniqueTestID-1"
         >
           <div
             className="box paddingX1 paddingY1"
@@ -534,18 +541,14 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
       </div>
     </div>
   </div>
-</div>
-`;
-
-exports[`renders correctly with one item 1`] = `
-<div
-  className="box rounding2 shadow"
->
+  <hr
+    className="divider"
+  />
   <div
     className="box"
   >
     <div
-      aria-controls="uniqueTestID-0"
+      aria-controls="uniqueTestID-2"
       aria-disabled={false}
       aria-expanded={false}
       aria-label="click to expand"
@@ -576,35 +579,32 @@ exports[`renders correctly with one item 1`] = `
             className="box xsCol6 xsDisplayFlex"
           >
             <div
-              className="Text fontSize3 darkGray alignLeft breakWord fontWeightBold truncate"
-              title="Title"
-            >
-              Title
-            </div>
-          </div>
-          <div
-            className="box marginStart6 xsCol6"
-          >
-            <div
-              className="box marginBottom2"
+              className="box marginEnd2"
             >
-              <div
-                className="Text fontSize2 darkGray alignLeft breakWord fontWeightNormal truncate"
-                title="summary1"
+              <svg
+                aria-hidden={true}
+                aria-label=""
+                className="icon red iconBlock"
+                height={16}
+                role="img"
+                viewBox="0 0 24 24"
+                width={16}
               >
-                summary1
-              </div>
+                <path
+                  d="test-file-stub"
+                />
+              </svg>
             </div>
             <div
-              className="box marginBottom2"
+              className="Text fontSize3 red alignLeft breakWord fontWeightBold truncate"
+              title="Title3"
             >
-              <div
-                className="Text fontSize2 darkGray alignLeft breakWord fontWeightNormal truncate"
-                title="summary2"
-              >
-                summary2
-              </div>
+              Title3
             </div>
+          </div>
+          <div
+            className="box marginStart6 xsCol6"
+          >
             <div
               className="box marginBottom0"
             >
@@ -619,7 +619,7 @@ exports[`renders correctly with one item 1`] = `
         </div>
         <div
           className="box"
-          id="uniqueTestID-0"
+          id="uniqueTestID-2"
         >
           <div
             className="box paddingX1 paddingY1"

diff --git a/packages/gestalt/src/moduleTypes.js b/packages/gestalt/src/moduleTypes.js
@@ -17,6 +17,7 @@ export type ExpandableBaseProps = {|
   id: string,
   accessibilityExpandLabel: string,
   accessibilityCollapseLabel: string,
+  expandedIndex?: ?number,
   items: $ReadOnlyArray<{|
     title: string,
     icon?: $Keys<typeof icons>,
@@ -25,6 +26,7 @@ export type ExpandableBaseProps = {|
     type?: TypeOptions,
     children?: Node,
   |}>,
+  onExpandedChange?: (?number) => void,
 |};
 
 export type ExpandableItemProps = {|