Skip to content
Permalink
Browse files

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

BREAKING CHANGE: upgrade to styled-components
  • Loading branch information...
jraff committed Mar 21, 2019
1 parent dbd5d5b commit 0ff9dba8e512c73088e994422975eef3ad2c4bac
@@ -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>
)
}

@@ -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', () => {
@@ -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
@@ -1,4 +1,3 @@
require('./dist/index.css')
const Button = require('./dist/index.cjs')

module.exports = Button
@@ -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'
@@ -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"
}
}

0 comments on commit 0ff9dba

Please sign in to comment.
You can’t perform that action at this time.