forked from brave/brave-core
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Imported from brave-ui: Merge pull request brave#134 from brave/priva…
…tetabtor Update UI and remove legacy props from private tab page
- Loading branch information
Showing
17 changed files
with
638 additions
and
165 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
} |
26 changes: 26 additions & 0 deletions
26
components/brave_new_tab_ui/components/featureBlock/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
` |
27 changes: 27 additions & 0 deletions
27
components/brave_new_tab_ui/components/pageHeader/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) | ||
} | ||
} |
12 changes: 12 additions & 0 deletions
12
components/brave_new_tab_ui/components/pageHeader/style.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) | ||
} | ||
} |
Oops, something went wrong.