Adds basic tab content to gas customizer, with styled button group (static, for now).

4 files changed, 105 insertions, 0 deletions

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
new file mode 100644
index 000000000..751042871
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import GasPriceButtonGroup from '../../gas-price-button-group'
+
+export default class BasicTabContent extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    gasPriceButtonGroupProps: PropTypes.object,
+  }
+
+  render () {
+    return (
+      <div className="basic-tab-content">
+        <div className="basic-tab-content__title">Suggest gas fee increases</div>
+        <GasPriceButtonGroup {...this.props.gasPriceButtonGroupProps} />
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.js b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.js
new file mode 100644
index 000000000..078d50fce
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.js
@@ -0,0 +1 @@
+export { default } from './basic-tab-content.component'
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss
new file mode 100644
index 000000000..ba665716c
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/index.scss
@@ -0,0 +1,11 @@
+.basic-tab-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &__title {
+    margin-top: 19px;
+    font-size: 20px;
+    color: $scorpion;
+  }
+}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js
new file mode 100644
index 000000000..0c9c6ac63
--- /dev/null
+++ b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js
@@ -0,0 +1,71 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import BasicTabContent from '../basic-tab-content.component'
+
+import GasPriceButtonGroup from '../../../gas-price-button-group/'
+
+const mockGasPriceButtonGroupProps = {
+  buttonDataLoading: false,
+  className: 'gas-price-button-group',
+  gasButtonInfo: [
+    {
+      feeInPrimaryCurrency: '$0.52',
+      feeInSecondaryCurrency: '0.0048 ETH',
+      timeEstimate: '~ 1 min 0 sec',
+      priceInHexWei: '0xa1b2c3f',
+    },
+    {
+      feeInPrimaryCurrency: '$0.39',
+      feeInSecondaryCurrency: '0.004 ETH',
+      timeEstimate: '~ 1 min 30 sec',
+      priceInHexWei: '0xa1b2c39',
+    },
+    {
+      feeInPrimaryCurrency: '$0.30',
+      feeInSecondaryCurrency: '0.00354 ETH',
+      timeEstimate: '~ 2 min 1 sec',
+      priceInHexWei: '0xa1b2c30',
+    },
+  ],
+  handleGasPriceSelection: newPrice => console.log('NewPrice: ', newPrice),
+  noButtonActiveByDefault: true,
+  showCheck: true,
+}
+
+describe('BasicTabContent Component', function () {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<BasicTabContent
+      gasPriceButtonGroupProps={mockGasPriceButtonGroupProps}
+    />)
+  })
+
+  describe('render', () => {
+    it('should have a title', () => {
+      assert(wrapper.find('.basic-tab-content').childAt(0).hasClass('basic-tab-content__title'))
+    })
+
+    it('should render a GasPriceButtonGroup compenent', () => {
+      assert.equal(wrapper.find(GasPriceButtonGroup).length, 1)
+    })
+
+    it('should pass correct props to GasPriceButtonGroup', () => {
+      const {
+        buttonDataLoading,
+        className,
+        gasButtonInfo,
+        handleGasPriceSelection,
+        noButtonActiveByDefault,
+        showCheck,
+      } = wrapper.find(GasPriceButtonGroup).props()
+      assert.equal(buttonDataLoading, mockGasPriceButtonGroupProps.buttonDataLoading)
+      assert.equal(className, mockGasPriceButtonGroupProps.className)
+      assert.equal(noButtonActiveByDefault, mockGasPriceButtonGroupProps.noButtonActiveByDefault)
+      assert.equal(showCheck, mockGasPriceButtonGroupProps.showCheck)
+      assert.deepEqual(gasButtonInfo, mockGasPriceButtonGroupProps.gasButtonInfo)
+      assert.equal(JSON.stringify(handleGasPriceSelection), JSON.stringify(mockGasPriceButtonGroupProps.handleGasPriceSelection))
+    })
+  })
+})