rename browserButton to pushButton

closes #29

README.md

@@ -74,12 +74,12 @@ Confirm in your `package.json` that the `brave-ui` is installed. Once you're goo
 If you're looking to contribute to this repo please refer to [Contributing](https://github.com/brave/brave-ui/blob/master/docs/contributing.md) docs.
 
 ```js
-// Let's implement the <BrowserButton /> component
-const { BrowserButton } = require('brave-ui')
+// Let's implement the <PushButton /> component
+const { PushButton } = require('brave-ui')
 
 render () {
   return (
-    <BrowserButton theme='primary' label='something' />
+    <PushButton theme='primary' label='something' />
   )
 }
 ```

components/actionButton/index.tsx

@@ -8,10 +8,10 @@ import { StyledActionButton } from './style'
 /**
 * Implementor notes:
 * This button is almost unopinonated in styles
-* and should be used only when BrowserButton can't
+* and should be used only when PushButton can't
 * such as actions in buttons that have no UI (link-like buttons).
 * This has limited usage on purpose.
-* Consider either using browserButton or creating a new component as needed
+* Consider either using pushButton or creating a new component as needed
 * as this file shouldn't be changed much.
 **/
 

components/index.ts

@@ -5,7 +5,7 @@
  import TextLabel from './textLabel'
  import Anchor from './anchor'
  import ActionButton from './actionButton'
- import BrowserButton from './browserButton'
+ import PushButton from './pushButton'
  import SwitchButton from './switchButton'
  import SelectOption from './selectOption'
  import { Grid, Column } from './gridSystem'
@@ -16,7 +16,7 @@
    TextLabel,
    Anchor,
    ActionButton,
-   BrowserButton,
+   PushButton,
    SwitchButton,
    SelectOption,
    Grid,

components/browserButton/__snapshots__/spec.tsx.snap → components/pushButton/__snapshots__/spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`browserButton tests matches the snapshot 1`] = `
+exports[`pushButton tests matches the snapshot 1`] = `
 <button
   className="sc-bdVaJa hGmOLT"
   color="default"

components/browserButton/index.tsx → components/pushButton/index.tsx

@@ -14,9 +14,9 @@
  */
 
 import * as React from 'react'
-import { StyledBrowserButton } from './style'
+import { StyledPushButton } from './style'
 
-export interface BrowserButtonProps {
+export interface PushButtonProps {
   id?: string,
   color?: string,
   disabled?: boolean,
@@ -27,10 +27,10 @@ export interface BrowserButtonProps {
   fontSize?: string
 }
 
-class BrowserButton extends React.PureComponent<BrowserButtonProps, {}> {
+class PushButton extends React.PureComponent<PushButtonProps, {}> {
   render () {
     return (
-      <StyledBrowserButton
+      <StyledPushButton
         id={this.props.id}
         color={this.props.color ? this.props.color : 'default'}
         onClick={this.props.onClick}
@@ -39,9 +39,9 @@ class BrowserButton extends React.PureComponent<BrowserButtonProps, {}> {
         fontSize={this.props.fontSize}
       >
         {this.props.children}
-      </StyledBrowserButton>
+      </StyledPushButton>
     )
   }
 }
 
-export default BrowserButton
+export default PushButton

components/browserButton/spec.tsx → components/pushButton/spec.tsx

@@ -2,67 +2,67 @@
 import * as React from 'react'
 import { shallow } from 'enzyme'
 import { create } from 'react-test-renderer'
-import BrowserButton from '../browserButton'
+import PushButton from '../pushButton'
 
-describe('browserButton tests', () => {
+describe('pushButton tests', () => {
   it('matches the snapshot', () => {
-    const component = <BrowserButton />
+    const component = <PushButton />
     const tree = create(component).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
   it('renders the component', () => {
-    const wrapper = shallow(<BrowserButton id='browserButton' />)
-    const assertion = wrapper.find('#browserButton').length
+    const wrapper = shallow(<PushButton id='pushButton' />)
+    const assertion = wrapper.find('#pushButton').length
     expect(assertion).toBe(1)
   })
 
   it('defines a custom size', () => {
-    const wrapper = shallow(<BrowserButton size='13px' />)
+    const wrapper = shallow(<PushButton size='13px' />)
     const assertion = wrapper.props().size
     expect(assertion).toEqual('13px')
   })
 
   it('defines a custom font size', () => {
-    const wrapper = shallow(<BrowserButton fontSize='60px' />)
+    const wrapper = shallow(<PushButton fontSize='60px' />)
     const assertion = wrapper.props().fontSize
     expect(assertion).toEqual('60px')
   })
 
   it('can pass text', () => {
-    const wrapper = shallow(<BrowserButton>NESPRESSO</BrowserButton>)
+    const wrapper = shallow(<PushButton>NESPRESSO</PushButton>)
     const assertion = wrapper.html().includes('NESPRESSO')
     expect(assertion).toBe(true)
   })
 
   it('can be disabled', () => {
-    const wrapper = shallow(<BrowserButton disabled />)
+    const wrapper = shallow(<PushButton disabled />)
     const assertion = wrapper.props().disabled
     expect(assertion).toBe(true)
   })
 
   it('defaults to the default button', () => {
-    const wrapper = shallow(<BrowserButton />)
+    const wrapper = shallow(<PushButton />)
     const assertion = wrapper.props().color
     expect(assertion).toBe('default')
   })
 
   it('can be set as primary', () => {
-    const wrapper = shallow(<BrowserButton color='primary' />)
+    const wrapper = shallow(<PushButton color='primary' />)
     const assertion = wrapper.props().color
     expect(assertion).toBe('primary')
   })
 
   it('can be set as secondary', () => {
-    const wrapper = shallow(<BrowserButton color='secondary' />)
+    const wrapper = shallow(<PushButton color='secondary' />)
     const assertion = wrapper.props().color
     expect(assertion).toBe('secondary')
   })
 
   it('can respond to click', () => {
     const value = 'FANCY BUTTON CLICKED'
     const onClick = jest.fn()
-    const wrapper = shallow(<BrowserButton onClick={onClick} />)
+    const wrapper = shallow(<PushButton onClick={onClick} />)
     wrapper.simulate('click', value)
     expect(onClick).toBeCalledWith(value)
   })

components/pushButton/style.ts

@@ -0,0 +1,101 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License. v. 2.0. If a copy of the MPL was not distributed with this file.
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import styled, { css } from 'styled-components'
+import { PushButtonProps } from './index'
+import theme from '../theme'
+
+const StyledPushButton = styled.button`
+  font-size: ${(p: PushButtonProps) => p.fontSize ? p.fontSize : '13px'};
+  min-width: ${(p: PushButtonProps) => p.size ? p.size : '78px'};
+  min-height: ${(p: PushButtonProps) => p.size ? p.size : '32px'};
+  position: relative;
+  display: inline-block;
+  text-align: center;
+  box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.5);
+  box-sizing: border-box;
+  outline: none;
+  border: none;
+  border-radius: 2px;
+  background-size: 16px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-image: none;
+  line-height: 1.25;
+  width: auto;
+  white-space: nowrap;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-right: 16px;
+  padding-left: 16px;
+  margin-top: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  -webkit-app-region: no-drag;
+  cursor: pointer;
+  user-select: none;
+  transition: .1s opacity, .1s background;
+
+  &:active {
+    bottom: -1px;
+  }
+
+  ${(p: PushButtonProps) => p.disabled
+    ? css`
+    pointer-events: none;
+    animation: none;
+    opacity: 0.25;
+    ` : ''
+  }
+
+  ${(p: PushButtonProps) => p.color === 'default'
+    ? css`
+      color: ${theme.pushButton.default.color};
+      background-color: ${theme.pushButton.default.bg};
+
+      &:hover {
+        color: ${theme.pushButton.default.hoverColor};
+      }
+    `
+    : ''
+  }
+
+  ${(p: PushButtonProps) => p.color === 'primary'
+    ? css`
+      background: linear-gradient(
+        ${theme.pushButton.primary.gradient1},
+        ${theme.pushButton.primary.gradient2}
+      );
+      border-left: 2px solid ${theme.pushButton.primary.borderColor};
+      border-right: 2px solid ${theme.pushButton.primary.borderColor};
+      border-top: 2px solid ${theme.pushButton.primary.gradient1};
+      border-bottom: 2px solid ${theme.pushButton.primary.gradient1};
+      color: ${theme.pushButton.primary.color};
+
+      &:hover {
+        border: 2px solid ${theme.pushButton.primary.borderHoverColor};
+        color: ${theme.pushButton.primary.hoverColor};
+      }
+    ` : ''
+  }
+
+  ${(p: PushButtonProps) => p.color === 'secondary'
+    ? css`
+      background: linear-gradient(
+        ${theme.pushButton.secondary.gradient1},
+        ${theme.pushButton.secondary.gradient2}
+      );
+      border: 1px solid ${theme.pushButton.secondary.borderColor};
+      color: ${theme.pushButton.secondary.color};
+
+      &:hover {
+        border: 1px solid ${theme.pushButton.secondary.borderHoverColor};
+        color: ${theme.pushButton.secondary.hoverColor};
+      }
+    ` : ''
+  }
+` as any
+
+ export { StyledPushButton }

components/theme.ts

@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const theme = {
-  browserButton: {
+  pushButton: {
     default: {
       bg: '#fff',
       color: '#5a5a5a',

docs/spec.md

@@ -101,7 +101,7 @@ A button is anything that once clicked performs an instant action.
 ### Candidates
 
 * `UnstyledButton` – Old `ActionButton`. Similar to a link but with semantic HTNL's button properties.
-* `PushButton` – Current `BrowserButton` component.
+* `PushButton` – Current `PushButton` component.
 * `SwitchButton` – Current `SwitchButton` component.
 * `ClipBoardButton` – `pushButton` variant with built-in _copy to clipboard_ functionality.
 * `ImageButton` – A clickable and optionally styled image (see cryptocurrency buttons on ledger).