@newskit-render/core 0.0.0-d55b7d88

package/components/teaser/index.test.tsx

@@ -0,0 +1,50 @@
+import { renderWithTheme } from '../../helpers/test-utils'
+import Teaser, { TeaserProps } from './index'
+
+describe('Teaser', () => {
+  const getTeaserData = (variant: TeaserProps['variant']): TeaserProps => ({
+    variant,
+    media: {
+      src: 'https://plchldr.co/i/288x192?bg=F0F0F0&fc=111111&text=img',
+      alt: 'test-image',
+    },
+    title: 'Arcu risus mauris sodales penatibus.',
+    teaser:
+      'Et libero, congue at condimentum. Id lobortis urna consectetur a, scelerisque lorem amet, magnis fringilla.',
+  })
+  const imageBase64 =
+    '/_next/image?url=https%3A%2F%2Fplchldr.co%2Fi%2F288x192%3Fbg%3DF0F0F0%26fc%3D111111%26text%3Dimg&w=3840&q=75'
+
+  it('titleTeaserVertical', () => {
+    const teaserData = getTeaserData('titleTeaserVertical')
+    const { getByText, getByAltText } = renderWithTheme(Teaser, teaserData)
+    expect(getByAltText(teaserData.media.alt as string)).toHaveAttribute(
+      'src',
+      imageBase64
+    )
+    expect(getByText(teaserData.title)).toBeInTheDocument()
+    expect(getByText(teaserData.teaser as string)).toBeInTheDocument()
+  })
+
+  it('titleVertical', () => {
+    const teaserData = getTeaserData('titleVertical')
+    const { queryByText, getByAltText } = renderWithTheme(Teaser, teaserData)
+    expect(getByAltText(teaserData.media.alt as string)).toHaveAttribute(
+      'src',
+      imageBase64
+    )
+    expect(queryByText(teaserData.title)).toBeInTheDocument()
+    expect(queryByText(teaserData.teaser as string)).not.toBeInTheDocument()
+  })
+
+  it('featureVertical', () => {
+    const teaserData = getTeaserData('titleTeaserVertical')
+    const { getByText, getByAltText } = renderWithTheme(Teaser, teaserData)
+    expect(getByAltText(teaserData.media.alt as string)).toHaveAttribute(
+      'src',
+      imageBase64
+    )
+    expect(getByText(teaserData.title)).toBeInTheDocument()
+    expect(getByText(teaserData.teaser as string)).toBeInTheDocument()
+  })
+})

package/components/teaser/index.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { Card, Block, TextBlock, Headline } from 'newskit'
+import { Image, getAspectRatio } from '@newskit-render/shared-components'
+import teaserVariants, { VariantsName } from './teaserVariants'
+
+export interface TeaserProps {
+  variant?: VariantsName
+  url?: string
+  title: string
+  teaser?: string
+  media: {
+    src: string
+    alt?: string
+    loadingAspectRatio?: string
+  }
+}
+
+const Teaser: React.FC<TeaserProps> = ({
+  variant = 'base',
+  url,
+  title,
+  teaser,
+  media,
+}) => {
+  const presets = teaserVariants[variant]
+
+  return (
+    <Card
+      layout={presets.layout}
+      href={url}
+      media={() => (
+        <Image
+          aspectRatio={getAspectRatio(media.loadingAspectRatio)}
+          src={media.src}
+          alt={media.alt}
+        />
+      )}
+      overrides={presets.card}
+    >
+      <Block marginBlockEnd={presets.title.marginBlockEnd}>
+        <Headline
+          overrides={{
+            typographyPreset: presets.title.typographyPreset,
+          }}
+          headingAs="h3"
+        >
+          {title}
+        </Headline>
+      </Block>
+      {teaser && presets.teaser && (
+        <Block marginBlockEnd={presets.teaser.marginBlockEnd}>
+          <TextBlock
+            stylePreset={presets.teaser.stylePreset}
+            typographyPreset={presets.teaser.typographyPreset}
+          >
+            {teaser}
+          </TextBlock>
+        </Block>
+      )}
+    </Card>
+  )
+}
+
+export default Teaser

package/components/teaser/teaserVariants.ts

@@ -0,0 +1,33 @@
+import titleTeaserVertical from './variants/titleTeaserVariant'
+import titleVertical from './variants/titleVertical'
+import featureVertical from './variants/featureVariant'
+import horizontal from './variants/horizontal'
+import { VariantsObject } from './variant-types'
+
+const base: VariantsObject = {
+  layout: 'vertical',
+  card: {},
+  media: {},
+  title: {
+    stylePreset: {},
+    typographyPreset: {},
+    marginBlockEnd: 'space020',
+  },
+  teaser: {
+    stylePreset: {},
+    typographyPreset: {},
+    marginBlockEnd: 'space020',
+  },
+}
+
+const teaserVariants = {
+  base,
+  horizontal,
+  titleTeaserVertical,
+  titleVertical,
+  featureVertical,
+}
+
+export default teaserVariants
+
+export type VariantsName = keyof typeof teaserVariants

package/components/teaser/variant-types.ts

@@ -0,0 +1,49 @@
+import { CardProps } from 'newskit'
+
+export type VariantsObject = {
+  layout: CardProps['layout']
+  card?: {}
+  media?: { loadingAspectRatio?: string }
+  title: {
+    stylePreset?: string | {}
+    typographyPreset?:
+      | {
+          xl?: string
+          lg?: string
+          md?: string
+          sm?: string
+          xs?: string
+        }
+      | string
+    marginBlockEnd:
+      | {
+          xl?: string
+          lg?: string
+          md?: string
+          sm?: string
+          xs?: string
+        }
+      | string
+  }
+  teaser?: {
+    stylePreset?: string | {}
+    typographyPreset?:
+      | {
+          xl?: string
+          lg?: string
+          md?: string
+          sm?: string
+          xs?: string
+        }
+      | string
+    marginBlockEnd?:
+      | {
+          xl?: string
+          lg?: string
+          md?: string
+          sm?: string
+          xs?: string
+        }
+      | string
+  }
+}

package/components/teaser/variants/featureVariant.ts

@@ -0,0 +1,42 @@
+import { VariantsObject } from '../variant-types'
+
+const featureVertical: VariantsObject = {
+  layout: 'vertical',
+  card: {
+    mediaContainer: {
+      spaceInline: {
+        md: 'space050',
+        xs: 'space045',
+      },
+    },
+  },
+  media: {
+    loadingAspectRatio: '16:9',
+  },
+  title: {
+    stylePreset: 'inkContrast',
+    typographyPreset: {
+      xl: 'editorialHeadline080',
+      md: 'editorialHeadline070',
+      xs: 'editorialHeadline040',
+    },
+    marginBlockEnd: {
+      md: 'space050',
+      xs: 'space045',
+    },
+  },
+  teaser: {
+    stylePreset: 'inkContrast',
+    typographyPreset: {
+      xl: 'editorialSubheadline050',
+      md: 'editorialSubheadline040',
+      xs: 'editorialSubheadline020',
+    },
+    marginBlockEnd: {
+      md: 'space040',
+      xs: 'space030',
+    },
+  },
+}
+
+export default featureVertical

package/components/teaser/variants/horizontal.ts

@@ -0,0 +1,14 @@
+import { VariantsObject } from '../variant-types'
+
+const horizontalVariant: VariantsObject = {
+  layout: 'horizontal',
+  card: {
+    horizontalRatio: '1:1',
+  },
+  title: {
+    stylePreset: 'inkContrast',
+    marginBlockEnd: 'space020',
+  },
+}
+
+export default horizontalVariant

package/components/teaser/variants/titleTeaserVariant.ts

@@ -0,0 +1,32 @@
+import { VariantsObject } from '../variant-types'
+
+const titleTeaserVertical: VariantsObject = {
+  layout: 'vertical',
+  card: {
+    mediaContainer: {
+      spaceInline: 'space045',
+    },
+  },
+  media: {
+    loadingAspectRatio: '3:2',
+  },
+  title: {
+    stylePreset: 'inkContrast',
+    typographyPreset: {
+      xl: 'editorialHeadline040',
+      md: 'editorialHeadline030',
+      xs: 'editorialHeadline020',
+    },
+    marginBlockEnd: 'space045',
+  },
+  teaser: {
+    stylePreset: 'inkContrast',
+    typographyPreset: {
+      md: 'editorialParagraph020',
+      xs: 'editorialParagraph010',
+    },
+    marginBlockEnd: 'space030',
+  },
+}
+
+export default titleTeaserVertical

package/components/teaser/variants/titleVertical.ts

@@ -0,0 +1,24 @@
+import { VariantsObject } from '../variant-types'
+
+const titleVertical: VariantsObject = {
+  layout: 'vertical',
+  card: {
+    mediaContainer: {
+      spaceInline: 'space045',
+    },
+  },
+  media: {
+    loadingAspectRatio: '16:9',
+  },
+  title: {
+    stylePreset: 'inkContrast',
+    typographyPreset: {
+      xl: 'editorialHeadline060',
+      md: 'editorialHeadline050',
+      xs: 'editorialHeadline040',
+    },
+    marginBlockEnd: 'space040',
+  },
+}
+
+export default titleVertical

package/components/utils/index.test.ts

@@ -0,0 +1,12 @@
+import { getSubStringBetween } from './index'
+
+describe('Utils tests', () => {
+  test('getSubStringBetween', () => {
+    const testString = 'Beginning: This will be the subString :End'
+    const start = 'Beginning:'
+    const finish = ':End'
+    expect(getSubStringBetween(start, finish, testString)).toBe(
+      ' This will be the subString '
+    )
+  })
+})

package/components/utils/index.ts

@@ -0,0 +1,6 @@
+export const getSubStringBetween = (
+  start: string,
+  finish: string,
+  str: string
+) =>
+  str.substring(str.lastIndexOf(start) + start.length, str.lastIndexOf(finish))

package/config/__tests__/index.test.ts

@@ -0,0 +1,54 @@
+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,
+      NEWSKIT_API_ENV_URL: 'url',
+      NEWSKIT_API_X_API_KEY: 'key',
+      OKTA_CLIENT_ID: 'oktaId',
+      OKTA_CLIENT_SECRET: 'oktasecret',
+      OKTA_DOMAIN: 'domain',
+      PUBLISHER: 'publisher',
+      ALGOLIA_APP_ID: 'algoliaAppId',
+      ALGOLIA_API_KEY: 'algoliaKey',
+      ALGOLIA_INDEX: 'algliaIndex',
+    }
+    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,
+      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,80 @@
+const requiredConfigFields: string[] = [
+  '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,
+    sitemapFirstPublicationDate: process.env
+      .SITEMAP_FIRST_PUBLICATION_DATE as string,
+    sitemapPublicationName: process.env.SITEMAP_PUBLICATION_NAME as string,
+    winstonEnabled: process.env.WINSTON_ENABLED as string,
+    winstonLogLevel: process.env.WINSTON_LOG_LEVEL 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,
+    sourcepointPropertyId: process.env.SOURCEPOINT_PROPERTY_ID 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,
+    algoliaAppId: process.env.ALGOLIA_APP_ID as string,
+    algoliaApiKey: process.env.ALGOLIA_API_KEY as string,
+    algoliaIndex: process.env.ALGOLIA_INDEX as string,
+    nodeEnviroment: process.env.NODE_ENV as string,
+    acsSessionUrlTimes: process.env.ACS_SESSION_URL_TIMES as string,
+    acsSessionUrlSun: process.env.ACS_SESSION_URL_SUN as string,
+  }
+}
+
+const config = getSanitizedConfig()
+
+export const {
+  oktaClientId,
+  oktaClientSecret,
+  oktaDomain,
+  newskitApiEnvUrl,
+  newskitApiXApiKey,
+  optimizelysdkKey,
+  sitemapFirstPublicationDate,
+  sitemapPublicationName,
+  winstonEnabled,
+  winstonLogLevel,
+  experimentationWeb,
+  sourcepointAccountId,
+  sourcepointPropertyHref,
+  sourcepointPropertyId,
+  tealiumAccountId,
+  tealiumProfileId,
+  tealiumEnv,
+  twitterUsername,
+  gscId,
+  publisher,
+  algoliaAppId,
+  algoliaApiKey,
+  algoliaIndex,
+  nodeEnviroment,
+  acsSessionUrlTimes,
+  acsSessionUrlSun,
+} = config

package/config/index.ts

@@ -0,0 +1,2 @@
+export * from './environment'
+export * from './multiTenancy'

package/config/multiTenancy.ts

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

package/constants/index.ts

@@ -0,0 +1,2 @@
+export const getAccountQueryUrl = (siteHost: string): string =>
+  `${siteHost}/api/account/query`

package/context/app-context/AppContext.test.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+// eslint-disable-next-line react/no-deprecated
+import { render } from 'react-dom'
+import { act } from 'react-dom/test-utils'
+import { sharedTheme, sharedThemeDark } from '@newskit-render/shared-components'
+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(
+      <AppContextProvider>
+        <AppContext.Consumer>
+          {({ theme }) => <div>{JSON.stringify(theme)}</div>}
+        </AppContext.Consumer>
+      </AppContextProvider>,
+      container
+    )
+
+    expect(container.textContent).toBe(JSON.stringify(sharedTheme))
+  })
+
+  it('setTheme should switch the theme', () => {
+    render(
+      <AppContextProvider>
+        <AppContext.Consumer>
+          {({ theme, setTheme }) => (
+            <div>
+              <button
+                type="button"
+                aria-label="btn"
+                data-testid="button"
+                onClick={(_) => setTheme(sharedThemeDark)}
+              />
+              {JSON.stringify(theme)}
+            </div>
+          )}
+        </AppContext.Consumer>
+      </AppContextProvider>,
+      container
+    )
+
+    const button = document.querySelector('[data-testid=button]')
+    act(() => {
+      button?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+
+    expect(container.textContent).toBe(JSON.stringify(sharedThemeDark))
+  })
+})

package/context/app-context/holidayStopListContextOverrides.ts

@@ -0,0 +1,18 @@
+import {
+  holidayStopContext,
+  holidayStopListContext,
+} from '@newskit-render/my-account'
+
+const HOLIDAY_STOP_BASE_URL = '/account/holiday-stop'
+
+export const holidayStopListContextOverrides = {
+  ...holidayStopContext,
+  ...holidayStopListContext,
+  header: {
+    ...holidayStopContext.header,
+    backButton: {
+      ...holidayStopContext.header.backButton,
+      href: HOLIDAY_STOP_BASE_URL,
+    },
+  },
+}

package/context/app-context/index.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react'
+import { UncompiledTheme } from 'newskit'
+import {
+  sharedTheme,
+  ThemeDropdownObject,
+} from '@newskit-render/shared-components'
+import { useMultiTenancy } from '../multi-tenancy'
+import { themesMap } from '../../config'
+import { useThemeDropdownObject } from '../../helpers/useThemeDropdownObject'
+
+type AppContextType = {
+  theme: UncompiledTheme
+  setTheme: (T: UncompiledTheme) => void
+  themeDropdownObject: ThemeDropdownObject
+}
+
+const AppContext = React.createContext({
+  theme: sharedTheme,
+} as AppContextType)
+
+const AppContextProvider = ({ children }: { children: JSX.Element }) => {
+  const { tenant } = useMultiTenancy()
+  const tenantTheme = themesMap[tenant]
+  const [theme, setTheme] = useState(tenantTheme)
+  const themeDropdownObject = useThemeDropdownObject(setTheme)
+
+  return (
+    <AppContext.Provider value={{ theme, setTheme, themeDropdownObject }}>
+      {children}
+    </AppContext.Provider>
+  )
+}
+
+export { AppContextProvider, AppContext }

package/context/app-context/paymentMethodContext.tsx

@@ -0,0 +1,70 @@
+import { IconCreditCard, IconDirectDebit } from '@newskit-render/my-account'
+const itemFilterDataPath = 'paymentFailure.active'
+const lablIconOverrides = {
+  size: 'iconSize030',
+  stylePreset: 'inkContrast',
+  marginInlineEnd: 'space040',
+}
+
+export const paymentMethodContext = {
+  items: [
+    {
+      label: 'Debit/Credit Card',
+      href: '[baseURL]/payment/credit-card',
+      default: 'Debit/Credit Card',
+      labelIcon: {
+        Icon: IconCreditCard,
+        overrides: lablIconOverrides,
+      },
+      icon: 'internal',
+      filter: {
+        dataPath: itemFilterDataPath,
+        showOnTrue: true,
+      },
+    },
+    {
+      label: 'Direct Debit',
+      href: '[baseURL]/payment/direct-debit',
+      default: 'Direct Debit',
+      labelIcon: {
+        Icon: IconDirectDebit,
+        overrides: lablIconOverrides,
+      },
+      icon: 'internal',
+      filter: {
+        dataPath: itemFilterDataPath,
+        showOnTrue: false,
+      },
+    },
+    // {
+    //   label: 'PayPal',
+    //   href: '[baseURL]/payment-paypal',
+    //   default: 'PayPal',
+    //   labelIcon: {
+    //     Icon: IconPaypal,
+    //     overrides: lablIconOverrides,
+    //   },
+    //   icon: 'internal',
+    // },
+    // {
+    //   label: 'ApplePay',
+    //   href: '[baseURL]/payment-applepay',
+    //   default: 'ApplePay',
+    //   labelIcon: {
+    //     Icon: IconApplePay,
+    //     overrides: lablIconOverrides,
+    //   },
+    //   icon: 'internal',
+    // },
+    // {
+    //   label: 'Google Pay',
+    //   href: '[baseURL]/payment-google-pay',
+    //   default: 'Google Pay',
+    //   labelIcon: {
+    //     Icon: IconGooglePay,
+    //     overrides: lablIconOverrides,
+    //   },
+    //   icon: 'internal',
+    // },
+  ],
+}

package/context/index.tsx

@@ -0,0 +1,2 @@
+export * from './app-context'
+export * from './multi-tenancy'