@pareto-engineering/design-system 2.0.0-alpha.2 → 2.0.0-alpha.23

package/dist/es/a/OvalIllustration/styles.scss

@@ -0,0 +1,102 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-clockwise-degree:60deg;
+$default-counter-clockwise-degree:-60deg;
+$default-ellipse-size:30% 43% at 50% 50%;
+
+.#{bem.$base}.oval-illustration {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+
+  &.left {
+    .oval-background {
+      transform: rotate($default-clockwise-degree);
+    }
+
+    .illustration {
+      transform: rotate($default-counter-clockwise-degree);
+
+      > img {
+        transform: rotate($default-clockwise-degree);
+      }
+    }
+  }
+
+  &.right {
+    .oval-background {
+      transform: rotate($default-counter-clockwise-degree);
+    }
+
+    .illustration {
+      transform: rotate($default-clockwise-degree);
+
+      > img {
+        transform: rotate($default-counter-clockwise-degree);
+      }
+    }
+  }
+
+  .oval-background {
+    background: var(--y);
+    clip-path: ellipse($default-ellipse-size);
+    overflow: hidden;
+    position: absolute;
+    z-index: 0;
+  }
+
+  .illustration {
+    clip-path: ellipse($default-ellipse-size);
+    overflow: hidden;
+
+    > img {
+      height: 100%;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+
+  // mobile style
+  @include mixins.media($to:$sm-md) {
+    .oval-background {
+      height: var(--mobile-size);
+      width: var(--mobile-size);
+    }
+
+    .illustration {
+      height: var(--mobile-size);
+      width: var(--mobile-size);
+    }
+  }
+
+  // tablet style
+  @include mixins.media($from:$xs-sm, $to:$sm-md) {
+    .oval-background {
+      height: var(--tablet-size);
+      width: var(--tablet-size);
+    }
+
+    .illustration {
+      height: var(--tablet-size);
+      width: var(--tablet-size);
+    }
+  }
+
+  // desktop style
+  @include mixins.media($from:$sm-md) {
+    .oval-background {
+      height: var(--desktop-size);
+      width: var(--desktop-size);
+    }
+
+    .illustration {
+      height: var(--desktop-size);
+      width: var(--desktop-size);
+    }
+  }
+}

package/dist/es/a/People/People.js

@@ -15,8 +15,9 @@ const People = ({
   id,
   className: userClassName,
   style,
-  imageHeightWidth,
-  children // ...otherProps
+  imageSize,
+  children,
+  columnWidth // ...otherProps
 
 }) => {
   useLayoutEffect(() => {
@@ -25,9 +26,9 @@ const People = ({
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, 'u1'].filter(e => e).join(' '),
-    style: {
-      '--image-height-width': imageHeightWidth,
-      ...style
+    style: { ...style,
+      '--image-size': imageSize,
+      '--column-width': columnWidth
     } // {...otherProps}
 
   }, children);
@@ -57,10 +58,16 @@ People.propTypes = {
   /**
    * The height and width of all the person's image
    */
-  imageHeightWidth: PropTypes.string
+  imageSize: PropTypes.string,
+
+  /**
+   * The width of the a person's column
+   */
+  columnWidth: PropTypes.string
 };
 People.defaultProps = {
-  imageHeightWidth: '3em'
+  imageSize: '3em',
+  columnWidth: '12em'
 };
 People.Person = Person;
 export default People;

package/dist/es/a/People/common/Person/Person.js

@@ -15,11 +15,12 @@ const Person = ({
   style,
   name,
   image,
-  role // ...otherProps
+  role,
+  color // ...otherProps
 
 }) => /*#__PURE__*/React.createElement("div", {
   id: id,
-  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
   style: style
 }, /*#__PURE__*/React.createElement("img", {
   className: "image v50 mr-v",
@@ -62,8 +63,14 @@ Person.propTypes = {
   /**
    *  The person's role
    */
-  role: PropTypes.string.isRequired
+  role: PropTypes.string.isRequired,
+
+  /**
+   * The base color of the person's component
+   */
+  color: PropTypes.string
 };
-Person.defaultProps = {// someProp:false
+Person.defaultProps = {
+  color: 'background2'
 };
 export default Person;

package/dist/es/a/People/styles.scss

@@ -9,22 +9,26 @@ $default-person-border-radius:2em;
 $default-padding:var(--u);
 $default-horizontal-margin: .5em;
 
+$default-grid-gap: 1em;
+
 .#{bem.$base}.people {
-  display: flex;
-  justify-content: center;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--column-width), 1fr));
+  gap:$default-grid-gap;
+
 
   .person {
     align-items: center;
-    background-color: var(--background2);
+    background-color: var(--y);
     border-radius: $default-person-border-radius;
     display: flex;
-    margin: 0 $default-horizontal-margin;
+
     padding-right: $default-padding;
 
     .image {
       border-radius: $default-border-radius;
-      height: var(--image-height-width);
-      width: var(--image-height-width);
+      height: var(--image-size);
+      width: var(--image-size);
     }
 
     .details {
@@ -34,21 +38,15 @@ $default-horizontal-margin: .5em;
 
       .name {
         margin-bottom: .25em;
+        color: var(--on-y);
       }
 
       .role {
-        color: var(--subtitle);
+        color: var(--on-y);
+        opacity: .5;
       }
     }
   }
-
-  @include mixins.media($to:$sm-md) {
-    flex-direction: column;
-
-    >:not(:last-child) {
-      margin-bottom: var(--u);
-    }
-  }
 }
 
 

package/dist/es/a/Shapes/Shapes.js

@@ -0,0 +1,149 @@
+/* @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'; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'shapes';
+/**
+ * This is the component description.
+ */
+
+const Shapes = ({
+  id,
+  className: userClassName,
+  style,
+  shape,
+  height,
+  overflow,
+  verticalAlign,
+  horizontalAlign // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: { ...style,
+      '--shape-height': height,
+      '--overflow': overflow,
+      '--vertical-align': verticalAlign,
+      '--horizontal-align': horizontalAlign
+    } // {...otherProps}
+
+  }, shape === 'triangle' && /*#__PURE__*/React.createElement("div", {
+    className: "triangle"
+  }), shape === 'inverted-triangle' && /*#__PURE__*/React.createElement("div", {
+    className: "inverted-triangle"
+  }), shape === 'half-ellipses' && /*#__PURE__*/React.createElement("div", {
+    className: "half-ellipses"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "up"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "down"
+  })), shape === 'ellipse' && /*#__PURE__*/React.createElement("div", {
+    className: "ellipse"
+  }), shape === 'diamonds' && /*#__PURE__*/React.createElement("div", {
+    className: "diamonds"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "top-right"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "bottom-left"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "bottom-right"
+  })), shape === 'rectangles' && /*#__PURE__*/React.createElement("div", {
+    className: "rectangles"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "top"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "center"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "bottom"
+  })), shape === 'half-ellipse' && /*#__PURE__*/React.createElement("div", {
+    className: "half-ellipse"
+  }), shape === 'circle' && /*#__PURE__*/React.createElement("div", {
+    className: "circle"
+  }), shape === 'half-circle' && /*#__PURE__*/React.createElement("div", {
+    className: "half-circle"
+  }), shape === 'ellipses' && /*#__PURE__*/React.createElement("div", {
+    className: "ellipses"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "first"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "second"
+  })), shape === 'spiral' && /*#__PURE__*/React.createElement("div", {
+    className: "spiral"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "circle-one"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "circle-two"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "circle-three"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "circle-four"
+  })), shape === 'rotated-ellipses' && /*#__PURE__*/React.createElement("div", {
+    className: "rotated-ellipses"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ellipse-one"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ellipse-two"
+  })), shape === 'intersecting-circles' && /*#__PURE__*/React.createElement("div", {
+    className: "intersecting-circles"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "left"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "right"
+  })));
+};
+
+Shapes.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 height of the shape.
+   */
+  height: PropTypes.string,
+
+  /**
+   * The vertical alignment of the shape.
+   */
+  verticalAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
+
+  /**
+   * The horizontal alignment of the shape.
+   */
+  horizontalAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
+
+  /**
+   * The options of a shape to use
+   */
+  shape: PropTypes.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles', 'rotated-ellipses', 'inverted-triangle', 'intersecting-circles']),
+
+  /**
+   * The overflow of the shape.
+   */
+  overflow: PropTypes.oneOf(['hidden', 'visible'])
+};
+Shapes.defaultProps = {
+  verticalAlign: 'center',
+  horizontalAlign: 'center',
+  shape: 'triangle',
+  overflow: 'hidden'
+};
+export default Shapes;

package/dist/es/a/Shapes/index.js

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

package/dist/es/a/Shapes/styles.scss

@@ -0,0 +1,255 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-ellipse-height:50em;
+$default-diamond-height:40em;
+$default-circle-height:50em;
+$default-triangle-height:40em;
+$default-rectangle-height:50em;
+$default-shapes-opacity:.8;
+
+.#{bem.$base}.shapes {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: var(--overflow);
+    justify-content: var(--vertical-align);
+    align-items: var(--horizontal-align);
+    height: 100%;
+    width: 100%;
+
+    .triangle {
+      background-image: linear-gradient(transparent, var(--dark-y));
+      clip-path: polygon(0 0, 50% 100%, 100% 0);
+      height: calc(var(--shape-height, #{$default-triangle-height}) * 0.86);
+      opacity: $default-shapes-opacity;
+      width: var(--shape-height, #{$default-triangle-height});
+    }
+
+    .inverted-triangle {
+      background-image: linear-gradient(var(--dark-y), transparent);
+      clip-path: polygon(50% 0, 0 100%, 100% 100%);
+      height: calc(var(--shape-height, #{$default-triangle-height}) * 0.86);
+      opacity: $default-shapes-opacity;
+      width: var(--shape-height, #{$default-triangle-height});
+    }
+
+    .half-ellipses {
+      height: var(--shape-height, #{$default-ellipse-height});
+      opacity: $default-shapes-opacity;
+      width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
+
+      .up {
+        background-image: radial-gradient(ellipse at center bottom, var(--y) 5%, transparent 65%);
+        clip-path: ellipse(35% 100% at 50% 0%);
+        height: 50%;
+      }
+
+      .down {
+        background-image: radial-gradient(ellipse at center top, var(--y) 5%, transparent 65%);
+        clip-path: ellipse(35% 100% at 50% 100%);
+        height: 50%;
+      }
+    }
+
+    .ellipse {
+      background-image: linear-gradient(var(--dark-y), var(--light-y));
+      clip-path: ellipse(50% 50% at 50% 50%);
+      height: var(--shape-height, #{$default-ellipse-height});
+      opacity: $default-shapes-opacity;
+      width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
+    }
+
+    .diamonds {
+      height: var(--shape-height, #{$default-diamond-height});
+      opacity: $default-shapes-opacity;
+      position: relative;
+      width: var(--shape-height, #{$default-diamond-height});
+
+      .top-right {
+        background-image: linear-gradient(to right, var(--dark-y), var(--y));
+        clip-path: polygon(100% 100%, 0 0, 100% 0);
+        height: 100%;
+        position: absolute;
+        width: 100%;
+      }
+
+      .bottom-left {
+        background-image: linear-gradient(to left, var(--dark-y), var(--y));
+        clip-path: polygon(0 100%, 0 0, 100% 100%);
+        height: 100%;
+        opacity: .95;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+      }
+
+      .bottom-right {
+        background-image: linear-gradient(to bottom, var(--dark-y), var(--y));
+        clip-path: polygon(100% 100%, 100% 0, 0 100%);
+        height: 100%;
+        position: absolute;
+        width: 100%;
+      }
+    }
+
+    .rectangles {
+      display: grid;
+      grid-template-rows: repeat(3, 1fr);
+      height: var(--shape-height, #{$default-rectangle-height});
+      opacity: $default-shapes-opacity;
+      width: var(--shape-height, #{$default-rectangle-height});
+
+      .top {
+        background-image: linear-gradient(to right, var(--dark-y), var(--y));
+      }
+
+      .center {
+        background-image: linear-gradient(to left, var(--dark-y), var(--y));
+      }
+
+      .bottom {
+        background-image: linear-gradient(to right, var(--dark-y), var(--y));
+      }
+    }
+
+    .half-ellipse {
+      background-image: radial-gradient(ellipse at center bottom, var(--y) 10%, transparent 65%);
+      clip-path: ellipse(60% 100% at 50% 0%);
+      height: var(--shape-height, #{$default-ellipse-height});
+      opacity: $default-shapes-opacity;
+      width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
+    }
+
+    .circle {
+      background-image: linear-gradient(var(--light-y), var(--dark-y));
+      clip-path: circle(50% at 50% 50%);
+      height: var(--shape-height, #{$default-circle-height});
+      opacity: $default-shapes-opacity;
+      width: var(--shape-height, #{$default-circle-height});
+    }
+
+    .half-circle {
+      background: linear-gradient(var(--light-y) 30%, var(--dark-y) 100%);
+      clip-path: circle(50% at 50% 100%);
+      height: var(--shape-height, #{$default-circle-height});
+      opacity: $default-shapes-opacity;
+      width: calc(var(--shape-height, #{$default-circle-height}) * 2);
+    }
+
+    .ellipses {
+      height: var(--shape-height, #{$default-ellipse-height});
+      opacity: $default-shapes-opacity;
+      position: relative;
+      width: var(--shape-height, #{$default-ellipse-height});
+
+      .first {
+        background-image: linear-gradient(to top, var(--dark-y), var(--y), var(--light-y) 50%, transparent);
+        clip-path: ellipse(50% 20% at 50% 60%);
+        height: 100%;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+      }
+
+      .second {
+        background-image: linear-gradient(to bottom,var(--dark-y), var(--y), var(--light-y) 45%, transparent);
+        clip-path: ellipse(50% 20% at 50% 40%);
+        height: 100%;
+        position: absolute;
+        width: 100%;
+      }
+    }
+
+    .spiral {
+      height: var(--shape-height, #{$default-ellipse-height});
+      width: var(--shape-height, #{$default-ellipse-height});
+      opacity: $default-shapes-opacity;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      > * {
+        border-radius: 50%;
+        background: radial-gradient(ellipse at center bottom ,var(--dark-y) 10%, transparent 60%);
+        position: absolute;
+        opacity: .5;
+      }
+
+       .circle-one {
+        transform: rotate(45deg);
+        height:calc(var(--shape-height, #{$default-ellipse-height})* 0.4);
+        width: calc(var(--shape-height, #{$default-ellipse-height})* 0.4);
+      }
+
+       .circle-two {
+        height: calc(var(--shape-height, #{$default-ellipse-height})* 0.6);
+        width: calc(var(--shape-height, #{$default-ellipse-height})* 0.6);
+      }
+
+       .circle-three {
+        transform: rotate(-45deg);
+        height: calc(var(--shape-height, #{$default-ellipse-height})* 0.8);
+        width: calc(var(--shape-height, #{$default-ellipse-height})* 0.8);
+      }
+
+       .circle-four {
+        transform: rotate(-90deg);
+        height: calc(var(--shape-height, #{$default-ellipse-height})* 1);
+        width: calc(var(--shape-height, #{$default-ellipse-height})* 1);
+      }
+    }
+    .rotated-ellipses {
+      height: var(--shape-height, #{$default-ellipse-height});
+      opacity: $default-shapes-opacity;
+      width: var(--shape-height, #{$default-ellipse-height});
+      display: flex;
+
+      > *{
+        width: 100%;
+        height: 100%;
+      }
+
+      .ellipse-one {
+        background-image: radial-gradient(ellipse at bottom left, var(--y) 30%, transparent 65%);
+        transform: rotate(-15deg);
+        clip-path: ellipse(50% 35% at 50% 50%);
+      }
+
+      .ellipse-two {
+        background-image: radial-gradient(ellipse at top right, var(--y) 30%, transparent 65%);
+        transform: rotate(-15deg);
+        clip-path: ellipse(50% 35% at 50% 50%);
+      }
+    }
+
+    .intersecting-circles {
+      height: var(--shape-height, #{$default-circle-height});
+      opacity: $default-shapes-opacity;
+      width: calc(var(--shape-height, #{$default-circle-height}) * 2);
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      position: relative;
+
+      > * {
+        border-radius: 50%;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        opacity: .8;
+      }
+
+      .left {
+        background-image: linear-gradient(to right ,var(--dark-y),var(--y), transparent);
+        grid-column: 1 / 5;
+      }
+      .right {
+        background-image: linear-gradient(to left, var(--dark-y), var(--y), transparent);
+        grid-column: 4 / 8;
+      }
+    }
+}

package/dist/es/a/SnapScroller/SnapScroller.js

@@ -0,0 +1,61 @@
+/* @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'; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'snap-scroller';
+/**
+ * This is the component description.
+ */
+
+const SnapScroller = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  noScrollOnDesktop // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, noScrollOnDesktop && 'desktop-no-scroll'].filter(e => e).join(' '),
+    style: style // {...otherProps}
+
+  }, children);
+};
+
+SnapScroller.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,
+
+  /**
+   * Whether to snap scroll on desktop (false will enable a flexbox)
+   */
+  noScrollOnDesktop: PropTypes.bool
+};
+SnapScroller.defaultProps = {
+  noScrollOnDesktop: false
+};
+export default SnapScroller;