Add contrast and controls to Color Contrast Matrix

LatitudeFinancialOSS · Jan 17, 2020 · 695f61f · 695f61f · vercel · Jan 17, 2020
1 parent 4d1923e
commit 695f61f
Show file tree

Hide file tree

Showing 18 changed files with 388 additions and 62 deletions.
diff --git a/src/components/Container.js b/src/components/Container.js
@@ -5,12 +5,14 @@ import { ContainerProvider } from "../hooks/useContainer";
 import {
   responsiveMarginType,
   responsivePaddingType,
+  responsiveWidthType,
   responsiveHeightType
 } from "../hooks/useResponsiveProp";
 import useResponsivePropsCSS from "../hooks/useResponsivePropsCSS";
 import {
   responsiveMargin,
   responsivePadding,
+  responsiveWidth,
   responsiveHeight,
   mergeResponsiveCSS
 } from "../utils/css";
@@ -37,6 +39,7 @@ function Container(_props) {
   const responsivePropsCSS = useResponsivePropsCSS(props, {
     margin: responsiveMargin,
     padding: responsivePadding,
+    width: responsiveWidth,
     height: responsiveHeight
   });
   const responsiveCSS = hasBreakpointWidth
@@ -98,6 +101,7 @@ Container.propTypes = {
   boxShadow: PropTypes.oneOf(BOX_SHADOWS),
   ...responsiveMarginType,
   ...responsivePaddingType,
+  ...responsiveWidthType,
   ...responsiveHeightType,
   hasBreakpointWidth: PropTypes.bool,
   children: PropTypes.node

diff --git a/src/components/Container.test.js b/src/components/Container.test.js
@@ -33,6 +33,26 @@ describe("Container", () => {
     `);
   });
 
+  it("with width", () => {
+    const { getByText } = render(<Container width="15">Hello World</Container>);
+    const node = getByText("Hello World");
+
+    expect(node).toHaveStyle(`
+      width: 80px;
+    `);
+  });
+
+  it("with height", () => {
+    const { getByText } = render(
+      <Container height="14">Hello World</Container>
+    );
+    const node = getByText("Hello World");
+
+    expect(node).toHaveStyle(`
+      height: 72px;
+    `);
+  });
+
   it("with background color", () => {
     const { getByText } = render(
       <Container bg="secondary.lightBlue.t30">Hello World</Container>

diff --git a/src/components/Input.js b/src/components/Input.js
@@ -51,6 +51,7 @@ function Input(_props) {
   const { inputColor } = useContainer();
   const color =
     !COLORS.includes(_props.color) && inputColor ? inputColor : props.color;
+  const colorStr = color === DEFAULT_PROPS.color ? "default" : color;
   const [inputId] = useState(() => `input-${nanoid()}`);
   const [auxId] = useState(() => `input-aux-${nanoid()}`);
   const [isTouched, setIsTouched] = useState(false);
@@ -75,8 +76,9 @@ function Input(_props) {
       <input
         css={{
           ...theme.input,
-          ...theme[`input.${color}`],
+          ...theme[`input.${colorStr}`],
           ":focus": theme["input:focus"],
+          ":hover": theme["input:hover"],
           ...(type === "number" && {
             "::-webkit-inner-spin-button, ::-webkit-outer-spin-button":
               theme["input.webkitSpinButton"]

diff --git a/src/components/Select.js b/src/components/Select.js
@@ -55,6 +55,7 @@ function Select(_props) {
   const { inputColor } = useContainer();
   const color =
     !COLORS.includes(_props.color) && inputColor ? inputColor : props.color;
+  const colorStr = color === DEFAULT_PROPS.color ? "default" : color;
   const [selectId] = useState(() => `select-${nanoid()}`);
   const [auxId] = useState(() => `select-aux-${nanoid()}`);
   const [isTouched, setIsTouched] = useState(false);
@@ -81,11 +82,17 @@ function Select(_props) {
       <select
         css={{
           ...theme.selectInput,
-          ...theme[`selectInput.${color}`],
+          ...theme[`selectInput.${colorStr}`],
           ...(isFullWidth && theme["selectInput.fullWidth"]),
           ":focus": {
             ...theme["selectInput:focus"],
-            ...theme[`selectInput.${color}:focus`]
+            ...theme[`selectInput.${colorStr}:focus`]
+          },
+          ":active": {
+            ...(!isDisabled && theme[`selectInput.${colorStr}:active`])
+          },
+          ":hover": {
+            ...(!isDisabled && theme[`selectInput.${colorStr}:hover`])
           }
         }}
         id={selectId}

diff --git a/src/hooks/useResponsiveProp.js b/src/hooks/useResponsiveProp.js
@@ -39,6 +39,11 @@ export const responsivePaddingType = responsivePropType(
   PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 );
 
+export const responsiveWidthType = responsivePropType(
+  "width",
+  PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+);
+
 export const responsiveHeightType = responsivePropType(
   "height",
   PropTypes.oneOfType([PropTypes.number, PropTypes.string])

diff --git a/src/themes/default/input.js b/src/themes/default/input.js
@@ -23,7 +23,7 @@ export default {
   "input.webkitSpinButton": {
     display: "none" // Hides the input="number" spin buttons in Chrome
   },
-  "input.grey.t05": {
+  "input.default": {
     backgroundColor: tokens.colors.grey.t05
   },
   "input.white": {

diff --git a/src/themes/default/select.js b/src/themes/default/select.js
@@ -28,10 +28,10 @@ export default {
     borderRadius: tokens.radii[0],
     boxShadow: tokens.shadows.focus
   },
-  "selectInput.grey.t05": {
+  "selectInput.default": {
     backgroundColor: tokens.colors.grey.t05
   },
-  "selectInput.grey.t05:focus": {
+  "selectInput.default:focus": {
     backgroundColor: tokens.colors.grey.t05
   },
   "selectInput.white": {

diff --git a/src/utils/css.js b/src/utils/css.js
@@ -191,6 +191,14 @@ export const responsivePadding = {
   }
 };
 
+export const responsiveWidth = {
+  getCSS: value => {
+    const width = getSizeValue(value);
+
+    return width === null ? {} : { width };
+  }
+};
+
 export const responsiveHeight = {
   getCSS: value => {
     const height = getSizeValue(value);

diff --git a/src/utils/css.test.js b/src/utils/css.test.js
@@ -4,6 +4,7 @@ import {
   mergeResponsiveCSS,
   responsiveMargin,
   responsivePadding,
+  responsiveWidth,
   responsiveHeight
 } from "./css";
 
@@ -132,6 +133,18 @@ describe("responsivePadding", () => {
   });
 });
 
+describe("responsiveWidth", () => {
+  it("valid width", () => {
+    expect(responsiveWidth.getCSS("12")).toStrictEqual({ width: "56px" });
+    expect(responsiveWidth.getCSS("auto")).toStrictEqual({ width: "auto" });
+    expect(responsiveWidth.getCSS("100%")).toStrictEqual({ width: "100%" });
+  });
+
+  it("invalid width", () => {
+    expect(responsiveWidth.getCSS("")).toStrictEqual({});
+  });
+});
+
 describe("responsiveHeight", () => {
   it("valid height", () => {
     expect(responsiveHeight.getCSS("12")).toStrictEqual({ height: "56px" });

diff --git a/website/src/layouts/Page.js b/website/src/layouts/Page.js
@@ -47,12 +47,16 @@ function Page({ pageContext, children }) {
         >
           <Sidebar />
           <main
-            css={{ minHeight: 0, display: "flex", flexDirection: "column" }}
+            css={{
+              minHeight: 0,
+              display: "flex",
+              flexDirection: "column",
+              overflow: "auto"
+            }}
           >
             {header && (
               <div
                 css={{
-                  marginBottom: designTokens.space[2],
                   padding: `${designTokens.space[5]} ${designTokens.space[6]} 0`,
                   borderBottom: `1px solid ${designTokens.colors.grey.t16}`
                 }}
@@ -63,7 +67,9 @@ function Page({ pageContext, children }) {
                     height: designTokens.space[5]
                   }}
                 >
-                  <Text intent="h4">{header}</Text>
+                  <Text intent="h1" size="4">
+                    {header}
+                  </Text>
                   {status && (
                     <Container margin="0 0 0 9">
                       <ComponentStatusIndicator status={status} />