feat(protocol-designer): add landing page

components/src/atoms/buttons/LargeButton.tsx

@@ -24,7 +24,7 @@ type LargeButtonTypes =
   | 'alertStroke'
   | 'alertAlt'
 interface LargeButtonProps extends StyleProps {
-  onClick: () => void
+  onClick?: () => void
   buttonType?: LargeButtonTypes
   buttonText: React.ReactNode
   iconName?: IconName
@@ -203,7 +203,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
       <LegacyStyledText
         css={css`
           font-size: ${fontSizeBodyLargeSemiBold};
-          padding-right: ${SPACING.spacing8};
+          padding-right: ${iconName != null ? SPACING.spacing8 : '0'};
           @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
             ${TYPOGRAPHY.level3HeaderSemiBold}
           }

components/src/helix-design-system/product/typography.ts

@@ -63,7 +63,7 @@ const fontFamilyHeadingSmall = fontFamily
 export const fontSizeHeadingSmallRegular = fontSizeHeadingSmall
 export const lineHeightHeadingSmallRegular = lineHeightHeadingSmall
 export const fontFamilyHeadingSmallRegular = fontFamilyHeadingSmall
-export const fontWeightHeadingSmallRegular = '600'
+export const fontWeightHeadingSmallRegular = '400'
 export const fontStyleHeadingSmallRegular = `${fontWeightHeadingSmallRegular} ${fontSizeHeadingSmallRegular}/${lineHeightHeadingSmallRegular} ${fontFamilyHeadingSmallRegular}`
 
 // Heading-Small-Bold

protocol-designer/src/localization/en/shared.json

@@ -3,14 +3,18 @@
   "amount": "Amount:",
   "cancel": "Cancel",
   "confirm_reorder": "Are you sure you want to reorder these steps, it may cause errors?",
-  "create_new": "Create new",
-  "create_opentrons_protocol": "Create Opentrons protocol",
+  "create_new_protocol": "Create new protocol",
+  "create_a_protocol": "Create a protocol",
+  "confirm_import": "Are you sure you want to upload this protocol?",
   "done": "Done",
   "edit": "edit",
   "exit": "exit",
   "go_back": "go back",
+  "import_existing": "Import existing protocol",
   "import": "Import",
   "next": "next",
+  "no-code-solution": "A no-code solution to create protocols that x, y and z meaning for your lab and workflow.",
   "remove": "remove",
-  "step": "Step {{current}} / {{max}}"
+  "step": "Step {{current}} / {{max}}",
+  "welcome": "Welcome to Protocol Designer"
 }

protocol-designer/src/pages/Landing/__tests__/Landing.test.tsx

@@ -1,3 +1,39 @@
-import { it } from 'vitest'
+import * as React from 'react'
 
-it.todo('write test for Landing page')
+import { describe, it, vi, beforeEach } from 'vitest'
+import { MemoryRouter } from 'react-router-dom'
+import { screen } from '@testing-library/react'
+import { i18n } from '../../../localization'
+import { renderWithProviders } from '../../../__testing-utils__'
+import { loadProtocolFile } from '../../../load-file/actions'
+import { Landing } from '../index'
+
+vi.mock('../../../load-file/actions')
+
+const render = () => {
+  return renderWithProviders(
+    <MemoryRouter>
+      <Landing />
+    </MemoryRouter>,
+    {
+      i18nInstance: i18n,
+    }
+  )[0]
+}
+
+describe('Landing', () => {
+  beforeEach(() => {
+    vi.mocked(loadProtocolFile).mockReturnValue(vi.fn())
+  })
+  it('renders the landing page image and text', () => {
+    render()
+    screen.getByLabelText('welcome image')
+    screen.getByText('Welcome to Protocol Designer')
+    screen.getByText(
+      'A no-code solution to create protocols that x, y and z meaning for your lab and workflow.'
+    )
+    screen.getByRole('button', { name: 'Create a protocol' })
+    screen.getByText('Import existing protocol')
+    screen.getByRole('img', { name: 'welcome image' })
+  })
+})

protocol-designer/src/pages/Landing/index.tsx

@@ -1,27 +1,90 @@
 import * as React from 'react'
-import { NavLink } from 'react-router-dom'
+import { NavLink, useNavigate } from 'react-router-dom'
+import styled from 'styled-components'
+import { useDispatch } from 'react-redux'
+import { useTranslation } from 'react-i18next'
 import {
+  ALIGN_CENTER,
+  COLORS,
+  DIRECTION_COLUMN,
   Flex,
+  LargeButton,
   SPACING,
-  DIRECTION_COLUMN,
-  ALIGN_CENTER,
+  StyledText,
+  TYPOGRAPHY,
 } from '@opentrons/components'
-import { useTranslation } from 'react-i18next'
+import { actions as loadFileActions } from '../../load-file'
+import welcomeImage from '../../images/welcome_page.png'
+import type { ThunkDispatch } from '../../types'
 
 export function Landing(): JSX.Element {
   const { t } = useTranslation('shared')
+  const dispatch: ThunkDispatch<any> = useDispatch()
+  const navigate = useNavigate()
+  const loadFile = (
+    fileChangeEvent: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    if (window.confirm(t('confirm_import') as string)) {
+      dispatch(loadFileActions.loadProtocolFile(fileChangeEvent))
+      navigate('/overview')
+    }
+  }
 
   return (
-    <Flex flexDirection={DIRECTION_COLUMN} margin={SPACING.spacing24}>
-      {t('create_opentrons_protocol')}
-      <Flex
-        alignItems={ALIGN_CENTER}
-        marginTop={SPACING.spacing24}
-        gridGap={SPACING.spacing16}
+    <Flex
+      backgroundColor={COLORS.grey20}
+      flexDirection={DIRECTION_COLUMN}
+      alignItems={ALIGN_CENTER}
+      paddingTop="14.875rem"
+      height="100vh"
+      width="100%"
+    >
+      <img
+        src={welcomeImage}
+        height="132px"
+        width="548px"
+        aria-label="welcome image"
+      />
+      <StyledText desktopStyle="headingLargeBold" marginY={SPACING.spacing16}>
+        {t('welcome')}
+      </StyledText>
+      <StyledText
+        desktopStyle="headingSmallRegular"
+        color={COLORS.grey60}
+        maxWidth="34.25rem"
+        textAlign={TYPOGRAPHY.textAlignCenter}
       >
-        <NavLink to={'/createNew'}>{t('create_new')}</NavLink>
-        {t('import')}
-      </Flex>
+        {t('no-code-solution')}
+      </StyledText>
+      <LargeButton
+        marginY={SPACING.spacing32}
+        buttonText={
+          <StyledNavLink to={'/createNew'}>
+            <StyledText desktopStyle="bodyLargeRegular">
+              {t('create_a_protocol')}
+            </StyledText>
+          </StyledNavLink>
+        }
+      />
+
+      <StyledLabel>
+        <StyledText desktopStyle="bodyLargeRegular" color={COLORS.grey60}>
+          {t('import_existing')}
+        </StyledText>
+        <input type="file" onChange={loadFile}></input>
+      </StyledLabel>
     </Flex>
   )
 }
+
+const StyledLabel = styled.label`
+  display: inline-block;
+  cursor: pointer;
+  input[type='file'] {
+    display: none;
+  }
+`
+const StyledNavLink = styled(NavLink)<React.ComponentProps<typeof NavLink>>`
+  color: ${COLORS.white};
+  text-decoration: none;
+`