From 31175625b446cb5d18b17db23018bca8b14d280c Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 21 Mar 2019 16:03:30 -0700 Subject: Folder restructure (#6304) * Remove ui/app/keychains/ * Remove ui/app/img/ (unused images) * Move conversion-util to helpers/utils/ * Move token-util to helpers/utils/ * Move /helpers/*.js inside /helpers/utils/ * Move util tests inside /helpers/utils/ * Renameand move confirm-transaction/util.js to helpers/utils/ * Move higher-order-components to helpers/higher-order-components/ * Move infura-conversion.json to helpers/constants/ * Move all utility functions to helpers/utils/ * Move pages directory to top-level * Move all constants to helpers/constants/ * Move metametrics inside helpers/ * Move app and root inside pages/ * Move routes inside helpers/ * Re-organize ducks/ * Move reducers to ducks/ * Move selectors inside selectors/ * Move test out of test folder * Move action, reducer, store inside store/ * Move ui components inside ui/ * Move UI components inside ui/ * Move connected components inside components/app/ * Move i18n-helper inside helpers/ * Fix unit tests * Fix unit test * Move pages components * Rename routes component * Move reducers to ducks/index * Fix bad path in unit test --- .../button-group/button-group.component.js | 73 -------------- .../button-group/button-group.stories.js | 49 --------- ui/app/components/button-group/index.js | 1 - ui/app/components/button-group/index.scss | 38 ------- .../tests/button-group-component.test.js | 111 --------------------- 5 files changed, 272 deletions(-) delete mode 100644 ui/app/components/button-group/button-group.component.js delete mode 100644 ui/app/components/button-group/button-group.stories.js delete mode 100644 ui/app/components/button-group/index.js delete mode 100644 ui/app/components/button-group/index.scss delete mode 100644 ui/app/components/button-group/tests/button-group-component.test.js (limited to 'ui/app/components/button-group') diff --git a/ui/app/components/button-group/button-group.component.js b/ui/app/components/button-group/button-group.component.js deleted file mode 100644 index 17a281030..000000000 --- a/ui/app/components/button-group/button-group.component.js +++ /dev/null @@ -1,73 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import classnames from 'classnames' - -export default class ButtonGroup extends PureComponent { - static propTypes = { - defaultActiveButtonIndex: PropTypes.number, - noButtonActiveByDefault: PropTypes.bool, - disabled: PropTypes.bool, - children: PropTypes.array, - className: PropTypes.string, - style: PropTypes.object, - newActiveButtonIndex: PropTypes.number, - } - - static defaultProps = { - className: 'button-group', - defaultActiveButtonIndex: 0, - } - - state = { - activeButtonIndex: this.props.noButtonActiveByDefault - ? null - : this.props.defaultActiveButtonIndex, - } - - componentDidUpdate (_, prevState) { - // Provides an API for dynamically updating the activeButtonIndex - if (typeof this.props.newActiveButtonIndex === 'number' && prevState.activeButtonIndex !== this.props.newActiveButtonIndex) { - this.setState({ activeButtonIndex: this.props.newActiveButtonIndex }) - } - } - - handleButtonClick (activeButtonIndex) { - this.setState({ activeButtonIndex }) - } - - renderButtons () { - const { children, disabled } = this.props - - return React.Children.map(children, (child, index) => { - return child && ( - - ) - }) - } - - render () { - const { className, style } = this.props - - return ( -
- { this.renderButtons() } -
- ) - } -} diff --git a/ui/app/components/button-group/button-group.stories.js b/ui/app/components/button-group/button-group.stories.js deleted file mode 100644 index 14e1a7e49..000000000 --- a/ui/app/components/button-group/button-group.stories.js +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react' -import { storiesOf } from '@storybook/react' -import { action } from '@storybook/addon-actions' -import ButtonGroup from './' -import Button from '../button' -import { text, boolean } from '@storybook/addon-knobs/react' - -storiesOf('ButtonGroup', module) - .add('with Buttons', () => - - - - - - ) - .add('with a disabled Button', () => - - - - - ) diff --git a/ui/app/components/button-group/index.js b/ui/app/components/button-group/index.js deleted file mode 100644 index df470bd57..000000000 --- a/ui/app/components/button-group/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './button-group.component' diff --git a/ui/app/components/button-group/index.scss b/ui/app/components/button-group/index.scss deleted file mode 100644 index 29713c75b..000000000 --- a/ui/app/components/button-group/index.scss +++ /dev/null @@ -1,38 +0,0 @@ -.button-group { - display: flex; - justify-content: center; - align-items: center; - - &__button { - font-family: Roboto; - font-size: 1rem; - color: $tundora; - border-style: solid; - border-color: $alto; - border-width: 1px 1px 1px; - border-left: 0; - flex: 1; - padding: 12px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &:first-child { - border-left: 1px solid $alto; - border-radius: 4px 0 0 4px; - } - - &:last-child { - border-radius: 0 4px 4px 0; - } - - &--active { - background-color: $dodger-blue; - color: $white; - } - - &:disabled { - opacity: .5; - } - } -} \ No newline at end of file diff --git a/ui/app/components/button-group/tests/button-group-component.test.js b/ui/app/components/button-group/tests/button-group-component.test.js deleted file mode 100644 index 0bece90d6..000000000 --- a/ui/app/components/button-group/tests/button-group-component.test.js +++ /dev/null @@ -1,111 +0,0 @@ -import React from 'react' -import assert from 'assert' -import { shallow } from 'enzyme' -import sinon from 'sinon' -import ButtonGroup from '../button-group.component.js' - -const childButtonSpies = { - onClick: sinon.spy(), -} - -sinon.spy(ButtonGroup.prototype, 'handleButtonClick') -sinon.spy(ButtonGroup.prototype, 'renderButtons') - -const mockButtons = [ - , - , - , -] - -describe('ButtonGroup Component', function () { - let wrapper - - beforeEach(() => { - wrapper = shallow({mockButtons}) - }) - - afterEach(() => { - childButtonSpies.onClick.resetHistory() - ButtonGroup.prototype.handleButtonClick.resetHistory() - ButtonGroup.prototype.renderButtons.resetHistory() - }) - - describe('componentDidUpdate', () => { - it('should set the activeButtonIndex to the updated newActiveButtonIndex', () => { - assert.equal(wrapper.state('activeButtonIndex'), 1) - wrapper.setProps({ newActiveButtonIndex: 2 }) - assert.equal(wrapper.state('activeButtonIndex'), 2) - }) - - it('should not set the activeButtonIndex to an updated newActiveButtonIndex that is not a number', () => { - assert.equal(wrapper.state('activeButtonIndex'), 1) - wrapper.setProps({ newActiveButtonIndex: null }) - assert.equal(wrapper.state('activeButtonIndex'), 1) - }) - }) - - describe('handleButtonClick', () => { - it('should set the activeButtonIndex', () => { - assert.equal(wrapper.state('activeButtonIndex'), 1) - wrapper.instance().handleButtonClick(2) - assert.equal(wrapper.state('activeButtonIndex'), 2) - }) - }) - - describe('renderButtons', () => { - it('should render a button for each child', () => { - const childButtons = wrapper.find('.button-group__button') - assert.equal(childButtons.length, 3) - }) - - it('should render the correct button with an active state', () => { - const childButtons = wrapper.find('.button-group__button') - const activeChildButton = wrapper.find('.button-group__button--active') - assert.deepEqual(childButtons.get(1), activeChildButton.get(0)) - }) - - it('should call handleButtonClick and the respective button\'s onClick method when a button is clicked', () => { - assert.equal(ButtonGroup.prototype.handleButtonClick.callCount, 0) - assert.equal(childButtonSpies.onClick.callCount, 0) - const childButtons = wrapper.find('.button-group__button') - childButtons.at(0).props().onClick() - childButtons.at(1).props().onClick() - childButtons.at(2).props().onClick() - assert.equal(ButtonGroup.prototype.handleButtonClick.callCount, 3) - assert.equal(childButtonSpies.onClick.callCount, 3) - }) - - it('should render all child buttons as disabled if props.disabled is true', () => { - const childButtons = wrapper.find('.button-group__button') - childButtons.forEach(button => { - assert.equal(button.props().disabled, undefined) - }) - wrapper.setProps({ disabled: true }) - const disabledChildButtons = wrapper.find('[disabled=true]') - assert.equal(disabledChildButtons.length, 3) - }) - - it('should render the children of the button', () => { - const mockClass = wrapper.find('.mockClass') - assert.equal(mockClass.length, 1) - }) - }) - - describe('render', () => { - it('should render a div with the expected class and style', () => { - assert.equal(wrapper.find('div').at(0).props().className, 'someClassName') - assert.deepEqual(wrapper.find('div').at(0).props().style, { color: 'red' }) - }) - - it('should call renderButtons when rendering', () => { - assert.equal(ButtonGroup.prototype.renderButtons.callCount, 1) - wrapper.instance().render() - assert.equal(ButtonGroup.prototype.renderButtons.callCount, 2) - }) - }) -}) -- cgit