diff --git a/packages/web/components/elements/Checkbox.tsx b/packages/web/components/elements/Checkbox.tsx new file mode 100644 index 000000000..130bb260d --- /dev/null +++ b/packages/web/components/elements/Checkbox.tsx @@ -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 ( + + + + + + ) +} + +export default CheckboxComponent diff --git a/packages/web/components/elements/ExtensionsInstallHelp.tsx b/packages/web/components/elements/ExtensionsInstallHelp.tsx index 3fc1fbb6d..9e087b989 100644 --- a/packages/web/components/elements/ExtensionsInstallHelp.tsx +++ b/packages/web/components/elements/ExtensionsInstallHelp.tsx @@ -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( 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', }} > - + Installing the Omnivore browser extension is the best way to save pages to Omnivore from your computer.
- - - Learn more about the browser extension here. - - + {!onboarding && ( + + + Learn more about the browser extension here. + + + )} @@ -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', }, diff --git a/packages/web/components/elements/MobileInstallHelp.tsx b/packages/web/components/elements/MobileInstallHelp.tsx index b2c4b5bdf..eedde7b87 100644 --- a/packages/web/components/elements/MobileInstallHelp.tsx +++ b/packages/web/components/elements/MobileInstallHelp.tsx @@ -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('Available for Mac') const platformSizes = [ @@ -32,12 +38,15 @@ export default function MobileInstallHelp(): JSX.Element { icon: , }, ] + + const iosContainerStyles = { width: '100%', height: !onboarding ? '37px' : '40px'} + return ( - + With the Omnivore iOS app installed you can save any link using our share extension.
- - - Learn more about the share extension here. - - + {!onboarding && ( + + + Learn more about the share extension here. + + + )} - - - Download on the App Store - + + + Download on the App Store + {platformSizes.map((item, idx) => ( + + + ) +} diff --git a/packages/web/components/templates/OnboardingLayout2.tsx b/packages/web/components/templates/OnboardingLayout2.tsx new file mode 100644 index 000000000..8ccc47254 --- /dev/null +++ b/packages/web/components/templates/OnboardingLayout2.tsx @@ -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 ( + <> + + + + + + + + + Omnivore + + + + {title} + + + {subTitle} + + {image && ( + + {image} + + )} + + + + + + + + {description && ( + + {description} + + )} + {children} + + + + + + + + ) +} + +export default OnboardingLayout2 diff --git a/packages/web/components/templates/onboarding/02.tsx b/packages/web/components/templates/onboarding/02.tsx new file mode 100644 index 000000000..f089a4639 --- /dev/null +++ b/packages/web/components/templates/onboarding/02.tsx @@ -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 ( + + } + > + + + + + + + + + + + + + Email me instructions + + + + + + ) +} + +export default OnboardingPage2 diff --git a/packages/web/components/templates/onboarding/03.tsx b/packages/web/components/templates/onboarding/03.tsx new file mode 100644 index 000000000..75fa651e5 --- /dev/null +++ b/packages/web/components/templates/onboarding/03.tsx @@ -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 ( + + + {optionDetails.map(({ icon, label }, idx) => ( + + ))} + + + ) +} + +export default OnboardingPage3 diff --git a/packages/web/components/templates/onboarding/SelectOption.tsx b/packages/web/components/templates/onboarding/SelectOption.tsx new file mode 100644 index 000000000..1f863c884 --- /dev/null +++ b/packages/web/components/templates/onboarding/SelectOption.tsx @@ -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 ( + + + + {`${icon}-logo`} + + {label} + + + ) +} diff --git a/packages/web/package.json b/packages/web/package.json index 9036ce848..1f05e5e32 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -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", diff --git a/packages/web/pages/onboarding/02.tsx b/packages/web/pages/onboarding/02.tsx new file mode 100644 index 000000000..07e8adbd4 --- /dev/null +++ b/packages/web/pages/onboarding/02.tsx @@ -0,0 +1,5 @@ +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 new file mode 100644 index 000000000..d2c16adc8 --- /dev/null +++ b/packages/web/pages/onboarding/03.tsx @@ -0,0 +1,5 @@ +import OnboardingPage3 from "../../components/templates/onboarding/03"; + +export default function OnboardingPage03() { + return +} diff --git a/packages/web/public/static/images/extension-preview.svg b/packages/web/public/static/images/extension-preview.svg new file mode 100644 index 000000000..2dd251fa1 --- /dev/null +++ b/packages/web/public/static/images/extension-preview.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/web/public/static/images/newsletter/BBCNews.svg b/packages/web/public/static/images/newsletter/BBCNews.svg new file mode 100644 index 000000000..de8baa7da --- /dev/null +++ b/packages/web/public/static/images/newsletter/BBCNews.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/web/public/static/images/newsletter/Columbia.svg b/packages/web/public/static/images/newsletter/Columbia.svg new file mode 100644 index 000000000..01639d225 --- /dev/null +++ b/packages/web/public/static/images/newsletter/Columbia.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/web/public/static/images/newsletter/NYT.svg b/packages/web/public/static/images/newsletter/NYT.svg new file mode 100644 index 000000000..c84163934 --- /dev/null +++ b/packages/web/public/static/images/newsletter/NYT.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/web/public/static/images/newsletter/NYTNewsletter.svg b/packages/web/public/static/images/newsletter/NYTNewsletter.svg new file mode 100644 index 000000000..26d541a3a --- /dev/null +++ b/packages/web/public/static/images/newsletter/NYTNewsletter.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/web/public/static/images/newsletter/TempleTelegram.svg b/packages/web/public/static/images/newsletter/TempleTelegram.svg new file mode 100644 index 000000000..836330940 --- /dev/null +++ b/packages/web/public/static/images/newsletter/TempleTelegram.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/web/public/static/images/newsletter/WashingtonDiplomat.svg b/packages/web/public/static/images/newsletter/WashingtonDiplomat.svg new file mode 100644 index 000000000..c7f69a0de --- /dev/null +++ b/packages/web/public/static/images/newsletter/WashingtonDiplomat.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/web/public/static/images/onboarding/browser-extension.svg b/packages/web/public/static/images/onboarding/browser-extension.svg new file mode 100644 index 000000000..e48446636 --- /dev/null +++ b/packages/web/public/static/images/onboarding/browser-extension.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/web/stories/OnboardingLayout.stories.tsx b/packages/web/stories/OnboardingLayout.stories.tsx new file mode 100644 index 000000000..0e470fa59 --- /dev/null +++ b/packages/web/stories/OnboardingLayout.stories.tsx @@ -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 + +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/OnboardingPage2.stories.tsx b/packages/web/stories/OnboardingPage2.stories.tsx new file mode 100644 index 000000000..6712aa0ae --- /dev/null +++ b/packages/web/stories/OnboardingPage2.stories.tsx @@ -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 + +export const OnboardingPage2Story: ComponentStory = (args: any) => { + return ( + + ) +} diff --git a/packages/web/stories/OnboardingPage3.stories.tsx b/packages/web/stories/OnboardingPage3.stories.tsx new file mode 100644 index 000000000..9963217eb --- /dev/null +++ b/packages/web/stories/OnboardingPage3.stories.tsx @@ -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 + +export const OnboardingPage3Story: ComponentStory = (args: any) => { + return ( + + ) +}