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/StyledText.tsx b/packages/web/components/elements/StyledText.tsx index 55ef94b5e..5c2d72d27 100644 --- a/packages/web/components/elements/StyledText.tsx +++ b/packages/web/components/elements/StyledText.tsx @@ -180,4 +180,4 @@ export const StyledAnchor = styled('a', { export const StyledMark = styled('mark', { -}) \ No newline at end of file +}) diff --git a/packages/web/components/elements/images/CheckIcon.tsx b/packages/web/components/elements/images/CheckIcon.tsx new file mode 100644 index 000000000..9c4ede982 --- /dev/null +++ b/packages/web/components/elements/images/CheckIcon.tsx @@ -0,0 +1,12 @@ +export function CheckIcon(): JSX.Element { + return ( + + + + ) +} 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/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/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/stories/OnboardingPage2Story.stories.tsx b/packages/web/stories/OnboardingPage2.stories.tsx similarity index 89% rename from packages/web/stories/OnboardingPage2Story.stories.tsx rename to packages/web/stories/OnboardingPage2.stories.tsx index 5122b6ec7..6712aa0ae 100644 --- a/packages/web/stories/OnboardingPage2Story.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/OnboardingPage2Story', + title: 'Components/OnboardingPage2', component: OnboardingPage2, } as ComponentMeta 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 ( + + ) +}