From a244cf235dfd9a718c94270867638671e9a460ba Mon Sep 17 00:00:00 2001 From: Pete Miller Date: Mon, 9 Nov 2020 14:31:44 -0800 Subject: [PATCH 1/3] New Tab Page: Customize dialog body doesn't force overlay scroll bar on top of content --- .../brave_new_tab_ui/components/default/settings/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/brave_new_tab_ui/components/default/settings/index.ts b/components/brave_new_tab_ui/components/default/settings/index.ts index 36c0e14f4e18..be13c16c6a05 100644 --- a/components/brave_new_tab_ui/components/default/settings/index.ts +++ b/components/brave_new_tab_ui/components/default/settings/index.ts @@ -203,7 +203,7 @@ export const SettingsSidebarButton = styled('section')` padding: 10px 16px; height: 360px; - overflow-y: overlay; + overflow: auto; overscroll-behavior: contain; ` From 37720128df786b890ddf0bc2687e20654ae88412 Mon Sep 17 00:00:00 2001 From: Pete Miller Date: Mon, 9 Nov 2020 21:52:39 -0800 Subject: [PATCH 2/3] Brave Today: popup menu for publisher name which disables publisher --- .storybook/locale.ts | 3 +- browser/ui/webui/brave_webui_source.cc | 2 + .../default/braveToday/cardSizes.ts | 9 +- .../braveToday/cards/PublisherMeta.tsx | 197 +++++++++++++++++- .../cards/_articles/cardArticleLarge.tsx | 12 +- .../cards/_articles/cardArticleMedium.tsx | 12 +- .../braveToday/cards/categoryGroup/style.ts | 3 +- .../braveToday/cards/publisherGroup/index.tsx | 19 +- .../braveToday/cards/publisherGroup/style.ts | 7 + .../default/braveToday/cardsGroup.tsx | 6 +- .../components/default/braveToday/content.tsx | 2 + .../components/default/braveToday/default.ts | 14 -- .../components/default/braveToday/index.tsx | 2 + .../containers/newTab/index.tsx | 1 + .../brave_new_tab_ui/stories/components.tsx | 101 +++++++++ .../brave_new_tab_ui/stories/default.tsx | 37 ---- .../default/data/todayStorybookState.ts | 2 +- .../resources/brave_components_strings.grd | 3 + 18 files changed, 354 insertions(+), 78 deletions(-) create mode 100644 components/brave_new_tab_ui/stories/components.tsx diff --git a/.storybook/locale.ts b/.storybook/locale.ts index 99e3c34cf7d7..6e39fb1495c2 100644 --- a/.storybook/locale.ts +++ b/.storybook/locale.ts @@ -346,7 +346,8 @@ const locale: Record = { showTopSites: 'Show Top Sites', showRewards: 'Show Rewards', rewardsWidgetEnableBrandedWallpaperTitle: 'Get paid to view this sponsored background image.', - tosAndPp: 'By turning on {{title}}, you agree to the $1Terms of Service$2 and $3Privacy Policy$4.' + tosAndPp: 'By turning on {{title}}, you agree to the $1Terms of Service$2 and $3Privacy Policy$4.', + braveTodayDisableSourceCommand: 'Disable content from $1', } export default locale diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc index 078d1ac66d98..989644fe03cd 100644 --- a/browser/ui/webui/brave_webui_source.cc +++ b/browser/ui/webui/brave_webui_source.cc @@ -165,6 +165,8 @@ void CustomizeWebUIHTMLSource(const std::string &name, { "braveTodayResetConfirm", IDS_BRAVE_TODAY_RESET_CONFIRM}, { "braveTodayCategoryNameAll", IDS_BRAVE_TODAY_CATEGORY_NAME_ALL}, { "braveTodaySourcesTitle", IDS_BRAVE_TODAY_SOURCES_TITLE}, + { "braveTodayDisableSourceCommand", + IDS_BRAVE_TODAY_DISABLE_SOURCE_COMMAND}, { "addWidget", IDS_BRAVE_NEW_TAB_WIDGET_ADD }, { "hideWidget", IDS_BRAVE_NEW_TAB_WIDGET_HIDE }, diff --git a/components/brave_new_tab_ui/components/default/braveToday/cardSizes.ts b/components/brave_new_tab_ui/components/default/braveToday/cardSizes.ts index 64a36eb07c46..f83899a5d4fc 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/cardSizes.ts +++ b/components/brave_new_tab_ui/components/default/braveToday/cardSizes.ts @@ -10,7 +10,6 @@ import { Image as StandardImage, Text as StandardText, Time as StandardTime, - PublisherLogo as StandardPublisherLogo } from './default' export const Large = styled(StandardBlock.withComponent('article'))` @@ -101,8 +100,12 @@ export const Text = styled(StandardText)` export const Time = styled(StandardTime)`` -export const PublisherLogo = styled(StandardPublisherLogo)` - margin: 36px 0 12px; +export const Publisher = styled('div')` + box-sizing: border-box; + margin: 12px 0 0 0; + padding: 0; + font: 500 14px ${p => p.theme.fontFamily.heading}; + color: #fff; ` export const ContainerForTwo = styled<{}, 'div'>('div')` diff --git a/components/brave_new_tab_ui/components/default/braveToday/cards/PublisherMeta.tsx b/components/brave_new_tab_ui/components/default/braveToday/cards/PublisherMeta.tsx index 952492e0d9fb..d7e4b262051d 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/cards/PublisherMeta.tsx +++ b/components/brave_new_tab_ui/components/default/braveToday/cards/PublisherMeta.tsx @@ -4,21 +4,200 @@ // you can obtain one at http://mozilla.org/MPL/2.0/. import * as React from 'react' -import * as Card from '../cardSizes' -import * as styled from '../default' +import styled from 'brave-ui/theme' +import { getLocale } from '../../../../../common/locale' +import { OnSetPublisherPref } from '../' type Props = { publisher: BraveToday.Publisher + onSetPublisherPref: OnSetPublisherPref title?: boolean } -export default function PublisherMeta (props: Props) { - const Component = props.title - ? Card.PublisherHeading - : styled.PublisherName +// TODO(petemill): Make this shared and have WidgetMenu use it, +// so we're not duplicating styles, functionality and accessibility. +const isOpenClassName = 'is-open' + +const PublisherMeta = styled('div')` + width: fit-content; +` + +const Trigger = styled('button')` + appearance: none; + display: block; + cursor: pointer; + position: relative; + margin: 0; + border: none; + border-radius: 100px; + padding: 0; + background: none; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + outline: none; + color: inherit; + font-weight: inherit; + + // Negative margin is ok here because we're doing a + // "ghost" outline, but we do need to take care not to overlap any sibling + // elements. + --ghost-padding-v: max(4.7%, 5px); + --ghost-padding-h: max(9%, 12px); + padding: var(--ghost-padding-v) var(--ghost-padding-h); + margin: calc(var(--ghost-padding-v) * -1 - 1px) calc(var(--ghost-padding-h) * -1 - 1px); + border: solid 1px transparent; + overflow: visible; + + &.${isOpenClassName}, + &:focus-visible, + &:hover, + &:active { + border-color: inherit; + } + + &:active { + background-color: rgba(255, 255, 255, .2); + } +` + +const Text = styled('span')` + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; +` + +const Menu = styled('ul')` + list-style: none; + list-style-type: none; + margin: 0; + position: absolute; + width: max-content; + min-width: 166px; + bottom: 114%; + left: 0; + border-radius: 4px; + box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3); + padding: 8px 0; + background-color: ${p => p.theme.color.contextMenuBackground}; + color: ${p => p.theme.color.contextMenuForeground}; +` + +const MenuItem = styled('li')` + list-style-type: none; + padding: 10px 18px; + outline: none; + font-size: 12px; + + &:hover, + &:focus { + background-color: ${p => p.theme.color.contextMenuHoverBackground}; + color: ${p => p.theme.color.contextMenuHoverForeground}; + } + + &:active { + // TODO(petemill): Theme doesn't have a context menu interactive color, + // make one and don't make entire element opaque. + opacity: .8; + } + + &:focus-visible { + outline: solid 1px ${p => p.theme.color.brandBrave}; + } +` + +export default function PublisherMetaComponent (props: Props) { + + const [isMenuOpen, setIsMenuOpen] = React.useState(false) + + const triggerElementRef = React.useRef(null) + + const onClickCloseMenu = React.useCallback((e: MouseEvent) => { + const triggerElement = triggerElementRef.current + if (!triggerElement || triggerElement.contains(e.target as Node)) { + return + } + setIsMenuOpen(false) + }, [setIsMenuOpen]) + + const onKeyDown = React.useCallback((e: KeyboardEvent) => { + if (e.defaultPrevented) { + return + } + if (e.key === 'Escape') { + setIsMenuOpen(false) + } + }, [setIsMenuOpen]) + + const toggleMenu = React.useCallback((e: React.MouseEvent) => { + e.stopPropagation() + e.preventDefault() + setIsMenuOpen((value) => !value) + }, [setIsMenuOpen]) + + // Setup or remote event listeners when opens or closes + // or this element is removed. + React.useEffect(() => { + const removeEventListeners = () => { + window.removeEventListener('click', onClickCloseMenu) + window.removeEventListener('keydown', onKeyDown) + } + if (!isMenuOpen) { + removeEventListeners() + } else { + // TODO(petemill): set element focus when using keyboard arrows. + window.addEventListener('click', onClickCloseMenu) + window.addEventListener('keydown', onKeyDown) + } + return removeEventListeners + }, [isMenuOpen]) + + const onClickDisablePublisher = React.useCallback(() => { + props.onSetPublisherPref( + props.publisher.publisher_id, + false + ) + }, [props.publisher, props.onSetPublisherPref]) + + const commandText = React.useMemo(() => { + const raw = getLocale('braveTodayDisableSourceCommand') + const publisherIndex = raw.indexOf('$1') + if (publisherIndex === -1) { + console.warn('Locale string for braveTodayDisableSourceCommand did not have a $1 replacement area for publisher name.', raw) + return `${raw} ${props.publisher.publisher_name}` + } + return raw.substr(0, publisherIndex) + + props.publisher.publisher_name + + raw.substr(publisherIndex + 2) + }, [props.publisher.publisher_name]) + return ( - - {props.publisher.publisher_name} - + + + + {props.publisher.publisher_name} + + {isMenuOpen && + + + {commandText} + + + } + + ) } diff --git a/components/brave_new_tab_ui/components/default/braveToday/cards/_articles/cardArticleLarge.tsx b/components/brave_new_tab_ui/components/default/braveToday/cards/_articles/cardArticleLarge.tsx index a339d5bd3442..2a2e213e3dff 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/cards/_articles/cardArticleLarge.tsx +++ b/components/brave_new_tab_ui/components/default/braveToday/cards/_articles/cardArticleLarge.tsx @@ -9,7 +9,7 @@ import CardImage from '../CardImage' import PublisherMeta from '../PublisherMeta' import useScrollIntoView from '../../useScrollIntoView' import useReadArticleClickHandler from '../../useReadArticleClickHandler' -import { OnReadFeedItem } from '../../' +import { OnReadFeedItem, OnSetPublisherPref } from '../../' // TODO(petemill): Large and Medium article should be combined to 1 component. interface Props { @@ -17,6 +17,7 @@ interface Props { publishers: BraveToday.Publishers articleToScrollTo?: BraveToday.FeedItem onReadFeedItem: OnReadFeedItem + onSetPublisherPref: OnSetPublisherPref } type ArticleProps = { @@ -24,6 +25,7 @@ type ArticleProps = { publisher?: BraveToday.Publisher shouldScrollIntoView?: boolean onReadFeedItem: OnReadFeedItem + onSetPublisherPref: OnSetPublisherPref } const LargeArticle = React.forwardRef(function (props: ArticleProps, ref) { @@ -44,7 +46,12 @@ const LargeArticle = React.forwardRef(function (props {item.relative_time} { publisher && - + + + } @@ -78,6 +85,7 @@ const CardSingleArticleLarge = React.forwardRef(function (pr item={item} shouldScrollIntoView={shouldScrollIntoView} onReadFeedItem={props.onReadFeedItem} + onSetPublisherPref={props.onSetPublisherPref} /> ) })} diff --git a/components/brave_new_tab_ui/components/default/braveToday/cards/_articles/cardArticleMedium.tsx b/components/brave_new_tab_ui/components/default/braveToday/cards/_articles/cardArticleMedium.tsx index a8b941eb14d4..5888cd6af0fe 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/cards/_articles/cardArticleMedium.tsx +++ b/components/brave_new_tab_ui/components/default/braveToday/cards/_articles/cardArticleMedium.tsx @@ -9,7 +9,7 @@ import * as Card from '../../cardSizes' import PublisherMeta from '../PublisherMeta' import useScrollIntoView from '../../useScrollIntoView' import useReadArticleClickHandler from '../../useReadArticleClickHandler' -import { OnReadFeedItem } from '../../' +import { OnReadFeedItem, OnSetPublisherPref } from '../../' // TODO(petemill): Large and Medium article should be combined to 1 component. interface Props { @@ -17,6 +17,7 @@ interface Props { publishers: BraveToday.Publishers articleToScrollTo?: BraveToday.FeedItem onReadFeedItem: OnReadFeedItem + onSetPublisherPref: OnSetPublisherPref } type ArticleProps = { @@ -24,6 +25,7 @@ type ArticleProps = { publisher?: BraveToday.Publisher shouldScrollIntoView?: boolean onReadFeedItem: OnReadFeedItem + onSetPublisherPref: OnSetPublisherPref } function MediumArticle (props: ArticleProps) { @@ -42,7 +44,12 @@ function MediumArticle (props: ArticleProps) { {item.relative_time} { publisher && - + + + } @@ -71,6 +78,7 @@ export default function CardSingleArticleMedium (props: Props) { publisher={publisher} item={item} onReadFeedItem={props.onReadFeedItem} + onSetPublisherPref={props.onSetPublisherPref} shouldScrollIntoView={shouldScrollIntoView} /> ) diff --git a/components/brave_new_tab_ui/components/default/braveToday/cards/categoryGroup/style.ts b/components/brave_new_tab_ui/components/default/braveToday/cards/categoryGroup/style.ts index 1cf6cb38f4ad..30f53649f66b 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/cards/categoryGroup/style.ts +++ b/components/brave_new_tab_ui/components/default/braveToday/cards/categoryGroup/style.ts @@ -62,7 +62,6 @@ export const Title = styled(StandardHeading)` export const Heading = styled(StandardHeading)` font-size: 18px; line-height: 25px; - font-weight: normal; a { display: block; @@ -79,7 +78,7 @@ export const Publisher = styled('div')` font-family: ${p => p.theme.fontFamily.heading}; font-size: 14px; color: white; - font-weight: 700; + font-weight: 500; ` export const Time = styled(StandardTime)`` diff --git a/components/brave_new_tab_ui/components/default/braveToday/cards/publisherGroup/index.tsx b/components/brave_new_tab_ui/components/default/braveToday/cards/publisherGroup/index.tsx index 6c61d55d82fd..615304a9de77 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/cards/publisherGroup/index.tsx +++ b/components/brave_new_tab_ui/components/default/braveToday/cards/publisherGroup/index.tsx @@ -4,12 +4,11 @@ // you can obtain one at http://mozilla.org/MPL/2.0/. import * as React from 'react' - // Feature-specific components import * as Card from './style' import useScrollIntoView from '../../useScrollIntoView' import useReadArticleClickHandler from '../../useReadArticleClickHandler' -import { OnReadFeedItem } from '../../' +import { OnReadFeedItem, OnSetPublisherPref } from '../../' import PublisherMeta from '../PublisherMeta' interface Props { @@ -17,12 +16,14 @@ interface Props { publisher: BraveToday.Publisher articleToScrollTo?: BraveToday.FeedItem onReadFeedItem: OnReadFeedItem + onSetPublisherPref: OnSetPublisherPref } type ListItemProps = { item: BraveToday.Article publisher: BraveToday.Publisher onReadFeedItem: OnReadFeedItem + onSetPublisherPref: OnSetPublisherPref shouldScrollIntoView: boolean } @@ -48,10 +49,15 @@ export default function PublisherGroup (props: Props) { } return ( - {props.publisher && } + {props.publisher && + + + + } { props.content.map((item, index) => { @@ -65,6 +71,7 @@ export default function PublisherGroup (props: Props) { key={index} shouldScrollIntoView={shouldScrollTo} onReadFeedItem={props.onReadFeedItem} + onSetPublisherPref={props.onSetPublisherPref} /> }) } diff --git a/components/brave_new_tab_ui/components/default/braveToday/cards/publisherGroup/style.ts b/components/brave_new_tab_ui/components/default/braveToday/cards/publisherGroup/style.ts index f081176e342c..8cdeb18e5c7b 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/cards/publisherGroup/style.ts +++ b/components/brave_new_tab_ui/components/default/braveToday/cards/publisherGroup/style.ts @@ -13,6 +13,13 @@ import { export const OrderedList = styled(StandardBlock)`` +export const ListTitle = styled('div')` + font-family: ${p => p.theme.fontFamily.heading}; + font-weight: 500; + font-size: 28px; + color: #fff; +` + export const List = styled('ol')` box-sizing: border-box; counter-reset: item; diff --git a/components/brave_new_tab_ui/components/default/braveToday/cardsGroup.tsx b/components/brave_new_tab_ui/components/default/braveToday/cardsGroup.tsx index a79a1b3c71bb..b8cef731bb45 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/cardsGroup.tsx +++ b/components/brave_new_tab_ui/components/default/braveToday/cardsGroup.tsx @@ -11,7 +11,7 @@ import CardSmall from './cards/_articles/cardArticleMedium' import CategoryGroup from './cards/categoryGroup' import PublisherGroup from './cards/publisherGroup' import CardDeals from './cards/cardDeals' -import { OnReadFeedItem } from './' +import { OnReadFeedItem, OnSetPublisherPref } from './' // Disabled rules because we have a function // which returns elements in a switch. @@ -51,6 +51,7 @@ type Props = { publishers: BraveToday.Publishers articleToScrollTo?: BraveToday.FeedItem onReadFeedItem: OnReadFeedItem + onSetPublisherPref: OnSetPublisherPref } type CardProps = Props & { @@ -68,6 +69,7 @@ function Card (props: CardProps) { publishers={props.publishers} articleToScrollTo={props.articleToScrollTo} onReadFeedItem={props.onReadFeedItem} + onSetPublisherPref={props.onSetPublisherPref} /> case CardType.HeadlinePaired: // TODO: handle content length < 2 @@ -76,6 +78,7 @@ function Card (props: CardProps) { publishers={props.publishers} articleToScrollTo={props.articleToScrollTo} onReadFeedItem={props.onReadFeedItem} + onSetPublisherPref={props.onSetPublisherPref} /> case CardType.CategoryGroup: if (!props.content.itemsByCategory) { @@ -100,6 +103,7 @@ function Card (props: CardProps) { publisher={publisher} articleToScrollTo={props.articleToScrollTo} onReadFeedItem={props.onReadFeedItem} + onSetPublisherPref={props.onSetPublisherPref} /> case CardType.Deals: return {/* deals */} @@ -145,6 +146,7 @@ export default function BraveTodayContent (props: Props) { publishers={publishers} articleToScrollTo={props.articleToScrollTo} onReadFeedItem={props.onReadFeedItem} + onSetPublisherPref={props.onSetPublisherPref} /> ) }) diff --git a/components/brave_new_tab_ui/components/default/braveToday/default.ts b/components/brave_new_tab_ui/components/default/braveToday/default.ts index 50f1cb6ac6f5..636223ed6b29 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/default.ts +++ b/components/brave_new_tab_ui/components/default/braveToday/default.ts @@ -45,8 +45,6 @@ export const Block = styled('div')` padding: 36px 48px; background: rgba(53, 53, 53, 0.47); backdrop-filter: blur(62px); - /* Prevent images from overflowing border-radius */ - overflow-x: hidden; margin-bottom: 30px; color: white; a { @@ -104,15 +102,3 @@ export const PublisherLogo = styled<{}, 'img'>('img')` margin-top: 12px; display: inline-block; ` - -export const PublisherName = styled<{}, 'span'>('span')` - box-sizing: border-box; - margin-top: 12px; - max-width: 100%; - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - font-size: 14px; - font-family: ${p => p.theme.fontFamily.heading}; - color: #fff; -` diff --git a/components/brave_new_tab_ui/components/default/braveToday/index.tsx b/components/brave_new_tab_ui/components/default/braveToday/index.tsx index eedb6cb5f3e2..a3cc98d659f5 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/index.tsx +++ b/components/brave_new_tab_ui/components/default/braveToday/index.tsx @@ -15,6 +15,7 @@ type State = { } export type OnReadFeedItem = (args: ReadFeedItemPayload) => any +export type OnSetPublisherPref = (publisherId: string, enabled: boolean) => any export type Props = { isFetching: boolean @@ -25,6 +26,7 @@ export type Props = { displayedPageCount: number onInteracting: (interacting: boolean) => any onReadFeedItem: OnReadFeedItem + onSetPublisherPref: OnSetPublisherPref onAnotherPageNeeded: () => any onCustomizeBraveToday: () => any onRefresh: () => any diff --git a/components/brave_new_tab_ui/containers/newTab/index.tsx b/components/brave_new_tab_ui/containers/newTab/index.tsx index 7282301bb712..dc75a3751edd 100644 --- a/components/brave_new_tab_ui/containers/newTab/index.tsx +++ b/components/brave_new_tab_ui/containers/newTab/index.tsx @@ -1109,6 +1109,7 @@ class NewTabPage extends React.Component { // tslint:disable-next-line:jsx-no-lambda onCustomizeBraveToday={() => { this.openSettings(SettingsTabType.BraveToday) }} onReadFeedItem={this.props.actions.today.readFeedItem} + onSetPublisherPref={this.props.actions.today.setPublisherPref} onCheckForUpdate={this.props.actions.today.checkForUpdate} /> } diff --git a/components/brave_new_tab_ui/stories/components.tsx b/components/brave_new_tab_ui/stories/components.tsx new file mode 100644 index 000000000000..d921f7bf6da5 --- /dev/null +++ b/components/brave_new_tab_ui/stories/components.tsx @@ -0,0 +1,101 @@ +// 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 { storiesOf } from '@storybook/react' +import { withKnobs, select, text } from '@storybook/addon-knobs/react' +import Theme from 'brave-ui/theme/brave-default' +import DarkTheme from 'brave-ui/theme/brave-dark' +import BraveCoreThemeProvider from '../../common/BraveCoreThemeProvider' + +// Components +import Loading from '../components/loading' +import BraveTodayLoadingCard from '../components/default/braveToday/cards/cardLoading' +import BraveTodayErrorCard from '../components/default/braveToday/cards/cardError' +import PublisherMeta from '../components/default/braveToday/cards/PublisherMeta' + +function ThemeProvider ({ story }: any) { + const themeName = select( + 'Theme', + { ['Light']: 'Light', ['Dark']: 'Dark' }, + 'Light' + ) + console.log('theme', themeName) + return ( + + {story} + + ) +} + +const onClick = (() => alert('clicked')) + +storiesOf('New Tab', module) + .addDecorator(withKnobs) + .addDecorator(story => ) + .add('Loading', () => ( +
+ +
+ )) + +storiesOf('New Tab/Brave Today', module) + .addDecorator(withKnobs) + .addDecorator(story => ) + .addDecorator(story => ( +
+ {story()} +
+ )) + .add('Publisher', () => ( + <> + + + + )) + .add('Loading', () => ( + + )) + .add('Error', () => ( + + )) diff --git a/components/brave_new_tab_ui/stories/default.tsx b/components/brave_new_tab_ui/stories/default.tsx index 021ec7999805..57bfd9bfd527 100644 --- a/components/brave_new_tab_ui/stories/default.tsx +++ b/components/brave_new_tab_ui/stories/default.tsx @@ -14,9 +14,6 @@ import BraveCoreThemeProvider from '../../common/BraveCoreThemeProvider' // Components import NewTabPage from '../containers/newTab' import { getActionsForDispatch } from '../api/getActions' -import Loading from '../components/loading' -import BraveTodayLoadingCard from '../components/default/braveToday/cards/cardLoading' -import BraveTodayErrorCard from '../components/default/braveToday/cards/cardError' import store from '../store' import { getNewTabData, getGridSitesData } from './default/data/storybookState' import getTodayState from './default/data/todayStorybookState' @@ -99,37 +96,3 @@ storiesOf('New Tab/Containers', module) /> ) }) - -storiesOf('New Tab', module) - .addDecorator(story => ) - .add('Loading', () => ( -
- -
- )) - -storiesOf('New Tab/Brave Today', module) - .addDecorator(story => ) - .addDecorator(story => ( -
- {story()} -
- )) - .add('Loading', () => ( - - )) - .add('Error', () => ( - - )) diff --git a/components/brave_new_tab_ui/stories/default/data/todayStorybookState.ts b/components/brave_new_tab_ui/stories/default/data/todayStorybookState.ts index d05b7cb4b793..16ece7c070c5 100644 --- a/components/brave_new_tab_ui/stories/default/data/todayStorybookState.ts +++ b/components/brave_new_tab_ui/stories/default/data/todayStorybookState.ts @@ -478,7 +478,7 @@ export default function getTodayState (): BraveTodayState { ] }, itemsByPublisher: { - name: `b660f244778a8b1d29181ab480611eb5ce64427ae536a83add1a524481128788`, + name: `5eece347713f329f156cd0204cf9b12629f1dc8f4ea3c1b67984cfbfd66cdca5`, items: [ { category: `Top News`, diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd index f5e15029db2a..776c63c3d092 100644 --- a/components/resources/brave_components_strings.grd +++ b/components/resources/brave_components_strings.grd @@ -242,6 +242,9 @@ Sources + + Disable content from $1The New York Times + Brave Stats Clock From 2b02a3821d9e36cac7545236c418a213ff47b106 Mon Sep 17 00:00:00 2001 From: Pete Miller Date: Mon, 9 Nov 2020 22:16:35 -0800 Subject: [PATCH 3/3] Brave Today: typography finesse --- .../default/braveToday/cardIntro.ts | 7 ++++++- .../default/braveToday/cardSizes.ts | 21 ++++++++++++------- .../components/default/braveToday/default.ts | 10 ++++----- .../default/settings/navigateBack.tsx | 14 ++++++++----- .../newTab/settings/braveToday/index.tsx | 13 ++++++------ .../resources/brave_components_strings.grd | 4 ++-- 6 files changed, 42 insertions(+), 27 deletions(-) diff --git a/components/brave_new_tab_ui/components/default/braveToday/cardIntro.ts b/components/brave_new_tab_ui/components/default/braveToday/cardIntro.ts index 2c57ec935574..6ebdb580aafa 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/cardIntro.ts +++ b/components/brave_new_tab_ui/components/default/braveToday/cardIntro.ts @@ -25,4 +25,9 @@ export const Heading = styled(StandardHeading)` margin: 36px 0 24px; ` -export const Text = styled(StandardText)`` +export const Text = styled(StandardText)` + ${Intro} & { + font-weight: 500; + line-height: 20px; + } +` diff --git a/components/brave_new_tab_ui/components/default/braveToday/cardSizes.ts b/components/brave_new_tab_ui/components/default/braveToday/cardSizes.ts index f83899a5d4fc..62b2d0077d61 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/cardSizes.ts +++ b/components/brave_new_tab_ui/components/default/braveToday/cardSizes.ts @@ -9,18 +9,19 @@ import { Heading as StandardHeading, Image as StandardImage, Text as StandardText, - Time as StandardTime, + Time as StandardTime } from './default' export const Large = styled(StandardBlock.withComponent('article'))` padding: 0; ` -export const Medium = styled(Large)` +export const Medium = styled(StandardBlock.withComponent('article'))` padding: 0; ` -export const Small = styled(Large)` +export const Small = styled(StandardBlock.withComponent('article'))` + padding: 0; width: 100%; min-height: 310px; ` @@ -73,7 +74,7 @@ export const Image = styled(StandardImage)` ` export const Heading = styled(StandardHeading)` - font-weight: 500; + font-weight: 600; a { display: block; color: inherit; @@ -89,7 +90,7 @@ export const Text = styled(StandardText)` font-family: ${p => p.theme.fontFamily.heading}; font-size: 18px; line-height: 25px; - font-weight: 500; + font-weight: 600; a { display: block; @@ -98,11 +99,15 @@ export const Text = styled(StandardText)` } ` -export const Time = styled(StandardTime)`` +export const Time = styled(StandardTime)` + ${Large} & { + margin-top: 8px; + } +` export const Publisher = styled('div')` box-sizing: border-box; - margin: 12px 0 0 0; + margin: 10px 0 0 0; padding: 0; font: 500 14px ${p => p.theme.fontFamily.heading}; color: #fff; @@ -117,7 +122,7 @@ export const ContainerForTwo = styled<{}, 'div'>('div')` export const DealsCategory = styled('h3')` margin: 0; - font: 700 18px ${p => p.theme.fontFamily.heading}; + font: 600 18px ${p => p.theme.fontFamily.heading}; color: white; ` diff --git a/components/brave_new_tab_ui/components/default/braveToday/default.ts b/components/brave_new_tab_ui/components/default/braveToday/default.ts index 636223ed6b29..665c70f2405a 100644 --- a/components/brave_new_tab_ui/components/default/braveToday/default.ts +++ b/components/brave_new_tab_ui/components/default/braveToday/default.ts @@ -67,9 +67,9 @@ export const Image = styled('img')` display: block; ` -export const Text = styled<{}, 'p'>('p')` +export const Text = styled<{}, 'div'>('div')` box-sizing: border-box; - font-family: ${p => p.theme.fontFamily.body}; + font-family: ${p => p.theme.fontFamily.heading}; font-weight: normal; font-size: 14px; line-height: 19px; @@ -79,9 +79,9 @@ export const Text = styled<{}, 'p'>('p')` export const Heading = styled(Text.withComponent('h2'))` font-family: ${p => p.theme.fontFamily.heading}; - font-weight: bold; - font-size: 28px; - line-height: 36px; + font-weight: 600; + font-size: 22px; + line-height: 32px; ` export const Time = styled(Text.withComponent('time'))` diff --git a/components/brave_new_tab_ui/components/default/settings/navigateBack.tsx b/components/brave_new_tab_ui/components/default/settings/navigateBack.tsx index 14478f74ba95..bb3f7037ea7e 100644 --- a/components/brave_new_tab_ui/components/default/settings/navigateBack.tsx +++ b/components/brave_new_tab_ui/components/default/settings/navigateBack.tsx @@ -14,7 +14,8 @@ type Props = { const Back = styled('button')` appearance: none; - margin-bottom: 14px; + margin: 0 0 14px 0; + padding: 0; outline: none; border: none; background: none; @@ -25,12 +26,15 @@ const Back = styled('button')` color: inherit; font-weight: 800; - &:focus-visible { - outline: solid 1px ${p => p.theme.color.brandBrave}; + &:focus, + &:hover { + color: ${p => p.theme.color.brandBraveInteracting} } - &:active { - font-weight: 900; + color: ${p => p.theme.color.brandBraveActive} + } + &:focus-visible { + outline: solid 1px ${p => p.theme.color.brandBrave}; } ` diff --git a/components/brave_new_tab_ui/containers/newTab/settings/braveToday/index.tsx b/components/brave_new_tab_ui/containers/newTab/settings/braveToday/index.tsx index 91a1a6fe00b6..52b993dc92da 100644 --- a/components/brave_new_tab_ui/containers/newTab/settings/braveToday/index.tsx +++ b/components/brave_new_tab_ui/containers/newTab/settings/braveToday/index.tsx @@ -43,7 +43,7 @@ export default function BraveTodayPrefs (props: Props) { return ( - {!category && <> + {!category && ( Show Brave Today - -
-