@newskit-render/core 1.24.1 → 1.27.8

package/CHANGELOG.md

@@ -3,6 +3,109 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.27.8](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.27.7...@newskit-render/core@1.27.8) (2022-02-25)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+## [1.27.7](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.27.6...@newskit-render/core@1.27.7) (2022-02-25)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+## [1.27.6](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.27.5...@newskit-render/core@1.27.6) (2022-02-24)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+## [1.27.5](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.27.4...@newskit-render/core@1.27.5) (2022-02-23)
+
+
+### Bug Fixes
+
+* **PPDSR-690:** update version to fix pipeline ([#605](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/605)) ([16ae9b5](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/16ae9b57c726899d3138e3112fb36571a6b01e77))
+
+
+
+
+
+## [1.27.4](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.27.3...@newskit-render/core@1.27.4) (2022-02-23)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+## [1.27.3](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.27.2...@newskit-render/core@1.27.3) (2022-02-21)
+
+
+### Bug Fixes
+
+* **PPDSR-674:** Footer menu not horizontal on large screens ([#596](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/596)) ([904927d](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/904927d938227514b18cc35a2535b9eed349a61f))
+
+
+
+
+
+## [1.27.2](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.27.1...@newskit-render/core@1.27.2) (2022-02-18)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+## [1.27.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.27.0...@newskit-render/core@1.27.1) (2022-02-18)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+# [1.27.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.26.0...@newskit-render/core@1.27.0) (2022-02-17)
+
+
+### Features
+
+* **PPDSR-682:** update Newskit version ([#599](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/599)) ([663ffbe](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/663ffbee434638e824064c518258c6c81bba7b7f))
+
+
+
+
+
+# [1.26.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.25.0...@newskit-render/core@1.26.0) (2022-02-16)
+
+
+### Features
+
+* **PPDSR-635:** My account- Split context ([#585](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/585)) ([59d0378](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/59d0378ab2f8d9949081ae9f84862b446d63ffa6))
+
+
+
+
+
+# [1.25.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.24.1...@newskit-render/core@1.25.0) (2022-02-15)
+
+
+### Features
+
+* **PPDSR-661:** Update Themes for main site areas ([#595](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/595)) ([160c7c7](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/160c7c71ff2fa317dc59eeaa22a43134aba7f58e))
+
+
+
+
+
 ## [1.24.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.24.0...@newskit-render/core@1.24.1) (2022-02-15)
 
 **Note:** Version bump only for package @newskit-render/core

package/__tests__/pages/__snapshots__/home.test.tsx.snap

@@ -377,6 +377,8 @@ exports[`getServerSideProps Homepage 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
+  color: #FFFFFF;
+  fill: #FFFFFF;
   vertical-align: unset;
   display: inline-block;
 }
@@ -384,6 +386,8 @@ exports[`getServerSideProps Homepage 1`] = `
 .emotion-28.emotion-28 {
   width: 32px;
   height: 32px;
+  color: #FFFFFF;
+  fill: #FFFFFF;
 }
 
 <div
@@ -1233,6 +1237,10 @@ exports[`getServerSideProps Homepage 1`] = `
 
 .emotion-44 {
   margin-right: 16px;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
 }
 
 @media screen and (max-width: 767px) {
@@ -3203,7 +3211,7 @@ exports[`getServerSideProps Homepage 1`] = `
           <p
             class="emotion-35"
           >
-            Copyright © 2020 News Corp. All rights reserved.
+            Copyright © YYYY News Corp. All rights reserved.
           </p>
         </div>
       </div>

package/__tests__/pages/home.test.tsx

@@ -3,6 +3,10 @@ import SectionPage from '../../components/section'
 import { renderWithTheme } from '../../helpers/test-utils'
 import { getPageMock } from '../../helpers/mocks'
 
+jest.mock('../../helpers/getYear', () => ({
+  getYear: jest.fn().mockReturnValue('YYYY'),
+}))
+
 jest.mock('@newskit-render/api', () => ({
   ClientTypes: { nkapi: 'nkapi' },
   createApolloClient: jest.fn().mockImplementation(() => {

package/components/article/__tests__/__snapshots__/index.test.tsx.snap

@@ -377,6 +377,8 @@ exports[`Article should render tile and sub title 1`] = `
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
+  color: #FFFFFF;
+  fill: #FFFFFF;
   vertical-align: unset;
   display: inline-block;
 }
@@ -384,6 +386,8 @@ exports[`Article should render tile and sub title 1`] = `
 .emotion-28.emotion-28 {
   width: 32px;
   height: 32px;
+  color: #FFFFFF;
+  fill: #FFFFFF;
 }
 
 <div
@@ -1118,6 +1122,11 @@ exports[`Article should render tile and sub title 1`] = `
   display: block;
 }
 
+.emotion-28:before,
+.emotion-28:after {
+  white-space: normal;
+}
+
 .emotion-30 {
   border-style: solid;
   border-color: #DEDEDE;
@@ -2084,6 +2093,10 @@ exports[`Article should render tile and sub title 1`] = `
 
 .emotion-143 {
   margin-right: 16px;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
 }
 
 @media screen {
@@ -4534,7 +4547,7 @@ exports[`Article should render tile and sub title 1`] = `
           <p
             class="emotion-35"
           >
-            Copyright © 2020 News Corp. All rights reserved.
+            Copyright © YYYY News Corp. All rights reserved.
           </p>
         </div>
       </div>

package/components/article/__tests__/index.test.tsx

@@ -98,6 +98,10 @@ jest.mock('@newskit-render/my-account', () => {
   }
 })
 
+jest.mock('../../../helpers/getYear', () => ({
+  getYear: jest.fn().mockReturnValue('YYYY'),
+}))
+
 describe('Article', () => {
   test('should render tile and sub title', () => {
     const { getByTestId, asFragment } = renderWithTheme(Article, articleData)

package/components/footer/__snapshots__/index.test.tsx.snap

@@ -414,7 +414,7 @@ exports[`Footer tests should render footer 1`] = `
           <p
             class="emotion-35"
           >
-            Copyright © 2020 News Corp. All rights reserved.
+            Copyright © YYYY News Corp. All rights reserved.
           </p>
         </div>
       </div>

package/components/footer/index.test.tsx

@@ -1,6 +1,10 @@
 import { renderWithTheme } from '../../helpers/test-utils'
 import Footer from '.'
 
+jest.mock('../../helpers/getYear', () => ({
+  getYear: jest.fn().mockReturnValue('YYYY'),
+}))
+
 describe('Footer tests', () => {
   test('should render footer', () => {
     const { asFragment } = renderWithTheme(Footer)

package/components/footer/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import {
   styled,
   getColorCssFromTheme,
@@ -8,13 +8,16 @@ import {
   Paragraph,
   Divider,
   Block,
+  Image,
 } from 'newskit'
 import { MainGrid } from '../layout/MainGrid'
 import NewsKitLogoShort from '../common/NewskitLogoShort'
 import NavLink from '../common/NavLink'
+import { AppContext } from '../../app-context/AppContext'
+import { getYear } from '../../helpers/getYear'
 
 const StyledFooter = styled.div`
-  ${getColorCssFromTheme('backgroundColor', 'interface060')};
+  ${getColorCssFromTheme('backgroundColor', 'neutral100')};
   width: 100%;
   bottom: 0;
   display: block;
@@ -34,6 +37,18 @@ const Navigation = styled.div`
   }
 `
 
+const clientNavigationLogos = {
+  'The-Sun': { src: 'navigationPrimary-brandMark-sun.svg', width: 'initial' },
+  'Virgin-Radio': {
+    src: 'navigationPrimary-brandMark-vr.svg',
+    width: 'initial',
+  },
+  'The-Times': {
+    src: 'navigationPrimary-brandMark-times.svg',
+    width: 'initial',
+  },
+}
+
 const NavButton = ({
   buttonText,
   href,
@@ -56,70 +71,83 @@ const NavButton = ({
   </Block>
 )
 
-const Footer = () => (
-  <StyledFooter>
-    <MainGrid>
-      <Cell xs={12}>
-        <Block spaceStack="space030">
-          <NewsKitLogoShort color="white" size="sizing120" />
-        </Block>
-        <Block spaceStack="space030">
-          <Divider
-            overrides={{
-              stylePreset: 'dividerFooterHorizontal',
-            }}
-          />
-        </Block>
-        <Navigation>
-          <NavButton
-            buttonText="NavLink One"
-            href="/link-one"
-            ariaLabel="NavLink One"
-          />
-          <NavButton
-            buttonText="NavLink Two"
-            href="/link-two"
-            ariaLabel="NavLink Two"
-          />
-          <NavButton
-            buttonText="NavLink Three"
-            href="/link-three"
-            ariaLabel="NavLink Three"
-          />
-          <NavButton
-            buttonText="NavLink Four"
-            href="/link-four"
-            ariaLabel="NavLink Four"
-          />
-          <NavButton
-            buttonText="NavLink Five"
-            href="/link-five"
-            ariaLabel="NavLink Five"
-          />
-          <NavButton
-            buttonText="NavLink Six"
-            href="/link-six"
-            ariaLabel="NavLink Six"
-          />
-        </Navigation>
-        <Block spaceStack="space030">
-          <Divider
+const Footer = () => {
+  const { theme } = useContext(AppContext)
+  return (
+    <StyledFooter>
+      <MainGrid>
+        <Cell xs={12}>
+          <Block spaceStack="space030">
+            {!clientNavigationLogos[theme.name] ? (
+              <NewsKitLogoShort color="white" size="sizing120" />
+            ) : (
+              <Image
+                alt=""
+                src={`/MyAccount/${clientNavigationLogos[theme.name].src}`}
+                overrides={{
+                  width: clientNavigationLogos[theme.name].width,
+                }}
+              />
+            )}
+          </Block>
+          <Block spaceStack="space030">
+            <Divider
+              overrides={{
+                stylePreset: 'dividerFooterHorizontal',
+              }}
+            />
+          </Block>
+          <Navigation>
+            <NavButton
+              buttonText="NavLink One"
+              href="/link-one"
+              ariaLabel="NavLink One"
+            />
+            <NavButton
+              buttonText="NavLink Two"
+              href="/link-two"
+              ariaLabel="NavLink Two"
+            />
+            <NavButton
+              buttonText="NavLink Three"
+              href="/link-three"
+              ariaLabel="NavLink Three"
+            />
+            <NavButton
+              buttonText="NavLink Four"
+              href="/link-four"
+              ariaLabel="NavLink Four"
+            />
+            <NavButton
+              buttonText="NavLink Five"
+              href="/link-five"
+              ariaLabel="NavLink Five"
+            />
+            <NavButton
+              buttonText="NavLink Six"
+              href="/link-six"
+              ariaLabel="NavLink Six"
+            />
+          </Navigation>
+          <Block spaceStack="space030">
+            <Divider
+              overrides={{
+                stylePreset: 'dividerFooterHorizontal',
+              }}
+            />
+          </Block>
+          <Paragraph
             overrides={{
-              stylePreset: 'dividerFooterHorizontal',
+              typographyPreset: 'utilityMeta020',
+              stylePreset: 'inkSubtle',
             }}
-          />
-        </Block>
-        <Paragraph
-          overrides={{
-            typographyPreset: 'utilityMeta020',
-            stylePreset: 'inkSubtle',
-          }}
-        >
-          Copyright © 2020 News Corp. All rights reserved.
-        </Paragraph>
-      </Cell>
-    </MainGrid>
-  </StyledFooter>
-)
+          >
+            {`Copyright © ${getYear()} News Corp. All rights reserved.`}
+          </Paragraph>
+        </Cell>
+      </MainGrid>
+    </StyledFooter>
+  )
+}
 
 export default Footer

package/components/header/index.tsx

@@ -251,7 +251,7 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
                     <IconFilledMenu
                       overrides={{
                         size: 'iconSize030',
-                        stylePreset: 'linkStandaloneInverse',
+                        stylePreset: 'inkInverse',
                       }}
                       onClick={mobileMenuControl}
                       onKeyDown={handleEnterKeyPress(mobileMenuControl)}

package/components/section/layouts/__tests__/__snapshots__/SectionRow.test.tsx.snap

@@ -44,6 +44,10 @@ exports[`SectionRow SectionRow alternative titlebar 1`] = `
 
 .emotion-3 {
   margin-right: 16px;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
 }
 
 @media screen and (max-width: 767px) {
@@ -988,6 +992,10 @@ exports[`SectionRow SectionRow isDarkBackground 1`] = `
 
 .emotion-3 {
   margin-right: 16px;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
 }
 
 @media screen and (max-width: 767px) {
@@ -1932,6 +1940,10 @@ exports[`SectionRow SectionRow with title 1`] = `
 
 .emotion-3 {
   margin-right: 16px;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
 }
 
 @media screen and (max-width: 767px) {
@@ -2892,6 +2904,10 @@ exports[`SectionRow SectionRow without extra space 1`] = `
 
 .emotion-5 {
   margin-right: 16px;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
 }
 
 @media screen and (max-width: 767px) {

package/cypress/e2e/account/account-page.spec.js

@@ -160,29 +160,38 @@ describe('My account personal details', () => {
   //   )
   // })
 
-  // it('Should go to edit page and change password', () => {
-  //   cy.get('a[href="/account/edit/password"]')
-  //     .should('be.visible')
-  //     .click({ force: true })
+  it('Should go to edit page and change password', () => {
+    cy.get('a[href="/account/edit/password"]')
+      .should('be.visible')
+      .click({ force: true })
 
-  //   cy.get('[data-testid="primary-button"]').should('have.text', 'Send link')
-  //   cy.get('[data-testid="primary-button"]').scrollIntoView().click()
+    cy.get('[data-testid="primary-button"]').should('have.text', 'Send link')
+    cy.get('[data-testid="primary-button"]').scrollIntoView().click()
 
-  //   cy.get('[data-testid="primary-button"]').should('not.exist')
+    cy.get('[data-testid="primary-button"]').should('not.exist')
+    cy.get('a[href="/account/edit/password"]')
+      .should('be.visible')
+      .click({ force: true })
+    cy.get('[data-testid="inline-message"]')
+      .children()
+      .should(
+        'contain',
+        'Email sent to temp.account@tempaccount.com with a password reset link. If you haven’t received it in a couple of minutes, you may request a new link by clicking on the button below.'
+      )
+  })
 
-  //   cy.get('a[href="/account/edit/password"]')
-  //     .should('be.visible')
-  //     .click({ force: true })
+  it('Should show success toast', () => {
+    cy.get('a[href="/account/edit/password"]')
+      .should('be.visible')
+      .click({ force: true })
 
-  //   cy.get('[data-testid="inline-message"]')
-  //     .children()
-  //     .should(
-  //       'contain',
-  //       `Email sent to ${Cypress.env(
-  //         'newEmail'
-  //       )} with a password reset link. If you haven’t received it in a couple of minutes, you may request a new link by clicking on the button below.`
-  //     )
-  // })
+    cy.get('[data-testid="primary-button"]').should('have.text', 'Send link')
+    cy.get('[data-testid="primary-button"]').scrollIntoView().click()
+    cy.contains(
+      '[data-testid="toast-container"]',
+      'Email sent with a password reset link'
+    )
+  })
 
   it('Should go to edit page and change landline', () => {
     cy.get('a[href="/account/edit/landline"]')

package/cypress/e2e/account/payment-page.spec.js

@@ -7,36 +7,36 @@ describe('My account Payment page', () => {
     cy.get('iframe').should('exist')
   })
 
-  it('should successully send the form', () => {
-    if (Cypress.config('chromeWebSecurity')) {
-      throw new Error(
-        'To get Zuora element `chromeWebSecurity` must be disabled'
-      )
-    }
+  // it('should successully send the form', () => {
+  //   if (Cypress.config('chromeWebSecurity')) {
+  //     throw new Error(
+  //       'To get Zuora element `chromeWebSecurity` must be disabled'
+  //     )
+  //   }
 
-    cy.get('iframe').should('exist')
-    cy.getZuoraElement('input[name="field_creditCardHolderName"]').type(
-      'Gabriel Dimitrov'
-    )
-    cy.getZuoraElement('input[name="field_creditCardNumber"]').type(
-      '4111 1111 1111 1111'
-    )
-    cy.getZuoraElement('input[name="field_cardSecurityCode"]').type('123')
-    cy.getZuoraElement('input[name="field_creditCardPostalCode"]').type(
-      'E11 9HB'
-    )
+  //   cy.get('iframe').should('exist')
+  //   cy.getZuoraElement('input[name="field_creditCardHolderName"]').type(
+  //     'Gabriel Dimitrov'
+  //   )
+  //   cy.getZuoraElement('input[name="field_creditCardNumber"]').type(
+  //     '4111 1111 1111 1111'
+  //   )
+  //   cy.getZuoraElement('input[name="field_cardSecurityCode"]').type('123')
+  //   cy.getZuoraElement('input[name="field_creditCardPostalCode"]').type(
+  //     'E11 9HB'
+  //   )
 
-    cy.getZuoraElement('select[name="field_creditCardExpirationMonth"]').select(
-      '11'
-    )
-    cy.getZuoraElement('select[name="field_creditCardExpirationYear"]').select(
-      '2026'
-    )
-    cy.getZuoraElement('#submitButton').click()
+  //   cy.getZuoraElement('select[name="field_creditCardExpirationMonth"]').select(
+  //     '11'
+  //   )
+  //   cy.getZuoraElement('select[name="field_creditCardExpirationYear"]').select(
+  //     '2026'
+  //   )
+  //   cy.getZuoraElement('#submitButton').click()
 
-    cy.contains(
-      '[data-testid="toast-container"]',
-      'Your payment method has been updated'
-    )
-  })
+  //   cy.contains(
+  //     '[data-testid="toast-container"]',
+  //     'Your payment method has been updated'
+  //   )
+  // })
 })

package/helpers/getYear.ts

@@ -0,0 +1 @@
+export const getYear = () => new Date().getFullYear()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.24.1",
+  "version": "1.27.8",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -33,18 +33,18 @@
   },
   "dependencies": {
     "@apollo/client": "3.4.16",
-    "@newskit-render/api": "^0.14.0",
-    "@newskit-render/auth": "^0.28.0",
-    "@newskit-render/checkout": "^0.20.2",
-    "@newskit-render/feature-flags": "^0.10.0",
-    "@newskit-render/my-account": "^0.135.0",
-    "@newskit-render/shared-components": "^0.33.0",
-    "@newskit-render/sitemap": "^0.33.0",
-    "@newskit-render/validation": "^0.34.0",
+    "@newskit-render/api": "^0.14.2",
+    "@newskit-render/auth": "^0.28.2",
+    "@newskit-render/checkout": "^0.23.4",
+    "@newskit-render/feature-flags": "^0.10.2",
+    "@newskit-render/my-account": "^0.140.2",
+    "@newskit-render/shared-components": "^0.36.1",
+    "@newskit-render/sitemap": "^0.34.2",
+    "@newskit-render/validation": "^0.34.3",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",
     "newrelic": "7.1.0",
-    "newskit": "5.0.0",
+    "newskit": "5.1.1",
     "next": "12.0.10",
     "react": "17.0.2",
     "react-dom": "17.0.2",

package/theme/render-custom-theme.ts

@@ -54,6 +54,13 @@ export const renderCustomDarkTheme = createTheme({
   overrides: {
     colors,
     stylePresets: {
+      dividerFooterHorizontal: {
+        base: {
+          borderStyle: 'solid',
+          borderColor: '{{colors.interfaceNeutral010}}',
+          borderWidth: '{{borders.borderWidthDefault}}',
+        },
+      },
       cardContainer: {
         base: {
           backgroundColor: '{{colors.transparent}}',