@newskit-render/core 0.0.0-d55b7d88

package/assets/fonts/attribuitions.mdx

@@ -0,0 +1,35 @@
+# Attributions
+
+## Bitter
+
+Bitter	SIL Open Font License, 1.1
+Copyright 2011 The Bitter Project Authors (https://github.com/solmatas/BitterPro)
+From: https://fonts.google.com/specimen/Bitter?query=bitter
+
+## DmMono
+
+DM Mono	SIL Open Font License, 1.1
+Copyright 2020 The DM Mono Project Authors (https://www.github.com/googlefonts/dm-mono)
+From: https://fonts.google.com/specimen/DM+Mono?query=dm+mono
+
+## DmSans
+
+DM Sans	SIL Open Font License, 1.1
+Copyright 2014-2017 Indian Type Foundry (info@indiantypefoundry.com) with Reserved Font Name 'Poppins'. Copyright 2019 Google LLC.
+From: https://fonts.google.com/specimen/DM+Sans?query=dm+sans
+
+## NotoSans
+
+Noto Sans	SIL Open Font License, 1.1
+Copyright 2012 Google Inc. All Rights Reserved.
+From: https://fonts.google.com/noto/specimen/Noto%20Sans
+
+## Poppins 
+
+Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
+From: https://fonts.google.com/specimen/Poppins?query=poppins
+
+## Source Serif Pro 
+
+Copyright 2014, 2015, 2016 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'.
+From: https://fonts.google.com/specimen/Source+Serif+Pro?query=source+serif

package/components/AccountDropdown/AccountDropdown.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import fetch from 'cross-fetch'
+import { setCookie, deleteCookie } from './utils'
+import { options } from './accounts'
+
+export const AccountDropdown: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const router = useRouter()
+  const dropdownOpenHandler = (e) => {
+    if (e.code === 'NumpadSubtract' || e.code === 'Backquote') {
+      setIsOpen((currentState) => {
+        const updatedState = !currentState
+
+        return updatedState
+      })
+    }
+  }
+
+  const handleChange = async (e) => {
+    const result = await fetch('/api/account/get-session', {
+      method: 'post',
+      body: JSON.stringify({ option: e.target.value }),
+    })
+    const data = await result.json()
+
+    deleteCookie('acs_ngn', '/', null)
+    deleteCookie('acs_tnl', '/', null)
+    setCookie(
+      data.accountProviderCookieName,
+      data.value,
+      new Date(2032, 1, 1),
+      '/',
+      null,
+      true
+    )
+    router.reload()
+  }
+
+  useEffect(() => {
+    window.addEventListener('keyup', dropdownOpenHandler)
+    return () => window.removeEventListener('keyup', dropdownOpenHandler)
+  }, [])
+
+  return isOpen ? (
+    <select
+      onChange={handleChange}
+      data-testid="account-switcher"
+      style={{
+        position: 'fixed',
+        top: '3px',
+        right: '3px',
+        maxWidth: '150px',
+        zIndex: 3,
+      }}
+    >
+      <option>Select subscription</option>
+      {options.map((option) => (
+        <option key={option} value={option}>
+          {option}
+        </option>
+      ))}
+    </select>
+  ) : null
+}

package/components/AccountDropdown/__tests__/AcountDropdown.test.tsx

@@ -0,0 +1,83 @@
+import { fireEvent, waitFor } from '@testing-library/react'
+import { AccountDropdown, getAccounts } from '../'
+import { renderWithTheme } from '../../../helpers/test-utils'
+import { useRouter } from 'next/router'
+
+const useRouterMock = useRouter as jest.Mock
+
+jest.mock('next/router', () => {
+  return {
+    useRouter: jest.fn(),
+  }
+})
+
+jest.mock('cross-fetch', () =>
+  jest
+    .fn()
+    .mockImplementationOnce(() =>
+      Promise.resolve({
+        json: () => ({ accountProviderCookieName: 'test', value: 'test' }),
+      })
+    )
+    .mockImplementationOnce(() => {
+      throw new Error()
+    })
+)
+
+describe('AccountDropdown', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    useRouterMock.mockImplementation(() => {
+      return { reload: jest.fn() }
+    })
+  })
+
+  it('Should not render the dropdown unless it is toggled', () => {
+    const { queryByDisplayValue } = renderWithTheme(AccountDropdown)
+
+    const dropdown = queryByDisplayValue('Select subscription')
+
+    expect(dropdown).toBeFalsy()
+  })
+
+  it('Should render the dropdown when Backquote is pressed', () => {
+    const { container, getByDisplayValue } = renderWithTheme(AccountDropdown)
+
+    fireEvent.keyUp(container, { code: 'Backquote' })
+
+    expect(getByDisplayValue('Select subscription')).toBeTruthy()
+  })
+
+  it('Should render the dropdown when NumpadSubtract is pressed', () => {
+    const { container, getByDisplayValue } = renderWithTheme(AccountDropdown)
+
+    fireEvent.keyUp(container, { code: 'NumpadSubtract' })
+
+    expect(getByDisplayValue('Select subscription')).toBeTruthy()
+  })
+
+  it('Should select an account', async () => {
+    const { container, getByTestId } = renderWithTheme(AccountDropdown)
+
+    await waitFor(() => {
+      fireEvent.keyUp(container, { code: 'NumpadSubtract' })
+    })
+
+    await waitFor(() => {
+      fireEvent.change(getByTestId('account-switcher'), {
+        target: { value: 'Times voucher subscription credit card' },
+      })
+    })
+
+    expect(useRouterMock).toHaveBeenCalled()
+  })
+
+  it('Should return account object', () => {
+    const options = getAccounts('sun', 'times')
+    expect(options['Sun with subscription']).toEqual({
+      username: 'render-e2e-subscription@yopmail.com',
+      password: 'sun',
+      tenant: 'SUN',
+    })
+  })
+})

package/components/AccountDropdown/accounts.ts

@@ -0,0 +1,47 @@
+export const options = [
+  'Sun with subscription',
+  'Times voucher subscription credit card',
+  'Times voucher subscription direct debit',
+  'Times voucher subscription paypal',
+  'Time DTC print credit card',
+  'Time Digital subscription credit card',
+  'Time DigiPrint subscription credit card',
+]
+
+export const getAccounts = (sunPassword, timesPassword) => ({
+  'Sun with subscription': {
+    username: 'render-e2e-subscription@yopmail.com',
+    password: sunPassword,
+    tenant: 'SUN',
+  },
+  'Times voucher subscription credit card': {
+    username: 'cmp-test-card-20-09-2022@yopmail.com',
+    password: timesPassword,
+    tenant: 'TIMES',
+  },
+  'Times voucher subscription direct debit': {
+    username: 'cmp-test-direct-20-09-22@yopmail.com',
+    password: timesPassword,
+    tenant: 'TIMES',
+  },
+  'Times voucher subscription paypal': {
+    username: 'cmp-test-paypal-20-09-22@yopmail.com',
+    password: timesPassword,
+    tenant: 'TIMES',
+  },
+  'Time DTC print credit card': {
+    username: 'cmp-dtc-card-20-09-22@yopmail.com',
+    password: timesPassword,
+    tenant: 'TIMES',
+  },
+  'Time Digital subscription credit card': {
+    username: 'cmp-digi-card-20-09-22@yopmail.com',
+    password: timesPassword,
+    tenant: 'TIMES',
+  },
+  'Time DigiPrint subscription credit card': {
+    username: 'digi-print-card-15-11-22@yopmail.com',
+    password: timesPassword,
+    tenant: 'TIMES',
+  },
+})

package/components/AccountDropdown/index.tsx

@@ -0,0 +1,2 @@
+export * from './AccountDropdown'
+export * from './accounts'

package/components/AccountDropdown/utils.ts

@@ -0,0 +1,21 @@
+export const setCookie = (name, value, expires, path, domain, secure) => {
+  let cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value)
+
+  if (expires) {
+    cookie += '; expires=' + expires.toUTCString()
+  }
+
+  if (path) {
+    cookie += '; path=' + path
+  }
+
+  if (secure) {
+    cookie += '; secure'
+  }
+
+  document.cookie = cookie
+}
+
+export const deleteCookie = (name, path, domain) => {
+  setCookie(name, '', new Date(0), path, domain, false)
+}

package/components/ErrorPage/ErrorPage.tsx

@@ -0,0 +1,135 @@
+import React from 'react'
+import {
+  Block,
+  Cell,
+  TextBlock,
+  styled,
+  getMediaQueryFromTheme,
+  getSizingCssFromTheme,
+  toNewsKitIcon,
+} from 'newskit'
+import Head from 'next/head'
+import { NextLink, Image } from '@newskit-render/shared-components'
+import { KeyboardArrowLeft as FilledKeyboardArrowLeft } from '@emotion-icons/material/KeyboardArrowLeft'
+import Layout from '../layout'
+import { headerSize } from '../header'
+
+const IconFilledKeyboardArrowLeft = toNewsKitIcon(FilledKeyboardArrowLeft)
+
+const cb = (size: string) => ({
+  minHeight: `calc(100vh - calc(${size} + 183px))`,
+})
+
+const StyledMain = styled.main`
+  flex: 1 0 auto;
+  padding-top: 40px;
+  width: 100%;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline-color: -webkit-focus-ring-color;
+    outline-style: auto;
+    outline-width: 5px;
+  }
+
+  ${getMediaQueryFromTheme('sm')} {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 440px;
+  }
+  ${getMediaQueryFromTheme('md')} {
+    ${getSizingCssFromTheme(cb, headerSize)}
+  }
+  ${getMediaQueryFromTheme('lg')} {
+    padding-top: 65px;
+    max-width: 440px;
+  }
+`
+const paddingCB = (size: string) => ({
+  padding: `${size} 0`,
+})
+
+const StyledLink = styled(NextLink)`
+  ${getSizingCssFromTheme(paddingCB, 'sizing030')}
+`
+
+const gridOverride = {
+  xsMargin: 'space000',
+  xsRowGutter: 'space000',
+  xsColumnGutter: 'space000',
+}
+
+type ErrorPageProps = {
+  title: string
+  errorMassage: string
+}
+
+const ErrorPage = ({ title, errorMassage }: ErrorPageProps) => (
+  <>
+    <Head>
+      <title>{title}</title>
+    </Head>
+    <Layout backgroundColor="white" gridOverride={gridOverride}>
+      <Cell xs={10} xsOffset={1} md={12} mdOffset={0}>
+        <StyledMain>
+          <Block marginBlockEnd="space070">
+            <Image
+              aspectRatio="16/9"
+              src="https://plchldr.co/i/594x364?bg=F0F0F0&fc=111111&text=IMG"
+              alt="404 page"
+            />
+          </Block>
+          <Block marginBlockEnd={{ xs: 'space040', md: 'space050' }}>
+            <TextBlock
+              as="h1"
+              typographyPreset={{
+                xs: 'utilityHeading010',
+                md: 'utilityHeading030',
+              }}
+              stylePreset="inkContrast"
+            >
+              {title}
+            </TextBlock>
+          </Block>
+
+          <Block marginBlockEnd={{ xs: 'space050', md: 'space060' }}>
+            <TextBlock
+              typographyPreset={{
+                xs: 'utilityBody010',
+                md: 'utilityBody020',
+              }}
+              stylePreset="inkBase"
+              style={{ whiteSpace: 'pre-line' }}
+            >
+              {errorMassage}
+            </TextBlock>
+          </Block>
+          <Block
+            marginBlockEnd={{ xs: 'space070', sm: 'space080', md: 'space090' }}
+          >
+            <StyledLink
+              type="standalone"
+              data-test-id="StyledLinkStandalone"
+              href="/"
+              external={false}
+              aria-label="back"
+            >
+              <IconFilledKeyboardArrowLeft
+                overrides={{
+                  size: 'iconSize010',
+                  stylePreset: 'baseInteractivePrimary030',
+                }}
+              />
+              Back to ...
+            </StyledLink>
+          </Block>
+        </StyledMain>
+      </Cell>
+    </Layout>
+  </>
+)
+
+export default ErrorPage