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

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

@@ -0,0 +1,91 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-mobile-row-gap: 1em;
+$default-desktop-row-gap: 3em;
+$default-border-radius: 50%;
+$default-mobile-circle-size: 8em;
+$default-desktop-circle-size: 10em;
+$default-translateY:3em;
+$default-desktop-description-width:12em;
+
+
+$default-mobile-description-width:9em;
+
+.#{bem.$base}.metrics {
+  display: grid;
+  row-gap: 1em;
+
+  .metric {
+    align-items: center;
+    display: flex;
+    row-gap: $default-mobile-row-gap;
+
+    .circle {
+      align-items: center;
+      background: var(--light-y);
+      border-radius: $default-border-radius;
+      display: flex;
+      height: $default-mobile-circle-size;
+      justify-content: center;
+      width: $default-mobile-circle-size;
+
+      .description-md {
+        color: var(--subtitle);
+        font-style: italic;
+      }
+    }
+
+    .description-sm {
+      color: var(--subtitle);
+      font-style: italic;
+    }
+  }
+
+  // mobile style
+  @include mixins.media($to:$sm-md) {
+    .metric {
+      column-gap: $default-mobile-row-gap;
+
+      .description-sm {
+        width: 50%;
+      }
+    }
+  }
+
+  // tablet style
+  @include mixins.media($from:$xs-sm,$to:$sm-md) {
+    .metric {
+      .description-sm {
+        width: 30%;
+      }
+    }
+  }
+
+  // desktop style
+  @include mixins.media($from:$sm-md) {
+    grid-template-columns: repeat(2, 1fr);
+    row-gap: 2em;
+
+    .metric {
+      .circle {
+        display: flex;
+        flex-direction: column;
+        height: $default-desktop-circle-size;
+        justify-content: center;
+        position: relative;
+        width: $default-desktop-circle-size;
+
+        .description-md {
+          left: 40%;
+          position: absolute;
+          top: 70%;
+          width: $default-desktop-description-width;
+        }
+      }
+    }
+  }
+}

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, BackgroundGradient } from "../../../../a";
+import usePage from "../../usePage";
 const baseClassName = styleNames.base;
 const componentClassName = 'section';
 
@@ -14,6 +15,13 @@ const Section = ({
   className: userClassName,
   style,
   children,
+  backgroundShape,
+  backgroundGradient,
+  backgroundGradientHeight,
+  backgroundVerticalAlign,
+  backgroundHorizontalAlign,
+  backgroundHeight,
+  backgroundOverflow,
   ...otherProps
 }) => {
   const {
@@ -24,7 +32,15 @@ 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,
+    overflow: backgroundOverflow,
+    height: backgroundHeight,
+    shape: backgroundShape
+  }), backgroundGradient && /*#__PURE__*/React.createElement(BackgroundGradient, {
+    height: backgroundGradientHeight
+  }));
 };
 
 Section.propTypes = {
@@ -46,7 +62,42 @@ 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']),
+
+  /**
+   * The background gradient to use for if the background gradient is set.
+   */
+  backgroundGradient: PropTypes.bool,
+
+  /**
+   * The background gradient height to use for if the background gradient is set.
+   */
+  backgroundGradientHeight: PropTypes.string
 };
 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/dist/es/b/QuestionDropdown/styles.scss

@@ -4,7 +4,7 @@
 
 //make all colors as vars
 
-$border-color: var(--dark-background);
+$border-color: var(--dark-background1);
 $border-width: 2px;
 $button-background-color: transparent;
 $button-background-color-hover: var(--light-accent3);

package/dist/es/b/index.js

@@ -6,4 +6,5 @@ export { Page } from "./Page";
 export { QuestionDropdown } from "./QuestionDropdown";
 export { ThemeSelector } from "./ThemeSelector";
 export { Logo } from "./Logo";
-export { SocialMediaButton } from "./SocialMediaButton";
+export { SocialMediaButton } from "./SocialMediaButton";
+export { Metrics } from "./Metrics";

package/dist/es/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js

@@ -49,7 +49,7 @@ const HorizontalMenu = ({
     attached: true,
     height: ".4em",
     color: "main2",
-    className: "y-background b-dark-y"
+    className: "y-background1 b-dark-y"
   }), /*#__PURE__*/React.createElement("div", {
     className: styleNames.elementContent
   }, /*#__PURE__*/React.createElement("div", {

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

@@ -56,7 +56,8 @@ const Navigator = ({
       } else {
         setNextStepIndex(stepsForward);
       }
-    }
+    },
+    isCompact: true
   }, "Next") : /*#__PURE__*/React.createElement("span", null));
 };
 
@@ -118,8 +119,8 @@ Navigator.propTypes = {
 };
 Navigator.defaultProps = {
   canMoveForward: true,
-  previousColor: 'main1',
-  nextColor: 'main1',
+  previousColor: 'main2',
+  nextColor: 'main2',
   stepsForward: 1,
   stepsBackwards: 1
 };

package/dist/es/experimental/GradientBackground/GradientBackground.js

@@ -0,0 +1,76 @@
+/* @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 = 'gradient-background';
+/**
+ * This is the component description.
+ */
+
+const GradientBackground = ({
+  id,
+  className: userClassName,
+  style,
+  pin,
+  shape // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: { ...style,
+      '--pin': pin
+    } // {...otherProps}
+
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "shapes"
+  }, shape === 'triangle' && /*#__PURE__*/React.createElement("div", {
+    className: "triangle"
+  }), shape === 'ellipses' && /*#__PURE__*/React.createElement("div", {
+    className: "ellipses"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "up"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "down"
+  })), shape === 'ellipse' && /*#__PURE__*/React.createElement("div", {
+    className: "ellipse"
+  })));
+};
+
+GradientBackground.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),
+
+  /**
+   * Where to pin the shapes
+   */
+  pin: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
+
+  /**
+   *
+   */
+  shape: PropTypes.oneOf(['triangle', 'ellipse', 'spiral', 'diamonds', 'circles', 'ellipses'])
+};
+GradientBackground.defaultProps = {
+  pin: 'center',
+  shape: 'triangle'
+};
+export default GradientBackground;

package/dist/es/experimental/GradientBackground/index.js

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

package/dist/es/experimental/GradientBackground/styles.scss

@@ -0,0 +1,64 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-triangle-dimension:30em;
+$default-ellipses-dimension:50em;
+$default-ellipse-dimension:80em;
+$default-shapes-opacity:.8;
+
+.#{bem.$base}.gradient-background {
+  align-items: center;
+  background: var(--light-y);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: var(--pin);
+  position: absolute;
+  width: 100%;
+
+  .shapes {
+    display: flex;
+    justify-content: center;
+
+    .triangle {
+      background-image: linear-gradient(var(--light-y), var(--dark-y));
+      clip-path: polygon(0 0, 50% 100%, 100% 0);
+      height: $default-triangle-dimension * .86;
+      opacity: $default-shapes-opacity;
+      width: $default-triangle-dimension;
+    }
+
+    .ellipses {
+
+      height: $default-ellipses-dimension / 2;
+      width: $default-ellipses-dimension;
+      opacity: $default-shapes-opacity;
+
+      .up {
+        background-image: linear-gradient(var(--light-y), var(--y));
+        clip-path: ellipse(40% 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%);
+        height:50%;
+      }
+
+    }
+
+    .ellipse {
+      height: $default-ellipse-dimension / 1.5;
+      width: $default-ellipse-dimension;
+      background-image: linear-gradient( to top left, var(--dark-y), var(--light-y),var(--dark-y));
+      clip-path: ellipse(50% 25% at 50% 50%);
+      opacity: $default-shapes-opacity;
+      transform: rotate3d(0, 0, -1, 10deg);
+    }
+
+  }
+}
+
+

package/dist/es/experimental/index.js

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

package/dist/es/f/common/Debugger/Debugger.js

@@ -31,7 +31,7 @@ const Debugger = ({
     style: style
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: toggleDebugger,
-    color: "main1"
+    color: "main2"
   }, isOpen ? 'Close FormDebugger' : 'Open FormDebugger'), isOpen && /*#__PURE__*/React.createElement("pre", {
     className: "debuger-content"
   }, JSON.stringify(formikContext, null, 2)));

package/dist/es/f/common/Label/Label.js

@@ -71,6 +71,6 @@ Label.propTypes = {
 Label.defaultProps = {
   // someProp:false
   as: 'label',
-  color: 'main1'
+  color: 'main2'
 };
 export default Label;

package/dist/es/f/fields/ChoicesInput/ChoicesInput.js

@@ -128,8 +128,8 @@ ChoicesInput.propTypes = {
 ChoicesInput.defaultProps = {
   gridColumnsMobile: 2,
   gridColumnsDesktop: 3,
-  color: 'background',
-  colorChecked: 'main1',
+  color: 'background2',
+  colorChecked: 'main2',
   disabled: false
 };
 export default /*#__PURE__*/memo(ChoicesInput);

package/dist/es/f/fields/RatingsInput/common/Rating/Rating.js

@@ -104,8 +104,8 @@ Rating.propTypes = {
   showRatingValue: PropTypes.bool
 };
 Rating.defaultProps = {
-  activeBackgroundColor: 'secondary2',
-  inactiveBackgroundColor: 'background',
+  activeBackgroundColor: 'main1',
+  inactiveBackgroundColor: 'background2',
   showRatingValue: false
 };
 export default Rating;

package/dist/es/f/fields/SelectInput/SelectInput.js

@@ -21,13 +21,18 @@ const SelectInput = ({
   name,
   label,
   options,
+  validate,
+  description,
   disabled // ...otherProps
 
 }) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
-  const [field, meta] = useField(name);
+  const [field, meta] = useField({
+    name,
+    validate
+  });
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -39,6 +44,7 @@ const SelectInput = ({
   }, label), /*#__PURE__*/React.createElement("select", _extends({
     className: "input v25 pv-v"
   }, field, {
+    value: field.value || '',
     id: name,
     disabled: disabled
   }), options.map(option => {
@@ -49,11 +55,13 @@ const SelectInput = ({
     } : option;
     return /*#__PURE__*/React.createElement("option", {
       key: newOption.value,
-      value: newOption.value
+      value: newOption.value,
+      disabled: (newOption === null || newOption === void 0 ? void 0 : newOption.disabled) || false
     }, newOption.label);
-  })), meta.error && meta.touched && /*#__PURE__*/React.createElement(FormDescription, {
-    error: true
-  }, meta.error));
+  })), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(FormDescription, {
+    isError: !!meta.error,
+    className: "v50 mt-v s-1"
+  }, meta.error || description));
 };
 
 SelectInput.propTypes = {
@@ -82,12 +90,23 @@ SelectInput.propTypes = {
    */
   label: PropTypes.string,
 
+  /**
+   * The input field validator function
+   */
+  validate: PropTypes.func,
+
+  /**
+   * The select input description
+   */
+  description: PropTypes.string,
+
   /**
    * The options of the select input
    */
   options: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     value: PropTypes.string,
-    label: PropTypes.string
+    label: PropTypes.string,
+    disabled: PropTypes.bool
   })])),
 
   /**

package/dist/es/f/fields/SelectInput/styles.scss

@@ -14,16 +14,16 @@ $default-padding: 0.75em 0.75em 0.55em;
 
 
   .input-label {
-    color: var(--main1);
+    color: var(--main2);
   }
 
   .input {
-    background: var(--light-background);
-    color: var(--on-background);
+    background: var(--light-background2);
+    color: var(--on-background2);
     padding: $default-padding;
 
     &:focus {
-      background: var(--dark-background);
+      background: var(--dark-background2);
     }
   }
 }

package/dist/es/f/fields/TaskRecommendationInput/TaskRecommendationInput.js

@@ -43,7 +43,7 @@ const TaskRecommendationInput = ({
   }, /*#__PURE__*/React.createElement("div", {
     className: "v1 p-v task"
   }, /*#__PURE__*/React.createElement(FormLabel, {
-    className: `uc mb-v ${isOptionSelected ? 'c-on-x' : 'c-x'}`,
+    className: `uc mb-v ${isOptionSelected ? styleNames.modifierActive : ''}`,
     name: name
   }, label), /*#__PURE__*/React.createElement("input", _extends({}, field, {
     value: value,

package/dist/es/f/fields/TaskRecommendationInput/styles.scss

@@ -16,6 +16,10 @@
       align-items: center;
       height: 100%;
 
+      .#{bem.$modifier-active} {
+        color: var(--on-x);
+      }
+
       .input {
         appearance: none;
         position: absolute;

package/dist/es/f/fields/TextInput/TextInput.js

@@ -21,10 +21,12 @@ const TextInput = ({
   type,
   name,
   label,
+  labelColor,
   validate,
   oneInputLabel,
   description,
-  disabled // ...otherProps
+  disabled,
+  placeholder // ...otherProps
 
 }) => {
   useLayoutEffect(() => {
@@ -40,13 +42,15 @@ const TextInput = ({
     style: style // {...otherProps}
 
   }, /*#__PURE__*/React.createElement(FormLabel, {
-    className: ['input-label', oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
-    name: name
+    className: [oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
+    name: name,
+    color: labelColor
   }, label), /*#__PURE__*/React.createElement("input", _extends({
     id: name,
     className: `input ${meta.touched && meta.error ? 'input-border-error' : 'input-border'}`,
     type: type,
-    disabled: disabled
+    disabled: disabled,
+    placeholder: placeholder
   }, field)), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(FormDescription, {
     isError: !!meta.error,
     className: "v50 mt-v s-1"
@@ -79,6 +83,11 @@ TextInput.propTypes = {
    */
   label: PropTypes.string.isRequired,
 
+  /**
+   * The input label color
+   */
+  labelColor: PropTypes.string,
+
   /**
    * The type of the input (html)
    */
@@ -102,7 +111,12 @@ TextInput.propTypes = {
   /**
    * Whether the text input should be disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+
+  /**
+   * The placeholder text for the input
+   */
+  placeholder: PropTypes.string
 };
 TextInput.defaultProps = {
   type: 'text',

package/dist/es/f/fields/TextInput/styles.scss

@@ -9,17 +9,13 @@ $default-padding: 0.75em 0.75em 0.55em;
   display: flex;
   flex-direction: column;
 
-  .input-label {
-    color: var(--main1);
-  }
-
   .input {
-    background: var(--light-background);
-    color: var(--on-background);
+    background: var(--light-background2);
+    color: var(--on-background2);
     padding: $default-padding;
 
     &:focus {
-      background: var(--dark-background);
+      background: var(--dark-background2);
     }
   }
 }

package/dist/es/f/fields/TextareaInput/TextareaInput.js

@@ -27,7 +27,8 @@ const TextareaInput = ({
   textAreaColor,
   labelColor,
   description,
-  disabled // ...otherProps
+  disabled,
+  placeholder // ...otherProps
 
 }) => {
   useLayoutEffect(() => {
@@ -39,16 +40,18 @@ const TextareaInput = ({
   });
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, `x-${textAreaColor}`, `y-${labelColor}`].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, `x-${textAreaColor}`].filter(e => e).join(' '),
     style: style // {...otherProps}
 
   }, /*#__PURE__*/React.createElement(FormLabel, {
-    className: ['c-y', labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
-    name: name
+    className: [labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
+    name: name,
+    color: labelColor
   }, label), /*#__PURE__*/React.createElement("textarea", _extends({
     id: textAreaId,
     className: `textarea v50 pv-v ${meta.touched && meta.error ? 'input-border-error' : 'input-border'}`
   }, field, {
+    placeholder: placeholder,
     rows: rows,
     disabled: disabled
   })), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(FormDescription, {
@@ -121,12 +124,16 @@ TextareaInput.propTypes = {
   /**
    * Whether the text area should be disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+
+  /**
+   * The textarea placeholder text
+   */
+  placeholder: PropTypes.string
 };
 TextareaInput.defaultProps = {
   rows: 3,
-  textAreaColor: 'background',
-  labelColor: 'main1',
+  textAreaColor: 'background1',
   disabled: false
 };
 export default /*#__PURE__*/memo(TextareaInput);