@newskit-render/core 0.0.0-d55b7d88

package/components/footer/index.tsx

@@ -0,0 +1,151 @@
+import React, { useContext } from 'react'
+import {
+  styled,
+  getColorCssFromTheme,
+  Cell,
+  getMediaQueryFromTheme,
+  getSizingCssFromTheme,
+  Paragraph,
+  Divider,
+  Block,
+} from 'newskit'
+import { Image } from '@newskit-render/shared-components'
+import { MainGrid } from '../layout/MainGrid'
+import NewsKitLogoShort from '../common/NewskitLogoShort'
+import NavLink from '../common/NavLink'
+import { AppContext } from '../../context'
+import { getYear } from '../../helpers/getYear'
+
+const StyledFooter = styled.div`
+  ${getColorCssFromTheme('backgroundColor', 'neutral100')};
+  width: 100%;
+  bottom: 0;
+  display: block;
+  ${getSizingCssFromTheme('padding', 'sizing030')} 0;
+`
+
+const Navigation = styled.div`
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  flex-direction: column;
+  ${getSizingCssFromTheme('marginBottom', 'sizing050')};
+
+  ${getMediaQueryFromTheme('md')} {
+    justify-content: flex-start;
+    flex-direction: row;
+  }
+`
+
+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,
+  ariaLabel,
+}: {
+  buttonText: string
+  href: string
+  isLast?: boolean
+  ariaLabel?: string
+}) => (
+  <Block
+    as="span"
+    spaceInline={{
+      xs: 'space000',
+      md: 'space090',
+    }}
+    marginBlockEnd="space040"
+  >
+    <NavLink href={href} ariaLabel={ariaLabel} buttonText={buttonText} />
+  </Block>
+)
+
+const Footer = () => {
+  const { theme } = useContext(AppContext)
+  return (
+    <StyledFooter>
+      <MainGrid>
+        <Cell xs={12}>
+          <Block marginBlockEnd="space030">
+            {!clientNavigationLogos[theme.name] ? (
+              <NewsKitLogoShort color="white" size="sizing120" />
+            ) : (
+              <Image
+                alt=""
+                src={`/assets/${clientNavigationLogos[theme.name].src}`}
+                width={clientNavigationLogos[theme.name].width}
+              />
+            )}
+          </Block>
+          <Block marginBlockEnd="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 marginBlockEnd="space030">
+            <Divider
+              overrides={{
+                stylePreset: 'dividerFooterHorizontal',
+              }}
+            />
+          </Block>
+          <Paragraph
+            overrides={{
+              typographyPreset: 'utilityMeta020',
+              stylePreset: 'inkSubtle',
+            }}
+          >
+            {`Copyright © ${getYear()} News Corp. All rights reserved.`}
+          </Paragraph>
+        </Cell>
+      </MainGrid>
+    </StyledFooter>
+  )
+}
+
+export default Footer

package/components/header/banner-messages.ts

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,52 @@
+import React, { useContext } from 'react'
+import { styled, Block } from 'newskit'
+import { UserData } from '@newskit-render/my-account'
+import {
+  PastDueBannerExternal,
+  NavigationPrimary,
+} from '@newskit-render/shared-components'
+
+import { AppContext } from '../../context'
+import { useThemeDropdownObject } from '../../helpers/useThemeDropdownObject'
+import { sectionLinks } from './navigation-links'
+import { pastDueBanner } from './banner-messages'
+
+export const headerSize = 'sizing100'
+
+const BannerContainer = styled(Block)`
+  position: sticky;
+  top: 0;
+  z-index: 1;
+`
+
+const Header: React.FC<{ user: UserData }> = ({ user }) => {
+  const navigationPrimary = {
+    logoSrc: '/assets/primary-navigation-logo-white.svg',
+    nav: sectionLinks,
+    loggedInUser: !!user,
+    gridOverrides: {
+      width: '100%',
+      marginInline: 'auto',
+    },
+  }
+
+  const { theme, setTheme } = useContext(AppContext)
+  const themeDropdownObject = useThemeDropdownObject(setTheme)
+
+  return (
+    <>
+      <NavigationPrimary
+        {...navigationPrimary}
+        customTheme={theme}
+        themeDropdownObject={themeDropdownObject}
+      />
+      <PastDueBannerExternal
+        pastDueBanner={pastDueBanner}
+        user={user}
+        wrapper={BannerContainer}
+      />
+    </>
+  )
+}
+
+export default Header

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/Gutter.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react'
+import { styled, getColorCssFromTheme, getMediaQueryFromTheme } from 'newskit'
+
+const Wrapper = styled.div`
+  ${getMediaQueryFromTheme('xs')} {
+    ${getColorCssFromTheme('backgroundColor', 'interfaceBackground')};
+  }
+`
+export const Gutter: React.FC<{ children: ReactNode }> = ({ children }) => (
+  <Wrapper>{children}</Wrapper>
+)

package/components/layout/LayoutTemplate.tsx

@@ -0,0 +1,26 @@
+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'
+import { LayoutProps } from './layoutTypes'
+import { MainGrid } from './MainGrid'
+
+const LayoutTemplate: React.FC<LayoutProps> = ({
+  children,
+  user,
+  ...mainGridProps
+}) => (
+  <>
+    <Header user={user as UserData} />
+    <Gutter>
+      <MainGrid {...mainGridProps}>
+        <Cell xs={12}>{children}</Cell>
+      </MainGrid>
+    </Gutter>
+    <Footer />
+  </>
+)
+
+export default LayoutTemplate

package/components/layout/MainGrid.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import {
+  Grid,
+  Cell,
+  styled,
+  getColorCssFromTheme,
+  GridProps,
+  Block,
+} from 'newskit'
+import { LayoutProps } from './layoutTypes'
+
+type StyledGridProps = GridProps & {
+  backgroundColor?: string
+}
+
+const StyledGrid = styled(Grid)<StyledGridProps>`
+  ${({ backgroundColor, theme }) =>
+    `${getColorCssFromTheme(
+      'backgroundColor',
+      backgroundColor as string
+    )({ theme })}`}
+`
+
+export const MainGrid: React.FC<LayoutProps> = ({
+  children,
+  backgroundColor,
+  withTopOffset,
+  withBottomOffset,
+  gridOverride,
+  dataTestId,
+}) => {
+  const gridProps = gridOverride || {
+    mdMargin: 'space050',
+    xsColumnGutter: 'space040',
+    xsRowGutter: 'space000',
+    xsMargin: 'space040',
+  }
+  return (
+    <StyledGrid
+      data-testid={dataTestId || 'PageLayout'}
+      backgroundColor={backgroundColor}
+      {...gridProps}
+    >
+      {withTopOffset && (
+        <Cell xs={12}>
+          <Block
+            marginBlockEnd={{
+              xs: 'space070',
+              lg: 'space080',
+            }}
+          />
+        </Cell>
+      )}
+      {children}
+      {withBottomOffset && (
+        <Cell xs={12}>
+          <Block
+            marginBlockEnd={{
+              xs: 'space090',
+            }}
+          />
+        </Cell>
+      )}
+    </StyledGrid>
+  )
+}

package/components/layout/index.tsx

@@ -0,0 +1,3 @@
+import Layout from './LayoutTemplate'
+
+export default Layout

package/components/layout/layoutTypes.ts

@@ -0,0 +1,13 @@
+import React from 'react'
+import { GridProps } from 'newskit'
+import { UserData } from '@newskit-render/my-account'
+
+export type LayoutProps = {
+  children: React.ReactNode
+  backgroundColor?: string
+  withTopOffset?: boolean
+  withBottomOffset?: boolean
+  gridOverride?: GridProps
+  dataTestId?: string
+  user?: UserData
+}

package/components/section/ArticleSlice.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Block } from 'newskit'
+import { ArticleSlice as Slice } from '../../helpers/global-types'
+import { Lead, LeadFullWidth, FallBack } from './layouts'
+import { Row3, BasicRow } from './layouts/Rows'
+
+const sliceBlockBuilder = (slice: Slice) => {
+  const sliceTypes = {
+    LEAD_1_FULL_WIDTH: <LeadFullWidth slice={slice} />,
+    SUPPLEMENT_LEAD_AND_4_STACK: <Lead slice={slice} />,
+    SECONDARY_2_AND_2: (
+      <BasicRow slice={slice} colums={{ xs: '1fr', md: '1fr 1fr' }} />
+    ),
+    SECONDARY_3: <Row3 slice={slice} />,
+    SECONDARY_4: (
+      <BasicRow
+        slice={slice}
+        colums={{ xs: '1fr', md: '1fr 1fr', lg: '1fr 1fr 1fr 1fr' }}
+        variant="horizontal"
+      />
+    ),
+    default: <FallBack slice={slice} />,
+  }
+
+  return sliceTypes[slice.name] || sliceTypes.default
+}
+
+const ArticleSlice: React.FC<{ slice: Slice }> = ({ slice }) => (
+  <>
+    {sliceBlockBuilder(slice)}
+    <Block marginBlockEnd="space070" />
+  </>
+)
+
+export default ArticleSlice

package/components/section/CollectionBlock.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import {
+  CollectionBlock as Collection,
+  ArticleSlice as Slice,
+} from '../../helpers/global-types'
+import ArticleSlice from './ArticleSlice'
+import { SectionTitle } from './layouts'
+import { SectionContext } from './SectionContext'
+
+const collectionSliceOptions = (type: string) => {
+  const sliceTypes = {
+    slice: (slice: Slice, i: number) => <ArticleSlice slice={slice} key={i} />,
+    'topic-author-slice': () => null,
+    default: () => null,
+  }
+
+  return sliceTypes[type] || sliceTypes.default
+}
+
+type CollectionBlockProps = {
+  collection: Collection
+  index: number
+}
+
+const CollectionBlock: React.FC<CollectionBlockProps> = ({
+  collection,
+  index,
+}) => {
+  const sectionURL = collection?.link?.url || '/uncategorized'
+  const titleBarColors = ['', 'teal050', 'purple050', 'neutral050']
+
+  return (
+    <>
+      {index !== 0 && (
+        <SectionContext.Consumer>
+          {({ isIndexPage }) =>
+            !isIndexPage && (
+              <SectionTitle
+                title={collection.title}
+                sectionURL={sectionURL}
+                titleBarColour={titleBarColors[index]}
+              />
+            )
+          }
+        </SectionContext.Consumer>
+      )}
+      {collection.children.map((slice, i) =>
+        collectionSliceOptions(slice.type)(slice, i)
+      )}
+    </>
+  )
+}
+
+export default CollectionBlock

package/components/section/SectionContext.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+type SectionContextType = {
+  isIndexPage: boolean
+}
+
+export const SectionContext = React.createContext({
+  isIndexPage: false,
+} as SectionContextType)

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

@@ -0,0 +1,128 @@
+import React from 'react'
+import { renderWithTheme } from '../../../helpers/test-utils'
+import ArticleSlice from '../ArticleSlice'
+import { getPageMock } from '../../../helpers/mocks'
+import { SectionContext } from '../SectionContext'
+import { ArticleSlice as ArticleSliceType } from '../../../helpers/global-types'
+
+describe('ArticleSlice', () => {
+  test('Handled SUPPLEMENT_LEAD_AND_4_STACK article-block', () => {
+    const { getByTestId, getAllByTestId, getAllByRole } = renderWithTheme(
+      ArticleSlice,
+      {
+        slice: getPageMock.page.body[0].children[0] as ArticleSliceType,
+      }
+    )
+    expect(getByTestId('SUPPLEMENT_LEAD_AND_4_STACK-Grid')).toBeInTheDocument()
+    expect(getByTestId('featureVerticalCell')).toBeInTheDocument()
+    expect(getAllByTestId(/titleVerticalCell-/).length).toEqual(2)
+    expect(getAllByRole('link').length).toEqual(3)
+  })
+
+  test('Handle SECONDARY_4 article-block Homepage', () => {
+    const { getByTestId, getAllByTestId, getAllByRole } = renderWithTheme(
+      ArticleSlice,
+      {
+        slice: getPageMock.page.body[0].children[1] as ArticleSliceType,
+      }
+    )
+    expect(getByTestId('SECONDARY_4-Grid')).toBeInTheDocument()
+    expect(getAllByTestId(/titleTeaserVertical-/).length).toEqual(4)
+    expect(getAllByRole('link').length).toEqual(4)
+  })
+
+  test('Handle SECONDARY_4 article-block Index Page', () => {
+    const { getByTestId, getAllByTestId, getAllByRole } = renderWithTheme(
+      SectionContext.Provider,
+      {
+        value: {
+          isIndexPage: true,
+        },
+        children: (
+          <ArticleSlice
+            slice={getPageMock.page.body[0].children[1] as ArticleSliceType}
+          />
+        ),
+      }
+    )
+
+    expect(getByTestId('SECONDARY_4-Grid')).toBeInTheDocument()
+    expect(getAllByTestId(/titleTeaserVertical-/).length).toEqual(4)
+    expect(getAllByRole('link').length).toEqual(4)
+  })
+
+  test('Handle SECONDARY_2_AND_2 article-block Homepage', () => {
+    const { getByTestId, getAllByTestId, getAllByRole } = renderWithTheme(
+      ArticleSlice,
+      {
+        slice: getPageMock.page.body[0].children[5] as ArticleSliceType,
+      }
+    )
+
+    expect(getByTestId('SECONDARY_2_AND_2-Grid')).toBeInTheDocument()
+    expect(getAllByTestId(/titleTeaserVertical-/).length).toEqual(2)
+    expect(getAllByRole('link').length).toEqual(2)
+  })
+
+  test('Handle SECONDARY_2_AND_2 article-block Index Page', () => {
+    const { getByTestId, getAllByTestId, getAllByRole } = renderWithTheme(
+      SectionContext.Provider,
+      {
+        value: {
+          isIndexPage: true,
+        },
+        children: (
+          <ArticleSlice
+            slice={getPageMock.page.body[0].children[5] as ArticleSliceType}
+          />
+        ),
+      }
+    )
+
+    expect(getByTestId('SECONDARY_2_AND_2-Grid')).toBeInTheDocument()
+    expect(getAllByTestId(/titleTeaserVertical-/).length).toEqual(2)
+    expect(getAllByRole('link').length).toEqual(2)
+  })
+
+  test('Unhandled article-block', () => {
+    const { getByText } = renderWithTheme(ArticleSlice, {
+      slice: getPageMock.page.body[0].children[2] as ArticleSliceType,
+    })
+    expect(getByText('Layout: LEAD_1_AND_1')).toBeInTheDocument()
+    expect(getByText('test headline').closest('a')).toHaveAttribute(
+      'href',
+      'catagory-one/demo-1/test-headline'
+    )
+    expect(getByText('test headline 2').closest('a')).toHaveAttribute(
+      'href',
+      'catagory-two/demo-2/test-headline-2'
+    )
+  })
+
+  test('Unhandled Layout other blocks', () => {
+    const { getByText } = renderWithTheme(ArticleSlice, {
+      slice: getPageMock.page.body[0].children[3] as ArticleSliceType,
+    })
+
+    expect(getByText('Layout: LEAD_1_AND_1')).toBeInTheDocument()
+    expect(getByText('TODO - External Reference')).toBeInTheDocument()
+    expect(getByText('TODO - Video')).toBeInTheDocument()
+    expect(getByText('Unknown slice block - something')).toBeInTheDocument()
+  })
+
+  test('Handled Layout other blocks', () => {
+    const { getByText, getByTestId, getAllByTestId } = renderWithTheme(
+      ArticleSlice,
+      {
+        slice: getPageMock.page.body[0].children[4] as ArticleSliceType,
+      }
+    )
+
+    expect(getByTestId('SUPPLEMENT_LEAD_AND_4_STACK-Grid')).toBeInTheDocument()
+    expect(getByTestId('featureVerticalCell')).toBeInTheDocument()
+    expect(getAllByTestId(/titleVerticalCell-/).length).toEqual(2)
+    expect(getByText('TODO - External Reference')).toBeInTheDocument()
+    expect(getByText('TODO - Video')).toBeInTheDocument()
+    expect(getByText('Unknown slice block - something')).toBeInTheDocument()
+  })
+})