@pareto-engineering/design-system 2.0.0-alpha.3 → 2.0.0-alpha.7

package/dist/es/a/OvalIllustration/OvalIllustration.js

@@ -0,0 +1,86 @@
+/* @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 = 'oval-illustration';
+/**
+ * This is the component description.
+ */
+
+const OvalIllustration = ({
+  id,
+  className: userClassName,
+  style,
+  layout,
+  src,
+  alt,
+  ovalBackground,
+  backgroundColor // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, layout].filter(e => e).join(' '),
+    style: style // {...otherProps}
+
+  }, ovalBackground && /*#__PURE__*/React.createElement("div", {
+    className: `oval-background y-${backgroundColor}`
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "illustration"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: src,
+    alt: alt
+  })));
+};
+
+OvalIllustration.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),
+
+  /**
+   * side definition of the illustration
+   */
+  layout: PropTypes.oneOf(['left', 'right']),
+
+  /**
+   * image url
+   */
+  src: PropTypes.string,
+
+  /**
+   * alt tag for the image
+   */
+  alt: PropTypes.string,
+
+  /**
+   * whether to have a oval shape as background
+   */
+  ovalBackground: PropTypes.bool,
+
+  /**
+   * background color of the oval behind the image
+   */
+  backgroundColor: PropTypes.string
+};
+OvalIllustration.defaultProps = {
+  layout: 'left'
+};
+export default OvalIllustration;

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

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

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

@@ -0,0 +1,105 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-desktop-shape-size:45em;
+$default-tablet-shape-size:35em;
+$default-mobile-shape-size:20em;
+$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: -100;
+  }
+
+  .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: $default-mobile-shape-size;
+      width: $default-mobile-shape-size;
+    }
+
+    .illustration {
+      height: $default-mobile-shape-size;
+      width: $default-mobile-shape-size;
+    }
+  }
+
+  // tablet style
+  @include mixins.media($from:$xs-sm, $to:$sm-md) {
+    .oval-background {
+      height: $default-tablet-shape-size;
+      width: $default-tablet-shape-size;
+    }
+
+    .illustration {
+      height: $default-tablet-shape-size;
+      width: $default-tablet-shape-size;
+    }
+  }
+
+  // desktop style
+  @include mixins.media($from:$sm-md) {
+    .oval-background {
+      height: $default-desktop-shape-size;
+      width: $default-desktop-shape-size;
+    }
+
+    .illustration {
+      height: $default-desktop-shape-size;
+      width: $default-desktop-shape-size;
+    }
+  }
+}

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

@@ -14,9 +14,11 @@ const Shapes = ({
   id,
   className: userClassName,
   style,
-  pin,
   shape,
-  height // ...otherProps
+  height,
+  overflow,
+  verticalAlign,
+  horizontalAlign // ...otherProps
 
 }) => {
   useLayoutEffect(() => {
@@ -26,8 +28,10 @@ const Shapes = ({
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: { ...style,
-      '--pin': pin,
-      '--shape-height': height
+      '--shape-height': height,
+      '--overflow': overflow,
+      '--vertical-align': verticalAlign,
+      '--horizontal-align': horizontalAlign
     } // {...otherProps}
 
   }, shape === 'triangle' && /*#__PURE__*/React.createElement("div", {
@@ -78,6 +82,12 @@ const Shapes = ({
     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"
   })));
 };
 
@@ -103,17 +113,29 @@ Shapes.propTypes = {
   height: PropTypes.string,
 
   /**
-   * Where to pin the shapes
+   * The vertical alignment of the shape.
+   */
+  verticalAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
+
+  /**
+   * The horizontal alignment of the shape.
    */
-  pin: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
+  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'])
+  shape: PropTypes.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles', 'rotated-ellipses']),
+
+  /**
+   * The overflow of the shape.
+   */
+  overflow: PropTypes.oneOf(['hidden', 'visible'])
 };
 Shapes.defaultProps = {
-  pin: 'center',
-  shape: 'triangle'
+  verticalAlign: 'center',
+  horizontalAlign: 'center',
+  shape: 'triangle',
+  overflow: 'hidden'
 };
 export default Shapes;

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

@@ -15,13 +15,14 @@ $default-shapes-opacity:.8;
     left: 0;
     display: flex;
     flex-direction: column;
-    justify-content: var(--pin);
-    align-items: center;
+    overflow: var(--overflow);
+    justify-content: var(--vertical-align);
+    align-items: var(--horizontal-align);
     height: 100%;
     width: 100%;
 
     .triangle {
-      background-image: linear-gradient(var(--light-y), var(--dark-y));
+      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;
@@ -34,14 +35,14 @@ $default-shapes-opacity:.8;
       width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
 
       .up {
-        background-image: linear-gradient(var(--light-y), var(--y));
-        clip-path: ellipse(40% 100% at 50% 0%);
+        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: linear-gradient(to top, var(--light-y), var(--y));
-        clip-path: ellipse(40% 100% at 50% 100%);
+        background-image: radial-gradient(ellipse at center top, var(--y) 5%, transparent 65%);
+        clip-path: ellipse(35% 100% at 50% 100%);
         height: 50%;
       }
     }
@@ -109,8 +110,8 @@ $default-shapes-opacity:.8;
     }
 
     .half-ellipse {
-      background-image: linear-gradient(var(--light-y), var(--dark-y));
-      clip-path: ellipse(50% 50% at 50% 0);
+      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);
@@ -174,26 +175,48 @@ $default-shapes-opacity:.8;
 
        .circle-one {
         transform: rotate(45deg);
-        height: 55%;
-        width: 55%;
+        height:calc(var(--shape-height, #{$default-ellipse-height})* 0.4);
+        width: calc(var(--shape-height, #{$default-ellipse-height})* 0.4);
       }
 
        .circle-two {
-        height: 70%;
-        width: 70%;
+        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: 85%;
-        width: 85%;
+        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: 100%;
-        width: 100%;
+        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%);
+      }
+    }
 }

package/dist/es/a/index.js

@@ -17,4 +17,6 @@ export { CustomerStat } from "./CustomerStat";
 export { Quote } from "./Quote";
 export { ContentCard } from "./ContentCard";
 export { DotInfo } from "./DotInfo";
-export { Timestamp } from "./Timestamp";
+export { Timestamp } from "./Timestamp";
+export { Shapes } from "./Shapes";
+export { OvalIllustration } from "./OvalIllustration";

package/dist/es/b/Button/styles.scss

@@ -4,15 +4,13 @@
 
 $default-padding: 1em 1em .84em;
 $compact-padding: .6em .6em .48em;
-$default-border-radius:2em;
 $default-color:primary;
 $font-weight:bold;
 
 .#{bem.$base}.button {
   background: var(--x, var(--#{$default-color}));
   border: transparent;
-  //border-radius: var(--theme-border-radius);
-  border-radius: $default-border-radius;
+  border-radius: var(--theme-border-radius);
   color: var(--on-x, var(--on-#{$default-color}));
   font-weight: 600;
   padding: $default-padding;
@@ -24,6 +22,9 @@ $font-weight:bold;
     &:hover {
       background: var(--light-x, var(--light-#{$default-color}));
     }
+    &:focus {
+      background: var(--dark-x, var(--dark-#{$default-color}));
+    }
   }
 
 
@@ -36,21 +37,28 @@ $font-weight:bold;
     border: 1px solid var(--x, var(--#{$default-color}));
     color: var(--x, var(--#{$default-color}));
 
-    &:not(:disabled) {
-      &:hover,
-      &:focus {
-        border: 1px solid transparent;
-        color: var(--on-x, var(--on-#{$default-color}));
-      }
+    &:hover,
+    &:focus,
+    &:disabled{
+      background: transparent;
+    }
 
+    &:not(:disabled) {
       &:hover {
-        background: var(--x, var(--#{$default-color}));
+        border: 1px solid var(--light-x, var(--light-#{$default-color}));
+        color: var(--light-x, var(--light-#{$default-color}));
       }
 
       &:focus {
-        background: var(--dark-x, var(--#{$default-color}));
+        border: 1px solid var(--dark-x, var(--dark-#{$default-color}));
+        color: var(--dark-x, var(--dark-#{$default-color}));
       }
     }
+
+    &:disabled{
+      border: 1px solid var(--x, var(--#{$default-color}));
+      color: var(--x, var(--#{$default-color}));
+    }
   }
 
   &.#{bem.$modifier-simple} {
@@ -58,19 +66,30 @@ $font-weight:bold;
     border: 1px solid transparent;
     color: var(--x, var(--#{$default-color}));
 
+    &:disabled,
+    &:hover,
+    &:focus {
+      background: transparent;
+    }
+
     &:not(:disabled) {
-      &:hover,
-      &:focus {
-        background:transparent;
-        border: 1px solid transparent;
-        color: var(--dark-x, var(--on-#{$default-color}));
-      }
+       &:hover {
+         color: var(--light-x, var(--light-#{$default-color}));
+       }
+
+       &:focus {
+         color: var(--dark-x, var(--dark-#{$default-color}));
+       }
+    }
+
+    &:disabled {
+      color: var(--x, var(--#{$default-color}));
     }
   }
 
   &:disabled {
-    background: var(--light-x);
-    filter: brightness(120%);
+    background: var(--x);
+    filter: brightness(125%);
   }
 }
 

package/dist/es/b/Page/common/Section/Section.js

@@ -3,9 +3,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 /* @pareto-engineering/generator-front 1.0.0 */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem';
-import usePage from "../../usePage"; // Local Definitions
+import styleNames from '@pareto-engineering/bem'; // Local Definitions
 
+import { Shapes } from "../../../../a";
+import usePage from "../../usePage";
 const baseClassName = styleNames.base;
 const componentClassName = 'section';
 
@@ -14,6 +15,11 @@ const Section = ({
   className: userClassName,
   style,
   children,
+  backgroundShape,
+  backgroundVerticalAlign,
+  backgroundHorizontalAlign,
+  backgroundHeight,
+  backgroundOverflow,
   ...otherProps
 }) => {
   const {
@@ -24,7 +30,13 @@ const Section = ({
     id: sectionId,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
-  }, otherProps), children);
+  }, otherProps), children, backgroundShape && /*#__PURE__*/React.createElement(Shapes, {
+    verticalAlign: backgroundVerticalAlign,
+    horizontalAlign: backgroundHorizontalAlign,
+    backgroundOverflow: backgroundOverflow,
+    height: backgroundHeight,
+    shape: backgroundShape
+  }));
 };
 
 Section.propTypes = {
@@ -46,7 +58,32 @@ Section.propTypes = {
   /**
    *  The children JSX
    */
-  children: PropTypes.node
+  children: PropTypes.node,
+
+  /**
+   * The background shape to use for this section.
+   */
+  backgroundShape: PropTypes.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles']),
+
+  /**
+   * The background vertical alingment to use for if the background shape is set.
+   */
+  backgroundVerticalAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
+
+  /**
+   * The background horizontal alingment to use for if the background shape is set.
+   */
+  backgroundHorizontalAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
+
+  /**
+   * The background height to use for if the background shape is set.
+   */
+  backgroundHeight: PropTypes.string,
+
+  /**
+   * The background overflow to use for if the background shape is set.
+   */
+  backgroundOverflow: PropTypes.oneOf(['visible', 'hidden', 'scroll'])
 };
 Section.defaultProps = {// someProp:false
 };

package/dist/es/b/Page/styles.scss

@@ -2,9 +2,15 @@
 
 @use "@pareto-engineering/bem";
 
-/*
+
 .#{bem.$base}.page{
+    .#{bem.$base}.section {
+        position: relative;
 
-} */
+        > *:not(:last-child) {
+            z-index: 1;
+        }
+    }
+}
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.7",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",