sfc-utils 1.3.54 → 1.3.55

package/brands2.js

@@ -47,7 +47,7 @@ let getBrands2 = function(market){
 			styles: {
 				"@brand": "#FF7500",
 				"@brand-secondary": "#1874CB",
-				"@hed": '"Marr Sans", Georgia, serif',
+				"@hed": '"Publico Headline", Georgia, serif',
 				"@hed-alt": '"Marr Sans Condensed", Georgia, serif',
 				"@serif": '"Publico", Georgia, serif',
 				"@sans": '"Marr Sans", Helvetica, sans-serif',

package/components/authors.mjs

@@ -0,0 +1,41 @@
+import React, { Fragment } from 'react'
+import PropTypes from 'prop-types'
+
+const Authors = ({ url, name, index, isLast }) => {
+  let prefix = ' '
+  // Add necessary spacing and grammar
+  if (index > 0) {
+    prefix = ', '
+
+    if (isLast) {
+      prefix = ' and '
+    }
+  }
+
+  return (
+    <Fragment>
+      {url ? (
+        <Fragment>
+          {prefix}
+          <a target="_blank" rel="author noopener noreferrer" href={url}>
+            <span className="byline-name">{name}</span>
+          </a>
+        </Fragment>
+      ) : (
+        <span>
+          {prefix}
+          <span className="byline-name">{name}</span>
+        </span>
+      )}
+    </Fragment>
+  )
+}
+
+Authors.propTypes = {
+  url: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  index: PropTypes.number,
+  isLast: PropTypes.bool,
+}
+
+export default Authors

package/components/byline.mjs

@@ -0,0 +1,79 @@
+import React, { Fragment } from 'react'
+import Authors from './authors.mjs'
+import ShareButtons from './sharebuttons.mjs'
+
+import {
+    pubdateString,
+    moddateString,
+} from './helpers/datehelpers.mjs'
+
+const Byline = ({ meta }) => {
+    const {
+        PROJECT: { AUTHORS, ISO_MODDATE, ISO_PUBDATE },
+      } = meta
+      const has_authors = AUTHORS[0].AUTHOR_NAME !== ""
+
+return (
+    <>
+        <div className="byline-wrapper">
+            <div className="byline">
+            {has_authors &&
+              <>
+              <span>By</span>
+              {AUTHORS.map((author, index) => {
+                // Pass special flag if this is the last item
+                let isLast = false
+                if (index === AUTHORS.length - 1) {
+                  isLast = true
+                }
+                // Add the bylines
+                return (
+                  <Authors
+                    key={author.AUTHOR_NAME}
+                    url={author.AUTHOR_PAGE}
+                    name={author.AUTHOR_NAME}
+                    index={index}
+                    isLast={isLast}
+                  />
+                )
+              })}
+              </>
+            }
+           
+            { has_authors && <span>&nbsp;|&nbsp;</span> }
+
+              { !moddateString && 
+                <>
+                  
+                  <time
+                    className="topper-dateline"
+                    dateTime={ISO_PUBDATE}
+                    itemProp="datePublished"
+                  >
+                   {!has_authors && <span>Published </span>} {pubdateString}
+                  </time>
+                </>
+              }
+              {moddateString && (
+                <Fragment>
+                  <time
+                    className="topper-dateline updated-date"
+                    dateTime={ISO_MODDATE}
+                    itemProp="dateModified"
+                  >
+                    Updated {moddateString}
+                  </time>
+                </Fragment>
+              )}
+            </div>
+            <div className="articleHeader--shareTools">
+              <div className="share-list" id="sharebutton-wrapper">
+                <ShareButtons meta={meta} />
+              </div>
+            </div>
+        </div>
+    </>
+    )
+}
+
+export default Byline

package/components/captioncredit.mjs

@@ -0,0 +1,31 @@
+import React from 'react'
+// import * as capcredStyles from "../styles/modules/captioncredit.module.less"
+
+const CaptionCredit = (props) => {
+  let {caption, credit, extraStyles} = props
+
+  let captionCss = ["topper-image", "caption"]; //capcredStyles.cFigCap, 
+  if (extraStyles) captionCss = captionCss.concat(extraStyles);
+
+  return (
+    <>
+    {caption && credit && (
+      <figcaption className={captionCss.join(' ')}>
+        {caption} <span className="credit">{credit}</span>
+      </figcaption>
+    )}
+    {!caption && credit && (
+      <figcaption className={captionCss.join(' ')}>
+        <span className="credit">{credit}</span>
+      </figcaption>
+    )}
+    {caption && !credit && (
+      <figcaption className={captionCss.join(' ')}>
+        {caption}
+      </figcaption>
+    )}
+    </>
+  )
+}
+
+export default CaptionCredit

package/components/heading.mjs

@@ -0,0 +1,33 @@
+import React from 'react'
+
+const Heading =(props) => {
+  let {level, className, text} = props
+  if (!level) {
+    level = 3
+  }
+  if (!className) {
+    className = ""
+  }
+  const object = {...props}
+  delete object["text"]
+  delete object["level"]
+
+  level = level.toString()
+
+  switch (level) {
+    case '1':
+    return <h1 {...object} className={`hed ${className}`} dangerouslySetInnerHTML={{__html:text}}></h1>
+    case '2':
+    return <h2 {...object} className={`${className}`} dangerouslySetInnerHTML={{__html:text}}></h2>
+    case '3':
+    return <h3 {...object} className={`subhead ${className}`} dangerouslySetInnerHTML={{__html:text}}></h3>
+    case '4':
+    return <h4 {...object} className={`subhead-sans ${className}`} dangerouslySetInnerHTML={{__html:text}}></h4>
+    case '5':
+    return <h5 {...object} className={`lead-in ${className}`} dangerouslySetInnerHTML={{__html:text}}></h5>
+    case '6':
+    return <h6 {...object} className={`label ${className}`} dangerouslySetInnerHTML={{__html:text}}></h6>
+  }
+}
+
+export default Heading

package/components/helpers/datehelpers.mjs

@@ -0,0 +1,54 @@
+// Add SFC utils
+import { getSettings } from '../../settings'
+const settings = getSettings()
+
+// declare date function variables
+// Convert date to readable time
+const readablePubDate = convertDatesToAP(settings.PROJECT.DATE)
+// Check safely for MOD_DATE
+let readableModDate
+// Convert date string to AP style abbreviations
+let pubdateString = readablePubDate
+let moddateString = ''
+
+function convertDatesToAP(dateString) {
+  // Convert date string to AP style abbreviations
+  let newDateString = dateString
+  newDateString = newDateString
+    .replace('January', 'Jan.')
+    .replace('February', 'Feb.')
+    .replace('August', 'Aug.')
+    .replace('September', 'Sept.')
+    .replace('October', 'Oct.')
+    .replace('November', 'Nov.')
+    .replace('December', 'Dec.')
+    .replace('AM', 'a.m.')
+    .replace('PM', 'p.m.')
+  // Return the result
+  return newDateString
+}
+
+;(function prepDates() {
+  if (typeof settings.PROJECT.MOD_DATE !== 'undefined') {
+    readableModDate = convertDatesToAP(settings.PROJECT.MOD_DATE)
+  } else {
+    // If MOD_DATE does not exist, set false so it doesn't render
+    readableModDate = false
+  }
+
+  // Only check moddate if we have a value
+  if (readableModDate) {
+    moddateString = readableModDate
+
+    // Chop time off pubdate if possible
+    try {
+      // eslint-disable-next-line prefer-destructuring
+      pubdateString = readablePubDate.match(/.*\d{4}/gm)[0]
+    } catch (err) {
+      // That's fine
+      console.log(err)
+    }
+  }
+})()
+
+export { pubdateString, moddateString }

package/components/helpers/utilfunctions.mjs

@@ -0,0 +1,12 @@
+function debounce(fn, ms) {
+    let timer
+    return _ => {
+      clearTimeout(timer)
+      timer = setTimeout(_ => {
+        timer = null
+        fn.apply(this, arguments)
+      }, ms)
+    }
+  }
+
+export { debounce }

package/components/sharebuttons.mjs

@@ -0,0 +1,93 @@
+import React from 'react'
+import * as shareStyles from '../styles/modules/share.module.less'
+
+const ShareButtons = ({ meta, urlAdd }) => {
+  // Extension to URL if passed in
+  if (!urlAdd) {
+    urlAdd = ''
+  }
+
+  let facebookClick = (e) => {
+    const link = e.currentTarget.getAttribute('href')
+    e.preventDefault()
+    if (link) {
+      window.open(link, 'facebook-share-dialog', 'width=626,height=436')
+    }
+  }
+
+  let subfolder = ''
+  if (meta.PROJECT.SUBFOLDER) {
+    subfolder = meta.PROJECT.SUBFOLDER + '/'
+  }
+
+  return (
+    <div className={shareStyles.wrapper} id="sharebutton-box">
+      {/* Twitter */}
+      <a
+        href={`https://twitter.com/intent/tweet?url=${meta.MAIN_DOMAIN}%2F${subfolder}${meta.PROJECT.SLUG}%2F${urlAdd}&text=${meta.PROJECT.TWITTER_TEXT}`}
+        className={shareStyles.link}
+      >
+        <svg
+          className={shareStyles.svg}
+          data-icon="twitter"
+          role="img"
+          aria-hidden="true"
+          focusable="false"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 248 204"
+        >
+          <path
+            data-name="Twitter Logo"
+            fill="currentColor"
+            d="M222 51.29c.15 2.16.15 4.34.15 6.52 0 66.74-50.8 143.69-143.69 143.69A142.91 142.91 0 0 1 1 178.82a102.72 102.72 0 0 0 12 .72 101.29 101.29 0 0 0 62.72-21.66 50.53 50.53 0 0 1-47.18-35.07 50.35 50.35 0 0 0 22.8-.86 50.53 50.53 0 0 1-40.52-49.5v-.64a50.25 50.25 0 0 0 22.92 6.32 50.55 50.55 0 0 1-15.6-67.42 143.38 143.38 0 0 0 104.08 52.77 50.55 50.55 0 0 1 86.06-46.06 101.19 101.19 0 0 0 32.06-12.26 50.66 50.66 0 0 1-22.2 27.93 100.89 100.89 0 0 0 29-7.94A102.84 102.84 0 0 1 222 51.29z"
+          />
+        </svg>
+      </a>
+      {/* Facebook */}
+      <a
+        href={`https://www.facebook.com/sharer/sharer.php?u=${meta.MAIN_DOMAIN}%2F${subfolder}${meta.PROJECT.SLUG}%2F${urlAdd}`}
+        className={shareStyles.link}
+        onClick={facebookClick}
+      >
+        <svg
+          className={shareStyles.svg}
+          aria-hidden="true"
+          focusable="false"
+          data-prefix="fab"
+          data-icon="facebook"
+          role="img"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 320 512"
+        >
+          <path
+            fill="currentColor"
+            d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
+          ></path>
+        </svg>
+      </a>
+      {/* Email */}
+      <a
+        href={`mailto:?subject=${meta.PROJECT.TITLE}&body=${meta.PROJECT.DESCRIPTION}%0A%0A${meta.MAIN_DOMAIN}%2F${subfolder}${meta.PROJECT.SLUG}%2F${urlAdd}`}
+        className={shareStyles.link}
+      >
+        <svg
+          className={shareStyles.svg}
+          aria-hidden="true"
+          focusable="false"
+          data-prefix="fas"
+          data-icon="envelope"
+          role="img"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+        >
+          <path
+            fill="currentColor"
+            d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"
+          ></path>
+        </svg>
+      </a>
+    </div>
+  )
+}
+
+export default ShareButtons

package/components/topper2.mjs

@@ -0,0 +1,202 @@
+import React from "react"
+import Heading from "./heading.mjs"
+import WCMImage2 from "./wcmimage2.mjs"
+import CaptionCredit from "./captioncredit.mjs"
+import * as topperStyles from "../styles/modules/topper2.module.less"
+
+const Topper2 = ({ settings, wcmData, lazyloader }) => {
+  const { 
+    Topper_Style, Title, Title_Style, Deck, Image, Image_Alt, Image_Caption, Image_Credits, 
+    HeaderDek_Vertical_Position, HeaderDek_Vertical_Offset, HeaderDek_Horizontal_Offset, HeaderDek_Horizontal_Position, Inverted_Colors 
+  } = settings
+
+  const headerDekStyleList = () => {
+    switch(Topper_Style) {
+      case "stacked":
+      case "no-visual":
+        return [topperStyles.headerDekStacked, " mw-lg mt-lg mb-md"];
+      case "full-screen": 
+        // apply margin offsets from spreadsheet
+        calculatefullScreenOffsets();
+        return [
+          topperStyles.headerDekFullScreen, fullScreenHorizontalCss(),
+          ... (HeaderDek_Vertical_Position === "top") ? [topperStyles.headerDekTop] : [topperStyles.headerDekBottom],
+          ... (Inverted_Colors === "black-text-white-bg") ? [topperStyles.blackTextWhiteBg] : [topperStyles.whiteTextBlackBg]
+        ];
+      case "side-by-side": 
+        return [];
+    }
+  }
+
+   /** get horizontal positioning css for full screen header-deck container **/
+   const fullScreenHorizontalCss = () => {
+    switch (HeaderDek_Horizontal_Position) {
+      case "left": return topperStyles.headerDekLeft;
+      case "right": return topperStyles.headerDekRight;
+      case "center": return topperStyles.headerDekCenter;
+    }
+  }
+
+  const headerStyleList = () => {
+    let defaultStyles; 
+    switch(Topper_Style) {
+      case "stacked": 
+        defaultStyles = [];
+        break;
+      case "no-visual":
+        defaultStyles = ["left"];
+        break;
+      case "full-screen": 
+        defaultStyles = [topperStyles.hedFullScreen, fullScreenTextAlignCss()];
+        break;
+      case "side-by-side": 
+        defaultStyles = [];
+        break;
+    }
+
+    if (Title_Style !== "") {
+      let extraStyles = Title_Style.split(", ");
+      defaultStyles = defaultStyles.concat(extraStyles);
+    }
+
+    return defaultStyles;
+  }
+
+  const deckStyleList = () => {
+    switch(Topper_Style) {
+      case "stacked":
+        return ["deck"];
+      case "no-visual": 
+        return ["deck left"];
+      case "full-screen": 
+        return ["deck", topperStyles.deckFullScreen, fullScreenTextAlignCss()];
+      case "side-by-side": 
+        return ["deck"];
+    }
+  }
+
+  /** get text alignment based on header-deck position **/
+  const fullScreenTextAlignCss = () => {
+    switch (HeaderDek_Horizontal_Position) {
+      case "left": return topperStyles.textAlignLeft;
+      case "right": return topperStyles.textAlignLeft;
+      case "center": return topperStyles.textAlignCenter;
+    }
+  }
+
+  const ImageHTML = () => <WCMImage2 wcm={Image} alt={Image_Alt} isNotLazyloaded={false} wcmData={wcmData} lazyloader={lazyloader} isFullScreenTopper={false}/>
+  const FullScreenImageHTML = () => <WCMImage2 wcm={Image} alt={Image_Alt} isNotLazyloaded={false} ratio={calculateFullScreenImageRatio()} wcmData={wcmData} lazyloader={lazyloader} isFullScreenTopper={true}/>
+  
+  const TopperHtml = () => {
+    switch (Topper_Style) {
+      case "full-screen": 
+        return (
+          <>
+          <div className={topperStyles.topperContainerFullScreen}>
+              <figure className={`topper-image ${topperStyles.imageFullScreen}` } aria-labelledby="topperCaptionText">
+                <FullScreenImageHTML/>
+                <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={topperStyles.hideWhenDesktop}/>
+              </figure>
+              <div className={headerDekStyleList().join(' ')}>
+                <Heading level={1} text={Title}
+                  className={headerStyleList().join(' ')}
+                />
+                <Heading
+                  level={2}
+                  text={Deck}
+                  className={deckStyleList().join(' ')}
+                />
+              </div>
+          </div>
+          <div className="topperCaptionText">
+            <CaptionCredit caption={Image_Caption} credit={Image_Credits} extraStyles={[topperStyles.hideWhenMobile, topperStyles.smallPaddingLeft]}/>
+          </div>
+          </>
+        );
+
+      case "stacked":
+        return (
+          <>
+          <div>
+            <div className={headerDekStyleList().join('')}>
+              <Heading
+                level={1}
+                text={Title}
+                className={headerStyleList().join(' ')}
+              />
+              <Heading
+                level={2}
+                text={Deck}
+                className={deckStyleList().join(' ')}
+              />
+            </div>
+            <figure className={`mw-xl ml-auto mr-auto ${topperStyles.imageStacked}`}>
+              <ImageHTML/>
+              <CaptionCredit caption={Image_Caption} credit={Image_Credits} />
+            </figure>
+          </div>
+          </>
+        );
+
+      case "no-visual":
+        return (
+          <>
+          <div>
+            <div className={headerDekStyleList().join('')}>
+              <Heading
+                level={1}
+                text={Title}
+                className={headerStyleList().join(' ')}
+              />
+              <Heading
+                level={2}
+                text={Deck}
+                className={deckStyleList().join(' ')}
+              />
+            </div>
+          </div>
+          </>
+        );
+    }
+  } 
+
+  const calculatefullScreenOffsets = () => {
+    var r = document.querySelector(':root');
+
+    let verticalOffset = convertStringToNumber(HeaderDek_Vertical_Offset, (HeaderDek_Vertical_Position === "bottom"));
+    let horizontalOffset = convertStringToNumber(HeaderDek_Horizontal_Offset, (HeaderDek_Horizontal_Position === "right"));
+
+    r.style.setProperty('--headerDek-vertical-offset', verticalOffset + "px" ); 
+    r.style.setProperty('--headerDek-horizontal-offset', horizontalOffset + "px"); 
+  }
+
+  const convertStringToNumber = (maybeStr, isFlipped) => {
+    var num = 0;
+    if (typeof(maybeStr) === "string") {
+      // remove all non-number characters and "-" from string
+      num = Number(maybeStr.replace(/(?!^)-|[^0-9-]/g,''))
+    } else {
+      num = maybeStr
+    }
+
+    if (isNaN(num)) num = 0;
+    if (isFlipped) num *= -1;
+
+    return num;
+  }
+
+  const calculateFullScreenImageRatio = () => {
+      // ratio needs to account for height of nav bar which is 37px
+    const windowRatio = ((window.innerHeight-37) / window.innerWidth)*100;
+    let fullScreenRatio = "56.25%"; // defaults to 16/9;
+
+    if (windowRatio < 56.25) fullScreenRatio = (windowRatio + "%")
+    return fullScreenRatio
+  }
+
+  return (     
+      <TopperHtml/>
+    )
+  }
+
+export default Topper2

package/components/wcmimage2.mjs

@@ -0,0 +1,113 @@
+import React, {useRef, useEffect, useState} from 'react'
+import PropTypes from 'prop-types'
+import * as wcmimageStyles from "../styles/modules/wcmimage2.module.less"
+import { debounce } from './helpers/utilfunctions.mjs'
+
+const currentEnv = process.env.GATSBY_DEPLOY_ENV
+
+const ImageHTML = ({fullPath, imageRez, alt, isFullScreenTopper}) => {
+  let imageCss = [wcmimageStyles.cImg];
+  if (isFullScreenTopper) imageCss.push(wcmimageStyles.cImgFullscreen);
+
+  return (
+    <img  
+      className={imageCss.join(' ')} 
+      src={`${fullPath}${imageRez}x0.jpg`} 
+      alt={alt}/>
+  )
+}
+
+const WCMImage = ({ wcm, alt, isNotLazyloaded, ratio, wcmData, lazyloader, isFullScreenTopper }) => {
+  // When the wrapping div is rendered, we're going to figure out the best size for this image to be
+  let picRef = useRef(null)
+  let [imageRez, setImageRez] = useState(0)
+
+  let setImageWidth = () => {
+    let pixelWidth = 900 // Default width if we need a fallback
+    let pixelRatio = window.devicePixelRatio || 1
+    if (picRef.current && picRef.current.offsetWidth){
+      pixelWidth = Math.round(picRef.current.offsetWidth * pixelRatio)
+    }
+    if (imageRez < pixelWidth){ // No need to resize if we're just scaling down
+      setImageRez(pixelWidth)
+    }
+  }
+
+  useEffect(() => {
+    const debouncedHandleResize = debounce(function handleResize() {
+      setImageWidth()
+    }, 500)
+    window.addEventListener('resize', debouncedHandleResize)
+
+    return () => {
+      window.removeEventListener('resize', debouncedHandleResize)
+    }
+  })
+
+  useEffect(() => {
+    setImageWidth()
+  }, [])
+
+  // If this is actually undefined, return null
+  // No error, nothing is rendered
+  if (!wcm){
+    return null
+  }
+
+  // This calculation is not used for the topper impl, but keeping it here just in case
+  // it is needed for the general WCMImage utils migration
+  let r = document.querySelector(':root');
+  let photoRatio = "56.25%"; // Default to 16/9
+  let fullPath = `https://s.hdnux.com/photos/0/0/0/${wcm}/0/`;
+  if (!ratio){
+    let matchedPhoto = wcmData.nodes.find((item) => {
+        return (item.photo.wcmid).toString() === (wcm).toString()
+    })
+    if (!matchedPhoto && currentEnv !== "development"){
+      throw `WCMImage error: No matching ID for ${wcm} present in the array at the top of gatsby-node.js! If it's already there, you might need to reboot dev.`
+    } 
+    if (matchedPhoto){  
+      // Set ratio of the actual photo like a legit hacker
+      photoRatio = (matchedPhoto.photo.ratio*100)+"%";
+      r.style.setProperty('--img-bottom-padding-ratio', photoRatio); 
+
+      fullPath = matchedPhoto.photo.full_path;
+    } else {
+      // Alert that things will go wrong on deploy
+      console.error(`No matching ID for ${wcm} found in gatsby-node.js! This is fine for development, but it will error on deploy!`);
+    }
+  } else {
+    // If an override is being passed in, use that
+    photoRatio = ratio
+    r.style.setProperty('--img-bottom-padding-ratio', photoRatio); 
+  }
+
+  // Get serious about alt tags
+  if (typeof alt !== "string"){
+    throw `WCMImage error: Image for ${wcm} needs an alt tag! Please add a good, descriptive alt tag. Suggestion from Mozilla: When choosing alt strings for your images, imagine what you would say when reading the page to someone over the phone without mentioning that there's an image on the page.`
+  }
+
+  // Pull lazyloader HTML from index.js
+  const LazyLoaderHTML = lazyloader;
+
+  return (
+    <div ref={picRef}>
+      {!isNotLazyloaded && (
+        <LazyLoaderHTML>
+          <ImageHTML fullPath={fullPath} imageRez={imageRez} alt={alt} isFullScreenTopper={isFullScreenTopper}/>
+        </LazyLoaderHTML>
+      )}
+      {isNotLazyloaded && <ImageHTML fullPath={fullPath} imageRez={imageRez} alt={alt} isFullScreenTopper={isFullScreenTopper}/>}
+    </div>
+  )
+}
+
+WCMImage.propTypes = {
+  wcm: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  alt: PropTypes.string.isRequired,
+  isLazyloaded: PropTypes.bool,
+  ratio: PropTypes.string,
+  lazyloader: PropTypes.element
+}
+
+export default WCMImage

package/css/nav2.less

@@ -1,3 +1,4 @@
+// TODO: move file into styles
 // NOTE: This relies on variables that are updated in brands2.js
 // Styles for the nav
 .nav2-container {