feat(core-button): upgrade to styled-components

BREAKING CHANGE: upgrade to styled-components
telus · Mar 28, 2019 · 0ff9dba · 0ff9dba
1 parent dbd5d5b
commit 0ff9dba
Show file tree

Hide file tree

Showing 6 changed files with 197 additions and 26 deletions.
diff --git a/packages/Button/Button.jsx b/packages/Button/Button.jsx
@@ -1,12 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import styled from 'styled-components'
+
 import { componentWithName, or } from '@tds/util-prop-types'
+import { borders, forms } from '@tds/shared-styles'
+import { medium, boldFont } from '@tds/shared-typography'
+import { colorPrimary, colorSecondary, colorWhite, colorText } from '@tds/core-colours'
+import { media } from '@tds/core-responsive'
 
 import { warn } from '../../shared/utils/warn'
 import safeRest from '../../shared/utils/safeRest'
 
-import BaseButton from '../../shared/components/BaseButton/BaseButton'
-
 const preventDisabling = ({ disabled, ...props }) => {
   if (disabled) {
     warn('Button', 'Buttons are not able to be disabled.')
@@ -15,16 +19,74 @@ const preventDisabling = ({ disabled, ...props }) => {
   return props
 }
 
+const baseButton = {
+  margin: 0,
+  padding: '0 2rem',
+  cursor: 'pointer',
+  background: 'none',
+  transition: 'background 0.2s',
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+
+  ...media.from('md').css({
+    display: 'inline-flex',
+    width: 'auto',
+    minWidth: '180px',
+  }),
+}
+
+export const StyledButton = styled.button(
+  borders.none,
+  borders.rounded,
+  medium,
+  boldFont,
+  forms.height,
+  forms.font,
+  baseButton,
+  ({ variant }) => {
+    let backgroundColor
+    let color
+    const hover = {
+      boxShadow: '0 0 0 1px',
+    }
+
+    if (variant === 'primary') {
+      backgroundColor = colorPrimary
+      color = colorWhite
+      hover.backgroundColor = colorWhite
+      hover.color = colorPrimary
+    } else if (variant === 'secondary') {
+      backgroundColor = colorSecondary
+      color = colorWhite
+      hover.backgroundColor = colorWhite
+      hover.color = colorSecondary
+    } else {
+      backgroundColor = colorWhite
+      color = colorText
+      hover.backgroundColor = 'transparent'
+      hover.color = colorWhite
+    }
+
+    return {
+      backgroundColor,
+      color,
+      '&:hover': hover,
+    }
+  }
+)
+
 /**
  * @version ./package.json
  */
 const Button = ({ type, variant, children, ...rest }) => {
   const restNoDisabled = preventDisabling(rest)
 
   return (
-    <BaseButton {...safeRest(restNoDisabled)} element="button" variant={variant} type={type}>
+    <StyledButton {...safeRest(restNoDisabled)} variant={variant} type={type}>
       {children}
-    </BaseButton>
+    </StyledButton>
   )
 }
 

diff --git a/packages/Button/__tests__/Button.spec.jsx b/packages/Button/__tests__/Button.spec.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, mount, shallow } from 'enzyme'
+import { render, shallow } from 'enzyme'
 
 import A11yContent from '../../A11yContent'
 
@@ -10,11 +10,6 @@ import Button from '../Button'
 jest.mock('../../../shared/utils/warn')
 
 describe('Button', () => {
-  const doMount = (overrides = {}) => {
-    const button = mount(<Button {...overrides}>Submit</Button>)
-
-    return button.find('button')
-  }
   const doShallow = (overrides = {}) => {
     const button = shallow(<Button {...overrides}>Submit</Button>)
 
@@ -40,11 +35,9 @@ describe('Button', () => {
   })
 
   it('can be presented as one of the allowed variants', () => {
-    let button = doMount()
-    expect(button).toHaveClassName('primary')
+    const button = render(<Button variant="secondary">Submit</Button>)
 
-    button = doMount({ variant: 'secondary' })
-    expect(button).toHaveClassName('secondary')
+    expect(button).toMatchSnapshot()
   })
 
   it('can not be disabled', () => {

diff --git a/packages/Button/__tests__/__snapshots__/Button.spec.jsx.snap b/packages/Button/__tests__/__snapshots__/Button.spec.jsx.snap
@@ -1,8 +1,125 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Button can be presented as one of the allowed variants 1`] = `
+.c0 {
+  border-width: 0;
+  border-radius: 4px;
+  word-wrap: break-word;
+  font-size: 1rem;
+  -webkit-letter-spacing: -0.8px;
+  -moz-letter-spacing: -0.8px;
+  -ms-letter-spacing: -0.8px;
+  letter-spacing: -0.8px;
+  line-height: 1.5;
+  word-wrap: break-word;
+  font-weight: 700;
+  height: 3.25rem;
+  font-family: "TELUS-Web","Helvetica Neue",Helvetica,Arial,sans-serif;
+  margin: 0;
+  padding: 0 2rem;
+  cursor: pointer;
+  background: none;
+  -webkit-transition: background 0.2s;
+  transition: background 0.2s;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  background-color: #4b286d;
+  color: #fff;
+}
+
+.c0:hover {
+  box-shadow: 0 0 0 1px;
+  background-color: #fff;
+  color: #4b286d;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    display: -webkit-inline-box;
+    display: -webkit-inline-flex;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    width: auto;
+    min-width: 180px;
+  }
+}
+
+<button
+  class="c0"
+  type="button"
+>
+  Submit
+</button>
+`;
+
 exports[`Button renders 1`] = `
+.c0 {
+  border-width: 0;
+  border-radius: 4px;
+  word-wrap: break-word;
+  font-size: 1rem;
+  -webkit-letter-spacing: -0.8px;
+  -moz-letter-spacing: -0.8px;
+  -ms-letter-spacing: -0.8px;
+  letter-spacing: -0.8px;
+  line-height: 1.5;
+  word-wrap: break-word;
+  font-weight: 700;
+  height: 3.25rem;
+  font-family: "TELUS-Web","Helvetica Neue",Helvetica,Arial,sans-serif;
+  margin: 0;
+  padding: 0 2rem;
+  cursor: pointer;
+  background: none;
+  -webkit-transition: background 0.2s;
+  transition: background 0.2s;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  background-color: #248700;
+  color: #fff;
+}
+
+.c0:hover {
+  box-shadow: 0 0 0 1px;
+  background-color: #fff;
+  color: #248700;
+}
+
+@media (min-width:768px) {
+  .c0 {
+    display: -webkit-inline-box;
+    display: -webkit-inline-flex;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    width: auto;
+    min-width: 180px;
+  }
+}
+
 <button
-  class="sizing primary"
+  class="c0"
   type="button"
 >
   Submit

diff --git a/packages/Button/index.cjs.js b/packages/Button/index.cjs.js
@@ -1,4 +1,3 @@
-require('./dist/index.css')
 const Button = require('./dist/index.cjs')
 
 module.exports = Button
diff --git a/packages/Button/index.es.js b/packages/Button/index.es.js
@@ -1,4 +1,2 @@
-import './dist/index.css'
-import Button from './dist/index.es'
-
-export default Button
+export * from './dist/index.es'
+export { default } from './dist/index.es'
diff --git a/packages/Button/package.json b/packages/Button/package.json
@@ -20,15 +20,17 @@
   },
   "homepage": "http://tds.telus.com",
   "peerDependencies": {
-    "react": ">=15",
-    "react-dom": ">=15"
+    "react": "^16.8.2",
+    "react-dom": "^16.8.2",
+    "styled-components": "^4.1.3"
   },
   "dependencies": {
+    "@tds/core-colours": "^1.1.1",
+    "@tds/core-responsive": "^1.2.0",
+    "@tds/shared-base-button": "^1.2.10",
+    "@tds/shared-styles": "^1.0.0",
+    "@tds/shared-typography": "^1.2.1",
     "@tds/util-prop-types": "^1.3.0",
     "prop-types": "^15.5.10"
-  },
-  "devDependencies": {
-    "@tds/core-colours": "^1.1.1",
-    "@tds/shared-base-button": "^1.2.10"
   }
 }