@newskit-render/core 2.35.3 → 2.36.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.35.3](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.35.3-alpha.0...@newskit-render/core@2.35.3) (2022-12-23)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
 ## [2.35.2](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.35.2-alpha.0...@newskit-render/core@2.35.2) (2022-12-22)
 
 **Note:** Version bump only for package @newskit-render/core

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "2.35.3",
+  "version": "2.36.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",

package/temp/header.tsx

@@ -1,269 +1,38 @@
-import React, { useState } from 'react'
-import {
-  Cell,
-  styled,
-  getColorCssFromTheme,
-  getSizingCssFromTheme,
-  getFontsFromTheme,
-  Visible,
-  getMediaQueryFromTheme,
-  Stack,
-  Block,
-  toNewsKitIcon,
-} from 'newskit'
+import React, { useContext } from 'react'
+import { styled, Block } from 'newskit'
 import { UserData } from '@newskit-render/my-account'
-import { NextLink, PastDueBannerExternal } from '@newskit-render/shared-components'
-import { MainGrid } from '../layout/MainGrid'
-import NewsKitLogoFull from '../common/NewskitLogo'
-import NewsKitLogoShort from '../common/NewskitLogoShort'
-import NavLink from '../common/NavLink'
-import { handleEnterKeyPress } from '../../helpers/a11y'
-import IconNavLink from '../common/iconNavLink'
-import { IconAccount } from '../common/icons/IconAccount'
-import { Menu as FilledMenu } from '@emotion-icons/material/Menu'
-
-const IconFilledMenu = toNewsKitIcon(FilledMenu)
+import {
+  PastDueBannerExternal,
+  NavigationPrimary,
+} from '@newskit-render/shared-components'
+import { AppContext } from '../../context'
+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')};
-  }
-`
-
-type NavigationProps = {
-  show: boolean
-}
-
-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: auto;
-    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 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,
-  },
-}
-
 const BannerContainer = styled(Block)`
   position: sticky;
   top: 0;
   z-index: 1;
 `
 
-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 Header: React.FC<{ user: UserData }> = ({ user }) => {
-  const [showMenu, setShowMenu] = useState(false)
-
-  const mobileMenuControl = () => {
-    setShowMenu(!showMenu)
-    document.body.style.overflow = showMenu ? '' : 'hidden'
+  const navigationPrimary = {
+    nav: sectionLinks,
+    loggedInUser: !!user,
+    gridOverrides: {
+      width: '100%',
+      maxWidth: '1920px',
+      marginInline: 'auto',
+    },
   }
 
+  const { theme } = useContext(AppContext)
+
   return (
     <>
-      <StyledHeader aria-label="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"
-              >
-                <Visible md lg xl>
-                  <NewsKitLogoFull color="white" size="sizing120" />
-                </Visible>
-                <Visible xs sm>
-                  <NewsKitLogoShort color="white" size="sizing120" />
-                </Visible>
-              </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: 'linkStandaloneInverse',
-                      }}
-                      onClick={mobileMenuControl}
-                      onKeyDown={handleEnterKeyPress(mobileMenuControl)}
-                      role="button"
-                      tabIndex={0}
-                      aria-label="Mobile Menu Button"
-                      data-testid="mobile-menu-btn"
-                    />
-                  </Block>
-                </Visible>
-              </Stack>
-            </Stack>
-          </Cell>
-        </MainGrid>
-      </StyledHeader>
+      <NavigationPrimary {...navigationPrimary} customTheme={theme} />
       <PastDueBannerExternal
         pastDueBanner={pastDueBanner}
         user={user}