sfc-utils 1.4.203 → 1.4.204

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

@@ -1,40 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import * as buttonStyles from '../../styles/modules/button.module.less'
-
-const Button = ({ click, type, text, style, className, name }) => {
-  const buttonType = () => {
-    switch (style) {
-      case 'primary':
-        return buttonStyles.btnPrimary
-      case 'secondary':
-        return buttonStyles.btnSecondary
-      case 'disabled':
-        return buttonStyles.btnDisabled
-      default:
-        return buttonStyles.btnPrimary
-    }
-  }
-
-  return (
-    <button
-      name={name ? name : ""}
-      onClick={click}
-      type={type}
-      className={className ? `${className} ${buttonType()}` : buttonType()}
-    >
-      {text}
-    </button>
-  )
-}
-
-Button.propTypes = {
-  click: PropTypes.func,
-  text: PropTypes.string,
-  className: PropTypes.string,
-  name: PropTypes.string,
-  type: PropTypes.string,
-  style: PropTypes.oneOf(['primary', 'secondary', 'disabled']).isRequired,
-}
-
-export default Button

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

@@ -1,42 +0,0 @@
-import React, { Fragment } from 'react'
-import PropTypes from 'prop-types'
-import * as bylineStyles from '../../styles/modules/byline.module.less'
-
-const Byline = ({ 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={bylineStyles.byline}>{name}</span>
-          </a>
-        </Fragment>
-      ) : (
-        <span>
-          {prefix}
-          {name}
-        </span>
-      )}
-    </Fragment>
-  )
-}
-
-Byline.propTypes = {
-  url: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  index: PropTypes.number,
-  isLast: PropTypes.bool,
-}
-
-export default Byline

package/example/src/components/sfc/component-helpers/customhooks.js

@@ -1,17 +0,0 @@
-import { useState, useEffect } from 'react'
-
-function useCanNativeLazyLoad() {
-  const [canNativeLazyload, setCanNativeLazyload] = useState('pending')
-
-  useEffect(() => {
-    if ('loading' in HTMLImageElement.prototype) {
-      setCanNativeLazyload(true)
-    } else {
-      setCanNativeLazyload(false)
-    }
-  }, [])
-
-  return canNativeLazyload
-}
-
-export { useCanNativeLazyLoad }

package/example/src/components/sfc/component-helpers/datehelpers.js

@@ -1,55 +0,0 @@
-
-// Add SFC utils
-import { getSettings } from '../../../../tempsettings'
-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/example/src/components/sfc/component-helpers/newsletterhelpers.js

@@ -1,89 +0,0 @@
-import axios from 'axios'
-
-// Check the vars to make sure the form is in a state to be sent
-function checkSubmitStatus({ email, setEmailValid, emailValid }) {
-  // Check if email is formatted like an email
-  if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
-    // Valid email
-    setEmailValid(true)
-  } else {
-    // Invalid email
-    setEmailValid(false)
-    return false
-  }
-
-  // Check all values
-  if (email) {
-    // Tests passed! Return true
-    return true
-  }
-  // If tests were not passed, return false
-  return false
-}
-
-// Run our submission through reCAPTCHA logic
-function handleSubmit({
-  email,
-  setEmailValid,
-  emailValid,
-  setSubmitting,
-  setSignedUp,
-  setSignupError,
-  setErrorSubmitted,
-  MARKET_KEY,
-  NEWSLETTER_ID
-}, uniqueID) {
-  // See if we're able to submit
-  if (checkSubmitStatus({ email, setEmailValid, emailValid })) {
-    // Change the button graphic to show we're doing something
-    setSubmitting(true)
-    // Go ahead with the submit
-    if (typeof window !== 'undefined') {
-      window.grecaptcha.ready(() => {
-        // This will fail on mobile because reCAPTCHA does not work on dev domains
-        window.grecaptcha
-          .execute('6LeBOJAUAAAAAPH7JcaZoQpNcXoHz8T6bFjqlxRg', {
-            action: 'newslettersignup',
-          })
-          .then((token) => {
-            // Append write-in prefix if this is a write-in answer
-            axios
-              .post(
-                'https://projects.sfchronicle.com/feeds/voting/index.php',
-                {
-                  token: token,
-                  formData: {
-                    // Sending data that jives with what PHP expects
-                    email: email,
-                    pageChoices: [],
-                    newsletterSignup: true,
-                    customSailID: NEWSLETTER_ID,
-                    uniqueID: uniqueID,
-                    logSource: '*EMBEDDED SIGNUP*',
-                    marketKey: MARKET_KEY
-                  },
-                },
-                { headers: { 'Content-Type': 'application/json' } }
-              )
-              .then((response) => {
-                // If successful, show end of form
-                if (response.status === 200) {
-                  setSignedUp(true)
-                  setSubmitting(false)
-                } else {
-                  // Show error if our server fails
-                  setSignupError(true)
-                  setSubmitting(false)
-                }
-              })
-            return true
-          })
-      })
-    }
-  } else {
-    // Submit error! Change state to expose error help text
-    setErrorSubmitted(true)
-  }
-}
-
-export { handleSubmit }

package/example/src/components/sfc/component-helpers/requesthelpers.js

@@ -1,7 +0,0 @@
-// use as callback function with useSWR to grab data from apis
-
-function getData(url) {
-  return fetch(url).then((response) => response.json())
-}
-
-export { getData }

package/example/src/components/sfc/component-helpers/scrolldownhelpers.js

@@ -1,11 +0,0 @@
-function scrollToTarget(target) {
-  // might need to adjust this offset
-  let targetOffset = document.querySelector(target).offsetTop - 45
-  window.scroll({
-    left: 0,
-    top: targetOffset,
-    behavior: 'smooth',
-  })
-}
-
-export { scrollToTarget }

package/example/src/components/sfc/component-helpers/utilfunctions.js

@@ -1,68 +0,0 @@
-
-// Grabs a param from the URL structure
-function getParameterByName(name, url = window.location.href) {
-  name = name.replace(/[\[\]]/g, '\\$&');
-  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
-      results = regex.exec(url);
-  if (!results) return null;
-  if (!results[2]) return '';
-  return decodeURIComponent(results[2].replace(/\+/g, ' '));
-}
-
-function convertURL(url){
-  // Check if we already have a ?
-  let newURL = url
-  let paramConcat = "&"
-  if (newURL.indexOf("?") === -1){
-    paramConcat = "?"
-  }
-  newURL += paramConcat + "fromRichie=1"
-  return newURL
-}
-
-// Adds Richie param to an array of links
-function setRichieParam(linksArray){
-  if (!linksArray){
-    return null;
-  }
-  if (typeof window !== "undefined"){
-    let param = getParameterByName("fromRichie")
-
-    // Check if we're dealing with a string
-    if (typeof linksArray == "string"){
-      if (param){
-        let newURL = convertURL(linksArray)
-        return newURL
-      } else {
-        return linksArray
-      }
-    }
-
-    // Otherwise, assume array
-    let newArray = linksArray.slice()
-    if (param){
-      // If we found the param, loop through and add it to all the section links
-      for (let item in newArray){
-        let thisItem = newArray[item]
-        thisItem.url = convertURL(thisItem.url)
-      }
-    }
-    return newArray
-  } else {
-    // If window is undefined, return empty
-    return []
-  }
-}
-
-function debounce(fn, ms) {
-  let timer
-  return _ => {
-    clearTimeout(timer)
-    timer = setTimeout(_ => {
-      timer = null
-      fn.apply(this, arguments)
-    }, ms)
-  }
-}
-
-export { getParameterByName, setRichieParam, debounce }

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

@@ -1,35 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import * as creditlineStyles from '../../styles/modules/creditline.module.less'
-
-const CreditLine = ({ name, email, twitter }) => (
-  <p className={creditlineStyles.text}>
-    {name}
-    {email && (
-      <span>
-        &nbsp;• <a href={`mailto:${email} `}>{email.toLowerCase()}</a>{' '}
-      </span>
-    )}
-    {twitter && (
-      <span>
-        &nbsp;•{' '}
-        <a
-          className={creditlineStyles.link}
-          target="_blank"
-          rel="noopener noreferrer"
-          href={`https://twitter.com/${twitter} `}
-        >
-          @{twitter}
-        </a>
-      </span>
-    )}
-  </p>
-)
-
-CreditLine.propTypes = {
-  name: PropTypes.string.isRequired,
-  email: PropTypes.string,
-  twitter: PropTypes.string,
-}
-
-export default CreditLine

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

@@ -1,17 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import * as creditsStyles from '../../styles/modules/credits.module.less'
-
-const Credits = ({ type, children }) => (
-  <>
-    <p className={creditsStyles.title}>{type}</p>
-    {children}
-  </>
-)
-
-Credits.propTypes = {
-  type: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-}
-
-export default Credits

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

@@ -1,49 +0,0 @@
-import React from 'react'
-import Credits from './credits'
-import CreditLine from './creditline'
-import OgPubDate from '../../../../components/ogpubdate.mjs'
-import * as creditssectionStyles from '../../styles/modules/creditssection.module.less'
-let rawCredits;
-try {
-	rawCredits = require('../../data/credits.sheet.json')
-} catch (err){
-    // It's fine
-    rawCredits = null;
-}
-const CreditsSection = () => {
-  //get rid of instructions
-  let credits = rawCredits
-
-  // Put credits into structured array
-  let creditObj = {}
-  if(credits){
-  credits.forEach((credit) => {
-    if (typeof creditObj[credit.role] === 'undefined') {
-      // Create an empty array with key of role
-      creditObj[credit.role] = []
-    }
-    // Push into role array regardless
-    creditObj[credit.role].push(credit)
-  })
-}
-  return (
-    <section aria-label="Credits" className={creditssectionStyles.section}>
-      <OgPubDate/>
-      <h4 className={creditssectionStyles.hed}>Credits</h4>
-      {Object.keys(creditObj).map((key) => (
-        <Credits type={key} key={key}>
-          {creditObj[key].map((credit) => (
-            <CreditLine
-              key={credit.name}
-              name={credit.name}
-              email={credit.email}
-              twitter={credit.twitter}
-            />
-          ))}
-        </Credits>
-      ))}
-    </section>
-  )
-}
-
-export default CreditsSection

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

@@ -1,15 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import * as dropcapStyles from '../../styles/modules/dropcap.module.less'
-
-const DropCap = ({ children }) => (
-  <span className={dropcapStyles.dropcap}>
-    {children}
-  </span>
-)
-
-DropCap.propTypes = {
-  children: PropTypes.node.isRequired,
-}
-
-export default DropCap

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

@@ -1,36 +0,0 @@
-import React, {useState, useEffect} from 'react'
-import { getFooter } from '../../../../index'
-// simple scroll-to function package https://github.com/callmecavs/jump.js
-import jump from 'jump.js'
-import * as navStyles from '../../styles/footer.less'
-
-
-const Footer = ({meta}) => {
-  //If this is CT, Texcom, or Midcom, we need to reset state
-  let startingHTML = "";
-  if (['Texcom','Midcom','CT'].indexOf(meta.PROJECT.MARKET_KEY) === -1) {
-    startingHTML = getFooter(meta, true)
-  }
-  let [footerHTML, setFooterHTML] = useState(startingHTML)
-
-  // grabs footer return to top button and makes it jump to top on click
-  useEffect(() => {
-    let footerTopButton = document.querySelector('#scrollTop')
-    if (footerTopButton){
-      footerTopButton.onclick = () => jump('#___gatsby', { a11y: true })
-    }
-
-    setFooterHTML(getFooter(meta, true))
-  }, [])
-
-  return (
-    /* 
-    getFooter params:
-      1. meta 
-      2. invert colors (boolean)
-    */
-    <div dangerouslySetInnerHTML={{__html: footerHTML}} />
-  )
-}
-
-export default Footer

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

@@ -1,148 +0,0 @@
-import React, { Component } from 'react'
-import axios from 'axios'
-import * as geocoderStyles from '../../styles/modules/geocoder.module.less'
-
-/* Simple Geocoder using the Census API
- * If this.props.returnFunc exists, call it with the result of the query
- */
-
-export default class Geocoder extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      searchVal: '',
-      searching: false,
-      results: {
-        result: null,
-      },
-    }
-  }
-
-  sendResults(coords) {
-    if (this.props.resultFunc) {
-      this.props.resultFunc(coords)
-    }
-    // Clear results on click
-    this.setState({
-      results: {
-        result: null,
-      },
-    })
-  }
-
-  onKeyPress(e) {
-    // Clear results on key press
-    this.setState({
-      results: {
-        result: null,
-      },
-    })
-
-    if (e.key === 'Enter') {
-      this.searchAddress()
-    }
-  }
-
-  searchAddress() {
-    if (this.state.searching === false) {
-      let geocodeURL = 'https://projects.sfchronicle.com/feeds/geocode/'
-      this.setState({
-        searching: true,
-      })
-
-      // UNCOMMENT THIS SET STATE TO WORK WITH A TEST RESULT
-      /*
-      this.setState({
-        results: {
-          "result": {
-            "addressMatches": [
-              {
-                "matchedAddress": "901 MISSION TEST TEST TEST",
-                "coordinates": {
-                  "x": -122.4066217,
-                  "y": 37.7822158
-                },
-              }
-            ]
-          }
-        }
-      });
-      */
-
-      // NOTE: This will fail on localhost for CORS reasons, trust it to work on the server
-      axios.post(geocodeURL, { query: this.state.searchVal }).then((result) => {
-        this.setState({
-          results: result.data,
-          searching: false,
-        })
-      })
-    }
-  }
-
-  render() {
-    // Check for validity of data
-    let validAddresses = null
-    try {
-      validAddresses = this.state.results.result.addressMatches
-    } catch (err) {
-      // This is ok, it just means endpoint was not available
-      if (this.state.results.result !== null) {
-        validAddresses = false
-      }
-    }
-
-    return (
-      <div className={geocoderStyles.wrapper}>
-        <div className={geocoderStyles.addressInput}>
-          <input
-            type="address"
-            value={this.state.searchVal}
-            onKeyPress={this.onKeyPress.bind(this)}
-            placeholder="901 Mission St, San Francisco"
-            onChange={(e) => {
-              this.setState({
-                searchVal: e.currentTarget.value,
-              })
-            }}
-          />
-          <button type="button" onClick={this.searchAddress.bind(this)}>
-            {!this.state.searching ? (
-              <span>Search</span>
-            ) : (
-              <img src="https://projects.sfchronicle.com/shared/logos/spinner.gif" />
-            )}
-          </button>
-        </div>
-        {validAddresses === false && (
-          <div className={geocoderStyles.resultBox}>
-            <div className={`${geocoderStyles.result} ${geocoderStyles.empty}`}>
-              Something went wrong, please try again later
-            </div>
-          </div>
-        )}
-        {validAddresses && validAddresses.length === 0 && (
-          <div className={geocoderStyles.resultBox}>
-            <div className={`${geocoderStyles.result} ${geocoderStyles.empty}`}>
-              No matches, please add more detail
-            </div>
-          </div>
-        )}
-        {validAddresses && validAddresses.length > 0 && (
-          <div className={geocoderStyles.resultBox}>
-            {this.state.results.result.addressMatches.map((item, index) => {
-              return (
-                <div
-                  className={geocoderStyles.result}
-                  onClick={() => this.sendResults(item.coordinates)}
-                >
-                  {item.matchedAddress}
-                </div>
-              )
-            })}
-          </div>
-        )}
-      </div>
-    )
-  }
-}

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

@@ -1,17 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-const MiscCredit = ({ link, text }) => (
-  <p>
-    <a href={link} rel="noopener noreferrer" target="_blank">
-      {text}
-    </a>
-  </p>
-)
-
-MiscCredit.propTypes = {
-  link: PropTypes.string,
-  text: PropTypes.string,
-}
-
-export default MiscCredit