@pareto-engineering/design-system 0.0.1-alpha.9 → 0.0.8-testing-id.0

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

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "HorizontalMenu", {
+  enumerable: true,
+  get: function get() {
+    return _HorizontalMenu.HorizontalMenu;
+  }
+});
+Object.defineProperty(exports, "Navigator", {
+  enumerable: true,
+  get: function get() {
+    return _Navigator.Navigator;
+  }
+});
+Object.defineProperty(exports, "Sidebar", {
+  enumerable: true,
+  get: function get() {
+    return _Sidebar.Sidebar;
+  }
+});
+Object.defineProperty(exports, "Slide", {
+  enumerable: true,
+  get: function get() {
+    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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ContentSlides", {
+  enumerable: true,
+  get: function get() {
+    return _ContentSlides.default;
+  }
+});
+Object.defineProperty(exports, "ContentSlidesContext", {
+  enumerable: true,
+  get: function get() {
+    return _Context.default;
+  }
+});
+Object.defineProperty(exports, "useContentSlides", {
+  enumerable: true,
+  get: function get() {
+    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

@@ -0,0 +1,314 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$class-sidebar:sidebar;
+$class-horizontal-menu:horizontal-menu;
+$class-slide:slide;
+$class-navigator:navigator;
+
+//$class-main-container:main;
+
+$default-sidebar-width:minmax(250px, 330px);
+$default-border:none;//2px solid var(--grid);
+$default-border-radius:var(--theme-border-radius);
+$default-content-background: var(--background1);
+$default-padding:var(--u);
+
+$mobile-content-margin:6em;
+
+.#{bem.$base}.content-slides {
+  height: 100%;
+
+  .#{$class-sidebar} {
+    background: $default-content-background;
+    border-right: $default-border;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: space-between;
+    overflow: auto;
+
+    header,
+    .#{bem.$element-content},
+    footer {
+      padding: $default-padding;
+    }
+
+    header {
+      border-bottom: $default-border;
+    }
+
+    footer {
+      border-top: $default-border;
+    }
+
+    /* stylelint-disable selector-max-compound-selectors -- Required here  */
+    .#{bem.$element-content} {
+      .icon-list {
+        .#{bem.$element-item} {
+          &:not(:last-child) {
+            margin-bottom: 1em;
+          }
+        }
+      }
+    }
+    /* stylelint-enable selector-max-compound-selectors */
+  }
+
+
+  //.#{$class-main-container} {
+  main {
+    overflow: hidden;
+    position: relative;
+
+    .#{$class-slide} {
+      height: 100%;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      transition: opacity .3s;
+
+      .wrapper {
+        padding: var(--u);
+
+        .#{bem.$element-content} {
+          background: $default-content-background;
+
+          border: var(--theme-border);
+          border-radius: $default-border-radius;
+          max-width: 600px;
+          padding: $default-padding;
+          position: relative;
+          width: 90%;
+          //z-index: 1;
+
+          .#{$class-navigator} {
+            display: flex;
+            margin-top: $default-padding;
+          }
+        }
+      }
+
+
+      &:not(.#{bem.$modifier-active}) {
+        opacity: .5;
+        z-index: -1;
+      }
+
+      &.#{bem.$modifier-active} {
+        opacity: 1;
+      }
+    }
+  }
+
+  .#{$class-horizontal-menu} {
+    background: $default-content-background;
+    border-bottom: var(--theme-border);
+    color: var(--heading);
+    z-index: 1;
+
+    .#{bem.$element-content} {
+      display: grid;
+      grid-template-columns: 1fr [title] 6fr 1fr;
+      padding: $default-padding;
+
+      .title {
+        grid-column: title/span 1;
+        text-align: center;
+        //font-weight:600;
+      }
+
+      .left {
+        text-align: left;
+
+        .prev-button {
+          font-family: var(--theme-default-paragraph);
+          font-size: calc(var(--s2) * 1em);
+        }
+      }
+
+      .right {
+        text-align: right;
+      }
+    }
+    //
+  }
+
+  @include mixins.media($to:$sm-md) {
+    display: flex;
+    flex-direction: column;
+
+    .#{$class-sidebar} {
+      display: none;
+    }
+
+    //.#{$class-main-container} {
+
+    main {
+      flex-grow: 1;
+
+      .#{$class-slide} {
+        display: flex;
+        flex-direction: column;
+        justify-content: safe center;
+        overflow: auto;
+
+        /*
+        > img {
+          height: 100%;
+          object-fit: cover;
+          position: absolute;
+          top: 0;
+          transition: opacity .3s;
+          width: 100%;
+        } */
+
+        /* stylelint-disable selector-max-compound-selectors -- Required here  */
+        /* stylelint-disable max-nesting-depth -- Required here  */
+        /* stylelint-disable scss/media-feature-value-dollar-variable -- For orientation mq */
+        .wrapper {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          //justify-content: safe center;
+          overflow: auto;
+
+          -ms-overflow-style: none;
+          padding-bottom: 0;
+          padding-top: 0;
+          //padding-bottom: $mobile-content-margin;
+          //padding-top: $mobile-content-margin;
+          scrollbar-width: none;
+
+          &::-webkit-scrollbar {
+            display: none;
+          }
+
+          &::after,
+          &::before {
+            //background: red;
+            content: " ";
+            flex-grow: 1;
+            white-space: pre;
+            //z-index: 20;
+            @media (orientation: portrait) {
+              min-height: calc(#{$mobile-content-margin} + var(--u));
+            }
+          }
+          @media (orientation: landscape) {
+            &::before {
+              min-height: var(--u);
+            }
+          }
+
+          .#{bem.$element-content} {
+            margin: 0 auto;
+
+            .#{$class-navigator} {
+              .prev {
+                display: none;
+              }
+
+              .next {
+                flex-grow: 1;
+                justify-content: flex-end;
+              }
+            }
+          }
+        }
+        /* stylelint-enable */
+
+        /*
+        &:not(.#{bem.$modifier-active}) {
+        }
+
+        &.#{bem.$modifier-active} {
+        } */
+      }
+    }
+  }
+
+  @include mixins.media($from:$sm-md) {
+    display: grid;
+    grid-template-columns: $default-sidebar-width 1fr;
+
+    .#{$class-horizontal-menu} {
+      display: none;
+    }
+
+    &.simple {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto 1fr;
+
+      .#{$class-horizontal-menu} {
+        display: block;
+
+        .#{bem.$element-content} {
+          padding: .5em;
+        }
+
+        .left,
+        .right {
+          display: none;
+        }
+      }
+    }
+
+
+
+    main {
+      .#{$class-slide} {
+        //display: flex;
+        //flex-direction: column;
+        overflow: auto;
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+          background: transparent;  /* Optional: just make scrollbar invisible */
+          width: 0;  /* Remove scrollbar space */
+        }
+
+        /*
+        > img {
+          height: 100%;
+          object-fit: cover;
+          position: absolute;
+          top: 0;
+          transition: opacity .3s;
+          width: 100%;
+        } */
+
+        .wrapper {
+          display: flex;
+          //flex-direction: column;
+          height: 100%;
+          justify-content: center;
+          //overflow: auto;
+          .#{bem.$element-content} {
+            height: min-content;
+            margin: auto 0;
+
+            .#{$class-navigator} {
+              justify-content: space-between;
+            }
+          }
+        }
+
+
+        /*
+        &:not(.#{bem.$modifier-active}) {
+        }
+
+        &.#{bem.$modifier-active} {
+        } */
+      }
+    }
+  }
+}
+
+

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

@@ -0,0 +1,11 @@
+"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;

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

@@ -0,0 +1,77 @@
+"use strict";
+
+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"));
+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 componentClassName = 'hero';
+
+/**
+ * This is the component description.
+ */
+var Hero = _ref => {
+  var {
+    id,
+    className: userClassName,
+    style,
+    title,
+    illustration,
+    cta
+    // ...otherProps
+  } = _ref;
+  (0, React.useLayoutEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+    // {...otherProps}
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "title"
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: "illustration"
+  }, illustration), /*#__PURE__*/React.createElement("div", {
+    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
+};
+var _default = Hero;
+exports.default = _default;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Hero", {
+  enumerable: true,
+  get: function get() {
+    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

@@ -0,0 +1,41 @@
+/* @pareto-engineering/generator-front 1.0.9 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-padding:1em;
+
+.#{bem.$base}.hero {
+  display: grid;
+  grid-template-areas:
+    "illustration"
+    "title"
+    "cta";
+  text-align: center;
+
+  @include mixins.media($from:$sm-md) {
+    grid-template-areas:
+      "title illustration"
+      "cta illustration";
+    grid-template-columns: var(--content-width, minmax(400px, 650px)) 1fr;
+    text-align: left;
+  }
+
+  > .title {
+    grid-area: title;
+    padding: $default-padding;
+  }
+
+  > .illustration {
+    background: #df1f00;
+    grid-area: illustration;
+  }
+
+  > .cta {
+    grid-area: cta;
+    padding: $default-padding;
+  }
+}
+
+

package/dist/cjs/c/Shortener/Shortener.js

@@ -0,0 +1,100 @@
+"use strict";
+
+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 _b = require("../../b");
+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 = 'shortener';
+
+/**
+ * This is the component description.
+ */
+var Shortener = _ref => {
+  var {
+    id,
+    className: userClassName,
+    style,
+    children,
+    // ...otherProps
+
+    as: Element,
+    limit,
+    separator,
+    countLetters
+  } = _ref;
+  (0, React.useLayoutEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
+  var [displayFull, setDisplayFull] = (0, React.useState)(false);
+  var text = children || '';
+  var excerpt = countLetters ? text.slice(0, limit) : text.split(separator).slice(0, limit).join(separator);
+  var doShorten = countLetters ? text.length > limit : text.split(separator).length > limit;
+  return /*#__PURE__*/React.createElement(Element, {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+    // {...otherProps}
+  }, text && !displayFull && doShorten ? /*#__PURE__*/React.createElement(React.Fragment, null, excerpt, '... ', /*#__PURE__*/React.createElement(_b.Button, {
+    isSimple: true,
+    className: "s-2",
+    onClick: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDisplayFull(true);
+    }
+  }, "Show")) : text);
+};
+Shortener.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,
+  /**
+   * Which html tag to use
+   */
+  as: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+  // as: PropTypes.string,
+
+  /**
+   * How many separated elements to accept before the read more.
+   * This may mean how many words, or how many letters if `countLetters=true`
+   */
+  limit: _propTypes.default.number,
+  /**
+   * Which separator to use to count words. This is only used in if `countLetters=false`.
+   */
+  separator: _propTypes.default.string,
+  /**
+   * Whether to count letters instead of using a split
+   */
+  countLetters: _propTypes.default.bool
+};
+Shortener.defaultProps = {
+  // someProp:false
+  as: 'span',
+  separator: ' ',
+  limit: 20,
+  countLetters: false
+};
+var _default = Shortener;
+exports.default = _default;

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

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

package/dist/cjs/c/Shortener/styles.scss

@@ -0,0 +1,7 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+// .#{bem.$base}.shortener {
+
+// }