Implemented Brave Rewards Ads feedback loop

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: #5e6175;
+  display: inline-block;
+}
+
+.c1 {
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.c0 {
+  text-align: left;
+  padding-top: 15px;
+}
+
+.c5 {
+  width: 94.5%;
+  padding-left: 10px;
+  display: inline-block;
+}
+
+.c6 {
+  color: #c2c4cf;
+  background-color: #c2c4cf;
+  height: 2px;
+  border: none;
+}
+
+.c2 {
+  margin: 0;
+  background: none;
+  border: none;
+  width: 16px;
+  height: 16px;
+  color: #c2c4cf;
+  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"
+        onClick={[Function]}
+      >
+        <div
+          className="c2"
+        >
+          <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>
+`;

src/features/rewards/adRowsDetails/index.tsx

@@ -0,0 +1,100 @@
+/* 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,
+  StyledSpaceDiv
+  } 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 onClick={this.setInnerVisible}>
+                <StyledCaratIcon>
+                {
+                  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}>
+                    <StyledSpaceDiv />
+                  </StyledInnerStartTD>
+                :
+                  <StyledAdPortionTD key={k}>
+                    {detailCell.content}
+                  </StyledAdPortionTD>
+              })
+            }
+            </tr>
+            )
+          })
+          : null
+        }
+      </>
+    )
+  }
+}

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)
+    })
+  })
+})

src/features/rewards/adRowsDetails/style.ts

@@ -0,0 +1,72 @@
+/* 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: ${p => p.theme.fontFamily.body};
+  font-size: 14px;
+  color: ${p => p.theme.color.text};
+  display: inline-block;
+`
+export const StyledAdsDateRow = styled<{}, 'div'>('div')`
+  cursor: pointer;
+  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: ${p => p.theme.color.subtle};
+  background-color: ${p => p.theme.color.subtle};
+  height: 2px;
+  border: none;
+`
+
+export const StyledCaratIcon = styled<{}, 'div'>('div')`
+  margin: 0;
+  background: none;
+  border: none;
+  width: 16px;
+  height: 16px;
+  color: ${p => p.theme.color.subtle};
+  padding: 1px;
+  outline: none;
+  display: inline-block;
+  text-align: center;
+`
+
+export const StyledAdPortionTD = styled<{}, 'td'>('td')`
+  font-family: ${p => p.theme.fontFamily.body};
+  font-size: 14px;
+  font-weight: 500;
+  color: ${p => p.theme.color.text};
+  border-bottom: none;
+  padding: 5px 0;
+  text-align: left;
+`
+
+export const StyledInnerStartTD = styled<{}, 'td'>('td')`
+  font-family: ${p => p.theme.fontFamily.body};
+  font-size: 14px;
+  font-weight: 500;
+  color: ${p => p.theme.color.text};
+  border-bottom: none;
+  padding: 12px 0;
+  text-align: left;
+  height: 0%;
+`
+
+export const StyledSpaceDiv = styled<{}, 'div'>('div')`
+  min-width: 55px;
+`