Created Page 03 of Onboarding

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 (
+    <Checkbox css={{
+      border: checked ? '2px solid #F9D354': '2px solid #3F3E3C4D',
+      backgroundColor: checked ? '#F9D354' : '#FFFFFF'
+    }} checked={checked} onCheckedChange={toggleChecked}>
+      <CheckboxIndicator>
+        <CheckIcon />
+      </CheckboxIndicator>
+    </Checkbox>
+  )
+}
+
+export default CheckboxComponent

packages/web/components/elements/StyledText.tsx

@@ -180,4 +180,4 @@ export const StyledAnchor = styled('a', {
 
 export const StyledMark = styled('mark', {
 
-})
+})

packages/web/components/elements/images/CheckIcon.tsx

@@ -0,0 +1,12 @@
+export function CheckIcon(): JSX.Element {
+  return (
+    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+    fill="currentColor"
+  />
+</svg>
+  )
+}

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 (
+    <OnboardingLayout2
+      subTitle="Omnivore creates an email address for you to subscribe to newsletters with."
+      description="Subscribe to some newsletters now"
+      title="Read all your Newsletters in Omnivore"
+      pageNumber={3}
+    >
+      <VStack css={{
+        marginTop: '$4',
+        width: '100%'
+      }}>
+        {optionDetails.map(({ icon, label }, idx) => (
+          <SelectOption key={idx} {...{ icon, label }} />
+        ))}
+      </VStack>
+    </OnboardingLayout2>
+  )
+}
+
+export default OnboardingPage3

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 (
+    <HStack onClick={toggleChecked} css={{
+      border: checked ? '1px solid #F9D354' : '1px solid #0000000F',
+      backgroundColor: checked ? '#FDFAEC' : '#FFFFFF',
+      boxShadow: '0px 3px 11px 0px #201F1D0A',
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+      borderRadius: '6px',
+      cursor: 'pointer',
+      padding: '$2 $3',
+      marginBottom: 7,
+      width: '100%'
+    }}>
+      <Checkbox {...{checked, setChecked}} />
+      <HStack css={{marginRight: '$2'}} />
+      <img
+          src={`/static/images/newsletter/${icon}.svg`}
+          alt={`${icon}-logo`}
+        />
+      <StyledText
+        css={{
+          fontSize: 16,
+          fontWeight: 700,
+          marginLeft: '$2',
+          color: '#0A0806CC',
+        }}
+      >
+          {label}
+      </StyledText>
+    </HStack>
+  )
+}

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",

packages/web/pages/onboarding/03.tsx

@@ -0,0 +1,5 @@
+import OnboardingPage3 from "../../components/templates/onboarding/03";
+
+export default function OnboardingPage03() {
+  return <OnboardingPage3 />
+}

packages/web/public/static/images/newsletter/BBCNews.svg

@@ -0,0 +1,9 @@
+<svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect y="0.96875" width="30.0625" height="30.0625" rx="3.34028" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2059_59413" transform="translate(-0.167526) scale(0.00515464)"/>
+</pattern>
+<image id="image0_2059_59413" width="259" height="194" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>

packages/web/public/static/images/newsletter/NYTNewsletter.svg

@@ -0,0 +1,9 @@
+<svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect y="0.96875" width="30.0625" height="30.0625" rx="3.34028" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_2059_59395" transform="scale(0.00444444)"/>
+</pattern>
+<image id="image0_2059_59395" width="225" height="225" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>

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<typeof OnboardingPage2>
 

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<typeof OnboardingPage3>
+
+export const OnboardingPage3Story: ComponentStory<typeof OnboardingPage3> = (args: any) => {
+  return (
+    <OnboardingPage3 />
+  )
+}