Ndelangen/remove css usage (#9003)

Ndelangen/remove css usage

addons/a11y/src/components/A11YPanel.tsx

@@ -22,9 +22,9 @@ export enum RuleType {
 
 const Icon = styled(Icons)(
   {
-    height: '12px',
-    width: '12px',
-    marginRight: '4px',
+    height: 12,
+    width: 12,
+    marginRight: 4,
   },
   ({ status, theme }: any) =>
     status === 'running'

addons/a11y/src/components/Report/Elements.tsx

@@ -15,15 +15,15 @@ const ItemTitle = styled.span<{}>(({ theme }) => ({
   borderBottom: `1px solid ${theme.appBorderColor}`,
   width: '100%',
   display: 'flex',
-  paddingBottom: '6px',
-  marginBottom: '6px',
+  paddingBottom: 6,
+  marginBottom: 6,
   justifyContent: 'space-between',
 }));
 
 const HighlightToggleElement = styled.span({
   fontWeight: 'normal',
   alignSelf: 'center',
-  paddingRight: '15px',
+  paddingRight: 15,
   input: { margin: 0 },
 });
 

addons/a11y/src/components/Report/Info.tsx

@@ -4,14 +4,14 @@ import { styled } from '@storybook/theming';
 import { Result } from 'axe-core';
 
 const Wrapper = styled.div({
-  padding: '12px',
-  marginBottom: '10px',
+  padding: 12,
+  marginBottom: 10,
 });
 const Help = styled.p({
   margin: '0 0 12px',
 });
 const Link = styled.a({
-  marginTop: '12px',
+  marginTop: 12,
   textDecoration: 'underline',
   color: 'inherit',
   display: 'block',

addons/a11y/src/components/Report/Item.tsx

@@ -24,7 +24,7 @@ const Icon = styled<any, any>(Icons)(({ theme }) => ({
   width: 10,
   minWidth: 10,
   color: theme.color.mediumdark,
-  marginRight: '10px',
+  marginRight: 10,
   transition: 'transform 0.1s ease-in-out',
   alignSelf: 'center',
   display: 'inline-flex',
@@ -49,7 +49,7 @@ const HeaderBar = styled.div<{}>(({ theme }) => ({
 const HighlightToggleElement = styled.span({
   fontWeight: 'normal',
   float: 'right',
-  marginRight: '15px',
+  marginRight: 15,
   alignSelf: 'center',
   input: { margin: 0 },
 });

addons/a11y/src/components/Report/Rules.tsx

@@ -16,33 +16,33 @@ const impactColors = {
 const List = styled.div({
   display: 'flex',
   flexDirection: 'column',
-  paddingBottom: '4px',
-  paddingRight: '4px',
-  paddingTop: '4px',
+  paddingBottom: 4,
+  paddingRight: 4,
+  paddingTop: 4,
   fontWeight: '400',
 } as any);
 
 const Item = styled.div(({ elementWidth }: { elementWidth: number }) => {
   const maxWidthBeforeBreak = 407;
   return {
     flexDirection: elementWidth > maxWidthBeforeBreak ? 'row' : 'inherit',
-    marginBottom: elementWidth > maxWidthBeforeBreak ? '6px' : '12px',
+    marginBottom: elementWidth > maxWidthBeforeBreak ? 6 : 12,
     display: elementWidth > maxWidthBeforeBreak ? 'flex' : 'block',
   };
 });
 
 const StyledBadge = styled(Badge)(({ status }: { status: string }) => ({
   padding: '2px 8px',
-  marginBottom: '3px',
-  minWidth: '65px',
+  marginBottom: 3,
+  minWidth: 65,
   maxWidth: 'fit-content',
   width: '100%',
   textAlign: 'center',
 }));
 
 const Message = styled.div({
-  paddingLeft: '6px',
-  paddingRight: '23px',
+  paddingLeft: 6,
+  paddingRight: 23,
 });
 
 const Status = styled.div(({ passes, impact }: { passes: boolean; impact: string }) => ({
@@ -51,8 +51,8 @@ const Status = styled.div(({ passes, impact }: { passes: boolean; impact: string
   alignItems: 'center',
   color: passes ? impactColors.success : (impactColors as any)[impact],
   '& > svg': {
-    height: '16px',
-    width: '16px',
+    height: 16,
+    width: 16,
   },
 }));
 

addons/a11y/src/components/Report/Tags.tsx

@@ -11,7 +11,7 @@ const Wrapper = styled.div({
 
 const Item = styled.div<{}>(({ theme }) => ({
   margin: '0 6px',
-  padding: '5px',
+  padding: 5,
   border: `1px solid ${theme.appBorderColor}`,
   borderRadius: theme.appBorderRadius,
 }));

addons/a11y/src/components/Tabs.tsx

@@ -18,8 +18,8 @@ const Container = styled.div({
 const HighlightToggleLabel = styled.label<{}>(({ theme }) => ({
   cursor: 'pointer',
   userSelect: 'none',
-  marginBottom: '3px',
-  marginRight: '3px',
+  marginBottom: 3,
+  marginRight: 3,
   color: theme.color.dark,
 }));
 
@@ -31,18 +31,18 @@ const GlobalToggle = styled.div(({ elementWidth }: { elementWidth: number }) =>
     padding: elementWidth > maxWidthBeforeBreak ? '12px 15px 10px 0' : '12px 0px 3px 12px',
     height: '40px',
     border: 'none',
-    marginTop: elementWidth > maxWidthBeforeBreak ? '-40px' : '0px',
+    marginTop: elementWidth > maxWidthBeforeBreak ? -40 : 0,
     float: elementWidth > maxWidthBeforeBreak ? 'right' : 'left',
     display: elementWidth > maxWidthBeforeBreak ? 'flex' : 'block',
     alignItems: 'center',
     width: elementWidth > maxWidthBeforeBreak ? 'auto' : '100%',
     borderBottom: elementWidth > maxWidthBeforeBreak ? 'none' : '1px solid rgba(0,0,0,.1)',
 
     input: {
-      marginLeft: '10',
-      marginRight: '0',
-      marginTop: '0',
-      marginBottom: '0',
+      marginLeft: 10,
+      marginRight: 0,
+      marginTop: 0,
+      marginBottom: 0,
     },
   };
 });

addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap

@@ -229,7 +229,6 @@ exports[`A11YPanel should render report 1`] = `
                 "15paq49": true,
                 "1977chw": true,
                 "19mcg9j": true,
-                "1ez3l8h": true,
                 "1imo1gr": true,
                 "1kbt4a0": true,
                 "1l7fvsg": true,
@@ -239,6 +238,7 @@ exports[`A11YPanel should render report 1`] = `
                 "6z0ulf": true,
                 "animation-u07e3c": true,
                 "aq4p19": true,
+                "f68qle": true,
                 "fg630j": true,
                 "iau1th": true,
                 "jb2puo": true,
@@ -620,13 +620,13 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .css-1ez3l8h{cursor:pointer;font-size:14px;padding:12px 0px 3px 12px;height:40px;border:none;margin-top:0px;float:left;display:block;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
+                    .css-f68qle{cursor:pointer;font-size:14px;padding:12px 0px 3px 12px;height:40px;border:none;margin-top:0;float:left;display:block;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
                   </style>
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-1ez3l8h input{margin-left:10;margin-right:0;margin-top:0;margin-bottom:0;}
+                    .css-f68qle input{margin-left:10px;margin-right:0;margin-top:0;margin-bottom:0;}
                   </style>
                   <style
                     data-emotion="css"
@@ -846,13 +846,13 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
                     
-                    .css-1ez3l8h{cursor:pointer;font-size:14px;padding:12px 0px 3px 12px;height:40px;border:none;margin-top:0px;float:left;display:block;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
+                    .css-f68qle{cursor:pointer;font-size:14px;padding:12px 0px 3px 12px;height:40px;border:none;margin-top:0;float:left;display:block;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;border-bottom:1px solid rgba(0,0,0,.1);}
                   </style>,
                   <style
                     data-emotion="css"
                   >
                     
-                    .css-1ez3l8h input{margin-left:10;margin-right:0;margin-top:0;margin-bottom:0;}
+                    .css-f68qle input{margin-left:10px;margin-right:0;margin-top:0;margin-bottom:0;}
                   </style>,
                   <style
                     data-emotion="css"

addons/actions/src/components/ActionLogger/style.tsx

@@ -3,7 +3,7 @@ import { opacify } from 'polished';
 
 export const Action = styled.div({
   display: 'flex',
-  padding: '0',
+  padding: 0,
   borderLeft: '5px solid transparent',
   borderBottom: '1px solid transparent',
   transition: 'all 0.1s',
@@ -17,7 +17,7 @@ export const Counter = styled.div<{}>(({ theme }) => ({
   fontWeight: theme.typography.weight.bold,
   lineHeight: 1,
   padding: '1px 5px',
-  borderRadius: '20px',
+  borderRadius: 20,
   margin: '2px 0px',
 }));
 

addons/events/src/components/Panel.tsx

@@ -11,7 +11,7 @@ import { Event as EventType, OnEmitEvent } from '../index';
 const Wrapper = styled.div({
   width: '100%',
   boxSizing: 'border-box',
-  padding: '10px',
+  padding: 10,
   minHeight: '100%',
 });
 

addons/info/src/__snapshots__/index.test.js.snap

@@ -118,7 +118,7 @@ exports[`addon Info should render <Info /> and external markdown 1`] = `
           "cursor": "pointer",
           "display": "block",
           "fontFamily": "sans-serif",
-          "fontSize": "12px",
+          "fontSize": 12,
           "padding": "5px 15px",
           "position": "fixed",
           "right": 0,
@@ -253,7 +253,7 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
           "cursor": "pointer",
           "display": "block",
           "fontFamily": "sans-serif",
-          "fontSize": "12px",
+          "fontSize": 12,
           "padding": "5px 15px",
           "position": "fixed",
           "right": 0,
@@ -386,7 +386,7 @@ exports[`addon Info should render <Info /> for memoized component 1`] = `
           "cursor": "pointer",
           "display": "block",
           "fontFamily": "sans-serif",
-          "fontSize": "12px",
+          "fontSize": 12,
           "padding": "5px 15px",
           "position": "fixed",
           "right": 0,

addons/info/src/components/Story.js

@@ -18,7 +18,7 @@ const stylesheetBase = {
   button: {
     base: {
       fontFamily: 'sans-serif',
-      fontSize: '12px',
+      fontSize: 12,
       display: 'block',
       position: 'fixed',
       border: 'none',

addons/info/src/components/markdown/pre/copyButton.js

@@ -16,11 +16,11 @@ function CopyButton({ onClick, toggled }) {
         alignSelf: 'flex-start',
         flexShrink: '0',
         overflow: 'hidden',
-        borderWidth: '1px',
+        borderWidth: 1,
         borderStyle: 'solid',
         borderColor: 'rgb(238, 238, 238)',
         borderImage: 'initial',
-        borderRadius: '3px',
+        borderRadius: 3,
         padding: '3px 10px',
       }}
     >

addons/jest/src/components/Message.tsx

@@ -22,27 +22,27 @@ class TestDetail {
 }
 const StackTrace = styled.pre<{}>(({ theme }) => ({
   background: theme.color.lighter,
-  paddingTop: '4px',
-  paddingBottom: '4px',
-  paddingLeft: '6px',
-  borderRadius: '2px',
+  paddingTop: 4,
+  paddingBottom: 4,
+  paddingLeft: 6,
+  borderRadius: 2,
   overflow: 'auto',
   margin: '10px 30px 10px 30px',
   whiteSpace: 'pre',
 }));
 
 const Results = styled.div({
-  paddingTop: '10px',
-  marginLeft: '31px',
-  marginRight: '30px',
+  paddingTop: 10,
+  marginLeft: 31,
+  marginRight: 30,
 });
 
 const Description = styled.div<{}>(({ theme }) => ({
-  paddingBottom: '10px',
-  paddingTop: '10px',
+  paddingBottom: 10,
+  paddingTop: 10,
   borderBottom: theme.appBorderColor,
-  marginLeft: '31px',
-  marginRight: '30px',
+  marginLeft: 31,
+  marginRight: 30,
   overflowWrap: 'break-word',
 }));
 

addons/jest/src/components/Panel.tsx

@@ -26,19 +26,19 @@ const Item = styled.li({
 
 const ProgressWrapper = styled.div({
   position: 'relative',
-  height: '10px',
-  width: '30px',
+  height: 10,
+  width: 30,
   display: 'flex',
-  top: '-2px',
+  top: -2,
 });
 
 const SuiteHead = styled.div({
   display: 'flex',
   alignItems: 'baseline',
   position: 'absolute',
   zIndex: 2,
-  right: '20px',
-  marginTop: '15px',
+  right: 20,
+  marginTop: 15,
 });
 
 const SuiteTotals = styled(({ result, className, width }) => (
@@ -62,16 +62,16 @@ const SuiteTotals = styled(({ result, className, width }) => (
   alignItems: 'center',
   color: theme.color.dark,
   fontSize: '14px',
-  marginTop: '-5px',
+  marginTop: -5,
   '& > *': {
     marginRight: 10,
   },
 }));
 
 const SuiteProgressPortion = styled.div<{ color: any; progressPercent: number }>(
   ({ theme, color, progressPercent }) => ({
-    height: '6px',
-    top: '3px',
+    height: 6,
+    top: 3,
     width: `${progressPercent}%`,
     backgroundColor: color,
   })

addons/jest/src/components/Result.tsx

@@ -34,7 +34,7 @@ const Icon = styled<any, any>(Icons)(({ theme }) => ({
   width: 10,
   minWidth: 10,
   color: theme.color.mediumdark,
-  marginRight: '10px',
+  marginRight: 10,
   transition: 'transform 0.1s ease-in-out',
   alignSelf: 'center',
   display: 'inline-flex',