@newskit-render/core 1.42.3 → 1.45.0

package/temp/_app.tsx

@@ -13,6 +13,215 @@ if (!process.browser) {
 }
 
 const GlobalStyling = css`
+  @font-face {
+    font-family: GillSansMTStd-Medium;
+    src: url('/fonts/GillSansMTStd-Medium.otf');
+  }
+  @font-face {
+    font-family: TimesModern-Bold;
+    src: url('/fonts/TimesDigital-Bold.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: TimesModern-Regular;
+    src: url('/fonts/TimesDigital-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: TimesDigitalW04-Regular;
+    src: url('/fonts/TimesDigitalW04-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: Montserrat;
+    src: url('/fonts/Montserrat-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: TheSun-Bold;
+    src: url('/fonts/TheSun-Bold.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: TheSun-HeavyNarrow;
+    src: url('/fonts/TheSun-HeavyNarrow.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: TheSun-Regular;
+    src: url('/fonts/TheSun-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: TheSun-Medium;
+    src: url('/fonts/TheSun-Medium.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'DM Sans';
+    src: url('/fonts/dmsans-regular-webfont.woff2') format('woff2'),
+      url('/fonts/dmsans-regular-webfont.woff') format('woff');
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Sans';
+    src: url('/fonts/dmsans-italic-webfont.woff2') format('woff2'),
+      url('/fonts/dmsans-italic-webfont.woff') format('woff');
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Sans';
+    src: url('/fonts/dmsans-medium-webfont.woff2') format('woff2'),
+      url('/fonts/dmsans-medium-webfont.woff') format('woff');
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Sans';
+    src: url('/fonts/dmsans-mediumitalic-webfont.woff2') format('woff2'),
+      url('/fonts/dmsans-mediumitalic-webfont.woff') format('woff');
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Sans';
+    src: url('/fonts/dmsans-bold-webfont.woff2') format('woff2'),
+      url('/fonts/dmsans-bold-webfont.woff') format('woff');
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Sans';
+    src: url('/fonts/dmsans-bolditalic-webfont.woff2') format('woff2'),
+      url('/fonts/dmsans-bolditalic-webfont.woff') format('woff');
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-bold-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-bold-webfont.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-bolditalic-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-bolditalic-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-extrabold-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-extrabold-webfont.woff') format('woff');
+    font-weight: 800;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-extrabolditalic-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-extrabolditalic-webfont.woff') format('woff');
+    font-weight: 800;
+    font-style: italic;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-italic-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-italic-webfont.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-light-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-light-webfont.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-lightitalic-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-lightitalic-webfont.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-medium-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-medium-webfont.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-mediumitalic-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-mediumitalic-webfont.woff') format('woff');
+    font-weight: 500;
+    font-style: italic;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-regular-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-regular-webfont.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-semibold-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-semibold-webfont.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-semibolditalic-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-semibolditalic-webfont.woff') format('woff');
+    font-weight: 600;
+    font-style: italic;
+  }
+  @font-face {
+    font-family: 'DM Mono';
+    src: url('/fonts/dmmono-medium.woff2') format('woff2'),
+      url('/fonts/dmmono-medium.woff') format('woff');
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Bitter';
+    src: url('/fonts/bitter-regular.woff2') format('woff2'),
+      url('/fonts/bitter-regular.woff') format('woff');
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Bitter';
+    src: url('/fonts/bitter-medium.woff2') format('woff2'),
+      url('/fonts/bitter-medium.woff') format('woff');
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Bitter';
+    src: url('/fonts/bitter-mediumitalic.woff2') format('woff2'),
+      url('/fonts/bitter-mediumitalic.woff') format('woff');
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Bitter';
+    src: url('/fonts/bitter-semibold.woff2') format('woff2'),
+      url('/fonts/bitter-semibold.woff') format('woff');
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+  }
+
   html,
   body {
     padding: 0;

package/temp/header.tsx

@@ -18,12 +18,14 @@ 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'
 
-export const headerSize = 'sizing090'
+export const headerSize = 'sizing100'
 
 const StyledHeader = styled.div`
   ${getSizingCssFromTheme('height', headerSize)}
-  ${getColorCssFromTheme('backgroundColor', 'neutral100')};
+  ${getColorCssFromTheme('backgroundColor', 'interfaceBrand010')};
   a,
   a:visited:not(:disabled) {
     ${getColorCssFromTheme('color', 'white')};
@@ -31,14 +33,14 @@ const StyledHeader = styled.div`
     line-height: ${getFontsFromTheme('fontLineHeight040')};
   }
   ${getMediaQueryFromTheme('xs')} {
-    ${getSizingCssFromTheme('paddingTop', 'sizing030')};
-    ${getSizingCssFromTheme('paddingBottom', 'sizing030')};
+    ${getSizingCssFromTheme('paddingTop', 'sizing040')};
+    ${getSizingCssFromTheme('paddingBottom', 'sizing040')};
     ${getSizingCssFromTheme('paddingLeft', 'sizing000')};
     ${getSizingCssFromTheme('paddingRight', 'sizing000')};
   }
   ${getMediaQueryFromTheme('lg')} {
-    ${getSizingCssFromTheme('paddingTop', 'sizing030')};
-    ${getSizingCssFromTheme('paddingBottom', 'sizing030')};
+    ${getSizingCssFromTheme('paddingTop', 'sizing040')};
+    ${getSizingCssFromTheme('paddingBottom', 'sizing040')};
     ${getSizingCssFromTheme('paddingLeft', 'sizing090')};
     ${getSizingCssFromTheme('paddingRight', 'sizing090')};
   }
@@ -53,14 +55,14 @@ const NavigationContainer = styled.div<NavigationProps>`
   overflow: auto;
   width: 100%;
   min-height: 100vh;
-  ${getColorCssFromTheme('backgroundColor', 'neutral100')};
+  ${getColorCssFromTheme('backgroundColor', 'interfaceBrand010')};
   left: 0;
   ${getSizingCssFromTheme('top', headerSize)}
-  z-index: 1;
+  z-index: 2;
   display: ${(props) => (props.show ? 'block' : 'none')};
 
   ${getMediaQueryFromTheme('md')} {
-    display: block;
+    display: flex;
     position: relative;
     overflow: auto;
     width: initial;
@@ -69,6 +71,7 @@ const NavigationContainer = styled.div<NavigationProps>`
     left: initial;
     top: initial;
     z-index: 1;
+    ${getSizingCssFromTheme('height', 'sizing080')}
   }
 `
 
@@ -133,12 +136,10 @@ const BannerContainer = styled(Block)`
 const NavButton = ({
   buttonText,
   href,
-  isMobile,
   ariaLabel,
 }: {
   buttonText: string
   href: string
-  isMobile: boolean
   isLast?: boolean
   ariaLabel?: string
 }) => (
@@ -146,9 +147,12 @@ const NavButton = ({
     as="span"
     spaceInline={{
       xs: 'space000',
-      md: 'space050',
+      md: 'space040',
+    }}
+    spaceStack={{
+      xs: 'space050',
+      md: 'space000',
     }}
-    spaceStack={isMobile && 'space050'}
   >
     <NavLink href={href} ariaLabel={ariaLabel} buttonText={buttonText} />
   </Block>
@@ -191,8 +195,11 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
                 stackDistribution="flex-end"
                 wrap="nowrap"
               >
-                <NavigationContainer show={showMenu}>
-                  <Navigation>
+                <NavigationContainer
+                  show={showMenu}
+                  data-testid="NavigationContainer"
+                >
+                  <Navigation data-testid="Navigation">
                     {showMenu && (
                       <Block
                         spaceStack="space050"
@@ -202,21 +209,28 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
                     <NavButton
                       buttonText="Section One"
                       href="/section-one"
-                      isMobile={showMenu}
                       ariaLabel="Section One Link"
                     />
                     <NavButton
                       buttonText="Section Two"
                       href="/section-two"
-                      isMobile={showMenu}
                       ariaLabel="Section Two Link"
                     />
                     <NavButton
                       buttonText="Section Three"
                       href="/section-three"
-                      isMobile={showMenu}
                       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>