mirror of
https://github.com/omnivore-app/omnivore.git
synced 2026-03-11 08:54:26 +00:00
Moved onboarding page 2 to it's on component and created a story for it and also onboardinglayout2
This commit is contained in:
gitstart-omnivore
parent
92026b6ab0
commit
a488f4cfa6
4 changed files with 143 additions and 84 deletions
86
packages/web/components/templates/onboarding/02.tsx
Normal file
86
packages/web/components/templates/onboarding/02.tsx
Normal 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
|
||||
|
|
@ -1,86 +1,5 @@
|
|||
import React from 'react'
|
||||
import { Box } from '../../components/elements/LayoutPrimitives'
|
||||
import { StyledAnchor } from '../../components/elements/StyledText'
|
||||
import ExtensionInstallHelp from '../../components/elements/ExtensionsInstallHelp'
|
||||
import MobileInstallHelp from '../../components/elements/MobileInstallHelp'
|
||||
import Link from 'next/link'
|
||||
import OnboardingLayout2 from '../../components/templates/OnboardingLayout2'
|
||||
import OnboardingPage2 from "../../components/templates/onboarding/02";
|
||||
|
||||
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',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ExtensionInstallHelp 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 function OnboardingPage02() {
|
||||
return <OnboardingPage2 />
|
||||
}
|
||||
|
||||
export default OnboardingPage2
|
||||
|
|
|
|||
41
packages/web/stories/OnboardingLayout.stories.tsx
Normal file
41
packages/web/stories/OnboardingLayout.stories.tsx
Normal 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/OnboardingPage2Story.stories.tsx
Normal file
13
packages/web/stories/OnboardingPage2Story.stories.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import { ComponentStory, ComponentMeta } from '@storybook/react'
|
||||
import OnboardingPage2 from '../components/templates/onboarding/02'
|
||||
|
||||
export default {
|
||||
title: 'Components/OnboardingPage2Story',
|
||||
component: OnboardingPage2,
|
||||
} as ComponentMeta<typeof OnboardingPage2>
|
||||
|
||||
export const OnboardingPage2Story: ComponentStory<typeof OnboardingPage2> = (args: any) => {
|
||||
return (
|
||||
<OnboardingPage2 />
|
||||
)
|
||||
}
|
||||
Loading…
Reference in a new issue