Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #533 from omnivore-app/OMN-506

Browse Source 
OMN-506
This commit is contained in:
Jackson Harper
2022-05-10 13:28:01 -07:00
committed by GitHub
parent 4c7dce330c 068a14b2b5
commit 40eda0a6ca
23 changed files with 801 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
packages/web/components/elements/Checkbox.tsx Normal file
View File

@ -0,0 +1,38 @@
import React from 'react'
import { styled } from '@stitches/react'
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
import { CheckIcon } from './images/CheckIcon'
const Checkbox = styled(CheckboxPrimitive.Root, {
all: 'unset',
width: 15.83,
height: 15.83,
borderRadius: 3,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
})
const CheckboxIndicator = styled(CheckboxPrimitive.Indicator, {
color: '#FFFFFF',
})
export const CheckboxComponent:React.FC<{
checked: boolean;
setChecked:(arg: boolean) => void;
}> = ({checked, setChecked}) => {
const toggleChecked = () => setChecked(!checked);
return (
<Checkbox css={{
border: checked ? '2px solid #F9D354': '2px solid #3F3E3C4D',
backgroundColor: checked ? '#F9D354' : '#FFFFFF'
}} checked={checked} onCheckedChange={toggleChecked}>
<CheckboxIndicator>
<CheckIcon />
</CheckboxIndicator>
</Checkbox>
)
}
export default CheckboxComponent

73
packages/web/components/elements/ExtensionsInstallHelp.tsx
View File

@ -60,7 +60,13 @@ const BrowserOption: React.FC<{
)
}
export default function ExtensionsInstallHelp(): JSX.Element {
type ExtensionsInstallHelpProps = {
onboarding?: boolean
}
export default function ExtensionsInstallHelp({
onboarding = false,
}: ExtensionsInstallHelpProps): JSX.Element {
const [browserValue, setBrowserValue] = React.useState<browserType>(
browserOptions[0]
)
@ -70,13 +76,13 @@ export default function ExtensionsInstallHelp(): JSX.Element {
css={{
display: 'grid',
gridTemplateColumns: '1fr 2fr',
gridTemplateRows: '.5fr .5fr .5fr',
gridTemplateRows: !onboarding ? '.5fr .5fr .5fr' : '.5fr',
backgroundColor: '$grayBg',
padding: '15px',
'@lg': {
gridTemplateColumns: '1fr 2fr 1fr',
gridTemplateRows: '1fr',
height: '9rem',
height: !onboarding ? '9rem' : 'auto',
},
}}
>
@ -106,8 +112,9 @@ export default function ExtensionsInstallHelp(): JSX.Element {
height: '130px',
}}
>
<img srcSet="/static/images/extension-preview.png,
/static/images/extension-preview@2x.png 2x" />
<img
src="/static/images/extension-preview.svg"
/>
</Box>
</Box>
<Box
@ -128,7 +135,7 @@ export default function ExtensionsInstallHelp(): JSX.Element {
fontSize: '12px',
lineHeight: '18px',
textAlign: 'right',
color: '$grayTextContrast',
color: !onboarding ? '$grayTextContrast' : 'rgba(10, 8, 6, 0.8)',
'@lg': {
display: 'none',
},
@ -144,7 +151,7 @@ export default function ExtensionsInstallHelp(): JSX.Element {
fontWeight: 700,
marginTop: 0,
marginBottom: 0,
color: '$grayTextContrast',
color: !onboarding ? '$grayTextContrast' : 'rgba(10, 8, 6, 0.8)',
lineHeight: '22.5px',
'@lg': {
fontSize: '16px',
@ -159,39 +166,44 @@ export default function ExtensionsInstallHelp(): JSX.Element {
css={{
size: '14px',
fontWeight: 400,
color: '$grayTextContrast',
color: !onboarding ? '$grayTextContrast' : 'rgba(10, 8, 6, 0.8)',
maxWidth: '20rem',
lineHeight: '21px',
gridColumn: '1 / span 3',
gridRow: '2 / 3',
alignSelf: 'center',
'@lgDown': {
display: !onboarding ? 'initial' : 'none',
},
'@lg': {
gridColumn: '2',
gridRow: '1',
alignSelf: 'center',
marginTop: '$4',
marginTop: !onboarding ? '$4' : 65,
},
}}
>
Installing the Omnivore browser extension is the best way to save pages
to Omnivore from your computer.
<br />
<Link passHref href="/help/saving-links">
<StyledAnchor
css={{
color: '$grayTextContrast',
fontSize: '14px',
fontWeight: 600,
display: 'none',
'@lg': {
display: 'initial',
textDecoration: 'underline',
},
}}
>
Learn more about the browser extension here.
</StyledAnchor>
</Link>
{!onboarding && (
<Link passHref href="/help/saving-links">
<StyledAnchor
css={{
color: '$grayTextContrast',
fontSize: '14px',
fontWeight: 600,
display: 'none',
'@lg': {
display: 'initial',
textDecoration: 'underline',
},
}}
>
Learn more about the browser extension here.
</StyledAnchor>
</Link>
)}
</StyledText>
<HStack
css={{
@ -201,9 +213,12 @@ export default function ExtensionsInstallHelp(): JSX.Element {
gridColumn: '1 / span 2',
width: '100%',
justifyContent: 'space-between',
flexDirection: 'row',
'@lg': {
gridColumn: '3',
gridRow: '1',
flexDirection: !onboarding ? 'row' : 'column',
justifyContent: !onboarding ? 'space-between' : 'center',
},
}}
>
@ -219,7 +234,7 @@ export default function ExtensionsInstallHelp(): JSX.Element {
height: '38px',
border: '1px solid #F9D354',
'@lg': {
width: '190px',
width: !onboarding ? '190px' : '210px',
},
}}
>
@ -272,9 +287,13 @@ export default function ExtensionsInstallHelp(): JSX.Element {
target="_blank"
href={extensionDownloadLinks[browserValue]}
css={{
marginLeft: '8px',
marginLeft: !onboarding ? '8px' : '0px',
marginTop: !onboarding ? '0px' : '8px',
height: 'min-content',
textDecoration: 'none',
width: !onboarding ? '100%' : '210px',
color: !onboarding ? '$grayTextContrast' : 'rgba(10, 8, 6, 0.8)',
textAlign: 'center',
'@lgDown': {
width: '27vw',
},

137
packages/web/components/elements/MobileInstallHelp.tsx
View File

@ -15,7 +15,13 @@ const TooltipStyle = {
color: '#0A0806',
}
export default function MobileInstallHelp(): JSX.Element {
type MobileInstallHelpProps = {
onboarding?: boolean
}
export default function MobileInstallHelp({
onboarding = false,
}: MobileInstallHelpProps): JSX.Element {
const [selectedTooltip, setSelectedTooltip] =
React.useState<string>('Available for Mac')
const platformSizes = [
@ -32,12 +38,15 @@ export default function MobileInstallHelp(): JSX.Element {
icon: <DeviceMobileCamera color="#F9D354" />,
},
]
const iosContainerStyles = { width: '100%', height: !onboarding ? '37px' : '40px'}
return (
<Box
css={{
display: 'grid',
gridTemplateColumns: '1fr 2fr',
gridTemplateRows: '.5fr .5fr .5fr',
gridTemplateRows: !onboarding ? '.5fr .5fr .5fr' : '.5fr',
backgroundColor: '$grayBg',
padding: '15px',
'@lg': {
@ -74,8 +83,10 @@ export default function MobileInstallHelp(): JSX.Element {
top: '-15px',
}}
>
<img srcSet="/static/images/mobile-app-preview.png,
/static/images/mobile-app-preview@2x.png 2x" />
<img
srcSet="/static/images/mobile-app-preview.png,
/static/images/mobile-app-preview@2x.png 2x"
/>
</Box>
</Box>
<Box
@ -96,7 +107,7 @@ export default function MobileInstallHelp(): JSX.Element {
fontSize: '12px',
lineHeight: '18px',
textAlign: 'right',
color: '$grayTextContrast',
color: !onboarding ? '$grayTextContrast' : 'rgba(10, 8, 6, 0.8)',
'@lg': {
display: 'none',
},
@ -112,7 +123,7 @@ export default function MobileInstallHelp(): JSX.Element {
fontWeight: 700,
marginTop: 0,
marginBottom: 0,
color: '$grayTextContrast',
color: !onboarding ? '$grayTextContrast' : 'rgba(10, 8, 6, 0.8)',
lineHeight: '22.5px',
'@lg': {
fontSize: '16px',
@ -128,72 +139,114 @@ export default function MobileInstallHelp(): JSX.Element {
size: '14px',
my: '$2',
fontWeight: 400,
color: '$grayTextContrast',
color: !onboarding ? '$grayTextContrast' : 'rgba(10, 8, 6, 0.8)',
maxWidth: '20rem',
lineHeight: '21px',
gridColumn: '1 / span 3',
gridRow: '2 / 3',
alignSelf: 'center',
'@lgDown': {
display: !onboarding ? 'initial' : 'none',
},
'@lg': {
gridColumn: '2',
gridRow: '1',
alignSelf: 'center',
marginTop: '$4',
marginTop: !onboarding ? '$4' : 65,
},
}}
>
With the Omnivore iOS app installed you can save any link using our
share extension.
<br />
<Link passHref href="/help/saving-links">
<StyledAnchor
css={{
color: '$grayTextContrast',
fontSize: '14px',
fontWeight: 600,
display: 'none',
'@lg': {
display: 'initial',
textDecoration: 'underline',
},
}}
>
Learn more about the share extension here.
</StyledAnchor>
</Link>
{!onboarding && (
<Link passHref href="/help/saving-links">
<StyledAnchor
css={{
color: '$grayTextContrast',
fontSize: '14px',
fontWeight: 600,
display: 'none',
'@lg': {
display: 'initial',
textDecoration: 'underline',
},
}}
>
Learn more about the share extension here.
</StyledAnchor>
</Link>
)}
</StyledText>
<HStack
alignment="center"
css={{
gridRow: '3',
display: 'flex',
alignItems: 'center',
gridColumn: '1 / span 2',
justifyContent: 'space-between',
justifyContent: !onboarding ? 'space-between' : 'center',
mt: !onboarding ? 'inherit' : 10,
'@lg': {
flexDirection: 'row-reverse',
flexDirection: !onboarding ? 'row-reverse' : 'column-reverse',
alignItems: !onboarding ? 'center' : 'flex-end',
gridColumn: '3',
gridRow: '1',
},
}}
>
<Box css={{ width: '100%', height: '37px', '@lg': {
pl: '16px',
}}}>
<a href="https://omnivore.app/install/ios" target="_blank" rel="noreferrer" style={{ display: 'inlineBlock', overflow: 'hidden' }}>
<img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=90x37&amp;releaseDate=1628121600&h=2bbc629b0455dbea136257c9f518e4b3" alt="Download on the App Store" style={{ }} />
</a>
<Box
css={
!onboarding
? { ...iosContainerStyles, '@lg': { pl: '16px' } }
: {
...iosContainerStyles,
pl: 16,
'@lg': {
marginTop: '24px',
justifyContent: 'flex-end',
display: 'flex',
},
}
}
>
<a
href="https://omnivore.app/install/ios"
target="_blank"
rel="noreferrer"
style={{ display: 'inlineBlock', overflow: 'hidden' }}
>
<img
src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=90x37&amp;releaseDate=1628121600&h=2bbc629b0455dbea136257c9f518e4b3"
alt="Download on the App Store"
style={{}}
/>
</a>
</Box>
<HStack
css={{
width: '40%',
justifyContent: 'space-between',
maxWidth: '13rem',
visibility: 'collapse',
'@lg': {
width: '100%',
visibility: 'unset',
},
}}
css={
!onboarding
? {
width: '40%',
justifyContent: 'space-between',
maxWidth: '13rem',
visibility: 'collapse',
'@lg': {
width: '100%',
visibility: 'unset',
},
}
: {
width: '40%',
justifyContent: 'space-between',
maxWidth: '13rem',
visibility: 'unset',
'@lg': {
width: '146px',
// maxWidth: '210px'
}
}
}
>
{platformSizes.map((item, idx) => (
<TooltipWrapped

2
packages/web/components/elements/StyledText.tsx
View File

@ -180,4 +180,4 @@ export const StyledAnchor = styled('a', {
export const StyledMark = styled('mark', {
})
})

12
packages/web/components/elements/images/CheckIcon.tsx Normal file
View File

@ -0,0 +1,12 @@
export function CheckIcon(): JSX.Element {
return (
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
fill="currentColor"
/>
</svg>
)
}

240
packages/web/components/templates/OnboardingLayout2.tsx Normal file
View File

@ -0,0 +1,240 @@
import React, { ReactNode } from 'react'
import { PageMetaData } from '../../components/patterns/PageMetaData'
import { VStack, HStack, Box } from '../../components/elements/LayoutPrimitives'
import { OmnivoreNameLogo } from '../../components/elements/images/OmnivoreNameLogo'
import { StyledText } from '../../components/elements/StyledText'
import { Button } from '../../components/elements/Button'
const TOTAL_ONBOARDING_PAGES = 3
type OnboardingLayout2Props = {
pageNumber: number
title: string
subTitle: string
description?: string
children: ReactNode
image?: ReactNode
}
const OnboardingLayout2 = ({
pageNumber,
title,
subTitle,
description,
image,
children,
}: OnboardingLayout2Props) => {
return (
<>
<PageMetaData
path={`/onboarding/0${pageNumber}`}
title={`Onboarding - ${pageNumber}`}
/>
<Box
css={{
display: 'grid',
gridTemplateColumns: '1fr',
minHeight: '100vh',
'@lg': {
gridTemplateColumns: '1fr 2fr',
},
}}
>
<VStack
css={{
background: '#FFFFFF',
padding: '21px 19px 0 19px',
position: 'relative',
'@lg': {
padding: '116px 32px 14px 48px',
},
}}
distribution="between"
>
<Box
css={{
backgroundColor: '#FFD234',
width: `${Math.floor(
(pageNumber * 100) / TOTAL_ONBOARDING_PAGES
)}%`,
height: '4px',
position: 'absolute',
top: '0',
left: '0',
'@lg': {
top: '$1',
},
borderRadius: '8px',
}}
/>
<Box
css={{
width: '100%',
'@sm': { textAlign: 'center' },
'@lg': { textAlign: 'left' },
}}
>
<HStack
distribution="start"
css={{
justifyContent: 'center',
'@lg': { justifyContent: 'flex-start' },
}}
alignment="center"
>
<OmnivoreNameLogo />
<StyledText
style="logoTitle"
css={{ color: '#0A080666', paddingLeft: '9px', fontSize: 15 }}
>
Omnivore
</StyledText>
</HStack>
<Box
css={{
marginTop: '24px',
fontWeight: '700',
fontSize: 32,
'@lgDown': {
marginTop: '5px',
fontSize: 28,
},
lineHeight: '125%',
color: 'rgba(10, 8, 6, 0.8)',
}}
>
{title}
</Box>
<Box
css={{
marginTop: '24px',
fontWeight: '400',
fontSize: 16,
lineHeight: '125%',
color: 'rgba(10, 8, 6, 0.8)',
}}
>
{subTitle}
</Box>
{image && (
<Box
css={{
height: '295px',
position: 'relative',
marginTop: '24px',
display: 'none',
'@lg': { display: 'block' },
}}
>
{image}
</Box>
)}
</Box>
<HStack
distribution="end"
css={{
width: '100%',
justifyContent: 'end',
'@lgDown': { display: 'none' },
}}
>
<Button
style="ctaSecondary"
css={{
width: '111px',
height: '44px',
color: 'rgba(10, 8, 6, 0.8)',
fontWeight: 600,
fontSize: '16px',
}}
>
Skip
</Button>
<Button
style="ctaDarkYellow"
css={{
width: '111px',
height: '44px',
color: 'rgba(10, 8, 6, 0.8)',
fontWeight: 600,
fontSize: '16px',
}}
>
Next
</Button>
</HStack>
</VStack>
<VStack
css={{
background: 'White',
'@sm': { alignItems: 'center' },
padding: '2vw 2vw 0 2vw',
'@lg': {
background: '#F5F5F4',
padding: '30px 71px 0 30px',
alignItems: 'flex-start',
},
'@xl': {
padding: '58px 71px 0 58px',
},
}}
distribution="start"
>
{description && (
<Box
css={{
fontWeight: 600,
fontSize: 16,
color: 'rgba(10, 8, 6, 0.8)',
'@lgDown': { paddingLeft: '11px' },
}}
>
{description}
</Box>
)}
{children}
</VStack>
</Box>
<HStack
css={{
position: 'fixed',
bottom: '0',
width: '100%',
padding: '20px',
justifyContent: 'space-between',
backgroundColor: '#ffffff',
'@lg': { display: 'none' },
}}
>
<Button
style="ctaSecondary"
css={{
width: '111px',
height: '44px',
textAlign: 'left',
color: 'rgba(10, 8, 6, 0.8)',
fontWeight: 600,
fontSize: '16px',
}}
>
Skip
</Button>
<Button
style="ctaDarkYellow"
css={{
width: '111px',
height: '44px',
color: 'rgba(10, 8, 6, 0.8)',
fontWeight: 600,
fontSize: '16px',
}}
>
Next
</Button>
</HStack>
</>
)
}
export default OnboardingLayout2

86
packages/web/components/templates/onboarding/02.tsx Normal file
View File

@ -0,0 +1,86 @@
import React from 'react'
import Link from 'next/link'
import OnboardingLayout2 from '../OnboardingLayout2'
import MobileInstallHelp from '../../elements/MobileInstallHelp'
import ExtensionsInstallHelp from '../../elements/ExtensionsInstallHelp'
import { StyledAnchor } from '../../elements/StyledText'
import { Box } from '../../elements/LayoutPrimitives'
const OnboardingPage2 = () => {
return (
<OnboardingLayout2
pageNumber={2}
title="Save links to read later"
subTitle="Save any link to your library using our apps and browser extensions"
description='Install our apps and browser extensions'
image={
<img
src='/static/images/onboarding/browser-extension.svg'
alt="Browser Extension"
/>
}
>
<Box css={{
"@lgDown": {
marginBottom: 100,
}
}}>
<Box
css={{
margin: '27px 0',
'@lg': {
border: '1px solid rgba(0, 0, 0, 0.06)',
boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
},
backgroundColor: 'White',
}}
>
<Box
css={{
'@lgDown': {
boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
border: '1px solid rgba(0, 0, 0, 0.06)',
},
}}
>
<MobileInstallHelp onboarding />
</Box>
<Box
css={{
'@lgDown': {
boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
border: '1px solid rgba(0, 0, 0, 0.06)',
marginTop: '8px',
},
}}
>
<ExtensionsInstallHelp onboarding />
</Box>
</Box>
<Box
css={{
'@lg': {
marginBottom: '20px',
},
}}
>
<Link passHref href="#">
<StyledAnchor
css={{
fontWeight: '400',
fontSize: '14px',
lineHeight: '17.5px',
color: 'rgba(10, 8, 6, 0.8)',
textDecoration: 'underline',
}}
>
Email me instructions
</StyledAnchor>
</Link>
</Box>
</Box>
</OnboardingLayout2>
)
}
export default OnboardingPage2

53
packages/web/components/templates/onboarding/03.tsx Normal file
View File

@ -0,0 +1,53 @@
import React from 'react'
import { VStack } from '../../elements/LayoutPrimitives'
import OnboardingLayout2 from '../OnboardingLayout2'
import { SelectOption } from './SelectOption'
const optionDetails = [
{
icon: 'TempleTelegram',
label: 'Temple Daily Telegram - Temple, Tx',
},
{
icon: 'NYTNewsletter',
label: 'Newsletters - The New York Times',
},
{
icon: 'NYT',
label: 'NYT’s The Morning',
},
{
icon: 'BBCNews',
label: 'London - BBC News',
},
{
icon: 'WashingtonDiplomat',
label: 'Washington Diplomat - Washington, Dc',
},
{
icon: 'Columbia',
label: 'The State - Columbia, Sc',
},
]
const OnboardingPage3 = () => {
return (
<OnboardingLayout2
subTitle="Omnivore creates an email address for you to subscribe to newsletters with."
description="Subscribe to some newsletters now"
title="Read all your Newsletters in Omnivore"
pageNumber={3}
>
<VStack css={{
marginTop: '$4',
width: '100%'
}}>
{optionDetails.map(({ icon, label }, idx) => (
<SelectOption key={idx} {...{ icon, label }} />
))}
</VStack>
</OnboardingLayout2>
)
}
export default OnboardingPage3

45
packages/web/components/templates/onboarding/SelectOption.tsx Normal file
View File

@ -0,0 +1,45 @@
import React from 'react'
import Checkbox from '../../elements/Checkbox'
import { HStack } from '../../elements/LayoutPrimitives'
import { StyledText } from '../../elements/StyledText'
export const SelectOption: React.FC<{
icon: string
label: string
}> = ({ icon, label }) => {
const [checked, setChecked] = React.useState(false)
const toggleChecked = () => setChecked(!checked)
return (
<HStack onClick={toggleChecked} css={{
border: checked ? '1px solid #F9D354' : '1px solid #0000000F',
backgroundColor: checked ? '#FDFAEC' : '#FFFFFF',
boxShadow: '0px 3px 11px 0px #201F1D0A',
justifyContent: 'flex-start',
alignItems: 'center',
borderRadius: '6px',
cursor: 'pointer',
padding: '$2 $3',
marginBottom: 7,
width: '100%'
}}>
<Checkbox {...{checked, setChecked}} />
<HStack css={{marginRight: '$2'}} />
<img
src={`/static/images/newsletter/${icon}.svg`}
alt={`${icon}-logo`}
/>
<StyledText
css={{
fontSize: 16,
fontWeight: 700,
marginLeft: '$2',
color: '#0A0806CC',
}}
>
{label}
</StyledText>
</HStack>
)
}

1
packages/web/package.json
View File

@ -19,6 +19,7 @@
},
"dependencies": {
"@radix-ui/react-avatar": "^0.1.1",
"@radix-ui/react-checkbox": "^0.1.5",
"@radix-ui/react-dialog": "^0.1.1",
"@radix-ui/react-dropdown-menu": "^0.1.1",
"@radix-ui/react-id": "^0.1.1",

5
packages/web/pages/onboarding/02.tsx Normal file
View File

@ -0,0 +1,5 @@
import OnboardingPage2 from "../../components/templates/onboarding/02";
export default function OnboardingPage02() {
return <OnboardingPage2 />
}

5
packages/web/pages/onboarding/03.tsx Normal file
View File

@ -0,0 +1,5 @@
import OnboardingPage3 from "../../components/templates/onboarding/03";
export default function OnboardingPage03() {
return <OnboardingPage3 />
}

9
packages/web/public/static/images/extension-preview.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

9
packages/web/public/static/images/newsletter/BBCNews.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect y="0.96875" width="30.0625" height="30.0625" rx="3.34028" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_2059_59413" transform="translate(-0.167526) scale(0.00515464)"/>
</pattern>
<image id="image0_2059_59413" width="259" height="194" xlink:href="data:image/png;base64,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"/>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

10
packages/web/public/static/images/newsletter/Columbia.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

9
packages/web/public/static/images/newsletter/NYT.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 223 KiB

9
packages/web/public/static/images/newsletter/NYTNewsletter.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect y="0.96875" width="30.0625" height="30.0625" rx="3.34028" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_2059_59395" transform="scale(0.00444444)"/>
</pattern>
<image id="image0_2059_59395" width="225" height="225" xlink:href="data:image/png;base64,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"/>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

10
packages/web/public/static/images/newsletter/TempleTelegram.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

10
packages/web/public/static/images/newsletter/WashingtonDiplomat.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

41
packages/web/public/static/images/onboarding/browser-extension.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

41
packages/web/stories/OnboardingLayout.stories.tsx Normal file
View File

@ -0,0 +1,41 @@
import { ComponentStory, ComponentMeta } from '@storybook/react'
import OnboardingLayout from '../components/templates/OnboardingLayout2'
export default {
title: 'Components/OnboardingLayout',
component: OnboardingLayout,
argTypes: {
pageNumber: {
description: 'The current page number of the onboarding process',
},
title: {
description: 'The title of the current onboading screen',
},
subTitle: {
description: 'The subtitle of the current onboading screen',
},
description: {
description: 'The description of the current onboading screen',
},
children: {
description: 'The right column on the page',
},
image: {
description: 'The image on the left column on the page',
},
},
} as ComponentMeta<typeof OnboardingLayout>
const Template: ComponentStory<typeof OnboardingLayout> = (args) => (
<OnboardingLayout {...args}>{args.children}</OnboardingLayout>
)
export const OnboardingLayoutStory = Template.bind({})
OnboardingLayoutStory.args = {
pageNumber: 2,
title: 'Save links to read later',
subTitle:
'Save any link to your library using our apps and browser extensions',
description: 'Install our apps and browser extensions',
children: <div>This is where the child is rendered.</div>
}

13
packages/web/stories/OnboardingPage2.stories.tsx Normal file
View File

@ -0,0 +1,13 @@
import { ComponentStory, ComponentMeta } from '@storybook/react'
import OnboardingPage2 from '../components/templates/onboarding/02'
export default {
title: 'Components/OnboardingPage2',
component: OnboardingPage2,
} as ComponentMeta<typeof OnboardingPage2>
export const OnboardingPage2Story: ComponentStory<typeof OnboardingPage2> = (args: any) => {
return (
<OnboardingPage2 />
)
}

13
packages/web/stories/OnboardingPage3.stories.tsx Normal file
View File

@ -0,0 +1,13 @@
import { ComponentStory, ComponentMeta } from '@storybook/react'
import OnboardingPage3 from '../components/templates/onboarding/03'
export default {
title: 'Components/OnboardingPage3',
component: OnboardingPage3,
} as ComponentMeta<typeof OnboardingPage3>
export const OnboardingPage3Story: ComponentStory<typeof OnboardingPage3> = (args: any) => {
return (
<OnboardingPage3 />
)
}