From 6b0a6b2b88af932c759a9d063e1bceb8010ceb20 Mon Sep 17 00:00:00 2001
From: ryanml <rlanese@asu.edu>
Date: Tue, 23 Oct 2018 11:08:14 -0700
Subject: [PATCH] Fixes #232, adds grantError component

---
 .../grantError/__snapshots__/spec.tsx.snap    | 94 +++++++++++++++++++
 src/features/rewards/grantError/index.tsx     | 35 +++++++
 src/features/rewards/grantError/spec.tsx      | 24 +++++
 src/features/rewards/grantError/style.ts      | 25 +++++
 src/features/rewards/index.ts                 |  2 +
 stories/features/rewards/grant.tsx            | 12 +++
 stories/features/rewards/other.tsx            |  1 +
 7 files changed, 193 insertions(+)
 create mode 100644 src/features/rewards/grantError/__snapshots__/spec.tsx.snap
 create mode 100644 src/features/rewards/grantError/index.tsx
 create mode 100644 src/features/rewards/grantError/spec.tsx
 create mode 100644 src/features/rewards/grantError/style.ts

diff --git a/src/features/rewards/grantError/__snapshots__/spec.tsx.snap b/src/features/rewards/grantError/__snapshots__/spec.tsx.snap
new file mode 100644
index 000000000..331f6487f
--- /dev/null
+++ b/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>
+`;
diff --git a/src/features/rewards/grantError/index.tsx b/src/features/rewards/grantError/index.tsx
new file mode 100644
index 000000000..41e320c5d
--- /dev/null
+++ b/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>
+    )
+  }
+}
diff --git a/src/features/rewards/grantError/spec.tsx b/src/features/rewards/grantError/spec.tsx
new file mode 100644
index 000000000..7261ec190
--- /dev/null
+++ b/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)
+    })
+  })
+})
diff --git a/src/features/rewards/grantError/style.ts b/src/features/rewards/grantError/style.ts
new file mode 100644
index 000000000..73d4997e3
--- /dev/null
+++ b/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;
+`
diff --git a/src/features/rewards/index.ts b/src/features/rewards/index.ts
index 71e448477..f13241263 100644
--- a/src/features/rewards/index.ts
+++ b/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,
diff --git a/stories/features/rewards/grant.tsx b/stories/features/rewards/grant.tsx
index fcb0658ea..b7ed2701f 100644
--- a/stories/features/rewards/grant.tsx
+++ b/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>
+      )
+    })
diff --git a/stories/features/rewards/other.tsx b/stories/features/rewards/other.tsx
index fbf08c89c..a0055881e 100644
--- a/stories/features/rewards/other.tsx
+++ b/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}
           />