React: Add Standard Accordion Components to Mayflower React

assets/scss/02-molecules/_accordion-item.scss

@@ -0,0 +1,176 @@
+.ma__accordion {
+
+  &-item {
+    border: 2px solid $c-gray-dcdcdc;
+    &--borderless{
+      border: none;
+    }
+    &--secondary{
+     .ma__accordion-content__body {
+          padding-left: 35px;
+      }
+    }
+  }
+
+  &-header {
+
+    &__icon--secondary {
+      font-size: 2.5rem;
+      line-height: .65em;
+      position: absolute;
+        left: 5px;
+        top: 5px;
+      text-align: center;
+      overflow: hidden;
+      transform-origin: center center;
+      transition: transform .2s ease;
+      fill: $c-theme-secondary;
+      transform: rotate(-90deg);
+    }
+
+    &__icon--secondary + &__title--secondary {
+      padding-left: 0px;
+    }
+
+    &__button {
+      border: none;
+      display: block;
+      padding: 20px 40px;
+      position: relative;
+      text-align: left;
+      width: 100%;
+      background-color: $c-bg-section;
+
+      &--secondary {
+        display: block;
+        position: relative;
+        width: 100%;
+        text-align: left;
+        border: none;
+        padding-left: 35px;
+        &.is-open {
+          .ma__accordion-header__icon--secondary {
+            transform: rotate(0deg);
+          }
+        }
+      }
+
+      /* focus specific transitions */
+      -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
+      transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
+      -o-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+
+
+      &:focus{
+        -webkit-box-shadow: 0 0 0 2px #9bdaf1;
+        box-shadow: 0 0 0 2px #9bdaf1;
+      }
+      &--trans {
+        &.is-open {
+          background-color: transparent;
+        }
+      }
+      &--solid {
+        &.is-open {
+          margin-bottom: 22px;
+          border-bottom: 2px solid $c-gray-dcdcdc;
+        }
+      }
+      &.is-open {
+        &:focus{
+          -webkit-box-shadow: 0 0 0 1px #9bdaf1;
+          box-shadow: 0 0 0 1px #9bdaf1;
+        }
+        &:after{
+          transform: rotate(135deg);
+        }
+      }
+
+      &:after {
+        font-size: 2.5rem;
+        content: "+";
+        line-height: .65em;
+        overflow: hidden;
+        position: absolute;
+          right: 15px;
+          top: 25px;
+        transform-origin: center center;
+        transition: transform .2s ease;
+        color: $c-theme-secondary;
+      }
+    }
+
+    &__icon {
+      position: absolute;
+        top: 25px;
+        left: 20px;
+      text-align: center;
+
+      & > svg {
+        height: 25px;
+        width: 25px;
+        fill: $c-theme-secondary;
+      }
+    }
+
+    &__title {
+      @include ma-h5;
+      font-weight: 700;
+      margin-bottom: 0;
+      min-height: 32px;
+      &--secondary {
+        font-weight: 500;
+        @include ma-h5;
+        margin-bottom: 0;
+      }
+    }
+
+    &__icon + &__title {
+      padding-left: 20px;
+    }
+  }
+
+  &-content {
+
+    &__body{
+
+      padding-left: 60px;
+      padding-right: 40px;
+
+      &.collapsed {
+        visibility: hidden;
+        height: 0px;
+      }
+
+      &.collapsing, &.expanding {
+        position: relative;
+        overflow: hidden;
+        visibility: visible;
+        -webkit-transition-property: height, visibility;
+        transition-property: height, visibility;
+        transition-duration: 0.35s;
+        -webkit-transition-duration: 0.35s;
+        transition-timing-function: ease;
+        -webkit-transition-timing-function: ease;
+      }
+
+      &.expanded {
+       height: auto;
+       visibility: visible;
+       display: block;
+      }
+
+      &--without-icon {
+        padding-left: 40px;
+      }
+
+      & > * {
+        margin-top: 1em;
+      }
+
+      & > :first-child {
+        margin-top: 0;
+      }
+    }
+  }
+}

assets/scss/03-organisms/_accordion-wrapper.scss

@@ -0,0 +1,8 @@
+.ma__accordion-wrapper {
+  .ma__accordion-item {
+	  margin-top: 20px;
+  }
+  .ma__accordion-item:first-child {
+    margin-top: 0px;
+  }
+}

changelogs/DP-9981.txt

@@ -0,0 +1,22 @@
+___DESCRIPTION___
+Minor
+(React) DP-9981: Adds standard accordion components and functionality to Mayflower-React. Also fixes VR bug related to react components.
+
+Added
+1. Adds AccordionItem molecule with secondary, borderless, emphasized, and subtle variants.
+2. Adds AccordionWrapper organism to Mayflower React, which is a dumb wrapper for styling grouped AccordionItems.
+3. Adds Collapse animation atom to Mayflower React based off of the Bootstrap React animation.
+4. Adds dependency to react-transition-group for Collapse animation atom.
+5. Add the SvgCircleChevron icon atom to Mayflower-React.
+6. Adds dependency to classnames for simplifying conditional classname set up. Other component should be refactored to leverage this new package dependency as a follow up.
+
+Changed
+1. Changes heading atom in Mayflower React, adding the option to pass a classname to a heading component.
+
+Fixed
+1. Fixes issues related to visual regression of react components without a story and with nested variants.
+
+___POST DEPLOY STEPS___
+1. New Mayflower-React - npm install required
+
+

react/backstop/backstop.js

@@ -1,4 +1,4 @@
-const listDirs = require('./listDirs');
+const listComponents = require('./listComponents');
 const storyBookBackstop = require('./storyBookBackstop');
 const path = require('path');
 
@@ -10,9 +10,11 @@ let viewports;
 
 // Scan for component names and set up viewports.
 const componentsPath = `${__dirname}/../src/components/`;
+testComponents = listComponents(componentsPath);
+
 if (processAtoms) {
   testId = 'mayflower-react-atoms';
-  components = listDirs(componentsPath)
+  components = testComponents
     // Component directory names are capitalized.
     .filter((filePath) => (/^[A-Z]/.test(path.basename(filePath))))
     // Only test atoms with this backstop configuration.
@@ -27,11 +29,11 @@ if (processAtoms) {
   }];
 } else {
   testId = 'mayflower-react';
-  components = listDirs(componentsPath)
+  components = testComponents
     // Component directory names are capitalized.
     .filter((filePath) => (/^[A-Z]/.test(path.basename(filePath))))
-    // Only test stories other than atoms with this backstop configuration.
-    .filter((filePath) => (filePath.indexOf('/atoms/') === -1));
+    // Only test stories other than atoms with this backstop configuration.  Do not test animations.
+    .filter((filePath) => (filePath.indexOf('/atoms/') === -1) && (filePath.indexOf('/animations/') === -1));
 
   viewports = [{
     label: 'phone',

react/backstop/listComponents.js

@@ -0,0 +1,34 @@
+
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Lists all directories in the passed path as absolute path names.
+ * @param {string} dir
+ */
+const listComponents = (dir) => {
+  const fileNames = fs.readdirSync(dir);
+  let dirList = [];
+  let testList = [];
+
+  fileNames.forEach((fileName) => {
+    const absFilePath = path.join(dir, fileName);
+    if (fs.statSync(absFilePath).isDirectory()) {
+      dirList.push(absFilePath);
+      dirList = dirList.concat(listComponents(absFilePath));
+    }
+  });
+
+  Object.values(dirList).forEach((component) => {
+    const testComponent = fs.readdirSync(component);
+    testComponent.forEach((fileName) => {
+      if (/stories/.test(fileName)) {
+        testList.push(component);
+      }
+    });
+  })
+
+  return testList;
+};
+
+module.exports = listComponents;