@pareto-engineering/design-system 3.0.0-alpha.29 → 4.0.0-alpha.13

package/dist/es/a/People/common/Person/Person.js

@@ -11,33 +11,30 @@ const componentClassName = 'person';
 /**
  * This is the component description.
  */
-const Person = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    name,
-    image,
-    role,
-    color
-    // ...otherProps
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement("img", {
-    className: "image v50 mr-v",
-    src: image,
-    alt: `${name}, ${role}`
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "details"
-  }, /*#__PURE__*/React.createElement("p", {
-    className: "name"
-  }, name), /*#__PURE__*/React.createElement("p", {
-    className: "role"
-  }, role)));
-};
+const Person = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  image,
+  role,
+  color
+  // ...otherProps
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
+  style: style
+}, /*#__PURE__*/React.createElement("img", {
+  className: "image v50 mr-v",
+  src: image,
+  alt: `${name}, ${role}`
+}), /*#__PURE__*/React.createElement("div", {
+  className: "details"
+}, /*#__PURE__*/React.createElement("p", {
+  className: "name"
+}, name), /*#__PURE__*/React.createElement("p", {
+  className: "role"
+}, role)));
 Person.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/a/People/styles.scss

@@ -15,8 +15,8 @@ $default-image-padding: 1.5rem;
 
 .#{bem.$base}.people {
   display: grid;
+  gap: $default-grid-gap;
   grid-template-columns: repeat(auto-fill, minmax(var(--column-width), 1fr));
-  gap:$default-grid-gap;
 
 
   .person {
@@ -29,19 +29,19 @@ $default-image-padding: 1.5rem;
     .image {
       border-radius: $default-border-radius;
       height: var(--image-size);
-      width: var(--image-size);
       margin-right: $default-image-padding;
+      width: var(--image-size);
     }
 
     .details {
       align-items: flex-start;
+      color: var(--grey);
       display: flex;
       flex-direction: column;
-      color: var(--grey);
 
       .name {
-        margin-bottom: .1em;
         color: var(--grey);
+        margin-bottom: .1em;
       }
 
       .role {

package/dist/es/a/Popover/Popover.js

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useRef, useLayoutEffect } from 'react';
+import { useRef, useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -12,22 +12,21 @@ const componentClassName = 'popover';
 /**
  * This is the component description.
  */
-const Popover = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    color,
-    children,
-    isOpen,
-    parentRef,
-    preferredPrimaryOrder,
-    preferredSecondaryOrder,
-    offsetXPx,
-    offsetYPx
-    // ...otherProps
-  } = _ref;
-  useLayoutEffect(() => {
+const Popover = ({
+  id,
+  className: userClassName,
+  style,
+  color,
+  children,
+  isOpen,
+  parentRef,
+  preferredPrimaryOrder,
+  preferredSecondaryOrder,
+  offsetXPx,
+  offsetYPx
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   const popoverRef = useRef(null);
@@ -95,7 +94,7 @@ Popover.propTypes = {
    * The reference to the parent element
    */
   parentRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
+    current: PropTypes.node
   })])
 };
 Popover.defaultProps = {

package/dist/es/a/Popover/styles.scss

@@ -1,13 +1,14 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+
 @use "@pareto-engineering/bem";
 
 $default-border: var(--theme-border-style) var(--metadata);
 
 .#{bem.$base}.popover {
-  position: absolute;
-  z-index: 1;
   background-color: var(--x);
   border: $default-border;
+  position: absolute;
+  z-index: 1;
 
   &:not(.open) {
     display: none;
@@ -30,4 +31,4 @@ $default-border: var(--theme-border-style) var(--metadata);
     bottom: 100%;
     top: auto;
   }
-}
+}

package/dist/es/a/ProgressBar/ProgressBar.js

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useLayoutEffect } from 'react';
+import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -12,18 +12,17 @@ const componentClassName = 'progress-bar';
 /**
  * This is the component description. This takes the color x = indigo.
  */
-const ProgressBar = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    attached,
-    color,
-    progress,
-    height
-    // ...otherProps
-  } = _ref;
-  useLayoutEffect(() => {
+const ProgressBar = ({
+  id,
+  className: userClassName,
+  style,
+  attached,
+  color,
+  progress,
+  height
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/dist/es/a/Quote/Quote.js

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useLayoutEffect } from 'react';
+import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -12,18 +12,17 @@ const componentClassName = 'quote';
 /**
  * This is the component description.
  */
-const Quote = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    children,
-    source,
-    author,
-    color
-    // ...otherProps
-  } = _ref;
-  useLayoutEffect(() => {
+const Quote = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  source,
+  author,
+  color
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("figure", {

package/dist/es/a/Quote/styles.scss

@@ -1,53 +1,56 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+
 @use "@pareto-engineering/bem";
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
 
-.#{bem.$base}.quote{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+.#{bem.$base}.quote {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+
+  .blockquote {
+    margin: 0;
+    padding: 0;
+  }
+
+  .figcaption {
+    padding: 0;
+  }
 
+  @include mixins.media($from:$sm-md) {
     .blockquote {
-        margin: 0;
-        padding: 0;
+      .quotation {
+        display: inline;
+      }
+
+      &::before {
+        color: transparent;
+        content: "\201C";
+        font-size: 4em;
+        line-height: 0;
+        opacity: inherit;
+        position: static;
+        -webkit-text-stroke: 1px var(--x);
+        vertical-align: -.4em;
+      }
+
+      &::after {
+        color: transparent;
+        content: "\201D";
+        font-size: 4em;
+        line-height: 0;
+        margin-left: -.1em;
+        -webkit-text-stroke: 1px var(--x);
+        vertical-align: -.6em;
+      }
     }
 
     .figcaption {
-        padding: 0;
-    }
-
-    @include mixins.media($from:$sm-md) {
-        .blockquote {
-            .quotation {
-                display: inline;
-            }
-            &:before {
-                color: transparent;
-                content: '\201C';
-                font-size: 4em;
-                line-height: 0;
-                position: static;
-                vertical-align: -0.4em;
-                -webkit-text-stroke: 1px var(--x);
-                opacity: inherit;
-            }
-            &:after {
-                color: transparent;
-                content: '\201D';
-                font-size: 4em;
-                line-height: 0;
-                vertical-align: -0.6em;
-                margin-left: -.1em;
-                -webkit-text-stroke: 1px var(--x);
-            }
-        }
-        .figcaption {
-            margin: 0;
-        }
+      margin: 0;
     }
+  }
 }
 
 
-

package/dist/es/a/SVG/SVG.js

@@ -1,7 +1,7 @@
 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.3 */
 import * as React from 'react';
-import { useLayoutEffect, useMemo } from 'react';
+import { useInsertionEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { UseSVG } from "./common";
@@ -10,25 +10,24 @@ import { UseSVG } from "./common";
 
 const baseClassName = styleNames.base;
 const componentClassName = 'svg';
-const SVG = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    width,
-    height,
-    viewBox,
-    preserveAspectRatio,
-    useClassName,
-    sprite,
-    target,
-    targets,
-    source,
-    strokeWidth,
-    animated,
-    ...otherProps
-  } = _ref;
-  useLayoutEffect(() => {
+const SVG = ({
+  id,
+  className: userClassName,
+  style,
+  width,
+  height,
+  viewBox,
+  preserveAspectRatio,
+  useClassName,
+  sprite,
+  target,
+  targets,
+  source,
+  strokeWidth,
+  animated,
+  ...otherProps
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   });
   const useSVGProps = useMemo(() => ({

package/dist/es/a/SVG/common/UseSVG/UseSVG.js

@@ -6,28 +6,25 @@ import PropTypes from 'prop-types';
  * This component is used internally by the `SVG` component
  * to leverage the `use` tag and read svg sprites.
  */
-const UseSVG = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    sprite,
-    target,
-    source,
-    strokeWidth
-  } = _ref;
-  return /*#__PURE__*/React.createElement("use", {
-    className: [userClassName].filter(e => e).join(' '),
-    href: source || sprite + (target ? `#${target}` : ''),
-    style: strokeWidth ? {
-      ...style,
-      '--sw': Number(strokeWidth)
-    } : {
-      style
-    },
-    id: id
-  });
-};
+const UseSVG = ({
+  id,
+  className: userClassName,
+  style,
+  sprite,
+  target,
+  source,
+  strokeWidth
+}) => /*#__PURE__*/React.createElement("use", {
+  className: [userClassName].filter(e => e).join(' '),
+  href: source || sprite + (target ? `#${target}` : ''),
+  style: strokeWidth ? {
+    ...style,
+    '--sw': Number(strokeWidth)
+  } : {
+    style
+  },
+  id: id
+});
 UseSVG.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/a/SnapScroller/SnapScroller.js

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useLayoutEffect } from 'react';
+import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -12,16 +12,15 @@ const componentClassName = 'snap-scroller';
 /**
  * This is the component description.
  */
-const SnapScroller = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    children,
-    noScrollOnDesktop
-    // ...otherProps
-  } = _ref;
-  useLayoutEffect(() => {
+const SnapScroller = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  noScrollOnDesktop
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/dist/es/a/SnapScroller/styles.scss

@@ -1,38 +1,48 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable selector-max-universal -- exception */
 
 @use "@pareto-engineering/bem";
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
-$default-spacing:var(--spacing, var(--u));
+$default-spacing: var(--gap, 1em);
 
 .#{bem.$base}.snap-scroller {
   display: flex;
-  -ms-overflow-style: none; /* for Internet Explorer, Edge */
+  gap: $default-spacing;
+  -ms-overflow-style: none;
   overflow-x: auto;
-  scroll-padding: calc(#{$default-spacing} *2);
+  scroll-padding: calc($default-spacing * 2);
   scroll-snap-type: x mandatory;
   scrollbar-width: none;
 
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  >* {
+    display: inline-block;
+    scroll-snap-align: start;
 
-  > * {
     &:first-child {
       margin-left: $default-spacing;
     }
-    display: inline-block;
-    margin-right: $default-spacing;
-    scroll-snap-align: start;
   }
 
-
-  @include mixins.media($from:$sm-md) {
+  @include mixins.media($from: $sm-md) {
     &.desktop-no-scroll {
       overflow: auto;
-      -ms-overflow-style: unset; /* for Internet Explorer, Edge */
+      -ms-overflow-style: unset;
       scroll-snap-type: none;
       scrollbar-width: unset;
+
+      >* {
+        min-width: unset;
+
+        &:first-child {
+          margin-left: unset;
+        }
+      }
     }
   }
 }
-
-

package/dist/es/a/Spinner/Spinner.js

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useLayoutEffect } from 'react';
+import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
@@ -12,15 +12,14 @@ const componentClassName = 'spinner';
 /**
  * This is the component description.
  */
-const Spinner = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    color
-    // ...otherProps
-  } = _ref;
-  useLayoutEffect(() => {
+const Spinner = ({
+  id,
+  className: userClassName,
+  style,
+  color
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {

package/dist/es/a/TextSteps/TextSteps.js

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'steps';
+
+/**
+ * This is the component description.
+ */
+const Steps = ({
+  id,
+  className: userClassName,
+  style,
+  items,
+  title
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, 'grid'].filter(e => e).join(' '),
+    style: style
+  }, title && /*#__PURE__*/React.createElement("p", {
+    className: "title h4"
+  }, title), items.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: " number h3 start-1 span-2 md-start-1 md-span-2"
+  }, /*#__PURE__*/React.createElement("p", null, i + 1)), /*#__PURE__*/React.createElement("div", {
+    className: " description"
+  }, /*#__PURE__*/React.createElement("p", null, item)))));
+};
+Steps.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 steps to iterate
+   */
+  items: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.node
+  })).isRequired,
+  /**
+   * The title to pass to the component
+   */
+  title: PropTypes.string
+};
+export default Steps;

package/dist/es/a/TextSteps/index.js

@@ -0,0 +1 @@
+export { default as TextSteps } from "./TextSteps";

package/dist/es/a/TextSteps/styles.scss

@@ -0,0 +1,29 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+$default-padding: 1em;
+
+.#{bem.$base}.steps {
+  grid-column: 1 / -1;
+  grid-template-columns: repeat(var(--columns), 1fr);
+  padding: $default-padding 0;
+
+  .description {
+    grid-column: 2 / -1;
+
+    > p {
+      color: var(--metadata);
+    }
+  }
+
+  .number {
+    grid-column: 1 / span 1;
+  }
+
+  .title {
+    grid-column: 1 / -1;
+  }
+}