Storybook: upgrade to v6
core-js added to fix a build reference issue
This commit is contained in:
Pete Miller
+2
-1
@@ -3,6 +3,7 @@
|
||||
"@babel/preset-react"
|
||||
],
|
||||
"plugins": [
|
||||
"@babel/plugin-proposal-object-rest-spread"
|
||||
"@babel/plugin-proposal-object-rest-spread",
|
||||
"@babel/plugin-syntax-dynamic-import"
|
||||
]
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
/* 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/. */
|
||||
|
||||
// for docs see https://github.com/echoulen/storybook-addon-styled-component-theme
|
||||
import 'storybook-addon-styled-component-theme/dist/register'
|
||||
|
||||
// for docs see https://www.npmjs.com/package/@storybook/addon-backgrounds
|
||||
import '@storybook/addon-backgrounds/register'
|
||||
|
||||
// for docs see https://github.com/storybooks/storybook/tree/master/addons/actions
|
||||
import '@storybook/addon-actions/register'
|
||||
|
||||
// for docs see https://github.com/storybooks/storybook/tree/master/addons/knobs
|
||||
import '@storybook/addon-knobs/register'
|
||||
|
||||
// for docs see https://github.com/storybooks/storybook/tree/master/addons/options
|
||||
import '@storybook/addon-options/register'
|
||||
|
||||
// for docs see https://github.com/dump247/storybook-state
|
||||
// this addon is surfacing in every panel ATM. this is a bug. track it here:
|
||||
// https://github.com/dump247/storybook-state/pull/12
|
||||
// import '@dump247/storybook-state/register'
|
||||
@@ -1,50 +0,0 @@
|
||||
import 'emptykit.css'
|
||||
import { configure, addDecorator, addParameters } from '@storybook/react'
|
||||
import { initLocale } from 'brave-ui/helpers'
|
||||
import locale from './locale'
|
||||
import { withThemesProvider } from 'storybook-addon-styled-component-theme'
|
||||
import DarkTheme from 'brave-ui/theme/brave-dark'
|
||||
import DefaultTheme from 'brave-ui/theme/brave-default'
|
||||
|
||||
// Fonts
|
||||
import '../ui/webui/resources/fonts/muli.css'
|
||||
import '../ui/webui/resources/fonts/poppins.css'
|
||||
|
||||
const themes = [DefaultTheme, DarkTheme]
|
||||
addDecorator(withThemesProvider(themes))
|
||||
|
||||
addParameters({
|
||||
backgrounds: [
|
||||
{ name: 'Neutral300', value: '#DEE2E6', default: true },
|
||||
{ name: 'Grey700', value: '#5E6175' },
|
||||
{ name: 'White', value: '#FFF' },
|
||||
{ name: 'Grey900', value: '#1E2029' }
|
||||
]
|
||||
})
|
||||
|
||||
addParameters({
|
||||
options: {
|
||||
name: 'Brave Browser UI',
|
||||
url: 'https://github.com/brave/brave-core',
|
||||
panelPosition: 'right'
|
||||
}
|
||||
})
|
||||
|
||||
function loadStories() {
|
||||
initLocale(locale)
|
||||
window.loadTimeData = {
|
||||
getString (key) {
|
||||
return locale[key] || key
|
||||
},
|
||||
getBoolean (key) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
chrome.extension = {
|
||||
inIncognitoContext: false
|
||||
}
|
||||
const req = require.context('../components/', true, /\/stories\/.*\.tsx$/)
|
||||
req.keys().forEach(filename => req(filename))
|
||||
}
|
||||
|
||||
configure(loadStories, module)
|
||||
@@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
stories: ['../components/**/stories/*.tsx'],
|
||||
addons: [
|
||||
'@storybook/addon-knobs',
|
||||
'@storybook/addon-essentials'
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { addons } from '@storybook/addons'
|
||||
import { create } from '@storybook/theming'
|
||||
|
||||
const braveTheme = create({
|
||||
base: 'dark',
|
||||
brandTitle: 'Brave Browser UI',
|
||||
brandUrl: 'https://github.com/brave/brave-core'
|
||||
})
|
||||
|
||||
addons.setConfig({
|
||||
isFullscreen: false,
|
||||
showNav: true,
|
||||
showPanel: true,
|
||||
panelPosition: 'right',
|
||||
theme: braveTheme
|
||||
})
|
||||
@@ -0,0 +1,42 @@
|
||||
import 'emptykit.css'
|
||||
import * as React from 'react'
|
||||
import { withKnobs, boolean } from '@storybook/addon-knobs'
|
||||
import { addParameters } from '@storybook/react'
|
||||
import { initLocale } from 'brave-ui/helpers'
|
||||
import locale from './locale'
|
||||
import ThemeProvider from '../components/common/StorybookThemeProvider'
|
||||
|
||||
// Fonts
|
||||
import '../ui/webui/resources/fonts/muli.css'
|
||||
import '../ui/webui/resources/fonts/poppins.css'
|
||||
|
||||
export const parameters = {
|
||||
backgrounds: {
|
||||
default: 'Neutral300',
|
||||
values: [
|
||||
{ name: 'Neutral300', value: '#DEE2E6' },
|
||||
{ name: 'Grey700', value: '#5E6175' },
|
||||
{ name: 'White', value: '#FFF' },
|
||||
{ name: 'Grey900', value: '#1E2029' }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
initLocale(locale)
|
||||
window.loadTimeData = {
|
||||
getString (key) {
|
||||
return locale[key] || key
|
||||
},
|
||||
getBoolean (key) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
chrome.extension = {
|
||||
inIncognitoContext: false
|
||||
}
|
||||
|
||||
export const decorators = [
|
||||
(Story) => <div dir={boolean('rtl?', false) ? 'rtl' : ''}><Story /></div>,
|
||||
(Story, context) => <ThemeProvider darkTheme={context.args.darkTheme} lightTheme={context.args.lightTheme}><Story /></ThemeProvider>,
|
||||
withKnobs
|
||||
]
|
||||
@@ -1,12 +1,5 @@
|
||||
const path = require('path')
|
||||
|
||||
const createStyledComponentsTransformer = require('typescript-plugin-styled-components')
|
||||
.default
|
||||
|
||||
function getStyledComponentDisplay (filename, bindingName) {
|
||||
return bindingName
|
||||
}
|
||||
|
||||
// Export a function. Accept the base config as the only param.
|
||||
module.exports = async ({ config, mode }) => {
|
||||
// Make whatever fine-grained changes you need
|
||||
@@ -17,15 +10,7 @@ module.exports = async ({ config, mode }) => {
|
||||
options: {
|
||||
configFile: path.resolve(__dirname, '..', 'tsconfig-storybook.json'),
|
||||
allowTsInNodeModules: true,
|
||||
getCustomTransformers: () => ({
|
||||
before: [
|
||||
createStyledComponentsTransformer({
|
||||
options: {
|
||||
getDisplayName: getStyledComponentDisplay
|
||||
}
|
||||
})
|
||||
]
|
||||
})
|
||||
getCustomTransformers: path.join(__dirname, '../components/webpack/webpack-ts-transformers.js'),
|
||||
}
|
||||
})
|
||||
config.module.rules.push({
|
||||
|
||||
+2
-2
@@ -5,8 +5,8 @@
|
||||
import * as React from 'react'
|
||||
|
||||
// Components group
|
||||
import SimpleView from './components/simpleView'
|
||||
import AdvancedView from './components/advancedView'
|
||||
import SimpleView from './simpleView'
|
||||
import AdvancedView from './advancedView'
|
||||
|
||||
interface Props {
|
||||
enabled: boolean
|
||||
@@ -3,26 +3,25 @@
|
||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import * as React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import { boolean, number } from '@storybook/addon-knobs'
|
||||
import { withState } from '@dump247/storybook-state'
|
||||
import shieldsLightTheme from '../theme/shields-light'
|
||||
import shieldsDarkTheme from '../theme/shields-dark'
|
||||
import { withThemesProvider } from 'storybook-addon-styled-component-theme'
|
||||
// @ts-ignore
|
||||
import { withKnobs, boolean, number } from '@storybook/addon-knobs'
|
||||
import { withState } from '@dump247/storybook-state'
|
||||
import favicon from './images/fake_favicon.png'
|
||||
|
||||
// Components
|
||||
import Shields from './index'
|
||||
import Shields from './components/index'
|
||||
import ShieldsReadOnlyView from './components/readOnlyView'
|
||||
|
||||
// Themes
|
||||
const themes = [shieldsLightTheme, shieldsDarkTheme]
|
||||
export default {
|
||||
title: 'Shields',
|
||||
args: {
|
||||
darkTheme: shieldsDarkTheme,
|
||||
lightTheme: shieldsLightTheme
|
||||
}
|
||||
}
|
||||
|
||||
storiesOf('Shields', module)
|
||||
.addDecorator(withThemesProvider(themes))
|
||||
.addDecorator(withKnobs)
|
||||
.add('Panel', withState({ enabled: true, advancedView: false, readOnlyView: false, firstAccess: true }, (store) => {
|
||||
export const Panel = withState(
|
||||
{ enabled: true, advancedView: false, readOnlyView: false, firstAccess: true },
|
||||
(store) => {
|
||||
const fakeOnChangeShieldsEnabled = () => {
|
||||
store.set({ enabled: !store.state.enabled })
|
||||
}
|
||||
@@ -37,32 +36,30 @@ storiesOf('Shields', module)
|
||||
}
|
||||
return (
|
||||
<div style={{ margin: '120px' }}>
|
||||
{
|
||||
store.state.readOnlyView
|
||||
? (
|
||||
<ShieldsReadOnlyView
|
||||
favicon={favicon}
|
||||
hostname={'buzzfeed.com'}
|
||||
onClose={fakeOnChangeReadOnlyView}
|
||||
/>
|
||||
) : (
|
||||
<Shields
|
||||
enabled={boolean('Enabled?', store.state.enabled)}
|
||||
firstAccess={boolean('First Access?', store.state.firstAccess)}
|
||||
favicon={favicon}
|
||||
hostname={'buzzfeed.com'}
|
||||
advancedView={boolean('Show advanced view?', store.state.advancedView)}
|
||||
adsTrackersBlocked={number('3rd-party trackers blocked', 80) || 0}
|
||||
httpsUpgrades={number('Connections upgraded to HTTPS', 0) || 0}
|
||||
scriptsBlocked={number('Scripts blocked', 11) || 0}
|
||||
fingerprintingBlocked={number('3rd-party fingerprinting blocked', 0) || 0}
|
||||
fakeOnChangeShieldsEnabled={fakeOnChangeShieldsEnabled}
|
||||
fakeOnChangeAdvancedView={fakeOnChangeAdvancedView}
|
||||
fakeOnChangeReadOnlyView={fakeOnChangeReadOnlyView}
|
||||
fakeToggleFirstAccess={fakeToggleFirstAccess}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{store.state.readOnlyView ? (
|
||||
<ShieldsReadOnlyView
|
||||
favicon={favicon}
|
||||
hostname={'buzzfeed.com'}
|
||||
onClose={fakeOnChangeReadOnlyView}
|
||||
/>
|
||||
) : (
|
||||
<Shields
|
||||
enabled={boolean('Enabled?', store.state.enabled)}
|
||||
firstAccess={boolean('First Access?', store.state.firstAccess)}
|
||||
favicon={favicon}
|
||||
hostname={'buzzfeed.com'}
|
||||
advancedView={boolean('Show advanced view?', store.state.advancedView)}
|
||||
adsTrackersBlocked={number('3rd-party trackers blocked', 80) || 0}
|
||||
httpsUpgrades={number('Connections upgraded to HTTPS', 0) || 0}
|
||||
scriptsBlocked={number('Scripts blocked', 11) || 0}
|
||||
fingerprintingBlocked={number('3rd-party fingerprinting blocked', 0) || 0}
|
||||
fakeOnChangeShieldsEnabled={fakeOnChangeShieldsEnabled}
|
||||
fakeOnChangeAdvancedView={fakeOnChangeAdvancedView}
|
||||
fakeOnChangeReadOnlyView={fakeOnChangeReadOnlyView}
|
||||
fakeToggleFirstAccess={fakeToggleFirstAccess}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}))
|
||||
}
|
||||
)
|
||||
|
||||
@@ -1,101 +1,26 @@
|
||||
// Copyright (c) 2020 The Brave Authors. All rights reserved.
|
||||
// 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'
|
||||
import Theme from 'brave-ui/theme/brave-default'
|
||||
import DarkTheme from 'brave-ui/theme/brave-dark'
|
||||
import BraveCoreThemeProvider from '../../common/BraveCoreThemeProvider'
|
||||
|
||||
import { withKnobs } from '@storybook/addon-knobs'
|
||||
import ThemeProvider from '../../common/StorybookThemeProvider'
|
||||
// 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'
|
||||
import LoadingComponent from '../components/loading'
|
||||
|
||||
function ThemeProvider ({ story }: any) {
|
||||
const themeName = select(
|
||||
'Theme',
|
||||
{ ['Light']: 'Light', ['Dark']: 'Dark' },
|
||||
'Light'
|
||||
)
|
||||
console.log('theme', themeName)
|
||||
return (
|
||||
<BraveCoreThemeProvider
|
||||
dark={DarkTheme}
|
||||
light={Theme}
|
||||
initialThemeType={themeName as chrome.braveTheme.ThemeType}
|
||||
>
|
||||
{story}
|
||||
</BraveCoreThemeProvider>
|
||||
)
|
||||
export default {
|
||||
title: 'New Tab',
|
||||
decorators: [
|
||||
(Story: any) => <ThemeProvider><Story /></ThemeProvider>,
|
||||
withKnobs
|
||||
]
|
||||
}
|
||||
|
||||
const onClick = (() => alert('clicked'))
|
||||
|
||||
storiesOf('New Tab', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(story => <ThemeProvider story={story()} />)
|
||||
.add('Loading', () => (
|
||||
<div
|
||||
style={{ width: '500px', height: '500px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
|
||||
>
|
||||
<Loading />
|
||||
</div>
|
||||
))
|
||||
|
||||
storiesOf('New Tab/Brave Today', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(story => <ThemeProvider story={story()} />)
|
||||
.addDecorator(story => (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
fontFamily: 'Poppins',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '20px',
|
||||
width: '100%',
|
||||
minHeight: '100vh',
|
||||
background: 'url(https://placekitten.com/2000/3000)',
|
||||
backgroundSize: 'contain',
|
||||
color: 'pink',
|
||||
fontSize: '22px',
|
||||
fontWeight: 600
|
||||
}}
|
||||
>
|
||||
{story()}
|
||||
</div>
|
||||
))
|
||||
.add('Publisher', () => (
|
||||
<>
|
||||
<PublisherMeta
|
||||
publisher={{
|
||||
publisher_id: '123abc',
|
||||
publisher_name: text('Publisher Name', 'small'),
|
||||
category: 'Top News',
|
||||
enabled: true,
|
||||
user_enabled: null
|
||||
}}
|
||||
onSetPublisherPref={onClick}
|
||||
/>
|
||||
<PublisherMeta
|
||||
publisher={{
|
||||
publisher_id: '123abcdef',
|
||||
publisher_name: text('Publisher Name 2', 'The Miller Chronicle'),
|
||||
category: 'Top News',
|
||||
enabled: true,
|
||||
user_enabled: null
|
||||
}}
|
||||
onSetPublisherPref={onClick}
|
||||
/>
|
||||
</>
|
||||
))
|
||||
.add('Loading', () => (
|
||||
<BraveTodayLoadingCard />
|
||||
))
|
||||
.add('Error', () => (
|
||||
<BraveTodayErrorCard />
|
||||
))
|
||||
export const Loading = () => (
|
||||
<div
|
||||
style={{ width: '500px', height: '500px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
|
||||
>
|
||||
<LoadingComponent />
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,98 +0,0 @@
|
||||
/* 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 { Dispatch } from 'redux'
|
||||
import { Provider as ReduxProvider } from 'react-redux'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import { withKnobs, select, boolean } from '@storybook/addon-knobs'
|
||||
import Theme from 'brave-ui/theme/brave-default'
|
||||
import DarkTheme from 'brave-ui/theme/brave-dark'
|
||||
import BraveCoreThemeProvider from '../../common/BraveCoreThemeProvider'
|
||||
|
||||
// Components
|
||||
import NewTabPage from '../containers/newTab'
|
||||
import { getActionsForDispatch } from '../api/getActions'
|
||||
import store from '../store'
|
||||
import { getNewTabData, getGridSitesData } from './default/data/storybookState'
|
||||
import getTodayState from './default/data/todayStorybookState'
|
||||
|
||||
const doNothingDispatch: Dispatch = (action: any) => action
|
||||
|
||||
function getActions () {
|
||||
return getActionsForDispatch(doNothingDispatch)
|
||||
}
|
||||
|
||||
// TODO(petemill): privateCDN should be in /common/
|
||||
import { getUnpaddedAsDataUrl } from '../../brave_extension/extension/brave_extension/background/today/privateCDN'
|
||||
|
||||
// @ts-ignore
|
||||
window.braveStorybookUnpadUrl = async function UnpadUrl (paddedUrl: string, mimeType = 'image/jpg'): Promise<string> {
|
||||
const response = await fetch(paddedUrl)
|
||||
const blob = await response.blob()
|
||||
// @ts-ignore (Blob.arrayBuffer does exist)
|
||||
const buffer = await blob.arrayBuffer()
|
||||
const dataUrl = await getUnpaddedAsDataUrl(buffer, mimeType)
|
||||
return dataUrl
|
||||
}
|
||||
|
||||
function ThemeProvider ({ story }: any) {
|
||||
return (
|
||||
<BraveCoreThemeProvider
|
||||
dark={DarkTheme}
|
||||
light={Theme}
|
||||
initialThemeType={select(
|
||||
'Theme',
|
||||
{ ['Light']: 'Light', ['Dark']: 'Dark' },
|
||||
'Light'
|
||||
)}
|
||||
>
|
||||
{story}
|
||||
</BraveCoreThemeProvider>
|
||||
)
|
||||
}
|
||||
|
||||
function StoreProvider ({ story }: any) {
|
||||
return (
|
||||
<ReduxProvider store={store}>
|
||||
{story}
|
||||
</ReduxProvider>
|
||||
)
|
||||
}
|
||||
|
||||
function dismissBraveTodayIntroCard () {
|
||||
console.log('brave today intro card dismissed')
|
||||
}
|
||||
|
||||
storiesOf('New Tab/Containers', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(story => <div dir={boolean('rtl?', false) ? 'rtl' : ''}>{story()}</div>)
|
||||
.addDecorator(story => <StoreProvider story={story()} />)
|
||||
.addDecorator(story => <ThemeProvider story={story()} />)
|
||||
.add('Default', () => {
|
||||
const doNothing = (value: boolean) => value
|
||||
const state = store.getState()
|
||||
const newTabData = getNewTabData(state.newTabData)
|
||||
const gridSitesData = getGridSitesData(state.gridSitesData)
|
||||
const todayState = getTodayState()
|
||||
return (
|
||||
<NewTabPage
|
||||
newTabData={newTabData}
|
||||
todayData={todayState}
|
||||
gridSitesData={gridSitesData}
|
||||
actions={getActions()}
|
||||
saveShowBackgroundImage={doNothing}
|
||||
saveShowStats={doNothing}
|
||||
saveShowToday={doNothing}
|
||||
saveShowRewards={doNothing}
|
||||
saveShowBinance={doNothing}
|
||||
saveShowTogether={doNothing}
|
||||
saveShowGemini={doNothing}
|
||||
saveShowCryptoDotCom={doNothing}
|
||||
saveBrandedWallpaperOptIn={doNothing}
|
||||
onReadBraveTodayIntroCard={dismissBraveTodayIntroCard}
|
||||
saveSetAllStackWidgets={doNothing}
|
||||
/>
|
||||
)
|
||||
})
|
||||
@@ -1,9 +1,9 @@
|
||||
import wallpaperImageUrl from '../../../../img/newtab/dummy-branded-wallpaper/background-1.jpg'
|
||||
import brandingImageUrl from '../../../../img/newtab/dummy-branded-wallpaper/logo.png'
|
||||
|
||||
export default {
|
||||
wallpaperImageUrl,
|
||||
const dummyWallpaper: NewTab.BrandedWallpaper = {
|
||||
isSponsored: true,
|
||||
wallpaperImageUrl,
|
||||
creativeInstanceId: '12345abcde',
|
||||
wallpaperId: 'abcde12345',
|
||||
logo: {
|
||||
@@ -13,3 +13,5 @@ export default {
|
||||
destinationUrl: 'https://brave.com'
|
||||
}
|
||||
}
|
||||
|
||||
export default dummyWallpaper
|
||||
|
||||
@@ -34,7 +34,7 @@ function generateTopSites (topSites: typeof defaultTopSitesData) {
|
||||
return staticTopSites
|
||||
}
|
||||
|
||||
function shouldShowBrandedWallpaperData (shouldShow: boolean) {
|
||||
function shouldShowBrandedWallpaperData (shouldShow: boolean): NewTab.BrandedWallpaper {
|
||||
if (shouldShow === false) {
|
||||
return {
|
||||
wallpaperImageUrl: '',
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
/* 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, boolean } from '@storybook/addon-knobs'
|
||||
|
||||
// Components
|
||||
import NewPrivateTab from './private/index'
|
||||
|
||||
storiesOf('New Tab/Private', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('Private Window', () => {
|
||||
return (
|
||||
<NewPrivateTab
|
||||
isQwant={boolean('Is Qwant?', false)}
|
||||
isTor={boolean('Enable Tor?', false)}
|
||||
/>
|
||||
)
|
||||
})
|
||||
.add('Qwant Window', () => {
|
||||
return (
|
||||
<NewPrivateTab
|
||||
isQwant={boolean('Is Qwant?', true)}
|
||||
isTor={boolean('Enable Tor?', false)}
|
||||
/>
|
||||
)
|
||||
})
|
||||
.add('Qwant Tor', () => {
|
||||
return (
|
||||
<NewPrivateTab
|
||||
isQwant={boolean('Is Qwant?', true)}
|
||||
isTor={boolean('Enable Tor?', true)}
|
||||
/>
|
||||
)
|
||||
})
|
||||
.add('Tor Window', () => {
|
||||
return (
|
||||
<NewPrivateTab
|
||||
isQwant={boolean('Is Qwant?', false)}
|
||||
isTor={boolean('Enable Tor?', true)}
|
||||
/>
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,37 @@
|
||||
/* 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 { boolean } from '@storybook/addon-knobs'
|
||||
|
||||
// Components
|
||||
import NewPrivateTab from './privateNTP/index'
|
||||
|
||||
export default {
|
||||
title: 'New Tab/PrivateNTP'
|
||||
}
|
||||
|
||||
export const PrivateWindow = () => {
|
||||
return (
|
||||
<NewPrivateTab isQwant={boolean('Is Qwant?', false)} isTor={boolean('Enable Tor?', false)} />
|
||||
)
|
||||
}
|
||||
|
||||
export const QwantWindow = () => {
|
||||
return (
|
||||
<NewPrivateTab isQwant={boolean('Is Qwant?', true)} isTor={boolean('Enable Tor?', false)} />
|
||||
)
|
||||
}
|
||||
|
||||
export const QwantTor = () => {
|
||||
return (
|
||||
<NewPrivateTab isQwant={boolean('Is Qwant?', true)} isTor={boolean('Enable Tor?', true)} />
|
||||
)
|
||||
}
|
||||
|
||||
export const TorWindow = () => {
|
||||
return (
|
||||
<NewPrivateTab isQwant={boolean('Is Qwant?', false)} isTor={boolean('Enable Tor?', true)} />
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
/* 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 { Dispatch } from 'redux'
|
||||
import { Provider as ReduxProvider } from 'react-redux'
|
||||
// Components
|
||||
import NewTabPage from '../containers/newTab'
|
||||
import { getActionsForDispatch } from '../api/getActions'
|
||||
import store from '../store'
|
||||
import { getNewTabData, getGridSitesData } from './default/data/storybookState'
|
||||
import getTodayState from './default/data/todayStorybookState'
|
||||
|
||||
const doNothingDispatch: Dispatch = (action: any) => action
|
||||
|
||||
function getActions () {
|
||||
return getActionsForDispatch(doNothingDispatch)
|
||||
}
|
||||
|
||||
// TODO(petemill): privateCDN should be in /common/
|
||||
import { getUnpaddedAsDataUrl } from '../../brave_extension/extension/brave_extension/background/today/privateCDN'
|
||||
|
||||
// @ts-ignore
|
||||
window.braveStorybookUnpadUrl = async function UnpadUrl (paddedUrl: string, mimeType = 'image/jpg'): Promise<string> {
|
||||
const response = await fetch(paddedUrl)
|
||||
const blob = await response.blob()
|
||||
// @ts-ignore (Blob.arrayBuffer does exist)
|
||||
const buffer = await blob.arrayBuffer()
|
||||
const dataUrl = await getUnpaddedAsDataUrl(buffer, mimeType)
|
||||
return dataUrl
|
||||
}
|
||||
|
||||
const StoreProvider: React.FunctionComponent = ({ children }) => {
|
||||
return (
|
||||
<ReduxProvider store={store}>
|
||||
{children}
|
||||
</ReduxProvider>
|
||||
)
|
||||
}
|
||||
|
||||
function dismissBraveTodayIntroCard () {
|
||||
console.log('brave today intro card dismissed')
|
||||
}
|
||||
|
||||
export default {
|
||||
title: 'New Tab',
|
||||
decorators: [
|
||||
(Story: any) => <StoreProvider><Story /></StoreProvider>
|
||||
]
|
||||
}
|
||||
|
||||
export const Regular = () => {
|
||||
const doNothing = (value: boolean) => value
|
||||
const state = store.getState()
|
||||
const newTabData = getNewTabData(state.newTabData)
|
||||
const gridSitesData = getGridSitesData(state.gridSitesData)
|
||||
const todayState = getTodayState()
|
||||
return (
|
||||
<NewTabPage
|
||||
newTabData={newTabData}
|
||||
todayData={todayState}
|
||||
gridSitesData={gridSitesData}
|
||||
actions={getActions()}
|
||||
saveShowBackgroundImage={doNothing}
|
||||
saveShowStats={doNothing}
|
||||
saveShowToday={doNothing}
|
||||
saveShowRewards={doNothing}
|
||||
saveShowBinance={doNothing}
|
||||
saveShowTogether={doNothing}
|
||||
saveShowGemini={doNothing}
|
||||
saveShowCryptoDotCom={doNothing}
|
||||
saveBrandedWallpaperOptIn={doNothing}
|
||||
saveSetAllStackWidgets={doNothing}
|
||||
onReadBraveTodayIntroCard={dismissBraveTodayIntroCard}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
// Copyright (c) 2020 The Brave Authors. All rights reserved.
|
||||
// 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 { withKnobs, text } from '@storybook/addon-knobs'
|
||||
import ThemeProvider from '../../common/StorybookThemeProvider'
|
||||
// Components
|
||||
import BraveTodayLoadingCard from '../components/default/braveToday/cards/cardLoading'
|
||||
import BraveTodayErrorCard from '../components/default/braveToday/cards/cardError'
|
||||
import PublisherMeta from '../components/default/braveToday/cards/PublisherMeta'
|
||||
|
||||
const onClick = (() => alert('clicked'))
|
||||
|
||||
export default {
|
||||
title: 'New Tab/Brave Today',
|
||||
decorators: [
|
||||
(Story: any) => <ThemeProvider><Story /></ThemeProvider>,
|
||||
(Story: any) => (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
fontFamily: 'Poppins',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '20px',
|
||||
width: '100%',
|
||||
minHeight: '100vh',
|
||||
background: 'url(https://placekitten.com/2000/3000)',
|
||||
backgroundSize: 'contain',
|
||||
color: 'pink',
|
||||
fontSize: '22px',
|
||||
fontWeight: 600
|
||||
}}
|
||||
>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
withKnobs
|
||||
]
|
||||
}
|
||||
|
||||
export const Publisher = () => (
|
||||
<>
|
||||
<PublisherMeta
|
||||
publisher={{
|
||||
publisher_id: '123abc',
|
||||
publisher_name: text('Publisher Name', 'small'),
|
||||
category: 'Top News',
|
||||
enabled: true,
|
||||
user_enabled: null
|
||||
}}
|
||||
onSetPublisherPref={onClick}
|
||||
/>
|
||||
<PublisherMeta
|
||||
publisher={{
|
||||
publisher_id: '123abcdef',
|
||||
publisher_name: text('Publisher Name 2', 'The Miller Chronicle'),
|
||||
category: 'Top News',
|
||||
enabled: true,
|
||||
user_enabled: null
|
||||
}}
|
||||
onSetPublisherPref={onClick}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
||||
export const Loading = () => (
|
||||
<BraveTodayLoadingCard />
|
||||
)
|
||||
|
||||
export const Error = () => (
|
||||
<BraveTodayErrorCard />
|
||||
)
|
||||
@@ -3,9 +3,7 @@
|
||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import * as React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import { withKnobs, text, select } from '@storybook/addon-knobs'
|
||||
import centered from '@storybook/addon-centered'
|
||||
import { text, select } from '@storybook/addon-knobs'
|
||||
|
||||
// Components
|
||||
import GrantClaim from '../components/grantClaim'
|
||||
@@ -20,61 +18,84 @@ const dummyClick = () => {
|
||||
console.log(dummyClick)
|
||||
}
|
||||
|
||||
storiesOf('Rewards/Grant', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(centered)
|
||||
.add('Grant claim', () => {
|
||||
return (
|
||||
<GrantClaim
|
||||
type={select<any>('Type', { ugp: 'ugp', ads: 'ads' }, 'ugp')}
|
||||
onClaim={dummyClick}
|
||||
export default {
|
||||
title: 'Rewards/Grant',
|
||||
parameters: {
|
||||
layout: 'centered'
|
||||
}
|
||||
}
|
||||
|
||||
export const _GrantClaim = () => {
|
||||
return (
|
||||
<GrantClaim
|
||||
type={select<any>('Type', { ugp: 'ugp', ads: 'ads' }, 'ugp')}
|
||||
onClaim={dummyClick}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
_GrantClaim.story = {
|
||||
name: 'Grant claim'
|
||||
}
|
||||
|
||||
export const _GrantWrapper = () => {
|
||||
return (
|
||||
<div style={{ width: '373px', height: '715px', position: 'relative' }}>
|
||||
<GrantWrapper
|
||||
onClose={dummyClick}
|
||||
title={text('Title', 'Good news!')}
|
||||
text={text(
|
||||
'Text',
|
||||
'Free 30 BAT have been awarded to you so you can support more publishers.'
|
||||
)}
|
||||
>
|
||||
Content here
|
||||
</GrantWrapper>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
_GrantWrapper.story = {
|
||||
name: 'Grant wrapper'
|
||||
}
|
||||
|
||||
export const _GrantCaptcha = () => {
|
||||
return (
|
||||
<div style={{ width: '373px', height: '715px', position: 'relative' }}>
|
||||
<GrantCaptcha onSolution={dummyClick} captchaImage={captchaDrop} hint={'blue'} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
_GrantCaptcha.story = {
|
||||
name: 'Grant captcha'
|
||||
}
|
||||
|
||||
export const _GrantComplete = () => {
|
||||
return (
|
||||
<div style={{ width: '373px', height: '715px', position: 'relative' }}>
|
||||
<GrantComplete
|
||||
onClose={dummyClick}
|
||||
amount={'30.0'}
|
||||
date={text('Date', '8/15/2018')}
|
||||
tokenTitle={'Free token grant'}
|
||||
/>
|
||||
)
|
||||
})
|
||||
.add('Grant wrapper', () => {
|
||||
return (
|
||||
<div style={{ width: '373px', height: '715px', position: 'relative' }}>
|
||||
<GrantWrapper
|
||||
onClose={dummyClick}
|
||||
title={text('Title', 'Good news!')}
|
||||
text={text('Text', 'Free 30 BAT have been awarded to you so you can support more publishers.')}
|
||||
>
|
||||
Content here
|
||||
</GrantWrapper>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
.add('Grant captcha', () => {
|
||||
return (
|
||||
<div style={{ width: '373px', height: '715px', position: 'relative' }}>
|
||||
<GrantCaptcha
|
||||
onSolution={dummyClick}
|
||||
captchaImage={captchaDrop}
|
||||
hint={'blue'}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
.add('Grant complete', () => {
|
||||
return (
|
||||
<div style={{ width: '373px', height: '715px', position: 'relative' }}>
|
||||
<GrantComplete
|
||||
onClose={dummyClick}
|
||||
amount={'30.0'}
|
||||
date={text('Date', '8/15/2018')}
|
||||
tokenTitle={'Free token grant'}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
.add('Grant Error', () => {
|
||||
return (
|
||||
<div style={{ width: '373px', height: '250px', position: 'relative', background: '#fff' }}>
|
||||
<GrantError
|
||||
onButtonClick={dummyClick}
|
||||
buttonText={'ok'}
|
||||
text={'The period for claiming this grant has ended'}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
_GrantComplete.story = {
|
||||
name: 'Grant complete'
|
||||
}
|
||||
|
||||
export const _GrantError = () => {
|
||||
return (
|
||||
<div style={{ width: '373px', height: '250px', position: 'relative', background: '#fff' }}>
|
||||
<GrantError
|
||||
onButtonClick={dummyClick}
|
||||
buttonText={'ok'}
|
||||
text={'The period for claiming this grant has ended'}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,334 @@
|
||||
/* 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 { withState } from '@dump247/storybook-state'
|
||||
import { boolean, select, text, object, number } from '@storybook/addon-knobs'
|
||||
// Components
|
||||
import {
|
||||
Box,
|
||||
DisabledContent,
|
||||
Alert,
|
||||
MainToggle,
|
||||
Donate,
|
||||
List,
|
||||
ListToken,
|
||||
Tokens,
|
||||
Profile,
|
||||
Amount,
|
||||
ToggleTips,
|
||||
Tooltip,
|
||||
MediaBox,
|
||||
Tab
|
||||
} from '../components'
|
||||
|
||||
import { BatColorIcon, SettingsIcon, UpholdColorIcon } from 'brave-ui/components/icons'
|
||||
import GrantClaim from '../components/grantClaim'
|
||||
|
||||
const favicon = require('./img/brave-favicon.png')
|
||||
|
||||
const dummyClick = () => {
|
||||
console.log(dummyClick)
|
||||
}
|
||||
|
||||
const donationAmounts = [
|
||||
{ tokens: '1.0', converted: '0.30', selected: false },
|
||||
{ tokens: '5.0', converted: '1.50', selected: false },
|
||||
{ tokens: '10.0', converted: '3.00', selected: false }
|
||||
]
|
||||
|
||||
export default {
|
||||
title: 'Rewards/Other/Desktop',
|
||||
parameters: {
|
||||
layout: 'centered'
|
||||
}
|
||||
}
|
||||
|
||||
// storiesOf('Rewards/Other/Desktop', module)
|
||||
export const box = withState({ checked: false, toggle: true, settings: false }, (store) => {
|
||||
const onToggle = () => {
|
||||
store.set({ checked: !store.state.checked })
|
||||
}
|
||||
const onSettingsToggle = () => {
|
||||
store.set({ settings: !store.state.settings })
|
||||
}
|
||||
return (
|
||||
<div style={{ width: '595px' }}>
|
||||
<Box
|
||||
title={text('Title', 'Brave ads')}
|
||||
toggle={boolean('Show toggle', store.state.toggle)}
|
||||
checked={boolean('Toggle checked', store.state.checked)}
|
||||
type={select<any>('Type', { contribute: 'contribute', donation: 'donation', ads: 'ads' }, 'contribute')}
|
||||
description={
|
||||
text('Description', `Earn tokens by seeing ads on Brave. Ads are matched from machine learning and the data temporarily present in your browser without tracking your information or sending it outside.`)
|
||||
}
|
||||
onToggle={onToggle}
|
||||
settingsChild={<div>Settings content</div>}
|
||||
settingsOpened={store.state.settings}
|
||||
onSettingsClick={onSettingsToggle}
|
||||
>
|
||||
<div>Some content</div>
|
||||
</Box>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
box.storyName = 'Box'
|
||||
|
||||
export const disabled = () => {
|
||||
return (
|
||||
<DisabledContent
|
||||
type={select<any>('Type', { contribute: 'contribute', donation: 'donation', ads: 'ads' }, 'donation')}
|
||||
>
|
||||
• Donate on the spot as you find gems. <br />
|
||||
• <b>Enable Tips </b> on Twitter, YouTube, and more, to give tips to posts you ‘Like’.
|
||||
</DisabledContent>
|
||||
)
|
||||
}
|
||||
|
||||
disabled.storyName = 'Disabled Content'
|
||||
|
||||
export const alert = () => {
|
||||
return (
|
||||
<Alert
|
||||
type={select<any>('Type', { error: 'error', success: 'success', warning: 'warning' }, 'success')}
|
||||
bg={boolean('Background color', false)}
|
||||
colored={boolean('Text color', false)}
|
||||
>
|
||||
<b>Funds received!</b> 25 BAT are added to your wallet successfully.
|
||||
</Alert>
|
||||
)
|
||||
}
|
||||
alert.storyName = 'Alert'
|
||||
|
||||
export const mainToggle = () => {
|
||||
return (
|
||||
<div style={{ width: '800px' }}>
|
||||
<MainToggle
|
||||
onTOSClick={dummyClick}
|
||||
onPrivacyClick={dummyClick}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
mainToggle.storyName = 'Main Toggle'
|
||||
|
||||
export const donate = withState({ donationAmounts, currentAmount: '5.0' }, (store) => {
|
||||
const onDonate = () => {
|
||||
console.log('onDonate')
|
||||
}
|
||||
|
||||
const onAmountSelection = (tokens: string) => {
|
||||
store.set({ currentAmount: tokens })
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ background: '#696fdc' }}>
|
||||
<Donate
|
||||
type={'one-time'}
|
||||
donateType={select<any>('Type', { big: 'big', small: 'small' }, 'small')}
|
||||
balance={number('Balance ', 5)}
|
||||
donationAmounts={object('Donations', store.state.donationAmounts)}
|
||||
onDonate={onDonate}
|
||||
title={'Donation amount'}
|
||||
actionText={text('Action text', 'Send my Donation')}
|
||||
onAmountSelection={onAmountSelection}
|
||||
currentAmount={text('Current amount', store.state.currentAmount)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
donate.storyName = 'Donate'
|
||||
|
||||
export const list = () => {
|
||||
return (
|
||||
<div style={{ width: '595px' }}>
|
||||
<List
|
||||
title={text('Title', 'Earnings this month')}
|
||||
>
|
||||
Some content
|
||||
</List>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
list.storyName = 'List'
|
||||
|
||||
export const listToken = () => {
|
||||
return (
|
||||
<div style={{ width: '400px' }}>
|
||||
<ListToken
|
||||
title={text('Title', 'Brave Contribute')}
|
||||
value={text('Value', '10.0')}
|
||||
converted={text('Converted', '0.25')}
|
||||
isNegative={boolean('Is negative', false)}
|
||||
color={select<any>('Color', { contribute: 'contribute', donation: 'donation', earnings: 'earnings', notPaid: 'notPaid', default: 'default' }, 'default')}
|
||||
size={select<any>('Size', { normal: 'normal', small: 'small' }, 'small')}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
listToken.storyName = 'List Token'
|
||||
|
||||
export const tokens = () => {
|
||||
return (
|
||||
<Tokens
|
||||
value={text('Tokens value', '10.0')}
|
||||
converted={text('Converted value', '4.00')}
|
||||
currency={text('Currency', 'USD')}
|
||||
isNegative={boolean('Is negative', false)}
|
||||
color={select<any>('Color', { contribute: 'contribute', donation: 'donation', earnings: 'earnings', notPaid: 'notPaid', default: 'default' }, 'default')}
|
||||
size={select<any>('Size', { normal: 'normal', small: 'small' }, 'small')}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
tokens.storyName = 'Tokens'
|
||||
|
||||
export const profile = () => {
|
||||
return (
|
||||
<div style={{ width: '400px' }}>
|
||||
<Profile
|
||||
type={select<any>('Type', { big: 'big', small: 'small' }, 'big')}
|
||||
title={'Jonathon Doe'}
|
||||
verified={boolean('Verified', false)}
|
||||
provider={select<any>('Provider', { youtube: 'youtube', twitter: 'twitter', twitch: 'twitch', reddit: 'reddit', vimeo: 'vimeo', github: 'github' }, 'youtube')}
|
||||
src={favicon}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
profile.storyName = 'Profile'
|
||||
|
||||
export const amount = withState({ selected: false }, (store) => {
|
||||
const onSelect = () => {
|
||||
store.set({ selected: !store.state.selected })
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ background: '#696fdc', width: '335px', padding: '50px' }}>
|
||||
<Amount
|
||||
amount={text('Amount', '5.0')}
|
||||
converted={text('Converted', '1.50')}
|
||||
selected={boolean('Selected', store.state.selected)}
|
||||
type={select<any>('Type', { big: 'Big', small: 'Small' }, 'big')}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
amount.storyName = 'Amount'
|
||||
|
||||
export const grantClaim = () => {
|
||||
return (
|
||||
<GrantClaim
|
||||
type={'ugp'}
|
||||
onClaim={dummyClick}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
grantClaim.storyName = 'Grant Claim'
|
||||
|
||||
export const toggleTips = withState({ tipsEnabled: true }, (store) => {
|
||||
const onToggle = () => {
|
||||
store.set({ tipsEnabled: !store.state.tipsEnabled })
|
||||
}
|
||||
return (
|
||||
<ToggleTips
|
||||
id={'toggle-tips'}
|
||||
onToggleTips={onToggle}
|
||||
tipsEnabled={boolean('Selected', store.state.tipsEnabled)}
|
||||
provider={select<any>('Provider', { youtube: 'youtube', twitter: 'twitter', twitch: 'twitch', reddit: 'reddit', vimeo: 'vimeo', github: 'github' }, 'youtube')}
|
||||
/>
|
||||
)
|
||||
})
|
||||
|
||||
toggleTips.storyName = 'ToggleTips'
|
||||
|
||||
export const tooltip = () => {
|
||||
const braveAdsText = <span>Brave Ads Settings</span>
|
||||
const batLogoText = <span>BAT Logo</span>
|
||||
const styledUpholdContent = (
|
||||
<div>
|
||||
<span style={{ fontWeight: 'bold', color: '#4AAF57' }}>
|
||||
Uphold. The Internet of Money.
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ position: 'absolute', top: '200px', left: '700px' }}>
|
||||
<Tooltip
|
||||
id={'tooltip-test'}
|
||||
content={braveAdsText}
|
||||
>
|
||||
<div style={{ width: '30px' }}>
|
||||
<SettingsIcon color={'#A1A8F2'} />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div style={{ position: 'absolute', top: '280px', left: '685px' }}>
|
||||
<Tooltip
|
||||
id={'tooltip-test'}
|
||||
content={batLogoText}
|
||||
>
|
||||
<div style={{ width: '60px' }}>
|
||||
<BatColorIcon />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div style={{ position: 'absolute', top: '390px', left: '670px' }}>
|
||||
<Tooltip
|
||||
id={'tooltip-test'}
|
||||
content={styledUpholdContent}
|
||||
>
|
||||
<div style={{ width: '90px' }}>
|
||||
<UpholdColorIcon />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
tooltip.storyName = 'Tooltip'
|
||||
|
||||
export const mediaBox = () => {
|
||||
const mediaProvider = select<any>('Provider', { twitter: 'twitter', reddit: 'reddit' }, 'twitter')
|
||||
return (
|
||||
<MediaBox
|
||||
mediaType={mediaProvider}
|
||||
mediaText={text('Media text', 'This is my text.')}
|
||||
mediaTimetext={mediaProvider === 'reddit' ? text('Reddit Text', '3 months ago') : ''}
|
||||
mediaTimestamp={mediaProvider === 'twitter' ? number('Timestamp in seconds', 46420000) : 0}
|
||||
/>
|
||||
)
|
||||
}
|
||||
mediaBox.storyName = 'Media Box'
|
||||
|
||||
export const tab = withState({ tabIndexSelected: 0 }, (store) => {
|
||||
const onSwitch = () => {
|
||||
const newIndex = store.state.tabIndexSelected === 0 ? 1 : 0
|
||||
store.set({ tabIndexSelected: newIndex })
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ width: '350px' }}>
|
||||
<Tab
|
||||
tabTitles={['Backup', 'Restore']}
|
||||
onChange={onSwitch}
|
||||
tabIndexSelected={store.state.tabIndexSelected}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
tab.storyName = 'Tab'
|
||||
@@ -0,0 +1,65 @@
|
||||
// Copyright (c) 2021 The Brave Authors. All rights reserved.
|
||||
// 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 { boolean, select, text } from '@storybook/addon-knobs'
|
||||
import { withState } from '@dump247/storybook-state'
|
||||
import {
|
||||
List
|
||||
} from '../components'
|
||||
import {
|
||||
BoxMobile,
|
||||
MainToggleMobile
|
||||
} from '../components/mobile'
|
||||
|
||||
export default {
|
||||
title: 'Rewards/Other/Mobile',
|
||||
parameters: {
|
||||
layout: 'centered'
|
||||
}
|
||||
}
|
||||
|
||||
export const Box = withState({ checked: true, toggle: true }, (store) => {
|
||||
const onToggle = () => {
|
||||
store.set({ checked: !store.state.checked })
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ width: '100%' }}>
|
||||
<BoxMobile
|
||||
title={text('Title', 'Brave Auto-Contribute')}
|
||||
toggle={boolean('Show toggle', store.state.toggle)}
|
||||
checked={boolean('Toggle checked', store.state.checked)}
|
||||
type={select<any>('Type', { contribute: 'contribute', donation: 'donation', ads: 'ads' }, 'contribute')}
|
||||
description={
|
||||
text('Description', `A simple way to support content creators. Set monthly allowance and browse normally. Your favorite sites (content sites only) receive your contributions automatically. You can exclude sites from funding right from the list below.`)
|
||||
}
|
||||
toggleAction={onToggle}
|
||||
settingsChild={<div>Settings content</div>}
|
||||
>
|
||||
<div style={{ padding: '0px 25px' }}>
|
||||
<p>Detail Content</p>
|
||||
</div>
|
||||
</BoxMobile>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
export const mainToggle = () => {
|
||||
let items = []
|
||||
for (let i = 0; i < 25; i++) {
|
||||
items.push(i)
|
||||
}
|
||||
return (
|
||||
<div style={{ width: '100%' }}>
|
||||
<MainToggleMobile/>
|
||||
{items.map(i =>
|
||||
<div key={i}>
|
||||
<List title={`Item No: ${i}`} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
mainToggle.storyName = 'Main Toggle'
|
||||
@@ -1,336 +0,0 @@
|
||||
/* 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 { withState } from '@dump247/storybook-state'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import { withKnobs, boolean, select, text, object, number } from '@storybook/addon-knobs'
|
||||
import centered from '@storybook/addon-centered'
|
||||
// Components
|
||||
import {
|
||||
Box,
|
||||
DisabledContent,
|
||||
Alert,
|
||||
MainToggle,
|
||||
Donate,
|
||||
List,
|
||||
ListToken,
|
||||
Tokens,
|
||||
Profile,
|
||||
Amount,
|
||||
ToggleTips,
|
||||
Tooltip,
|
||||
MediaBox,
|
||||
Tab
|
||||
} from '../components'
|
||||
import {
|
||||
BoxMobile,
|
||||
MainToggleMobile
|
||||
} from '../components/mobile'
|
||||
import { BatColorIcon, SettingsIcon, UpholdColorIcon } from 'brave-ui/components/icons'
|
||||
import GrantClaim from '../components/grantClaim'
|
||||
|
||||
const favicon = require('./img/brave-favicon.png')
|
||||
|
||||
const dummyClick = () => {
|
||||
console.log(dummyClick)
|
||||
}
|
||||
|
||||
const donationAmounts = [
|
||||
{ tokens: '1.0', converted: '0.30', selected: false },
|
||||
{ tokens: '5.0', converted: '1.50', selected: false },
|
||||
{ tokens: '10.0', converted: '3.00', selected: false }
|
||||
]
|
||||
|
||||
storiesOf('Rewards/Other/Desktop', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(centered)
|
||||
.add('Box', withState({ checked: false, toggle: true, settings: false }, (store) => {
|
||||
const onToggle = () => {
|
||||
store.set({ checked: !store.state.checked })
|
||||
}
|
||||
const onSettingsToggle = () => {
|
||||
store.set({ settings: !store.state.settings })
|
||||
}
|
||||
return (
|
||||
<div style={{ width: '595px' }}>
|
||||
<Box
|
||||
title={text('Title', 'Brave ads')}
|
||||
toggle={boolean('Show toggle', store.state.toggle)}
|
||||
checked={boolean('Toggle checked', store.state.checked)}
|
||||
type={select<any>('Type', { contribute: 'contribute', donation: 'donation', ads: 'ads' }, 'contribute')}
|
||||
description={
|
||||
text('Description', `Earn tokens by seeing ads on Brave. Ads are matched from machine learning and the data temporarily present in your browser without tracking your information or sending it outside.`)
|
||||
}
|
||||
onToggle={onToggle}
|
||||
settingsChild={<div>Settings content</div>}
|
||||
settingsOpened={store.state.settings}
|
||||
onSettingsClick={onSettingsToggle}
|
||||
>
|
||||
<div>Some content</div>
|
||||
</Box>
|
||||
</div>
|
||||
)
|
||||
}))
|
||||
.add('Disabled content', () => {
|
||||
return (
|
||||
<DisabledContent
|
||||
type={select<any>('Type', { contribute: 'contribute', donation: 'donation', ads: 'ads' }, 'donation')}
|
||||
>
|
||||
• Donate on the spot as you find gems. <br />
|
||||
• <b>Enable Tips </b> on Twitter, YouTube, and more, to give tips to posts you ‘Like’.
|
||||
</DisabledContent>
|
||||
)
|
||||
})
|
||||
.add('Alert', () => {
|
||||
return (
|
||||
<Alert
|
||||
type={select<any>('Type', { error: 'error', success: 'success', warning: 'warning' }, 'success')}
|
||||
bg={boolean('Background color', false)}
|
||||
colored={boolean('Text color', false)}
|
||||
>
|
||||
<b>Funds received!</b> 25 BAT are added to your wallet successfully.
|
||||
</Alert>
|
||||
)
|
||||
})
|
||||
.add('Main toggle', () => {
|
||||
return (
|
||||
<div style={{ width: '800px' }}>
|
||||
<MainToggle
|
||||
onTOSClick={dummyClick}
|
||||
onPrivacyClick={dummyClick}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
.add('Donate', withState({ donationAmounts, currentAmount: '5.0' }, (store) => {
|
||||
const onDonate = () => {
|
||||
console.log('onDonate')
|
||||
}
|
||||
|
||||
const onAmountSelection = (tokens: string) => {
|
||||
store.set({ currentAmount: tokens })
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ background: '#696fdc' }}>
|
||||
<Donate
|
||||
type={'one-time'}
|
||||
donateType={select<any>('Type', { big: 'big', small: 'small' }, 'small')}
|
||||
balance={number('Balance ', 5)}
|
||||
donationAmounts={object('Donations', store.state.donationAmounts)}
|
||||
onDonate={onDonate}
|
||||
title={'Donation amount'}
|
||||
actionText={text('Action text', 'Send my Donation')}
|
||||
onAmountSelection={onAmountSelection}
|
||||
currentAmount={text('Current amount', store.state.currentAmount)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}))
|
||||
.add('List', () => {
|
||||
return (
|
||||
<div style={{ width: '595px' }}>
|
||||
<List
|
||||
title={text('Title', 'Earnings this month')}
|
||||
>
|
||||
Some content
|
||||
</List>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
.add('List - Token', () => {
|
||||
return (
|
||||
<div style={{ width: '400px' }}>
|
||||
<ListToken
|
||||
title={text('Title', 'Brave Contribute')}
|
||||
value={text('Value', '10.0')}
|
||||
converted={text('Converted', '0.25')}
|
||||
isNegative={boolean('Is negative', false)}
|
||||
color={select<any>('Color', { contribute: 'contribute', donation: 'donation', earnings: 'earnings', notPaid: 'notPaid', default: 'default' }, 'default')}
|
||||
size={select<any>('Size', { normal: 'normal', small: 'small' }, 'small')}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
.add('Tokens', () => {
|
||||
return (
|
||||
<Tokens
|
||||
value={text('Tokens value', '10.0')}
|
||||
converted={text('Converted value', '4.00')}
|
||||
currency={text('Currency', 'USD')}
|
||||
isNegative={boolean('Is negative', false)}
|
||||
color={select<any>('Color', { contribute: 'contribute', donation: 'donation', earnings: 'earnings', notPaid: 'notPaid', default: 'default' }, 'default')}
|
||||
size={select<any>('Size', { normal: 'normal', small: 'small' }, 'small')}
|
||||
/>
|
||||
)
|
||||
})
|
||||
.add('Profile', () => {
|
||||
return (
|
||||
<div style={{ width: '400px' }}>
|
||||
<Profile
|
||||
type={select<any>('Type', { big: 'big', small: 'small' }, 'big')}
|
||||
title={'Jonathon Doe'}
|
||||
verified={boolean('Verified', false)}
|
||||
provider={select<any>('Provider', { youtube: 'youtube', twitter: 'twitter', twitch: 'twitch', reddit: 'reddit', vimeo: 'vimeo', github: 'github' }, 'youtube')}
|
||||
src={favicon}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
.add('Amount', withState({ selected: false }, (store) => {
|
||||
const onSelect = () => {
|
||||
store.set({ selected: !store.state.selected })
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ background: '#696fdc', width: '335px', padding: '50px' }}>
|
||||
<Amount
|
||||
amount={text('Amount', '5.0')}
|
||||
converted={text('Converted', '1.50')}
|
||||
selected={boolean('Selected', store.state.selected)}
|
||||
type={select<any>('Type', { big: 'Big', small: 'Small' }, 'big')}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}))
|
||||
.add('Grant claim', () => {
|
||||
return (
|
||||
<GrantClaim
|
||||
type={'ugp'}
|
||||
onClaim={dummyClick}
|
||||
/>
|
||||
)
|
||||
})
|
||||
.add('Toggle Tips', withState({ tipsEnabled: true }, (store) => {
|
||||
const onToggle = () => {
|
||||
store.set({ tipsEnabled: !store.state.tipsEnabled })
|
||||
}
|
||||
return (
|
||||
<ToggleTips
|
||||
id={'toggle-tips'}
|
||||
onToggleTips={onToggle}
|
||||
tipsEnabled={boolean('Selected', store.state.tipsEnabled)}
|
||||
provider={select<any>('Provider', { youtube: 'youtube', twitter: 'twitter', twitch: 'twitch', reddit: 'reddit', vimeo: 'vimeo', github: 'github' }, 'youtube')}
|
||||
/>
|
||||
)
|
||||
}))
|
||||
.add('Tooltip', () => {
|
||||
const braveAdsText = <span>Brave Ads Settings</span>
|
||||
const batLogoText = <span>BAT Logo</span>
|
||||
const styledUpholdContent = (
|
||||
<div>
|
||||
<span style={{ fontWeight: 'bold', color: '#4AAF57' }}>
|
||||
Uphold. The Internet of Money.
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ position: 'absolute', top: '200px', left: '700px' }}>
|
||||
<Tooltip
|
||||
id={'tooltip-test'}
|
||||
content={braveAdsText}
|
||||
>
|
||||
<div style={{ width: '30px' }}>
|
||||
<SettingsIcon color={'#A1A8F2'} />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div style={{ position: 'absolute', top: '280px', left: '685px' }}>
|
||||
<Tooltip
|
||||
id={'tooltip-test'}
|
||||
content={batLogoText}
|
||||
>
|
||||
<div style={{ width: '60px' }}>
|
||||
<BatColorIcon />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div style={{ position: 'absolute', top: '390px', left: '670px' }}>
|
||||
<Tooltip
|
||||
id={'tooltip-test'}
|
||||
content={styledUpholdContent}
|
||||
>
|
||||
<div style={{ width: '90px' }}>
|
||||
<UpholdColorIcon />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
.add('Tweet Box', () => {
|
||||
const mediaProvider = select<any>('Provider', { twitter: 'twitter', reddit: 'reddit' }, 'twitter')
|
||||
return (
|
||||
<MediaBox
|
||||
mediaType={mediaProvider}
|
||||
mediaText={text('Media text', 'This is my text.')}
|
||||
mediaTimetext={mediaProvider === 'reddit' ? text('Reddit Text', '3 months ago') : ''}
|
||||
mediaTimestamp={mediaProvider === 'twitter' ? number('Timestamp in seconds', 46420000) : 0}
|
||||
/>
|
||||
)
|
||||
})
|
||||
.add('Tab', withState({ tabIndexSelected: 0 }, (store) => {
|
||||
const onSwitch = () => {
|
||||
const newIndex = store.state.tabIndexSelected === 0 ? 1 : 0
|
||||
store.set({ tabIndexSelected: newIndex })
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ width: '350px' }}>
|
||||
<Tab
|
||||
tabTitles={['Backup', 'Restore']}
|
||||
onChange={onSwitch}
|
||||
tabIndexSelected={store.state.tabIndexSelected}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}))
|
||||
storiesOf('Rewards/Other/Mobile', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(centered)
|
||||
.add('Box', withState({ checked: true, toggle: true }, (store) => {
|
||||
const onToggle = () => {
|
||||
store.set({ checked: !store.state.checked })
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ width: '100%' }}>
|
||||
<BoxMobile
|
||||
title={text('Title', 'Brave Auto-Contribute')}
|
||||
toggle={boolean('Show toggle', store.state.toggle)}
|
||||
checked={boolean('Toggle checked', store.state.checked)}
|
||||
type={select<any>('Type', { contribute: 'contribute', donation: 'donation', ads: 'ads' }, 'contribute')}
|
||||
description={
|
||||
text('Description', `A simple way to support content creators. Set monthly allowance and browse normally. Your favorite sites (content sites only) receive your contributions automatically. You can exclude sites from funding right from the list below.`)
|
||||
}
|
||||
toggleAction={onToggle}
|
||||
settingsChild={<div>Settings content</div>}
|
||||
>
|
||||
<div style={{ padding: '0px 25px' }}>
|
||||
<p>Detail Content</p>
|
||||
</div>
|
||||
</BoxMobile>
|
||||
</div>
|
||||
)
|
||||
}))
|
||||
.add('Main Toggle', () => {
|
||||
let items = []
|
||||
for (let i = 0; i < 25; i++) {
|
||||
items.push(i)
|
||||
}
|
||||
return (
|
||||
<div style={{ width: '100%' }}>
|
||||
<MainToggleMobile/>
|
||||
{items.map(i =>
|
||||
<div key={i}>
|
||||
<List title={`Item No: ${i}`} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
@@ -1,11 +1,10 @@
|
||||
/* 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/. */
|
||||
// Copyright (c) 2021 The Brave Authors. All rights reserved.
|
||||
// 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, boolean, object, number } from '@storybook/addon-knobs'
|
||||
import centered from '@storybook/addon-centered'
|
||||
import { boolean, object, number } from '@storybook/addon-knobs'
|
||||
|
||||
// Components
|
||||
import TableContribute, { DetailRow as ContributeDetailRow } from '../components/tableContribute'
|
||||
@@ -24,246 +23,253 @@ const doNothing = () => {
|
||||
console.log('nothing')
|
||||
}
|
||||
|
||||
storiesOf('Rewards/Table', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(centered)
|
||||
.add('Contribution', () => {
|
||||
const header: string[] = [
|
||||
'Site',
|
||||
'Attention'
|
||||
]
|
||||
export default {
|
||||
title: 'Rewards/Table',
|
||||
parameters: {
|
||||
layout: 'centered'
|
||||
}
|
||||
}
|
||||
|
||||
const rows: ContributeDetailRow[] = [
|
||||
{
|
||||
profile: {
|
||||
name: 'Jonathon Doe',
|
||||
verified: true,
|
||||
provider: 'youtube',
|
||||
src: favicon
|
||||
},
|
||||
url: 'https://brave.com',
|
||||
attention: 40,
|
||||
onRemove: doNothing
|
||||
export const contribution = () => {
|
||||
const header: string[] = [
|
||||
'Site',
|
||||
'Attention'
|
||||
]
|
||||
|
||||
const rows: ContributeDetailRow[] = [
|
||||
{
|
||||
profile: {
|
||||
name: 'Jonathon Doe',
|
||||
verified: true,
|
||||
provider: 'youtube',
|
||||
src: favicon
|
||||
},
|
||||
{
|
||||
profile: {
|
||||
name: 'duckduckgo.com',
|
||||
verified: true,
|
||||
src: ddgo
|
||||
},
|
||||
url: 'https://brave.com',
|
||||
attention: 20,
|
||||
onRemove: doNothing
|
||||
url: 'https://brave.com',
|
||||
attention: 40,
|
||||
onRemove: doNothing
|
||||
},
|
||||
{
|
||||
profile: {
|
||||
name: 'duckduckgo.com',
|
||||
verified: true,
|
||||
src: ddgo
|
||||
},
|
||||
{
|
||||
profile: {
|
||||
name: 'buzzfeed.com',
|
||||
verified: false,
|
||||
src: buzz
|
||||
},
|
||||
url: 'https://brave.com',
|
||||
attention: 10,
|
||||
onRemove: doNothing
|
||||
url: 'https://brave.com',
|
||||
attention: 20,
|
||||
onRemove: doNothing
|
||||
},
|
||||
{
|
||||
profile: {
|
||||
name: 'buzzfeed.com',
|
||||
verified: false,
|
||||
src: buzz
|
||||
},
|
||||
{
|
||||
profile: {
|
||||
name: 'theguardian.com',
|
||||
verified: true,
|
||||
src: guardian
|
||||
},
|
||||
url: 'https://brave.com',
|
||||
attention: 5,
|
||||
onRemove: doNothing
|
||||
url: 'https://brave.com',
|
||||
attention: 10,
|
||||
onRemove: doNothing
|
||||
},
|
||||
{
|
||||
profile: {
|
||||
name: 'theguardian.com',
|
||||
verified: true,
|
||||
src: guardian
|
||||
},
|
||||
{
|
||||
profile: {
|
||||
name: 'wikipedia.org',
|
||||
verified: false,
|
||||
src: wiki
|
||||
},
|
||||
url: 'https://brave.com',
|
||||
attention: 4,
|
||||
onRemove: doNothing
|
||||
url: 'https://brave.com',
|
||||
attention: 5,
|
||||
onRemove: doNothing
|
||||
},
|
||||
{
|
||||
profile: {
|
||||
name: 'wikipedia.org',
|
||||
verified: false,
|
||||
src: wiki
|
||||
},
|
||||
url: 'https://brave.com',
|
||||
attention: 4,
|
||||
onRemove: doNothing
|
||||
}
|
||||
]
|
||||
return (
|
||||
<div style={{ width: '595px' }}>
|
||||
<TableContribute
|
||||
header={object('Header', header)}
|
||||
rows={object('Rows', rows)}
|
||||
allSites={boolean('Are this all sites?', false)}
|
||||
numSites={number('Number of all sites?', 55)}
|
||||
showRowAmount={boolean('Show row amount', false)}
|
||||
showRemove={boolean('Show remove action', true)}
|
||||
headerColor={boolean('Colored header', true)}
|
||||
>
|
||||
Please visit some sites
|
||||
</TableContribute>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const conation = () => {
|
||||
const rows: DonationDetailRow[] = [
|
||||
{
|
||||
profile: {
|
||||
name: 'Jonathon Doe',
|
||||
verified: true,
|
||||
provider: 'youtube',
|
||||
src: favicon
|
||||
},
|
||||
url: 'https://brave.com',
|
||||
type: 'recurring',
|
||||
contribute: {
|
||||
tokens: '2.0',
|
||||
converted: '0.20'
|
||||
},
|
||||
onRemove: doNothing
|
||||
},
|
||||
{
|
||||
profile: {
|
||||
verified: false,
|
||||
name: 'theguardian.com',
|
||||
src: guardian
|
||||
},
|
||||
url: 'https://brave.com',
|
||||
type: 'donation',
|
||||
contribute: {
|
||||
tokens: '12000.0',
|
||||
converted: '6000.20'
|
||||
},
|
||||
text: 'May 7'
|
||||
},
|
||||
{
|
||||
profile: {
|
||||
verified: false,
|
||||
name: 'BrendanEich',
|
||||
provider: 'twitter',
|
||||
src: eich
|
||||
},
|
||||
url: 'https://brave.com',
|
||||
type: 'tip',
|
||||
contribute: {
|
||||
tokens: '1.0',
|
||||
converted: '0.20'
|
||||
},
|
||||
text: 'May 2'
|
||||
}
|
||||
]
|
||||
return (
|
||||
<div style={{ width: '595px' }}>
|
||||
<TableDonation
|
||||
rows={object('Rows', rows)}
|
||||
allItems={boolean('Are this all items?', false)}
|
||||
numItems={number('Number of all items?', 55)}
|
||||
headerColor={boolean('Colored header', true)}
|
||||
>
|
||||
Please visit some sites
|
||||
</TableDonation>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const transactions = () => {
|
||||
const rows: TransactionsRow[] = [
|
||||
{
|
||||
date: 1576066103000,
|
||||
type: 'ads',
|
||||
description: 'Brave Ads payment for May',
|
||||
amount: {
|
||||
value: '5.0',
|
||||
converted: '5.00'
|
||||
}
|
||||
]
|
||||
return (
|
||||
<div style={{ width: '595px' }}>
|
||||
<TableContribute
|
||||
header={object('Header', header)}
|
||||
rows={object('Rows', rows)}
|
||||
allSites={boolean('Are this all sites?', false)}
|
||||
numSites={number('Number of all sites?', 55)}
|
||||
showRowAmount={boolean('Show row amount', false)}
|
||||
showRemove={boolean('Show remove action', true)}
|
||||
headerColor={boolean('Colored header', true)}
|
||||
>
|
||||
Please visit some sites
|
||||
</TableContribute>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
.add('Donation', () => {
|
||||
const rows: DonationDetailRow[] = [
|
||||
{
|
||||
profile: {
|
||||
name: 'Jonathon Doe',
|
||||
verified: true,
|
||||
provider: 'youtube',
|
||||
src: favicon
|
||||
},
|
||||
url: 'https://brave.com',
|
||||
type: 'recurring',
|
||||
contribute: {
|
||||
tokens: '2.0',
|
||||
converted: '0.20'
|
||||
},
|
||||
onRemove: doNothing
|
||||
},
|
||||
{
|
||||
date: 1576066103000,
|
||||
type: 'tip',
|
||||
description: {
|
||||
publisher: 'Jonathon Doe',
|
||||
platform: 'YouTube'
|
||||
},
|
||||
{
|
||||
profile: {
|
||||
verified: false,
|
||||
name: 'theguardian.com',
|
||||
src: guardian
|
||||
},
|
||||
url: 'https://brave.com',
|
||||
type: 'donation',
|
||||
contribute: {
|
||||
tokens: '12000.0',
|
||||
converted: '6000.20'
|
||||
},
|
||||
text: 'May 7'
|
||||
},
|
||||
{
|
||||
profile: {
|
||||
verified: false,
|
||||
name: 'BrendanEich',
|
||||
provider: 'twitter',
|
||||
src: eich
|
||||
},
|
||||
url: 'https://brave.com',
|
||||
type: 'tip',
|
||||
contribute: {
|
||||
tokens: '1.0',
|
||||
converted: '0.20'
|
||||
},
|
||||
text: 'May 2'
|
||||
amount: {
|
||||
isNegative: true,
|
||||
value: '5.0',
|
||||
converted: '11.00'
|
||||
}
|
||||
]
|
||||
return (
|
||||
<div style={{ width: '595px' }}>
|
||||
<TableDonation
|
||||
rows={object('Rows', rows)}
|
||||
allItems={boolean('Are this all items?', false)}
|
||||
numItems={number('Number of all items?', 55)}
|
||||
headerColor={boolean('Colored header', true)}
|
||||
>
|
||||
Please visit some sites
|
||||
</TableDonation>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
.add('Transactions', () => {
|
||||
const rows: TransactionsRow[] = [
|
||||
{
|
||||
date: 1576066103000,
|
||||
type: 'ads',
|
||||
description: 'Brave Ads payment for May',
|
||||
amount: {
|
||||
value: '5.0',
|
||||
converted: '5.00'
|
||||
}
|
||||
},
|
||||
{
|
||||
date: 1576066103000,
|
||||
type: 'tip',
|
||||
description: {
|
||||
publisher: 'Jonathon Doe',
|
||||
platform: 'YouTube'
|
||||
},
|
||||
amount: {
|
||||
isNegative: true,
|
||||
value: '5.0',
|
||||
converted: '11.00'
|
||||
}
|
||||
},
|
||||
{
|
||||
date: 1576066103000,
|
||||
type: 'contribute',
|
||||
description: 'Monthly payment',
|
||||
amount: {
|
||||
isNegative: true,
|
||||
value: '5.0',
|
||||
converted: '15.00'
|
||||
}
|
||||
},
|
||||
{
|
||||
date: 1576066103000,
|
||||
type: 'contribute',
|
||||
description: 'Monthly payment',
|
||||
amount: {
|
||||
isNegative: true,
|
||||
value: '5.0',
|
||||
converted: '15.00'
|
||||
}
|
||||
]
|
||||
return (
|
||||
<div style={{ width: '595px' }}>
|
||||
<TableTransactions
|
||||
rows={object('Rows', rows)}
|
||||
>
|
||||
Sorry no transactions.
|
||||
</TableTransactions>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
.add('Pending contributions',() => {
|
||||
const rows: PendingDetailRow[] = [
|
||||
{
|
||||
profile: {
|
||||
name: 'Jonathon Doe',
|
||||
verified: true,
|
||||
provider: 'youtube',
|
||||
src: favicon
|
||||
},
|
||||
url: 'https://brave.com',
|
||||
type: 'recurring',
|
||||
amount: {
|
||||
tokens: '2.0',
|
||||
converted: '0.20'
|
||||
},
|
||||
date: 'Jan 2',
|
||||
onRemove: doNothing
|
||||
}
|
||||
]
|
||||
return (
|
||||
<div style={{ width: '595px' }}>
|
||||
<TableTransactions
|
||||
rows={object('Rows', rows)}
|
||||
>
|
||||
Sorry no transactions.
|
||||
</TableTransactions>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const pendingContributions = () => {
|
||||
const rows: PendingDetailRow[] = [
|
||||
{
|
||||
profile: {
|
||||
name: 'Jonathon Doe',
|
||||
verified: true,
|
||||
provider: 'youtube',
|
||||
src: favicon
|
||||
},
|
||||
{
|
||||
profile: {
|
||||
verified: false,
|
||||
name: 'theguardian.com',
|
||||
src: guardian
|
||||
},
|
||||
url: 'https://brave.com',
|
||||
type: 'tip',
|
||||
amount: {
|
||||
tokens: '12000.0',
|
||||
converted: '6000.20'
|
||||
},
|
||||
date: 'May 7',
|
||||
onRemove: doNothing
|
||||
url: 'https://brave.com',
|
||||
type: 'recurring',
|
||||
amount: {
|
||||
tokens: '2.0',
|
||||
converted: '0.20'
|
||||
},
|
||||
{
|
||||
profile: {
|
||||
verified: false,
|
||||
name: 'BrendanEich',
|
||||
provider: 'twitter',
|
||||
src: eich
|
||||
},
|
||||
url: 'https://brave.com',
|
||||
type: 'ac',
|
||||
amount: {
|
||||
tokens: '1.0',
|
||||
converted: '0.20'
|
||||
},
|
||||
date: 'May 2',
|
||||
onRemove: doNothing
|
||||
}
|
||||
]
|
||||
return (
|
||||
<div style={{ width: '595px' }}>
|
||||
<TablePending
|
||||
rows={object('Rows', rows)}
|
||||
>
|
||||
Please visit some sites
|
||||
</TablePending>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
date: 'Jan 2',
|
||||
onRemove: doNothing
|
||||
},
|
||||
{
|
||||
profile: {
|
||||
verified: false,
|
||||
name: 'theguardian.com',
|
||||
src: guardian
|
||||
},
|
||||
url: 'https://brave.com',
|
||||
type: 'tip',
|
||||
amount: {
|
||||
tokens: '12000.0',
|
||||
converted: '6000.20'
|
||||
},
|
||||
date: 'May 7',
|
||||
onRemove: doNothing
|
||||
},
|
||||
{
|
||||
profile: {
|
||||
verified: false,
|
||||
name: 'BrendanEich',
|
||||
provider: 'twitter',
|
||||
src: eich
|
||||
},
|
||||
url: 'https://brave.com',
|
||||
type: 'ac',
|
||||
amount: {
|
||||
tokens: '1.0',
|
||||
converted: '0.20'
|
||||
},
|
||||
date: 'May 2',
|
||||
onRemove: doNothing
|
||||
}
|
||||
]
|
||||
return (
|
||||
<div style={{ width: '595px' }}>
|
||||
<TablePending
|
||||
rows={object('Rows', rows)}
|
||||
>
|
||||
Please visit some sites
|
||||
</TablePending>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
/* 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/. */
|
||||
// Copyright (c) 2021 The Brave Authors. All rights reserved.
|
||||
// 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, object, text, select, boolean, number } from '@storybook/addon-knobs'
|
||||
import centered from '@storybook/addon-centered'
|
||||
import { object, text, select, boolean, number } from '@storybook/addon-knobs'
|
||||
|
||||
// Components
|
||||
import { WalletSummary, WalletEmpty, WalletPanel, WalletSummarySlider, WalletWrapper } from '../components'
|
||||
@@ -19,138 +18,144 @@ const doNothing = () => {
|
||||
console.log('nothing')
|
||||
}
|
||||
|
||||
storiesOf('Rewards/Wallet/Desktop', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(centered)
|
||||
.add('Wrapper', () => {
|
||||
const onEnableAds = () => {
|
||||
console.log('enabling ads')
|
||||
}
|
||||
const alert: AlertWallet = {
|
||||
node: 'Some text',
|
||||
type: 'success',
|
||||
onAlertClose: doNothing
|
||||
}
|
||||
const showAlert = boolean('Show alert', false)
|
||||
export default {
|
||||
title: 'Rewards/Wallet/Desktop',
|
||||
parameters: {
|
||||
layout: 'centered'
|
||||
}
|
||||
}
|
||||
|
||||
const state: WalletState = select('wallet status', {
|
||||
unverified: 'unverified',
|
||||
verified: 'verified',
|
||||
'disconnected unverified': 'disconnected_unverified',
|
||||
'disconnected verified': 'disconnected_verified'
|
||||
}, 'unverified') as WalletState
|
||||
export const wrapper = () => {
|
||||
const onEnableAds = () => {
|
||||
console.log('enabling ads')
|
||||
}
|
||||
const alert: AlertWallet = {
|
||||
node: 'Some text',
|
||||
type: 'success',
|
||||
onAlertClose: doNothing
|
||||
}
|
||||
const showAlert = boolean('Show alert', false)
|
||||
|
||||
return (
|
||||
<WalletWrapper
|
||||
compact={false}
|
||||
contentPadding={false}
|
||||
onNotificationClick={onEnableAds}
|
||||
notification={undefined}
|
||||
showCopy={boolean('Show Uphold', false)}
|
||||
const state: WalletState = select('wallet status', {
|
||||
unverified: 'unverified',
|
||||
verified: 'verified',
|
||||
'disconnected unverified': 'disconnected_unverified',
|
||||
'disconnected verified': 'disconnected_verified'
|
||||
}, 'unverified') as WalletState
|
||||
|
||||
return (
|
||||
<WalletWrapper
|
||||
compact={false}
|
||||
contentPadding={false}
|
||||
onNotificationClick={onEnableAds}
|
||||
notification={undefined}
|
||||
showCopy={boolean('Show Uphold', false)}
|
||||
onlyAnonWallet={boolean('Anon Wallet Only', false)}
|
||||
showSecActions={boolean('Show secondary actions', true)}
|
||||
balance={text('Balance', '25.0')}
|
||||
converted={text('Converted', '163230.50 USD')}
|
||||
actions={[
|
||||
{
|
||||
name: 'Add funds',
|
||||
action: doNothing,
|
||||
icon: <WalletAddIcon />,
|
||||
externalWallet: true
|
||||
},
|
||||
{
|
||||
name: 'Withdraw Funds',
|
||||
action: doNothing,
|
||||
icon: <WalletImportIcon />,
|
||||
externalWallet: true
|
||||
}
|
||||
]}
|
||||
alert={showAlert ? alert : undefined}
|
||||
walletState={state}
|
||||
walletProvider={'Uphold'}
|
||||
onDisconnectClick={doNothing}
|
||||
greetings={'Hello, Brave!'}
|
||||
>
|
||||
Some content
|
||||
</WalletWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
export const empty = () => {
|
||||
return (
|
||||
<div style={{ width: '373px', background: '#f9fbfc', padding: '0 25px' }}>
|
||||
<WalletEmpty />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const summary = () => {
|
||||
return (
|
||||
<div style={{ width: '373px', background: '#f9fbfc', padding: '0 25px' }}>
|
||||
<WalletSummary
|
||||
report={{
|
||||
grant: object('Grant', { tokens: '10.0', converted: '0.25' }),
|
||||
deposit: object('Deposit', { tokens: '10.0', converted: '0.25' }),
|
||||
ads: object('Ads', { tokens: '10.0', converted: '0.25' }),
|
||||
contribute: object('Contribute', { tokens: '10.0', converted: '0.25' }),
|
||||
donation: object('Donation', { tokens: '2.0', converted: '0.25' }),
|
||||
tips: object('Tips', { tokens: '19.0', converted: '5.25' })
|
||||
}}
|
||||
onActivity={doNothing}
|
||||
reservedAmount={number('Reserved amount', 52)}
|
||||
reservedMoreLink={'https://brave.com'}
|
||||
onSeeAllReserved={doNothing}
|
||||
onlyAnonWallet={boolean('Anon Wallet Only', false)}
|
||||
showSecActions={boolean('Show secondary actions', true)}
|
||||
balance={text('Balance', '25.0')}
|
||||
converted={text('Converted', '163230.50 USD')}
|
||||
actions={[
|
||||
{
|
||||
name: 'Add funds',
|
||||
action: doNothing,
|
||||
icon: <WalletAddIcon />,
|
||||
externalWallet: true
|
||||
},
|
||||
{
|
||||
name: 'Withdraw Funds',
|
||||
action: doNothing,
|
||||
icon: <WalletImportIcon />,
|
||||
externalWallet: true
|
||||
}
|
||||
]}
|
||||
alert={showAlert ? alert : undefined}
|
||||
walletState={state}
|
||||
walletProvider={'Uphold'}
|
||||
onDisconnectClick={doNothing}
|
||||
greetings={'Hello, Brave!'}
|
||||
>
|
||||
Some content
|
||||
</WalletWrapper>
|
||||
)
|
||||
})
|
||||
.add('Empty', () => {
|
||||
return (
|
||||
<div style={{ width: '373px', background: '#f9fbfc', padding: '0 25px' }}>
|
||||
<WalletEmpty />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
.add('Summary', () => {
|
||||
return (
|
||||
<div style={{ width: '373px', background: '#f9fbfc', padding: '0 25px' }}>
|
||||
<WalletSummary
|
||||
report={{
|
||||
grant: object('Grant', { tokens: '10.0', converted: '0.25' }),
|
||||
deposit: object('Deposit', { tokens: '10.0', converted: '0.25' }),
|
||||
ads: object('Ads', { tokens: '10.0', converted: '0.25' }),
|
||||
contribute: object('Contribute', { tokens: '10.0', converted: '0.25' }),
|
||||
donation: object('Donation', { tokens: '2.0', converted: '0.25' }),
|
||||
tips: object('Tips', { tokens: '19.0', converted: '5.25' })
|
||||
}}
|
||||
onActivity={doNothing}
|
||||
reservedAmount={number('Reserved amount', 52)}
|
||||
reservedMoreLink={'https://brave.com'}
|
||||
onSeeAllReserved={doNothing}
|
||||
onlyAnonWallet={boolean('Anon Wallet Only', false)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const panel = () => {
|
||||
return (
|
||||
<div style={{ width: '373px', background: '#fff' }}>
|
||||
<WalletPanel
|
||||
id={'wallet-panel'}
|
||||
platform={select<any>('Provider', { youtube: 'youtube', twitter: 'twitter', twitch: 'twitch', reddit: 'reddit', vimeo: 'vimeo', github: 'github' }, 'youtube')}
|
||||
publisherImg={favicon}
|
||||
publisherName={'Jonathan Doe'}
|
||||
monthlyAmount={'10.000'}
|
||||
isVerified={boolean('Verified', true)}
|
||||
tipsEnabled={boolean('Tips Enabled', true)}
|
||||
includeInAuto={boolean('Include in monthly', true)}
|
||||
acEnabled={boolean('AC enabled?', true)}
|
||||
attentionScore={'15'}
|
||||
onToggleTips={doNothing}
|
||||
setMonthlyAction={doNothing}
|
||||
cancelMonthlyAction={doNothing}
|
||||
donationAction={doNothing}
|
||||
onIncludeInAuto={doNothing}
|
||||
showUnVerified={boolean('Show unverified content', true)}
|
||||
onRefreshPublisher={doNothing}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const summarySlider = () => {
|
||||
return (
|
||||
<div style={{ width: '373px', padding: '0 25px' }}>
|
||||
<WalletSummarySlider
|
||||
id={'summary-slider'}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const walletInfoHeaderMobile = () => {
|
||||
return (
|
||||
<div style={{ position: 'fixed', top: 0, left: 0, height: '100vh', width: '100%' }}>
|
||||
<div style={{ width: '100%', position: 'absolute', top: '30%' }}>
|
||||
<WalletInfoHeader
|
||||
id={'info-header'}
|
||||
onClick={doNothing}
|
||||
balance={text('Balance', '30.0')}
|
||||
converted={text('Converted', '163230.50 USD')}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
.add('Panel', () => {
|
||||
return (
|
||||
<div style={{ width: '373px', background: '#fff' }}>
|
||||
<WalletPanel
|
||||
id={'wallet-panel'}
|
||||
platform={select<any>('Provider', { youtube: 'youtube', twitter: 'twitter', twitch: 'twitch', reddit: 'reddit', vimeo: 'vimeo', github: 'github' }, 'youtube')}
|
||||
publisherImg={favicon}
|
||||
publisherName={'Jonathan Doe'}
|
||||
monthlyAmount={'10.000'}
|
||||
isVerified={boolean('Verified', true)}
|
||||
tipsEnabled={boolean('Tips Enabled', true)}
|
||||
includeInAuto={boolean('Include in monthly', true)}
|
||||
acEnabled={boolean('AC enabled?', true)}
|
||||
attentionScore={'15'}
|
||||
onToggleTips={doNothing}
|
||||
setMonthlyAction={doNothing}
|
||||
cancelMonthlyAction={doNothing}
|
||||
donationAction={doNothing}
|
||||
onIncludeInAuto={doNothing}
|
||||
showUnVerified={boolean('Show unverified content', true)}
|
||||
onRefreshPublisher={doNothing}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
.add('Summary Slider', () => {
|
||||
return (
|
||||
<div style={{ width: '373px', padding: '0 25px' }}>
|
||||
<WalletSummarySlider
|
||||
id={'summary-slider'}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
storiesOf('Rewards/Wallet/Mobile', module)
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(centered)
|
||||
.add('Wallet Info Header', () => {
|
||||
return (
|
||||
<div style={{ position: 'fixed', top: 0, left: 0, height: '100vh', width: '100%' }}>
|
||||
<div style={{ width: '100%', position: 'absolute', top: '30%' }}>
|
||||
<WalletInfoHeader
|
||||
id={'info-header'}
|
||||
onClick={doNothing}
|
||||
balance={text('Balance', '30.0')}
|
||||
converted={text('Converted', '163230.50 USD')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,32 +3,24 @@
|
||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import * as React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import welcomeDarkTheme from '../theme/welcome-dark'
|
||||
import welcomeLightTheme from '../theme/welcome-light'
|
||||
import { withThemesProvider } from 'storybook-addon-styled-component-theme'
|
||||
import { withKnobs, boolean } from '@storybook/addon-knobs'
|
||||
import { boolean } from '@storybook/addon-knobs'
|
||||
|
||||
// Components
|
||||
import WelcomePage from './page/index'
|
||||
|
||||
// Themes
|
||||
const themes = [welcomeLightTheme, welcomeDarkTheme]
|
||||
|
||||
const fullPageStoryStyles: object = {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
export default {
|
||||
title: 'Welcome',
|
||||
args: {
|
||||
darkTheme: welcomeDarkTheme,
|
||||
lightTheme: welcomeLightTheme
|
||||
},
|
||||
parameters: {
|
||||
layout: 'fullscreen'
|
||||
}
|
||||
}
|
||||
|
||||
export const FullPageStory = (storyFn: any) =>
|
||||
<div style={fullPageStoryStyles}>{storyFn()}</div>
|
||||
|
||||
storiesOf('Welcome', module)
|
||||
.addDecorator(withThemesProvider(themes))
|
||||
.addDecorator(withKnobs)
|
||||
.addDecorator(FullPageStory)
|
||||
.add('Page', () => {
|
||||
return (
|
||||
<WelcomePage isDefaultSearchGoogle={boolean('Is default search google?', true)}/>
|
||||
)
|
||||
})
|
||||
export const Page = () => (
|
||||
<WelcomePage isDefaultSearchGoogle={boolean('Is default search google?', true)}/>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
// Copyright (c) 2020 The Brave Authors. All rights reserved.
|
||||
// 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 { select } from '@storybook/addon-knobs'
|
||||
import ITheme from 'brave-ui/theme/theme-interface'
|
||||
import Theme from 'brave-ui/theme/brave-default'
|
||||
import DarkTheme from 'brave-ui/theme/brave-dark'
|
||||
import BraveCoreThemeProvider from './BraveCoreThemeProvider'
|
||||
|
||||
type Props = {
|
||||
darkTheme?: ITheme
|
||||
lightTheme?: ITheme
|
||||
}
|
||||
|
||||
const ThemeProvider: React.FunctionComponent<Props> = (props) => {
|
||||
const themeName = select(
|
||||
'Theme',
|
||||
{ ['Light']: 'Light', ['Dark']: 'Dark' },
|
||||
'Light'
|
||||
)
|
||||
let darkTheme: ITheme = props.darkTheme as ITheme || DarkTheme
|
||||
let lightTheme: ITheme = props.lightTheme as ITheme || Theme
|
||||
return (
|
||||
<BraveCoreThemeProvider
|
||||
dark={darkTheme}
|
||||
light={lightTheme}
|
||||
initialThemeType={themeName as chrome.braveTheme.ThemeType}
|
||||
>
|
||||
{props.children}
|
||||
</BraveCoreThemeProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export default ThemeProvider
|
||||
@@ -4,46 +4,54 @@
|
||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import * as React from 'react'
|
||||
import { storiesOf } from '@storybook/react'
|
||||
import Theme from 'brave-ui/theme/brave-default'
|
||||
import DarkTheme from 'brave-ui/theme/brave-dark'
|
||||
import { withThemesProvider } from 'storybook-addon-styled-component-theme'
|
||||
// @ts-ignore
|
||||
import { boolean, number } from '@storybook/addon-knobs'
|
||||
|
||||
// Components
|
||||
import WebcompatReportModal from './modal/index'
|
||||
|
||||
// Themes
|
||||
const themes = [Theme, DarkTheme]
|
||||
export default {
|
||||
title: 'Webcompat Reporter'
|
||||
}
|
||||
|
||||
storiesOf('Webcompat Reporter', module)
|
||||
.addDecorator(withThemesProvider(themes))
|
||||
.add('Before submit', () => {
|
||||
const fakeOnSubmit = () => { /* noop */ }
|
||||
const fakeOnClose = () => { /* noop */ }
|
||||
return (
|
||||
<div style={{ width: '375px', margin: '0 auto' }}>
|
||||
<WebcompatReportModal
|
||||
siteUrl={'https://www.buzzfeed.com/'}
|
||||
submitted={false}
|
||||
onSubmitReport={fakeOnSubmit}
|
||||
onClose={fakeOnClose}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
.add('Submit confirmation', () => {
|
||||
const fakeOnSubmit = () => { /* noop */ }
|
||||
const fakeOnClose = () => { /* noop */ }
|
||||
return (
|
||||
<div style={{ width: '375px', margin: '0 auto' }}>
|
||||
<WebcompatReportModal
|
||||
siteUrl={'https://www.buzzfeed.com/'}
|
||||
submitted={true}
|
||||
onSubmitReport={fakeOnSubmit}
|
||||
onClose={fakeOnClose}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
export const BeforeSubmit = () => {
|
||||
const fakeOnSubmit = () => {
|
||||
/* noop */
|
||||
}
|
||||
const fakeOnClose = () => {
|
||||
/* noop */
|
||||
}
|
||||
return (
|
||||
<div style={{ width: '375px', margin: '0 auto' }}>
|
||||
<WebcompatReportModal
|
||||
siteUrl={'https://www.buzzfeed.com/'}
|
||||
submitted={false}
|
||||
onSubmitReport={fakeOnSubmit}
|
||||
onClose={fakeOnClose}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
BeforeSubmit.story = {
|
||||
name: 'Before submit'
|
||||
}
|
||||
|
||||
export const SubmitConfirmation = () => {
|
||||
const fakeOnSubmit = () => {
|
||||
/* noop */
|
||||
}
|
||||
const fakeOnClose = () => {
|
||||
/* noop */
|
||||
}
|
||||
return (
|
||||
<div style={{ width: '375px', margin: '0 auto' }}>
|
||||
<WebcompatReportModal
|
||||
siteUrl={'https://www.buzzfeed.com/'}
|
||||
submitted={true}
|
||||
onSubmitReport={fakeOnSubmit}
|
||||
onClose={fakeOnClose}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
SubmitConfirmation.story = {
|
||||
name: 'Submit confirmation'
|
||||
}
|
||||
|
||||
Generated
+5350
-2694
File diff suppressed because it is too large
Load Diff
+6
-9
@@ -240,15 +240,12 @@
|
||||
},
|
||||
"homepage": "https:/github.com/brave/brave-core#readme",
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.12.16",
|
||||
"@babel/core": "^7.13.1",
|
||||
"@dump247/storybook-state": "1.6.1",
|
||||
"@storybook/addon-actions": "5.3.21",
|
||||
"@storybook/addon-backgrounds": "5.3.21",
|
||||
"@storybook/addon-centered": "5.3.21",
|
||||
"@storybook/addon-knobs": "5.3.21",
|
||||
"@storybook/addon-options": "5.3.21",
|
||||
"@storybook/addons": "5.3.21",
|
||||
"@storybook/react": "5.3.21",
|
||||
"@storybook/addon-essentials": "^6.1.21",
|
||||
"@storybook/addon-knobs": "^6.1.11",
|
||||
"@storybook/addons": "^6.1.11",
|
||||
"@storybook/react": "^6.1.11",
|
||||
"@types/array-move": "2.0.0",
|
||||
"@types/bluebird": "3.5.33",
|
||||
"@types/chrome": "0.0.130",
|
||||
@@ -291,7 +288,6 @@
|
||||
"react-redux": "7.2.2",
|
||||
"redux": "4.0.5",
|
||||
"sinon": "7.5.0",
|
||||
"storybook-addon-styled-component-theme": "1.3.0",
|
||||
"style-loader": "0.23.1",
|
||||
"styled-components": "3.4.10",
|
||||
"ts-jest": "25.5.1",
|
||||
@@ -314,6 +310,7 @@
|
||||
"array-move": "^2.2.1",
|
||||
"bignumber.js": "^7.2.1",
|
||||
"bluebird": "^3.5.1",
|
||||
"core-js": "^3.9.1",
|
||||
"date-fns": "^2.15.0",
|
||||
"jszip": "^3.2.2",
|
||||
"parse-domain": "^3.0.2",
|
||||
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
Name: core-js
|
||||
URL: https://github.com/zloirock/core-js
|
||||
License: MIT
|
||||
License File: /brave/node_modules/core-js/LICENSE
|
||||
Reference in New Issue
Block a user