✨ Add new user flow for changing background on NTP

src/features/newTab/default/index.ts

@@ -4,8 +4,9 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { StatsContainer, StatsItem } from './stats'
-import { Page, DynamicBackground, Gradient, Link, Navigation, IconLink, PhotoName } from './page'
+import { Page, DynamicBackground, Link, Navigation, IconLink, PhotoName } from './page'
 import { Header, Main, Footer } from './grid'
+import { SettingsMenu, SettingsRow, SettingsText, SettingsTitle } from './settings'
 import { List, Tile, TileActionsContainer, TileAction, TileFavicon } from './topSites'
 import { SiteRemovalNotification, SiteRemovalText, SiteRemovalAction } from './notification'
 import { Clock } from './clock'
@@ -15,7 +16,6 @@ export {
   StatsItem,
   Page,
   DynamicBackground,
-  Gradient,
   Link,
   Navigation,
   IconLink,
@@ -31,5 +31,9 @@ export {
   SiteRemovalNotification,
   SiteRemovalText,
   SiteRemovalAction,
-  Clock
+  Clock,
+  SettingsMenu,
+  SettingsRow,
+  SettingsText,
+  SettingsTitle
 }

src/features/newTab/default/page/index.ts

@@ -30,35 +30,30 @@ export const Page = styled<{}, 'div'>('div')`
 
 interface DynamicBackgroundProps {
   background: string
+  showBackgroundImage: boolean
 }
 
 export const DynamicBackground = styled<DynamicBackgroundProps, 'div'>('div')`
   box-sizing: border-box;
   background-position: top center;
   background-repeat: no-repeat;
   background-size: cover;
-  background-image: url(${(p) => p.background});
+  ${(p) => p.showBackgroundImage
+  ? ` background-image: url(${p.background});`
+  : ` background: linear-gradient(
+        to bottom right,
+        #4D54D1,
+        #A51C7B 50%,
+        #EE4A37 100%);
+    `
+  }
   display: flex;
   flex: 1;
   opacity: 0;
   animation: ${fadeIn} 300ms;
   animation-fill-mode: forwards;
 `
 
-export const Gradient = styled<{}, 'div'>('div')`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  background: linear-gradient(
-    rgba(0, 0, 0, 0.8),
-    rgba(0, 0, 0, 0) 35%,
-    rgba(0, 0, 0, 0) 80%,
-    rgba(0, 0, 0, 0.6) 100%
-  );
-  height: 100vh;
-`
-
 export const Link = styled<{}, 'a'>('a')`
   text-decoration: none;
   transition: color 0.15s ease, filter 0.15s ease;
@@ -81,7 +76,14 @@ export const Navigation = styled<{}, 'nav'>('nav')`
   display: flex;
 `
 
-export const IconLink = styled<{}, 'a'>('a')`
+interface IconLinkProps {
+  disabled?: boolean
+}
+
+export const IconLink = styled<IconLinkProps, 'a'>('a')`
+  ${(p) => p.disabled && `
+    pointer-events: none;
+  `}
   display: flex;
   width: 24px;
   height: 24px;

src/features/newTab/default/settings/index.ts

@@ -0,0 +1,44 @@
+/* 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 SettingsMenu = styled<{}, 'div'>('div')`
+  background-color: ${p => p.theme.color.contextMenuBackground};
+  color:  ${p => p.theme.color.contextMenuForeground};
+  border-radius: 8px;
+  padding: 24px;
+  position: absolute;
+  bottom: 118px;
+  right: 222px;
+  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.24);
+  font-family: Muli, sans-serif;
+
+  @media screen and (max-width: 904px) {
+    right: 192px;
+  }
+`
+
+export const SettingsTitle = styled<{}, 'div'>('div')`
+  font-family: Muli, sans-serif;
+  font-size: 18px;
+  font-weight: bold;
+  letter-spacing: 0px;
+  margin-bottom: 16px;
+`
+
+export const SettingsRow = styled<{}, 'div'>('div')`
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 1fr 30px;
+  height: 30px;
+  width: 320px;
+`
+
+export const SettingsText = styled<{}, 'span'>('span')`
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: normal;
+`

src/features/newTab/toggle/index.tsx

@@ -0,0 +1,80 @@
+/* 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 { StyledWrapper, StyledSlider, StyledBullet, StyleToggle, StyledCheckbox } from './style'
+
+export interface Props {
+  testId?: string
+  checked?: boolean
+  disabled?: boolean
+  onChange?: (e: any) => void
+  id?: string
+  readOnly?: boolean
+  autoFocus?: boolean
+  size: 'large' | 'small'
+  colorType?: 'dark' | 'light' | 'default'
+}
+
+export interface ToggleState {
+  checked?: boolean
+}
+
+export class Toggle extends React.PureComponent<Props, ToggleState> {
+  static defaultProps = {
+    checked: false,
+    size: 'small',
+    type: 'default',
+    disabled: false
+  }
+
+  constructor (props: Props) {
+    super(props)
+    this.state = { checked: props.checked }
+    this.handleChange = this.handleChange.bind(this)
+  }
+
+  componentWillReceiveProps (nextProps: Props) {
+    if ('checked' in nextProps) {
+      this.setState({ checked: nextProps.checked })
+    }
+  }
+
+  handleChange (e: any) {
+    const { props } = this
+    if (props.disabled) {
+      return
+    }
+    if (!('checked' in props)) {
+      this.setState({ checked: e.target.checked })
+    }
+
+    if (props.onChange) {
+      props.onChange({ target: { checked: e.target.checked } })
+    }
+  }
+
+  render () {
+    const { id, testId, readOnly, disabled, autoFocus, size, colorType } = this.props
+    const { checked } = this.state
+
+    return (
+        <StyledWrapper checked={checked} data-test-id={testId} size={size}>
+          <StyledCheckbox
+            type='checkbox'
+            id={id}
+            readOnly={readOnly}
+            disabled={disabled}
+            checked={checked}
+            onChange={this.handleChange}
+            autoFocus={autoFocus}
+          />
+          <StyleToggle size={size}>
+            <StyledSlider htmlFor={id} checked={checked} size={size} disabled={disabled} />
+            <StyledBullet htmlFor={id} checked={checked} size={size} disabled={disabled} colorType={colorType} />
+          </StyleToggle>
+        </StyledWrapper>
+    )
+  }
+}

src/features/newTab/toggle/style.ts

@@ -0,0 +1,79 @@
+/* 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, { css } from '../../../theme'
+import { Props } from './index'
+import palette from '../../../theme/colors'
+
+export const StyledCheckbox = styled<{}, 'input'>('input')`
+  -webkit-appearance: none;
+  position: absolute;
+  z-index: 99999999;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  outline-offset: -3px;
+  outline-color: ${palette.orange400};
+  outline-width: 2px;
+`
+
+export const StyledWrapper = styled<Props, 'div'>('div')`
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  height: 100%;
+  align-items: center;
+`
+
+export const StyleToggle = styled<Props, 'div'>('div')`
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  height: ${(p) => p.size === 'small' ? '16px' : '24px'};
+  width: ${(p) => p.size === 'small' ? '28px' : '40px'};
+
+  ${(p) => p.disabled
+    ? css`
+      pointer-events: none;
+      animation: none;
+    ` : ''
+  };
+`
+
+export const StyledSlider = styled<Props, 'label'>('label')`
+  box-sizing: border-box;
+  background: ${(p) => p.disabled ? 'rgba(246,246,250,0.1)' : '#C4C7C9'};
+  height: ${(p) => p.size === 'small' ? '6px' : '8px'};
+  margin-top: ${(p) => p.size === 'small' ? '5px' : '8px'};
+  width: 100%;
+  border-radius: 3px;
+  display: block;
+`
+
+const transform = (p: Props) => {
+  let x = p.size === 'small' ? '12px' : '20px'
+  let y = p.size === 'small' ? '3px' : '4px'
+
+  if (!p.checked) {
+    x = '-1px'
+  }
+
+  return { x, y }
+}
+
+const transformBullet = (p: Props) => `${transform(p).x}, calc(-50% - ${transform(p).y})`
+
+export const StyledBullet = styled<Props, 'label'>('label')`
+  box-sizing: border-box;
+  position: relative;
+  border-radius: 50%;
+  transition: all .4s ease;
+  transform: ${p => `translate(${transformBullet(p)})`};
+  width: ${p => p.size === 'small' ? '16px' : '20px'};
+  height: ${p => p.size === 'small' ? '16px' : '20px'};
+  background-color: ${p => p.disabled && 'rgba(235,236,240,0.8)' || p.checked ? '#fb542b' : '#ebecf0'};
+  display: block;
+  box-shadow: 0 3px 3px rgba(0,0,0,0.05);
+`

src/theme/brave-dark.ts

@@ -1,9 +1,15 @@
 import ITheme from './theme-interface'
+import colors from './colors'
 import defaultTheme from './brave-default'
 
 const darkTheme: ITheme = {
   ...defaultTheme,
-  name: 'Brave Dark'
+  name: 'Brave Dark',
+  color: {
+    ...defaultTheme.color,
+    contextMenuBackground: colors.black,
+    contextMenuForeground: colors.white
+  }
 }
 
 export default darkTheme

src/theme/brave-default.ts

@@ -40,9 +40,11 @@ const theme: ITheme = {
     panelBackground: colors.white,
     panelBackgroundSecondary: colors.neutral000,
     primaryBackground: colors.white,
+    contextMenuBackground: colors.white,
     secondaryBackground: colors.grey400,
     modalOverlayBackground: 'rgba(36,37,54,0.85)',
     // text
+    contextMenuForeground: colors.grey800,
     detailDescription: colors.grey500,
     text: colors.grey700,
     // form controls

src/theme/theme-interface.ts

@@ -4,6 +4,8 @@ export default interface IThemeProps {
   name: string,
   palette: { [key: string]: string }
   color: {
+    contextMenuBackground: string
+    contextMenuForeground: string
     brandBrave: string
     brandBraveInteracting: string
     brandBraveActive: string

stories/features/newTab/default.tsx

@@ -4,13 +4,11 @@
 
 import * as React from 'react'
 import { storiesOf } from '@storybook/react'
-// import { withKnobs } from '@storybook/addon-knobs'
 
 // Components
 import NewTabPage from './default/index'
 
 storiesOf('Feature Components/New Tab/Default', module)
-  // .addDecorator(withKnobs)
   .add('Page', () => {
     return (
       <NewTabPage />