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

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

@@ -5,7 +5,7 @@
 $default-icon:"";
 $default-icon-width:2em;
 $default-icon-margin:.5em;
-$default-icon-font:var(--font-icons);
+$default-icon-font:icons;
 $default-icon-margin-top:.1em;//.2em;
 
 .#{bem.$base}.icon-list {

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

@@ -0,0 +1,67 @@
+/* @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/exports';
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'label';
+
+/**
+ * This is the component description.
+ */
+const Label = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    color,
+    isCompact,
+    isGhost
+  } = _ref;
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`, isCompact && styleNames.modifierCompact, isGhost && styleNames.modifierGhost].filter(e => e).join(' '),
+    style: style
+  }, children);
+};
+Label.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),
+  /**
+   * Whether the button has the ghost style
+   */
+  isGhost: PropTypes.bool,
+  /**
+   * Whether the button is compact
+   */
+  isCompact: PropTypes.bool,
+  /**
+   *  The default font color to display for the label
+   */
+  color: PropTypes.string,
+  /**
+   *  The children JSX
+   */
+  children: PropTypes.node
+};
+Label.defaultProps = {
+  color: 'main1'
+};
+export default Label;

package/dist/es/a/{Shapes → Label}/index.js

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

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

@@ -0,0 +1,34 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-padding-bottom: .4em;
+$default-padding-side: .7em;
+$default-padding-top: .5em;
+
+$compact-padding: $default-padding-top*.8 $default-padding-side*.8 $default-padding-bottom*.8;
+$default-padding: $default-padding-top $default-padding-side $default-padding-bottom;
+
+$default-color: primary;
+$default-image-size: 2em;
+$default-font-size: calc(1em * var(--s-1));
+
+.#{bem.$base}.label {
+    align-items: center;
+    background: var(--x, var(--#{$default-color}));
+    border-radius: 3em;
+    color: var(--on-x, var(--on-#{$default-color}));
+    display: inline-flex;
+    font-size: $default-font-size;
+    padding: $default-padding;
+    white-space: nowrap;
+
+    &.#{bem.$modifier-compact} {
+        padding: $compact-padding;
+    }
+
+    &.#{bem.$modifier-ghost} {
+        background: transparent;
+        border: 1px solid var(--x, var(--#{$default-color}));
+        color: var(--x, var(--#{$default-color}));
+    }
+}

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

@@ -2,24 +2,27 @@
 import * as React from 'react';
 import { useLayoutEffect } from 'react';
 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 = 'loading-circle';
+
 /**
  * This is the component description.
  */
-
-const LoadingCircle = ({
-  id,
-  className: userClassName,
-  heightWidth,
-  strokeLinecap,
-  strokeWidth,
-  animationDuration,
-  style // ...otherProps
-
-}) => {
+const LoadingCircle = _ref => {
+  let {
+    id,
+    className: userClassName,
+    heightWidth,
+    strokeLinecap,
+    strokeWidth,
+    animationDuration,
+    style
+    // ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
@@ -30,8 +33,8 @@ const LoadingCircle = ({
       '--height-width': heightWidth,
       '--stroke-width': strokeWidth,
       ...style
-    } // {...otherProps}
-
+    }
+    // {...otherProps}
   }, /*#__PURE__*/React.createElement("svg", {
     viewBox: "25 25 50 50",
     className: "svg-circle",
@@ -55,38 +58,31 @@ const LoadingCircle = ({
     strokeMiterlimit: "10"
   })));
 };
-
 LoadingCircle.propTypes = {
   /**
    * The HTML id for this element
    */
   id: PropTypes.string,
-
   /**
    * The HTML class names for this element
    */
   className: PropTypes.string,
-
   /**
    * The height width of the loading div/circle
    */
   heightWidth: PropTypes.string,
-
   /**
    * The SVG property stroke-linecap
    */
   strokeLinecap: PropTypes.oneOf(['round', 'square', 'butt']),
-
   /**
    * The SVG property stroke-width
    */
   strokeWidth: PropTypes.string,
-
   /**
    * The duration of the animation in seconds
    */
   animationDuration: PropTypes.number,
-
   /**
    * The React-written, css properties for this element.
    */

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

@@ -2,64 +2,62 @@
 import * as React from 'react';
 import { useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem'; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
 
 import { Person } from "./common";
 const baseClassName = styleNames.base;
 const componentClassName = 'people';
+
 /**
  * This is the component description.
  */
-
-const People = ({
-  id,
-  className: userClassName,
-  style,
-  imageSize,
-  children,
-  columnWidth // ...otherProps
-
-}) => {
+const People = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    imageSize,
+    children,
+    columnWidth
+    // ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, 'u1'].filter(e => e).join(' '),
-    style: { ...style,
+    style: {
+      ...style,
       '--image-size': imageSize,
       '--column-width': columnWidth
-    } // {...otherProps}
-
+    }
+    // {...otherProps}
   }, children);
 };
-
 People.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 height and width of all the person's image
    */
   imageSize: PropTypes.string,
-
   /**
    * The width of the a person's column
    */

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

@@ -1,70 +1,68 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
 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 = 'person';
+
 /**
  * This is the component description.
  */
-
-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 s-1"
-}, name), /*#__PURE__*/React.createElement("p", {
-  className: "role s-2"
-}, role)));
-
+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)));
+};
 Person.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 person's image
    */
   image: PropTypes.string.isRequired,
-
   /**
    *  The person's name
    */
   name: PropTypes.string.isRequired,
-
   /**
    *  The person's role
    */
   role: PropTypes.string.isRequired,
-
   /**
    * The base color of the person's component
    */

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

@@ -1,8 +1,9 @@
 /* @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 *;
+@use "@aztlan/swatch/src/collections/palettes/monochrome";
 
 $default-border-radius:50%;
 $default-person-border-radius:2em;
@@ -10,6 +11,7 @@ $default-padding:var(--u);
 $default-horizontal-margin: .5em;
 
 $default-grid-gap: 1em;
+$default-image-padding: 1.5rem;
 
 .#{bem.$base}.people {
   display: grid;
@@ -19,7 +21,6 @@ $default-grid-gap: 1em;
 
   .person {
     align-items: center;
-    background-color: var(--y);
     border-radius: $default-person-border-radius;
     display: flex;
 
@@ -29,20 +30,21 @@ $default-grid-gap: 1em;
       border-radius: $default-border-radius;
       height: var(--image-size);
       width: var(--image-size);
+      margin-right: $default-image-padding;
     }
 
     .details {
       align-items: flex-start;
       display: flex;
       flex-direction: column;
+      color: var(--grey);
 
       .name {
-        margin-bottom: .25em;
-        color: var(--on-y);
+        margin-bottom: .1em;
+        color: var(--grey);
       }
 
       .role {
-        color: var(--on-y);
         opacity: .5;
       }
     }

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

@@ -0,0 +1,109 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useRef, useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
+import { useDynamicPosition } from "../../utils";
+const baseClassName = styleNames.base;
+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(() => {
+    import("./styles.scss");
+  }, []);
+  const popoverRef = useRef(null);
+  const {
+    primaryPosition,
+    secondaryPosition
+  } = useDynamicPosition({
+    preferredPrimaryOrder,
+    preferredSecondaryOrder,
+    elementRef: popoverRef,
+    parentRef,
+    offsetXPx,
+    offsetYPx
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, isOpen && 'open', `x-${color}`, primaryPosition, secondaryPosition].filter(e => e).join(' '),
+    style: style,
+    ref: popoverRef
+    // {...otherProps}
+  }, children);
+};
+Popover.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 base color of the popover
+   */
+  color: PropTypes.string,
+  /**
+   * Whether the popover should be visible or not
+   */
+  isOpen: PropTypes.bool,
+  /**
+   * The preferred primary position order of the popover
+   */
+  preferredPrimaryOrder: PropTypes.arrayOf(PropTypes.oneOf(['bottom', 'top', 'right', 'left'])),
+  /**
+   * The preferred secondary position order of the popover
+   */
+  preferredSecondaryOrder: PropTypes.arrayOf(PropTypes.oneOf(['left', 'right', 'bottom', 'top'])),
+  /**
+   * The horizonal offset in pixels from the anchor point to the popover
+   */
+  offsetXPx: PropTypes.number,
+  /**
+   * The vertical offset in pixels from the anchor point to the popover
+   */
+  offsetYPx: PropTypes.number,
+  /**
+   * The reference to the parent element
+   */
+  parentRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })])
+};
+Popover.defaultProps = {
+  color: 'background1',
+  isOpen: false,
+  preferredPrimaryOrder: ['bottom', 'top', 'right', 'left'],
+  preferredSecondaryOrder: ['left', 'right', 'bottom', 'top'],
+  offsetXPx: 16,
+  offsetYPx: 0
+};
+export default Popover;

package/{src/ui/a/ContentCard/common/Section → dist/es/a/Popover}/index.js

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

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

@@ -0,0 +1,33 @@
+/* @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;
+
+  &:not(.open) {
+    display: none;
+  }
+
+  &.bottom {
+    top: 100%;
+    // bottom: 0;
+  }
+
+  &.left {
+    left: 0;
+  }
+
+  &.right {
+    right: 0;
+  }
+
+  &.top {
+    bottom: 100%;
+    top: auto;
+  }
+}

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

@@ -2,24 +2,27 @@
 import * as React from 'react';
 import { useLayoutEffect } from 'react';
 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 = 'progress-bar';
+
 /**
  * This is the component description. This takes the color x = indigo.
  */
-
-const ProgressBar = ({
-  id,
-  className: userClassName,
-  style,
-  attached,
-  color,
-  progress,
-  height // ...otherProps
-
-}) => {
+const ProgressBar = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    attached,
+    color,
+    progress,
+    height
+    // ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
@@ -31,8 +34,8 @@ const ProgressBar = ({
       '--height': height,
       ...style
     },
-    "data-length": "50%" // {...otherProps}
-
+    "data-length": "50%"
+    // {...otherProps}
   });
 };
 
@@ -41,32 +44,26 @@ ProgressBar.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 progress bar is attached to another element
    */
   attached: PropTypes.bool,
-
   /**
    * The current progress
    */
   progress: PropTypes.number.isRequired,
-
   /**
    * The height of the progress bar as a CSS value. 1em by default.
    */