fix: fix types for button test, move opinionated button styles to default theme

cypress/components/button.spec.js

@@ -0,0 +1,131 @@
+/// <reference types="cypress" />
+
+import React from 'react';
+import { mount } from 'cypress-react-unit-test';
+import {
+  Button,
+  ThemeProvider,
+  GlobalStyles,
+  defaultTheme,
+} from '../../dist/minerva-ui.esm';
+
+import { createGlobalStyle } from 'styled-components';
+
+const text = 'Button';
+
+const defaultFont = 'Open Sans';
+
+// by default, we are using the native font stack
+// but this font is different on macOS, Linux and Windows
+// to make sure our screenshots are consistent, we force them all to use the same font family
+const StandardizeFont = createGlobalStyle`
+  html, * {
+    font-family: defaultFont;
+  }
+`;
+
+const customTheme = {
+  ...defaultTheme,
+  fonts: {
+    ...defaultTheme.fonts,
+    body: defaultFont,
+    heading: defaultFont,
+  },
+};
+
+const MinervaProvider = ({ children, theme = customTheme }) => (
+  <ThemeProvider theme={theme}>
+    <GlobalStyles />
+    <StandardizeFont />
+    <div>
+      <link rel="preconnect" href="https://fonts.gstatic.com" />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Open+Sans"
+        // href="https://fonts.googleapis.com/css2?family=Open+Sans&display=block"
+        rel="stylesheet"
+      />
+    </div>
+    {children}
+  </ThemeProvider>
+);
+
+describe('<Button />', () => {
+  context('Basic Rendering', () => {
+    it('renders with default theme provider', () => {
+      mount(
+        <MinervaProvider>
+          <span style={{ display: 'inline-block' }} id="container">
+            <Button>{text}</Button>
+            <Button variant="secondary">{text}</Button>
+            <Button variant="tertiary">{text}</Button>
+          </span>
+        </MinervaProvider>
+      );
+
+      cy.contains(text).should('be.visible');
+
+      cy.document()
+        .its('fonts.status')
+        .should('equal', 'loaded');
+
+      cy.get('#container').toMatchImageSnapshot({
+        name: `Default Theme: Button with Variants`,
+      });
+    });
+
+    it('renders without default theme', () => {
+      mount(
+        <MinervaProvider
+          theme={{
+            fonts: {
+              body: defaultFont,
+              heading: defaultFont,
+            },
+            Button: {
+              fontFamily: 'body',
+            },
+          }}
+        >
+          <Button>{text}</Button>
+        </MinervaProvider>
+      );
+
+      cy.contains(text).should('be.visible');
+      cy.document()
+        .its('fonts.status')
+        .should('equal', 'loaded');
+
+      cy.get('button').toMatchImageSnapshot();
+    });
+  });
+
+  context('Style Props', () => {
+    it('should be able to pass basic style props', () => {
+      const color = 'rgb(227, 227, 227)';
+      const backgroundColor = 'rgb(51, 51, 51)';
+      mount(
+        <MinervaProvider>
+          <Button color={color} bg={backgroundColor}>
+            Grey Text Button
+          </Button>
+        </MinervaProvider>
+      );
+
+      cy.get('button').should('have.css', 'color', color);
+      cy.get('button').should('have.css', 'background-color', backgroundColor);
+    });
+
+    it('should be able to use pseudo style props', () => {
+      const backgroundColor = 'rgb(227, 227, 227)';
+      mount(
+        <MinervaProvider>
+          <Button _disabled={{ backgroundColor: backgroundColor }} disabled>
+            Grey Text Button
+          </Button>
+        </MinervaProvider>
+      );
+
+      cy.get('button').should('have.css', 'background-color', backgroundColor);
+    });
+  });
+});

cypress/tsconfig.json

@@ -1,3 +1,16 @@
 {
-  "extends": "../tsconfig.json"
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "es5",
+      "dom"
+    ],
+    "types": [
+      "cypress", "cypress-plugin-snapshots"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "cypress-plugin-snapshots"
+  ]
 }

package.json

@@ -138,7 +138,10 @@
       "(.d.ts)$",
       ".stories.tsx$"
     ],
-    "testPathIgnorePatterns": ["/node_modules/", "cypress"],
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "cypress"
+    ],
     "moduleNameMapper": {
       "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
     },

src/Button/index.tsx

@@ -25,9 +25,9 @@ export const buttonVariants = {
     },
   },
   tertiary: {
-    bg: 'white',
-    borderColor: 'transparent',
-    color: 'indigo.800',
+    bg: '#333',
+    borderColor: '#333',
+    color: '#333',
     _hover: {
       textDecoration: 'underline',
     },
@@ -89,25 +89,8 @@ export const Button = forwardRef(function Button(
       as={Comp}
       disabled={disabled || isLoading}
       role="button"
-      transition="all 150ms ease 0s"
-      outline="none"
       cursor="pointer"
-      fontFamily="body"
-      _hover={{
-        backgroundColor: '#f9fafb',
-      }}
-      _focus={{
-        borderColor: '#a4cafe',
-        boxShadow: '0 0 0 3px rgba(118,169,250,.45)',
-        outline: 0,
-      }}
-      _active={{
-        borderColor: '#a4cafe',
-        boxShadow: '0 0 0 3px rgba(118,169,250,.45)',
-        outline: 0,
-      }}
       _disabled={{
-        opacity: 0.4,
         cursor: 'not-allowed',
       }}
       aria-busy={isLoading}

src/index.tsx

@@ -69,7 +69,7 @@ export { default as Stack } from './Stack';
 /**
  * Inputs
  */
-export { default as Button } from './Button';
+export * from './Button';
 export { default as Checkbox } from './Checkbox';
 export { default as Switch } from './Switch';
 export { default as Input } from './Input';

src/theme.ts

@@ -9,7 +9,7 @@ const logoColor = '#551A8B';
 export interface ThemeComponent extends React.CSSProperties, PseudoBoxProps {}
 
 export interface MinervaTheme extends Theme {
-  Button?: React.CSSProperties;
+  Button?: ThemeComponent;
   Drawer?: React.CSSProperties;
   Heading?: React.CSSProperties;
   Modal?: React.CSSProperties;
@@ -67,6 +67,26 @@ const defaultTheme: MinervaTheme = {
     borderRadius: '5px',
     borderStyle: 'solid',
     borderColor: '#d2d6dc',
+    fontFamily: 'body',
+    outline: 'none',
+    transition: 'all 150 ms ease 0s',
+    _hover: {
+      backgroundColor: '#f9fafb',
+    },
+    _focus: {
+      borderColor: '#a4cafe',
+      boxShadow: '0 0 0 3px rgba(118,169,250,.45)',
+      outline: 0,
+    },
+    _active: {
+      borderColor: '#a4cafe',
+      boxShadow: '0 0 0 3px rgba(118,169,250,.45)',
+      outline: 0,
+    },
+    _disabled: {
+      opacity: 0.4,
+      cursor: 'not-allowed',
+    },
   },
   Checkbox: {},
   Drawer: {},