Merge pull request #849 from MetaPhase-Consulting/fix/controlled-acco…

…rdion Add prop for AccordionItem be either controlled or uncontrolled
MetaPhase-Consulting · Apr 16, 2020 · 40cc066 · 40cc066
2 parents 90dcd0f + 35efb8d
commit 40cc066
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 3 deletions.
diff --git a/src/Components/Accordion/AccordionItem/AccordionItem.jsx b/src/Components/Accordion/AccordionItem/AccordionItem.jsx
@@ -40,12 +40,15 @@ class AccordionItem extends Component {
   }
 
   render() {
-    const { expanded } = this.state;
-    const { id, title, children, className, useIdClass,
+    const { expanded: expandedState } = this.state;
+    const { id, title, children, className, controlled, expanded: expandedProp, useIdClass,
       buttonClass, childClass, preContent, disabled } = this.props;
     const formattedId = formatIdSpacing(id);
     const idClass = useIdClass ? `accordion-${(formattedId || 'accordion').toLowerCase()}` : '';
-    const expanded$ = !disabled && expanded;
+    let expanded$ = expandedProp;
+    if (controlled) {
+      expanded$ = !disabled && expandedState;
+    }
     return (
       <li className={className}>
         {preContent}
@@ -79,6 +82,7 @@ AccordionItem.propTypes = {
   childClass: PropTypes.string,
   preContent: PropTypes.node,
   disabled: PropTypes.bool,
+  controlled: PropTypes.bool,
 };
 
 AccordionItem.defaultProps = {
@@ -92,6 +96,7 @@ AccordionItem.defaultProps = {
   childClass: '',
   preContent: undefined,
   disabled: false,
+  controlled: false,
 };
 
 export default AccordionItem;
diff --git a/src/Components/BidderPortfolio/BidderPortfolioGridList/BidderPortfolioGridList.jsx b/src/Components/BidderPortfolio/BidderPortfolioGridList/BidderPortfolioGridList.jsx
@@ -108,6 +108,7 @@ class BidderPortfolioGridList extends Component {
           {
             results.map(result => (
               <AccordionItem
+                controlled
                 className="portfolio-row"
                 id={`${result.id}-row`}
                 key={result.id}

diff --git a/...dderPortfolio/BidderPortfolioGridList/__snapshots__/BidderPortfolioGridList.test.jsx.snap b/...dderPortfolio/BidderPortfolioGridList/__snapshots__/BidderPortfolioGridList.test.jsx.snap
@@ -10,6 +10,7 @@ exports[`BidderPortfolioGridListComponent matches snapshot 1`] = `
       buttonClass=""
       childClass=""
       className="portfolio-row"
+      controlled={true}
       disabled={false}
       expanded={false}
       id="5-row"
@@ -146,6 +147,7 @@ exports[`BidderPortfolioGridListComponent matches snapshot 1`] = `
       buttonClass=""
       childClass=""
       className="portfolio-row"
+      controlled={true}
       disabled={false}
       expanded={false}
       id="3-row"
@@ -267,6 +269,7 @@ exports[`BidderPortfolioGridListComponent matches snapshot 1`] = `
       buttonClass=""
       childClass=""
       className="portfolio-row"
+      controlled={true}
       disabled={false}
       expanded={false}
       id="1-row"
@@ -388,6 +391,7 @@ exports[`BidderPortfolioGridListComponent matches snapshot 1`] = `
       buttonClass=""
       childClass=""
       className="portfolio-row"
+      controlled={true}
       disabled={false}
       expanded={false}
       id="6-row"
@@ -524,6 +528,7 @@ exports[`BidderPortfolioGridListComponent matches snapshot 1`] = `
       buttonClass=""
       childClass=""
       className="portfolio-row"
+      controlled={true}
       disabled={false}
       expanded={false}
       id="2-row"
@@ -645,6 +650,7 @@ exports[`BidderPortfolioGridListComponent matches snapshot 1`] = `
       buttonClass=""
       childClass=""
       className="portfolio-row"
+      controlled={true}
       disabled={false}
       expanded={false}
       id="4-row"

diff --git a/src/Components/Glossary/GlossaryListing/__snapshots__/GlossaryListing.test.jsx.snap b/src/Components/Glossary/GlossaryListing/__snapshots__/GlossaryListing.test.jsx.snap
@@ -16,6 +16,7 @@ exports[`GlossaryListingComponent matches snapshot 1`] = `
       buttonClass=""
       childClass=""
       className=""
+      controlled={false}
       disabled={false}
       expanded={false}
       id="68"
@@ -43,6 +44,7 @@ exports[`GlossaryListingComponent matches snapshot 1`] = `
       buttonClass=""
       childClass=""
       className=""
+      controlled={false}
       disabled={false}
       expanded={false}
       id="Assignments-Officer-AO"
@@ -70,6 +72,7 @@ exports[`GlossaryListingComponent matches snapshot 1`] = `
       buttonClass=""
       childClass=""
       className=""
+      controlled={false}
       disabled={false}
       expanded={false}
       id="Bidder"
@@ -89,6 +92,7 @@ exports[`GlossaryListingComponent matches snapshot 1`] = `
       buttonClass=""
       childClass=""
       className=""
+      controlled={false}
       disabled={false}
       expanded={false}
       id="Bureau"
@@ -116,6 +120,7 @@ exports[`GlossaryListingComponent matches snapshot 1`] = `
       buttonClass=""
       childClass=""
       className=""
+      controlled={false}
       disabled={false}
       expanded={false}
       id="C"

diff --git a/src/Components/SearchFilters/BureauFilter/__snapshots__/BureauFilter.test.jsx.snap b/src/Components/SearchFilters/BureauFilter/__snapshots__/BureauFilter.test.jsx.snap
@@ -12,6 +12,7 @@ exports[`BureauFilterComponent matches snapshot 1`] = `
       buttonClass="tm-nested-accordion-button"
       childClass=""
       className="accordion-content-small"
+      controlled={false}
       disabled={false}
       expanded={false}
       id="regional-bureau-sub-accordion"
@@ -44,6 +45,7 @@ exports[`BureauFilterComponent matches snapshot 1`] = `
       buttonClass="tm-nested-accordion-button"
       childClass=""
       className="accordion-content-small"
+      controlled={false}
       disabled={false}
       expanded={false}
       id="functional-bureau-sub-accordion"

diff --git a/src/Components/SearchFilters/LanguageFilter/__snapshots__/LanguageFilter.test.jsx.snap b/src/Components/SearchFilters/LanguageFilter/__snapshots__/LanguageFilter.test.jsx.snap
@@ -12,6 +12,7 @@ exports[`LanguageFilterComponent matches snapshot 1`] = `
       buttonClass="tm-nested-accordion-button"
       childClass=""
       className="accordion-content-small "
+      controlled={false}
       disabled={false}
       expanded={true}
       id="language-group-accordion-2"
@@ -74,6 +75,7 @@ exports[`LanguageFilterComponent matches snapshot 1`] = `
       buttonClass="tm-nested-accordion-button"
       childClass=""
       className="accordion-content-small "
+      controlled={false}
       disabled={false}
       expanded={true}
       id="language-group-accordion-1"

diff --git a/...Filters/MultiSelectFilterContainer/__snapshots__/MultiSelectFilterContainer.test.jsx.snap b/...Filters/MultiSelectFilterContainer/__snapshots__/MultiSelectFilterContainer.test.jsx.snap
@@ -9,6 +9,7 @@ exports[`MultiSelectFilterContainerComponent matches snapshot 1`] = `
     buttonClass=""
     childClass=""
     className=""
+    controlled={false}
     disabled={false}
     expanded={false}
     id="checkbox-title"

diff --git a/src/Components/SearchFilters/PostFilter/__snapshots__/PostFilter.test.jsx.snap b/src/Components/SearchFilters/PostFilter/__snapshots__/PostFilter.test.jsx.snap
@@ -15,6 +15,7 @@ exports[`PostFilterComponent matches snapshot 1`] = `
         buttonClass="tm-nested-accordion-button"
         childClass=""
         className="accordion-content-small"
+        controlled={false}
         disabled={false}
         expanded={false}
         id="domestic-post-sub-accordion"
@@ -63,6 +64,7 @@ exports[`PostFilterComponent matches snapshot 1`] = `
         buttonClass="tm-nested-accordion-button"
         childClass=""
         className="accordion-content-small"
+        controlled={false}
         disabled={false}
         expanded={false}
         id="overseas-post-sub-accordion"

diff --git a/src/Components/SearchFilters/SkillFilter/__snapshots__/SkillFilter.test.jsx.snap b/src/Components/SearchFilters/SkillFilter/__snapshots__/SkillFilter.test.jsx.snap
@@ -12,6 +12,7 @@ exports[`SkillFilterComponent matches snapshot 1`] = `
       buttonClass="tm-nested-accordion-button"
       childClass=""
       className="accordion-content-small"
+      controlled={false}
       disabled={false}
       expanded={false}
       id="skill-cone-accordion-1"
@@ -68,6 +69,7 @@ exports[`SkillFilterComponent matches snapshot 1`] = `
       buttonClass="tm-nested-accordion-button"
       childClass=""
       className="accordion-content-small"
+      controlled={false}
       disabled={false}
       expanded={false}
       id="skill-cone-accordion-2"