Merge branch 'assembly-v1-update' into assembly-v1-navigation-accordion

* assembly-v1-update: [Assembly v1] OverviewHeader (#501) Handle NavigiationAccordion when there is no `activeItem` (#495) Do not preserve es modules in test environment (#498) [Assembly v1] CodeSnippetTitle (#491) [Assembly v1] Feedback (#496)
mapbox · Sep 16, 2021 · dbbb830 · dbbb830
2 parents 6318712 + 32b0c67
commit dbbb830
Show file tree

Hide file tree

Showing 20 changed files with 264 additions and 283 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@ This release updates to Assembly v1. [#481](https://github.com/mapbox/dr-ui/pull
 
 - 🚨 Replace `customStyles` prop in `Tag` with `customBorder`, `customColor,` and `customBackground`. The new props accept class names.
 - 🚨 `CardContainer` no longer accepts a number for `cardColSize`, choose: `'1/4'` for 4 cards or `'1/3'` for 3 cards per row. The default is `'1/2'` for 2 cards per row.
+- Handle `NavigiationAccordion` when there is no `activeItem`. [#495](https://github.com/mapbox/dr-ui/pull/495)
 
 ## 4.2.3
 

diff --git a/babel.config.js b/babel.config.js
@@ -7,8 +7,9 @@ module.exports = {
     'babel-plugin-transform-react-remove-prop-types'
   ],
   env: {
-    // When running `test` Jest will enable compilation from ECMAScript modules to CommonJS automatically
+    // When running `test` and `start` Jest and ReactTestKitchen will enable compilation from ECMAScript modules to CommonJS automatically
     test: {
+      presets: [['@babel/preset-env'], '@babel/preset-react'],
       plugins: ['@babel/plugin-transform-modules-commonjs']
     }
   }

diff --git a/.../android-layout-code-block/__tests__/__snapshots__/android-layout-code-block.test.js.snap b/.../android-layout-code-block/__tests__/__snapshots__/android-layout-code-block.test.js.snap
@@ -673,18 +673,18 @@ exports[`android-layout-code-block With link to GitHub file renders as expected
   className="my24"
 >
   <div
-    className="flex-parent-mm flex-parent--space-between-main-mm mb6"
+    className="flex-mm flex--space-between-main-mm mb6"
   >
     <div
-      className="flex-child"
+      className="flex-mm"
     >
       <div
-        className="inline-block txt-bold mb6 color-gray-dark"
+        className="txt-bold color-gray-dar mb6"
       >
         activity_styles_runtime_styling
       </div>
       <div
-        className="inline-block ml12-mm"
+        className="ml12-mm"
       >
         <a
           className="unprose link"

diff --git a/src/components/code-snippet-title/__tests__/__snapshots__/code-snippet-title.test.js.snap b/src/components/code-snippet-title/__tests__/__snapshots__/code-snippet-title.test.js.snap
@@ -2,18 +2,18 @@
 
 exports[`code-snippet-title Basic renders as expected 1`] = `
 <div
-  className="flex-parent-mm flex-parent--space-between-main-mm mb6"
+  className="flex-mm flex--space-between-main-mm mb6"
 >
   <div
-    className="flex-child"
+    className="flex-mm"
   >
     <div
-      className="inline-block txt-bold mb6 color-gray-dark"
+      className="txt-bold color-gray-dar mb6"
     >
       MainActivity.java
     </div>
     <div
-      className="inline-block ml12-mm"
+      className="ml12-mm"
     >
       <a
         className="unprose link"
@@ -45,18 +45,18 @@ exports[`code-snippet-title Basic renders as expected 1`] = `
 
 exports[`code-snippet-title With a toggle renders as expected 1`] = `
 <div
-  className="flex-parent-mm flex-parent--space-between-main-mm mb6"
+  className="flex-mm flex--space-between-main-mm mb6"
 >
   <div
-    className="flex-child"
+    className="flex-mm"
   >
     <div
-      className="inline-block txt-bold mb6 color-gray-dark"
+      className="txt-bold color-gray-dar mb6"
     >
       ViewController
     </div>
     <div
-      className="inline-block ml12-mm"
+      className="ml12-mm"
     >
       <a
         className="unprose link"
@@ -83,9 +83,7 @@ exports[`code-snippet-title With a toggle renders as expected 1`] = `
       </a>
     </div>
   </div>
-  <div
-    className="flex-child"
-  >
+  <div>
     <div
       className="relative "
     >

diff --git a/src/components/code-snippet-title/code-snippet-title.js b/src/components/code-snippet-title/code-snippet-title.js
@@ -5,15 +5,13 @@ import Icon from '@mapbox/mr-ui/icon';
 export default class CodeSnippetTitle extends React.PureComponent {
   renderFilename = () => {
     return (
-      <div className="inline-block txt-bold mb6 color-gray-dark">
-        {this.props.filename}
-      </div>
+      <div className="txt-bold color-gray-dar mb6">{this.props.filename}</div>
     );
   };
 
   renderLink = () => {
     return (
-      <div className="inline-block ml12-mm">
+      <div className="ml12-mm">
         <a
           className="unprose link"
           href={this.props.link}
@@ -28,12 +26,12 @@ export default class CodeSnippetTitle extends React.PureComponent {
   render() {
     const { link, toggle } = this.props;
     return (
-      <div className="flex-parent-mm flex-parent--space-between-main-mm mb6">
-        <div className="flex-child">
+      <div className="flex-mm flex--space-between-main-mm mb6">
+        <div className="flex-mm">
           {this.renderFilename()}
           {link && this.renderLink()}
         </div>
-        {toggle && <div className="flex-child">{toggle}</div>}
+        {toggle && <div>{toggle}</div>}
       </div>
     );
   }

diff --git a/src/components/code-snippet/__tests__/__snapshots__/code-snippet.test.js.snap b/src/components/code-snippet/__tests__/__snapshots__/code-snippet.test.js.snap
@@ -5,13 +5,13 @@ exports[`CodeSnippet A CodeSnippet with every feature (edit buttons, title) rend
   data-swiftype-index="false"
 >
   <div
-    className="flex-parent-mm flex-parent--space-between-main-mm mb6"
+    className="flex-mm flex--space-between-main-mm mb6"
   >
     <div
-      className="flex-child"
+      className="flex-mm"
     >
       <div
-        className="inline-block txt-bold mb6 color-gray-dark"
+        className="txt-bold color-gray-dar mb6"
       >
         index.html
       </div>
@@ -210,13 +210,13 @@ exports[`CodeSnippet CodeSnippet with edit buttons and extractor renders as expe
   data-swiftype-index="false"
 >
   <div
-    className="flex-parent-mm flex-parent--space-between-main-mm mb6"
+    className="flex-mm flex--space-between-main-mm mb6"
   >
     <div
-      className="flex-child"
+      className="flex-mm"
     >
       <div
-        className="inline-block txt-bold mb6 color-gray-dark"
+        className="txt-bold color-gray-dar mb6"
       >
         index.html
       </div>
@@ -954,13 +954,13 @@ exports[`CodeSnippet CodeSnippet with edit buttons with maxHeight. renders as ex
   data-swiftype-index="false"
 >
   <div
-    className="flex-parent-mm flex-parent--space-between-main-mm mb6"
+    className="flex-mm flex--space-between-main-mm mb6"
   >
     <div
-      className="flex-child"
+      className="flex-mm"
     >
       <div
-        className="inline-block txt-bold mb6 color-gray-dark"
+        className="txt-bold color-gray-dar mb6"
       >
         index.html
       </div>
@@ -2100,13 +2100,13 @@ exports[`CodeSnippet CodeSnippet without edit buttons renders as expected 1`] =
   data-swiftype-index="false"
 >
   <div
-    className="flex-parent-mm flex-parent--space-between-main-mm mb6"
+    className="flex-mm flex--space-between-main-mm mb6"
   >
     <div
-      className="flex-child"
+      className="flex-mm"
     >
       <div
-        className="inline-block txt-bold mb6 color-gray-dark"
+        className="txt-bold color-gray-dar mb6"
       >
         index.html
       </div>

diff --git a/...-activity-toggle/__tests__/__snapshots__/contextless-android-activity-toggle.test.js.snap b/...-activity-toggle/__tests__/__snapshots__/contextless-android-activity-toggle.test.js.snap
@@ -408,18 +408,16 @@ exports[`contextless-android-activity-toggle Two languages (code toggle not inte
     className="my24"
   >
     <div
-      className="flex-parent-mm flex-parent--space-between-main-mm mb6"
+      className="flex-mm flex--space-between-main-mm mb6"
     >
       <div
-        className="flex-child"
+        className="flex-mm"
       >
         <div
-          className="inline-block txt-bold mb6 color-gray-dark"
+          className="txt-bold color-gray-dar mb6"
         />
       </div>
-      <div
-        className="flex-child"
-      >
+      <div>
         <div
           className="relative "
         >

diff --git a/...roller-toggle/__tests__/__snapshots__/contextless-ios-view-controller-toggle.test.js.snap b/...roller-toggle/__tests__/__snapshots__/contextless-ios-view-controller-toggle.test.js.snap
@@ -131,18 +131,16 @@ exports[`contextless-ios-view-controller-toggle Two languages (code toggle is no
     className="my24"
   >
     <div
-      className="flex-parent-mm flex-parent--space-between-main-mm mb6"
+      className="flex-mm flex--space-between-main-mm mb6"
     >
       <div
-        className="flex-child"
+        className="flex-mm"
       >
         <div
-          className="inline-block txt-bold mb6 color-gray-dark"
+          className="txt-bold color-gray-dar mb6"
         />
       </div>
-      <div
-        className="flex-child"
-      >
+      <div>
         <div
           className="relative "
         >

diff --git a/src/components/feedback/__tests__/__snapshots__/category-confusing.test.js.snap b/src/components/feedback/__tests__/__snapshots__/category-confusing.test.js.snap
@@ -29,19 +29,17 @@ exports[`Workflow 3 - Enter feedback Cannot submit feedback yet 1`] = `
         className="bg-gray-faint round py12 px12"
       >
         <div
-          className="flex-parent flex-parent--column"
+          className="flex flex--column"
         >
           <div
-            className="flex-child flex-parent flex-parent--space-between-main w-full mb12"
+            className="flex flex--space-between-main w-full mb12"
           >
             <div
-              className="flex-child txt-bold"
+              className="txt-bold"
             >
               Something is confusing
             </div>
-            <div
-              className="flex-child"
-            >
+            <div>
               <Tooltip
                 alignment="center"
                 block={false}
@@ -140,7 +138,7 @@ exports[`Workflow 3 - Enter feedback Cannot submit feedback yet 1`] = `
             </div>
           </div>
           <div
-            className="flex-child mb6 prose"
+            className="mb6 prose"
           >
             <CategoryConfusing
               option="What about this page is confusing? How can we improve the content?"
@@ -233,7 +231,7 @@ exports[`Workflow 3 - Enter feedback Cannot submit feedback yet 1`] = `
             </CategoryConfusing>
           </div>
           <div
-            className="flex-child color-gray"
+            className="color-text"
           >
             Need help?
              

diff --git a/src/components/feedback/__tests__/__snapshots__/category-like.test.js.snap b/src/components/feedback/__tests__/__snapshots__/category-like.test.js.snap
@@ -29,19 +29,17 @@ exports[`Workflow 2 - I like this page Check UI element state 1`] = `
         className="bg-gray-faint round py12 px12"
       >
         <div
-          className="flex-parent flex-parent--column"
+          className="flex flex--column"
         >
           <div
-            className="flex-child flex-parent flex-parent--space-between-main w-full mb12"
+            className="flex flex--space-between-main w-full mb12"
           >
             <div
-              className="flex-child txt-bold"
+              className="txt-bold"
             >
               I like this page
             </div>
-            <div
-              className="flex-child"
-            >
+            <div>
               <Tooltip
                 alignment="center"
                 block={false}
@@ -140,7 +138,7 @@ exports[`Workflow 2 - I like this page Check UI element state 1`] = `
             </div>
           </div>
           <div
-            className="flex-child mb6 prose"
+            className="mb6 prose"
           >
             <CategoryLike
               leadText="Tell us what you like about this page."

diff --git a/src/components/feedback/__tests__/__snapshots__/category-problem.test.js.snap b/src/components/feedback/__tests__/__snapshots__/category-problem.test.js.snap
@@ -29,19 +29,17 @@ exports[`Workflow 2 - Report a problem Check UI element state 1`] = `
         className="bg-gray-faint round py12 px12"
       >
         <div
-          className="flex-parent flex-parent--column"
+          className="flex flex--column"
         >
           <div
-            className="flex-child flex-parent flex-parent--space-between-main w-full mb12"
+            className="flex flex--space-between-main w-full mb12"
           >
             <div
-              className="flex-child txt-bold"
+              className="txt-bold"
             >
               Report a problem
             </div>
-            <div
-              className="flex-child"
-            >
+            <div>
               <Tooltip
                 alignment="center"
                 block={false}
@@ -140,7 +138,7 @@ exports[`Workflow 2 - Report a problem Check UI element state 1`] = `
             </div>
           </div>
           <div
-            className="flex-child mb6 prose"
+            className="mb6 prose"
           >
             <CategoryProblem
               leadText="Tell us more about what's happening."
@@ -295,7 +293,7 @@ exports[`Workflow 2 - Report a problem Check UI element state 1`] = `
             </CategoryProblem>
           </div>
           <div
-            className="flex-child color-gray"
+            className="color-text"
           >
             Need help?
              

diff --git a/src/components/feedback/__tests__/__snapshots__/confirmation.test.js.snap b/src/components/feedback/__tests__/__snapshots__/confirmation.test.js.snap
@@ -26,17 +26,15 @@ exports[`Generate snapshot for feedback confirmation 1`] = `
         className="bg-gray-faint round py12 px12"
       >
         <div
-          className="flex-parent flex-parent--column"
+          className="flex flex--column"
         >
           <div
-            className="flex-child flex-parent flex-parent--space-between-main w-full mb12"
+            className="flex flex--space-between-main w-full mb12"
           >
             <div
-              className="flex-child txt-bold"
+              className="txt-bold"
             />
-            <div
-              className="flex-child"
-            >
+            <div>
               <Tooltip
                 alignment="center"
                 block={false}
@@ -135,7 +133,7 @@ exports[`Generate snapshot for feedback confirmation 1`] = `
             </div>
           </div>
           <div
-            className="flex-child mb6 prose"
+            className="mb6 prose"
           >
             <div
               className="align-center prose relative"