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

package/dist/cjs/a/Conversation/common/Message/Message.js

@@ -34,7 +34,10 @@ var Message = _ref => {
     style,
     message,
     sender,
-    from // ...otherProps
+    from,
+    attachment,
+    attachmentIcon,
+    attachmentColor // ...otherProps
 
   } = _ref;
   var {
@@ -43,13 +46,19 @@ var Message = _ref => {
   } = (0, _useConversation.default)();
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, "x-".concat(from === 'ours' ? ourColor : theirColor), from === 'ours' && 'ours'].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, "x-".concat(from === 'ours' ? ourColor : theirColor), from === 'ours' && 'ours', 'v1'].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement("div", {
     className: _bem.default.elementContent
   }, /*#__PURE__*/React.createElement("p", {
     className: "sender v25 mb-v s-1"
-  }, sender, ":"), /*#__PURE__*/React.createElement("p", null, message)));
+  }, sender, ":"), /*#__PURE__*/React.createElement("p", null, message), attachment && /*#__PURE__*/React.createElement("div", {
+    className: "attachment y-".concat(attachmentColor)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "f-icons"
+  }, attachmentIcon), /*#__PURE__*/React.createElement("p", {
+    className: "ml-v"
+  }, attachment))));
 };
 
 Message.propTypes = {
@@ -63,6 +72,11 @@ Message.propTypes = {
    */
   className: _propTypes.default.string,
 
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+
   /**
    * The message in the conversation
    */
@@ -79,12 +93,24 @@ Message.propTypes = {
   from: _propTypes.default.oneOf(['ours', 'theirs']),
 
   /**
-   * The React-written, css properties for this element.
+   * name of the attachment file
+   */
+  attachment: _propTypes.default.string,
+
+  /**
+   * source of the attachment icon
+   */
+  attachmentIcon: _propTypes.default.string,
+
+  /**
+   * background color of the attachment box
    */
-  style: _propTypes.default.objectOf(_propTypes.default.string)
+  attachmentColor: _propTypes.default.string
 };
 Message.defaultProps = {
-  from: 'theirs'
+  from: 'theirs',
+  attachmentIcon: 'A',
+  attachmentColor: 'main4'
 };
 var _default = Message;
 exports.default = _default;

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

@@ -1,54 +1,153 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+
 @use "@pareto-engineering/bem";
 @use "@aztlan/stylebook/src/mixins";
 @use "@aztlan/stylebook/src/globals" as *;
 
 $default-padding: var(--u);
 $default-conversation-background: var(--y);
-$default-message-max-width: calc(100% - #{$default-padding});
+$default-message-max-width: calc(100% - 4 * #{$default-padding});
 $default-message-min-width: 12em;
 $default-message-border: var(--theme-border);
+$triangle-border-size: 15px;
+$triangle-border-style: $triangle-border-size solid;
+$triangle-border-style-subtracted: ($triangle-border-size - 1px) solid;
+$triangle-border1: $triangle-border-style var(--paragraph);
+$triangle-border2: $triangle-border-style transparent;
+$triangle-border3: $triangle-border-style-subtracted var(--x);
+$triangle-border4: $triangle-border-style-subtracted transparent;
+$triangle-before-side:24px;
+$triangle-before-bottom:-30px;
+$triangle-after-bottom:-27px;
+$triangle-after-side:25px;
 
 .#{bem.$base}.conversation {
-    display: flex;
-    flex-direction: column;
-    background-color: $default-conversation-background;
-    padding: $default-padding;
-    border-radius: var(--theme-border-radius);
+  background-color: $default-conversation-background;
+  border-radius: var(--theme-border-radius);
+  display: flex;
+  flex-direction: column;
+  padding: $default-padding;
 
-    >:not(:last-child) {
-        margin-bottom: $default-padding;
-    }
+  >:not(:last-child) {
+    margin-bottom: $default-padding;
+  }
+
+  // >:nth-child(1) {
+  // animation-delay: 1s;
+  // }
+  // >:nth-child(2) {
+  // animation-delay: 3s;
+  // }
 
+  &.has-triangle {
+    padding-bottom: calc(#{$default-padding} * 2);
     .#{bem.$base}.message {
-        min-width: $default-message-min-width;
-        max-width: $default-message-max-width;
-        padding: $default-padding;
-        border-radius: var(--theme-border-radius);
-        background-color: var(--x);
-        align-self: flex-start;
-        border: $default-message-border;
-
-        .#{bem.$element-content} {
-            display: flex;
-            flex-direction: column;
-
-            >p {
-                color: var(--on-x);
-            }
-
-            .sender {
-                font-weight: 800;
-                margin-bottom: .5em;
-            }
+      ::before {
+        border-bottom: $triangle-border2;
+        border-left: $triangle-border2;
+        border-right: $triangle-border1;
+        border-top: $triangle-border1;
+        bottom: $triangle-before-bottom;
+        content: "";
+        height: 0;
+        position: absolute;
+        right: $triangle-before-side;
+        width: 0;
+      }
+
+      ::after {
+        border-bottom: $triangle-border4;
+        border-left: $triangle-border4;
+        border-right: $triangle-border3;
+        border-top: $triangle-border3;
+        bottom: $triangle-after-bottom;
+        content: "";
+        height: 0;
+        position: absolute;
+        right: $triangle-after-side;
+        width: 0;
+      }
+
+      &:not(.ours) {
+        ::before {
+          border-bottom: $triangle-border2;
+          border-left: $triangle-border1;
+          border-right: $triangle-border2;
+          border-top: $triangle-border1;
+          bottom: $triangle-before-bottom;
+          content: "";
+          height: 0;
+          left: $triangle-before-side;
+          position: absolute;
+          width: 0;
         }
-    }
 
-    .#{bem.$base}.ours {
-        align-self: flex-end;
+        ::after {
+          border-bottom: $triangle-border4;
+          border-left: $triangle-border3;
+          border-right: $triangle-border4;
+          border-top: $triangle-border3;
+          bottom: $triangle-after-bottom;
+          content: "";
+          height: 0;
+          left: $triangle-after-side;
+          position: absolute;
+          width: 0;
+        }
+      }
     }
+  }
 
-}
+  .#{bem.$base}.message {
+    align-self: flex-start;
+    background-color: var(--x);
+    //  animation: fadeIn 1s ease-in both;
+    border: $default-message-border;
+    border-radius: var(--theme-border-radius);
+    max-width: $default-message-max-width;
+    min-width: $default-message-min-width;
+    padding: $default-padding;
+    position: relative;
 
+    .#{bem.$element-content} {
+      display: flex;
+      flex-direction: column;
 
+      >p {
+        color: var(--on-x);
+      }
 
+      .sender {
+        font-weight: 800;
+        margin-bottom: .5em;
+      }
+
+      .attachment {
+        align-self: baseline;
+        background-color: var(--y);
+        display: flex;
+        flex-direction: row;
+        padding: .5em 1em;
+
+        > p {
+          margin-bottom: 0;
+        }
+
+        > img {
+          width: 40px;
+        }
+      }
+    }
+    &.#{bem.$base}.ours {
+      align-self: flex-end;
+    }
+
+
+    // mobile style
+    @include mixins.media($to:$sm-md) {
+      .message {
+        margin-top: 2em;
+      }
+    }
+  }
+}

package/dist/cjs/{c/SiteFooter/SiteFooter.js → a/Label/Label.js}

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
 
-var _common = require("./common");
-
 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); }
@@ -21,31 +19,32 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // Local Definitions
 var baseClassName = _bem.default.base;
-var componentClassName = 'site-footer';
+var componentClassName = 'label';
 /**
  * This is the component description.
  */
 
-var SiteFooter = _ref => {
+var Label = _ref => {
   var {
     id,
     className: userClassName,
     style,
-    children // ...otherProps
-
+    children,
+    color,
+    isCompact,
+    isGhost
   } = _ref;
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
-  return /*#__PURE__*/React.createElement("footer", {
+  return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
+    className: [baseClassName, componentClassName, userClassName, "x-".concat(color), isCompact && _bem.default.modifierCompact, isGhost && _bem.default.modifierGhost].filter(e => e).join(' '),
+    style: style
   }, children);
 };
 
-SiteFooter.propTypes = {
+Label.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -61,13 +60,28 @@ SiteFooter.propTypes = {
    */
   style: _propTypes.default.objectOf(_propTypes.default.string),
 
+  /**
+   * Whether the button has the ghost style
+   */
+  isGhost: _propTypes.default.bool,
+
+  /**
+   * Whether the button is compact
+   */
+  isCompact: _propTypes.default.bool,
+
+  /**
+   *  The default font color to display for the label
+   */
+  color: _propTypes.default.string,
+
   /**
    *  The children JSX
    */
   children: _propTypes.default.node
 };
-SiteFooter.defaultProps = {// someProp:false
+Label.defaultProps = {
+  color: 'main1'
 };
-SiteFooter.Section = _common.Section;
-var _default = SiteFooter;
+var _default = Label;
 exports.default = _default;

package/dist/cjs/{f/fields/TextArea → a/Label}/index.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "TextArea", {
+Object.defineProperty(exports, "Label", {
   enumerable: true,
   get: function get() {
-    return _TextArea.default;
+    return _Label.default;
   }
 });
 
-var _TextArea = _interopRequireDefault(require("./TextArea"));
+var _Label = _interopRequireDefault(require("./Label"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+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 _default = /*#__PURE__*/React.createContext({});
+
+exports.default = _default;

package/dist/cjs/{c/BlogContext/ContextProvider.js → a/ModalContextProvider/ModalContextProvider.js}

@@ -9,10 +9,10 @@ var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactRouterDom = require("react-router-dom");
-
 var _Context = _interopRequireDefault(require("./Context"));
 
+var _common = require("./common");
+
 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); }
@@ -20,44 +20,46 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 /* @pareto-engineering/generator-front 1.0.12 */
+// Package-level Imports
 
 /**
  * This is the component description.
  */
-var BlogContextProvider = _ref => {
+var ModalContextProvider = _ref => {
   var {
-    urlMap,
-    children // ...otherProps
-
+    children
   } = _ref;
-  var generateBlogPath = (0, React.useCallback)((key, variables) => (0, _reactRouterDom.generatePath)(urlMap[key], variables), [urlMap]);
+  var [isOpen, setModalState] = (0, React.useState)(false);
+  var [modal, setModal] = (0, React.useState)({});
+  var setOpen = (0, React.useCallback)(() => setModalState(true), []);
+  var setClose = (0, React.useCallback)(() => setModalState(false), []);
+
+  var openModal = component => {
+    setModal(() => component);
+    setOpen();
+  };
+
   return /*#__PURE__*/React.createElement(_Context.default.Provider, {
     value: {
-      generateBlogPath,
-      urlMap
+      isOpen,
+      modal,
+      setOpen,
+      setClose,
+      setModal,
+      openModal
     }
-  }, children);
+  }, children, modal && /*#__PURE__*/React.createElement(_common.ModalRoot, {
+    modal: modal
+  }));
 };
 
-BlogContextProvider.propTypes = {
-  /**
-   * The hash of urls
-   */
-  urlMap: _propTypes.default.shape({
-    HOME: _propTypes.default.string.isRequired,
-    LIST: _propTypes.default.string.isRequired,
-    LIST_PAGINATED: _propTypes.default.string.isRequired,
-    LIST_CATEGORY: _propTypes.default.string.isRequired,
-    LIST_CATEGORY_PAGINATED: _propTypes.default.string.isRequired,
-    SINGLE: _propTypes.default.string.isRequired
-  }).isRequired,
-
+ModalContextProvider.propTypes = {
   /**
    *  The children JSX
    */
   children: _propTypes.default.node
 };
-BlogContextProvider.defaultProps = {// someProp:false
+ModalContextProvider.defaultProps = {// someProp:false
 };
-var _default = BlogContextProvider;
+var _default = ModalContextProvider;
 exports.default = _default;

package/dist/cjs/a/ModalContextProvider/common/ModalRoot/ModalRoot.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ = require("../../../..");
+
+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 = _bem.default.base;
+var componentClassName = 'modal-root'; // Local Definitions
+
+/**
+ * This is the component description.
+ */
+
+var ModalRoot = _ref => {
+  var {
+    modal: ModalComponent
+  } = _ref;
+  (0, React.useLayoutEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
+  var {
+    isOpen
+  } = (0, _.useModal)();
+  return isOpen ? /*#__PURE__*/React.createElement("div", {
+    className: [baseClassName, componentClassName].filter(e => e).join(' ')
+  }, /*#__PURE__*/React.createElement(ModalComponent, null)) : null;
+};
+
+ModalRoot.propTypes = {
+  /**
+   *  The component to render
+   */
+  modal: _propTypes.default.oneOfType([_propTypes.default.elementType, _propTypes.default.object])
+};
+ModalRoot.defaultProps = {// someProp:false
+};
+var _default = ModalRoot;
+exports.default = _default;

package/dist/cjs/a/ModalContextProvider/common/ModalRoot/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ModalRoot", {
+  enumerable: true,
+  get: function get() {
+    return _ModalRoot.default;
+  }
+});
+
+var _ModalRoot = _interopRequireDefault(require("./ModalRoot"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/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/cjs/{c/BlogPostsList → a/ModalContextProvider}/common/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Card", {
+Object.defineProperty(exports, "ModalRoot", {
   enumerable: true,
   get: function get() {
-    return _Card.Card;
+    return _ModalRoot.ModalRoot;
   }
 });
 
-var _Card = require("./Card");
+var _ModalRoot = require("./ModalRoot");

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Context", {
+  enumerable: true,
+  get: function get() {
+    return _Context.default;
+  }
+});
+Object.defineProperty(exports, "ModalContextProvider", {
+  enumerable: true,
+  get: function get() {
+    return _ModalContextProvider.default;
+  }
+});
+Object.defineProperty(exports, "useModal", {
+  enumerable: true,
+  get: function get() {
+    return _useModal.default;
+  }
+});
+
+var _Context = _interopRequireDefault(require("./Context"));
+
+var _ModalContextProvider = _interopRequireDefault(require("./ModalContextProvider"));
+
+var _useModal = _interopRequireDefault(require("./useModal"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/a/ModalContextProvider/useModal.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _Context = _interopRequireDefault(require("./Context"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = () => (0, _react.useContext)(_Context.default);
+
+exports.default = _default;