Refactor themes (#129)

LatitudeFinancialOSS · Jul 21, 2020 · cb73efa · cb73efa · vercel · Jul 21, 2020
1 parent 5c881e9
commit cb73efa
Show file tree

Hide file tree

Showing 50 changed files with 2,775 additions and 1,771 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -7,15 +7,24 @@
     "plugin:testing-library/recommended",
     "plugin:testing-library/react",
     "plugin:jest-dom/recommended",
-    "plugin:jsx-a11y/strict"
+    "plugin:jsx-a11y/strict",
+    "plugin:import/errors"
+  ],
+  "plugins": [
+    "import",
+    "react-hooks",
+    "jest",
+    "testing-library",
+    "jest-dom",
+    "jsx-a11y"
   ],
-  "plugins": ["react-hooks", "jest", "testing-library", "jest-dom", "jsx-a11y"],
   "rules": {
     "no-console": ["error", { "allow": ["error"] }],
     "no-unused-vars": [
       "error",
       { "argsIgnorePattern": "^_", "ignoreRestSiblings": true }
     ],
+    "import/no-cycle": "error",
     "react/jsx-boolean-value": [
       "error",
       "never",
@@ -34,6 +43,9 @@
   "settings": {
     "react": {
       "version": "detect"
+    },
+    "import/resolver": {
+      "alias": [["basis", "./src"]]
     }
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
   "scripts": {
     "postinstall": "(test -d website && npm run install-website) || true",
     "install-website": "cd website && npm install && cd ..",
-    "start": "cd website && npm start",
+    "start": "cd website && npm run clean && npm start",
     "prettier": "prettier --write \"**/*.{js,json,css,md}\"",
     "lint": "eslint --max-warnings 0 \"**/*.js\"",
     "test": "cross-env BABEL_ENV=cjs jest",
@@ -31,6 +31,7 @@
     "deepmerge": "4.2.2",
     "downshift": "5.4.6",
     "klona": "1.1.2",
+    "mem": "6.1.0",
     "nanoid": "3.1.10",
     "polished": "3.6.5",
     "react-resize-aware": "3.0.1"
@@ -57,9 +58,11 @@
     "babel-loader": "8.1.0",
     "cross-env": "7.0.2",
     "eslint": "7.4.0",
+    "eslint-import-resolver-alias": "1.1.2",
+    "eslint-plugin-import": "2.22.0",
     "eslint-plugin-jest": "23.18.0",
     "eslint-plugin-jest-dom": "3.0.1",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-jsx-a11y": "6.3.1",
     "eslint-plugin-react": "7.20.3",
     "eslint-plugin-react-hooks": "4.0.6",
     "eslint-plugin-testing-library": "3.3.1",

diff --git a/src/components/Accordion.js b/src/components/Accordion.js
@@ -36,14 +36,17 @@ Accordion.DEFAULT_PROPS = DEFAULT_PROPS;
 function Header({ children, testId, __internal__keyboardFocus = false }) {
   const theme = useTheme();
   const { colorMap, textColor, itemHeaderAs: HeaderComponent } = useAccordion();
-  const responsiveCSS = useResponsivePropsCSS(
+  const buttonCSS = useResponsivePropsCSS(
     {},
     {},
     {
       backgroundColor: (propsAtBreakpoint, theme, bp) => {
-        return {
-          backgroundColor: theme.getColor(colorMap[bp]),
-        };
+        return theme.accordion.getCSS({
+          targetElement: "headerButton",
+          color: colorMap[bp],
+          textColor,
+          __internal__keyboardFocus,
+        });
       },
     }
   );
@@ -58,26 +61,26 @@ function Header({ children, testId, __internal__keyboardFocus = false }) {
   }, [toggleAccordionItem]);
 
   return (
-    <HeaderComponent css={theme.accordionHeader} data-testid={testId}>
+    <HeaderComponent
+      css={theme.accordion.getCSS({ targetElement: "headerContainer" })}
+      data-testid={testId}
+    >
       <button
         id={headerId}
-        css={{
-          ...theme.accordionHeaderButton,
-          ...(__internal__keyboardFocus && theme.focusStyles.__keyboardFocus),
-          ...responsiveCSS,
-          color: theme.getColor(textColor),
-        }}
+        css={buttonCSS}
         type="button"
         aria-controls={contentId}
         aria-expanded={isOpen ? "true" : "false"}
         onClick={onClick}
       >
-        <div css={theme.accordionHeaderContent}>{children}</div>
+        <div css={theme.accordion.getCSS({ targetElement: "headerContent" })}>
+          {children}
+        </div>
         <div
-          css={{
-            ...theme.accordionHeaderChevron,
-            ...(isOpen && theme["accordionHeaderChevron.open"]),
-          }}
+          css={theme.accordion.getCSS({
+            targetElement: "headerChevron",
+            isOpen,
+          })}
         >
           <Icon name="chevron-down" color={textColor} />
         </div>
@@ -97,7 +100,10 @@ function HeaderIcon({ name, testId }) {
   const { textColor } = useAccordion();
 
   return (
-    <div css={theme.accordionHeaderIcon} data-testid={testId}>
+    <div
+      css={theme.accordion.getCSS({ targetElement: "headerIcon" })}
+      data-testid={testId}
+    >
       <Icon name={name} color={textColor} />
     </div>
   );
@@ -113,23 +119,18 @@ function Content({ children, testId }) {
   const { colorMap } = useAccordion();
   const bgMap = mapResponsiveValues(
     colorMap,
-    (headerColor) => {
-      return headerColor === "grey.t07"
-        ? "grey.t03"
-        : headerColor === "secondary.lightBlue.t25"
-        ? "secondary.lightBlue.t15"
-        : "white";
-    },
+    theme.accordion.getContentColor,
     theme
   );
-  const responsiveCSS = useResponsivePropsCSS(
+  const css = useResponsivePropsCSS(
     {},
     {},
     {
       backgroundColor: (propsAtBreakpoint, theme, bp) => {
-        return {
-          backgroundColor: theme.getColor(bgMap[bp]),
-        };
+        return theme.accordion.getCSS({
+          targetElement: "content",
+          color: colorMap[bp],
+        });
       },
     }
   );
@@ -139,10 +140,7 @@ function Content({ children, testId }) {
     <BackgroundProvider value={bgMap}>
       <div
         id={contentId}
-        css={{
-          ...theme.accordionContent,
-          ...responsiveCSS,
-        }}
+        css={css}
         role="region"
         aria-labelledby={headerId}
         hidden={!isOpen}
@@ -195,7 +193,10 @@ function Item(props) {
 
   return (
     <AccordionItemProvider value={accordionItemInfo}>
-      <div css={theme[`accordionItem.${itemGap}`]} data-testid={testId}>
+      <div
+        css={theme.accordion.getCSS({ targetElement: "item", itemGap })}
+        data-testid={testId}
+      >
         {children}
       </div>
     </AccordionItemProvider>

diff --git a/src/components/Button.js b/src/components/Button.js
@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import useTheme from "../hooks/useTheme";
 import useBackground from "../hooks/useBackground";
 import useResponsivePropsCSS from "../hooks/useResponsivePropsCSS";
 import {
@@ -37,7 +36,6 @@ function getInheritedColor(backgroundColor) {
 }
 
 function Button(props) {
-  const theme = useTheme();
   const { bgMap } = useBackground();
   const mergedProps = mergeProps(
     props,
@@ -61,39 +59,24 @@ function Button(props) {
     __internal__hover,
     __internal__active,
   } = mergedProps;
-  const responsivePropsCSS = useResponsivePropsCSS(mergedProps, DEFAULT_PROPS, {
-    margin: responsiveMargin,
-    width: responsiveSize("width"),
+  const css = useResponsivePropsCSS(mergedProps, DEFAULT_PROPS, {
     color: (propsAtBreakpoint, theme, bp) => {
       const color =
         hasOwnProperty(props, "color") && hasOwnProperty(mergedProps, "color")
           ? mergedProps.color
           : getInheritedColor(bgMap?.[bp]);
-      const colorStr = color === DEFAULT_PROPS.color ? "default" : color;
 
-      return {
-        ...theme[`button.${variant}.${colorStr}`],
-        ":hover": {
-          ...(!disabled && theme[`button.${variant}.${colorStr}:hover`]),
-        },
-        ...(__internal__hover && theme[`button.${variant}.${colorStr}:hover`]),
-        ":active": {
-          ...(!disabled && theme[`button.${variant}.${colorStr}:active`]),
-        },
-        ...(__internal__active &&
-          theme[`button.${variant}.${colorStr}:active`]),
-        ":disabled": {
-          ...theme["button:disabled"],
-          ...theme[`button.${variant}.${colorStr}:disabled`],
-        },
-      };
+      return theme.button.getCSS({
+        variant,
+        color,
+        __internal__keyboardFocus,
+        __internal__hover,
+        __internal__active,
+      });
     },
+    margin: responsiveMargin,
+    width: responsiveSize("width"),
   });
-  const css = {
-    ...theme.button,
-    ...(__internal__keyboardFocus && theme.focusStyles.__keyboardFocus),
-    ...responsivePropsCSS,
-  };
 
   return (
     <button

diff --git a/src/components/Button.test.js b/src/components/Button.test.js
@@ -17,6 +17,7 @@ describe("Button", () => {
       lineHeight: "28px",
       fontFamily: "'Roboto',sans-serif",
       fontWeight: 500,
+      margin: 0,
       border: 0,
       borderRadius: "4px",
       padding: "0 24px",

diff --git a/src/components/Container.js b/src/components/Container.js
@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Text from "./Text";
 import useTheme from "../hooks/useTheme";
 import { TextStyleProvider } from "../hooks/useTextStyle";
 import useBackground, { BackgroundProvider } from "../hooks/useBackground";
@@ -24,6 +23,7 @@ import {
   getResponsivePropMap,
   mergeResponsivePropMaps,
 } from "../utils/component";
+import { TEXT_STYLES, TEXT_ALIGNS } from "../utils/constants";
 
 const BACKGROUNDS = [
   "transparent",
@@ -146,8 +146,14 @@ function Container(_props) {
       css={{
         boxSizing: "border-box",
         ...responsiveCSS,
-        ...theme[`container.${boxShadow}`],
-        "::after": theme[`container.${boxShadow}::after`],
+        ...(boxShadow === "header" && {
+          "::after": {
+            content: "''",
+            display: "block",
+            height: theme.borderWidths[1],
+            boxShadow: theme.shadows.header,
+          },
+        }),
       }}
       data-testid={testId}
     >
@@ -177,8 +183,8 @@ Container.propTypes = {
   ...responsivePropType("bg", PropTypes.oneOf(BACKGROUNDS)),
   ...responsivePropType("flexGrow", PropTypes.bool),
   ...responsivePropType("hasBorder", PropTypes.bool),
-  ...responsivePropType("textStyle", PropTypes.oneOf(Text.TEXT_STYLES)),
-  ...responsivePropType("textAlign", PropTypes.oneOf(Text.ALIGNS)),
+  ...responsivePropType("textStyle", PropTypes.oneOf(TEXT_STYLES)),
+  ...responsivePropType("textAlign", PropTypes.oneOf(TEXT_ALIGNS)),
   ...responsivePropType("overflow", PropTypes.string),
   ...responsivePropType("hasBreakpointWidth", PropTypes.bool),
   ...responsivePropType("hide", PropTypes.bool),

diff --git a/src/components/Flex.js b/src/components/Flex.js
@@ -12,30 +12,10 @@ import {
   responsiveFlexDirection,
   responsiveFlexPlaceItems,
 } from "../utils/css";
+import { FLEX_DIRECTIONS, FLEX_PLACE_ITEMS } from "../utils/constants";
 
-const DIRECTIONS = ["row", "column"];
-const PLACE_ITEMS = [
-  "top left",
-  "top center",
-  "top right",
-  "center left",
-  "center center",
-  "center right",
-  "bottom left",
-  "bottom center",
-  "bottom right",
-
-  "left top",
-  "center top",
-  "right top",
-  "left center",
-  "right center",
-  "left bottom",
-  "center bottom",
-  "right bottom",
-
-  "center",
-];
+const DIRECTIONS = FLEX_DIRECTIONS;
+const PLACE_ITEMS = FLEX_PLACE_ITEMS;
 
 const DEFAULT_PROPS = {
   direction: "row",

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1,16 +1,14 @@
 import React, { Children } from "react";
 import PropTypes from "prop-types";
-import {
-  Container,
-  Accordion,
-  Stack,
-  Flex,
-  Text,
-  Link,
-  Icon,
-  useTheme,
-  useBreakpoint,
-} from "..";
+import Accordion from "./Accordion";
+import Container from "./Container";
+import Flex from "./Flex";
+import Icon from "./Icon";
+import Link from "./Link";
+import Stack from "./Stack";
+import Text from "./Text";
+import useBreakpoint from "../hooks/useBreakpoint";
+import useTheme from "../hooks/useTheme";
 import Logo from "./internal/Logo";
 import useFooterLinks, { FooterLinksProvider } from "../hooks/useFooterLinks";
 import { compareBreakpoints } from "../utils/css";