@pareto-engineering/design-system 1.0.2 → 2.0.0-alpha.4

package/src/ui/b/Page/common/PageHelmet/PageHelmet.jsx

@@ -0,0 +1,272 @@
+/* @fwrlines/generator-react-component 2.8.0 */
+import * as React from 'react'
+import { useMemo } from 'react'
+import PropTypes from 'prop-types'
+import { Helmet } from 'react-helmet'
+import { useSite } from 'ui/a'
+
+const helmetMap = [
+  {
+    variables:['robots'],
+    render   :(v) => (
+      <meta
+        name="robots"
+        key="robots"
+        content={v || '"index, follow"'}
+      />
+    ),
+  },
+
+  {
+    variables:['title_tag', 'title'],
+    render   :(v, c) => (
+      <title key="title_tag">
+        {`
+          ${v}
+          ${c.SITE?.TITLE_SUFFIX && c.SITE.TITLE_SUFFIX}
+        `}
+      </title>
+    ),
+  },
+
+  {
+    variables:['meta_description'],
+    render   :(v) => (
+      <meta
+        name="description"
+        content={v}
+        key="meta_description"
+      />
+    ),
+  },
+
+  {
+    variables:['canonical'],
+    render   :(v, c) => (c.SITE?.CANONICAL
+      ? (
+        <link
+          rel="canonical"
+          href={`${c.SITE?.CANONICAL}${v}`}
+          key="canonical"
+        />
+      )
+      : (
+        <link
+          rel="canonical"
+          href={v}
+          key="canonical"
+        />
+      )),
+  },
+
+  {
+    variables:['twitter_title', 'title', 'title_tag'],
+    render   :(v) => (
+      <meta
+        name="twitter:title"
+        content={v}
+        key="twitter_title"
+      />
+    ),
+  },
+
+  {
+    variables:['twitter_description', 'meta_description'],
+    render   :(v) => (
+      <meta
+        name="twitter:description"
+        content={v}
+        key="twitter_description"
+      />
+    ),
+  },
+
+  {
+    test     :true,
+    variables:['twitter_image, main_image'],
+    render   :(v) => (
+      <meta
+        name="twitter:image"
+        content={v}
+        key="twitter_image"
+      />
+    ),
+  },
+
+  {
+    variables:['og_title', 'title', 'title_tag'],
+    render   :(v) => (
+      <meta
+        property="og:title"
+        content={v}
+        key="og_title"
+      />
+    ),
+  },
+  {
+    variables:['og_description', 'meta_description'],
+    render   :(v) => (
+      <meta
+        property="og:description"
+        content={v}
+        key="og_description"
+      />
+    ),
+  },
+
+  {
+    test     :true,
+    variables:['og_image', 'main_image'],
+    render   :(v) => (
+      <meta
+        property="og:image"
+        content={v}
+        key="og_image"
+      />
+    ),
+  },
+
+  {
+    test     :true,
+    variables:['og_type'],
+    render   :(v) => (
+      <meta
+        property="og:type"
+        content={v || 'article'}
+        key="og_type"
+      />
+    ),
+  },
+
+  {
+    variables:['og_url', 'canonical'],
+    render   :(v, c) => (c.SITE?.CANONICAL
+      ? (
+        <meta
+          property="og:url"
+          content={`${c.SITE?.CANONICAL}${v}`}
+          key="og_url"
+        />
+      )
+      : (
+        <meta
+          property="og:url"
+          content={v}
+          key="og_url"
+        />
+      )),
+  },
+
+]
+
+const PageHelmet = ({
+  ...props
+}) => {
+  // const intl = useIntl()
+  const context = useSite()
+
+  const HelmetContent = useMemo(() => helmetMap.reduce(
+    /* eslint-disable no-unused-vars -- TODO add test or ssr mode */
+    (a, { variables, render, test }) => {
+    /* eslint-enable no-unused-vars */
+      let current; let
+        content = ''
+
+      /* eslint-disable no-restricted-syntax -- we need to be able to break the loop */
+      for (const key in variables) {
+        if (props[variables[key]]) {
+          content = props[variables[key]]
+          break
+        }
+      }
+      /* eslint-enable no-restricted-syntax */
+
+      // TODO Add SSR mode
+      // if ((typeof test === 'undefined') || (test && content.length)) {
+      if (content.length) {
+        // if content is an object, then its a message and we need to render it as a string first
+        // const stringContent = typeof content === 'string' ? content : intl.formatMessage(content)
+        // const stringContent = typeof content === 'string' ? content : intl.formatMessage(content)
+        const stringContent = content
+        // console.log(stringContent, content)
+        current = render(stringContent, context)
+      }
+
+      if (current) {
+        a.push(current)
+      }
+
+      return a
+    },
+    [],
+  ),
+  [props, context])
+
+  return (
+    <Helmet>
+      { HelmetContent }
+    </Helmet>
+
+  )
+}
+
+PageHelmet.propTypes = {
+  robots:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  title:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]).isRequired,
+  title_tag:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  canonical:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  meta_description:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  main_image:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  twitter_title:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  twitter_description:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  twitter_image:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  og_title:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  og_description:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  og_image:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  og_type:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  og_url:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+}
+
+export default PageHelmet

package/src/ui/b/Page/common/PageHelmet/index.js

@@ -0,0 +1,2 @@
+/* @fwrlines/generator-react-component 2.8.0 */
+export { default as PageHelmet } from './PageHelmet'

package/src/ui/b/Page/common/Section/Section.jsx

@@ -0,0 +1,69 @@
+/* @pareto-engineering/generator-front 1.0.0 */
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styleNames from '@pareto-engineering/bem'
+
+import usePage from '../../usePage'
+
+// Local Definitions
+const baseClassName = styleNames.base
+const componentClassName = 'section'
+
+const Section = ({
+  id:userId,
+  className:userClassName,
+  style,
+  children,
+  ...otherProps
+}) => {
+  const {
+    id:pageId,
+  } = usePage()
+
+  const sectionId = userId && `${pageId}_${userId}`
+
+  return (
+    <section
+      id={sectionId}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      {...otherProps}
+    >
+      {children}
+    </section>
+  )
+}
+
+Section.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  The children JSX
+   */
+  children:PropTypes.node,
+}
+
+Section.defaultProps = {
+  // someProp:false
+}
+
+export default Section

package/src/ui/b/Page/common/Section/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.0 */
+export { default as Section } from './Section'

package/src/ui/b/Page/common/index.js

@@ -0,0 +1,2 @@
+export { PageHelmet } from './PageHelmet'
+export { Section } from './Section'

package/src/ui/b/Page/index.js

@@ -0,0 +1,4 @@
+/* @pareto-engineering/generator-front 1.0.0 */
+export { default as Page } from './Page'
+export { default as usePage } from './usePage'
+export { default as PageContext } from './Context'

package/src/ui/b/Page/styles.scss

@@ -0,0 +1,10 @@
+/* @pareto-engineering/generator-front 1.0.0 */
+
+@use "@pareto-engineering/bem";
+
+/*
+.#{bem.$base}.page{
+
+} */
+
+

package/src/ui/b/Page/usePage.js

@@ -0,0 +1,4 @@
+import { useContext } from 'react'
+import Context from './Context'
+
+export default () => useContext(Context)

package/src/ui/b/QuestionDropdown/QuestionDropdown.jsx

@@ -0,0 +1,112 @@
+/* @pareto-engineering/generator-front 0.2.7 */
+import * as React from 'react'
+import { useState, useLayoutEffect } from 'react'
+import PropTypes from 'prop-types'
+
+// Package-level Imports
+import styleNames from '@pareto-engineering/bem'
+
+// Component-level imports
+// import('./styles.scss')
+
+// Helper Definition
+const baseClassName = styleNames.base
+const componentClassName = 'question-dropdown'
+
+/**
+ * The question dropdown is used for the FAQ section. <br />
+ * If `isFAQSchema=true`, make sure to remember to add the appropriate itemscope and
+ * itemtype attributes to the root of the page that includes the FAQ component
+ */
+const QuestionDropdown = ({
+  id,
+  className: userClassName,
+  style,
+  question,
+  children,
+  isFAQSchema,
+  defaultIsOpen,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const [isOpen, setIsOpen] = useState(defaultIsOpen)
+  const toggleOpen = () => setIsOpen(!isOpen)
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        isOpen && 'open',
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      itemScope={isFAQSchema} // if isFAQSchema is false, should be undefined
+      itemProp={isFAQSchema && 'mainEntity'}
+      itemType={isFAQSchema && 'http://schema.org/Question'}
+      // {...otherProps}
+    >
+      <div tabIndex={0} role="button" className="accordion" onClick={toggleOpen} onKeyDown={toggleOpen}>
+        <span className="caret">
+          &#94;
+        </span>
+        <div className="question-content" itemProp={isFAQSchema && 'name'}>
+          { question }
+        </div>
+      </div>
+      <div className="answer-content" itemProp={isFAQSchema && 'acceptedAnswer'} itemType={isFAQSchema && 'https://schema.org/Answer'}>
+        <div className="answer-text" itemProp={isFAQSchema && 'text'}>
+          { children }
+        </div>
+      </div>
+    </div>
+  )
+}
+
+QuestionDropdown.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  Any children of the question, such as answer blocks
+   */
+  children:PropTypes.node.isRequired,
+
+  /**
+   *  Question to be answered
+   */
+  question:PropTypes.string.isRequired,
+
+  /**
+   *  Whether element is part of SEO schema
+   */
+  isFAQSchema  :PropTypes.bool,
+  /**
+   * Whether the question drop down should be opened by default
+   */
+  defaultIsOpen:PropTypes.bool,
+}
+
+QuestionDropdown.defaultProps = {
+  defaultIsOpen:false,
+}
+
+export default QuestionDropdown

package/src/ui/b/QuestionDropdown/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 0.2.7 */
+export { default as QuestionDropdown } from './QuestionDropdown'

package/src/ui/b/QuestionDropdown/styles.scss

@@ -0,0 +1,95 @@
+/* @pareto-engineering/generator-front 0.2.7 */
+
+@use "@pareto-engineering/bem";
+
+//make all colors as vars
+
+$border-color: var(--dark-background1);
+$border-width: 2px;
+$button-background-color: transparent;
+$button-background-color-hover: var(--light-accent3);
+$caret-font-size: 1.2em;
+$question-color: var(--heading);
+$question-font-weight: 700;
+$padding-base: 1em;
+$transition-time-button: .4s;
+$transition-time-caret: .3s;
+$transition-time-answer: 1.5s;
+
+.#{bem.$base}.question-dropdown {
+  width: 100%;
+
+  > .accordion {
+    align-items: center;
+    background-color: $button-background-color;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    outline: none;
+    padding: $padding-base $padding-base;
+    transition: background-color $transition-time-button ease;
+    width: 100%;
+
+    .caret {
+      align-items: center;
+      display: inline-flex;
+      font-size: $caret-font-size;
+      transform: scale(1.2, .6) rotate(180deg);
+    }
+
+    .question-content {
+      color: $question-color;
+      font-family: var(--font-heading);
+      font-size: calc(var(--s1) * 1rem);
+      font-weight: $question-font-weight;
+      padding-left: $padding-base;
+    }
+
+    &:hover {
+      background-color: $button-background-color-hover;
+    }
+  }
+
+  .answer-content {
+    background-color: $button-background-color-hover;
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition: opacity $transition-time-answer ease;
+
+    .answer-text {
+      > p {
+        align-items: center;
+        font-family: var(--font-paragraph);
+        font-size: calc(var(--s0) * 1rem);
+        justify-content: center;
+        margin: 0;
+        padding: 0 $padding-base $padding-base;
+      }
+    }
+  }
+
+  &.open {
+    background-color: $button-background-color-hover;
+
+    > .accordion {
+      .caret {
+        font-size: $caret-font-size;
+        transform: scale(1.2, .6) rotate(360deg);
+        transition: transform $transition-time-caret ease;
+      }
+    }
+
+    .answer-content {
+      height: auto;
+      opacity: 1;
+    }
+  }
+
+  &::after {
+    border-bottom: $border-width solid $border-color;
+    content: "";
+    display: block;
+    width: 100%;
+  }
+}

package/src/ui/b/Segment/Segment.jsx

@@ -0,0 +1,78 @@
+/* @pareto-engineering/generator-front 0.2.4 */
+import * as React from 'react'
+import PropTypes from 'prop-types'
+
+// Package-level Imports
+import styleNames from '@pareto-engineering/bem'
+
+// Component-level imports
+import('./styles.scss')
+
+// Helper Definition
+const baseClassName = styleNames.base
+const componentClassName = 'segment'
+
+const Segment = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+
+  title,
+  footer,
+
+  // ...otherProps
+}) => (
+  <div
+    id={id}
+    className={[baseClassName, componentClassName, userClassName]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    <header>
+      <p className="s1 title">{title}</p>
+    </header>
+    <main>{children}</main>
+
+    {footer && <footer>{footer}</footer>}
+  </div>
+)
+
+Segment.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  The children JSX
+   */
+  children:PropTypes.node,
+
+  /**
+   * The title of the segment
+   */
+  title:PropTypes.string.isRequired,
+
+  /**
+   * The optional footer of the segment.
+   */
+  footer:PropTypes.node,
+}
+
+Segment.defaultProps = {
+  // someProp:false
+}
+
+export default Segment

package/src/ui/b/Segment/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 0.2.4 */
+export { default as Segment } from './Segment'

package/src/ui/b/Segment/styles.scss

@@ -0,0 +1,26 @@
+/* @pareto-engineering/generator-front 0.2.4 */
+
+@use "@pareto-engineering/bem" ;
+$padding:.5em 1em;
+
+.#{bem.$base}.segment {
+  border: var(--theme-border);
+  border-radius: var(--border-radius);
+
+  .title {
+    font-weight: 600;
+    margin: unset;
+  }
+
+  > header,
+  > main,
+  > footer {
+    padding: $padding;
+  }
+
+  > footer {
+    border-top: var(--theme-border);
+  }
+}
+
+