[Assembly v1] Feedback (#496)

* codemod changes * update snapshots * Update src/components/feedback/feedback.js Co-authored-by: Katy DeCorah <decorah@mapbox.com> * update snapshots Co-authored-by: Katy DeCorah <decorah@mapbox.com>
mapbox · Sep 15, 2021 · e5152a3 · e5152a3
1 parent 480a7c7
commit e5152a3
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 52 deletions.
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"

diff --git a/src/components/feedback/__tests__/__snapshots__/contact-support.test.js.snap b/src/components/feedback/__tests__/__snapshots__/contact-support.test.js.snap
@@ -28,19 +28,17 @@ exports[`Workflow 2 - Contact support Click button, then set 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"
             >
               Share your feedback
             </div>
-            <div
-              className="flex-child"
-            >
+            <div>
               <Tooltip
                 alignment="center"
                 block={false}
@@ -139,7 +137,7 @@ exports[`Workflow 2 - Contact support Click button, then set state 1`] = `
             </div>
           </div>
           <div
-            className="flex-child mb6 prose"
+            className="mb6 prose"
           >
             <button
               className="btn w-full mb6"
@@ -167,7 +165,7 @@ exports[`Workflow 2 - Contact support Click button, then set state 1`] = `
             </button>
           </div>
           <div
-            className="flex-child color-gray"
+            className="color-text"
           >
             Need help?
              

diff --git a/src/components/feedback/__tests__/__snapshots__/logged-in.test.js.snap b/src/components/feedback/__tests__/__snapshots__/logged-in.test.js.snap
@@ -29,19 +29,17 @@ exports[`Workflow with logged in user information 2 - Something is confusing Che
         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 with logged in user information 2 - Something is confusing Che
             </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 with logged in user information 2 - Something is confusing Che
             </CategoryConfusing>
           </div>
           <div
-            className="flex-child color-gray"
+            className="color-text"
           >
             Need help?
              

diff --git a/src/components/feedback/feedback.js b/src/components/feedback/feedback.js
@@ -131,10 +131,10 @@ class Feedback extends React.PureComponent {
     return (
       <div className="dr-ui--feedback wmax300">
         <div className="bg-gray-faint round py12 px12">
-          <div className="flex-parent flex-parent--column">
-            <div className="flex-child flex-parent flex-parent--space-between-main w-full mb12">
-              <div className="flex-child txt-bold">{title}</div>
-              <div className="flex-child">
+          <div className="flex flex--column">
+            <div className="flex flex--space-between-main w-full mb12">
+              <div className="txt-bold">{title}</div>
+              <div>
                 <Tooltip content="Close">
                   <button
                     id="feedback-close-button"
@@ -147,9 +147,9 @@ class Feedback extends React.PureComponent {
                 </Tooltip>
               </div>
             </div>
-            <div className="flex-child mb6 prose">{children}</div>
+            <div className="mb6 prose">{children}</div>
             {showContactSupport && (
-              <div className="flex-child color-gray">
+              <div className="color-text">
                 Need help?{' '}
                 <button
                   className="link"