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

package/dist/cjs/c/ContentSlides/common/Navigator/Navigator.js

@@ -4,28 +4,22 @@ 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 _useContentSlides = _interopRequireDefault(require("../../useContentSlides"));
-
 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; }
-
 /* @pareto-engineering/generator-front 1.0.12 */
+
 // Local Definitions
+
 var componentClassName = 'navigator';
+
 /**
  * This is the component description.
  */
-
 var Navigator = _ref => {
   var {
     id,
@@ -38,17 +32,17 @@ var Navigator = _ref => {
     stepsBackwards,
     customPrevStep,
     customNextStep,
-    isLoading // ...otherProps
-
+    isLoading
+    // ...otherProps
   } = _ref;
   var {
     setPrevStepIndex,
     setNextStepIndex,
     isFirstStep,
     isLastStep,
-    isDebug // currentStep,
+    isDebug
+    // currentStep,
     // currentStepIndex,
-
   } = (0, _useContentSlides.default)();
   return /*#__PURE__*/React.createElement("div", {
     id: id,
@@ -74,61 +68,51 @@ var Navigator = _ref => {
       } else {
         setNextStepIndex(stepsForward);
       }
-    }
+    },
+    isCompact: true
   }, "Next") : /*#__PURE__*/React.createElement("span", null));
 };
-
 Navigator.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),
-
   /**
    * Whether the user can move to the next slide
    */
   canMoveForward: _propTypes.default.bool,
-
   /**
    * The previous color
    */
   previousColor: _propTypes.default.string,
-
   /**
    * The next color
    */
   nextColor: _propTypes.default.string,
-
   /**
    * Number of forward steps for the customNextStep
    */
   stepsForward: _propTypes.default.number,
-
   /**
    * Number of backward steps for the customPrevStep
    */
   stepsBackwards: _propTypes.default.number,
-
   /**
    * A custom previous function
    */
   customPrevStep: _propTypes.default.func,
-
   /**
    * A custom next function
    */
   customNextStep: _propTypes.default.func,
-
   /**
    * Button loading state
    */
@@ -136,8 +120,8 @@ Navigator.propTypes = {
 };
 Navigator.defaultProps = {
   canMoveForward: true,
-  previousColor: 'main1',
-  nextColor: 'main1',
+  previousColor: 'main2',
+  nextColor: 'main2',
   stepsForward: 1,
   stepsBackwards: 1
 };

package/dist/cjs/c/ContentSlides/common/Navigator/index.js

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

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

@@ -4,41 +4,34 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _a = require("../../../../a");
-
 var _b = require("../../../../b");
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 var _useContentSlides = _interopRequireDefault(require("../../useContentSlides"));
-
 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; }
-
 /* @pareto-engineering/generator-front 1.0.12 */
+
 // Local Definitions
+
 // const baseClassName = styleNames.base
+
 var componentClassName = 'sidebar';
+
 /**
  * This is the component description.
  */
-
 var Sidebar = _ref => {
   var {
     id,
     className: userClassName,
     style,
     header,
-    footer // ...otherProps
-
+    footer
+    // ...otherProps
   } = _ref;
   var {
     steps,
@@ -52,14 +45,15 @@ var Sidebar = _ref => {
   } = (0, _useContentSlides.default)();
   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: _bem.default.elementContent
+    className: _exports.default.elementContent
   }, /*#__PURE__*/React.createElement(_a.IconList, null, steps.map((step, i) =>
   /*#__PURE__*/
-
   /* eslint-disable no-nested-ternary -- bc of math inequality cases */
   React.createElement(_a.IconList.Item, {
     key: step.location,
@@ -68,39 +62,34 @@ var Sidebar = _ref => {
     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(_b.ThemeSelector, {
+  /* eslint-enable no-nested-ternary */))), footer || true ? /*#__PURE__*/React.createElement("footer", null, footer, /*#__PURE__*/React.createElement(_b.ThemeSelector, {
     className: "x-heading"
   })) : /*#__PURE__*/React.createElement("span", null));
 };
-
 Sidebar.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 header JSX
    */
   header: _propTypes.default.node,
-
   /**
    *  The footer JSX
    */
   footer: _propTypes.default.node
 };
-Sidebar.defaultProps = {// someProp:false
+Sidebar.defaultProps = {
+  // someProp:false
 };
 var _default = Sidebar;
 exports.default = _default;

package/dist/cjs/c/ContentSlides/common/Sidebar/index.js

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

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

@@ -4,37 +4,32 @@ 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"));
 var _useContentSlides = _interopRequireDefault(require("../../useContentSlides"));
-
 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; }
-
 /* @pareto-engineering/generator-front 1.0.12 */
+
 // Local Definitions
+
 // const baseClassName = styleNames.base
+
 var componentClassName = 'slide';
+
 /**
  * This is the component description.
  */
-
 var Slide = _ref => {
   var {
     id,
     className: userClassName,
     style,
     children,
-    index // ...otherProps
-
+    index
+    // ...otherProps
   } = _ref;
   var {
     currentStepIndex
@@ -42,8 +37,9 @@ var Slide = _ref => {
   var isActive = currentStepIndex === index;
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [// baseClassName,
-    isActive && _bem.default.modifierActive, componentClassName, userClassName].filter(e => e).join(' '),
+    className: [
+    // baseClassName,
+    isActive && _exports.default.modifierActive, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement("div", {
     className: "wrapper"
@@ -51,34 +47,30 @@ var Slide = _ref => {
     className: "content"
   }, children)));
 };
-
 Slide.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,
-
   /**
    * The index of this slide
    */
   index: _propTypes.default.number
 };
-Slide.defaultProps = {// someProp:false
+Slide.defaultProps = {
+  // someProp:false
 };
 var _default = Slide;
 exports.default = _default;

package/dist/cjs/c/ContentSlides/common/Slide/index.js

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

package/dist/cjs/c/ContentSlides/common/index.js

@@ -3,35 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Sidebar", {
+Object.defineProperty(exports, "HorizontalMenu", {
   enumerable: true,
   get: function get() {
-    return _Sidebar.Sidebar;
+    return _HorizontalMenu.HorizontalMenu;
   }
 });
-Object.defineProperty(exports, "HorizontalMenu", {
+Object.defineProperty(exports, "Navigator", {
   enumerable: true,
   get: function get() {
-    return _HorizontalMenu.HorizontalMenu;
+    return _Navigator.Navigator;
   }
 });
-Object.defineProperty(exports, "Slide", {
+Object.defineProperty(exports, "Sidebar", {
   enumerable: true,
   get: function get() {
-    return _Slide.Slide;
+    return _Sidebar.Sidebar;
   }
 });
-Object.defineProperty(exports, "Navigator", {
+Object.defineProperty(exports, "Slide", {
   enumerable: true,
   get: function get() {
-    return _Navigator.Navigator;
+    return _Slide.Slide;
   }
 });
-
 var _Sidebar = require("./Sidebar");
-
 var _HorizontalMenu = require("./HorizontalMenu");
-
 var _Slide = require("./Slide");
-
 var _Navigator = require("./Navigator");

package/dist/cjs/c/ContentSlides/index.js

@@ -9,23 +9,19 @@ Object.defineProperty(exports, "ContentSlides", {
     return _ContentSlides.default;
   }
 });
-Object.defineProperty(exports, "useContentSlides", {
+Object.defineProperty(exports, "ContentSlidesContext", {
   enumerable: true,
   get: function get() {
-    return _useContentSlides.default;
+    return _Context.default;
   }
 });
-Object.defineProperty(exports, "ContentSlidesContext", {
+Object.defineProperty(exports, "useContentSlides", {
   enumerable: true,
   get: function get() {
-    return _Context.default;
+    return _useContentSlides.default;
   }
 });
-
 var _ContentSlides = _interopRequireDefault(require("./ContentSlides"));
-
 var _useContentSlides = _interopRequireDefault(require("./useContentSlides"));
-
 var _Context = _interopRequireDefault(require("./Context"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/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/cjs/c/ContentSlides/useContentSlides.js

@@ -4,13 +4,8 @@ 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;

package/dist/cjs/c/Hero/Hero.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 = 'hero';
+
 /**
  * This is the component description.
  */
-
 var Hero = _ref => {
   var {
     id,
@@ -31,8 +25,8 @@ var Hero = _ref => {
     style,
     title,
     illustration,
-    cta // ...otherProps
-
+    cta
+    // ...otherProps
   } = _ref;
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
@@ -40,8 +34,8 @@ var Hero = _ref => {
   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", {
@@ -50,39 +44,34 @@ var Hero = _ref => {
     className: "cta"
   }, cta));
 };
-
 Hero.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 title to be displayed
    */
   title: _propTypes.default.node,
-
   /**
    * The illustration to be displayed
    */
   illustration: _propTypes.default.node,
-
   /**
    * The CTA to be displayed
    */
   cta: _propTypes.default.node
 };
-Hero.defaultProps = {// someProp:false
+Hero.defaultProps = {
+  // someProp:false
 };
 var _default = Hero;
 exports.default = _default;

package/dist/cjs/c/Hero/index.js

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

package/dist/cjs/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;