@pareto-engineering/design-system 2.0.0-alpha.8 → 3.0.0-alpha.18

package/dist/es/b/Logo/Logo.js

@@ -2,55 +2,59 @@
 import * as React from 'react';
 import { useMemo, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem';
-import { SVG } from "../../a"; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+import { SVG } from "../../a";
+
+// Local Definitions
 
 const baseClassName = styleNames.base;
 const componentClassName = 'logo';
-const defaultTargets = [{
-  id: 'logo__p',
-  target: 'logo__p'
-}, {
-  id: 'logo__areto',
-  target: 'logo__areto'
+const defaultTargetssquare = [{
+  id: 'logo',
+  target: 'logo'
+}];
+const contentMapSquare = {
+  default: {
+    sprite: '/logo_square.svg',
+    viewBox: '0 0 39 39',
+    targets: defaultTargetssquare
+  }
+};
+const defaultTargetsWithName = [{
+  id: 'logo_squares',
+  target: 'logo_squares'
 }, {
-  id: 'logo__t',
-  target: 'logo__t'
+  id: 'logo_pareto',
+  target: 'logo_pareto'
 }];
-const contentMap = {
+const contentMapWithName = {
   default: {
-    sprite: '/logo_parts.svg',
-    viewBox: '0 0 688 250',
-    targets: defaultTargets
-  },
-  beta: {
-    sprite: '/logo_parts_beta.svg',
-    viewBox: '0 0 1000 300',
-    targets: [...defaultTargets, {
-      id: 'logo__beta',
-      target: 'logo__beta'
-    }]
+    sprite: '/logo.svg',
+    viewBox: '0 0 156 30',
+    targets: defaultTargetsWithName
   }
 };
+
 /**
  * This is the component description.
  */
-
-const Logo = ({
-  id,
-  className: userClassName,
-  style,
-  color,
-  animated,
-  loop,
-  height,
-  width,
-  variant // ...otherProps
-
-}) => {
+const Logo = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    color,
+    height,
+    width,
+    variant,
+    strokeColor,
+    square
+    // ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
+  const contentMap = square ? contentMapSquare : contentMapWithName;
   const svgConfig = useMemo(() => contentMap[variant], [variant]);
   return /*#__PURE__*/React.createElement(SVG, {
     height: height,
@@ -59,10 +63,9 @@ const Logo = ({
     targets: svgConfig.targets,
     sprite: svgConfig.sprite,
     id: id,
-    className: [baseClassName, componentClassName, `x-${color}`, userClassName, loop && 'loop'].filter(e => e).join(' '),
-    style: style,
-    animated: animated // {...otherProps}
-
+    className: [baseClassName, componentClassName, `x-${color}`, `y-${strokeColor}`, userClassName].filter(e => e).join(' '),
+    style: style
+    // {...otherProps}
   });
 };
 
@@ -71,52 +74,44 @@ Logo.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 color of the logo
    */
   color: PropTypes.string,
-
-  /**
-   *  Whether the logo is animated
-   */
-  animated: PropTypes.bool,
-
-  /**
-   *  Whether the animation loops
-   */
-  loop: PropTypes.bool,
-
   /**
    * The height of the element
    */
   height: PropTypes.string,
-
   /**
    * The width of the element
    */
   width: PropTypes.string,
-
   /**
    * The variant to display. At the moment only `beta` is available.
    */
-  variant: PropTypes.string
+  variant: PropTypes.string,
+  /**
+   * The color of the svg stroke
+   */
+  strokeColor: PropTypes.string,
+  /**
+   * Whether the logo should have a name.
+   */
+  square: PropTypes.bool
 };
 Logo.defaultProps = {
-  color: 'primary',
-  animated: false,
-  loop: false,
-  height: '4em',
-  variant: 'default'
+  color: 'paragraph',
+  height: '2em',
+  variant: 'default',
+  strokeColor: 'transparent',
+  square: false
 };
 export default Logo;

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

@@ -1,147 +1,9 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
-/* stylelint-disable selector-id-pattern, selector-max-id -- because of the custom svg */
-
 @use "@pareto-engineering/bem";
 
-// Main animation - finishes after the drawing
-
-@keyframes draw-logo-p {
-  0% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  20%,
-  100% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-}
-@keyframes draw-logo-areto {
-  0%,
-  20% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  90%,
-  100% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-}
-@keyframes draw-logo-t {
-  0%,
-  90% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  100% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-}
-
-// Alt animation - looping
-
-@keyframes draw-alt-logo-p {
-  0% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  10%,
-  50% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-
-  60%,
-  100% {
-    stroke-dashoffset: var(--svg-final-stroke-dashoffset, 1000);
-  }
-}
-@keyframes draw-alt-logo-areto {
-  0%,
-  10% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  45%,
-  60% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-
-  95%,
-  100% {
-    stroke-dashoffset: var(--svg-final-stroke-dashoffset, 1000);
-  }
-}
-@keyframes draw-alt-logo-t {
-  0%,
-  45% {
-    stroke-dashoffset: var(--svg-origin-stroke-dashoffset, 1000);
-  }
-
-  50%,
-  95% {
-    stroke-dashoffset: var(--svg-target-stroke-dashoffset, 0);
-  }
-
-  100% {
-    stroke-dashoffset: var(--svg-final-stroke-dashoffset, 1000);
-  }
-}
-
 .#{bem.$base}.logo {
-  &.animated.animated {
-    --svg-animation-repeats: 1;
-    --svg-animation-time: 3.5s;
-
-    &:hover,
-    &:focus {
-      //--path-animation: dash-a 1s linear 0s 1 forwards;
-    }
-
-    use#logo__p {
-      //--svg-animation-delay: 0;
-      --svg-dasharray: 1000;
-      --svg-origin-stroke-dashoffset: -1000;
-      //--svg-target-stroke-dashoffset: 0;
-      --svg-final-stroke-dashoffset: 1000;
-      animation-name: draw-logo-p;
-    }
-
-    use#logo__areto {
-      --svg-dasharray: 2000;
-      --svg-origin-stroke-dashoffset: 2000;
-      //--svg-target-stroke-dashoffset: 0;
-      --svg-final-stroke-dashoffset: -2000;
-      animation-name: draw-logo-areto;
-    }
-
-    use#logo__t {
-      --svg-dasharray: 200;
-      --svg-origin-stroke-dashoffset: 200;
-      //--svg-target-stroke-dashoffset: 0;
-      --svg-final-stroke-dashoffset: -200;
-      animation-name: draw-logo-t;
-    }
-
-    &.loop.loop {
-      --svg-animation-time: 6s;
-      --svg-animation-repeats: infinite;
-
-      use#logo__p {
-        --svg-final-stroke-dashoffset: 1000;
-        animation-name: draw-alt-logo-p;
-      }
-
-      use#logo__areto {
-        --svg-final-stroke-dashoffset: -2000;
-        animation-name: draw-alt-logo-areto;
-      }
 
-      use#logo__t {
-        --svg-final-stroke-dashoffset: -200;
-        animation-name: draw-alt-logo-t;
-      }
-    }
-  }
 }
 
 

package/dist/es/b/Metrics/Metrics.js

@@ -3,29 +3,32 @@ import * as React from 'react';
 import { useLayoutEffect } from 'react';
 import { AnimatedCounter } from "../..";
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem'; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
 
 const baseClassName = styleNames.base;
 const componentClassName = 'metrics';
+
 /**
  * This is the component description.
  */
-
-const Metrics = ({
-  id,
-  className: userClassName,
-  style,
-  items // ...otherProps
-
-}) => {
+const Metrics = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    items
+    // ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
+    style: style
+    // {...otherProps}
   }, items.map(counter => /*#__PURE__*/React.createElement("div", {
     className: "metric"
   }, /*#__PURE__*/React.createElement("div", {
@@ -42,28 +45,25 @@ const Metrics = ({
     className: "description-sm md-h lg-h sm-s-2"
   }, counter.description))));
 };
-
 Metrics.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 array of details
    */
   items: PropTypes.node
 };
+
 /*
 Metrics.defaultProps = {
 }

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

@@ -1,8 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
 
 $default-mobile-row-gap: 1em;
 $default-desktop-row-gap: 3em;
@@ -26,7 +26,7 @@ $default-mobile-description-width:9em;
 
     .circle {
       align-items: center;
-      background: var(--light-y);
+      background: var(--soft-y);
       border-radius: $default-border-radius;
       display: flex;
       height: $default-mobile-circle-size;

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/exports';
 
+// 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,16 +13,12 @@ const helmetMap = [{
   })
 }, {
   variables: ['title_tag', 'title'],
-  render: (v, c) => {
-    var _c$SITE;
-
-    return /*#__PURE__*/React.createElement("title", {
-      key: "title_tag"
-    }, `
+  render: (v, c) => /*#__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}
-        `);
-  }
+          ${c.SITE?.TITLE_SUFFIX && c.SITE.TITLE_SUFFIX}
+        `)
 }, {
   variables: ['meta_description'],
   render: v => /*#__PURE__*/React.createElement("meta", {
@@ -32,19 +28,15 @@ const helmetMap = [{
   })
 }, {
   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"
-    });
-  }
+  render: (v, c) => c.SITE?.CANONICAL ? /*#__PURE__*/React.createElement("link", {
+    rel: "canonical",
+    href: `${c.SITE?.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", {
@@ -99,37 +91,34 @@ const helmetMap = [{
   })
 }, {
   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"
-    });
-  }
+  render: (v, c) => c.SITE?.CANONICAL ? /*#__PURE__*/React.createElement("meta", {
+    property: "og:url",
+    content: `${c.SITE?.CANONICAL}${v}`,
+    key: "og_url"
+  }) : /*#__PURE__*/React.createElement("meta", {
+    property: "og:url",
+    content: v,
+    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]];
@@ -137,28 +126,24 @@ 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,