@pareto-engineering/design-system 1.0.3 → 2.0.0-alpha.5

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

@@ -0,0 +1,308 @@
+/* @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(--y);
+$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 {
+    background: var(--dark-y);
+    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: $default-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: $default-border;
+    color: var(--heading);
+
+    .#{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;
+      }
+
+      .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;
+              }
+            }
+          }
+        }
+        /* 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/es/c/ContentSlides/useContentSlides.js

@@ -0,0 +1,3 @@
+import { useContext } from 'react';
+import Context from "./Context";
+export default (() => useContext(Context));

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

@@ -0,0 +1,72 @@
+/* @pareto-engineering/generator-front 1.0.9 */
+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 = 'hero';
+/**
+ * This is the component description.
+ */
+
+const Hero = ({
+  id,
+  className: userClassName,
+  style,
+  title,
+  illustration,
+  cta // ...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("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.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
+};
+export default Hero;

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

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

package/dist/es/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/es/c/Shortener/Shortener.js

@@ -0,0 +1,98 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useLayoutEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem'; // Local Definitions
+
+import { Button } from "../../b";
+const baseClassName = styleNames.base;
+const componentClassName = 'shortener';
+/**
+ * This is the component description.
+ */
+
+const Shortener = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  // ...otherProps
+  as: Element,
+  limit,
+  separator,
+  countLetters
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const [displayFull, setDisplayFull] = useState(false);
+  const text = children || '';
+  const excerpt = countLetters ? text.slice(0, limit) : text.split(separator).slice(0, limit).join(separator);
+  const 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(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.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
+   */
+  as: PropTypes.oneOfType([PropTypes.string, PropTypes.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.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
+   */
+  countLetters: PropTypes.bool
+};
+Shortener.defaultProps = {
+  // someProp:false
+  as: 'span',
+  separator: ' ',
+  limit: 20,
+  countLetters: false
+};
+export default Shortener;

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

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

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

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

package/dist/es/c/SiteFooter/SiteFooter.js

@@ -0,0 +1,56 @@
+/* @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 { Section } from "./common"; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'site-footer';
+/**
+ * This is the component description.
+ */
+
+const SiteFooter = ({
+  id,
+  className: userClassName,
+  style,
+  children // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("footer", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style // {...otherProps}
+
+  }, children);
+};
+
+SiteFooter.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
+};
+SiteFooter.defaultProps = {// someProp:false
+};
+SiteFooter.Section = Section;
+export default SiteFooter;

package/dist/es/c/SiteFooter/common/Section/Section.js

@@ -0,0 +1,73 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import PropTypes from 'prop-types'; // Local Definitions
+
+import styleNames from '@pareto-engineering/bem';
+import { Title } from "../../../../b";
+const baseClassName = styleNames.base;
+console.log(styleNames);
+const componentClassName = styleNames.elementSection;
+/**
+ * This is the component description.
+ */
+
+const Section = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  title,
+  span // ...otherProps
+
+}) => {
+  console.log(1);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: {
+      '--span': span,
+      ...style
+    } // {...otherProps}
+
+  }, title && /*#__PURE__*/React.createElement(Title, {
+    headingAs: "p",
+    headingClassName: "h4 c-on-y",
+    heading: title
+  }), children);
+};
+
+Section.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 of the footer section
+   */
+  title: PropTypes.node,
+
+  /**
+   *  How many fractional units should the column width be, on desktop
+   */
+  span: PropTypes.number
+};
+Section.defaultProps = {
+  span: 1
+};
+export default Section;

package/dist/es/c/SiteFooter/common/Section/index.js

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

package/dist/es/c/SiteFooter/common/index.js

@@ -0,0 +1 @@
+export { Section } from "./Section";

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

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