build(opentrons): add styled-components to buildtools (#5129)

* build(opentrons): add styled-components to buildtools

.stylelintrc.js

@@ -1,5 +1,14 @@
 module.exports = {
-  extends: ['stylelint-config-standard'],
+  processors: [
+    [
+      'stylelint-processor-styled-components',
+      {
+        ignoreFiles: ['**/*.css'],
+      },
+    ],
+  ],
+
+  extends: ['stylelint-config-standard', 'stylelint-config-styled-components'],
 
   ignoreFiles: ['api/**', '**/dist/**', '**/coverage/**', '**/venv/**'],
 

Makefile

@@ -145,7 +145,7 @@ lint-json:
 
 .PHONY: lint-css
 lint-css:
-	stylelint "**/*.css"
+	stylelint "**/*.css" "**/*.js"
 
 .PHONY: check-js
 check-js:

babel.config.js

@@ -2,14 +2,17 @@
 
 module.exports = {
   env: {
+    // Note(isk: 3/2/20): Must have babel-plugin-styled-components in each env,
+    // see here for further details: s https://styled-components.com/docs/tooling#babel-plugin
     production: {
-      plugins: ['babel-plugin-unassert'],
+      plugins: ['babel-plugin-styled-components', 'babel-plugin-unassert'],
     },
     development: {
-      plugins: ['react-hot-loader/babel'],
+      plugins: ['babel-plugin-styled-components', 'react-hot-loader/babel'],
     },
     test: {
       plugins: [
+        'babel-plugin-styled-components',
         '@babel/plugin-transform-modules-commonjs',
         'babel-plugin-dynamic-import-node',
       ],

components/package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "react-popper": "^1.0.0",
     "react-remove-scroll": "^1.0.8",
-    "react-select": "^3.0.8"
+    "react-select": "^3.0.8",
+    "styled-components": "5.0.1"
   }
 }

components/src/__tests__/__snapshots__/structure.test.js.snap

@@ -2,10 +2,10 @@
 
 exports[`Card renders Card correctly 1`] = `
 <section
-  className="card"
+  className="Card__Section-sc-1ltsa6e-0 fUnCuR"
 >
   <h3
-    className="card_title"
+    className="Card__Title-sc-1ltsa6e-1 cONCT"
   >
     title
   </h3>
@@ -87,7 +87,7 @@ exports[`Pill renders Pill correctly with inverted text 1`] = `
 
 exports[`RefreshCard renders correctly 1`] = `
 <section
-  className="card"
+  className="Card__Section-sc-1ltsa6e-0 fUnCuR"
 >
   <button
     className="button_flat button_icon refresh_card_icon"

components/src/structure/Card.js

@@ -2,9 +2,9 @@
 // Card component with drop shadow
 
 import * as React from 'react'
-import cx from 'classnames'
+import styled from 'styled-components'
 
-import styles from './structure.css'
+import * as styles from '../styles'
 
 export type CardProps = {|
   /** Title for card, all cards should receive a title. */
@@ -23,16 +23,39 @@ export type CardProps = {|
  * Titles and other children handle their own styles and layout.
  */
 export function Card(props: CardProps) {
-  const { title, children } = props
-
-  const style = cx(styles.card, props.className, {
-    [styles.disabled]: props.disabled,
-  })
+  const { title, children, className, disabled } = props
 
   return (
-    <section className={style}>
-      {title && <h3 className={styles.card_title}>{title}</h3>}
+    <Section disabled={disabled} className={className}>
+      {title && <Title className={className}>{title}</Title>}
       {children}
-    </section>
+    </Section>
   )
 }
+
+const Section = styled.section`
+  ${styles.FS_BODY_2}
+  position: relative;
+  overflow: visible;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.33);
+  ${({ disabled }) =>
+    disabled &&
+    `
+    pointer-events: none;
+    background-color: transparent;
+
+    & * {
+      color: ${styles.C_FONT_DISABLED};
+      fill: ${styles.C_FONT_DISABLED};
+      background-color: transparent;
+    }
+  `}
+`
+
+const Title = styled.h3`
+  ${styles.FONT_HEADER_DARK}
+  ${styles.FW_REGULAR}
+  margin: 0;
+  padding: ${styles.S_1} ${styles.S_1} 0;
+  text-transform: capitalize;
+`

components/src/structure/structure.css

@@ -82,22 +82,6 @@
 }
 
 /* Card and card content styles */
-.card {
-  position: relative;
-  overflow: visible;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.33);
-  font-size: var(--fs-body-2);
-}
-
-.card_title {
-  @apply --font-header-dark;
-
-  margin: 0;
-  padding: 1rem 1rem 0;
-  font-weight: var(--fw-regular);
-  text-transform: capitalize;
-}
-
 .refresh_card_icon {
   position: absolute;
   top: 0;

components/src/styles/colors.js

@@ -0,0 +1,5 @@
+// @flow
+
+// TDOD(isk: 3/2/20): Rename to be more generic (e.g. not FONT)
+export const C_FONT_DISABLED = '#9c9c9c'
+export const C_FONT_DARK = '#4a4a4a'

components/src/styles/font-size.js

@@ -0,0 +1,13 @@
+// @flow
+
+import { css } from 'styled-components'
+
+import { S_0875, S_1125 } from './spacing'
+
+export const FS_HEADER = css`
+  font-size: ${S_1125};
+`
+
+export const FS_BODY_2 = css`
+  font-size: ${S_0875};
+`

components/src/styles/font-weight.js

@@ -0,0 +1,11 @@
+// @flow
+
+import { css } from 'styled-components'
+
+export const FW_REGULAR = css`
+  font-weight: 400;
+`
+
+export const FW_SEMIBOLD = css`
+  font-weight: 600;
+`

components/src/styles/index.js

@@ -0,0 +1,7 @@
+// @flow
+
+export * from './colors'
+export * from './font-size'
+export * from './font-weight'
+export * from './spacing'
+export * from './typography'

components/src/styles/spacing.js

@@ -0,0 +1,6 @@
+// @flow
+
+// TODO(isk: 3/2/20): Make these more generic and use calc() to compose spacing
+export const S_0875 = '0.875rem'
+export const S_1 = '1rem'
+export const S_1125 = '1.125rem'

components/src/styles/typography.js

@@ -0,0 +1,13 @@
+// @flow
+
+import { css } from 'styled-components'
+
+import { C_FONT_DARK } from './colors'
+import { FS_HEADER } from './font-size'
+import { FW_SEMIBOLD } from './font-weight'
+
+export const FONT_HEADER_DARK = css`
+  ${FS_HEADER};
+  ${FW_SEMIBOLD}
+  color: ${C_FONT_DARK};
+`

labware-library/src/components/LabwareList/styles.css

@@ -50,9 +50,9 @@
    * non-standard, but works on all webkit browsers, Edge, and Firefox >= 68
    * it turns out CSS ellipses for multiline blocks are hard
    */
-  display: -webkit-box; /* stylelint-disable-line declaration-block-no-duplicate-properties */
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+  display: -webkit-box; /* stylelint-disable-line declaration-block-no-duplicate-properties, value-no-vendor-prefix */
+  -webkit-line-clamp: 2; /* stylelint-disable-line value-no-vendor-prefix */
+  -webkit-box-orient: vertical; /* stylelint-disable-line property-no-vendor-prefix */
 }
 
 .title_icon {

package.json

@@ -36,6 +36,7 @@
     "babel-jest": "^25.1.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-dynamic-import-node": "^2.3.0",
+    "babel-plugin-styled-components": "1.10.7",
     "babel-plugin-unassert": "^3.0.1",
     "codecov": "^3.1.0",
     "concurrently": "^4.1.2",
@@ -78,6 +79,7 @@
     "html-webpack-plugin": "^3.2.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^25.1.0",
+    "jest-styled-components": "7.0.0",
     "lerna": "^3.16.4",
     "lost": "^8.3.1",
     "madge": "^3.6.0",
@@ -107,6 +109,8 @@
     "style-loader": "^1.1.3",
     "stylelint": "^11.0.0",
     "stylelint-config-standard": "^19.0.0",
+    "stylelint-config-styled-components": "0.1.1",
+    "stylelint-processor-styled-components": "1.10.0",
     "terser-webpack-plugin": "^2.3.5",
     "url-loader": "^2.1.0",
     "wait-on": "^3.3.0",