@newskit-render/core 1.66.0 → 1.68.0

package/components/footer/index.tsx

@@ -13,7 +13,7 @@ import {
 import { MainGrid } from '../layout/MainGrid'
 import NewsKitLogoShort from '../common/NewskitLogoShort'
 import NavLink from '../common/NavLink'
-import { AppContext } from '../../app-context/AppContext'
+import { AppContext } from '../../context'
 import { getYear } from '../../helpers/getYear'
 
 const StyledFooter = styled.div`

package/components/header/banner-messages.ts

@@ -0,0 +1,45 @@
+export 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.',
+    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.',
+    button: 'Update payment details',
+  },
+  terminated: {
+    title: 'Your subscription has been terminated',
+    phoneNumber: 'XXXX-XXX-XXXX',
+    text:
+      'We didn’t receive payment for your subscription. To reactivate it, please call ##PHONE_NUMBER##.',
+    dismissDays: 7,
+  },
+  cancelled: {
+    title: 'Your subscription has been cancelled.',
+    phoneNumber: 'XXXX-XXX-XXXX',
+    text:
+      'You’ll no longer have access to subscription benefits. To re-activate call ##PHONE_NUMBER##.',
+    dismissDays: 7,
+  },
+  toBeCancelled: {
+    title: 'Your subscription will end soon.',
+    phoneNumber: 'XXXX-XXX-XXXX',
+    text:
+      'You have cancelled your subscription and will lose access to all benefits on ##DATE##. To re-activate your subscription call ##PHONE_NUMBER##.',
+  },
+  toBeCancelledWithRefund: {
+    title: 'Your subscription will end soon.',
+    phoneNumber: '0800 xxxx xxxxx',
+    text:
+      'We have successfully cancelled your subscription and will be processing your refund shortly. If you have any question please call ##PHONE_NUMBER##.',
+    dismissDays: 7,
+  },
+  treshold: {
+    firstNotice: 26,
+    secondNotice: 30,
+  },
+}

package/components/header/index.tsx

@@ -1,314 +1,58 @@
-import React, { useContext, useState } from 'react'
-import {
-  Cell,
-  styled,
-  getColorCssFromTheme,
-  getSizingCssFromTheme,
-  getFontsFromTheme,
-  Visible,
-  getMediaQueryFromTheme,
-  Stack,
-  Block,
-  IconFilledMenu,
-  Image,
-} from 'newskit'
+import React, { useContext } from 'react'
+import { styled, Block } from 'newskit'
 import { UserData } from '@newskit-render/my-account'
 import {
-  NextLink,
-  theSunTheme,
-  timesTheme,
-  virginRadioTheme,
-  ThemeDropdown,
   PastDueBannerExternal,
+  NavigationPrimary,
 } from '@newskit-render/shared-components'
 import {
   renderCustomLightTheme as LightTheme,
   renderCustomDarkTheme as DarkTheme,
 } from '../../theme'
-import { MainGrid } from '../layout/MainGrid'
-import NewsKitLogoFull from '../common/NewskitLogo'
-import NewsKitLogoShort from '../common/NewskitLogoShort'
-import NavLink from '../common/NavLink'
-import { AppContext } from '../../app-context/AppContext'
-import { handleEnterKeyPress } from '../../helpers/a11y'
-import IconNavLink from '../common/iconNavLink'
-import { IconAccount } from '../common/icons/IconAccount'
+import { AppContext } from '../../context'
+import { createThemeDropdownObject } from '../../helpers/createThemeDropdownObject'
+import { sectionLinks } from './navigation-links'
+import { pastDueBanner } from './banner-messages'
 
 export const headerSize = 'sizing100'
 
-const StyledHeader = styled.div`
-  ${getSizingCssFromTheme('height', headerSize)}
-  ${getColorCssFromTheme('backgroundColor', 'interfaceBrand010')};
-  a,
-  a:visited:not(:disabled) {
-    ${getColorCssFromTheme('color', 'white')};
-    font-weight: bold;
-    line-height: ${getFontsFromTheme('fontLineHeight040')};
-  }
-  ${getMediaQueryFromTheme('xs')} {
-    ${getSizingCssFromTheme('paddingTop', 'sizing040')};
-    ${getSizingCssFromTheme('paddingBottom', 'sizing040')};
-    ${getSizingCssFromTheme('paddingLeft', 'sizing000')};
-    ${getSizingCssFromTheme('paddingRight', 'sizing000')};
-  }
-  ${getMediaQueryFromTheme('lg')} {
-    ${getSizingCssFromTheme('paddingTop', 'sizing040')};
-    ${getSizingCssFromTheme('paddingBottom', 'sizing040')};
-    ${getSizingCssFromTheme('paddingLeft', 'sizing090')};
-    ${getSizingCssFromTheme('paddingRight', 'sizing090')};
-  }
-`
-
-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.',
-    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.',
-    button: 'Update payment details',
-  },
-  terminated: {
-    title: 'Your subscription has been terminated',
-    phoneNumber: 'XXXX-XXX-XXXX',
-    text:
-      'We didn’t receive payment for your subscription. To reactivate it, please call ##PHONE_NUMBER##.',
-    dismissDays: 7,
-  },
-  cancelled: {
-    title: 'Your subscription has been cancelled.',
-    phoneNumber: 'XXXX-XXX-XXXX',
-    text:
-      'You’ll no longer have access to subscription benefits. To re-activate call ##PHONE_NUMBER##.',
-    dismissDays: 7,
-  },
-  toBeCancelled: {
-    title: 'Your subscription will end soon.',
-    phoneNumber: 'XXXX-XXX-XXXX',
-    text:
-      'You have cancelled your subscription and will lose access to all benefits on ##DATE##. To re-activate your subscription call ##PHONE_NUMBER##.',
-  },
-  toBeCancelledWithRefund: {
-    title: 'Your subscription will end soon.',
-    phoneNumber: '0800 xxxx xxxxx',
-    text:
-      'We have successfully cancelled your subscription and will be processing your refund shortly. If you have any question please call ##PHONE_NUMBER##.',
-    dismissDays: 7,
-  },
-  treshold: {
-    firstNotice: 26,
-    secondNotice: 30,
-  },
-}
-
-type NavigationProps = {
-  show: boolean
-}
-
 const BannerContainer = styled(Block)`
   position: sticky;
   top: 0;
   z-index: 1;
 `
 
-const NavigationContainer = styled.div<NavigationProps>`
-  position: fixed;
-  overflow: auto;
-  width: 100%;
-  min-height: 100vh;
-  ${getColorCssFromTheme('backgroundColor', 'interfaceBrand010')};
-  left: 0;
-  ${getSizingCssFromTheme('top', headerSize)}
-  z-index: 2;
-  display: ${(props) => (props.show ? 'block' : 'none')};
-
-  ${getMediaQueryFromTheme('md')} {
-    display: flex;
-    position: relative;
-    overflow: hidden;
-    width: initial;
-    min-height: initial;
-    background-color: initial;
-    left: initial;
-    top: initial;
-    z-index: 1;
-    ${getSizingCssFromTheme('height', 'sizing080')}
-  }
-`
-
-const Navigation = styled.div`
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-between;
-  flex-direction: column;
-  align-items: center;
-
-  ${getMediaQueryFromTheme('md')} {
-    justify-content: flex-end;
-    flex-direction: row;
+const Header: React.FC<{ user: UserData }> = ({ user }) => {
+  const navigationPrimary = {
+    nav: sectionLinks,
+    loggedInUser: !!user,
+    gridOverrides: {
+      width: '100%',
+      maxWidth: '1920px',
+      marginInline: 'auto',
+    },
   }
-`
-
-const NavButton = ({
-  buttonText,
-  href,
-  ariaLabel,
-}: {
-  buttonText: string
-  href: string
-  isLast?: boolean
-  ariaLabel?: string
-}) => (
-  <Block
-    as="span"
-    spaceInline={{
-      xs: 'space000',
-      md: 'space040',
-    }}
-    spaceStack={{
-      xs: 'space050',
-      md: 'space000',
-    }}
-  >
-    <NavLink href={href} ariaLabel={ariaLabel} buttonText={buttonText} />
-  </Block>
-)
 
-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 { theme, setTheme } = useContext(AppContext)
+  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  const { sharedTheme, ...restThemes } = themeDropdownObject.options
 
-const Header: React.FC<{ user: UserData }> = ({ user }) => {
-  const [showMenu, setShowMenu] = useState(false)
-  const mobileMenuControl = () => {
-    setShowMenu(!showMenu)
-    document.body.style.overflow = showMenu ? '' : 'hidden'
+  const themeDropdownObjectUpdated = {
+    ...themeDropdownObject,
+    options: {
+      LightTheme,
+      DarkTheme,
+      ...restThemes,
+    },
   }
-  const { theme, setTheme } = useContext(AppContext)
 
   return (
     <>
-      <StyledHeader>
-        <MainGrid>
-          <Cell xs={12}>
-            <Stack
-              flow="horizontal-center"
-              stackDistribution="space-between"
-              wrap="nowrap"
-            >
-              <NextLink
-                type="standalone"
-                overrides={{ stylePreset: 'linkStandaloneInverse' }}
-                href="/"
-                aria-label="Logo Link"
-              >
-                {!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"
-                stackDistribution="flex-end"
-                wrap="nowrap"
-              >
-                <NavigationContainer
-                  show={showMenu}
-                  data-testid="NavigationContainer"
-                >
-                  <Navigation data-testid="Navigation">
-                    {showMenu && (
-                      <Block
-                        spaceStack="space050"
-                        data-testid="mobile-block-space"
-                      />
-                    )}
-                    <NavButton
-                      buttonText="Section One"
-                      href="/section-one"
-                      ariaLabel="Section One Link"
-                    />
-                    <NavButton
-                      buttonText="Section Two"
-                      href="/section-two"
-                      ariaLabel="Section Two Link"
-                    />
-                    <NavButton
-                      buttonText="Section Three"
-                      href="/section-three"
-                      ariaLabel="Section Three Link"
-                    />
-                    {user && (
-                      <IconNavLink
-                        icon={<IconAccount data-testid="account-link" />}
-                        href="/account"
-                        text="Account"
-                        spaceInline="space040"
-                        typographyPreset="utilityMeta020"
-                        stylePreset="linkStandaloneInverse"
-                      />
-                    )}
-                  </Navigation>
-                </NavigationContainer>
-                <Visible xs sm>
-                  <Block spaceInline="space050">
-                    <IconFilledMenu
-                      overrides={{
-                        size: 'iconSize030',
-                        stylePreset: 'inkInverse',
-                      }}
-                      onClick={mobileMenuControl}
-                      onKeyDown={handleEnterKeyPress(mobileMenuControl)}
-                      role="button"
-                      tabIndex={0}
-                      aria-label="Mobile Menu Button"
-                      data-testid="mobile-menu-btn"
-                    />
-                  </Block>
-                </Visible>
-                <ThemeDropdown
-                  theme={theme}
-                  setTheme={setTheme}
-                  options={{
-                    LightTheme,
-                    DarkTheme,
-                    theSunTheme,
-                    timesTheme,
-                    virginRadioTheme,
-                  }}
-                />
-              </Stack>
-            </Stack>
-          </Cell>
-        </MainGrid>
-      </StyledHeader>
+      <NavigationPrimary
+        {...navigationPrimary}
+        customTheme={theme}
+        themeDropdownObject={themeDropdownObjectUpdated}
+      />
       <PastDueBannerExternal
         pastDueBanner={pastDueBanner}
         user={user}

package/components/header/navigation-links.ts

@@ -0,0 +1,20 @@
+export const sectionLinks = [
+  {
+    text: 'Section One',
+    link: '/section-one',
+    icon: null,
+    ariaLabel: 'Section One Link',
+  },
+  {
+    text: 'Section Two',
+    link: '/section-two',
+    icon: null,
+    ariaLabel: 'Section Two Link',
+  },
+  {
+    text: 'Section Three',
+    link: '/section-three',
+    icon: null,
+    ariaLabel: 'Section Three Link',
+  },
+]

package/components/layout/LayoutTemplate.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { UserData } from '@newskit-render/my-account'
+import { Cell } from 'newskit'
 import Header from '../header'
 import Footer from '../footer'
 import { Gutter } from './Gutter'
@@ -14,7 +15,9 @@ const LayoutTemplate: React.FC<LayoutProps> = ({
   <>
     <Header user={user as UserData} />
     <Gutter>
-      <MainGrid {...mainGridProps}>{children}</MainGrid>
+      <MainGrid {...mainGridProps}>
+        <Cell xs={12}>{children}</Cell>
+      </MainGrid>
     </Gutter>
     <Footer />
   </>

package/config/__tests__/index.test.ts

@@ -0,0 +1,53 @@
+import { getSanitizedConfig } from '../index'
+
+const originalEnv = process.env
+const { window } = global
+
+beforeAll(() => {
+  // @ts-ignore
+  delete global.window
+})
+afterAll(() => {
+  global.window = window
+})
+describe('getSanitizedConfig', () => {
+  it('should return required config values', () => {
+    process.env = {
+      ...originalEnv,
+      SITE_HOST: 'host',
+      NEWSKIT_API_ENV_URL: 'url',
+      NEWSKIT_API_X_API_KEY: 'key',
+      OKTA_CLIENT_ID: 'oktaId',
+      OKTA_CLIENT_SECRET: 'oktasecret',
+      OKTA_DOMAIN: 'domain',
+      PUBLISHER: 'publisher',
+    }
+    const res = getSanitizedConfig()
+
+    expect(res).toEqual(
+      expect.objectContaining({
+        publisher: 'publisher',
+      })
+    )
+    process.env = {
+      ...originalEnv,
+    }
+  })
+
+  it('should throw error when NEWSKIT_API_ENV_URL is missing', () => {
+    process.env = {
+      ...originalEnv,
+      SITE_HOST: 'host',
+      NEWSKIT_API_X_API_KEY: 'key',
+      OKTA_CLIENT_ID: 'oktaId',
+      OKTA_CLIENT_SECRET: 'oktasecret',
+      OKTA_DOMAIN: 'domain',
+      PUBLISHER: 'publisher',
+    }
+    try {
+      getSanitizedConfig()
+    } catch (e) {
+      expect(e.message).toEqual('Missing key NEWSKIT_API_ENV_URL in env')
+    }
+  })
+})

package/config/environment.ts

@@ -0,0 +1,67 @@
+const requiredConfigFields: string[] = [
+  'SITE_HOST',
+  'NEWSKIT_API_ENV_URL',
+  'NEWSKIT_API_X_API_KEY',
+  'OKTA_CLIENT_ID',
+  'OKTA_CLIENT_SECRET',
+  'OKTA_DOMAIN',
+  'PUBLISHER',
+]
+
+export const getSanitizedConfig = () => {
+  for (const key of requiredConfigFields) {
+    const value = process.env[key]
+    if (
+      typeof window == 'undefined' &&
+      (value === undefined || value.length <= 0)
+    ) {
+      throw new Error(`Missing key ${key} in env`)
+    }
+  }
+  return {
+    oktaClientId: process.env.OKTA_CLIENT_ID as string,
+    oktaClientSecret: process.env.OKTA_CLIENT_SECRET as string,
+    oktaDomain: process.env.OKTA_DOMAIN as string,
+    newskitApiEnvUrl: process.env.NEWSKIT_API_ENV_URL as string,
+    newskitApiXApiKey: process.env.NEWSKIT_API_X_API_KEY as string,
+    optimizelysdkKey: process.env.OPTIMIZELY_SDK_KEY as string,
+    siteHost: process.env.SITE_HOST as string,
+    sitemapFirstPublicationDate: process.env
+      .SITEMAP_FIRST_PUBLICATION_DATE as string,
+    sitemapPublicationName: process.env.SITEMAP_PUBLICATION_NAME as string,
+    newRelicEnabled: process.env.NEW_RELIC_ENABLED as string,
+    experimentationWeb: process.env.EXPERIMENTATION_WEB as string,
+    sourcepointAccountId: process.env.SOURCEPOINT_ACCOUNT_ID as string,
+    sourcepointPropertyHref: process.env.SOURCEPOINT_PROPERTY_HREF as string,
+    tealiumAccountId: process.env.TEALIUM_ACCOUNT_ID as string,
+    tealiumProfileId: process.env.TEALIUM_PROFILE_ID as string,
+    tealiumEnv: process.env.TEALIUM_ENV as string,
+    twitterUsername: process.env.TWITTER_USERNAME as string,
+    gscId: process.env.GSC_ID as string,
+    publisher: process.env.PUBLISHER as string,
+  }
+}
+
+const config = getSanitizedConfig()
+
+export const {
+  oktaClientId,
+  oktaClientSecret,
+  oktaDomain,
+  newskitApiEnvUrl,
+  newskitApiXApiKey,
+  optimizelysdkKey,
+  siteHost,
+  sitemapFirstPublicationDate,
+  sitemapPublicationName,
+  newRelicEnabled,
+  experimentationWeb,
+  sourcepointAccountId,
+  sourcepointPropertyHref,
+  tealiumAccountId,
+  tealiumProfileId,
+  tealiumEnv,
+  twitterUsername,
+  gscId,
+  publisher,
+} = config

package/config/index.ts

@@ -1,85 +1,2 @@
-const {
-  OKTA_CLIENT_ID,
-  OKTA_CLIENT_SECRET,
-  OKTA_DOMAIN,
-  NEWSKIT_API_ENV_URL,
-  NEWSKIT_API_X_API_KEY,
-  SITE_HOST,
-  OPTIMIZELY_SDK_KEY,
-  SITEMAP_FIRST_PUBLICATION_DATE,
-  SITEMAP_PUBLICATION_NAME,
-  NEW_RELIC_ENABLED,
-  EXPERIMENTATION_WEB,
-  SOURCEPOINT_ACCOUNT_ID,
-  SOURCEPOINT_PROPERTY_HREF,
-  TEALIUM_ACCOUNT_ID,
-  TEALIUM_PROFILE_ID,
-  TEALIUM_ENV,
-  TWITTER_USERNAME,
-  GSC_ID,
-  PUBLISHER,
-} = process?.env
-
-const requiredConfigFields: string[] = [
-  'SITE_HOST',
-  'NEWSKIT_API_ENV_URL',
-  'NEWSKIT_API_X_API_KEY',
-  'OKTA_CLIENT_ID',
-  'OKTA_CLIENT_SECRET',
-  'OKTA_DOMAIN',
-  'PUBLISHER',
-]
-const getSanitizedConfig = () => {
-  for (const key of requiredConfigFields) {
-    const value = process.env[key]
-    if (
-      typeof window == 'undefined' &&
-      (value === undefined || value.length <= 0)
-    ) {
-      throw new Error(`Missing key ${key} in env`)
-    }
-  }
-  return {
-    oktaClientId: OKTA_CLIENT_ID,
-    oktaClientSecret: OKTA_CLIENT_SECRET,
-    oktaDomain: OKTA_DOMAIN,
-    newskitApiEnvUrl: NEWSKIT_API_ENV_URL,
-    newskitApiXApiKey: NEWSKIT_API_X_API_KEY,
-    optimizelysdkKey: OPTIMIZELY_SDK_KEY,
-    siteHost: SITE_HOST,
-    sitemapFirstPublicationDate: SITEMAP_FIRST_PUBLICATION_DATE,
-    sitemapPublicationName: SITEMAP_PUBLICATION_NAME,
-    newRelicEnabled: NEW_RELIC_ENABLED,
-    experimentationWeb: EXPERIMENTATION_WEB,
-    sourcepointAccountId: SOURCEPOINT_ACCOUNT_ID,
-    sourcepointPropertyHref: SOURCEPOINT_PROPERTY_HREF,
-    tealiumAccountId: TEALIUM_ACCOUNT_ID,
-    tealiumProfileId: TEALIUM_PROFILE_ID,
-    tealiumEnv: TEALIUM_ENV,
-    twitterUsername: TWITTER_USERNAME,
-    gscId: GSC_ID,
-    publisher: PUBLISHER,
-  }
-}
-const config = getSanitizedConfig()
-export const {
-  oktaClientId,
-  oktaClientSecret,
-  oktaDomain,
-  newskitApiEnvUrl,
-  newskitApiXApiKey,
-  optimizelysdkKey,
-  siteHost,
-  sitemapFirstPublicationDate,
-  sitemapPublicationName,
-  newRelicEnabled,
-  experimentationWeb,
-  sourcepointAccountId,
-  sourcepointPropertyHref,
-  tealiumAccountId,
-  tealiumProfileId,
-  tealiumEnv,
-  twitterUsername,
-  gscId,
-  publisher,
-} = config
+export * from './environment'
+export * from './multiTenancy'

package/config/multiTenancy.ts

@@ -0,0 +1,12 @@
+import { sharedTheme, timesTheme } from '@newskit-render/shared-components'
+import { Publisher } from '@newskit-render/api'
+import { demo } from '../theme/strings'
+
+export const translationsMap = {
+  [Publisher.DEMO]: demo,
+}
+
+export const themesMap = {
+  [Publisher.DEMO]: sharedTheme,
+  [Publisher.TIMES]: timesTheme,
+}

package/{app-context → context/app-context}/AppContext.test.tsx

@@ -2,12 +2,16 @@ import React from 'react'
 import { render } from 'react-dom'
 import { act } from 'react-dom/test-utils'
 import { sharedTheme } from '@newskit-render/shared-components'
-import { renderCustomDarkTheme } from '../theme'
-import { AppContextProvider, AppContext } from './AppContext'
+import { renderCustomDarkTheme } from '../../theme'
+import { AppContextProvider, AppContext } from '.'
 
 const container = document.createElement('div')
 document.body.appendChild(container)
 
+jest.mock('../multi-tenancy', () => ({
+  useMultiTenancy: jest.fn().mockReturnValue({ tenant: 'DEMO' }),
+}))
+
 describe('AppContext tests', () => {
   test('renders the content with the default theme', () => {
     render(
@@ -32,7 +36,7 @@ describe('AppContext tests', () => {
                 type="button"
                 aria-label="btn"
                 data-testid="button"
-                onClick={(e) => setTheme(renderCustomDarkTheme)}
+                onClick={(_) => setTheme(renderCustomDarkTheme)}
               />
               {JSON.stringify(theme)}
             </div>