@newskit-render/core 1.14.1 → 1.24.1

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

@@ -200,30 +200,26 @@ exports[`Footer tests should render footer 1`] = `
 
 .emotion-12 {
   margin: 0;
-  padding: 1px 0;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
-  line-height: 1.4285714285714286;
+  line-height: 21px;
   font-weight: 500;
-  letter-spacing: -0.5px;
+  letter-spacing: 0;
+  padding: 0.5px 0px;
   display: inline-block;
   display: block;
 }
 
 .emotion-12::before {
   content: '';
+  margin-bottom: -0.391em;
   display: block;
-  height: 0;
-  width: 0;
-  margin-bottom: -0.3955357142857143em;
 }
 
 .emotion-12::after {
   content: '';
+  margin-top: -0.409em;
   display: block;
-  height: 0;
-  width: 0;
-  margin-top: -0.3955357142857143em;
 }
 
 .emotion-35 {
@@ -231,9 +227,9 @@ exports[`Footer tests should render footer 1`] = `
   color: #535353;
   font-family: "DM Sans",sans-serif;
   font-size: 14px;
-  line-height: 1.4285714285714286;
+  line-height: 1.5;
   font-weight: 500;
-  letter-spacing: -0.5px;
+  letter-spacing: 0;
 }
 
 .emotion-35 svg {

package/components/header/index.test.tsx

@@ -37,7 +37,7 @@ describe('Header tests', () => {
 
   test('render links', () => {
     const { getByLabelText } = renderWithTheme(Header)
-    expect(getByLabelText('Home Page')).toHaveAttribute('href', '/')
+    expect(getByLabelText('Logo Link')).toHaveAttribute('href', '/')
     expect(getByLabelText('Section One Link')).toHaveAttribute(
       'href',
       '/section-one'

package/components/header/index.tsx

@@ -10,9 +10,16 @@ import {
   Stack,
   Block,
   IconFilledMenu,
+  Image,
 } from 'newskit'
 import { PastDueBannerExternal } from '@newskit-render/my-account'
-import { NextLink } from '@newskit-render/shared-components'
+import {
+  NextLink,
+  theSunTheme,
+  timesTheme,
+  virginRadioTheme,
+  ThemeDropdown,
+} from '@newskit-render/shared-components'
 import {
   renderCustomLightTheme as LightTheme,
   renderCustomDarkTheme as DarkTheme,
@@ -22,7 +29,6 @@ import NewsKitLogoFull from '../common/NewskitLogo'
 import NewsKitLogoShort from '../common/NewskitLogoShort'
 import NavLink from '../common/NavLink'
 import { AppContext } from '../../app-context/AppContext'
-import { getKey } from '../../helpers/articleUtil'
 import { handleEnterKeyPress } from '../../helpers/a11y'
 import { UserData, VxInstance } from '../../helpers/global-types'
 
@@ -30,7 +36,7 @@ export const headerSize = 'sizing090'
 
 const StyledHeader = styled.div`
   ${getSizingCssFromTheme('height', headerSize)}
-  ${getColorCssFromTheme('backgroundColor', 'neutral100')};
+  ${getColorCssFromTheme('backgroundColor', 'customInterfaceBrand')};
   a,
   a:visited:not(:disabled) {
     ${getColorCssFromTheme('color', 'white')};
@@ -54,21 +60,25 @@ const StyledHeader = styled.div`
 const pastDueBanner = {
   firstNotice: {
     title: "We haven't been able to take payment",
-    text: 'You may need to update your payment details to keep your subscription.',
+    text:
+      'You may need to update your payment details to keep your subscription.',
     button: 'Update payment details',
   },
   secondNotice: {
     title: 'Act now to keep your subscription',
-    text: 'We’ve tried several times, but haven’t been able to take payment. Please update your payment details to keep your subscription.',
+    text:
+      'We’ve tried several times, but haven’t been able to take payment. Please update your payment details to keep your subscription.',
     button: 'Update payment details',
   },
   terminated: {
     title: 'Your subscription has been terminated',
-    text: 'We didn’t receive payment for your subscription. To reactivate it, please call 0800 018 5177.',
+    text:
+      'We didn’t receive payment for your subscription. To reactivate it, please call 0800 018 5177.',
   },
   cancelled: {
     title: 'Your subscription has been cancelled.',
-    text: 'You’ll no longer have access to subscription benefits. To re-activate call 0800 555 1234.',
+    text:
+      'You’ll no longer have access to subscription benefits. To re-activate call 0800 555 1234.',
   },
   treshold: {
     firstNotice: 26,
@@ -147,21 +157,13 @@ const NavButton = ({
   </Block>
 )
 
-const ThemeDropdown = ({ options }) => {
-  const { theme, setTheme } = useContext(AppContext)
-
-  return (
-    <select
-      value={getKey(options, theme)}
-      onChange={(e) => setTheme(options[e.target.value])}
-    >
-      {Object.keys(options).map((o) => (
-        <option key={o} value={o}>
-          {o}
-        </option>
-      ))}
-    </select>
-  )
+const clientNavigationLogos = {
+  'The-Sun': { src: 'navigationPrimary-brandMark-sun.svg', width: '115px' },
+  'Virgin-Radio': { src: 'navigationPrimary-brandMark-vr.svg', width: '150px' },
+  'The-Times': {
+    src: 'navigationPrimary-brandMark-times.svg',
+    width: '150px',
+  },
 }
 
 const Header: React.FC<{ user: UserData }> = ({ user }) => {
@@ -170,6 +172,8 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
     setShowMenu(!showMenu)
     document.body.style.overflow = showMenu ? '' : 'hidden'
   }
+  const { theme, setTheme } = useContext(AppContext)
+
   return (
     <>
       <StyledHeader>
@@ -184,14 +188,30 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
                 type="standalone"
                 overrides={{ stylePreset: 'linkStandaloneInverse' }}
                 href="/"
-                aria-label="Home Page"
+                aria-label="Logo Link"
               >
-                <Visible md lg xl>
-                  <NewsKitLogoFull color="white" size="sizing120" />
-                </Visible>
-                <Visible xs sm>
-                  <NewsKitLogoShort color="white" size="sizing120" />
-                </Visible>
+                {!clientNavigationLogos[theme.name] ? (
+                  <>
+                    <Visible md lg xl>
+                      <NewsKitLogoFull color="white" size="sizing120" />
+                    </Visible>
+                    <Visible xs sm>
+                      <NewsKitLogoShort color="white" size="sizing120" />
+                    </Visible>
+                  </>
+                ) : (
+                  <Block>
+                    <Image
+                      alt=""
+                      src={`/MyAccount/${
+                        clientNavigationLogos[theme.name].src
+                      }`}
+                      overrides={{
+                        width: clientNavigationLogos[theme.name].width,
+                      }}
+                    />
+                  </Block>
+                )}
               </NextLink>
               <Stack
                 flow="horizontal-center"
@@ -242,7 +262,17 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
                     />
                   </Block>
                 </Visible>
-                <ThemeDropdown options={{ LightTheme, DarkTheme }} />
+                <ThemeDropdown
+                  theme={theme}
+                  setTheme={setTheme}
+                  options={{
+                    LightTheme,
+                    DarkTheme,
+                    theSunTheme,
+                    timesTheme,
+                    virginRadioTheme,
+                  }}
+                />
               </Stack>
             </Stack>
           </Cell>

package/components/section/__tests__/ArticleSlice.test.tsx

@@ -34,18 +34,22 @@ describe('ArticleSlice', () => {
   })
 
   test('Handle SECONDARY_4 article-block Index Page', () => {
-    const { getByTestId, getAllByTestId, getAllByRole, queryByTestId } =
-      renderWithTheme(SectionContext.Provider, {
-        value: {
-          isIndexPage: true,
-        },
-        children: (
-          <ArticleSlice
-            slice={getPageMock.page.body[0].children[1]}
-            collection={getPageMock.page.body[0]}
-          />
-        ),
-      })
+    const {
+      getByTestId,
+      getAllByTestId,
+      getAllByRole,
+      queryByTestId,
+    } = renderWithTheme(SectionContext.Provider, {
+      value: {
+        isIndexPage: true,
+      },
+      children: (
+        <ArticleSlice
+          slice={getPageMock.page.body[0].children[1]}
+          collection={getPageMock.page.body[0]}
+        />
+      ),
+    })
     expect(queryByTestId('SectionTitleBar')).not.toBeInTheDocument()
     expect(getByTestId('SECONDARY_4-Grid')).toBeInTheDocument()
     expect(getAllByTestId(/titleTeaserVertical-/).length).toEqual(4)
@@ -67,18 +71,22 @@ describe('ArticleSlice', () => {
   })
 
   test('Handle SECONDARY_4_ODD article-block Index Page', () => {
-    const { getByTestId, getAllByTestId, getAllByRole, queryByTestId } =
-      renderWithTheme(SectionContext.Provider, {
-        value: {
-          isIndexPage: true,
-        },
-        children: (
-          <ArticleSlice
-            slice={getPageMock.page.body[0].children[5]}
-            collection={getPageMock.page.body[0]}
-          />
-        ),
-      })
+    const {
+      getByTestId,
+      getAllByTestId,
+      getAllByRole,
+      queryByTestId,
+    } = renderWithTheme(SectionContext.Provider, {
+      value: {
+        isIndexPage: true,
+      },
+      children: (
+        <ArticleSlice
+          slice={getPageMock.page.body[0].children[5]}
+          collection={getPageMock.page.body[0]}
+        />
+      ),
+    })
     expect(getByTestId('SectionTitleBar')).toBeInTheDocument()
     expect(queryByTestId('addTopSpace')).toBeInTheDocument()
     expect(getByTestId('SECONDARY_4_ODD-Grid')).toBeInTheDocument()

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

@@ -235,7 +235,6 @@ exports[`Lead 1`] = `
 
 .emotion-11 {
   margin: 0;
-  padding: 1px 0;
   color: #0A0A0A;
 }
 
@@ -247,25 +246,22 @@ exports[`Lead 1`] = `
   .emotion-11 {
     font-family: "Bitter",serif;
     font-size: 24px;
-    line-height: 1.1666666666666667;
+    line-height: 27px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-11::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.2333333333333334em;
   }
 
   .emotion-11::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.2958333333333334em;
   }
 }
 
@@ -273,25 +269,22 @@ exports[`Lead 1`] = `
   .emotion-11 {
     font-family: "Bitter",serif;
     font-size: 36px;
-    line-height: 1.1111111111111112;
+    line-height: 40.5px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-11::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.2055555555555556em;
   }
 
   .emotion-11::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.2680555555555556em;
   }
 }
 
@@ -299,25 +292,22 @@ exports[`Lead 1`] = `
   .emotion-11 {
     font-family: "Bitter",serif;
     font-size: 40px;
-    line-height: 1.2;
+    line-height: 45px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-11::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.25em;
   }
 
   .emotion-11::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.3125em;
   }
 }
 
@@ -469,7 +459,6 @@ exports[`Lead 1`] = `
 
 .emotion-24 {
   margin: 0;
-  padding: 1px 0;
   color: #0A0A0A;
 }
 
@@ -481,25 +470,22 @@ exports[`Lead 1`] = `
   .emotion-24 {
     font-family: "Bitter",serif;
     font-size: 24px;
-    line-height: 1.1666666666666667;
+    line-height: 27px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-24::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.2333333333333334em;
   }
 
   .emotion-24::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.2958333333333334em;
   }
 }
 
@@ -507,25 +493,22 @@ exports[`Lead 1`] = `
   .emotion-24 {
     font-family: "Bitter",serif;
     font-size: 28px;
-    line-height: 1.1428571428571428;
+    line-height: 31.5px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-24::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.22142857142857142em;
   }
 
   .emotion-24::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.2839285714285714em;
   }
 }
 
@@ -533,25 +516,22 @@ exports[`Lead 1`] = `
   .emotion-24 {
     font-family: "Bitter",serif;
     font-size: 32px;
-    line-height: 1.125;
+    line-height: 36px;
     font-weight: 500;
-    letter-spacing: -0.5px;
+    letter-spacing: 0;
+    padding: 0.5px 0px;
   }
 
   .emotion-24::before {
     content: '';
+    margin-bottom: -0.2055em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-bottom: -0.21250000000000002em;
   }
 
   .emotion-24::after {
     content: '';
+    margin-top: -0.2275em;
     display: block;
-    height: 0;
-    width: 0;
-    margin-top: -0.275em;
   }
 }