sfc-utils 1.4.202 → 1.4.204

package/example/src/components/sfc/navtop.js

@@ -1,121 +0,0 @@
-import React, {useState, useEffect} from 'react'
-import PropTypes from 'prop-types'
-import Headroom from 'react-headroom'
-import { getNav, appCheck } from '../../../../index'
-import * as navStyles from '../../styles/nav.less'
-import { setRichieParam } from './component-helpers/utilfunctions'
-let projectConfig;
-let navUrl;
-let navText;
-try {
-	projectConfig = require("../../project-config.json")
-  navUrl = projectConfig[0].NavLink
-  navText = projectConfig[0].NavTitle
-} catch (err){
-  // do nothing
-}
-
-if (projectConfig){
-  // Conditional logic/rendering goes here
-}
-const NavTop = ({ meta, url_add = '' }) => {
-  let [showSubnav, setShowSubnav] = useState(false)
-  let [navClass, setNavClass] = useState("")
-
-  /* 
-  getNav params:
-    1. meta 
-    2. url_add 
-    3. force color ("white", "black" or null)
-    4. navlink object {
-        text,
-        url,
-        target
-      }
-    5. array of link objects for subnav 
-    6. if true, show subscribe button instead of share buttons
-  */
-
-  // Override these with link objects (example below) if you want to customize
-  let navLink
-  if(navUrl || navText){
-  navLink = {
-    url: navUrl,
-    text: navText,
-    target: "_self",
-  };
-}
-  let sectionArray = null
-
-  // Enable the social popup
-  let handleNavClick = (e) => {
-    // Handle facebook
-    let el = e.target.closest("#topper-nav-facebook-icon");
-    if (el && e.currentTarget.contains(el)) {
-      const link = el.getAttribute("href");
-      e.preventDefault()
-      window.open(
-        link,
-        'facebook-share-dialog',
-        'width=626,height=436'
-      )
-    }
-    // Handle subnav (but only if there are nav items)
-    if (sectionArray && sectionArray.length > 0){
-      el = e.target.closest("#nav-title");
-      if (el && e.currentTarget.contains(el)) {
-        e.preventDefault()
-        setShowSubnav(!showSubnav)
-      }
-      // Handle closing subnav
-      el = e.target.closest("#subnav");
-      if (el && e.currentTarget.contains(el)) {
-        setShowSubnav(false)
-      }
-    }
-  }
-  
-  //If this is CT, we need to reset state
-  let startingHTML = "";
-  if (meta.PROJECT.MARKET_KEY !== "CT"){
-    startingHTML = getNav(meta, url_add, null, navLink, sectionArray)
-  }
-  let [navHTML, setNavHTML] = useState(startingHTML)
-
-  // Setting nav now so that other CT markets can generate
-  useEffect(() => {
-    sectionArray = setRichieParam(sectionArray)
-    setNavHTML(getNav(meta, url_add, null, navLink, sectionArray))
-
-    // Set the navClass
-    let tempNavClass = ""
-    if (showSubnav){
-      tempNavClass += " show-subnav"
-    }
-    if (!appCheck()){
-      tempNavClass += " not-app"
-    }
-    setNavClass(tempNavClass)
-  }, [])
-
-  return (
-    <Headroom
-      style={{
-        zIndex: '2147483647',
-      }}
-    >
-      <div className={navClass}
-        onClick={(e) => {handleNavClick(e)}} 
-        dangerouslySetInnerHTML={{__html: navHTML}} 
-      />
-    </Headroom>
-  )
-}
-
-NavTop.propTypes = {
-  meta: PropTypes.object.isRequired,
-  url_add: PropTypes.string,
-}
-
-export default NavTop
-

package/example/src/components/sfc/newsletter.js

@@ -1,157 +0,0 @@
-import React, { useEffect, useState } from 'react'
-// Grab font awesome
-import { useStaticQuery, graphql } from "gatsby"
-import {
-  newsletterPromo,
-  handleSubmit,
-} from './component-helpers/newsletterhelpers'
-import * as newsletterStyles from '../../styles/modules/newsletter.module.less'
-import { getBrands } from '../../../../index'
-
-/* 
-
-If you want to overwrite these in a C2P project, you'll need 3 columns with these names exactly:
-
-NewsletterID
-NewsletterPromo
-NewsletterLegal
-
-*/
-
-const NewsletterSignup = () => {
-  const {
-    site: {
-      siteMetadata: {
-        PROJECT: {
-          NEWSLETTER_ID, NEWSLETTER_LEGAL, NEWSLETTER_PROMO, MARKET_KEY, SUBFOLDER, SLUG
-        }
-      }
-    }
-  } = useStaticQuery(graphql`
-    query {
-      site {
-        siteMetadata {
-          PROJECT {
-            SLUG
-            SUBFOLDER
-            NEWSLETTER_ID
-            NEWSLETTER_LEGAL
-            NEWSLETTER_PROMO
-            MARKET_KEY
-          }
-        }
-      }
-    }
-  `)
-
-  const [email, setEmail] = useState('')
-  const [emailValid, setEmailValid] = useState(false)
-  const [submitting, setSubmitting] = useState(false)
-  const [errorSubmitted, setErrorSubmitted] = useState(false)
-  const [signedUp, setSignedUp] = useState(false)
-  const [signupError, setSignupError] = useState(false)
-  const thisBrand = getBrands(MARKET_KEY);
-
-  useEffect(() => {
-    // Append script after load
-    const script = document.createElement('script')
-    script.src =
-      'https://www.google.com/recaptcha/api.js?render=6LeBOJAUAAAAAPH7JcaZoQpNcXoHz8T6bFjqlxRg'
-    script.async = true
-    document.body.appendChild(script)
-  }, [])
-
-  return (
-    <div className={newsletterStyles.container}>
-      <div className={newsletterStyles.wrapper}>
-        <div className={newsletterStyles.contentWrapper}>
-          <div className={newsletterStyles.content}>
-            <div className={newsletterStyles.headshot}>
-              <img
-                alt="logo"
-                src={"https://files.sfchronicle.com/static-assets/logos/"+thisBrand.attributes.marketPrefix+"-square-black.png"}
-              />
-            </div>
-            <p
-              className={newsletterStyles.newsletterHeadline}
-              dangerouslySetInnerHTML={{ __html: NEWSLETTER_PROMO }}
-            />
-          </div>
-
-          <div className={newsletterStyles.formWrapper}>
-            <div>
-              <div className={newsletterStyles.inputWrapper}>
-                <input
-                  className={newsletterStyles.userSignUp}
-                  value={email}
-                  onChange={(e) => {
-                    setEmail(e.currentTarget.value)
-                    setErrorSubmitted(false)
-                  }}
-                  placeholder="Enter your email address here."
-                  type="email"
-                />
-
-                <button
-                  className={newsletterStyles.submitButton}
-                  type="submit"
-                  onClick={() =>
-                    handleSubmit({
-                      email,
-                      setEmailValid,
-                      emailValid,
-                      setSubmitting,
-                      setSignedUp,
-                      setSignupError,
-                      setErrorSubmitted,
-                      MARKET_KEY,
-                      NEWSLETTER_ID
-                    }, 
-                      `${SUBFOLDER}|${SLUG}` //Unique ID for this signup
-                    )
-                  }
-                >
-                  {submitting ? (
-                    <img src="https://projects.sfchronicle.com/shared/logos/loading.gif" />
-                  ) : (
-                    <span>Sign up</span>
-                  )}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className={newsletterStyles.outputText}>
-          {errorSubmitted && (
-            <p className={newsletterStyles.red}>
-              This email is invalid. Please update and submit again.
-            </p>
-          )}
-          {signupError && (
-            <p className={newsletterStyles.red}>
-              There was a problem with the server, please try again later.
-            </p>
-          )}
-          {signedUp && <p>Thank you for signing up for our newsletter!</p>}
-        </div>
-
-        <p className={newsletterStyles.disclaimer}>
-          This site is protected by reCAPTCHA and the Google{' '}
-          <a href="https://policies.google.com/privacy" target="_blank">
-            Privacy Policy
-          </a>{' '}
-          and{' '}
-          <a href="https://policies.google.com/terms" target="_blank">
-            Terms of Service
-          </a>{' '}
-          {NEWSLETTER_LEGAL &&
-            <span dangerouslySetInnerHTML={{__html: NEWSLETTER_LEGAL}} />
-          }
-        </p>
-      </div>
-    </div>
-  )
-}
-
-export default NewsletterSignup

package/example/src/components/sfc/relatedlink.js

@@ -1,23 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import * as relatedlinkStyles from '../../styles/modules/relatedlink.module.less'
-import WCMImage from './wcmimage'
-
-const RelatedLink = ({ url, wcmid, title }) => (
-  <div className={relatedlinkStyles.container}>
-    <a href={url}>
-    	{wcmid &&
-    		<WCMImage wcm={wcmid} alt="Thumbnail image for a related story" ratio={"55%"} />
-    	}
-      <p className={relatedlinkStyles.text}>{title}</p>
-    </a>
-  </div>
-)
-
-RelatedLink.propTypes = {
-  url: PropTypes.string,
-  wcmid: PropTypes.number,
-  title: PropTypes.string,
-}
-
-export default RelatedLink

package/example/src/components/sfc/relatedrow.js

@@ -1,23 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import RelatedLink from './relatedlink'
-import * as relatedrowStyles from '../../styles/modules/relatedrow.module.less'
-
-const RelatedRow = ({ links }) => (
-  <div className={relatedrowStyles.links}>
-    {links.map((link) => (
-      <RelatedLink
-        key={link.title}
-        url={link.url}
-        wcmid={link.wcmid}
-        title={link.title}
-      />
-    ))}
-  </div>
-)
-
-RelatedRow.propTypes = {
-  links: PropTypes.array,
-}
-
-export default RelatedRow

package/example/src/components/sfc/relatedsection.js

@@ -1,27 +0,0 @@
-import React, {useState, useEffect} from 'react'
-import PropTypes from 'prop-types'
-import RelatedRow from './relatedrow'
-import * as relatedsectionStyles from '../../styles/modules/relatedsection.module.less'
-import { setRichieParam } from './component-helpers/utilfunctions'
-
-const RelatedSection = ({ links }) => {
-	let [relLinks, setRelLinks] = useState(links)
-
-	// Reset in case they need URL params for app
-	useEffect(() => {
-		setRelLinks(setRichieParam(relLinks))
-	}, [])
-
-  return <section aria-label="Related links" className={relatedsectionStyles.section}>
-  	<div className={relatedsectionStyles.hed}>Read more</div>
-    <RelatedRow links={relLinks} />
-  </section>
-}
-
-RelatedSection.propTypes = {
-  links: PropTypes.array.isRequired,
-}
-
-export default RelatedSection
-
-

package/example/src/components/sfc/safelink.js

@@ -1,86 +0,0 @@
-import React, { Fragment, useState, useEffect } from 'react'
-import { Link } from 'gatsby'
-import PropTypes from 'prop-types'
-import { setRichieParam } from '../sfc/component-helpers/utilfunctions'
-
-// Add SFC utils
-import { appCheck } from '../../../../index'
-
-// withinProject: enable to get the benefits of Gatsby's speed loading for pages on the same project structure
-// withinSite: disable if this is a link to an outside resource, like a government site or document
-// you can assign other link-related attributes to this component, they'll transfer using the spread operator
-
-const SafeLink = ({
-  href,
-  onClick,
-  withinProject = false,
-  withinSite = true,
-  children,
-  ...other
-}) => {
-  // Track what the link should be
-  let [linkURL, setLinkURL] = useState(href)
-
-  // Check on first load if this is in the app or not
-  useEffect(() => {
-    const isApp = appCheck()
-    if (isApp) {
-      setLinkURL(setRichieParam(href))
-    }
-  }, [])
-
-  // Handle anchor tags for the app
-  const interceptClick = (e, onClick) => {
-    e.preventDefault()
-    const scrollEl = document.getElementById(href.substring(1))
-    if (scrollEl) {
-      scrollEl.scrollIntoView()
-    }
-
-    // Preserve and run any original on click functionality
-    if (onClick) {
-      onClick()
-    }
-  }
-
-  // If we detect an anchor tag, sub in behavior
-  let clickFunc = onClick
-  if (href.charAt(0) === '#') {
-    clickFunc = interceptClick
-  }
-  // If we have no function, add a dummy one so we don't error
-  if (!clickFunc){
-    clickFunc = () => {}
-  }
-
-  return (
-    <Fragment>
-      {withinProject ? (
-        <Link to={linkURL} onClick={(e) => clickFunc(e, onClick)} {...other}>
-          {children}
-        </Link>
-      ) : (
-        <a
-          href={linkURL}
-          target={withinSite ? '_self' : '_blank'}
-          rel={withinSite ? null : 'noreferrer'}
-          onClick={(e) => {
-            if (clickFunc){
-              clickFunc(e, onClick)
-            }   
-          }}
-          {...other}
-        >
-          {children}
-        </a>
-      )}
-    </Fragment>
-  )
-}
-
-SafeLink.propTypes = {
-  href: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-}
-
-export default SafeLink

package/example/src/components/sfc/scrolldown.js

@@ -1,22 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { scrollToTarget } from './component-helpers/scrolldownhelpers'
-import * as scrolldownStyles from '../../styles/modules/scrolldown.module.less'
-import 'css.gg/icons/css/chevron-down.css'
-
-const ScrollDown = ({ scrollTo }) => (
-  <div className={scrolldownStyles.arrow}>
-    <div
-      tabIndex="0"
-      role="button"
-      className="gg-chevron-down"
-      onClick={() => scrollToTarget(scrollTo)}
-    ></div>
-  </div>
-)
-
-ScrollDown.propTypes = {
-  scrollTo: PropTypes.string.isRequired,
-}
-
-export default ScrollDown

package/example/src/components/sfc/sharebuttons.js

@@ -1,93 +0,0 @@
-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}>
-      {/* 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 512 512"
-        >
-          <path
-            fill="currentColor"
-            d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
-          ></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/example/src/components/sfc/topper.js

@@ -1,88 +0,0 @@
-import React, { Fragment } from 'react'
-import PropTypes from 'prop-types'
-import Byline from './byline'
-import NavTop from './navtop'
-import ScrollDown from './scrolldown'
-import {
-  pubdateString,
-  moddateString,
-} from './component-helpers/datehelpers'
-import * as topperStyles from '../../styles/modules/topper.module.less'
-import WCMImage from './wcmimage'
-
-const Topper = ({ meta }) => {
-  const {
-    PROJECT: { AUTHORS, ISO_MODDATE, ISO_PUBDATE, DISPLAY_TITLE, DECK },
-  } = meta
-
-  return (
-    <Fragment>
-      <NavTop meta={meta} />
-      <header className={topperStyles.header}>
-        <section
-          aria-label="Topper headline, deck, byline and dateline"
-          className={topperStyles.textContainer}
-        >
-          <h1 className={topperStyles.hed}>{DISPLAY_TITLE ? DISPLAY_TITLE : "A brave new template v2"}</h1>
-          <h2 className={topperStyles.dek}>
-            {DECK ? DECK : "Words can be like X-rays if you use them properly &mdash; they'll go through anything."}
-          </h2>
-          <div className={topperStyles.dateby}>
-            <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 (
-                <Byline
-                  key={author.AUTHOR_NAME}
-                  url={author.AUTHOR_PAGE}
-                  name={author.AUTHOR_NAME}
-                  index={index}
-                  isLast={isLast}
-                />
-              )
-            })}
-            &nbsp;|&nbsp;
-            <time
-              className="topper-dateline"
-              dateTime={ISO_PUBDATE}
-              itemProp="datePublished"
-            >
-              {pubdateString}
-            </time>
-            {moddateString && (
-              <Fragment>
-                &nbsp;|&nbsp;
-                <time
-                  className="topper-dateline updated-date"
-                  dateTime={ISO_MODDATE}
-                  itemProp="dateModified"
-                >
-                  Updated: {moddateString}
-                </time>
-              </Fragment>
-            )}
-          </div>
-        </section>
-      </header>
-      <figure className={topperStyles.figure}>
-        {/* You can also use a 100vh/100vw with a normal img tag here, just make sure to set the container that way so we don't get layout shift */}
-        <WCMImage wcm={20374215} alt="TKTKTK" lz={false} />
-
-        {/* This prop gives the arrow an id to scroll to */}
-        <ScrollDown scrollTo="article" />
-        <figcaption className={topperStyles.topcap}>A man sitting on a hill with the Golden Gate Bridge in the background <span className={topperStyles.topcred}>(Scott Strazzante / San Francisco Chronicle)</span></figcaption>
-      </figure>
-    </Fragment>
-  )
-}
-
-Topper.propTypes = {
-  meta: PropTypes.object.isRequired,
-}
-
-export default Topper