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

package/dist/cjs/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/cjs/{c/AcceptCookies/AcceptCookies.js → a/Popover/Popover.js}

@@ -4,131 +4,112 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _b = require("../../b");
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _utils = require("../../utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var baseClassName = _exports.default.base;
+var componentClassName = 'popover';
 
-// Local Definitions
-var baseClassName = _bem.default.base;
-var componentClassName = 'accept-cookies';
 /**
  * This is the component description.
  */
-
-var AcceptCookies = _ref => {
+var Popover = _ref => {
   var {
     id,
     className: userClassName,
     style,
     color,
-    title,
-    subtitle,
-    onClickAllow,
-    onClickDecline,
-    defaultIsShown // ...otherProps
-
+    children,
+    isOpen,
+    parentRef,
+    preferredPrimaryOrder,
+    preferredSecondaryOrder,
+    offsetXPx,
+    offsetYPx
+    // ...otherProps
   } = _ref;
-  var [isShown, setIsShown] = (0, React.useState)(defaultIsShown);
-  var hide = (0, React.useCallback)(() => setIsShown(false), []);
-  var allow = (0, React.useCallback)(() => {
-    onClickAllow === null || onClickAllow === void 0 ? void 0 : onClickAllow();
-    hide();
-  }, []);
-  var decline = (0, React.useCallback)(() => {
-    onClickDecline === null || onClickDecline === void 0 ? void 0 : onClickDecline();
-    hide();
-  }, []);
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
-  if (!isShown) return null;
+  var popoverRef = (0, React.useRef)(null);
+  var {
+    primaryPosition,
+    secondaryPosition
+  } = (0, _utils.useDynamicPosition)({
+    preferredPrimaryOrder,
+    preferredSecondaryOrder,
+    elementRef: popoverRef,
+    parentRef,
+    offsetXPx,
+    offsetYPx
+  });
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, "x-".concat(color), 'u1'].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _bem.default.elementContent
-  }, /*#__PURE__*/React.createElement("p", {
-    className: "s0"
-  }, title), /*#__PURE__*/React.createElement("p", {
-    className: "s-1"
-  }, subtitle), /*#__PURE__*/React.createElement("div", {
-    className: "buttons s-1"
-  }, /*#__PURE__*/React.createElement(_b.Button, {
-    className: "allow",
-    onClick: allow
-  }, "Allow"), /*#__PURE__*/React.createElement(_b.Button, {
-    className: "decline v1 ml-v",
-    onClick: decline
-  }, "Decline"))));
+    className: [baseClassName, componentClassName, userClassName, isOpen && 'open', "x-".concat(color), primaryPosition, secondaryPosition].filter(e => e).join(' '),
+    style: style,
+    ref: popoverRef
+    // {...otherProps}
+  }, children);
 };
-
-AcceptCookies.propTypes = {
+Popover.propTypes = {
   /**
    * The HTML id for this element
    */
   id: _propTypes.default.string,
-
   /**
    * The HTML class names for this element
    */
   className: _propTypes.default.string,
-
   /**
    * The React-written, css properties for this element.
    */
   style: _propTypes.default.objectOf(_propTypes.default.string),
-
   /**
    *  The children JSX
    */
-  // children:PropTypes.node,
-
+  children: _propTypes.default.node,
   /**
-   *  The title
+   * The base color of the popover
    */
-  title: _propTypes.default.string,
-
+  color: _propTypes.default.string,
   /**
-   *  The sub-title
+   * Whether the popover should be visible or not
    */
-  subtitle: _propTypes.default.string,
-
+  isOpen: _propTypes.default.bool,
   /**
-   *  The color
+   * The preferred primary position order of the popover
    */
-  color: _propTypes.default.string,
-
+  preferredPrimaryOrder: _propTypes.default.arrayOf(_propTypes.default.oneOf(['bottom', 'top', 'right', 'left'])),
   /**
-   *  Allow cookies function
+   * The preferred secondary position order of the popover
    */
-  onClickAllow: _propTypes.default.func,
-
+  preferredSecondaryOrder: _propTypes.default.arrayOf(_propTypes.default.oneOf(['left', 'right', 'bottom', 'top'])),
   /**
-   *  Allow cookies function
+   * The horizonal offset in pixels from the anchor point to the popover
    */
-  onClickDecline: _propTypes.default.func,
-
+  offsetXPx: _propTypes.default.number,
+  /**
+   * The vertical offset in pixels from the anchor point to the popover
+   */
+  offsetYPx: _propTypes.default.number,
   /**
-   *  Condition to show or hide the component
+   * The reference to the parent element
    */
-  defaultIsShown: _propTypes.default.bool
+  parentRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.instanceOf(Element)
+  })])
 };
-AcceptCookies.defaultProps = {
-  color: 'main1',
-  defaultIsShown: true
+Popover.defaultProps = {
+  color: 'background1',
+  isOpen: false,
+  preferredPrimaryOrder: ['bottom', 'top', 'right', 'left'],
+  preferredSecondaryOrder: ['left', 'right', 'bottom', 'top'],
+  offsetXPx: 16,
+  offsetYPx: 0
 };
-var _default = AcceptCookies;
+var _default = Popover;
 exports.default = _default;

package/dist/cjs/a/{Shapes → Popover}/index.js

@@ -3,13 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Shapes", {
+Object.defineProperty(exports, "Popover", {
   enumerable: true,
   get: function get() {
-    return _Shapes.default;
+    return _Popover.default;
   }
 });
-
-var _Shapes = _interopRequireDefault(require("./Shapes"));
-
+var _Popover = _interopRequireDefault(require("./Popover"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/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/cjs/a/ProgressBar/ProgressBar.js

@@ -4,32 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 // Local Definitions
-var baseClassName = _bem.default.base;
+
+var baseClassName = _exports.default.base;
 var componentClassName = 'progress-bar';
+
 /**
  * This is the component description. This takes the color x = indigo.
  */
-
 var ProgressBar = _ref => {
   var {
     id,
@@ -38,21 +31,21 @@ var ProgressBar = _ref => {
     attached,
     color,
     progress,
-    height // ...otherProps
-
+    height
+    // ...otherProps
   } = _ref;
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, attached && _bem.default.modifierAttached, color && "x-".concat(color), userClassName].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, attached && _exports.default.modifierAttached, color && "x-".concat(color), userClassName].filter(e => e).join(' '),
     style: _objectSpread({
       '--progress': progress,
       '--height': height
     }, style),
-    "data-length": "50%" // {...otherProps}
-
+    "data-length": "50%"
+    // {...otherProps}
   });
 };
 
@@ -61,32 +54,26 @@ ProgressBar.propTypes = {
    * The HTML id for this element
    */
   id: _propTypes.default.string,
-
   /**
    * The HTML class names for this element
    */
   className: _propTypes.default.string,
-
   /**
    * The React-written, css properties for this element.
    */
   style: _propTypes.default.objectOf(_propTypes.default.string),
-
   /**
    *  The color of the logo
    */
   color: _propTypes.default.string,
-
   /**
    *  Whether the progress bar is attached to another element
    */
   attached: _propTypes.default.bool,
-
   /**
    * The current progress
    */
   progress: _propTypes.default.number.isRequired,
-
   /**
    * The height of the progress bar as a CSS value. 1em by default.
    */

package/dist/cjs/a/ProgressBar/index.js

@@ -9,7 +9,5 @@ Object.defineProperty(exports, "ProgressBar", {
     return _ProgressBar.default;
   }
 });
-
 var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/a/Quote/Quote.js

@@ -4,26 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 // Local Definitions
-var baseClassName = _bem.default.base;
+
+var baseClassName = _exports.default.base;
 var componentClassName = 'quote';
+
 /**
  * This is the component description.
  */
-
 var Quote = _ref => {
   var {
     id,
@@ -32,8 +26,8 @@ var Quote = _ref => {
     children,
     source,
     author,
-    color // ...otherProps
-
+    color
+    // ...otherProps
   } = _ref;
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
@@ -41,8 +35,8 @@ var Quote = _ref => {
   return /*#__PURE__*/React.createElement("figure", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, "x-".concat(color)].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
+    style: style
+    // {...otherProps}
   }, /*#__PURE__*/React.createElement("blockquote", {
     cite: source,
     className: "blockquote uc"
@@ -52,38 +46,31 @@ var Quote = _ref => {
     className: "figcaption"
   }, /*#__PURE__*/React.createElement("cite", null, author)));
 };
-
 Quote.propTypes = {
   /**
    * The HTML id for this element
    */
   id: _propTypes.default.string,
-
   /**
    * The HTML class names for this element
    */
   className: _propTypes.default.string,
-
   /**
    * The React-written, css properties for this element.
    */
   style: _propTypes.default.objectOf(_propTypes.default.string),
-
   /**
    * The children jsx
    */
   children: _propTypes.default.node.isRequired,
-
   /**
    * A URL for the source of the quotation
    */
   source: _propTypes.default.string,
-
   /**
    * text representation of the source
    */
   author: _propTypes.default.string,
-
   /**
    * The color of the quotation text
    */

package/dist/cjs/a/Quote/index.js

@@ -9,7 +9,5 @@ Object.defineProperty(exports, "Quote", {
     return _Quote.default;
   }
 });
-
 var _Quote = _interopRequireDefault(require("./Quote"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -1,7 +1,7 @@
 /* @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 *;
 
 
 .#{bem.$base}.quote{