@newskit-render/core 0.0.0-d55b7d88

package/components/common/NewskitLogo.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import {
+  withTheme,
+  styled,
+  getSizingCssFromTheme,
+  getColorCssFromTheme,
+} from 'newskit'
+
+interface StyledLogoPorps {
+  viewBox?: string
+  $color: string
+  size: string
+}
+
+type NewsKitLogoProps = Omit<StyledLogoPorps, '$color'> & {
+  color: string
+}
+
+const LogoSvg = styled.svg<StyledLogoPorps>`
+  display: inline-block;
+  ${getColorCssFromTheme('fill', 'white')};
+  ${getColorCssFromTheme('color', 'white')};
+  ${getSizingCssFromTheme('width', 'sizing120')};
+`
+
+const NewsKitLogoFull = React.forwardRef<HTMLDivElement, NewsKitLogoProps>(
+  ({ color, ...props }, ref) => (
+    <LogoSvg viewBox="0 0 244 40" height="40px" $color={color} {...props}>
+      <title>NewsKit Logo</title>
+      <path
+        d="M86.93 34.078V19.006l12.017 15.462a.63.63 0 0 0 .496.243h5.94a.63.63 0 0 0 .629-.633V6.715a.63.63 0 0 0-.629-.633h-6.553a.63.63 0 0 0-.629.633v14.499L86.671 6.326a.63.63 0 0 0-.496-.244h-6.427a.63.63 0 0 0-.629.633v27.363a.63.63 0 0 0 .629.633h6.553a.63.63 0 0 0 .629-.633zm134.203-20.324c2.389 0 4.325-1.947 4.325-4.35s-1.936-4.35-4.325-4.35-4.325 1.947-4.325 4.35 1.936 4.35 4.325 4.35zM120.484 35.185c4.133 0 7.092-1.617 9.192-4.085.112-.132.196-.514-.023-.696l-3.487-2.897c-.267-.222-.691-.111-.819.004-1.437 1.296-2.778 1.881-4.496 1.881-2.401 0-4.151-1.224-4.761-3.631h13.949c.26 0 .821-.208.821-.638v-.953c0-6.487-3.499-12.077-11.067-12.077-6.51 0-11.108 5.1-11.108 11.546v.082c0 6.813 4.882 11.465 11.799 11.465zm3.299-13.444h-7.706c.407-2.421 1.794-3.954 3.832-3.954 2.121 0 3.588 1.533 3.874 3.954zm20.504 12.53l3.366-10.581c.026-.083.115-.129.198-.102.049.016.087.054.102.103l3.289 10.576a.63.63 0 0 0 .601.444h5.737a.63.63 0 0 0 .601-.447l6.399-20.955c.102-.334-.084-.688-.416-.79-.06-.018-.122-.028-.185-.028h-6.102a.63.63 0 0 0-.607.469l-2.7 10.167c-.023.084-.109.135-.193.112-.052-.014-.094-.054-.11-.107l-3.116-10.276a.63.63 0 0 0-.602-.448h-5.409a.63.63 0 0 0-.601.447l-3.114 10.193c-.026.084-.114.13-.197.105-.052-.016-.092-.058-.106-.111L138.5 12.963a.63.63 0 0 0-.608-.473h-6.184a.63.63 0 0 0-.629.633c0 .062.009.124.027.184l6.323 20.955a.63.63 0 0 0 .602.449h5.657a.63.63 0 0 0 .599-.44zm30.749.914c5.364 0 8.981-2.538 8.981-7.411v-.082c0-3.869-2.798-5.483-6.527-6.663l-.25-.078-.253-.077-.255-.076-.258-.075-.259-.074-.69-.212-.285-.09-.205-.066-.197-.065-.189-.064-.181-.063-.116-.042-.113-.041-.109-.041-.106-.041-.102-.041-.098-.041-.095-.041-.045-.021-.089-.042-.085-.042-.082-.042-.039-.021-.076-.043-.071-.043-.068-.044c-.351-.235-.536-.495-.536-.819v-.082c0-.655.61-1.105 1.788-1.105 1.631 0 3.897.677 6.042 1.831l.116.063.017.006.024.007.029.007a.6.6 0 0 0 .034.006l.038.004c.124.009.29-.019.36-.192l.176-.536.147-.454.26-.816.273-.875.224-.726.421-1.38c.067-.22-.02-.337-.088-.391l-.019-.014-.025-.015c-2.353-1.248-5.173-1.93-7.947-1.93-5.08 0-8.819 2.62-8.819 7.329v.082c0 3.759 2.496 5.387 5.915 6.496l.243.077.246.076.248.074.252.073.254.072.256.071.259.07.13.035.55.157.367.106.277.082.198.061.128.04.185.059.118.039.115.039.111.039.107.039.103.039.051.02.097.04.048.02.092.04.088.04.084.041.081.041c.511.268.776.569.776.983v.082c0 .778-.65 1.187-1.991 1.187-2.157 0-4.714-.772-7.12-2.281l-.116-.074-.025-.015-.029-.015-.032-.015c-.106-.044-.251-.065-.332.079l-1.527 4.645-.051.153c-.103.295.109.504.212.565 2.713 1.602 5.831 2.403 8.979 2.403zm20.475-1.265V27.17a.16.16 0 0 1 .041-.106l2.707-2.996c.059-.065.158-.069.223-.011.009.008.017.018.024.028l6.887 10.19a.63.63 0 0 0 .52.277h7.894a.63.63 0 0 0 .519-.99l-10.382-15.267c-.041-.06-.036-.14.012-.194l9.756-11.126c.23-.262.205-.662-.055-.893-.115-.102-.263-.158-.416-.158h-7.614a.63.63 0 0 0-.479.223l-9.36 11.065c-.056.066-.155.075-.222.018-.035-.03-.055-.074-.055-.12V6.557a.63.63 0 0 0-.629-.633h-6.618a.63.63 0 0 0-.63.633V33.92a.63.63 0 0 0 .63.633h6.618a.63.63 0 0 0 .629-.633zm29.554 0V16.93a.63.63 0 0 0-.629-.633h-6.448a.63.63 0 0 0-.629.633v16.99a.63.63 0 0 0 .629.633h6.448a.63.63 0 0 0 .629-.633zm13.423 1.107c1.945 0 3.625-.433 4.951-1.088l.096-.048.026-.014.028-.017c.117-.074.267-.222.267-.559v-5.177c0-.267-.213-.294-.37-.268l-.035.007-.047.013c-.01.003-.019.006-.027.01l-.012.005c-.785.321-1.597.517-2.437.517-1.423 0-2.115-.654-2.115-2.206v-7.36c0-.087.071-.158.158-.158h4.337a.63.63 0 0 0 .629-.633v-4.946a.63.63 0 0 0-.629-.633h-4.337c-.087 0-.158-.071-.158-.158V7.506a.63.63 0 0 0-.629-.633h-6.428a.63.63 0 0 0-.629.633v4.807c0 .087-.07.158-.157.158h-1.816a.63.63 0 0 0-.629.633v4.946a.63.63 0 0 0 .629.633h1.816c.087 0 .157.071.157.158v8.872c0 5.271 2.725 7.314 7.361 7.314z"
+        fill="#fff"
+      />
+      <path
+        d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
+        fill="white"
+      />
+      <path
+        d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
+        fill="white"
+        fillOpacity="0.4"
+      />
+      <path
+        d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
+        fill="white"
+        fillOpacity="0.701961"
+      />
+    </LogoSvg>
+  )
+)
+
+export default withTheme(NewsKitLogoFull)

package/components/common/NewskitLogoShort.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react'
+import {
+  withTheme,
+  styled,
+  getSizingCssFromTheme,
+  getColorCssFromTheme,
+} from 'newskit'
+
+interface StyledLogoPorps {
+  viewBox?: string
+  $color: string
+  size: string
+}
+
+type NewsKitLogoProps = Omit<StyledLogoPorps, '$color'> & {
+  color: string
+}
+
+const LogoSvg = styled.svg<StyledLogoPorps>`
+  display: inline-block;
+  ${getColorCssFromTheme('fill', 'white')};
+  ${getColorCssFromTheme('color', 'white')};
+  ${getSizingCssFromTheme('width', 'sizing120')};
+`
+
+const NewsKitLogoShort = React.forwardRef<HTMLDivElement, NewsKitLogoProps>(
+  ({ color, ...props }, ref) => (
+    <LogoSvg viewBox="0 0 244 40" height="48px" $color={color} {...props}>
+      <title>NewsKit Logo</title>
+      <path
+        d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
+        fill="white"
+      />
+      <path
+        d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
+        fill="white"
+        fillOpacity="0.4"
+      />
+      <path
+        d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
+        fill="white"
+        fillOpacity="0.701961"
+      />
+    </LogoSvg>
+  )
+)
+
+export default withTheme(NewsKitLogoShort)

package/components/common/SectionTitleBar.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import {
+  TitleBar,
+  styled,
+  getColorCssFromTheme,
+  Block,
+  BlockProps,
+} from 'newskit'
+
+type StyledTitleBarBlockProps = {
+  colour?: string
+} & BlockProps
+
+const StyledTitleBarBlock = styled(Block)<StyledTitleBarBlockProps>`
+  ${(props) =>
+    props.colour
+      ? getColorCssFromTheme('background', props.colour)
+      : getColorCssFromTheme('background', 'inkBrand010')};
+`
+
+type SectionTitleBarProps = {
+  title: string
+  actionItem?: React.ComponentType
+  colour?: string
+  stylePreset?: string
+}
+
+const SectionTitleBar: React.FC<SectionTitleBarProps> = ({
+  title,
+  actionItem,
+  colour,
+  stylePreset,
+}) => (
+  <StyledTitleBarBlock
+    colour={colour}
+    marginBlockEnd="space060"
+    data-testid="SectionTitleBar"
+  >
+    <TitleBar
+      actionItem={actionItem}
+      overrides={{
+        heading: {
+          typographyPreset: {
+            xl: 'editorialHeadline070',
+            md: 'editorialHeadline060',
+            xs: 'editorialHeadline050',
+          },
+          stylePreset: stylePreset || 'inkInverse',
+        },
+      }}
+    >
+      {title}
+    </TitleBar>
+  </StyledTitleBarBlock>
+)
+
+export default SectionTitleBar

package/components/common/ShareButton.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Button, toNewsKitIcon } from 'newskit'
+
+import { Share as FilledShare } from '@emotion-icons/material/Share'
+
+const IconFilledShare = toNewsKitIcon(FilledShare)
+
+const ShareButton = () => (
+  <Button
+    size="small"
+    overrides={{ stylePreset: 'buttonOutlinedPrimary' }}
+    href="https://www.newskit.co.uk/"
+  >
+    <IconFilledShare />
+    Share
+  </Button>
+)
+export default ShareButton

package/components/common/ViewMoreButton.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Button, toNewsKitIcon } from 'newskit'
+
+import { ChevronRight as FilledChevronRight } from '@emotion-icons/material/ChevronRight'
+
+const IconFilledChevronRight = toNewsKitIcon(FilledChevronRight)
+
+const ViewMoreButton: React.FC<{ href: string }> = ({ href }) => (
+  <Button
+    overrides={{
+      stylePreset: 'inkBrand010',
+    }}
+    href={href}
+  >
+    View all
+    <IconFilledChevronRight overrides={{ size: 'iconSize020' }} />
+  </Button>
+)
+
+export default ViewMoreButton

package/components/common/iconNavLink/IconNavLink.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import { NextLink } from '@newskit-render/shared-components'
+import { Divider, TextBlock, Block, Visible, styled } from 'newskit'
+import { IconNavLinkProps } from './types'
+
+const StylesVerticalVisible = styled(Visible)`
+  height: 100%;
+`
+
+const StylesHorizontalVisible = styled(Visible)`
+  width: 100%;
+`
+
+const IconBlock = styled(Block)<{ top?: string }>`
+  position: relative;
+  top: ${({ top }) => top || '3'}px;
+`
+
+const IconNavLink: React.FC<IconNavLinkProps> = ({
+  icon,
+  href,
+  text,
+  showVerticalDivider = { md: true, lg: true, xl: true },
+  showHorizontalDivider = { xs: true, sm: true },
+  spaceInline,
+  typographyPreset,
+  stylePreset,
+  iconTop,
+}) => (
+  <>
+    {showVerticalDivider && (
+      <StylesVerticalVisible {...showVerticalDivider}>
+        <Divider vertical />
+      </StylesVerticalVisible>
+    )}
+    <Block spaceInline={spaceInline} />
+    <Block as="span">
+      {showHorizontalDivider && (
+        <>
+          <StylesHorizontalVisible {...showHorizontalDivider}>
+            <Divider />
+            <Block
+              data-testid="myBlock"
+              marginBlockEnd={{
+                xs: 'space040',
+                md: 'space000',
+              }}
+            />
+          </StylesHorizontalVisible>
+        </>
+      )}
+      <NextLink
+        type="standalone"
+        overrides={{
+          typographyPreset,
+          stylePreset,
+        }}
+        href={href}
+      >
+        <IconBlock top={iconTop}>{icon}</IconBlock>
+        <TextBlock as="span" typographyPreset={typographyPreset}>
+          {text}
+        </TextBlock>
+      </NextLink>
+      <Block spaceInline={spaceInline} />
+    </Block>
+  </>
+)
+
+export default IconNavLink

package/components/common/iconNavLink/__tests__/IconNavLink.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import IconNavLink from '../IconNavLink'
+import { IconAccount } from '../../icons/IconAccount'
+import { renderWithTheme } from '../../../../helpers/test-utils'
+
+describe('IconNavLink', () => {
+  test('should render with devider', () => {
+    const { getByTestId, getByText, getAllByTestId } = renderWithTheme(
+      IconNavLink,
+      {
+        icon: <IconAccount data-testid="test-icon" />,
+        href: '/account',
+        text: 'Account',
+      }
+    )
+    expect(getAllByTestId('divider')[0]).toBeInTheDocument()
+    expect(getByTestId('test-icon')).toBeInTheDocument()
+    expect(getByText('Account')).toBeInTheDocument()
+    expect(getByText('Account').closest('a')).toHaveAttribute(
+      'href',
+      '/account'
+    )
+  })
+
+  test('should render without divider', () => {
+    const { queryByTestId } = renderWithTheme(IconNavLink, {
+      icon: <IconAccount data-testid="test-icon" />,
+      href: '/account',
+      text: 'Account',
+      showVerticalDivider: false,
+      showHorizontalDivider: false,
+    })
+    expect(queryByTestId('divider')).not.toBeInTheDocument()
+  })
+})

package/components/common/iconNavLink/index.ts

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

package/components/common/iconNavLink/types.ts

@@ -0,0 +1,24 @@
+import { ReactElement } from 'react'
+import { NewsKitIcon, MQ } from 'newskit'
+
+type ShowDivider =
+  | {
+      xs?: boolean
+      sm?: boolean
+      md?: boolean
+      lg?: boolean
+      xl?: boolean
+    }
+  | false
+
+export interface IconNavLinkProps {
+  icon: ReactElement<NewsKitIcon>
+  href: string
+  text: string
+  showVerticalDivider?: ShowDivider
+  showHorizontalDivider?: ShowDivider
+  spaceInline?: MQ<string>
+  typographyPreset?: MQ<string>
+  stylePreset?: MQ<string>
+  iconTop?: string
+}

package/components/common/icons/IconAccount.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { customToNewsKitIcon, Svg } from 'newskit'
+
+export const IconAccount = customToNewsKitIcon('IconAccount', (props) => (
+  <Svg {...props} height="24px" width="24px" viewBox="0 0 24 24">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM7.07 18.28C7.5 17.38 10.12 16.5 12 16.5C13.88 16.5 16.51 17.38 16.93 18.28C15.57 19.36 13.86 20 12 20C10.14 20 8.43 19.36 7.07 18.28ZM12 14.5C13.46 14.5 16.93 15.09 18.36 16.83C19.38 15.49 20 13.82 20 12C20 7.59 16.41 4 12 4C7.59 4 4 7.59 4 12C4 13.82 4.62 15.49 5.64 16.83C7.07 15.09 10.54 14.5 12 14.5ZM12 6C10.06 6 8.5 7.56 8.5 9.5C8.5 11.44 10.06 13 12 13C13.94 13 15.5 11.44 15.5 9.5C15.5 7.56 13.94 6 12 6ZM10.5 9.5C10.5 10.33 11.17 11 12 11C12.83 11 13.5 10.33 13.5 9.5C13.5 8.67 12.83 8 12 8C11.17 8 10.5 8.67 10.5 9.5Z"
+      fill="#FFFFFF"
+    />
+  </Svg>
+))

package/components/common/icons/IconFilledTwitter.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Svg, customToNewsKitIcon } from 'newskit'
+
+export const IconFilledTwitter = customToNewsKitIcon(
+  'IconFilledTwitter',
+  (props) => (
+    <Svg {...props} viewBox="0 0 24 24">
+      <path
+        fillRule="nonzero"
+        d="M8.28984,21 C15.83736,21 19.96472,14.4602319 19.96472,8.78946539 C19.96472,8.60363327 19.96112,8.41863784 19.95296,8.23464647 C20.75408,7.62895589 21.45056,6.87316048 22,6.01260963 C21.26472,6.35415252 20.47352,6.58441367 19.64352,6.68816506 C20.49072,6.15702487 21.14112,5.31630393 21.44784,4.31426631 C20.65488,4.80583036 19.77704,5.1633543 18.8424,5.35588007 C18.09368,4.52176909 17.02728,4 15.84728,4 C13.58104,4 11.74336,5.92199451 11.74336,8.29129138 C11.74336,8.62814872 11.77944,8.95555129 11.84976,9.2698176 C8.4396,9.09051177 5.4156,7.38271368 3.392,4.78600045 C3.03928,5.42005532 2.83632,6.15702487 2.83632,6.94294166 C2.83632,8.43194145 3.56072,9.74632096 4.66224,10.5152526 C3.98928,10.493582 3.35688,10.3001358 2.80384,9.97833919 C2.80288,9.99624467 2.80288,10.0142338 2.80288,10.0330597 C2.80288,12.111769 4.21752,13.8469273 6.09488,14.2404296 C5.75032,14.3384914 5.3876,14.3913711 5.0132,14.3913711 C4.74888,14.3913711 4.49176,14.3640109 4.24184,14.3139759 C4.76424,16.0190129 6.27896,17.2597624 8.07512,17.2947366 C6.67048,18.4457914 4.90136,19.1317219 2.97888,19.1317219 C2.64776,19.1317219 2.3212,19.1119757 2,19.0723159 C3.81608,20.2894703 5.97224,21 8.28984,21"
+      />
+    </Svg>
+  )
+)

package/components/common/icons/StyledIconFilledChevronRight.tsx

@@ -0,0 +1,12 @@
+import { styled, toNewsKitIcon } from 'newskit'
+
+import { ChevronRight as FilledChevronRight } from '@emotion-icons/material/ChevronRight'
+
+const IconFilledChevronRight = toNewsKitIcon(FilledChevronRight)
+
+const StyledIconFilledChevronRight = styled(IconFilledChevronRight)`
+  top: 1px;
+  position: relative;
+`
+
+export default StyledIconFilledChevronRight

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

@@ -0,0 +1,192 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Footer tests should render footer 1`] = `
+<DocumentFragment>
+  <div
+    class="css-sxhtf1"
+  >
+    <div
+      class="css-8atxkm"
+    >
+      <div
+        class="css-1w88buo"
+        data-testid="PageLayout"
+      >
+        <div
+          class="css-18d6eiw"
+          data-testid="PageLayout"
+        >
+          <div
+            class="css-2e5lv5"
+          >
+            <svg
+              class="css-kgdu16"
+              height="48px"
+              viewBox="0 0 244 40"
+            >
+              <title>
+                NewsKit Logo
+              </title>
+              <path
+                d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
+                fill="white"
+              />
+              <path
+                d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
+                fill="white"
+                fill-opacity="0.4"
+              />
+              <path
+                d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
+                fill="white"
+                fill-opacity="0.701961"
+              />
+            </svg>
+          </div>
+          <div
+            class="css-2e5lv5"
+          >
+            <hr
+              aria-hidden="true"
+              class="css-13iiewa"
+              data-testid="divider"
+            />
+          </div>
+          <div
+            class="css-hx18jh"
+          >
+            <span
+              class="css-1cpcft7"
+            >
+              <a
+                aria-label="NavLink One"
+                class="css-1ulbpfm"
+                href="/link-one"
+              >
+                <span
+                  class="css-17x5lw"
+                >
+                  <span
+                    class="css-yk25sg"
+                  >
+                    NavLink One
+                  </span>
+                </span>
+              </a>
+            </span>
+            <span
+              class="css-1cpcft7"
+            >
+              <a
+                aria-label="NavLink Two"
+                class="css-1ulbpfm"
+                href="/link-two"
+              >
+                <span
+                  class="css-17x5lw"
+                >
+                  <span
+                    class="css-yk25sg"
+                  >
+                    NavLink Two
+                  </span>
+                </span>
+              </a>
+            </span>
+            <span
+              class="css-1cpcft7"
+            >
+              <a
+                aria-label="NavLink Three"
+                class="css-1ulbpfm"
+                href="/link-three"
+              >
+                <span
+                  class="css-17x5lw"
+                >
+                  <span
+                    class="css-yk25sg"
+                  >
+                    NavLink Three
+                  </span>
+                </span>
+              </a>
+            </span>
+            <span
+              class="css-1cpcft7"
+            >
+              <a
+                aria-label="NavLink Four"
+                class="css-1ulbpfm"
+                href="/link-four"
+              >
+                <span
+                  class="css-17x5lw"
+                >
+                  <span
+                    class="css-yk25sg"
+                  >
+                    NavLink Four
+                  </span>
+                </span>
+              </a>
+            </span>
+            <span
+              class="css-1cpcft7"
+            >
+              <a
+                aria-label="NavLink Five"
+                class="css-1ulbpfm"
+                href="/link-five"
+              >
+                <span
+                  class="css-17x5lw"
+                >
+                  <span
+                    class="css-yk25sg"
+                  >
+                    NavLink Five
+                  </span>
+                </span>
+              </a>
+            </span>
+            <span
+              class="css-1cpcft7"
+            >
+              <a
+                aria-label="NavLink Six"
+                class="css-1ulbpfm"
+                href="/link-six"
+              >
+                <span
+                  class="css-17x5lw"
+                >
+                  <span
+                    class="css-yk25sg"
+                  >
+                    NavLink Six
+                  </span>
+                </span>
+              </a>
+            </span>
+          </div>
+          <div
+            class="css-2e5lv5"
+          >
+            <hr
+              aria-hidden="true"
+              class="css-13iiewa"
+              data-testid="divider"
+            />
+          </div>
+          <p
+            class="css-tiln3q"
+          >
+            Copyright © YYYY News Corp. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/components/footer/index.test.tsx

@@ -0,0 +1,13 @@
+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)
+    expect(asFragment()).toMatchSnapshot()
+  })
+})