Fixes brave#232, adds grantError component

src/features/rewards/grantError/__snapshots__/spec.tsx.snap

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Grant error tests basic tests matches the snapshot 1`] = `
+.c4 {
+  --button-main-color: #FB542B;
+  --button-main-color-hover: #F43405;
+  --button-main-color-active: #FDBBAA;
+  --button-state-color: var(--button-main-color);
+  --icon-size: 18px;
+  --icon-spacing: 6px;
+  --webkit-appearance: none;
+  box-sizing: border-box;
+  background: none;
+  border: none;
+  outline: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row-reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-family: Poppins,sans-serif;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  font-size: 14px;
+  border-radius: 28px;
+  width: 100%;
+  min-width: 235px;
+  padding: 19px 15px;
+}
+
+.c4:hover:enabled {
+  --button-state-color: var(--button-main-color-hover);
+}
+
+.c4:active:enabled {
+  --button-state-color: var(--button-main-color-active);
+}
+
+.c3 {
+  color: #fff;
+  background: var(--button-state-color);
+}
+
+.c0 {
+  text-align: center;
+  width: 100%;
+  padding: 20px 10px;
+  font-family: Poppins,sans-serif;
+}
+
+.c1 {
+  font-family: Muli,sans-serif;
+  font-size: 14px;
+  line-height: 1.29;
+  color: #838391;
+  margin: 44px 0 32px;
+}
+
+.c2 {
+  display: block;
+  margin: 0 auto;
+}
+
+<div
+  className="c0"
+  id="error"
+>
+  <div
+    className="c1"
+  />
+  <div
+    className="c2"
+  >
+    <button
+      className="c3 c4"
+      size="call-to-action"
+      type="accent"
+    />
+  </div>
+</div>
+`;

src/features/rewards/grantError/index.tsx

@@ -0,0 +1,35 @@
+/* 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 * as React from 'react'
+import Button from '../../../components/buttonsIndicators/button'
+import { StyledWrapper, StyledText, StyledButton } from './style'
+
+export interface Props {
+  text?: string
+  buttonText: string
+  onClick: () => void
+}
+
+export default class GrantError extends React.PureComponent<Props, {}> {
+  render () {
+    const { id, text, buttonText, onClick } = this.props
+
+    return (
+      <StyledWrapper id={id}>
+        <StyledText>
+          {text}
+        </StyledText>
+        <StyledButton>
+          <Button
+            text={buttonText}
+            size={'call-to-action'}
+            type={'accent'}
+            onClick={onClick}
+          />
+        </StyledButton>
+      </StyledWrapper>
+    )
+  }
+}

src/features/rewards/grantError/spec.tsx

@@ -0,0 +1,24 @@
+/* global jest, expect, describe, it, afterEach */
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import { create } from 'react-test-renderer'
+import GrantError from './index'
+import { TestThemeProvider } from '../../../theme'
+
+describe('Grant error tests', () => {
+  const baseComponent = (props?: object) => <TestThemeProvider><GrantError id='error' {...props} /></TestThemeProvider>
+
+  describe('basic tests', () => {
+    it('matches the snapshot', () => {
+      const component = baseComponent()
+      const tree = create(component).toJSON()
+      expect(tree).toMatchSnapshot()
+    })
+
+    it('renders the component', () => {
+      const wrapper = shallow(baseComponent())
+      const assertion = wrapper.find('#error').length
+      expect(assertion).toBe(1)
+    })
+  })
+})

src/features/rewards/grantError/style.ts

@@ -0,0 +1,25 @@
+/* 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 from 'styled-components'
+
+export const StyledWrapper = styled<{}, 'div'>('div')`
+  text-align: center;
+  width: 100%;
+  padding: 20px 10px;
+  font-family: Poppins, sans-serif;
+`
+
+export const StyledText = styled<{}, 'div'>('div')`
+  font-family: Muli, sans-serif;
+  font-size: 14px;
+  line-height: 1.29;
+  color: #838391;
+  margin: 44px 0 32px;
+`
+
+export const StyledButton = styled<{}, 'div'>('div')`
+  display: block;
+  margin: 0 auto;
+`

src/features/rewards/index.ts

@@ -11,6 +11,7 @@ import DonationOverlay from './donationOverlay'
 import GrantCaptcha from './grantCaptcha'
 import GrantClaim from './grantClaim'
 import GrantComplete from './grantComplete'
+import GrantError from './grantError'
 import GrantWrapper from './grantWrapper'
 import InfoCard from './infoCard'
 import List from './list'
@@ -51,6 +52,7 @@ export {
   GrantCaptcha,
   GrantClaim,
   GrantComplete,
+  GrantError,
   GrantWrapper,
   InfoCard,
   List,

stories/features/rewards/grant.tsx

@@ -9,6 +9,7 @@ import { withKnobs, text } from '@storybook/addon-knobs'
 import centered from '@storybook/addon-centered/dist'
 // Components
 import GrantClaim from '../../../src/features/rewards/grantClaim'
+import GrantError from '../../../src/features/rewards/grantError'
 import GrantWrapper from '../../../src/features/rewards/grantWrapper'
 import GrantCaptcha from '../../../src/features/rewards/grantCaptcha'
 import GrantComplete from '../../../src/features/rewards/grantComplete'
@@ -64,3 +65,14 @@ storiesOf('Feature Components/Rewards/Grant', module)
         </div>
       )
     })
+    .add('Grant Error',() => {
+      return (
+        <div style={{ width: '373px', height: '250px', position: 'relative', background: '#fff' }}>
+          <GrantError
+            onClick={dummyClick}
+            buttonText={'ok'}
+            text={'The period for claiming this grant has ended'}
+          />
+        </div>
+      )
+    })

stories/features/rewards/other.tsx

@@ -211,6 +211,7 @@ storiesOf('Feature Components/Rewards/Other/Desktop', module)
         <div style={{ width: '373px', minHeight: '446px' }}>
           <PanelWelcome
             optInAction={dummyClick}
+            optInErrorAction={dummyClick}
             variant={select('Variant', { one: 'One', two: 'Two' }, 'one')}
             moreLink={dummyClick}
           />