@newskit-render/core 1.76.4 → 1.78.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.77.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.77.0-alpha.0...@newskit-render/core@1.77.0) (2022-07-22)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+## [1.76.4](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.76.4-alpha.0...@newskit-render/core@1.76.4) (2022-07-22)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
 ## [1.76.3](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.76.3-alpha.0...@newskit-render/core@1.76.3) (2022-07-20)
 
 **Note:** Version bump only for package @newskit-render/core

package/cypress/axe/terminal-log.js

@@ -0,0 +1,19 @@
+export const terminalLog = (violations) => {
+  cy.task(
+    'log',
+    `${violations.length} accessibility violation${
+      violations.length === 1 ? '' : 's'
+    } ${violations.length === 1 ? 'was' : 'were'} detected`
+  )
+  // pluck specific keys to keep the table readable
+  const violationData = violations.map(
+    ({ id, impact, description, nodes }) => ({
+      id,
+      impact,
+      description,
+      nodes: nodes.length,
+    })
+  )
+
+  cy.task('table', violationData)
+}

package/cypress/e2e/account/accessibility.spec.js

@@ -1,28 +1,7 @@
-function terminalLog(violations) {
-  cy.task(
-    'log',
-    `${violations.length} accessibility violation${
-      violations.length === 1 ? '' : 's'
-    } ${violations.length === 1 ? 'was' : 'were'} detected`
-  )
-  // pluck specific keys to keep the table readable
-  const violationData = violations.map(
-    ({ id, impact, description, nodes }) => ({
-      id,
-      impact,
-      description,
-      nodes: nodes.length,
-    })
-  )
-
-  cy.task('table', violationData)
-}
+import { terminalLog } from '../../axe/terminal-log'
 
 const pages = [
-  {
-    url: '/account',
-    name: 'Personal Details',
-  },
+  { url: '/account', name: 'Personal Details' },
   { url: '/account/edit/name', name: 'Name form' },
   { url: '/account/edit/displayName', name: 'Display Name form' },
   { url: '/account/edit/email', name: 'Email form' },
@@ -43,7 +22,8 @@ const pages = [
   // {
   //   url: '/account/payment',
   //   name: 'Payment form',
-  //   skip: { skipFailures: true }, // error being caused by Stripe, ignore at this time
+  //   skip: { skipFailures: true },
+  // error being caused by Stripe, ignore at this time
   // },
   {
     url: '/account/newsletters-and-alerts',

package/cypress/e2e/help-hub/accessibility.spec.js

@@ -0,0 +1,21 @@
+import { terminalLog } from '../../axe/terminal-log'
+
+const pages = [
+  { url: '/help-hub', name: 'Landing Page' },
+  { url: '/help-hub/results?q=google', name: 'Search Page' },
+  { url: '/help-hub/article/sign-with-google', name: 'Article Page' },
+]
+
+describe('Page accessibility', () => {
+  pages.forEach(({ url, name, skip }) => {
+    it(`Should pass a11y tests: ${name}`, () => {
+      cy.mockConsentAndVisit(url)
+      cy.injectAxe()
+      cy.checkA11y(null, null, terminalLog, skip)
+
+      cy.get('[data-testid="autocomplete-input"]').type('Google')
+
+      cy.checkA11y(null, null, terminalLog, false)
+    })
+  })
+})

package/helpers/fontList.ts

@@ -0,0 +1,222 @@
+export const fontList = [
+  {
+    url: '/fonts/dmsans-regular-webfont.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/dmsans-regular-webfont.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/dmsans-italic-webfont.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/dmsans-italic-webfont.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/dmsans-medium-webfont.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/dmsans-medium-webfont.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/dmsans-mediumitalic-webfont.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/dmsans-mediumitalic-webfont.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/dmsans-bold-webfont.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/dmsans-bold-webfont.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/dmsans-bolditalic-webfont.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/dmsans-bolditalic-webfont.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/poppins-bold-webfont.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/poppins-bold-webfont.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/poppins-bolditalic-webfont.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/poppins-bolditalic-webfont.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/poppins-extrabold-webfont.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/poppins-extrabold-webfont.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/poppins-extrabolditalic-webfont.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/poppins-extrabolditalic-webfont.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/poppins-italic-webfont.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/poppins-italic-webfont.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/poppins-light-webfont.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/poppins-light-webfont.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/poppins-lightitalic-webfont.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/poppins-lightitalic-webfont.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/poppins-medium-webfont.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/poppins-medium-webfont.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/poppins-mediumitalic-webfont.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/poppins-mediumitalic-webfont.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/poppins-regular-webfont.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/poppins-regular-webfont.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/poppins-semibold-webfont.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/poppins-semibold-webfont.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/poppins-semibolditalic-webfont.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/poppins-semibolditalic-webfont.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/dmmono-medium.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/dmmono-medium.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/bitter-regular.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/bitter-regular.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/bitter-medium.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/bitter-medium.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/bitter-mediumitalic.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/bitter-mediumitalic.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/bitter-semibold.woff2',
+    format: 'woff2',
+  },
+  {
+    url: '/fonts/bitter-semibold.woff',
+    format: 'woff',
+  },
+  {
+    url: '/fonts/GillSansMTStd-Medium.otf',
+    format: 'otf',
+  },
+  {
+    url: '/fonts/TimesDigital-Bold.ttf',
+    format: 'ttf',
+  },
+  {
+    url: '/fonts/TimesDigital-Regular.ttf',
+    format: 'ttf',
+  },
+  {
+    url: '/fonts/TimesDigitalW04-Regular.ttf',
+    format: 'ttf',
+  },
+  {
+    url: '/fonts/Montserrat-Regular.ttf',
+    format: 'ttf',
+  },
+  {
+    url: '/fonts/TheSun-Bold.ttf',
+    format: 'ttf',
+  },
+  {
+    url: '/fonts/TheSun-HeavyNarrow.ttf',
+    format: 'ttf',
+  },
+  {
+    url: '/fonts/TheSun-Regular.ttf',
+    format: 'ttf',
+  },
+  {
+    url: '/fonts/TheSun-Medium.ttf',
+    format: 'ttf',
+  },
+]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.76.4",
+  "version": "1.78.0-alpha.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -35,12 +35,12 @@
     "@apollo/client": "3.4.16",
     "@newskit-render/api": "^0.36.0",
     "@newskit-render/auth": "^0.44.0",
-    "@newskit-render/checkout": "^0.51.2",
+    "@newskit-render/checkout": "^0.51.3-alpha.0",
     "@newskit-render/feature-flags": "^0.24.0",
     "@newskit-render/feed": "^0.24.0",
-    "@newskit-render/my-account": "^0.183.0",
+    "@newskit-render/my-account": "^0.184.0",
     "@newskit-render/shared-components": "^0.68.0",
-    "@newskit-render/standalone-components": "^0.30.0",
+    "@newskit-render/standalone-components": "^0.31.0-alpha.0",
     "@newskit-render/validation": "^0.50.0",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",

package/pages/_app.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { AppContext as AppContextType, AppProps } from 'next/app'
 import Head from 'next/head'
-import { ThemeProvider, Global, css, styled } from 'newskit'
+import { ThemeProvider, Global, styled } from 'newskit'
 import { SessionProvider } from '@newskit-render/auth'
 import {
   getFeatureFlags,

package/pages/_document.tsx

@@ -19,6 +19,21 @@ import {
   tealiumProfileId,
   tealiumEnv,
 } from '../config'
+import { fontList } from '../helpers/fontList'
+
+const generateFontLink = ({ url, format }: { url: string; format: string }) => {
+  const type = `font/${format}`
+
+  return (
+    <link
+      rel="preload"
+      href={url}
+      as="font"
+      type={type}
+      crossOrigin="anonymous"
+    />
+  )
+}
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {
@@ -41,6 +56,7 @@ export default class MyDocument extends Document {
     return (
       <Html lang="en">
         <Head>
+          {fontList.map((font) => generateFontLink(font))}
           <script
             type="text/javascript"
             data-attribute="nr-browser"