@pareto-engineering/design-system 2.0.0-alpha.9 → 3.0.0-alpha.18

package/dist/cjs/f/fields/TextArea/TextArea.js

@@ -1,141 +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"));
-
-var _formik = require("formik");
-
-var _common = require("../../common");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-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; }
-
-var baseClassName = _bem.default.base;
-var componentClassName = 'text-area';
-/**
- * This is the component description.
- */
-
-var TextArea = _ref => {
-  var {
-    id,
-    className: userClassName,
-    style,
-    name,
-    label,
-    validate,
-    labelAsDescription,
-    textAreaId,
-    rows,
-    textAreaColor,
-    labelColor,
-    description // ...otherProps
-
-  } = _ref;
-  (0, React.useLayoutEffect)(() => {
-    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
-  }, []);
-  var [field, meta] = (0, _formik.useField)({
-    name,
-    validate
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, "x-".concat(textAreaColor), "y-".concat(labelColor)].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement(_common.FormLabel, {
-    className: ['c-y', labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
-    name: name
-  }, label), /*#__PURE__*/React.createElement("textarea", _extends({
-    id: textAreaId,
-    className: "textarea v50 pv-v ".concat(meta.touched && meta.error ? 'input-border-error' : 'input-border')
-  }, field, {
-    rows: rows
-  })), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(_common.FormDescription, {
-    isError: !!meta.error,
-    className: "v50 mt-v s-1"
-  }, meta.error || description), ' ');
-};
-
-TextArea.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),
-
-  /**
-   * The input name (html - and Formik state)
-   */
-  name: _propTypes.default.string.isRequired,
-
-  /**
-   * The input label
-   */
-  label: _propTypes.default.string.isRequired,
-
-  /**
-   * The input value validator function
-   */
-  validate: _propTypes.default.func,
-
-  /**
-   * If the text area depends on it's label's text as the default description
-   */
-  labelAsDescription: _propTypes.default.bool,
-
-  /**
-   * The textarea id
-  */
-  textAreaId: _propTypes.default.string,
-
-  /**
-   * The number of rows int the text area
-   */
-  rows: _propTypes.default.number,
-
-  /**
-   * Text area base color
-   */
-  textAreaColor: _propTypes.default.string,
-
-  /**
-   * Label base color
-   */
-  labelColor: _propTypes.default.string,
-
-  /**
-   * Text area description
-   */
-  description: _propTypes.default.string
-};
-TextArea.defaultProps = {
-  rows: 3,
-  textAreaColor: 'background',
-  labelColor: 'main1'
-};
-var _default = TextArea;
-exports.default = _default;

package/dist/cjs/f/fields/TextArea/index.js

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

package/dist/cjs/f/fields/TextArea/styles.scss

@@ -1,19 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-@use "@pareto-engineering/bem";
-
-.#{bem.$base}.text-area{
-  display: flex;
-  flex-direction: column;
-
-  .textarea {
-    background: var(--light-x);
-    color: var(--on-x);
-
-    &:focus {
-      background: var(--dark-x);
-    }
-  }
-}
-
-
-

package/dist/es/a/GradientBackground/GradientBackground.js

@@ -1,118 +0,0 @@
-/* @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,
-  height,
-  width // ...otherProps
-
-}) => {
-  useLayoutEffect(() => {
-    import("./styles.scss");
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: { ...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.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']),
-
-  /**
-   * The options of a shape to use
-   */
-  shape: PropTypes.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles'])
-};
-GradientBackground.defaultProps = {
-  pin: 'center',
-  shape: 'triangle'
-};
-export default GradientBackground;

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

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

package/dist/es/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);
-    //   }
-    // }
-
-  }
-}

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

@@ -1,86 +0,0 @@
-/* @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

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

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

@@ -1,105 +0,0 @@
-/* @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: 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: $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;
-    }
-  }
-}