@pareto-engineering/design-system 2.0.0-alpha.67 → 2.0.0-alpha.68

package/dist/es/a/ModalContextProvider/common/ModalRoot/styles.scss

@@ -0,0 +1,14 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.modal-root{
+  align-items: center;
+  background-color: rgba($color: #000000, $alpha: 0.35);
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+}

package/dist/es/{c/BlogPostsList/common/Card → a/ModalContextProvider/common}/index.js

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

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

@@ -0,0 +1,4 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as Context } from "./Context";
+export { default as ModalContextProvider } from "./ModalContextProvider";
+export { default as useModal } from "./useModal";

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

@@ -104,7 +104,7 @@ Popover.propTypes = {
    * The reference to the parent element
    */
   parentRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(String)
+    current: PropTypes.instanceOf(Element)
   })])
 };
 Popover.defaultProps = {

package/dist/es/c/Modal/Modal.js

@@ -0,0 +1,91 @@
+/* @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';
+import { ModalHeader } from "./common"; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'modal';
+/**
+ * This is the component description.
+ */
+
+const Modal = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  title,
+  setOpen,
+  color,
+  onClose // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+
+  const close = () => {
+    setOpen === null || setOpen === void 0 ? void 0 : setOpen(false);
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style // {...otherProps}
+
+  }, /*#__PURE__*/React.createElement(ModalHeader, {
+    title: title,
+    close: close,
+    color: color
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "modal-body"
+  }, children));
+};
+
+Modal.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 title to pass to the header
+   */
+  title: PropTypes.string.isRequired,
+
+  /**
+   *  The color for the button to open and close the modal
+   */
+  color: PropTypes.string.isRequired,
+
+  /**
+   *  The function to open the modal
+   */
+  setOpen: PropTypes.func.isRequired,
+
+  /**
+   *  The function to run upon closing the modal, if any
+   */
+  onClose: PropTypes.func
+};
+Modal.defaultProps = {//
+};
+export default Modal;

package/dist/es/c/Modal/common/ModalHeader/ModalHeader.js

@@ -0,0 +1,67 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem';
+import { Button } from "../../../.."; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'modal-header';
+/**
+ * This is the component description.
+ */
+
+const ModalHeader = ({
+  id,
+  className: userClassName,
+  style,
+  title,
+  close,
+  color // ...otherProps
+
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+}, /*#__PURE__*/React.createElement("p", null, title), /*#__PURE__*/React.createElement(Button, {
+  color: color,
+  onClick: () => close(),
+  isCompact: true,
+  className: "close-button"
+}, /*#__PURE__*/React.createElement("span", {
+  className: "f-icons"
+}, "Y")));
+
+ModalHeader.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
+     */
+  title: PropTypes.string,
+
+  /**
+   *  The close modal function
+   */
+  close: PropTypes.func,
+
+  /**
+   *  The color for the button to open and close the modal
+   */
+  color: PropTypes.string.isRequired
+};
+ModalHeader.defaultProps = {// someProp:false
+};
+export default ModalHeader;

package/dist/es/c/Modal/common/ModalHeader/index.js

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

package/dist/es/c/Modal/common/index.js

@@ -0,0 +1 @@
+export { ModalHeader } from "./ModalHeader";

package/dist/es/{a/Popover/common/Item → c/Modal}/index.js

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

package/dist/es/c/Modal/styles.scss

@@ -0,0 +1,43 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-box-shadow: 0 10px 20px rgba(black, 0.2);
+$default-padding: 1em / 2;
+$default-margin: 2em;
+$default-max-height: 75vh;
+$default-max-width: 90%;
+$default-min-width: 20em;
+
+.#{bem.$base}.modal{
+  display: flex;
+  box-shadow: $default-box-shadow;
+  flex-direction: column;
+  left: 50%;
+  max-height: $default-max-height;
+  max-width: $default-max-width;
+  min-width: $default-min-width;
+  overflow: auto;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 100;
+  
+  .modal-body {
+    border-top: var(--theme-border);
+    padding: $default-padding;
+  }
+
+  .modal-header {
+    display: flex;
+    justify-content: space-between;
+    
+    > p {
+      padding: $default-padding;
+      margin: 0;
+    }
+
+    .ds.button {
+      height: 100%;
+    }
+  }
+}

package/dist/es/c/ModalButton/ModalButton.js

@@ -0,0 +1,48 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Button, useModal } from "../..";
+/**
+ * This is the component description.
+ */
+
+const ModalButton = ({
+  style,
+  children,
+  color,
+  modal: ModalComponent
+}) => {
+  const {
+    openModal
+  } = useModal();
+  return /*#__PURE__*/React.createElement(Button, {
+    color: color,
+    style: style,
+    onClick: () => openModal(ModalComponent)
+  }, children);
+};
+
+ModalButton.propTypes = {
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  The children JSX
+   */
+  children: PropTypes.node,
+
+  /**
+   *  The color of the ModalButton
+   */
+  color: PropTypes.node,
+
+  /**
+   *  The component to render in the modal pop-up
+   */
+  modal: PropTypes.elementType.isRequired
+};
+ModalButton.defaultProps = {// someProp:false
+};
+export default ModalButton;

package/dist/es/c/ModalButton/index.js

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

package/dist/es/c/ObjectButton/ObjectButton.js

@@ -0,0 +1,111 @@
+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); }
+
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useState, useRef, useLayoutEffect } from 'react';
+import { Popover, Label } from "../../a";
+import { Button } from "../../b";
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem'; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'object-button';
+/**
+ * This is the component description.
+ */
+
+const ObjectButton = ({
+  id,
+  className: userClassName,
+  style,
+  color,
+  node,
+  nodeToString,
+  options,
+  image // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const parentRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const nodeName = nodeToString(node);
+  return /*#__PURE__*/React.createElement("div", {
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style,
+    ref: parentRef
+  }, /*#__PURE__*/React.createElement(Label, {
+    id: id,
+    color: color
+  }, image && /*#__PURE__*/React.createElement("img", {
+    src: image,
+    alt: nodeName
+  }), /*#__PURE__*/React.createElement("span", null, nodeName)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    id: id,
+    color: color,
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "f-icons"
+  }, "E")), /*#__PURE__*/React.createElement(Popover, {
+    isOpen: isOpen,
+    parentRef: parentRef,
+    preferredPrimaryOrder: ['bottom', 'top', 'right', 'left']
+  }, /*#__PURE__*/React.createElement("ul", null, options.map(option => /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Button, _extends({}, option, {
+    color: color,
+    isSimple: true
+  }))))))));
+};
+
+ObjectButton.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 button
+   */
+  color: PropTypes.string,
+
+  /**
+   *  The node for the button
+   */
+  node: PropTypes.objectOf(PropTypes.string).isRequired,
+
+  /**
+   *  The function to determine the string to display on the button
+   */
+  nodeToString: PropTypes.func.isRequired,
+
+  /**
+    *  The options provided to the button on click
+    */
+  options: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    func: PropTypes.func
+  })),
+
+  /**
+    *  Image of the button (optional)
+    */
+  image: PropTypes.string
+};
+ObjectButton.defaultProps = {// someProp:false
+};
+export default ObjectButton;

package/dist/es/c/ObjectButton/index.js

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

package/dist/es/c/ObjectButton/styles.scss

@@ -0,0 +1,52 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-border-radius: 5px;
+$default-border-radius-image: 50%;
+$default-image-size: 1.5em;
+$default-padding: .5em .5em .42em;
+
+.#{bem.$base}.object-button{
+  display: inline-flex;
+  position: relative;
+
+  > .label {
+    border-radius: 0;
+    margin-right: .5px;
+    padding: $default-padding;
+
+    p {
+      color: inherit;
+    }
+
+    > img {
+      border-radius: $default-border-radius-image;
+      height: $default-image-size;
+      margin-right: .5em;
+      width: $default-image-size;
+    }
+  }
+
+  > div {
+    > .button {
+      display: inline-flex;
+      height: 100%;
+      padding: $default-padding;
+      padding-top: .6em;
+    }
+
+    > .popover {
+      &.bottom {
+        left: auto;
+      }
+  
+      > ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        max-width: 10em;
+        white-space: nowrap;
+      }
+    }
+  }
+}

package/dist/es/c/index.js

@@ -1,4 +1,5 @@
 export { Hero } from "./Hero";
 export { ContentSlides, useContentSlides } from "./ContentSlides";
 export { Shortener } from "./Shortener";
-export { SocialMediaShareButton } from "./SocialMediaShareButton";
+export { SocialMediaShareButton } from "./SocialMediaShareButton";
+export { Modal } from "./Modal";

package/dist/es/{c/BlogPostsList/BlogPostsList.js → d/Modal/Modal.js}

@@ -3,19 +3,21 @@ import * as React from 'react';
 import { useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem';
-import { Card } from "./common"; // Local Definitions
+import { ModalFooter, ModalHeader } from "./common"; // Local Definitions
 
 const baseClassName = styleNames.base;
-const componentClassName = 'blog-posts-list';
+const componentClassName = 'modal';
 /**
  * This is the component description.
  */
 
-const BlogPostsList = ({
+const Modal = ({
   id,
   className: userClassName,
   style,
-  children // ...otherProps
+  children,
+  title,
+  actions // ...otherProps
 
 }) => {
   useLayoutEffect(() => {
@@ -23,13 +25,19 @@ const BlogPostsList = ({
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, 'u1'].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style // {...otherProps}
 
-  }, children);
+  }, /*#__PURE__*/React.createElement(ModalHeader, {
+    title: title
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "modal-content"
+  }, children), actions && /*#__PURE__*/React.createElement(ModalFooter, {
+    actions: actions
+  }));
 };
 
-BlogPostsList.propTypes = {
+Modal.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -48,9 +56,22 @@ BlogPostsList.propTypes = {
   /**
    *  The children JSX
    */
-  children: PropTypes.node
+  children: PropTypes.node,
+
+  /**
+   *  The title to pass to the header
+   */
+  title: PropTypes.string.isRequired,
+
+  /**
+   *  The button options to provide to the footer
+   */
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    color: PropTypes.string,
+    text: PropTypes.string,
+    onClick: PropTypes.func
+  }))
 };
-BlogPostsList.defaultProps = {// someProp:false
+Modal.defaultProps = {//
 };
-BlogPostsList.Card = Card;
-export default BlogPostsList;
+export default Modal;

package/dist/es/d/Modal/common/ModalFooter/ModalFooter.js

@@ -0,0 +1,56 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem';
+import { Button } from "../../../.."; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'modal-footer';
+/**
+ * This is the component description.
+ */
+
+const ModalFooter = ({
+  id,
+  className: userClassName,
+  style,
+  actions // ...otherProps
+
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+}, actions.map(action => /*#__PURE__*/React.createElement(Button, {
+  color: action.color,
+  onClick: action.onClick,
+  isCompact: true
+}, action.text)));
+
+ModalFooter.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 button options to provide to the footer
+    */
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    color: PropTypes.string,
+    text: PropTypes.string,
+    onClick: PropTypes.func
+  }))
+};
+ModalFooter.defaultProps = {// someProp:false
+};
+export default ModalFooter;

package/dist/es/d/Modal/common/ModalFooter/index.js

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

package/dist/es/d/Modal/common/ModalHeader/ModalHeader.js

@@ -0,0 +1,60 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem';
+import { Button, useModal } from "../../../.."; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'modal-header';
+/**
+ * This is the component description.
+ */
+
+const ModalHeader = ({
+  id,
+  className: userClassName,
+  style,
+  title // ...otherProps
+
+}) => {
+  const {
+    setClose
+  } = useModal();
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("span", null, title), /*#__PURE__*/React.createElement(Button, {
+    color: "anchor",
+    onClick: setClose,
+    isCompact: true,
+    className: "close-button"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "f-icons"
+  }, "Y")));
+};
+
+ModalHeader.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
+     */
+  title: PropTypes.string
+};
+ModalHeader.defaultProps = {// someProp:false
+};
+export default ModalHeader;

package/dist/es/d/Modal/common/ModalHeader/index.js

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

package/dist/es/d/Modal/common/index.js

@@ -0,0 +1,2 @@
+export { ModalHeader } from "./ModalHeader";
+export { ModalFooter } from "./ModalFooter";

package/dist/es/{v3/Button → d/Modal}/index.js

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