[design]: overrides pattern, tests, yay!

packages/roleypoly-design/src/__test__/__snapshots__/storyshots.test.ts.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button Default 1`] = `
+<button
+  className="sc-bdVaJa hPnBtV"
+  disabled={false}
+  onClick={[Function]}
+>
+  Example
+</button>
+`;
+
+exports[`Storyshots Button Disabled 1`] = `
+<button
+  className="sc-bdVaJa hPnBtV"
+  disabled={true}
+  onClick={[Function]}
+>
+  Example
+</button>
+`;
+
+exports[`Storyshots Button Loading 1`] = `
+<button
+  className="sc-bdVaJa hPnBtV"
+  disabled={false}
+  onClick={[Function]}
+>
+  Example
+</button>
+`;
+
+exports[`Storyshots Button Primary 1`] = `
+<button
+  className="sc-bdVaJa hPnBtV"
+  disabled={false}
+  onClick={[Function]}
+>
+  Example
+</button>
+`;
+
+exports[`Storyshots Button Secondary 1`] = `
+<button
+  className="sc-bdVaJa hPnBtV"
+  disabled={false}
+  onClick={[Function]}
+>
+  Example
+</button>
+`;

packages/roleypoly-design/src/__test__/storyshots.test.ts

@@ -0,0 +1,9 @@
+import * as path from 'path'
+import initStoryshots from '@storybook/addon-storyshots'
+// import Adapter from 'enzyme-adapter-react-16'
+
+// enzyme.configure({ adapter: new Adapter() })
+
+initStoryshots({
+  configPath: path.resolve(__dirname, '../../.storybook')
+})

packages/roleypoly-design/src/button/Button.story.tsx

@@ -1,12 +1,15 @@
 import * as React from 'react'
 import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
 
-import Button from './Button'
+import Button, { PrimaryButton, SecondaryButton } from './Button'
 
 const s = storiesOf('Button', module)
 
-s.add('Default', () => <Button>Example</Button>)
-s.add('Disabled', () => <Button>Example</Button>)
-s.add('Primary', () => <Button>Example</Button>)
-s.add('Secondary', () => <Button>Example</Button>)
-s.add('Loading', () => <Button>Example</Button>)
+const pressed = action('button pressed!')
+
+s.add('Default', () => <Button onButtonPress={pressed}>Example</Button>)
+s.add('Disabled', () => <Button disabled onButtonPress={pressed}>Example</Button>)
+s.add('Primary', () => <PrimaryButton onButtonPress={pressed}>Example</PrimaryButton>)
+s.add('Secondary', () => <SecondaryButton onButtonPress={pressed}>Example</SecondaryButton>)
+s.add('Loading', () => <Button loading onButtonPress={pressed}>Example</Button>)

packages/roleypoly-design/src/button/Button.test.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import * as sinon from 'sinon'
+
+import Button from './Button'
+
+describe('<Button />', () => {
+  it('calls onButtonPress when not disabled', () => {
+    const spy = sinon.spy()
+    const b = shallow(<Button onButtonPress={spy}>Testing</Button>)
+    b.simulate('click')
+
+    expect(spy.calledOnce).toBeTruthy()
+  })
+
+  it('does not call onButtonPress when disabled', () => {
+    const spy = sinon.spy()
+    const b = shallow(<Button disabled onButtonPress={spy}>Testing</Button>)
+    b.simulate('click')
+
+    expect(spy.notCalled).toBeTruthy()
+  })
+})

packages/roleypoly-design/src/button/Button.tsx

@@ -1,10 +1,66 @@
 import * as React from 'react'
 import {
-  StyledButton
-} from './styled-components'
+  getOverrides
+} from '../helpers/overrides'
+import {
+  StyledButton,
+  StyledPrimaryButton,
+  StyledSecondaryButton
+} from './styled'
+import {
+  ButtonProps
+} from './types'
 
-const Button = ({ children, ...rest }: { children: React.ReactChild | React.ReactChild[] }) => <StyledButton {...rest}>
-  {children}
-</StyledButton>
+export default class Button extends React.Component<ButtonProps> {
+  static defaultProps: ButtonProps = {
+    disabled: false,
+    primary: false,
+    secondary: false,
+    loading: false,
+    loadingPct: 0,
+    children: 'Button',
+    overrides: {}
+  }
 
-export default Button
+  handleClick = () => {
+    if (this.props.disabled === true || typeof this.props.onButtonPress !== 'function') {
+      return
+    }
+
+    this.props.onButtonPress()
+  }
+
+  render () {
+    const {
+      overrides = {},
+      children,
+      // removing from rest
+      loading,
+      onButtonPress,
+      ...rest
+    } = this.props
+
+    const [BaseButton, baseButtonProps] = getOverrides(
+      overrides.BaseButton,
+      StyledButton
+    )
+
+    console.log({ overrides, BaseButton, baseButtonProps })
+
+    return <BaseButton {...rest} {...baseButtonProps} onClick={this.handleClick}>
+      {children}
+    </BaseButton>
+  }
+}
+
+export const PrimaryButton = (props: ButtonProps) => <Button {...props} overrides={{
+  BaseButton: {
+    component: StyledPrimaryButton
+  }
+}} />
+
+export const SecondaryButton = (props: ButtonProps) => <Button {...props} overrides={{
+  BaseButton: {
+    component: StyledSecondaryButton
+  }
+}} />

packages/roleypoly-design/src/button/index.ts

@@ -2,4 +2,4 @@ export { default as default } from './Button'
 
 export {
   StyledButton
-} from './styled-components'
+} from './styled'

packages/roleypoly-design/src/button/styled.tsx

@@ -56,3 +56,25 @@ export const StyledButton = styled.button`
     }
   }
 `
+
+StyledButton.defaultProps = {
+  theme: {
+    actions: {
+      primary: '#46b646',
+      primaryText: '#efefef',
+      secondary: '#e95353',
+      secondaryText: '#efefef'
+    }
+  }
+}
+
+export const StyledPrimaryButton = styled(StyledButton)`
+  background-color: ${props => props.theme.actions.primary};
+  color: ${props => props.theme.actions.primaryText};
+`
+
+StyledPrimaryButton.defaultProps = StyledButton.defaultProps
+export const StyledSecondaryButton = styled(StyledButton)`
+  background-color: ${props => props.theme.actions.secondary};
+  color: ${props => props.theme.actions.secondaryText};
+`

packages/roleypoly-design/src/button/types.ts

@@ -0,0 +1,15 @@
+import {
+  OverridesT
+} from '../helpers/overrides'
+// import Button from './Button'
+
+export type ButtonProps = {
+  overrides?: OverridesT<any>,
+  children: React.ReactChild | React.ReactChild[], // children is required
+  onButtonPress?: () => void,
+  disabled?: boolean,
+  primary?: boolean,
+  secondary?: boolean,
+  loading?: boolean,
+  loadingPct?: number
+}