diff --git a/packages/web/components/templates/OnboardingLayout.tsx b/packages/web/components/templates/OnboardingLayout.tsx index 8112bda34..cdc067b12 100644 --- a/packages/web/components/templates/OnboardingLayout.tsx +++ b/packages/web/components/templates/OnboardingLayout.tsx @@ -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 = () => ( + + + + ) + return ( <> - - - {props.children} - - + - - - + + + + + + Omnivore + + + + {title} + + + {subTitle} + + {image && ( + + {image} + + )} + + + + + + + + {description && ( + + {description} + + )} + {children} + + + + + ) } + diff --git a/packages/web/components/templates/OnboardingLayout2.tsx b/packages/web/components/templates/OnboardingLayout2.tsx deleted file mode 100644 index baeb0697d..000000000 --- a/packages/web/components/templates/OnboardingLayout2.tsx +++ /dev/null @@ -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 = () => ( - - ) - - return ( - <> - - - - - - - - - Omnivore - - - - {title} - - - {subTitle} - - {image && ( - - {image} - - )} - - - - - - - - {description && ( - - {description} - - )} - {children} - - - - - - - - ) -} - -export default OnboardingLayout2 diff --git a/packages/web/components/templates/ProfileLayout.tsx b/packages/web/components/templates/ProfileLayout.tsx new file mode 100644 index 000000000..3e89faa5f --- /dev/null +++ b/packages/web/components/templates/ProfileLayout.tsx @@ -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 ( + <> + + + {props.children} + + + + + + + + + ) +} diff --git a/packages/web/components/templates/onboarding/03.tsx b/packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx similarity index 78% rename from packages/web/components/templates/onboarding/03.tsx rename to packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx index dd410e3a3..ec3e74291 100644 --- a/packages/web/components/templates/onboarding/03.tsx +++ b/packages/web/components/templates/onboarding/OnboardingAddNewsletters.tsx @@ -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 ( - { ))} - + ) } -export default OnboardingPage3 diff --git a/packages/web/components/templates/onboarding/05.tsx b/packages/web/components/templates/onboarding/OnboardingHighlightInstructions.tsx similarity index 75% rename from packages/web/components/templates/onboarding/05.tsx rename to packages/web/components/templates/onboarding/OnboardingHighlightInstructions.tsx index bc7a910ac..fbf3614a9 100644 --- a/packages/web/components/templates/onboarding/05.tsx +++ b/packages/web/components/templates/onboarding/OnboardingHighlightInstructions.tsx @@ -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 ( - @@ -34,8 +38,6 @@ const OnboardingPage5 = () => { alt="Highlight And Share" /> - + ) } - -export default OnboardingPage5 diff --git a/packages/web/components/templates/onboarding/02.tsx b/packages/web/components/templates/onboarding/OnboardingInstallInstructions.tsx similarity index 88% rename from packages/web/components/templates/onboarding/02.tsx rename to packages/web/components/templates/onboarding/OnboardingInstallInstructions.tsx index f089a4639..cfc83dc93 100644 --- a/packages/web/components/templates/onboarding/02.tsx +++ b/packages/web/components/templates/onboarding/OnboardingInstallInstructions.tsx @@ -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 ( - { - + ) } -export default OnboardingPage2 diff --git a/packages/web/components/templates/onboarding/06.tsx b/packages/web/components/templates/onboarding/OnboardingJoinCommunity.tsx similarity index 87% rename from packages/web/components/templates/onboarding/06.tsx rename to packages/web/components/templates/onboarding/OnboardingJoinCommunity.tsx index 6ec216614..c85711f43 100644 --- a/packages/web/components/templates/onboarding/06.tsx +++ b/packages/web/components/templates/onboarding/OnboardingJoinCommunity.tsx @@ -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 ( - { - + ) } -export default OnboardingPage6 diff --git a/packages/web/components/templates/onboarding/04.tsx b/packages/web/components/templates/onboarding/OnboardingOrganizeInstructions.tsx similarity index 81% rename from packages/web/components/templates/onboarding/04.tsx rename to packages/web/components/templates/onboarding/OnboardingOrganizeInstructions.tsx index 4e038fb89..3704732c2 100644 --- a/packages/web/components/templates/onboarding/04.tsx +++ b/packages/web/components/templates/onboarding/OnboardingOrganizeInstructions.tsx @@ -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 ( - { }} /> - + ) } - -export default OnboardingPage4 diff --git a/packages/web/components/templates/onboarding/01.tsx b/packages/web/components/templates/onboarding/OnboardingReaderPreview.tsx similarity index 89% rename from packages/web/components/templates/onboarding/01.tsx rename to packages/web/components/templates/onboarding/OnboardingReaderPreview.tsx index e78c504eb..fac558917 100644 --- a/packages/web/components/templates/onboarding/01.tsx +++ b/packages/web/components/templates/onboarding/OnboardingReaderPreview.tsx @@ -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 ( - { - + ) } - -export default OnboardingPage1 diff --git a/packages/web/pages/confirm-profile.tsx b/packages/web/pages/confirm-profile.tsx index 0e7c5c5d7..19f1237b7 100644 --- a/packages/web/pages/confirm-profile.tsx +++ b/packages/web/pages/confirm-profile.tsx @@ -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 ( <> - + - +
) diff --git a/packages/web/pages/onboarding/01.tsx b/packages/web/pages/onboarding/01.tsx deleted file mode 100644 index df56ea745..000000000 --- a/packages/web/pages/onboarding/01.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import OnboardingPage1 from "../../components/templates/onboarding/01"; - -export default function OnboardingPage01() { - return -} diff --git a/packages/web/pages/onboarding/02.tsx b/packages/web/pages/onboarding/02.tsx deleted file mode 100644 index 07e8adbd4..000000000 --- a/packages/web/pages/onboarding/02.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import OnboardingPage2 from "../../components/templates/onboarding/02"; - -export default function OnboardingPage02() { - return -} diff --git a/packages/web/pages/onboarding/03.tsx b/packages/web/pages/onboarding/03.tsx deleted file mode 100644 index d2c16adc8..000000000 --- a/packages/web/pages/onboarding/03.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import OnboardingPage3 from "../../components/templates/onboarding/03"; - -export default function OnboardingPage03() { - return -} diff --git a/packages/web/pages/onboarding/04.tsx b/packages/web/pages/onboarding/04.tsx deleted file mode 100644 index 70c2828e5..000000000 --- a/packages/web/pages/onboarding/04.tsx +++ /dev/null @@ -1,5 +0,0 @@ -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 deleted file mode 100644 index a4fa0d597..000000000 --- a/packages/web/pages/onboarding/05.tsx +++ /dev/null @@ -1,5 +0,0 @@ -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 deleted file mode 100644 index 500d3f8d8..000000000 --- a/packages/web/pages/onboarding/06.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import OnboardingPage6 from "../../components/templates/onboarding/06"; - -export default function OnboardingPage06() { - return -} diff --git a/packages/web/pages/onboarding/[index].tsx b/packages/web/pages/onboarding/[index].tsx new file mode 100644 index 000000000..b9ca0f7d1 --- /dev/null +++ b/packages/web/pages/onboarding/[index].tsx @@ -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 ; + case "02": + return ; + case "03": + return ; + case "04": + return ; + } + + return +} diff --git a/packages/web/stories/OnboardingLayout.stories.tsx b/packages/web/stories/OnboardingLayout.stories.tsx index d735174d6..e801feaaa 100644 --- a/packages/web/stories/OnboardingLayout.stories.tsx +++ b/packages/web/stories/OnboardingLayout.stories.tsx @@ -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 - -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/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 + +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 index 7afa88818..44500c9d3 100644 --- a/packages/web/stories/OnboardingPage1.stories.tsx +++ b/packages/web/stories/OnboardingPage1.stories.tsx @@ -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 + component: OnboardingReaderPreview, +} as ComponentMeta -export const OnboardingPage1Story: ComponentStory = (args: any) => { +export const OnboardingPage1Story: ComponentStory = (args: any) => { return ( - + ) } diff --git a/packages/web/stories/OnboardingPage2.stories.tsx b/packages/web/stories/OnboardingPage2.stories.tsx index 90e13abe3..8f07d3fcc 100644 --- a/packages/web/stories/OnboardingPage2.stories.tsx +++ b/packages/web/stories/OnboardingPage2.stories.tsx @@ -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 + component: OnboardingInstallInstructions, +} as ComponentMeta -export const OnboardingPage2Story: ComponentStory = (args: any) => { +export const OnboardingPage2Story: ComponentStory = (args: any) => { return ( - + ) } diff --git a/packages/web/stories/OnboardingPage3.stories.tsx b/packages/web/stories/OnboardingPage3.stories.tsx index 45ac49ec5..e3cbcd66e 100644 --- a/packages/web/stories/OnboardingPage3.stories.tsx +++ b/packages/web/stories/OnboardingPage3.stories.tsx @@ -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 + component: OnboardingAddNewsletters, +} as ComponentMeta -export const OnboardingPage3Story: ComponentStory = (args: any) => { +export const OnboardingPage3Story: ComponentStory = (args: any) => { return ( - + ) } diff --git a/packages/web/stories/OnboardingPage4.stories.tsx b/packages/web/stories/OnboardingPage4.stories.tsx index 1dfda308a..59c219f16 100644 --- a/packages/web/stories/OnboardingPage4.stories.tsx +++ b/packages/web/stories/OnboardingPage4.stories.tsx @@ -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 + component: OnboardingOrganizeInstructions, +} as ComponentMeta -export const OnboardingPage4Story: ComponentStory = (args: any) => { +export const OnboardingPage4Story: ComponentStory = (args: any) => { return ( - + ) } diff --git a/packages/web/stories/OnboardingPage5.stories.tsx b/packages/web/stories/OnboardingPage5.stories.tsx index d54c16322..da2ce728d 100644 --- a/packages/web/stories/OnboardingPage5.stories.tsx +++ b/packages/web/stories/OnboardingPage5.stories.tsx @@ -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 + component: OnboardingHighlightInstructions, +} as ComponentMeta -export const OnboardingPage5Story: ComponentStory = (args: any) => { +export const OnboardingPage5Story: ComponentStory = (args: any) => { return ( - + ) } diff --git a/packages/web/stories/OnboardingPage6.stories.tsx b/packages/web/stories/OnboardingPage6.stories.tsx index ef1cef649..a35ec04f3 100644 --- a/packages/web/stories/OnboardingPage6.stories.tsx +++ b/packages/web/stories/OnboardingPage6.stories.tsx @@ -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 + component: OnboardingJoinCommunity, +} as ComponentMeta -export const OnboardingPage6Story: ComponentStory = (args: any) => { +export const OnboardingPage6Story: ComponentStory = (args: any) => { return ( - + ) }