diff --git a/packages/web/components/templates/OnboardingLayout2.tsx b/packages/web/components/templates/OnboardingLayout2.tsx index 8ccc47254..baeb0697d 100644 --- a/packages/web/components/templates/OnboardingLayout2.tsx +++ b/packages/web/components/templates/OnboardingLayout2.tsx @@ -5,7 +5,7 @@ import { OmnivoreNameLogo } from '../../components/elements/images/OmnivoreNameL import { StyledText } from '../../components/elements/StyledText' import { Button } from '../../components/elements/Button' -const TOTAL_ONBOARDING_PAGES = 3 +const TOTAL_ONBOARDING_PAGES = 6 type OnboardingLayout2Props = { pageNumber: number @@ -14,6 +14,8 @@ type OnboardingLayout2Props = { description?: string children: ReactNode image?: ReactNode + nextPage?: string, + reduceSpace?: boolean, } const OnboardingLayout2 = ({ @@ -23,7 +25,30 @@ const OnboardingLayout2 = ({ description, image, children, + nextPage, + reduceSpace }: OnboardingLayout2Props) => { + const NextButton = () => ( + + ) + return ( <> Skip - + Skip - + ) diff --git a/packages/web/components/templates/onboarding/01.tsx b/packages/web/components/templates/onboarding/01.tsx new file mode 100644 index 000000000..f855a594d --- /dev/null +++ b/packages/web/components/templates/onboarding/01.tsx @@ -0,0 +1,81 @@ +import {SelectionOptionCard} from './SelectOption' +import OnboardingLayout2 from '../OnboardingLayout2' +import {Box, HStack, VStack} from '../../elements/LayoutPrimitives' + +const articlecDetails = [ + { + title: 'Winnebago Electric RV Concept', + author: 'Omnivore', + originText: 'wired.com', + description: "An incredible number of lines from William Shakespeare's plays have becomeso ingrained in modern vernacular …", + image: "https://images.hgmsites.net/sml/cadillac_100789665_s.jpg", + labels: [] + }, + { + title: 'Winnebago Electric RV Concept', + author: 'Omnivore', + originText: 'wired.com', + description: "An incredible number of lines from William Shakespeare's plays have becomeso ingrained in modern vernacular …", + image: "https://images.hgmsites.net/sml/cadillac_100789665_s.jpg", + labels: [] + }, + { + title: '21 Phrases You Use Without Realizin…', + author: 'Omnivore', + originText: 'wired.com', + description: "An incredible number of lines from William Shakespeare's plays have becomeso ingrained in modern vernacular …", + image: "", + labels: [], + }, + { + title: '21 Phrases You Use Without Realizin…', + author: 'Omnivore', + originText: 'wired.com', + description: "An incredible number of lines from William Shakespeare's plays have becomeso ingrained in modern vernacular …", + image: "https://images.hgmsites.net/sml/cadillac_100789665_s.jpg", + labels: [] + }, +] + +const OnboardingPage1 = () => { + return ( + + } + > + + + + {articlecDetails.map(({ title, author, originText, description, image, labels }, idx) => ( + + ))} + + + + + ) +} + +export default OnboardingPage1 diff --git a/packages/web/components/templates/onboarding/03.tsx b/packages/web/components/templates/onboarding/03.tsx index 75fa651e5..dd410e3a3 100644 --- a/packages/web/components/templates/onboarding/03.tsx +++ b/packages/web/components/templates/onboarding/03.tsx @@ -37,6 +37,7 @@ const OnboardingPage3 = () => { description="Subscribe to some newsletters now" title="Read all your Newsletters in Omnivore" pageNumber={3} + nextPage={'/onboarding/05'} > { + return ( + + + + + + + ) +} + +export default OnboardingPage4 diff --git a/packages/web/components/templates/onboarding/05.tsx b/packages/web/components/templates/onboarding/05.tsx new file mode 100644 index 000000000..bc7a910ac --- /dev/null +++ b/packages/web/components/templates/onboarding/05.tsx @@ -0,0 +1,41 @@ +import React from 'react' +import OnboardingLayout2 from '../OnboardingLayout2' +import { Box } from '../../elements/LayoutPrimitives' +import { styled } from '../../tokens/stitches.config' + +const StyledImage = styled('img', { + position: 'relative', + width: '100%', + height: '100%', + '@smDown': { + width: '160%', + height: 'auto', + } +}) + +const OnboardingPage5 = () => { + return ( + + + + + + ) +} + +export default OnboardingPage5 diff --git a/packages/web/components/templates/onboarding/06.tsx b/packages/web/components/templates/onboarding/06.tsx new file mode 100644 index 000000000..a45914a7d --- /dev/null +++ b/packages/web/components/templates/onboarding/06.tsx @@ -0,0 +1,74 @@ +import React from 'react' +import OnboardingLayout2 from '../OnboardingLayout2' +import { Box, HStack, VStack } from '../../elements/LayoutPrimitives' +import { styled } from '../../tokens/stitches.config' + +const IconContainer = styled(Box, {width: '30%', justifyContent: 'center', display: 'flex'}) +const Icon = styled('img', {width: 100}) +const Row = styled(HStack, { + width: '100%', + padding: 30, + borderBottom: '1px solid rgba(0, 0, 0, 0.06)', + + '@smDown': { + padding: 20, + } +}) +const Text = styled(Box, { + width: '65%', + alignSelf: 'center', + color: '#0A0806CC', + fontSize: 24, + fontWeight: '700', + '@smDown': { + fontSize: 16, + } +}) +const Container = styled(Box, { + width: 523, + border: '1px solid #0000000F', + background: 'white', + + '@smDown': { + width: '95%', + } +}) + +const OnboardingPage6 = () => { + return ( + + + + + + + + + Star us on Github + + + + + + Join us on Discord + + + + + + Like us on Product Hunt + + + + + + ) +} + +export default OnboardingPage6 diff --git a/packages/web/components/templates/onboarding/SelectOption.tsx b/packages/web/components/templates/onboarding/SelectOption.tsx index 1f863c884..84c5c4af0 100644 --- a/packages/web/components/templates/onboarding/SelectOption.tsx +++ b/packages/web/components/templates/onboarding/SelectOption.tsx @@ -1,7 +1,11 @@ import React from 'react' import Checkbox from '../../elements/Checkbox' -import { HStack } from '../../elements/LayoutPrimitives' +import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives' +import { CoverImage } from '../../elements/CoverImage' import { StyledText } from '../../elements/StyledText' +import { authoredByText } from '../../patterns/ArticleSubtitle' +import { LabelChip } from '../../elements/LabelChip' +import { Label } from '../../../lib/networking/fragments/labelFragment' export const SelectOption: React.FC<{ icon: string @@ -43,3 +47,179 @@ export const SelectOption: React.FC<{ ) } + +export const SelectionOptionCard: React.FC <{ + title: string, + author: string, + originText: string, + description: string, + image: string, + labels: Label[] +}> = ({title, author, originText, description, image, labels}) => { + const [checked, setChecked] = React.useState(false) + const toggleChecked = () => setChecked(!checked) + + return ( + + div': { + borderRadius: '100vmax 100vmax 0 0', + }, + }} + > + + + + + + + + + { + // This is here to prevent menu click events from bubbling + // up and causing us to "click" on the link item. + e.stopPropagation() + }} + > + + + + + {author && ( + + {authoredByText(author)} + + )} + + {originText} + + + + + + + {description} + + {image && ( + { + ;(e.target as HTMLElement).style.display = 'none' + }} + /> + )} + + + {labels?.map(({ name, color }, index) => ( + + ))} + + + ) +} + +type CardTitleProps = { + title: string +} + +function CardTitle(props: CardTitleProps): JSX.Element { + return ( + + {props.title} + + ) +} diff --git a/packages/web/pages/onboarding/01.tsx b/packages/web/pages/onboarding/01.tsx new file mode 100644 index 000000000..df56ea745 --- /dev/null +++ b/packages/web/pages/onboarding/01.tsx @@ -0,0 +1,5 @@ +import OnboardingPage1 from "../../components/templates/onboarding/01"; + +export default function OnboardingPage01() { + return +} diff --git a/packages/web/pages/onboarding/04.tsx b/packages/web/pages/onboarding/04.tsx new file mode 100644 index 000000000..70c2828e5 --- /dev/null +++ b/packages/web/pages/onboarding/04.tsx @@ -0,0 +1,5 @@ +import OnboardingPage4 from "../../components/templates/onboarding/04"; + +export default function OnboardingPage04() { + return +} diff --git a/packages/web/pages/onboarding/05.tsx b/packages/web/pages/onboarding/05.tsx new file mode 100644 index 000000000..a4fa0d597 --- /dev/null +++ b/packages/web/pages/onboarding/05.tsx @@ -0,0 +1,5 @@ +import OnboardingPage5 from "../../components/templates/onboarding/05"; + +export default function OnboardingPage05() { + return +} diff --git a/packages/web/pages/onboarding/06.tsx b/packages/web/pages/onboarding/06.tsx new file mode 100644 index 000000000..500d3f8d8 --- /dev/null +++ b/packages/web/pages/onboarding/06.tsx @@ -0,0 +1,5 @@ +import OnboardingPage6 from "../../components/templates/onboarding/06"; + +export default function OnboardingPage06() { + return +} diff --git a/packages/web/public/static/images/onboarding/discord.svg b/packages/web/public/static/images/onboarding/discord.svg new file mode 100644 index 000000000..01685726f --- /dev/null +++ b/packages/web/public/static/images/onboarding/discord.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/web/public/static/images/onboarding/expanded-controls.svg b/packages/web/public/static/images/onboarding/expanded-controls.svg new file mode 100644 index 000000000..85c75dacd --- /dev/null +++ b/packages/web/public/static/images/onboarding/expanded-controls.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/web/public/static/images/onboarding/github.svg b/packages/web/public/static/images/onboarding/github.svg new file mode 100644 index 000000000..c8fd76698 --- /dev/null +++ b/packages/web/public/static/images/onboarding/github.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/web/public/static/images/onboarding/highlight-and-share.svg b/packages/web/public/static/images/onboarding/highlight-and-share.svg new file mode 100644 index 000000000..4eba2cf1f --- /dev/null +++ b/packages/web/public/static/images/onboarding/highlight-and-share.svg @@ -0,0 +1,130 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/web/public/static/images/onboarding/organize-content-mobile.svg b/packages/web/public/static/images/onboarding/organize-content-mobile.svg new file mode 100644 index 000000000..5831c7249 --- /dev/null +++ b/packages/web/public/static/images/onboarding/organize-content-mobile.svg @@ -0,0 +1,519 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/web/public/static/images/onboarding/organize-content.svg b/packages/web/public/static/images/onboarding/organize-content.svg new file mode 100644 index 000000000..3a5f7d680 --- /dev/null +++ b/packages/web/public/static/images/onboarding/organize-content.svg @@ -0,0 +1,675 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/web/public/static/images/onboarding/producthunt.svg b/packages/web/public/static/images/onboarding/producthunt.svg new file mode 100644 index 000000000..d4b7f1ec5 --- /dev/null +++ b/packages/web/public/static/images/onboarding/producthunt.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/web/stories/OnboardingLayout.stories.tsx b/packages/web/stories/OnboardingLayout.stories.tsx index 0e470fa59..d735174d6 100644 --- a/packages/web/stories/OnboardingLayout.stories.tsx +++ b/packages/web/stories/OnboardingLayout.stories.tsx @@ -1,41 +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', - }, - }, -} as ComponentMeta - -const Template: ComponentStory = (args) => ( - {args.children} -) - -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:
This is where the child is rendered.
-} +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 + +const Template: ComponentStory = (args) => ( + {args.children} +) + +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:
This is where the child is rendered.
+} diff --git a/packages/web/stories/OnboardingPage1.stories.tsx b/packages/web/stories/OnboardingPage1.stories.tsx new file mode 100644 index 000000000..7afa88818 --- /dev/null +++ b/packages/web/stories/OnboardingPage1.stories.tsx @@ -0,0 +1,13 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react' +import OnboardingPage1 from '../components/templates/onboarding/01' + +export default { + title: 'Onboarding-Pages/01', + component: OnboardingPage1, +} as ComponentMeta + +export const OnboardingPage1Story: ComponentStory = (args: any) => { + return ( + + ) +} diff --git a/packages/web/stories/OnboardingPage2.stories.tsx b/packages/web/stories/OnboardingPage2.stories.tsx index 6712aa0ae..90e13abe3 100644 --- a/packages/web/stories/OnboardingPage2.stories.tsx +++ b/packages/web/stories/OnboardingPage2.stories.tsx @@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react' import OnboardingPage2 from '../components/templates/onboarding/02' export default { - title: 'Components/OnboardingPage2', + title: 'Onboarding-Pages/02', component: OnboardingPage2, } as ComponentMeta diff --git a/packages/web/stories/OnboardingPage3.stories.tsx b/packages/web/stories/OnboardingPage3.stories.tsx index 9963217eb..45ac49ec5 100644 --- a/packages/web/stories/OnboardingPage3.stories.tsx +++ b/packages/web/stories/OnboardingPage3.stories.tsx @@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react' import OnboardingPage3 from '../components/templates/onboarding/03' export default { - title: 'Components/OnboardingPage3', + title: 'Onboarding-Pages/03', component: OnboardingPage3, } as ComponentMeta diff --git a/packages/web/stories/OnboardingPage4.stories.tsx b/packages/web/stories/OnboardingPage4.stories.tsx new file mode 100644 index 000000000..1dfda308a --- /dev/null +++ b/packages/web/stories/OnboardingPage4.stories.tsx @@ -0,0 +1,13 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react' +import OnboardingPage4 from '../components/templates/onboarding/04' + +export default { + title: 'Onboarding-Pages/04', + component: OnboardingPage4, +} as ComponentMeta + +export const OnboardingPage4Story: ComponentStory = (args: any) => { + return ( + + ) +} diff --git a/packages/web/stories/OnboardingPage5.stories.tsx b/packages/web/stories/OnboardingPage5.stories.tsx new file mode 100644 index 000000000..d54c16322 --- /dev/null +++ b/packages/web/stories/OnboardingPage5.stories.tsx @@ -0,0 +1,13 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react' +import OnboardingPage5 from '../components/templates/onboarding/05' + +export default { + title: 'Onboarding-Pages/05', + component: OnboardingPage5, +} as ComponentMeta + +export const OnboardingPage5Story: ComponentStory = (args: any) => { + return ( + + ) +} diff --git a/packages/web/stories/OnboardingPage6.stories.tsx b/packages/web/stories/OnboardingPage6.stories.tsx new file mode 100644 index 000000000..ef1cef649 --- /dev/null +++ b/packages/web/stories/OnboardingPage6.stories.tsx @@ -0,0 +1,13 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react' +import OnboardingPage6 from '../components/templates/onboarding/06' + +export default { + title: 'Onboarding-Pages/06', + component: OnboardingPage6, +} as ComponentMeta + +export const OnboardingPage6Story: ComponentStory = (args: any) => { + return ( + + ) +}