Implemented Brave Rewards Ads feedback loop

brave · May 15, 2019 · e780d16 · e780d16
1 parent 4f12cb4
commit e780d16
Show file tree

Hide file tree

Showing 32 changed files with 2,086 additions and 3 deletions.
diff --git a/package/package.json b/package/package.json
@@ -2,7 +2,7 @@
   "name": "brave-ui",
   "main": "index.js",
   "sideEffects": false,
-  "version": "0.38.0",
+  "version": "0.34.4",
   "description": "List of reusable React components to empower your brave UI",
   "author": "Brave Software",
   "contributors": [
@@ -93,7 +93,7 @@
     "react": "^16.4.2",
     "react-beautiful-dnd": "^10.0.3",
     "react-dom": "^16.3.0",
-    "react-storybook-addon-chapters": "^3.1.1",
+    "react-storybook-addon-chapters": "^3.1.3",
     "react-test-renderer": "^16.3.0",
     "rimraf": "^2.6.2",
     "storybook-addon-styled-component-theme": "^1.1.1",

diff --git a/src/features/rewards/adRowsDetails/__snapshots__/spec.tsx.snap b/src/features/rewards/adRowsDetails/__snapshots__/spec.tsx.snap
@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Ad Rows Details tests basic tests matches the snapshot 1`] = `
+.c4 {
+  font-family: Muli,sans-serif;
+  font-size: 14px;
+  color: #686978;
+  display: inline-block;
+}
+
+.c1 {
+  white-space: nowrap;
+}
+
+.c0 {
+  text-align: left;
+  padding-top: 15px;
+}
+
+.c5 {
+  width: 94.5%;
+  padding-left: 10px;
+  display: inline-block;
+}
+
+.c6 {
+  color: #DADCE8;
+  background-color: #DADCE8;
+  height: 2px;
+  border: none;
+}
+
+.c2 {
+  margin: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  color: #9E9FAB;
+  padding: 1px;
+  outline: none;
+  display: inline-block;
+  text-align: center;
+}
+
+.c3 {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+<tr>
+  <td
+    colSpan={3}
+  >
+    <div
+      className="c0"
+    >
+      <div
+        className="c1"
+      >
+        <div
+          className="c2"
+          onClick={[Function]}
+        >
+          <svg
+            aria-hidden="true"
+            className="c3"
+            focusable="false"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M3.36242 7h17.26845c1.19463 0 1.79195 1.3994.94631 2.21953l-8.63087 8.37692c-.5235.5077-1.37584.5077-1.89933 0L2.41611 9.21953C1.57047 8.3994 2.16779 7 3.3624 7z"
+            />
+          </svg>
+        </div>
+        <div
+          className="c4"
+        >
+          
+        </div>
+        <div
+          className="c5"
+        >
+          <hr
+            className="c6"
+          />
+        </div>
+      </div>
+    </div>
+  </td>
+</tr>
+`;
diff --git a/src/features/rewards/adRowsDetails/index.tsx b/src/features/rewards/adRowsDetails/index.tsx
@@ -0,0 +1,96 @@
+/* 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 {
+  StyledAdPortionTD,
+  StyledAdsDateRow,
+  StyledAdsDetailRow,
+  StyledCaratIcon,
+  StyledDateText,
+  StyledHR,
+  StyledHRDiv,
+  StyledInnerStartTD
+  } from './style'
+import {
+  CaratTriangleDownSIcon, CaratTriangleRightSIcon
+} from '../../../components/icons'
+import { DetailRow } from '../tableAdsHistory'
+import { Row, Cell } from '../../../components/dataTables/table'
+
+export interface Props {
+  id?: string
+  row?: DetailRow
+  rowIndex?: number
+  detailRows?: Row[]
+}
+
+interface State {
+  innerDetailVisible: boolean
+}
+
+export default class AdRowsDetails extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = {
+      innerDetailVisible: true
+    }
+  }
+
+  setInnerVisible = () => {
+    this.setState({
+      innerDetailVisible: !this.state.innerDetailVisible
+    })
+  }
+
+  render () {
+    const { row, rowIndex, detailRows } = this.props
+    return (
+      <>
+        <tr key={rowIndex}>
+          <td colSpan={3}>
+            <StyledAdsDetailRow>
+              <StyledAdsDateRow>
+                <StyledCaratIcon onClick={this.setInnerVisible}>
+                {
+                  this.state.innerDetailVisible ?
+                  <CaratTriangleDownSIcon />
+                  :
+                  <CaratTriangleRightSIcon />
+                }
+                </StyledCaratIcon>
+                <StyledDateText>
+                  {
+                    row ? row.date : ''
+                  }
+                </StyledDateText>
+                <StyledHRDiv>
+                  <StyledHR />
+                </StyledHRDiv>
+              </StyledAdsDateRow>
+            </StyledAdsDetailRow>
+          </td>
+        </tr>
+        {
+          detailRows && this.state.innerDetailVisible ?
+          detailRows.map((detailRow: Row, j: number) => {
+            return (
+            <tr key={j}>
+            {
+              detailRow.content.map((detailCell: Cell, k: number) => {
+                return k === 0 ?
+                  <StyledInnerStartTD key={k} />
+                :
+                  <StyledAdPortionTD key={k}>{detailCell.content}</StyledAdPortionTD>
+              })
+            }
+            </tr>
+            )
+          })
+          : null
+        }
+      </>
+    )
+  }
+}
diff --git a/src/features/rewards/adRowsDetails/spec.tsx b/src/features/rewards/adRowsDetails/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 { TestThemeProvider } from '../../../theme'
+import AdRowsDetails from './index';
+
+describe('Ad Rows Details tests', () => {
+  const baseComponent = (props?: object) => <TestThemeProvider><AdRowsDetails id={'adRowsDetails'} /></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('#adRowsDetails').length
+      expect(assertion).toBe(1)
+    })
+  })
+})
diff --git a/src/features/rewards/adRowsDetails/style.ts b/src/features/rewards/adRowsDetails/style.ts
@@ -0,0 +1,70 @@
+/* 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 StyledDateText = styled<{}, 'div'>('div')`
+  font-family: Muli, sans-serif;
+  font-size: 14px;
+  color: #686978;
+  display: inline-block;
+`
+export const StyledAdsDateRow = styled<{}, 'div'>('div')`
+  white-space: nowrap;
+`
+
+export const StyledAdsDetailRow = styled<{}, 'div'>('div')`
+  text-align: left;
+  padding-top: 15px;
+`
+
+export const StyledHRDiv = styled<{}, 'div'>('div')`
+  width: 94.5%;
+  padding-left: 10px;
+  display: inline-block;
+`
+
+export const StyledHR = styled<{}, 'hr'>('hr')`
+  color: #DADCE8;
+  background-color: #DADCE8;
+  height: 2px;
+  border: none;
+`
+
+export const StyledCaratIcon = styled<{}, 'div'>('div')`
+  margin: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  color: #9E9FAB;
+  padding: 1px;
+  outline: none;
+  display: inline-block;
+  text-align: center;
+`
+
+export const StyledAdPortionTD = styled<{}, 'td'>('td')`
+  font-family: Muli, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  color: #686978;
+  border-bottom: none;
+  padding: 5px 0;
+  text-align: left;
+  width: 70%;
+`
+
+export const StyledInnerStartTD = styled<{}, 'td'>('td')`
+  font-family: Muli, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  color: #686978;
+  border-bottom: none;
+  padding: 12px 0;
+  text-align: left;
+  width: 15%;
+  height: 0%;
+`
diff --git a/src/features/rewards/categoryLikePicker/__snapshots__/spec.tsx.snap b/src/features/rewards/categoryLikePicker/__snapshots__/spec.tsx.snap
@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Category Like Picker tests basic tests matches the snapshot 1`] = `
+Array [
+  .c0 {
+  display: inline-block;
+}
+
+.c1 {
+  margin: auto;
+  border: none;
+  height: 32px;
+  width: 32px;
+  outline: none;
+  cursor: pointer;
+  object-fit: cover;
+}
+
+.c2 {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+<div
+    className="c0"
+  >
+    <div
+      className="c1"
+      onClick={[Function]}
+    >
+      <svg
+        aria-hidden="true"
+        className="c2"
+        focusable="false"
+        viewBox="0 0 32 32"
+      >
+        <path
+          d="M20.06238 4.16496c-2.12476-1.76072-5.30215-1.46853-7.27486.51227l-.76803.7741-.76803-.7703c-1.59064-1.60134-4.79922-2.56518-7.27485-.51607-2.44834 2.03392-2.577 5.68437-.38597 7.88526l7.54386 7.5817c.24172.24286.5614.36808.8811.36808.31968 0 .63937-.12143.88109-.36808l7.54386-7.5817c2.19883-2.20089 2.07017-5.85134-.37817-7.88526zm-.51072 7.04285l-7.51657 7.5817-7.54776-7.5817c-1.49708-1.50268-1.80897-4.36763.3002-6.11696 2.13645-1.7759 4.64717-.48951 5.56725.43638l1.66471 1.67344 1.66472-1.67344c.90448-.91071 3.4386-2.2009 5.56725-.43638 2.10527 1.74553 1.79727 4.61049.3002 6.11696z"
+        />
+      </svg>
+    </div>
+  </div>,
+  .c0 {
+  display: inline-block;
+}
+
+.c1 {
+  border: none;
+  height: 31px;
+  width: 31px;
+  outline: none;
+  cursor: pointer;
+}
+
+.c2 {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+<div
+    className="c0"
+  >
+    <div
+      className="c1"
+      onClick={[Function]}
+    >
+      <svg
+        aria-hidden="true"
+        className="c2"
+        focusable="false"
+        viewBox="0 0 32 32"
+      >
+        <path
+          d="M12 2C6.47714 2 2 6.47714 2 12s4.47714 10 10 10 10-4.47714 10-10S17.52286 2 12 2zM5.84133 18.15867c-3.25089-3.25089-3.3931-8.42569-.43952-11.84448l12.28404 12.284c-3.41952 2.95419-8.59428 2.81072-11.84452-.43952zm12.75686-.47286l-12.284-12.284c3.41952-2.95415 8.59424-2.81068 11.84448.43952 3.25089 3.25085 3.3931 8.42569.43952 11.84448z"
+        />
+      </svg>
+    </div>
+  </div>,
+]
+`;