Update UI and remove legacy props from private tab page

src/features/newTab/clock/index.tsx

@@ -0,0 +1,91 @@
+/* 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 {
+   StyledClock,
+   StyledPeriod,
+   StyledTime,
+   StyledTimeSeparator
+ } from './style'
+
+export interface ClockProps {
+  id?: string
+  testId?: string
+}
+
+export interface ClockState {
+  currentTime: Array<{type: string, value: string}>
+  date: Date
+}
+
+class Clock extends React.PureComponent<ClockProps, ClockState> {
+  constructor (props: ClockProps) {
+    super(props)
+    this.state = this.getClockState(new Date())
+  }
+
+  get dateTimeFormat (): any {
+    return new Intl.DateTimeFormat([], { hour: '2-digit', minute: '2-digit' })
+  }
+
+  get formattedTime () {
+    return this.state.currentTime.map((component, i) => {
+      if (component.type === 'literal') {
+        // wrap ':' in a span with a class, so it can be centered
+        if (component.value === ':') {
+          return <StyledTimeSeparator key={i}>{component.value}</StyledTimeSeparator>
+        } else if (component.value.trim() === '') {
+          // hide blank strings
+          return null
+        }
+      } else if (component.type === 'dayperiod') {
+        // hide day-period (AM / PM), it's rendered in a separate component
+        return null
+      }
+      return component.value
+    })
+  }
+
+  get formattedTimePeriod () {
+    const time: any = this.state.currentTime
+    const period = time.find((component: {type: string}) => component.type === 'dayperiod')
+    return period ? period.value : ''
+  }
+
+  getMinutes (date: any) {
+    return Math.floor(date / 1000 / 60)
+  }
+
+  maybeUpdateClock () {
+    const now = new Date()
+    if (this.getMinutes(this.state.date) !== this.getMinutes(now)) {
+      this.setState(this.getClockState(now))
+    }
+  }
+
+  getClockState (now: Date) {
+    return {
+      date: now,
+      currentTime: this.dateTimeFormat.formatToParts(now)
+    }
+  }
+
+  componentDidMount () {
+    window.setInterval(this.maybeUpdateClock.bind(this), 2000)
+  }
+
+  render () {
+    const { testId } = this.props
+    return (
+      <StyledClock data-test-id={testId}>
+        <StyledTime>{this.formattedTime}</StyledTime>
+        <StyledPeriod>{this.formattedTimePeriod}</StyledPeriod>
+      </StyledClock>
+    )
+  }
+}
+
+export default Clock

src/features/newTab/clock/style.ts

@@ -0,0 +1,56 @@
+/* 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 '../../../theme'
+
+const StyledClock = styled<{}, 'div'>('div')`
+  box-sizing: border-box;
+  line-height: 1;
+  user-select: none;
+  display: flex;
+  cursor: default;
+  -webkit-font-smoothing: antialiased;
+  font-family: Poppins, -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  color: rgb(255, 255, 255);
+`
+
+const StyledTime = styled<{}, 'span'>('span')`
+  box-sizing: border-box;
+  letter-spacing: 0;
+  font-size: 75px;
+  font-weight: 300;
+  color: inherit;
+  font-family: inherit;
+  display: inline-flex;
+`
+
+const StyledPeriod = styled<{}, 'span'>('span')`
+  box-sizing: border-box;
+  color: inherit;
+  font-family: inherit;
+  display: inline-block;
+  font-size: 20px;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  margin-top: 8px;
+  margin-left: 3px;
+  vertical-align: top;
+`
+
+const StyledTimeSeparator = styled<{}, 'span'>('span')`
+  box-sizing: border-box;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: 300;
+  /* center colon vertically in the text-content line */
+  margin-top: -0.1em;
+`
+
+export {
+  StyledClock,
+  StyledTime,
+  StyledPeriod,
+  StyledTimeSeparator
+}

src/features/newTab/featureBlock/index.ts

@@ -0,0 +1,26 @@
+/* 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 '../../../theme'
+
+export interface FeatureBlockProps {
+  grid?: boolean
+}
+
+export const FeatureBlock = styled<FeatureBlockProps, 'div'>('div')`
+  display: grid;
+  height: 100%;
+  grid-gap: ${p => p.grid ? '30px' : '0'};
+  grid-template-columns: ${p => p.grid ? '1fr 5fr 1fr' : '1fr'};
+  grid-template-rows: 1fr;
+  max-width: 800px;
+  border-top: solid 1px rgba(255,255,255,.1);
+  padding: 30px 0 30px;
+
+  aside {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+`

src/features/newTab/index.ts

@@ -0,0 +1,34 @@
+/* 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 Clock from './clock'
+import { FeatureBlock } from './featureBlock'
+import { Page, PageWrapper } from './page'
+import PageHeader from './pageHeader'
+import { StatsContainer, StatsItem } from './stats'
+import {
+  NewTabHeading,
+  Paragraph,
+  LinkText,
+  EmphasizedText,
+  LabelledText,
+  SmallText
+} from './text'
+
+export {
+  Clock,
+  FeatureBlock,
+  Page,
+  PageWrapper,
+  PageHeader,
+  StatsContainer,
+  StatsItem,
+  NewTabHeading,
+  Paragraph,
+  LinkText,
+  EmphasizedText,
+  LabelledText,
+  SmallText
+ }

src/features/newTab/page/index.ts

@@ -0,0 +1,31 @@
+/* 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 '../../../theme'
+import palette from '../../../theme/palette'
+
+export const Page = styled<{}, 'div'>('div')`
+  -webkit-font-smoothing: antialiased;
+  background: linear-gradient(#4b3c6e, #000);
+  min-height: 100%;
+  height: initial;
+  padding: 40px 60px;
+`
+
+export const PageWrapper = styled<{}, 'main'>('main')`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+
+  h1 {
+    max-width: 800px;
+    font-size: 26px;
+    font-family: ${p => p.theme.fontFamily.heading};
+    color: ${palette.white};
+    letter-spacing: -0.4px;
+    margin: 20px 0 40px;
+    align-self: flex-start;
+  }
+`

src/features/newTab/pageHeader/index.tsx

@@ -0,0 +1,27 @@
+/* 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 { StyledPageHeader } from './style'
+
+export interface PageHeaderProps {
+  testId?: string
+  children: React.ReactNode
+}
+
+/**
+ * Styled block around the stats and clock component
+ * @prop {string} testId - the component's id used for testing purposes
+ * @prop {React.ReactNode} children - the child elements
+ */
+export default class PageHeader extends React.PureComponent<PageHeaderProps, {}> {
+  render () {
+    const { children } = this.props
+    return (
+      <StyledPageHeader>
+        {children}
+      </StyledPageHeader>
+    )
+  }
+}

src/features/newTab/pageHeader/style.ts

@@ -0,0 +1,12 @@
+/* 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 '../../../theme'
+
+export const StyledPageHeader = styled<{}, 'div'>('div')`
+  width: 100%;
+  padding: 40px 0;
+  display: flex;
+  justify-content: space-between;
+`

src/features/newTab/stats/index.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+
+import {
+  StyledStatsItemContainer,
+  StyledStatsItem,
+  StyledStatsItemCounter,
+  StyledStatsItemText,
+  StyledStatsItemDescription
+} from './style'
+
+export interface StatsProps {
+  testId?: string
+  children?: React.ReactNode
+}
+
+/**
+ * Styled container block around stat items used in new tab page
+ * @prop {string} testId - the component's id used for testing purposes
+ * @prop {React.ReactNode} children - the child elements
+ */
+export class StatsContainer extends React.PureComponent<StatsProps, {}> {
+  render () {
+    const { testId, children } = this.props
+    return (
+      <StyledStatsItemContainer data-test-id={testId}>{children}</StyledStatsItemContainer>
+    )
+  }
+}
+
+export interface StatsItemProps {
+  testId?: string
+  counter: string | number
+  text?: string
+  description: string
+}
+
+/**
+ * Individual stat block used in new tab page
+ * @prop {string} testId - the component's id used for testing purposes
+ * @prop {string | number} counter - the stat counter
+ * @prop {string} text - descriptive text that goes along the stat
+ * @prop {string} description - describes what the counter is showing
+ */
+export class StatsItem extends React.PureComponent<StatsItemProps, {}> {
+  render () {
+    const { testId, counter, text, description } = this.props
+
+    return (
+      <StyledStatsItem data-test-id={testId}>
+        <StyledStatsItemCounter>{counter}</StyledStatsItemCounter>
+          {text && <StyledStatsItemText>{text}</StyledStatsItemText>}
+        <StyledStatsItemDescription>{description}</StyledStatsItemDescription>
+      </StyledStatsItem>
+    )
+  }
+}