@pareto-engineering/design-system 4.0.0-alpha.9 → 4.0.0

package/dist/es/a/IconList/IconList.js

@@ -1,10 +1,10 @@
 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.12 */
 import * as React from 'react';
-import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import { Item } from "./common";
+import "./styles.scss";
 
 // Local Definitions
 
@@ -22,20 +22,15 @@ const IconList = ({
   icon,
   iconHover,
   ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("ul", _extends({
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: {
-      ...style,
-      '--list-icon': icon && `"${icon}"`,
-      '--list-icon-hover': iconHover && `"${iconHover}"`
-    }
-  }, otherProps), children);
-};
+}) => /*#__PURE__*/React.createElement("ul", _extends({
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: {
+    ...style,
+    '--list-icon': icon && `"${icon}"`,
+    '--list-icon-hover': iconHover && `"${iconHover}"`
+  }
+}, otherProps), children);
 IconList.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/a/Label/Label.js

@@ -1,9 +1,9 @@
 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.12 */
 import * as React from 'react';
-import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
 
 // Local Definitions
 
@@ -23,16 +23,11 @@ const Label = ({
   isGhost,
   as: Wrapper,
   ...props
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement(Wrapper, _extends({
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`, isCompact && styleNames.modifierCompact, isGhost && styleNames.modifierGhost].filter(e => e).join(' '),
-    style: style
-  }, props), children);
-};
+}) => /*#__PURE__*/React.createElement(Wrapper, _extends({
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, `x-${color}`, isCompact && styleNames.modifierCompact, isGhost && styleNames.modifierGhost].filter(e => e).join(' '),
+  style: style
+}, props), children);
 Label.propTypes = {
   /**
    * The HTML id for this element

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

@@ -2,11 +2,11 @@
 
 @use "@pareto-engineering/bem";
 
-$default-padding-bottom: .4em;
-$default-padding-side: .7em;
-$default-padding-top: .5em;
+$default-padding-bottom: .6em;
+$default-padding-side: 1.75em;
+$default-padding-top: .75em;
 
-$compact-padding: $default-padding-top*.5 $default-padding-side*.5 $default-padding-bottom*.5;
+$compact-padding: $default-padding-top*.4 $default-padding-side*.4 $default-padding-bottom*.4;
 $default-padding: $default-padding-top $default-padding-side $default-padding-bottom;
 
 $default-color: primary;
@@ -20,9 +20,9 @@ $default-font-size: calc(1em * var(--s-1));
   color: var(--on-x, var(--on-#{$default-color}));
   display: inline-flex;
   font-size: $default-font-size;
+  gap: calc(var(--gap) / 2);
   padding: $default-padding;
   white-space: nowrap;
-
   &.#{bem.$modifier-compact} {
     padding: $compact-padding;
   }

package/dist/es/a/LoadingCircle/LoadingCircle.js

@@ -1,8 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
 
 // Local Definitions
 
@@ -21,42 +21,37 @@ const LoadingCircle = ({
   animationDuration,
   style
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: {
-      '--height-width': heightWidth,
-      '--stroke-width': strokeWidth,
-      ...style
-    }
-    // {...otherProps}
-  }, /*#__PURE__*/React.createElement("svg", {
-    viewBox: "25 25 50 50",
-    className: "svg-circle",
-    id: id,
-    x: "0px",
-    y: "0px",
-    xmlSpace: "preserve",
-    xmlns: "http://www.w3.org/2000/svg",
-    version: "1.1",
-    preserveAspectRatio: "xMinYMin meet",
-    style: {
-      '--animation-duration': `${animationDuration}s`
-    }
-  }, /*#__PURE__*/React.createElement("circle", {
-    className: "path",
-    cx: "50",
-    cy: "50",
-    r: "20",
-    fill: "none",
-    strokeLinecap: strokeLinecap,
-    strokeMiterlimit: "10"
-  })));
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: {
+    '--height-width': heightWidth,
+    '--stroke-width': strokeWidth,
+    ...style
+  }
+  // {...otherProps}
+}, /*#__PURE__*/React.createElement("svg", {
+  viewBox: "25 25 50 50",
+  className: "svg-circle",
+  id: id,
+  x: "0px",
+  y: "0px",
+  xmlSpace: "preserve",
+  xmlns: "http://www.w3.org/2000/svg",
+  version: "1.1",
+  preserveAspectRatio: "xMinYMin meet",
+  style: {
+    '--animation-duration': `${animationDuration}s`
+  }
+}, /*#__PURE__*/React.createElement("circle", {
+  className: "path",
+  cx: "50",
+  cy: "50",
+  r: "20",
+  fill: "none",
+  strokeLinecap: strokeLinecap,
+  strokeMiterlimit: "10"
+})));
 LoadingCircle.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/a/MetaCard/MetaCard.js

@@ -1,8 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
 
 // Local Definitions
 
@@ -17,17 +17,13 @@ const MetaCard = ({
   className: userClassName,
   style,
   children,
-  hasBackgroundBlur
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, hasBackgroundBlur && styleNames.modifierBlur].filter(e => e).join(' '),
-    style: style
-  }, children);
-};
+  hasBackgroundBlur,
+  spaced
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, hasBackgroundBlur && styleNames.modifierBlur, spaced && styleNames.modifierSpaced].filter(e => e).join(' '),
+  style: style
+}, children);
 MetaCard.propTypes = {
   /**
      * The HTML id for this element
@@ -44,7 +40,11 @@ MetaCard.propTypes = {
   /**
    * Whether the card has a background blur
    * */
-  hasBackgroundBlur: PropTypes.bool
+  hasBackgroundBlur: PropTypes.bool,
+  /**
+   * Whether to apply a gap to the top and bottom
+   * */
+  spaced: PropTypes.bool
 };
 MetaCard.defaultProps = {
   // someProp:false

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

@@ -1,9 +1,11 @@
 /* @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-padding: var(--spacing-2) 0;
 $default-border-radius: 2.25rem;
 $default-border-color: var(--hard-background-cards);
 $default-background: var(--background-cards-50);
@@ -14,6 +16,7 @@ $default-blur: var(--theme-default-blur);
   background: $default-background;
   border: 1px solid $default-border-color;
   border-radius: $default-border-radius;
+  padding: $default-padding;
 
   &.#{bem.$modifier-blur} {
     backdrop-filter: $default-blur;
@@ -23,6 +26,20 @@ $default-blur: var(--theme-default-blur);
     // Temporary solution
     margin-left: calc((var(--gap)) * -1);
     margin-right: calc((var(--gap)) * -1);
-    padding: var(--gap);
+    padding: 0 var(--gap);
+
+    &.#{bem.$modifier-spaced} {
+      padding: var(--gap);
+
+      > * {
+        &:first-child {
+          margin-top: 0;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
   }
 }

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

@@ -1,12 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
 // Local Definitions
 
 import { Person } from "./common";
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'people';
 
@@ -21,21 +21,16 @@ const People = ({
   children,
   columnWidth
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, 'u1'].filter(e => e).join(' '),
-    style: {
-      ...style,
-      '--image-size': imageSize,
-      '--column-width': columnWidth
-    }
-    // {...otherProps}
-  }, children);
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, 'u1'].filter(e => e).join(' '),
+  style: {
+    ...style,
+    '--image-size': imageSize,
+    '--column-width': columnWidth
+  }
+  // {...otherProps}
+}, children);
 People.propTypes = {
   /**
    * The HTML id for this element

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

@@ -20,21 +20,28 @@ const Person = ({
   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)));
+}) => {
+  const handleImageSrcError = e => {
+    e.target.onerror = null;
+    e.target.src = '/default-avatar.svg';
+  };
+  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 || '/default-avatar.svg',
+    alt: `${name}, ${role}`,
+    onError: handleImageSrcError
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "details"
+  }, name && /*#__PURE__*/React.createElement("p", {
+    className: "name"
+  }, name), role && /*#__PURE__*/React.createElement("p", {
+    className: "role"
+  }, role)));
+};
 Person.propTypes = {
   /**
    * The HTML id for this element
@@ -55,17 +62,17 @@ Person.propTypes = {
   /**
    *  The person's name
    */
-  name: PropTypes.string.isRequired,
+  name: PropTypes.string,
   /**
    *  The person's role
    */
-  role: PropTypes.string.isRequired,
+  role: PropTypes.string,
   /**
    * The base color of the person's component
    */
   color: PropTypes.string
 };
 Person.defaultProps = {
-  color: 'background2'
+  color: 'background-far'
 };
 export default Person;

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

@@ -11,7 +11,9 @@ $default-padding:var(--u);
 $default-horizontal-margin: .5em;
 
 $default-grid-gap: 1em;
-$default-image-padding: 1.5rem;
+$default-margin: 1em;
+$default-image-margin: var(--default-image-margin, #{$default-margin});
+$default-color: var(--default-color, var(--paragraph));
 
 .#{bem.$base}.people {
   display: grid;
@@ -29,18 +31,22 @@ $default-image-padding: 1.5rem;
     .image {
       border-radius: $default-border-radius;
       height: var(--image-size);
-      margin-right: $default-image-padding;
+      margin-right: $default-image-margin;
       width: var(--image-size);
     }
 
     .details {
       align-items: flex-start;
-      color: var(--grey);
+      color: $default-color;
       display: flex;
       flex-direction: column;
 
+      p:only-child {
+        margin: 0;
+      }
+
       .name {
-        color: var(--grey);
+        color: $default-color;
         margin-bottom: .1em;
       }
 

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

@@ -1,11 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useRef, useInsertionEffect } from 'react';
+import { useRef } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 
 // Local Definitions
 import { useDynamicPosition } from "../../utils";
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'popover';
 
@@ -26,9 +27,6 @@ const Popover = ({
   offsetYPx
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
   const popoverRef = useRef(null);
   const {
     primaryPosition,
@@ -98,7 +96,7 @@ Popover.propTypes = {
   })])
 };
 Popover.defaultProps = {
-  color: 'background1',
+  color: 'background-near',
   isOpen: false,
   preferredPrimaryOrder: ['bottom', 'top', 'right', 'left'],
   preferredSecondaryOrder: ['left', 'right', 'bottom', 'top'],

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

@@ -2,7 +2,7 @@
 
 @use "@pareto-engineering/bem";
 
-$default-border: var(--theme-border-style) var(--metadata);
+$default-border: var(--theme-default-border-style) var(--metadata);
 
 .#{bem.$base}.popover {
   background-color: var(--x);

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

@@ -1,8 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
 
 // Local Definitions
 
@@ -19,25 +19,20 @@ const ProgressBar = ({
   attached,
   color,
   progress,
-  height
+  height,
+  rounded
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, attached && styleNames.modifierAttached, color && `x-${color}`, userClassName].filter(e => e).join(' '),
-    style: {
-      '--progress': progress,
-      '--height': height,
-      ...style
-    },
-    "data-length": "50%"
-    // {...otherProps}
-  });
-};
-
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, attached && styleNames.modifierAttached, color && `x-${color}`, userClassName, rounded && 'rounded'].filter(e => e).join(' '),
+  style: {
+    '--progress': progress,
+    '--height': height,
+    ...style
+  },
+  "data-length": "50%"
+  // {...otherProps}
+});
 ProgressBar.propTypes = {
   /**
    * The HTML id for this element

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

@@ -5,9 +5,11 @@
 $default-height:var(--height, 1em);
 $default-border:none;//2px solid var(--grid);
 $default-transition-duration:.5s;
-$default-color:var(--x, var(--main1));
+$default-color:var(--x, var(--main));
+$default-border-radius:var(--theme-border-radius, 1.875rem);
 
 .#{bem.$base}.progress-bar {
+  background-color: var(--progress-bar-background-color);
   border: $default-border;
   height: $default-height;
   position: relative;
@@ -28,6 +30,14 @@ $default-color:var(--x, var(--main1));
     z-index: 1;
   }
 
+  &.rounded {
+    border-radius: $default-border-radius;
+
+    &::after {
+      border-radius: $default-border-radius;
+    }
+  }
+
   &.#{bem.$modifier-attached} {
     border: unset;
     border-bottom: $default-border;

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

@@ -1,8 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useInsertionEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
 
 // Local Definitions
 
@@ -21,24 +21,29 @@ const Quote = ({
   author,
   color
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("figure", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
-    style: style
-    // {...otherProps}
-  }, /*#__PURE__*/React.createElement("blockquote", {
-    cite: source,
-    className: "blockquote uc"
-  }, /*#__PURE__*/React.createElement("p", {
-    className: "quotation c-x md-s0 s-1"
-  }, children)), /*#__PURE__*/React.createElement("figcaption", {
-    className: "figcaption"
-  }, /*#__PURE__*/React.createElement("cite", null, author)));
-};
+}) => /*#__PURE__*/React.createElement("figure", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
+  style: style
+  // {...otherProps}
+}, /*#__PURE__*/React.createElement("blockquote", {
+  cite: source,
+  className: "blockquote"
+}, /*#__PURE__*/React.createElement("p", {
+  className: "quotation h2"
+}, /*#__PURE__*/React.createElement("span", {
+  className: "c-x"
+}, "\u201C"), /*#__PURE__*/React.createElement("span", {
+  className: "c-x"
+}, children), /*#__PURE__*/React.createElement("span", {
+  className: "c-x"
+}, "\u201D"))), /*#__PURE__*/React.createElement("figcaption", {
+  className: "figcaption"
+}, /*#__PURE__*/React.createElement("span", {
+  className: "x-metadata c-x"
+}, "-"), /*#__PURE__*/React.createElement("cite", {
+  className: "x-metadata c-x"
+}, author)));
 Quote.propTypes = {
   /**
    * The HTML id for this element
@@ -70,6 +75,6 @@ Quote.propTypes = {
   color: PropTypes.string
 };
 Quote.defaultProps = {
-  color: 'main1'
+  color: 'highlighted'
 };
 export default Quote;