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

package/dist/es/b/Metrics/Metrics.js

@@ -0,0 +1,72 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useLayoutEffect } from 'react';
+import { AnimatedCounter } from "../..";
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem'; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'metrics';
+/**
+ * This is the component description.
+ */
+
+const Metrics = ({
+  id,
+  className: userClassName,
+  style,
+  items // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style // {...otherProps}
+
+  }, items.map(counter => /*#__PURE__*/React.createElement("div", {
+    className: "metric"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `circle y-${counter.circleColor}`
+  }, /*#__PURE__*/React.createElement(AnimatedCounter, {
+    color: counter.color,
+    delay: counter.delay,
+    number: counter.number,
+    before: counter.before,
+    after: counter.after
+  }), /*#__PURE__*/React.createElement("p", {
+    className: "description-md sm-h xs-h md-s1"
+  }, counter.description)), /*#__PURE__*/React.createElement("p", {
+    className: "description-sm md-h lg-h sm-s-2"
+  }, counter.description))));
+};
+
+Metrics.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 array of details
+   */
+  items: PropTypes.node
+};
+/*
+Metrics.defaultProps = {
+}
+*/
+
+export default Metrics;

package/dist/es/b/Metrics/index.js

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

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/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/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/fields/ChoicesInput/ChoicesInput.js

@@ -128,7 +128,7 @@ ChoicesInput.propTypes = {
 ChoicesInput.defaultProps = {
   gridColumnsMobile: 2,
   gridColumnsDesktop: 3,
-  color: 'background',
+  color: 'background2',
   colorChecked: 'main1',
   disabled: false
 };

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/styles.scss

@@ -18,12 +18,12 @@ $default-padding: 0.75em 0.75em 0.55em;
   }
 
   .input {
-    background: var(--light-background);
-    color: var(--on-background);
+    background: var(--light-background1);
+    color: var(--on-background1);
     padding: $default-padding;
 
     &:focus {
-      background: var(--dark-background);
+      background: var(--dark-background1);
     }
   }
 }

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,
@@ -106,6 +106,6 @@ TaskRecommendationInput.propTypes = {
   image: PropTypes.string.isRequired
 };
 TaskRecommendationInput.defaultProps = {
-  color: 'main2'
+  color: 'main1'
 };
 export default /*#__PURE__*/memo(TaskRecommendationInput);

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/styles.scss

@@ -14,12 +14,12 @@ $default-padding: 0.75em 0.75em 0.55em;
   }
 
   .input {
-    background: var(--light-background);
-    color: var(--on-background);
+    background: var(--light-background1);
+    color: var(--on-background1);
     padding: $default-padding;
 
     &:focus {
-      background: var(--dark-background);
+      background: var(--dark-background1);
     }
   }
 }

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

@@ -125,7 +125,7 @@ TextareaInput.propTypes = {
 };
 TextareaInput.defaultProps = {
   rows: 3,
-  textAreaColor: 'background',
+  textAreaColor: 'background1',
   labelColor: 'main1',
   disabled: false
 };

package/dist/es/form.scss

@@ -1,6 +1,6 @@
 @use "form-reset.scss";
 
-$form-input-border-bottom: 1px solid var(--dark-background);
+$form-input-border-bottom: 1px solid var(--dark-background1);
 $form-input-on-focus-border-bottom: 1px solid var(--light-main1);
 $form-input-on-error-border-bottom: 1px solid var(--error);
 $label-input-heigth-width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.3",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -79,9 +79,9 @@
     "stylelint-config-palantir": "^5.1.0"
   },
   "dependencies": {
-    "@pareto-engineering/assets": "^2.0.0-alpha.2",
+    "@pareto-engineering/assets": "^2.0.0-alpha.3",
     "@pareto-engineering/bem": "^0.1.5",
-    "@pareto-engineering/styles": "^2.0.0-alpha.2",
+    "@pareto-engineering/styles": "^2.0.0-alpha.4",
     "date-fns": "^2.22.1",
     "formik": "^2.2.9",
     "hamburgers": "^1.1.3",