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

package/dist/es/c/ContentSlides/common/Sidebar/Sidebar.js

@@ -3,23 +3,27 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { IconList } from "../../../../a";
 import { ThemeSelector } from "../../../../b";
-import styleNames from '@pareto-engineering/bem';
-import useContentSlides from "../../useContentSlides"; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+import useContentSlides from "../../useContentSlides";
+
+// Local Definitions
+
 // const baseClassName = styleNames.base
 
 const componentClassName = 'sidebar';
+
 /**
  * This is the component description.
  */
-
-const Sidebar = ({
-  id,
-  className: userClassName,
-  style,
-  header,
-  footer // ...otherProps
-
-}) => {
+const Sidebar = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    header,
+    footer
+    // ...otherProps
+  } = _ref;
   const {
     steps,
     // setPrevStepIndex,
@@ -32,14 +36,15 @@ const Sidebar = ({
   } = useContentSlides();
   return /*#__PURE__*/React.createElement("nav", {
     id: id,
-    className: [// baseClassName,
+    className: [
+    // baseClassName,
+
     componentClassName, userClassName].filter(e => e).join(' '),
     style: style
   }, header ? /*#__PURE__*/React.createElement("header", null, header) : /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("div", {
     className: styleNames.elementContent
   }, /*#__PURE__*/React.createElement(IconList, null, steps.map((step, i) =>
   /*#__PURE__*/
-
   /* eslint-disable no-nested-ternary -- bc of math inequality cases */
   React.createElement(IconList.Item, {
     key: step.location,
@@ -48,38 +53,33 @@ const Sidebar = ({
     className: [currentStepIndex === i ? 'x-heading' : i < currentStepIndex ? 'pointer x-paragraph xh-main2' : 'x-subtitle', 'c-x'].filter(e => e).join(' '),
     onClick: i < currentStepIndex ? () => setStepIndex(i) : undefined
   }, step.title)
-  /* eslint-enable no-nested-ternary */
-  ))), footer || true ? /*#__PURE__*/React.createElement("footer", null, footer, /*#__PURE__*/React.createElement(ThemeSelector, {
+  /* eslint-enable no-nested-ternary */))), footer || true ? /*#__PURE__*/React.createElement("footer", null, footer, /*#__PURE__*/React.createElement(ThemeSelector, {
     className: "x-heading"
   })) : /*#__PURE__*/React.createElement("span", null));
 };
-
 Sidebar.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 header JSX
    */
   header: PropTypes.node,
-
   /**
    *  The footer JSX
    */
   footer: PropTypes.node
 };
-Sidebar.defaultProps = {// someProp:false
+Sidebar.defaultProps = {
+  // someProp:false
 };
 export default Sidebar;

package/dist/es/c/ContentSlides/common/Slide/Slide.js

@@ -1,30 +1,35 @@
 /* @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';
 
-import useContentSlides from "../../useContentSlides"; // const baseClassName = styleNames.base
+// Local Definitions
+import useContentSlides from "../../useContentSlides";
+
+// const baseClassName = styleNames.base
 
 const componentClassName = 'slide';
+
 /**
  * This is the component description.
  */
-
-const Slide = ({
-  id,
-  className: userClassName,
-  style,
-  children,
-  index // ...otherProps
-
-}) => {
+const Slide = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    index
+    // ...otherProps
+  } = _ref;
   const {
     currentStepIndex
   } = useContentSlides();
   const isActive = currentStepIndex === index;
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [// baseClassName,
+    className: [
+    // baseClassName,
     isActive && styleNames.modifierActive, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement("div", {
@@ -33,33 +38,29 @@ const Slide = ({
     className: "content"
   }, children)));
 };
-
 Slide.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 index of this slide
    */
   index: PropTypes.number
 };
-Slide.defaultProps = {// someProp:false
+Slide.defaultProps = {
+  // someProp:false
 };
 export default Slide;

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

@@ -1,8 +1,8 @@
 /* @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 *;
 
 $class-sidebar:sidebar;
 $class-horizontal-menu:horizontal-menu;
@@ -14,7 +14,7 @@ $class-navigator:navigator;
 $default-sidebar-width:minmax(250px, 330px);
 $default-border:none;//2px solid var(--grid);
 $default-border-radius:var(--theme-border-radius);
-$default-content-background:var(--y);
+$default-content-background: var(--background1);
 $default-padding:var(--u);
 
 $mobile-content-margin:6em;
@@ -61,7 +61,6 @@ $mobile-content-margin:6em;
 
   //.#{$class-main-container} {
   main {
-    background: var(--dark-y);
     overflow: hidden;
     position: relative;
 
@@ -79,7 +78,7 @@ $mobile-content-margin:6em;
         .#{bem.$element-content} {
           background: $default-content-background;
 
-          border: $default-border;
+          border: var(--theme-border);
           border-radius: $default-border-radius;
           max-width: 600px;
           padding: $default-padding;
@@ -108,8 +107,9 @@ $mobile-content-margin:6em;
 
   .#{$class-horizontal-menu} {
     background: $default-content-background;
-    border-bottom: $default-border;
+    border-bottom: var(--theme-border);
     color: var(--heading);
+    z-index: 1;
 
     .#{bem.$element-content} {
       display: grid;
@@ -124,6 +124,11 @@ $mobile-content-margin:6em;
 
       .left {
         text-align: left;
+
+        .prev-button {
+          font-family: var(--theme-default-paragraph);
+          font-size: calc(var(--s2) * 1em);
+        }
       }
 
       .right {
@@ -210,6 +215,7 @@ $mobile-content-margin:6em;
 
               .next {
                 flex-grow: 1;
+                justify-content: flex-end;
               }
             }
           }

package/dist/es/c/Hero/Hero.js

@@ -2,31 +2,34 @@
 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 = 'hero';
+
 /**
  * This is the component description.
  */
-
-const Hero = ({
-  id,
-  className: userClassName,
-  style,
-  title,
-  illustration,
-  cta // ...otherProps
-
-}) => {
+const Hero = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    title,
+    illustration,
+    cta
+    // ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
+    style: style
+    // {...otherProps}
   }, /*#__PURE__*/React.createElement("div", {
     className: "title"
   }, title), /*#__PURE__*/React.createElement("div", {
@@ -35,38 +38,33 @@ const Hero = ({
     className: "cta"
   }, cta));
 };
-
 Hero.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 title to be displayed
    */
   title: PropTypes.node,
-
   /**
    * The illustration to be displayed
    */
   illustration: PropTypes.node,
-
   /**
    * The CTA to be displayed
    */
   cta: PropTypes.node
 };
-Hero.defaultProps = {// someProp:false
+Hero.defaultProps = {
+  // someProp:false
 };
 export default Hero;

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

@@ -1,8 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.9 */
 
 @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 *;
 
 $default-padding:1em;
 

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

@@ -0,0 +1,76 @@
+/* @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';
+import { ModalHeader } from "./common";
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'modal';
+
+/**
+ * This is the component description.
+ */
+const Modal = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    title,
+    color,
+    close
+    // ...otherProps
+  } = _ref;
+  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,
+    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 header button
+   */
+  color: PropTypes.string,
+  /**
+   *  The function to run upon closing the modal, if any
+   */
+  close: 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/exports';
+import { Button } from "../../../..";
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'modal-header';
+
+/**
+ * This is the component description.
+ */
+const ModalHeader = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    title,
+    close,
+    color
+    // ...otherProps
+  } = _ref;
+  return /*#__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/c/{SiteFooter/common/Section → Modal}/index.js

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

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

@@ -0,0 +1,46 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-background: var(--background1);
+$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{
+  background: $default-background;
+  box-shadow: $default-box-shadow;
+  display: flex;
+  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 {
+    padding: $default-padding;
+  }
+
+  .modal-header {
+    background: $default-background;
+    border-bottom: var(--theme-border);
+    display: flex;
+    font-size: calc(var(--theme-heading-font-size-multiplier, 1) * var(--s1) * 1em);
+    justify-content: space-between;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    
+    > p {
+      padding: $default-padding;
+      margin: 0;
+    }
+  }
+}

package/dist/es/c/Shortener/Shortener.js

@@ -2,26 +2,29 @@
 import * as React from 'react';
 import { useLayoutEffect, useState } 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 { Button } from "../../b";
 const baseClassName = styleNames.base;
 const componentClassName = 'shortener';
+
 /**
  * This is the component description.
  */
+const Shortener = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    // ...otherProps
 
-const Shortener = ({
-  id,
-  className: userClassName,
-  style,
-  children,
-  // ...otherProps
-  as: Element,
-  limit,
-  separator,
-  countLetters
-}) => {
+    as: Element,
+    limit,
+    separator,
+    countLetters
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
@@ -32,8 +35,8 @@ const Shortener = ({
   return /*#__PURE__*/React.createElement(Element, {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
+    style: style
+    // {...otherProps}
   }, text && !displayFull && doShorten ? /*#__PURE__*/React.createElement(React.Fragment, null, excerpt, '... ', /*#__PURE__*/React.createElement(Button, {
     isSimple: true,
     className: "s-2",
@@ -44,28 +47,23 @@ const Shortener = ({
     }
   }, "Show")) : text);
 };
-
 Shortener.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,
-
   /**
    * Which html tag to use
    */
@@ -77,12 +75,10 @@ Shortener.propTypes = {
    * This may mean how many words, or how many letters if `countLetters=true`
    */
   limit: PropTypes.number,
-
   /**
    * Which separator to use to count words. This is only used in if `countLetters=false`.
    */
   separator: PropTypes.string,
-
   /**
    * Whether to count letters instead of using a split
    */