DOP-5059: Default expanded Collapsibles (#1276)

src/components/Collapsible/index.js

@@ -16,7 +16,7 @@ import { collapsibleStyle, headerContainerStyle, headerStyle, iconStyle, innerCo
 import './styles.css';
 
 const Collapsible = ({ nodeData: { children, options }, sectionDepth, ...rest }) => {
-  const { id, heading, sub_heading: subHeading } = options;
+  const { id, heading, expanded, sub_heading: subHeading } = options;
   const { hash } = useLocation();
 
   // get a list of all ids in collapsible content
@@ -25,7 +25,7 @@ const Collapsible = ({ nodeData: { children, options }, sectionDepth, ...rest })
     return findAllNestedAttribute(children, 'id');
   }, [children]);
 
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(!!expanded);
   const headingNodeData = {
     id,
     children: [{ type: 'text', value: heading }],

tests/unit/Collapsible.test.js

@@ -4,6 +4,7 @@ import { render, act } from '@testing-library/react';
 import { mockLocation } from '../utils/mock-location';
 import Collapsible from '../../src/components/Collapsible';
 import mockData from './data/Collapsible.test.json';
+import expandedMockData from './data/CollapsibleExpanded.test.json';
 
 describe('collapsible component', () => {
   it('renders all the content in the options and children', () => {
@@ -42,4 +43,12 @@ describe('collapsible component', () => {
     expect(icon.getAttribute('aria-label')).toContain('Chevron');
     expect(icon.getAttribute('aria-label')).toContain('Down');
   });
+
+  it('is default expanded if expanded option is truthy', async () => {
+    const renderResult = render(<Collapsible nodeData={expandedMockData} />),
+      button = renderResult.getByRole('button'),
+      icon = button.querySelector('[role=img]');
+    expect(icon.getAttribute('aria-label')).toContain('Chevron');
+    expect(icon.getAttribute('aria-label')).toContain('Down');
+  });
 });

tests/unit/data/CollapsibleExpanded.test.json

@@ -0,0 +1,59 @@
+{
+    "type": "directive",
+    "position": {
+       "start": {
+          "line": {
+             "$numberInt": "13"
+          }
+       }
+    },
+    "children": [
+       {
+          "type": "paragraph",
+          "position": {
+             "start": {
+                "line": {
+                   "$numberInt": "17"
+                }
+             }
+          },
+          "children": [
+             {
+                "type": "text",
+                "position": {
+                   "start": {
+                      "line": {
+                         "$numberInt": "17"
+                      }
+                   }
+                },
+                "value": "This is collapsible content"
+             }
+          ]
+       },
+       {
+          "type": "code",
+          "position": {
+             "start": {
+                "line": {
+                   "$numberInt": "19"
+                }
+             }
+          },
+          "lang": "javascript",
+          "copyable": true,
+          "emphasize_lines": [],
+          "value": "This is code within collapsible content",
+          "linenos": false
+       }
+    ],
+    "domain": "mongodb",
+    "name": "collapsible",
+    "argument": [],
+    "options": {
+       "heading": "This is a heading",
+       "sub_heading": "This is a subheading",
+       "expanded": true,
+       "id": "this-is-a-heading"
+    }
+ }