@pareto-engineering/design-system 2.0.0-alpha.39 → 2.0.0-alpha.41

package/src/stories/f/RatingsInput.stories.jsx

@@ -29,14 +29,14 @@ export default {
 
 export const Base = () => (
   <>
-    <RatingsInput ratingCount={5} name="ratings" />
+    <RatingsInput ratingCount={5} name="ratings" label="Your Rating" />
     <FormDebugger />
   </>
 )
 
 export const Numbers = () => (
   <>
-    <RatingsInput ratingCount={10} name="ratings" showRatingValue />
+    <RatingsInput ratingCount={10} name="ratings" showRatingValue label="Your Rating" />
     <FormDebugger />
   </>
 )
@@ -44,6 +44,7 @@ export const Numbers = () => (
 export const Labels = () => (
   <>
     <RatingsInput
+      label="Your Rating"
       labelMax="very satisfied."
       labelMin="not satisfied."
       ratingCount={10}

package/src/ui/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.jsx

@@ -24,6 +24,7 @@ const HorizontalMenu = ({
   hideBackIcon,
   stepsBackwards,
   customPrevStep,
+  color,
   // ...otherProps
 }) => {
   const {
@@ -59,7 +60,7 @@ const HorizontalMenu = ({
     >
       {
         (currentStep?.progress > 0)
-      && <ProgressBar progress={currentStep.progress} attached height=".4em" color="main2" className="y-background1 b-dark-y" />
+      && <ProgressBar progress={currentStep.progress} attached height=".4em" color={color} className="y-background1 b-dark-y" />
       }
       <div className={styleNames.elementContent}>
         <div className="left">
@@ -128,11 +129,17 @@ HorizontalMenu.propTypes = {
    * Hide back icon boolean
    */
   hideBackIcon:PropTypes.bool,
+
+  /**
+   * String that will represent color for Progress bar
+   */
+  color:PropTypes.string,
 }
 
 HorizontalMenu.defaultProps = {
   logoColor     :'paragraph',
   stepsBackwards:1,
+  color         :'main2',
 }
 
 export default HorizontalMenu

package/src/ui/f/fields/RatingsInput/RatingsInput.jsx

@@ -10,6 +10,7 @@ import styleNames from '@pareto-engineering/bem'
 // Local Definitions
 
 import { Rating } from './common'
+import { FormLabel } from '../../common'
 
 const baseClassName = styleNames.base
 
@@ -25,9 +26,13 @@ const RatingsInput = ({
   name,
   ratingCount,
   showRatingValue,
+  oneInputLabel,
+  label,
+  labelColor,
   labelMax,
   labelMin,
   displayRatingsLabel,
+  optional,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
@@ -47,24 +52,36 @@ const RatingsInput = ({
         .filter((e) => e)
         .join(' ')}
       style={style}
-      // {...otherProps}
     >
-      {displayRatingsLabel && <p className="label-text md-s-1 s-2 x-metadata c-x">{labelMin}</p>}
-      {[...Array(ratingCount)].map((_, index) => {
-        const ratingValue = index + 1
-        return (
-          <Rating
-            key={ratingValue}
-            ratingId={`${name}-${ratingValue}`}
-            value={ratingValue}
-            name={name}
-            hover={hover}
-            setHover={setHover}
-            showRatingValue={showRatingValue}
-          />
-        )
-      })}
-      {displayRatingsLabel && <p className="label-text md-s-1 s-2 x-metadata c-x">{labelMax}</p>}
+      <FormLabel
+        className={[
+          'input-label', oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v']
+          .filter((e) => e)
+          .join(' ')}
+        name={name}
+        color={labelColor}
+        optional={optional}
+      >
+        { label }
+      </FormLabel>
+      <div className="stars">
+        {displayRatingsLabel && <p className="label-text md-s-1 s-2 x-metadata c-x">{labelMin}</p>}
+        {[...Array(ratingCount)].map((_, index) => {
+          const ratingValue = index + 1
+          return (
+            <Rating
+              key={ratingValue}
+              ratingId={`${name}-${ratingValue}`}
+              value={ratingValue}
+              name={name}
+              hover={hover}
+              setHover={setHover}
+              showRatingValue={showRatingValue}
+            />
+          )
+        })}
+        {displayRatingsLabel && <p className="label-text md-s-1 s-2 x-metadata c-x">{labelMax}</p>}
+      </div>
     </div>
   )
 }
@@ -97,6 +114,10 @@ RatingsInput.propTypes = {
    * Determines if the rating start value should be shown
    */
   showRatingValue    :PropTypes.bool,
+  /**
+   * The label of the ratings input
+   */
+  label              :PropTypes.string.isRequired,
   /**
    * description for the highest rating value
    */
@@ -109,11 +130,25 @@ RatingsInput.propTypes = {
    * If the rating lables should be shown
    */
   displayRatingsLabel:PropTypes.bool,
+  /**
+   * Whether the input is optional or not
+   */
+  optional           :PropTypes.bool,
+  /**
+ * If the slide will only have one input
+ */
+  oneInputLabel      :PropTypes.bool,
+
+  /**
+ * String that will represent color for the label
+ */
+  labelColor:PropTypes.string,
 }
 
 RatingsInput.defaultProps = {
-  labelMin:'not satisfied.',
-  labelMax:'very satisfied.',
+  labelMin  :'not satisfied.',
+  labelMax  :'very satisfied.',
+  labelColor:'main2',
 }
 
 export default memo(RatingsInput)

package/src/ui/f/fields/RatingsInput/styles.scss

@@ -7,34 +7,43 @@ $default-transition: all .2s;
 
 .#{bem.$base}.ratings-input {
   display: flex;
+  flex-direction: column;
 
-  >:not(:last-child) {
-    margin-right: $default-rating-icon-margin;
+  p {
+    padding: $default-padding;
   }
 
-  .#{bem.$base}.rating {
+  .stars {
     display: flex;
 
-    input {
-      opacity: 0;
-      position: absolute;
-      visibility: none;
-      z-index: -1;
+    >:not(:last-child) {
+      margin-right: $default-rating-icon-margin;
     }
-
-    label {
+  
+    .#{bem.$base}.rating {
       display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: $default-padding;
-      transition: $default-transition;
-      cursor: pointer;
+  
+      input {
+        opacity: 0;
+        position: absolute;
+        visibility: none;
+        z-index: -1;
+      }
+  
+      label {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: $default-padding;
+        transition: $default-transition;
+        cursor: pointer;
+      }
+    }
+  
+    .label-text {
+      margin-bottom: 0;
+      align-self: flex-end;
     }
-  }
-
-  .label-text {
-    margin-bottom: 0;
-    align-self: flex-end;
   }
 }
 

package/src/ui/f/fields/TextInput/TextInput.jsx

@@ -34,6 +34,7 @@ const TextInput = ({
   description,
   disabled,
   placeholder,
+  optional,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
@@ -62,6 +63,7 @@ const TextInput = ({
           .join(' ')}
         name={name}
         color={labelColor}
+        optional={optional}
       >
         { label }
       </FormLabel>
@@ -156,6 +158,11 @@ TextInput.propTypes = {
    * The text input color
    */
   color:PropTypes.string,
+
+  /**
+ * Whether the input is optional or not
+ */
+  optional:PropTypes.bool,
 }
 
 TextInput.defaultProps = {

package/dist/cjs/a/GradientBackground/GradientBackground.js

@@ -1,140 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-// Local Definitions
-var baseClassName = _bem.default.base;
-var componentClassName = 'gradient-background';
-/**
- * This is the component description.
- */
-
-var GradientBackground = _ref => {
-  var {
-    id,
-    className: userClassName,
-    style,
-    pin,
-    shape,
-    height,
-    width // ...otherProps
-
-  } = _ref;
-  (0, React.useLayoutEffect)(() => {
-    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      '--pin': pin,
-      '--height': height,
-      '--width': width
-    }) // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "shapes"
-  }, shape === 'triangle' && /*#__PURE__*/React.createElement("div", {
-    className: "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: "quater-circle-one"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "quater-circle-two"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "quater-circle-three"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "quater-circle-four"
-  }))));
-};
-
-GradientBackground.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: _propTypes.default.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className: _propTypes.default.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-
-  /**
-   * Where to pin the shapes
-   */
-  pin: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
-
-  /**
-   * The options of a shape to use
-   */
-  shape: _propTypes.default.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles'])
-};
-GradientBackground.defaultProps = {
-  pin: 'center',
-  shape: 'triangle'
-};
-var _default = GradientBackground;
-exports.default = _default;

package/dist/cjs/a/GradientBackground/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "GradientBackground", {
-  enumerable: true,
-  get: function get() {
-    return _GradientBackground.default;
-  }
-});
-
-var _GradientBackground = _interopRequireDefault(require("./GradientBackground"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/a/GradientBackground/styles.scss

@@ -1,191 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-$default-triangle-dimension:30em;
-$default-ellipses-dimension:50em;
-$default-ellipse-dimension:50em;
-$default-shapes-opacity:.8;
-$default-diamonds-dimension:40em;
-$default-circle-dimension:40em;
-
-.#{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;
-    }
-
-    .half-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);
-    }
-
-    .diamonds {
-
-      height: $default-diamonds-dimension;
-      width: $default-diamonds-dimension;
-      opacity: $default-shapes-opacity;
-      position: relative;
-
-      .top-right {
-        height: 100%;
-        width: 100%;
-        background-image: linear-gradient(to right, var(--dark-y), var(--y));
-        clip-path: polygon(100% 100%, 0 0, 100% 0);
-        position: absolute;
-      }
-      .bottom-left {
-        height: 100%;
-        width: 100%;
-        background-image: linear-gradient(to left, var(--dark-y), var(--y));
-        clip-path: polygon(0 100%, 0 0, 100% 100%);
-        position: absolute;
-        z-index: 1;
-        opacity: .95;
-      }
-      .bottom-right {
-        height: 100%;
-        width: 100%;
-        background-image: linear-gradient(to bottom, var(--dark-y), var(--y));
-        clip-path: polygon(100% 100%, 100% 0, 0 100%);
-        position: absolute;
-      }
-    }
-
-    .rectangles {
-      height: $default-diamonds-dimension;
-      width: $default-diamonds-dimension;
-      opacity: $default-shapes-opacity;
-      display: grid;
-      grid-template-rows: repeat(3, 1fr);
-
-      .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 {
-      height: $default-ellipses-dimension / 2;
-      width: $default-ellipses-dimension;
-      opacity: $default-shapes-opacity;
-      background-image: linear-gradient(var(--light-y), var(--dark-y));
-      clip-path: ellipse(50% 50% at 50% 0);
-    }
-
-    .circle {
-      height: $default-circle-dimension;
-      width: $default-circle-dimension;
-      opacity: $default-shapes-opacity;
-      background-image: linear-gradient(var(--light-y), var(--dark-y));
-      clip-path: circle(50% at 50% 50%);
-    }
-
-    .ellipses {
-      height: var(--height);
-      width: var(--width);
-      opacity: $default-shapes-opacity;
-      position: relative;
-
-      .first {
-        height: 100%;
-        width: 100%;
-        position: absolute;
-        background-image: linear-gradient(to top, var(--dark-y), var(--light-y));
-        clip-path: ellipse(50% 20% at 50% 60%);
-      }
-
-      .second{
-        height: 100%;
-        width: 100%;
-        position: absolute;
-        background-image: linear-gradient(to bottom, var(--dark-y), var(--light-y));
-        clip-path: ellipse(50% 20% at 50% 40%);
-      }
-
-    }
-
-    // .spiral {
-    //   height: $default-ellipses-dimension;
-    //   width: $default-ellipses-dimension;
-    //   opacity: $default-shapes-opacity;
-    //   position: relative;
-
-    //   > *{
-    //     position: absolute;
-    //     height: 100%;
-    //     width: 100%;
-    //     background: radial-gradient(var(--dark-y) 30%, var(--light-y));
-    //     transform-origin: 0 0;
-    //   }
-
-    //   .quater-circle-one{
-    //     transform: rotate(90deg);
-    //     clip-path: circle(200px at 0 0);
-    //     z-index: 1;
-    //   }
-
-    //   .quater-circle-two {
-    //     clip-path: circle(250px at 0 0);
-    //     transform: rotate(45deg);
-    //   }
-
-    //   .quater-circle-three {
-    //     clip-path: circle(300px at 0 0);
-    //   }
-
-    //   .quater-circle-four{
-    //     clip-path: circle(350px at 0 0);
-    //     transform: rotate(-45deg);
-    //   }
-    // }
-
-  }
-}