prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #694 from omnivore-app/fix/onboarding-template

Browse source 
Onboarding flow
This commit is contained in:
Jackson Harper 2022-05-23 16:20:08 -07:00 committed by GitHub
commit fd2ca33a15
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 438 additions and 429 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

265
packages/web/components/templates/OnboardingLayout.tsx
View file

@ -1,54 +1,249 @@
import { Box, VStack, HStack } from '../elements/LayoutPrimitives'
import React, { ReactNode } from 'react'
import { PageMetaData } from '../patterns/PageMetaData'
import { VStack, HStack, Box } from '../elements/LayoutPrimitives'
import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
import { theme } from '../tokens/stitches.config'
import { StyledText } from '../elements/StyledText'
import { Button } from '../elements/Button'
import Link from 'next/link'
const TOTAL_ONBOARDING_PAGES = 6
type OnboardingLayoutProps = {
children: React.ReactNode
pageNumber: number
title: string
subTitle: string
description?: string
children: ReactNode
image?: ReactNode
nextPage?: string,
reduceSpace?: boolean,
}
export function OnboardingLayout(props: OnboardingLayoutProps): JSX.Element {
export const OnboardingLayout = ({
pageNumber,
title,
subTitle,
description,
image,
children,
nextPage,
reduceSpace
}: OnboardingLayoutProps) => {
const NextButton = () => (
<Link href={nextPage ? nextPage : `/onboarding/0${pageNumber+1}`}>
<Button
style="ctaDarkYellow"
css={{
width: '111px',
height: '44px',
color: 'rgba(10, 8, 6, 0.8)',
fontWeight: 600,
fontSize: '16px',
textDecoration: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
as="a"
href={nextPage ? nextPage : `/onboarding/0${pageNumber+1}`}
>
Next
</Button>
</Link>
)
return (
<>
<VStack
alignment="center"
distribution="center"
css={{ bg: '$omnivoreYellow', height: '100vh' }}
>
<Box
css={{
position: 'relative',
height: '100%',
width: '100%',
}}
></Box>
{props.children}
</VStack>
<PageMetaData
path={`/onboarding/0${pageNumber}`}
title={`Onboarding - ${pageNumber}`}
/>
<Box
css={{
position: 'absolute',
top: 0,
left: 0,
m: '0',
width: '100%',
display: 'grid',
gridTemplateColumns: '1fr',
minHeight: '100vh',
'@lgDown': {
gridTemplateRows: reduceSpace ? 0 : 'initial',
},
'@lg': {
gridTemplateColumns: '1fr 2fr',
},
}}
>
<HStack
alignment="center"
distribution="between"
<VStack
css={{
mt: '1px',
ml: '18px',
mr: '0',
'@smDown': {
ml: '8px',
mt: '10px',
background: '#FFFFFF',
padding: '21px 19px 0 19px',
position: 'relative',
'@lg': {
padding: '116px 32px 14px 48px',
},
}}
distribution="between"
>
<OmnivoreNameLogo color={theme.colors.omnivoreGray.toString()} />
</HStack>
<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>
<NextButton />
</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={{
position: 'relative',
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>
<NextButton />
</HStack>
</>
)
}

247
packages/web/components/templates/OnboardingLayout2.tsx
View file

@ -1,247 +0,0 @@
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 = 6
type OnboardingLayout2Props = {
pageNumber: number
title: string
subTitle: string
description?: string
children: ReactNode
image?: ReactNode
nextPage?: string,
reduceSpace?: boolean,
}
const OnboardingLayout2 = ({
pageNumber,
title,
subTitle,
description,
image,
children,
nextPage,
reduceSpace
}: OnboardingLayout2Props) => {
const NextButton = () => (
<Button
style="ctaDarkYellow"
css={{
width: '111px',
height: '44px',
color: 'rgba(10, 8, 6, 0.8)',
fontWeight: 600,
fontSize: '16px',
textDecoration: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
as="a"
href={nextPage ? nextPage : `/onboarding/0${pageNumber+1}`}
>
Next
</Button>
)
return (
<>
<PageMetaData
path={`/onboarding/0${pageNumber}`}
title={`Onboarding - ${pageNumber}`}
/>
<Box
css={{
display: 'grid',
gridTemplateColumns: '1fr',
minHeight: '100vh',
'@lgDown': {
gridTemplateRows: reduceSpace ? 0 : 'initial',
},
'@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>
<NextButton />
</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={{
position: 'relative',
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>
<NextButton />
</HStack>
</>
)
}
export default OnboardingLayout2

54
packages/web/components/templates/ProfileLayout.tsx Normal file
View file

@ -0,0 +1,54 @@
import { Box, VStack, HStack } from '../elements/LayoutPrimitives'
import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
import { theme } from '../tokens/stitches.config'
type ProfileLayoutProps = {
children: React.ReactNode
}
export function ProfileLayout(props: ProfileLayoutProps): JSX.Element {
return (
<>
<VStack
alignment="center"
distribution="center"
css={{ bg: '$omnivoreYellow', height: '100vh' }}
>
<Box
css={{
position: 'relative',
height: '100%',
width: '100%',
}}
></Box>
{props.children}
</VStack>
<Box
css={{
position: 'absolute',
top: 0,
left: 0,
m: '0',
width: '100%',
}}
>
<HStack
alignment="center"
distribution="between"
css={{
mt: '1px',
ml: '18px',
mr: '0',
'@smDown': {
ml: '8px',
mt: '10px',
},
}}
>
<OmnivoreNameLogo color={theme.colors.omnivoreGray.toString()} />
</HStack>
</Box>
</>
)
}

16
packages/web/components/templates/onboarding/03.tsx → packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx
View file

@ -1,6 +1,6 @@
import React from 'react'
import { VStack } from '../../elements/LayoutPrimitives'
import OnboardingLayout2 from '../OnboardingLayout2'
import { OnboardingLayout } from '../OnboardingLayout'
import { SelectOption } from './SelectOption'
const optionDetails = [
@ -30,14 +30,17 @@ const optionDetails = [
},
]
const OnboardingPage3 = () => {
type OnboardingAddNewslettersProps = {
pageNumber: number
}
export const OnboardingAddNewsletters = (props: OnboardingAddNewslettersProps) => {
return (
<OnboardingLayout2
<OnboardingLayout
pageNumber={props.pageNumber}
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}
nextPage={'/onboarding/05'}
>
<VStack css={{
marginTop: '$4',
@ -47,8 +50,7 @@ const OnboardingPage3 = () => {
<SelectOption key={idx} {...{ icon, label }} />
))}
</VStack>
</OnboardingLayout2>
</OnboardingLayout>
)
}
export default OnboardingPage3

16
packages/web/components/templates/onboarding/05.tsx → packages/web/components/templates/onboarding/OnboardingHighlightInstructions.tsx
View file

@ -1,5 +1,5 @@
import React from 'react'
import OnboardingLayout2 from '../OnboardingLayout2'
import { OnboardingLayout } from '../OnboardingLayout'
import { Box } from '../../elements/LayoutPrimitives'
import { styled } from '../../tokens/stitches.config'
@ -13,10 +13,14 @@ const StyledImage = styled('img', {
}
})
const OnboardingPage5 = () => {
type OnboardingOrganizeInstructionsProps = {
pageNumber: number
}
export const OnboardingHighlightInstructions = (props: OnboardingOrganizeInstructionsProps) => {
return (
<OnboardingLayout2
pageNumber={5}
<OnboardingLayout
pageNumber={props.pageNumber}
title="Highlight and share"
subTitle="Information about creating and sharing highlights Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet."
>
@ -34,8 +38,6 @@ const OnboardingPage5 = () => {
alt="Highlight And Share"
/>
</Box>
</OnboardingLayout2>
</OnboardingLayout>
)
}
export default OnboardingPage5

15
packages/web/components/templates/onboarding/02.tsx → packages/web/components/templates/onboarding/OnboardingInstallInstructions.tsx
View file

@ -1,15 +1,19 @@
import React from 'react'
import Link from 'next/link'
import OnboardingLayout2 from '../OnboardingLayout2'
import { OnboardingLayout } from '../OnboardingLayout'
import MobileInstallHelp from '../../elements/MobileInstallHelp'
import ExtensionsInstallHelp from '../../elements/ExtensionsInstallHelp'
import { StyledAnchor } from '../../elements/StyledText'
import { Box } from '../../elements/LayoutPrimitives'
const OnboardingPage2 = () => {
type OnboardingInstallInstructionsProps = {
pageNumber: number
}
export const OnboardingInstallInstructions = (props: OnboardingInstallInstructionsProps) => {
return (
<OnboardingLayout2
pageNumber={2}
<OnboardingLayout
pageNumber={props.pageNumber}
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'
@ -79,8 +83,7 @@ const OnboardingPage2 = () => {
</Link>
</Box>
</Box>
</OnboardingLayout2>
</OnboardingLayout>
)
}
export default OnboardingPage2

15
packages/web/components/templates/onboarding/06.tsx → packages/web/components/templates/onboarding/OnboardingJoinCommunity.tsx
View file

@ -1,5 +1,5 @@
import React from 'react'
import OnboardingLayout2 from '../OnboardingLayout2'
import { OnboardingLayout } from '../OnboardingLayout'
import { Box, HStack, VStack } from '../../elements/LayoutPrimitives'
import { styled } from '../../tokens/stitches.config'
@ -34,10 +34,14 @@ const Container = styled(Box, {
}
})
const OnboardingPage6 = () => {
type OnboardingJoinCommunityProps = {
pageNumber: number
}
export const OnboardingJoinCommunity = (props: OnboardingJoinCommunityProps) => {
return (
<OnboardingLayout2
pageNumber={6}
<OnboardingLayout
pageNumber={props.pageNumber}
title="Join our Community"
subTitle='Omnivore is open source and open community, join us.'
nextPage='/home'
@ -67,8 +71,7 @@ const OnboardingPage6 = () => {
</VStack>
</Container>
</HStack>
</OnboardingLayout2>
</OnboardingLayout>
)
}
export default OnboardingPage6

16
packages/web/components/templates/onboarding/04.tsx → packages/web/components/templates/onboarding/OnboardingOrganizeInstructions.tsx
View file

@ -1,5 +1,5 @@
import React from 'react'
import OnboardingLayout2 from '../OnboardingLayout2'
import { OnboardingLayout } from '../OnboardingLayout'
import { Box } from '../../elements/LayoutPrimitives'
import { styled } from '../../tokens/stitches.config'
@ -7,10 +7,14 @@ const StyledImage = styled('img', {
position: 'relative',
})
const OnboardingPage4 = () => {
type OnboardingOrganizeInstructionsProps = {
pageNumber: number
}
export const OnboardingOrganizeInstructions = (props: OnboardingOrganizeInstructionsProps) => {
return (
<OnboardingLayout2
pageNumber={4}
<OnboardingLayout
pageNumber={props.pageNumber}
title="Organize all your content"
subTitle="Information about archiving and tagging
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet."
@ -48,8 +52,6 @@ const OnboardingPage4 = () => {
}}
/>
</Box>
</OnboardingLayout2>
</OnboardingLayout>
)
}
export default OnboardingPage4

16
packages/web/components/templates/onboarding/01.tsx → packages/web/components/templates/onboarding/OnboardingReaderPreview.tsx
View file

@ -1,5 +1,5 @@
import { SelectionOptionCard } from './SelectOption'
import OnboardingLayout2 from '../OnboardingLayout2'
import { OnboardingLayout } from '../OnboardingLayout'
import { Box, HStack, VStack } from '../../elements/LayoutPrimitives'
const articleDetails = [
@ -37,10 +37,14 @@ const articleDetails = [
},
]
const OnboardingPage1 = () => {
type OnboardingReaderPreviewProps = {
pageNumber: number
}
export const OnboardingReaderPreview = (props: OnboardingReaderPreviewProps) => {
return (
<OnboardingLayout2
pageNumber={1}
<OnboardingLayout
pageNumber={props.pageNumber}
title="Read Distraction Free"
subTitle="Omnivore's distraction free reader gives you an uncluttered reading experience"
description='Add some great reads to your library now:'
@ -74,8 +78,6 @@ const OnboardingPage1 = () => {
</Box>
</HStack>
</VStack>
</OnboardingLayout2>
</OnboardingLayout>
)
}
export default OnboardingPage1

6
packages/web/pages/confirm-profile.tsx
View file

@ -1,14 +1,14 @@
import { PageMetaData } from '../components/patterns/PageMetaData'
import { OnboardingLayout } from '../components/templates/OnboardingLayout'
import { ProfileLayout } from '../components/templates/ProfileLayout'
import { ConfirmProfileModal } from '../components/templates/ConfirmProfileModal'
export default function ConfirmProfilePage(): JSX.Element {
return (
<>
<PageMetaData title="Create Profile - Omnivore" path="/confirm-profile" />
<OnboardingLayout>
<ProfileLayout>
<ConfirmProfileModal />
</OnboardingLayout>
</ProfileLayout>
<div data-testid="confirm-profile-page-tag" />
</>
)

5
packages/web/pages/onboarding/01.tsx
View file

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

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

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

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

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

5
packages/web/pages/onboarding/04.tsx
View file

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

5
packages/web/pages/onboarding/05.tsx
View file

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

5
packages/web/pages/onboarding/06.tsx
View file

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

23
packages/web/pages/onboarding/[index].tsx Normal file
View file

@ -0,0 +1,23 @@
import { useRouter } from "next/router";
import { OnboardingAddNewsletters } from "../../components/templates/onboarding/OnboardingAddNewsletters";
import { OnboardingInstallInstructions } from "../../components/templates/onboarding/OnboardingInstallInstructions";
import { OnboardingJoinCommunity } from "../../components/templates/onboarding/OnboardingJoinCommunity";
import { OnboardingReaderPreview } from "../../components/templates/onboarding/OnboardingReaderPreview";
export default function Onboarding() {
const router = useRouter();
const { index: pageNumber } = router.query;
switch (pageNumber) {
case "01":
return <OnboardingReaderPreview pageNumber={1} />;
case "02":
return <OnboardingInstallInstructions pageNumber={2} />;
case "03":
return <OnboardingAddNewsletters pageNumber={3} />;
case "04":
return <OnboardingJoinCommunity pageNumber={4} />;
}
return <OnboardingReaderPreview pageNumber={1} />
}

88
packages/web/stories/OnboardingLayout.stories.tsx
View file

@ -1,44 +1,44 @@
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',
},
nextPage: {
description: 'The link to which the user is sent when next button is pressed'
}
},
} 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>
}
import { ComponentStory, ComponentMeta } from '@storybook/react'
import { OnboardingLayout } from '../components/templates/OnboardingLayout'
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',
},
nextPage: {
description: 'The link to which the user is sent when next button is pressed'
}
},
} 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>
}

10
packages/web/stories/OnboardingPage1.stories.tsx
View file

@ -1,13 +1,13 @@
import { ComponentStory, ComponentMeta } from '@storybook/react'
import OnboardingPage1 from '../components/templates/onboarding/01'
import { OnboardingReaderPreview } from '../components/templates/onboarding/OnboardingReaderPreview'
export default {
title: 'Onboarding-Pages/01',
component: OnboardingPage1,
} as ComponentMeta<typeof OnboardingPage1>
component: OnboardingReaderPreview,
} as ComponentMeta<typeof OnboardingReaderPreview>
export const OnboardingPage1Story: ComponentStory<typeof OnboardingPage1> = (args: any) => {
export const OnboardingPage1Story: ComponentStory<typeof OnboardingReaderPreview> = (args: any) => {
return (
<OnboardingPage1 />
<OnboardingReaderPreview pageNumber={1} />
)
}

10
packages/web/stories/OnboardingPage2.stories.tsx
View file

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

10
packages/web/stories/OnboardingPage3.stories.tsx
View file

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

10
packages/web/stories/OnboardingPage4.stories.tsx
View file

@ -1,13 +1,13 @@
import { ComponentStory, ComponentMeta } from '@storybook/react'
import OnboardingPage4 from '../components/templates/onboarding/04'
import { OnboardingOrganizeInstructions } from '../components/templates/onboarding/OnboardingOrganizeInstructions'
export default {
title: 'Onboarding-Pages/04',
component: OnboardingPage4,
} as ComponentMeta<typeof OnboardingPage4>
component: OnboardingOrganizeInstructions,
} as ComponentMeta<typeof OnboardingOrganizeInstructions>
export const OnboardingPage4Story: ComponentStory<typeof OnboardingPage4> = (args: any) => {
export const OnboardingPage4Story: ComponentStory<typeof OnboardingOrganizeInstructions> = (args: any) => {
return (
<OnboardingPage4 />
<OnboardingOrganizeInstructions pageNumber={4} />
)
}

10
packages/web/stories/OnboardingPage5.stories.tsx
View file

@ -1,13 +1,13 @@
import { ComponentStory, ComponentMeta } from '@storybook/react'
import OnboardingPage5 from '../components/templates/onboarding/05'
import { OnboardingHighlightInstructions } from '../components/templates/onboarding/OnboardingHighlightInstructions'
export default {
title: 'Onboarding-Pages/05',
component: OnboardingPage5,
} as ComponentMeta<typeof OnboardingPage5>
component: OnboardingHighlightInstructions,
} as ComponentMeta<typeof OnboardingHighlightInstructions>
export const OnboardingPage5Story: ComponentStory<typeof OnboardingPage5> = (args: any) => {
export const OnboardingPage5Story: ComponentStory<typeof OnboardingHighlightInstructions> = (args: any) => {
return (
<OnboardingPage5 />
<OnboardingHighlightInstructions pageNumber={5} />
)
}

10
packages/web/stories/OnboardingPage6.stories.tsx
View file

@ -1,13 +1,13 @@
import { ComponentStory, ComponentMeta } from '@storybook/react'
import OnboardingPage6 from '../components/templates/onboarding/06'
import { OnboardingJoinCommunity } from '../components/templates/onboarding/OnboardingJoinCommunity'
export default {
title: 'Onboarding-Pages/06',
component: OnboardingPage6,
} as ComponentMeta<typeof OnboardingPage6>
component: OnboardingJoinCommunity,
} as ComponentMeta<typeof OnboardingJoinCommunity>
export const OnboardingPage6Story: ComponentStory<typeof OnboardingPage6> = (args: any) => {
export const OnboardingPage6Story: ComponentStory<typeof OnboardingJoinCommunity> = (args: any) => {
return (
<OnboardingPage6 />
<OnboardingJoinCommunity pageNumber={6} />
)
}