@pareto-engineering/design-system 2.0.0-alpha.7 → 2.0.0-alpha.71

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/SocialMediaShareButton/SocialMediaShareButton.js

@@ -0,0 +1,95 @@
+/* @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'; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'social-media-share-button';
+/**
+ * This is the component description.
+ */
+
+const SocialMediaShareButton = ({
+  id,
+  className: userClassName,
+  style,
+  icon,
+  // children,
+  type,
+  color
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const isServer = typeof window === 'undefined';
+  const link = isServer ? '' : window.location.href; // We can pass additional text to the social media share buttons such as the title.
+  // See commented code below for an example on how to pass text.
+  // It is important we encode the text with the encodeURIComponent function to pass
+  // special characters (such as |, &, etc.) properly through the URL.
+  // const title = isServer ? '' : encodeURIComponent(document.title)
+
+  const defaultsMap = {
+    facebook: {
+      icon: 'f',
+      link: `https://www.facebook.com/sharer/sharer.php?u=${link}` // link: `https://www.facebook.com/sharer/sharer.php?u=${link}&quote=${title}`,
+
+    },
+    twitter: {
+      icon: 't',
+      link: `https://twitter.com/intent/tweet?url=${link}` // link: `https://twitter.com/intent/tweet?text=${title}&url=${link}`,
+
+    }
+  };
+  return /*#__PURE__*/React.createElement("a", {
+    href: defaultsMap[type].link,
+    target: "_blank",
+    rel: "noreferrer",
+    id: id,
+    className: [baseClassName, componentClassName, `x-${color || type}`, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button"
+  }, icon || defaultsMap[type].icon));
+};
+
+SocialMediaShareButton.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 Social Media to Target.
+   * If blank, you need to provide both an icon letter (from glyphter) and a link.
+   */
+  type: PropTypes.oneOf(['twitter', 'facebook']),
+
+  /**
+   * The icon of the social media
+   */
+  icon: PropTypes.string,
+
+  /**
+   * The button color
+   */
+  color: PropTypes.string
+};
+SocialMediaShareButton.defaultProps = {// someProp:false
+};
+export default SocialMediaShareButton;

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

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

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

@@ -0,0 +1,39 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-dimensions: 2em;
+$mobile-dimensions: 2.75em;
+
+.#{bem.$base}.social-media-share-button{
+
+  > button {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    border-radius: 3em;
+    color: var(--x);
+    cursor: pointer;
+    font-family: "icons", sans-serif;
+    height: $default-dimensions;
+    transition: all .3s;
+    width: $default-dimensions;
+
+    @include mixins.media($to:$sm-md) {
+      height: $mobile-dimensions;
+      width: $mobile-dimensions;
+    }
+
+    &:hover {
+      background: var(--x);
+      color: var(--on-x);
+    }
+
+    &:focus, &:active {
+      background: var(--light-x);
+      color: var(--on-x);
+    }
+  }
+}

package/dist/es/c/index.js

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

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

@@ -0,0 +1,77 @@
+/* @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 { ModalFooter, 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,
+  actions // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style // {...otherProps}
+
+  }, /*#__PURE__*/React.createElement(ModalHeader, {
+    title: title
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "modal-content"
+  }, children), actions && /*#__PURE__*/React.createElement(ModalFooter, {
+    actions: actions
+  }));
+};
+
+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 button options to provide to the footer
+   */
+  actions: PropTypes.arrayOf(PropTypes.shape({
+    color: PropTypes.string,
+    text: PropTypes.string,
+    onClick: PropTypes.func
+  }))
+};
+Modal.defaultProps = {//
+};
+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/d/Modal/index.js

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

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

@@ -0,0 +1,52 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-padding: 1em;
+$default-margin: 2em;
+
+.#{bem.$base}.modal{
+    display: flex;
+    background: #ffffff;
+    box-shadow: 0 10px 20px rgba(black, 0.2);
+    flex-direction: column;
+    left: 50%;
+    max-height: 90vh;
+    max-width: 90%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 20em;
+    
+  .modal-header {
+    display: flex;
+    justify-content: center;
+    padding: $default-padding;
+
+    > span {
+      margin: 0 $default-margin;
+    }
+
+    > .button {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+      position: absolute;
+      right: 0px;
+      top: 0px;
+    }
+  }
+
+  .modal-content {
+    border-bottom: 1px solid #e0e0e0;
+    border-top: 1px solid #e0e0e0;
+    display: flex;
+    justify-content: center;
+    padding: $default-padding;
+  }
+
+  .modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: $default-padding;
+  }
+}

package/dist/es/f/FormInput/FormInput.js

@@ -2,9 +2,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { memo } from 'react';
+import { memo, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import { TextInput, TextareaInput, ChoicesInput, SelectInput } from "../fields"; // Local Definitions
+import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices } from "../fields"; // Local Definitions
 // const baseClassName = styleNames.base
 
 const componentClassName = 'form-input';
@@ -19,6 +19,9 @@ const FormInput = ({
   disabled,
   ...otherProps
 }) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
   const newClassName = [className, componentClassName].filter(Boolean).join(' ');
 
   if (type === 'textarea') {
@@ -42,6 +45,40 @@ const FormInput = ({
     }, otherProps));
   }
 
+  if (type === 'query-combobox') {
+    return /*#__PURE__*/React.createElement(QueryCombobox, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
+
+  if (type === 'query-select') {
+    return /*#__PURE__*/React.createElement(QuerySelect, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
+
+  if (type === 'query-choices') {
+    return /*#__PURE__*/React.createElement(QueryChoices, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
+
+  if (type === 'rating') {
+    return /*#__PURE__*/React.createElement(RatingsInput, _extends({
+      className: newClassName
+    }, otherProps));
+  }
+
+  if (type === 'checkbox') {
+    return /*#__PURE__*/React.createElement(Checkbox, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
+
   if (extraTypes !== null && extraTypes !== void 0 && extraTypes[type]) {
     const Component = extraTypes[type];
     return /*#__PURE__*/React.createElement(Component, _extends({
@@ -66,7 +103,7 @@ FormInput.propTypes = {
   /**
    * The HTML class names for this element
    */
-  type: PropTypes.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', // to be removed
+  type: PropTypes.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', 'query-combobox', 'url', 'rating', // to be removed
   'extendedTypeInput']),
 
   /**

package/dist/es/f/FormInput/styles.scss

@@ -0,0 +1,11 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-margin: 1em;
+
+.#{bem.$base}.form-input {
+    &+& {
+        margin-top: $default-margin;
+    }
+}

package/dist/es/f/common/Debugger/Debugger.js

@@ -31,7 +31,7 @@ const Debugger = ({
     style: style
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: toggleDebugger,
-    color: "main1"
+    color: "main2"
   }, isOpen ? 'Close FormDebugger' : 'Open FormDebugger'), isOpen && /*#__PURE__*/React.createElement("pre", {
     className: "debuger-content"
   }, JSON.stringify(formikContext, null, 2)));