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

package/dist/es/b/Page/common/PageHelmet/PageHelmet.js

@@ -0,0 +1,178 @@
+/* @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 "../../../../a";
+const helmetMap = [{
+  variables: ['robots'],
+  render: v => /*#__PURE__*/React.createElement("meta", {
+    name: "robots",
+    key: "robots",
+    content: v || '"index, follow"'
+  })
+}, {
+  variables: ['title_tag', 'title'],
+  render: (v, c) => {
+    var _c$SITE;
+
+    return /*#__PURE__*/React.createElement("title", {
+      key: "title_tag"
+    }, `
+          ${v}
+          ${((_c$SITE = c.SITE) === null || _c$SITE === void 0 ? void 0 : _c$SITE.TITLE_SUFFIX) && c.SITE.TITLE_SUFFIX}
+        `);
+  }
+}, {
+  variables: ['meta_description'],
+  render: v => /*#__PURE__*/React.createElement("meta", {
+    name: "description",
+    content: v,
+    key: "meta_description"
+  })
+}, {
+  variables: ['canonical'],
+  render: (v, c) => {
+    var _c$SITE2, _c$SITE3;
+
+    return (_c$SITE2 = c.SITE) !== null && _c$SITE2 !== void 0 && _c$SITE2.CANONICAL ? /*#__PURE__*/React.createElement("link", {
+      rel: "canonical",
+      href: `${(_c$SITE3 = c.SITE) === null || _c$SITE3 === void 0 ? void 0 : _c$SITE3.CANONICAL}${v}`,
+      key: "canonical"
+    }) : /*#__PURE__*/React.createElement("link", {
+      rel: "canonical",
+      href: v,
+      key: "canonical"
+    });
+  }
+}, {
+  variables: ['twitter_title', 'title', 'title_tag'],
+  render: v => /*#__PURE__*/React.createElement("meta", {
+    name: "twitter:title",
+    content: v,
+    key: "twitter_title"
+  })
+}, {
+  variables: ['twitter_description', 'meta_description'],
+  render: v => /*#__PURE__*/React.createElement("meta", {
+    name: "twitter:description",
+    content: v,
+    key: "twitter_description"
+  })
+}, {
+  test: true,
+  variables: ['twitter_image, main_image'],
+  render: v => /*#__PURE__*/React.createElement("meta", {
+    name: "twitter:image",
+    content: v,
+    key: "twitter_image"
+  })
+}, {
+  variables: ['og_title', 'title', 'title_tag'],
+  render: v => /*#__PURE__*/React.createElement("meta", {
+    property: "og:title",
+    content: v,
+    key: "og_title"
+  })
+}, {
+  variables: ['og_description', 'meta_description'],
+  render: v => /*#__PURE__*/React.createElement("meta", {
+    property: "og:description",
+    content: v,
+    key: "og_description"
+  })
+}, {
+  test: true,
+  variables: ['og_image', 'main_image'],
+  render: v => /*#__PURE__*/React.createElement("meta", {
+    property: "og:image",
+    content: v,
+    key: "og_image"
+  })
+}, {
+  test: true,
+  variables: ['og_type'],
+  render: v => /*#__PURE__*/React.createElement("meta", {
+    property: "og:type",
+    content: v || 'article',
+    key: "og_type"
+  })
+}, {
+  variables: ['og_url', 'canonical'],
+  render: (v, c) => {
+    var _c$SITE4, _c$SITE5;
+
+    return (_c$SITE4 = c.SITE) !== null && _c$SITE4 !== void 0 && _c$SITE4.CANONICAL ? /*#__PURE__*/React.createElement("meta", {
+      property: "og:url",
+      content: `${(_c$SITE5 = c.SITE) === null || _c$SITE5 === void 0 ? void 0 : _c$SITE5.CANONICAL}${v}`,
+      key: "og_url"
+    }) : /*#__PURE__*/React.createElement("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 /*#__PURE__*/React.createElement(Helmet, null, HelmetContent);
+};
+
+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/dist/es/b/Page/common/PageHelmet/index.js

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

package/dist/es/b/Page/common/Section/Section.js

@@ -0,0 +1,53 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/* @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 /*#__PURE__*/React.createElement("section", _extends({
+    id: sectionId,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, otherProps), children);
+};
+
+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/dist/es/b/Page/common/Section/index.js

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

package/dist/es/b/Page/common/index.js

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

package/dist/es/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/dist/es/b/Page/styles.scss

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

package/dist/es/b/Page/usePage.js

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

package/dist/es/b/QuestionDropdown/QuestionDropdown.js

@@ -0,0 +1,104 @@
+/* @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 /*#__PURE__*/React.createElement("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}
+
+  }, /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    role: "button",
+    className: "accordion",
+    onClick: toggleOpen,
+    onKeyDown: toggleOpen
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "caret"
+  }, "^"), /*#__PURE__*/React.createElement("div", {
+    className: "question-content",
+    itemProp: isFAQSchema && 'name'
+  }, question)), /*#__PURE__*/React.createElement("div", {
+    className: "answer-content",
+    itemProp: isFAQSchema && 'acceptedAnswer',
+    itemType: isFAQSchema && 'https://schema.org/Answer'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "answer-text",
+    itemProp: isFAQSchema && 'text'
+  }, children)));
+};
+
+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/dist/es/b/QuestionDropdown/index.js

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

package/dist/es/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/dist/es/b/Segment/Segment.js

@@ -0,0 +1,61 @@
+/* @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
+
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+}, /*#__PURE__*/React.createElement("header", null, /*#__PURE__*/React.createElement("p", {
+  className: "s1 title"
+}, title)), /*#__PURE__*/React.createElement("main", null, children), footer && /*#__PURE__*/React.createElement("footer", null, footer));
+
+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/dist/es/b/Segment/index.js

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

package/dist/es/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);
+  }
+}
+
+

package/dist/es/b/SocialMediaButton/SocialMediaButton.js

@@ -0,0 +1,116 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem';
+import { useSite } from "../../a"; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'social-media-button';
+const defaultsMap = {
+  facebook: {
+    icon: 'f',
+    link: 'FACEBOOK'
+  },
+  instagram: {
+    icon: 'i',
+    link: 'INSTAGRAM'
+  },
+  twitter: {
+    icon: 't',
+    link: 'TWITTER'
+  },
+  linkedin: {
+    icon: 'l',
+    link: 'LINKEDIN'
+  }
+};
+/**
+ * This is the component description.
+ * This component takes `y` as the default color and `x` as the hover color.
+ * This components needs to be wrapped within a `SiteContextProvider`.
+ */
+
+const SocialMediaButton = ({
+  id,
+  className: userClassName,
+  style,
+  type,
+  icon,
+  link,
+  color,
+  isTransparent,
+  ...otherProps
+}) => {
+  var _siteContext$SOCIAL;
+
+  const siteContext = useSite();
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const content = type && defaultsMap[type];
+  const href = link || (siteContext === null || siteContext === void 0 ? void 0 : (_siteContext$SOCIAL = siteContext.SOCIAL) === null || _siteContext$SOCIAL === void 0 ? void 0 : _siteContext$SOCIAL[content.link]);
+  return /*#__PURE__*/React.createElement("a", {
+    href: href,
+    target: "_blank",
+    rel: "noreferrer"
+  }, /*#__PURE__*/React.createElement("button", _extends({
+    id: id,
+    className: [baseClassName, `x-${color || type}`, isTransparent && styleNames.modifierTransparent, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style,
+    type: "button"
+  }, otherProps), icon || content.icon));
+};
+
+SocialMediaButton.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 Social Media to Target.
+   * If blank, you need to provide both an icon letter (from glyphter) and a link.
+   */
+  type: PropTypes.oneOf(['twitter', 'facebook', 'instagram', 'linkedin']),
+
+  /**
+   * The icon of the social media
+   */
+  icon: PropTypes.string,
+
+  /**
+   * The link to the social media
+   */
+  link: PropTypes.string,
+
+  /**
+   * The button color
+   */
+  color: PropTypes.string,
+
+  /**
+   * Whether the button is transparent
+   */
+  isTransparent: PropTypes.bool
+};
+SocialMediaButton.defaultProps = {// someProp:false
+};
+export default SocialMediaButton;

package/dist/es/b/SocialMediaButton/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as SocialMediaButton } from "./SocialMediaButton";