@pareto-engineering/design-system 0.0.1-alpha.9 → 0.0.8-testing-id.0

package/dist/es/b/Metrics/styles.scss

@@ -0,0 +1,91 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-mobile-row-gap: 1em;
+$default-desktop-row-gap: 3em;
+$default-border-radius: 50%;
+$default-mobile-circle-size: 8em;
+$default-desktop-circle-size: 10em;
+$default-translateY:3em;
+$default-desktop-description-width:12em;
+
+
+$default-mobile-description-width:9em;
+
+.#{bem.$base}.metrics {
+  display: grid;
+  row-gap: 1em;
+
+  .metric {
+    align-items: center;
+    display: flex;
+    row-gap: $default-mobile-row-gap;
+
+    .circle {
+      align-items: center;
+      background: var(--light-y);
+      border-radius: $default-border-radius;
+      display: flex;
+      height: $default-mobile-circle-size;
+      justify-content: center;
+      width: $default-mobile-circle-size;
+
+      .description-md {
+        color: var(--subtitle);
+        font-style: italic;
+      }
+    }
+
+    .description-sm {
+      color: var(--subtitle);
+      font-style: italic;
+    }
+  }
+
+  // mobile style
+  @include mixins.media($to:$sm-md) {
+    .metric {
+      column-gap: $default-mobile-row-gap;
+
+      .description-sm {
+        width: 50%;
+      }
+    }
+  }
+
+  // tablet style
+  @include mixins.media($from:$xs-sm,$to:$sm-md) {
+    .metric {
+      .description-sm {
+        width: 30%;
+      }
+    }
+  }
+
+  // desktop style
+  @include mixins.media($from:$sm-md) {
+    grid-template-columns: repeat(2, 1fr);
+    row-gap: 2em;
+
+    .metric {
+      .circle {
+        display: flex;
+        flex-direction: column;
+        height: $default-desktop-circle-size;
+        justify-content: center;
+        position: relative;
+        width: $default-desktop-circle-size;
+
+        .description-md {
+          left: 40%;
+          position: absolute;
+          top: 70%;
+          width: $default-desktop-description-width;
+        }
+      }
+    }
+  }
+}

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

@@ -1,32 +1,35 @@
-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); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 { useLayoutEffect, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem'; // Imports from the component folder
+import styleNames from '@pareto-engineering/bem';
 
+// Imports from the component folder
 import { PageHelmet, Section } from "./common";
-import Context from "./Context"; // import('./styles.scss')
-// Local Definitions
+import Context from "./Context";
 
+// import('./styles.scss')
+
+// Local Definitions
 const baseClassName = styleNames.base;
 const componentClassName = 'page';
+
 /** The page components structures page and blocks
  * It uses **the color provided** by `x`
  *
  */
-
-const Page = ({
-  id,
-  className: userClassName,
-  style,
-  children,
-  itemType,
-  as: Wrapper,
-  helmetProps,
-  ...otherProps
-}) => {
+const Page = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    itemType,
+    as: Wrapper,
+    helmetProps,
+    ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
@@ -50,41 +53,34 @@ const Page = ({
     itemScope: itemType && ' '
   }, otherProps), itemType && /*#__PURE__*/React.createElement("meta", {
     itemProp: "mainEntityOfPage",
-    content: helmetProps === null || helmetProps === void 0 ? void 0 : helmetProps.canonical
+    content: helmetProps?.canonical
   }), helmetProps && /*#__PURE__*/React.createElement(PageHelmet, helmetProps), children));
 };
-
 Page.propTypes = {
   /**
    * The HTML id for this element
    */
   id: PropTypes.string.isRequired,
-
   /**
    * 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 base node (html or react).
    */
   as: PropTypes.node,
-
   /**
   * The main entity schema. Refer to [Google Developers Site](https://developers.google.com/search/docs/guides/search-gallery) for info.
   */
   itemType: PropTypes.string,
-
   /**
   * The props to pass to `Page.Helmet`. Refer to the corresponding section of the docs.
   */

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
-import { useSite } from "../../../../a";
+import { useApp } from "../../../../a";
 const helmetMap = [{
   variables: ['robots'],
   render: v => /*#__PURE__*/React.createElement("meta", {
@@ -13,9 +13,12 @@ const helmetMap = [{
   })
 }, {
   variables: ['title_tag', 'title'],
-  render: v => /*#__PURE__*/React.createElement("title", {
+  render: (v, c) => /*#__PURE__*/React.createElement("title", {
     key: "title_tag"
-  }, v)
+  }, `
+          ${v}
+          ${c.SITE?.TITLE_SUFFIX && c.SITE.TITLE_SUFFIX}
+        `)
 }, {
   variables: ['meta_description'],
   render: v => /*#__PURE__*/React.createElement("meta", {
@@ -25,9 +28,9 @@ const helmetMap = [{
   })
 }, {
   variables: ['canonical'],
-  render: (v, c) => c.SITE_CANONICAL ? /*#__PURE__*/React.createElement("link", {
+  render: (v, c) => c.SITE?.CANONICAL ? /*#__PURE__*/React.createElement("link", {
     rel: "canonical",
-    href: `${c.SITE_CANONICAL}${v}`,
+    href: `${c.SITE?.CANONICAL}${v}`,
     key: "canonical"
   }) : /*#__PURE__*/React.createElement("link", {
     rel: "canonical",
@@ -88,9 +91,9 @@ const helmetMap = [{
   })
 }, {
   variables: ['og_url', 'canonical'],
-  render: (v, c) => c.SITE_CANONICAL ? /*#__PURE__*/React.createElement("meta", {
+  render: (v, c) => c.SITE?.CANONICAL ? /*#__PURE__*/React.createElement("meta", {
     property: "og:url",
-    content: `${c.SITE_CANONICAL}/${v}`,
+    content: `${c.SITE?.CANONICAL}${v}`,
     key: "og_url"
   }) : /*#__PURE__*/React.createElement("meta", {
     property: "og:url",
@@ -98,23 +101,24 @@ const helmetMap = [{
     key: "og_url"
   })
 }];
-
-const PageHelmet = ({ ...props
-}) => {
+const PageHelmet = _ref => {
+  let {
+    ...props
+  } = _ref;
   // 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
-  }) => {
+  const context = useApp();
+  const HelmetContent = useMemo(() => helmetMap.reduce( /* eslint-disable no-unused-vars -- TODO add test or ssr mode */
+  (a, _ref2) => {
+    let {
+      variables,
+      render,
+      test
+    } = _ref2;
     /* eslint-enable no-unused-vars */
     let current;
     let content = '';
-    /* eslint-disable no-restricted-syntax -- we need to be able to break the loop */
 
+    /* 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]];
@@ -122,34 +126,31 @@ const PageHelmet = ({ ...props
       }
     }
     /* 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)
-
+      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]),

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

@@ -1,21 +1,29 @@
-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); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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
 
+// Local Definitions
+import { Shapes, BackgroundGradient } from "../../../../a";
+import usePage from "../../usePage";
 const baseClassName = styleNames.base;
 const componentClassName = 'section';
-
-const Section = ({
-  id: userId,
-  className: userClassName,
-  style,
-  children,
-  ...otherProps
-}) => {
+const Section = _ref => {
+  let {
+    id: userId,
+    className: userClassName,
+    style,
+    children,
+    backgroundShape,
+    backgroundGradient,
+    backgroundGradientHeight,
+    backgroundVerticalAlign,
+    backgroundHorizontalAlign,
+    backgroundHeight,
+    backgroundOverflow,
+    ...otherProps
+  } = _ref;
   const {
     id: pageId
   } = usePage();
@@ -24,30 +32,63 @@ const Section = ({
     id: sectionId,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
-  }, otherProps), children);
+  }, otherProps), children, backgroundShape && /*#__PURE__*/React.createElement(Shapes, {
+    verticalAlign: backgroundVerticalAlign,
+    horizontalAlign: backgroundHorizontalAlign,
+    overflow: backgroundOverflow,
+    height: backgroundHeight,
+    shape: backgroundShape
+  }), backgroundGradient && /*#__PURE__*/React.createElement(BackgroundGradient, {
+    height: backgroundGradientHeight
+  }));
 };
-
 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
+  children: PropTypes.node,
+  /**
+   * The background shape to use for this section.
+   */
+  backgroundShape: PropTypes.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles']),
+  /**
+   * The background vertical alingment to use for if the background shape is set.
+   */
+  backgroundVerticalAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
+  /**
+   * The background horizontal alingment to use for if the background shape is set.
+   */
+  backgroundHorizontalAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
+  /**
+   * The background height to use for if the background shape is set.
+   */
+  backgroundHeight: PropTypes.string,
+  /**
+   * The background overflow to use for if the background shape is set.
+   */
+  backgroundOverflow: PropTypes.oneOf(['visible', 'hidden', 'scroll']),
+  /**
+   * The background gradient to use for if the background gradient is set.
+   */
+  backgroundGradient: PropTypes.bool,
+  /**
+   * The background gradient height to use for if the background gradient is set.
+   */
+  backgroundGradientHeight: PropTypes.string
 };
-Section.defaultProps = {// someProp:false
+Section.defaultProps = {
+  // someProp:false
 };
 export default Section;

package/dist/es/b/Page/styles.scss

@@ -2,9 +2,15 @@
 
 @use "@pareto-engineering/bem";
 
-/*
+
 .#{bem.$base}.page{
+    .#{bem.$base}.section {
+        position: relative;
 
-} */
+        > *:not(:last-child) {
+            z-index: 1;
+        }
+    }
+}
 
 

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

@@ -1,36 +1,39 @@
 /* @pareto-engineering/generator-front 0.2.7 */
-import React, { useState } from 'react';
-import { useLayoutEffect } from 'react';
-import PropTypes from 'prop-types'; // Package-level Imports
+import * as React from 'react';
+import { useState, useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
 
-import styleNames from '@pareto-engineering/bem'; // Component-level imports
+// Package-level Imports
+import styleNames from '@pareto-engineering/bem';
+
+// Component-level imports
 // import('./styles.scss')
-// Helper Definition
 
+// 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 // ...otherProps
-
-}) => {
+const QuestionDropdown = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    question,
+    children,
+    isFAQSchema,
+    defaultIsOpen
+    // ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
-  const [isOpen, setIsOpen] = useState(false);
-
+  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(' '),
@@ -38,13 +41,14 @@ const QuestionDropdown = ({
     itemScope: isFAQSchema // if isFAQSchema is false, should be undefined
     ,
     itemProp: isFAQSchema && 'mainEntity',
-    itemType: isFAQSchema && 'http://schema.org/Question' // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
+    itemType: isFAQSchema && 'http://schema.org/Question'
+    // {...otherProps}
+  }, /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    role: "button",
     className: "accordion",
     onClick: toggleOpen,
-    isGhost: true
+    onKeyDown: toggleOpen
   }, /*#__PURE__*/React.createElement("span", {
     className: "caret"
   }, "^"), /*#__PURE__*/React.createElement("div", {
@@ -59,38 +63,37 @@ const QuestionDropdown = ({
     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
+  isFAQSchema: PropTypes.bool,
+  /**
+   * Whether the question drop down should be opened by default
+   */
+  defaultIsOpen: PropTypes.bool
 };
-QuestionDropdown.defaultProps = {// someProp:false
+QuestionDropdown.defaultProps = {
+  defaultIsOpen: false
 };
 export default QuestionDropdown;

package/dist/es/b/QuestionDropdown/styles.scss

@@ -4,7 +4,7 @@
 
 //make all colors as vars
 
-$border-color: var(--dark-background);
+$border-color: var(--dark-background1);
 $border-width: 2px;
 $button-background-color: transparent;
 $button-background-color-hover: var(--light-accent3);
@@ -19,7 +19,7 @@ $transition-time-answer: 1.5s;
 .#{bem.$base}.question-dropdown {
   width: 100%;
 
-  > button {
+  > .accordion {
     align-items: center;
     background-color: $button-background-color;
     border: none;
@@ -72,7 +72,7 @@ $transition-time-answer: 1.5s;
   &.open {
     background-color: $button-background-color-hover;
 
-    > button {
+    > .accordion {
       .caret {
         font-size: $caret-font-size;
         transform: scale(1.2, .6) rotate(360deg);

package/dist/es/b/Segment/Segment.js

@@ -1,61 +1,62 @@
 /* @pareto-engineering/generator-front 0.2.4 */
 import * as React from 'react';
-import PropTypes from 'prop-types'; // Package-level Imports
+import PropTypes from 'prop-types';
 
-import styleNames from '@pareto-engineering/bem'; // Component-level imports
+// Package-level Imports
+import styleNames from '@pareto-engineering/bem';
 
-import("./styles.scss"); // Helper Definition
+// 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));
-
+const Segment = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    title,
+    footer
+
+    // ...otherProps
+  } = _ref;
+  return /*#__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
+Segment.defaultProps = {
+  // someProp:false
 };
 export default Segment;