feat(inputdropdown): revert @emotion/babel-plugin changes (#396)

* feat(inputdropdown): revert @emotion/babel-plugin changes * fix(storybook): fix missing library
chanzuckerberg · Mar 17, 2023 · a56aab3 · a56aab3
1 parent b089d1f
commit a56aab3
Show file tree

Hide file tree

Showing 34 changed files with 197 additions and 523 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -2,12 +2,6 @@ const path = require("path");
 const toPath = (filePath) => path.join(process.cwd(), filePath);
 
 module.exports = {
-  // (masoudmanson): Enable @emotion/babel-plugin on storybook in order to
-  // use componenet selectors in styled component
-  babel: async (options) => ({
-    ...options,
-    plugins: [...options.plugins, "@emotion"],
-  }),
   features: {
     buildStoriesJson: true,
     // (thuang): https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#emotion11-quasi-compatibility

diff --git a/czifui-v0.0.46.tgz b/czifui-v0.0.46.tgz
diff --git a/czifui-v0.0.49.tgz b/czifui-v0.0.49.tgz
diff --git a/jest.config.js b/jest.config.js
@@ -9,7 +9,6 @@ module.exports = {
   preset: "ts-jest",
   testEnvironment: "jsdom",
   transform: {
-    "^.+\\.[tj]sx?$": "./jest.transform.js",
     "^.+\\.svg$": "svg-jest",
   },
 };
diff --git a/jest.transform.js b/jest.transform.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "czifui",
-  "version": "0.0.46",
+  "version": "0.0.49",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "repository": {
@@ -10,11 +10,9 @@
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.21.0",
-    "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.21.0",
     "@chanzuckerberg/axe-storybook-testing": "^6.3.0",
     "@chanzuckerberg/story-utils": "^2.1.0",
-    "@emotion/babel-plugin": "^11.10.6",
     "@emotion/core": "^11.0.0",
     "@emotion/css": "^11.1.3",
     "@emotion/react": "^11.1.5",
@@ -49,14 +47,13 @@
     "@typescript-eslint/parser": "^5.0.0",
     "autoprefixer": "^10.4.13",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^29.5.0",
     "babel-loader": "^8.2.2",
     "chromatic": "^6.3.4",
     "commitizen": "^4.2.4",
     "concurrently": "^6.0.0",
     "css-font": "^1.2.0",
     "cz-conventional-changelog": "^3.3.0",
-    "czifui": "file:czifui-v0.0.46.tgz",
+    "czifui": "file:czifui-v0.0.49.tgz",
     "eslint": "^7.32.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-config-prettier": "^8.1.0",

diff --git a/src/common/styles-dictionary/css/variables.css b/src/common/styles-dictionary/css/variables.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 14 Mar 2023 00:36:07 GMT
+ * Generated on Fri, 17 Mar 2023 04:57:20 GMT
  */
 
 :root {

diff --git a/src/common/styles-dictionary/scss/_variables.scss b/src/common/styles-dictionary/scss/_variables.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 14 Mar 2023 00:36:07 GMT
+// Generated on Fri, 17 Mar 2023 04:57:20 GMT
 
 $sds-font-letter-spacing-default: 0.3px;
 $sds-font-letter-spacing-caps: 1px;

diff --git a/src/core/Accordion/__snapshots__/index.test.tsx.snap b/src/core/Accordion/__snapshots__/index.test.tsx.snap
@@ -2,14 +2,14 @@
 
 exports[`<Accordion /> Test story renders snapshot 1`] = `
 <div
-  class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root MuiAccordion-gutters css-117pwbd-MuiPaper-root-MuiAccordion-root-StyledAccordion"
+  class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root MuiAccordion-gutters css-1x3fmw6-MuiPaper-root-MuiAccordion-root"
   data-testid="accordion"
   id="test-story"
 >
   <div
     aria-controls="test-story-header-panel-content"
     aria-expanded="false"
-    class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters css-19rbov-MuiButtonBase-root-MuiAccordionSummary-root-StyledAccordionHeader"
+    class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters css-q39ari-MuiButtonBase-root-MuiAccordionSummary-root"
     id="test-story-header"
     role="button"
     tabindex="0"
@@ -27,7 +27,7 @@ exports[`<Accordion /> Test story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q73dgu-MuiSvgIcon-root-iconSize-staticStyle-StyledSvgIcon"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
           data-jest-file-name="IconChevronDownSmall.svg"
           data-jest-svg-name="IconChevronDownSmall"
           data-testid="IconChevronDownSmall"
@@ -54,7 +54,7 @@ exports[`<Accordion /> Test story renders snapshot 1`] = `
           role="region"
         >
           <div
-            class="MuiAccordionDetails-root css-1krbxh6-MuiAccordionDetails-root-StyledAccordionDetails"
+            class="MuiAccordionDetails-root css-rnrgul-MuiAccordionDetails-root"
           >
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
           </div>

diff --git a/src/core/Banner/__snapshots__/banner.test.tsx.snap b/src/core/Banner/__snapshots__/banner.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q73dgu-MuiSvgIcon-root-iconSize-staticStyle-StyledSvgIcon"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
             data-jest-file-name="IconInfoCircleLarge.svg"
             data-jest-svg-name="IconInfoCircleLarge"
             data-testid="IconInfoCircleLarge"
@@ -33,7 +33,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
     </div>
     <button
       aria-label="Close"
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-ozv4bb-MuiButtonBase-root-MuiIconButton-root-tertiary-small-StyledButtonIcon"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-eusci7-MuiButtonBase-root-MuiIconButton-root"
       tabindex="0"
       type="button"
     >
@@ -42,7 +42,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-dj49f0-MuiSvgIcon-root-StyledSvgIcon"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
           data-jest-file-name="IconXMarkSmall.svg"
           data-jest-svg-name="IconXMarkSmall"
           data-testid="IconXMarkSmall"
@@ -74,7 +74,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q73dgu-MuiSvgIcon-root-iconSize-staticStyle-StyledSvgIcon"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
             data-jest-file-name="IconInfoCircleLarge.svg"
             data-jest-svg-name="IconInfoCircleLarge"
             data-testid="IconInfoCircleLarge"
@@ -89,15 +89,15 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
         style="padding: 5px;"
       />
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-ov1h50-MuiTypography-root-MuiLink-root-defaultStyle-StyledLink"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-otz8ol-MuiTypography-root-MuiLink-root"
         href="/"
       >
         Learn More
       </a>
     </div>
     <button
       aria-label="Close"
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-jjv6wj-MuiButtonBase-root-MuiIconButton-root-tertiary-small-StyledButtonIcon"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-18h951f-MuiButtonBase-root-MuiIconButton-root"
       tabindex="0"
       type="button"
     >
@@ -106,7 +106,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-dj49f0-MuiSvgIcon-root-StyledSvgIcon"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
           data-jest-file-name="IconXMarkSmall.svg"
           data-jest-svg-name="IconXMarkSmall"
           data-testid="IconXMarkSmall"
@@ -138,7 +138,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q73dgu-MuiSvgIcon-root-iconSize-staticStyle-StyledSvgIcon"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
             data-jest-file-name="IconInfoCircleLarge.svg"
             data-jest-svg-name="IconInfoCircleLarge"
             data-testid="IconInfoCircleLarge"
@@ -152,7 +152,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
     </div>
     <button
       aria-label="Close"
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-ozv4bb-MuiButtonBase-root-MuiIconButton-root-tertiary-small-StyledButtonIcon"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-eusci7-MuiButtonBase-root-MuiIconButton-root"
       tabindex="0"
       type="button"
     >
@@ -161,7 +161,7 @@ exports[`<Banner /> LivePreview story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-dj49f0-MuiSvgIcon-root-StyledSvgIcon"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
           data-jest-file-name="IconXMarkSmall.svg"
           data-jest-svg-name="IconXMarkSmall"
           data-testid="IconXMarkSmall"
@@ -194,7 +194,7 @@ exports[`<Banner /> Test story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q73dgu-MuiSvgIcon-root-iconSize-staticStyle-StyledSvgIcon"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
           data-jest-file-name="IconInfoCircleLarge.svg"
           data-jest-svg-name="IconInfoCircleLarge"
           data-testid="IconInfoCircleLarge"
@@ -208,7 +208,7 @@ exports[`<Banner /> Test story renders snapshot 1`] = `
   </div>
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-ozv4bb-MuiButtonBase-root-MuiIconButton-root-tertiary-small-StyledButtonIcon"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-eusci7-MuiButtonBase-root-MuiIconButton-root"
     tabindex="0"
     type="button"
   >
@@ -217,7 +217,7 @@ exports[`<Banner /> Test story renders snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-dj49f0-MuiSvgIcon-root-StyledSvgIcon"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
         data-jest-file-name="IconXMarkSmall.svg"
         data-jest-svg-name="IconXMarkSmall"
         data-testid="IconXMarkSmall"

diff --git a/src/core/Button/__snapshots__/index.test.tsx.snap b/src/core/Button/__snapshots__/index.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`<button /> MinimalLivePreview story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-v0nv1u-MuiSvgIcon-root-iconSize-buttonStyle-StyledSvgIcon"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
           data-jest-file-name="IconDownloadSmall.svg"
           data-jest-svg-name="IconDownloadSmall"
           data-testid="IconDownloadSmall"
@@ -82,7 +82,7 @@ exports[`<button /> RoundedLivePreview story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-v0nv1u-MuiSvgIcon-root-iconSize-buttonStyle-StyledSvgIcon"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
           data-jest-file-name="IconDownloadSmall.svg"
           data-jest-svg-name="IconDownloadSmall"
           data-testid="IconDownloadSmall"
@@ -120,7 +120,7 @@ exports[`<button /> RoundedLivePreview story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-v0nv1u-MuiSvgIcon-root-iconSize-buttonStyle-StyledSvgIcon"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
           data-jest-file-name="IconDownloadSmall.svg"
           data-jest-svg-name="IconDownloadSmall"
           data-testid="IconDownloadSmall"
@@ -165,7 +165,7 @@ exports[`<button /> SquareLivePreview story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-v0nv1u-MuiSvgIcon-root-iconSize-buttonStyle-StyledSvgIcon"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
           data-jest-file-name="IconDownloadSmall.svg"
           data-jest-svg-name="IconDownloadSmall"
           data-testid="IconDownloadSmall"
@@ -203,7 +203,7 @@ exports[`<button /> SquareLivePreview story renders snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-v0nv1u-MuiSvgIcon-root-iconSize-buttonStyle-StyledSvgIcon"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
           data-jest-file-name="IconDownloadSmall.svg"
           data-jest-svg-name="IconDownloadSmall"
           data-testid="IconDownloadSmall"

diff --git a/src/core/ButtonDropdown/__snapshots__/index.test.tsx.snap b/src/core/ButtonDropdown/__snapshots__/index.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`<ButtonDropdown /> Test story renders snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-v0nv1u-MuiSvgIcon-root-iconSize-buttonStyle-StyledSvgIcon"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
         data-jest-file-name="IconDownloadLarge.svg"
         data-jest-svg-name="IconDownloadLarge"
         data-testid="IconDownloadLarge"
@@ -35,7 +35,7 @@ exports[`<ButtonDropdown /> Test story renders snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-v0nv1u-MuiSvgIcon-root-iconSize-buttonStyle-StyledSvgIcon"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-8icru1-MuiSvgIcon-root"
         data-jest-file-name="IconChevronDownSmall.svg"
         data-jest-svg-name="IconChevronDownSmall"
         data-testid="IconChevronDownSmall"

diff --git a/src/core/ButtonIcon/__snapshots__/index.test.tsx.snap b/src/core/ButtonIcon/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ButtonIcon /> Test story renders snapshot 1`] = `
 <button
   aria-label="dotsHorizontal"
-  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-12d7v0h-MuiButtonBase-root-MuiIconButton-root-primary-isOn-medium-StyledButtonIcon"
+  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-4l34x5-MuiButtonBase-root-MuiIconButton-root"
   data-testid="iconButton"
   tabindex="0"
   type="button"
@@ -13,7 +13,7 @@ exports[`<ButtonIcon /> Test story renders snapshot 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-dj49f0-MuiSvgIcon-root-StyledSvgIcon"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
       data-jest-file-name="IconDotsHorizontal3Large.svg"
       data-jest-svg-name="IconDotsHorizontal3Large"
       data-testid="IconDotsHorizontal3Large"

diff --git a/src/core/CellBasic/__snapshots__/index.test.tsx.snap b/src/core/CellBasic/__snapshots__/index.test.tsx.snap
@@ -99,7 +99,7 @@ exports[`<CellBasic /> Test story renders snapshot 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q73dgu-MuiSvgIcon-root-iconSize-staticStyle-StyledSvgIcon"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-25m3b5-MuiSvgIcon-root"
                 data-jest-file-name="IconBacteriaLarge.svg"
                 data-jest-svg-name="IconBacteriaLarge"
                 data-testid="IconBacteriaLarge"

diff --git a/src/core/CellComponent/__snapshots__/index.test.tsx.snap b/src/core/CellComponent/__snapshots__/index.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`<CellComponent /> Test story renders snapshot 1`] = `
                 Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
               </span>
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-clickable MuiChip-clickableColorPrimary MuiChip-filledPrimary css-1shf2y9-MuiButtonBase-root-MuiChip-root-withoutIcon-createTypeCss-rounded-withHover-StyledTag"
+                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-clickable MuiChip-clickableColorPrimary MuiChip-filledPrimary css-bv58u9-MuiButtonBase-root-MuiChip-root"
                 data-testid="Child"
                 role="button"
                 tabindex="0"

diff --git a/src/core/CellHeader/__snapshots__/index.test.tsx.snap b/src/core/CellHeader/__snapshots__/index.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`<CellHeader /> Ascending story renders snapshot 1`] = `
           </span>
           <button
             aria-label="Change sort direction from ascending to descending"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-c5cchj-MuiButtonBase-root-MuiIconButton-root-tertiary-small-StyledButtonIcon"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-8uz3p0-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
@@ -25,7 +25,7 @@ exports[`<CellHeader /> Ascending story renders snapshot 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-dj49f0-MuiSvgIcon-root-StyledSvgIcon"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
                 data-jest-file-name="IconChevronUpSmall.svg"
                 data-jest-svg-name="IconChevronUpSmall"
                 data-testid="IconChevronUpSmall"
@@ -62,7 +62,7 @@ exports[`<CellHeader /> Test story renders snapshot 1`] = `
           </span>
           <button
             aria-label="Change sort direction from descending to ascending"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-iknymi-MuiButtonBase-root-MuiIconButton-root-tertiary-small-StyledButtonIcon"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-uq52cw-MuiButtonBase-root-MuiIconButton-root"
             tabindex="0"
             type="button"
           >
@@ -71,7 +71,7 @@ exports[`<CellHeader /> Test story renders snapshot 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-dj49f0-MuiSvgIcon-root-StyledSvgIcon"
+                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
                 data-jest-file-name="IconChevronDownSmall.svg"
                 data-jest-svg-name="IconChevronDownSmall"
                 data-testid="IconChevronDownSmall"