@pareto-engineering/design-system 5.2.1 → 5.4.0

package/dist/cjs/a/Charts/Common/CustomLegend/CustomLegend.js

@@ -1,92 +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 _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-var _utils = require("../../../../utils");
-require("./styles.scss");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const baseClassName = _exports.default.base;
-const componentClassName = 'custom-legend';
-const CustomLegend = _ref => {
-  let {
-    id,
-    className: userClassName,
-    colorsArray,
-    yKeysArray,
-    orientation,
-    getLegendItemTitle,
-    getLegendItemSubtitle,
-    capitalizedLegend
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, orientation].filter(e => e).join(' ')
-  }, yKeysArray.map((key, index) => /*#__PURE__*/React.createElement("div", {
-    key: key,
-    className: "item"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "title"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "dot",
-    style: {
-      backgroundColor: colorsArray[index]
-    }
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "text"
-  }, capitalizedLegend ? (0, _utils.snakeCaseToTitleCase)(getLegendItemTitle(key)) : getLegendItemTitle(key))), /*#__PURE__*/React.createElement("div", {
-    className: "sub-title-percentage-container"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "sub-title"
-  }, getLegendItemSubtitle(key)), key.percentage && /*#__PURE__*/React.createElement("span", {
-    className: "percentage-title"
-  }, `${key.percentage}%`)))));
-};
-CustomLegend.propTypes = {
-  /**
-   * The id of the dropdown component.
-   */
-  id: _propTypes.default.string,
-  /**
-   * Additional class names for the dropdown component.
-   */
-  className: _propTypes.default.string,
-  /**
-   * Array of colors corresponding to the y-axis data keys.
-   */
-  colorsArray: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-  /**
-   * Array of keys for the y-axis data.
-   */
-  yKeysArray: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-  /**
-   * The orientation of the Legend
-   */
-  orientation: _propTypes.default.oneOf(['vertical', 'horizontal']),
-  /**
-   * The function to get the legendItemKey
-   */
-  getLegendItemTitle: _propTypes.default.func,
-  /**
-   * The function to get legend children
-   */
-  getLegendItemSubtitle: _propTypes.default.func,
-  /**
-   * Flag on whether to capitalize legend keys
-   */
-  capitalizedLegend: _propTypes.default.bool
-};
-CustomLegend.defaultProps = {
-  orientation: 'horizontal',
-  getLegendItemTitle: key => key,
-  /* eslint-disable no-unused-vars */
-  getLegendItemSubtitle: () => {},
-  capitalizedLegend: false
-};
-var _default = exports.default = CustomLegend;

package/dist/cjs/a/Charts/Common/CustomLegend/index.js

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

package/dist/cjs/a/Charts/Common/CustomLegend/styles.scss

@@ -1,75 +0,0 @@
-@use "@pareto-engineering/bem";
-
-$default-padding: 1rem;
-$default-margin: 1rem;
-$default-text-font-size: calc(var(--s-1) * 1rem);
-$default-border-radius: .25rem;
-$default-legend-gap: .625rem;
-$default-legend-padding: calc($default-padding * .125) calc($default-padding * .625);
-$default-legend-dot-width: .5rem;
-$default-legend-dot-height: .5rem;
-$default-legend-dot-margin-right: .3125rem;
-$default-box-shadow: 0 4px 16px 0 var(--soft-shadow);
-
-.#{bem.$base} {
-  &.custom-legend {
-    gap: $default-legend-gap;
-    justify-content: flex-end;
-    padding-bottom: $default-padding;
-    padding-right: calc($default-padding * .25);
-
-    &.vertical {
-      display: block;
-      margin-right: calc($default-margin * 2);
-      min-width: fit-content;
-
-      .item {
-        padding-top: $default-padding;
-      }
-    }
-
-    &.horizontal {
-      display: flex;
-    }
-
-    .item {
-      border-radius: $default-border-radius;
-      padding: $default-legend-padding;
-
-      .title {
-        align-items: center;
-        display: flex;
-
-        .dot {
-          border-radius: 50%;
-          display: inline-block;
-          height: $default-legend-dot-height;
-          margin-right: $default-legend-dot-margin-right;
-          width: $default-legend-dot-width;
-        }
-
-        .text {
-          color: var(--paragraph);
-          font-size: calc($default-text-font-size * .75);
-        }
-      }
-
-
-
-      .sub-title {
-        color: var(--heading);
-        display: flex;
-        font-size: calc($default-text-font-size * 1.2);
-        font-weight: 500;
-        justify-content: flex-start;
-        margin-left: 1rem;
-      }
-
-      .percentage-title {
-        color: var(--paragraph);
-        font-size: calc($default-text-font-size * .75);
-        justify-content: flex-start;
-      }
-    }
-  }
-}

package/dist/cjs/a/Charts/Common/CustomTooltipContent/CustomTooltipContent.js

@@ -1,129 +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 _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-var _utils = require("../../../../utils");
-require("./styles.scss");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const baseClassName = _exports.default.base;
-const componentClassName = 'custom-tooltip-content';
-const CustomTooltipContent = _ref => {
-  let {
-    id,
-    className: userClassName,
-    dateFormat,
-    isTimeFormat,
-    isDateValue,
-    active,
-    payload,
-    label,
-    isPieChart
-  } = _ref;
-  const formatLabelValue = value => {
-    if (isTimeFormat) {
-      return (0, _utils.formatTime)(value);
-    }
-    if (typeof value === 'number') {
-      if (Number.isInteger(value)) return value;
-      return value.toFixed(2);
-    }
-    return value;
-  };
-  const renderContent = entry => {
-    if (isPieChart) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Submissions"), /*#__PURE__*/React.createElement("div", {
-        className: "pie-chart-label"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "status"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "dot",
-        style: {
-          backgroundColor: entry?.payload?.color
-        }
-      }), /*#__PURE__*/React.createElement("p", {
-        className: "label",
-        key: `${entry.name}`,
-        style: {
-          color: entry.color,
-          textTransform: 'capitalize'
-        }
-      }, `${(0, _utils.snakeCaseToTitleCase)(entry.name)}  `)), /*#__PURE__*/React.createElement("p", {
-        className: "value"
-      }, `${formatLabelValue(entry.value)}`), /*#__PURE__*/React.createElement("p", {
-        className: "percentage-title"
-      }, `${entry?.payload?.percentage}%`)));
-    }
-    return /*#__PURE__*/React.createElement("p", {
-      className: "label",
-      key: `${entry.name}`,
-      style: {
-        color: entry.color,
-        textTransform: 'capitalize'
-      }
-    }, `${(0, _utils.snakeCaseToTitleCase)(entry.name)}: ${formatLabelValue(entry.value)}`);
-  };
-  if (active && payload && payload?.length) {
-    const newPayload = payload.filter(item => item?.name !== 'bounds');
-    return /*#__PURE__*/React.createElement("div", {
-      id: id,
-      className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
-    }, /*#__PURE__*/React.createElement("p", {
-      className: "label"
-    }, isDateValue ? (0, _utils.formatDate)(label, dateFormat) : label), newPayload.map(entry => renderContent(entry)));
-  }
-  return null;
-};
-CustomTooltipContent.propTypes = {
-  /**
-  * The id of the dropdown component.
-  */
-  id: _propTypes.default.string,
-  /**
-   * Additional class names for the dropdown component.
-   */
-  className: _propTypes.default.string,
-  /**
-   * Flag on whether it is a timeformat or not
-   */
-  isTimeFormat: _propTypes.default.bool,
-  /**
-   * The type of format for the datetime value
-   */
-  dateFormat: _propTypes.default.oneOf(Object.values(_utils.DATE_FORMATS)),
-  /**
-   * Flag on whether the label is a date value or not
-   */
-  isDateValue: _propTypes.default.bool,
-  /**
-   * If set true, the tooltip is displayed.
-   * If set false, the tooltip is hidden, usually calculated internally.
-   */
-  active: _propTypes.default.bool.isRequired,
-  /**
-   * The source data of the content to be displayed in the tooltip,
-   * always calculated internally and cannot be user set.
-   */
-  payload: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-  /**
-   *The label value which is active now, usually calculated internally.
-   */
-  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
-  /**
-   * Flag on whether the chart is a pie chart or not
-   */
-  isPieChart: _propTypes.default.bool
-};
-CustomTooltipContent.defaultProps = {
-  isTimeFormat: false,
-  isDateValue: true,
-  dateFormat: _utils.DATE_FORMATS.HUMAN_READABLE,
-  isPieChart: false
-};
-var _default = exports.default = CustomTooltipContent;

package/dist/cjs/a/Charts/Common/CustomTooltipContent/index.js

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

package/dist/cjs/a/Charts/Common/CustomTooltipContent/styles.scss

@@ -1,26 +0,0 @@
-@use "@pareto-engineering/bem";
-
-$default-margin: 1rem;
-$default-padding: 1rem;
-$default-text-font-size: calc(var(--s-1) * 1rem);
-$default-border-radius: .25rem;
-$default-border-line-width: .0625rem;
-$default-legend-dot-width: .5rem;
-$default-legend-dot-height: .5rem;
-$default-legend-dot-margin-right: .3125rem;
-
-.#{bem.$base} {
-  &.custom-tooltip-content {
-    background-color: var(--background-far);
-    border: $default-border-line-width solid var(--ui-lines);
-    border-radius: $default-border-radius;
-    padding: calc($default-padding * .25);
-
-    .label {
-      color: var(--hard-paragraph);
-      font-size: $default-text-font-size;
-      margin: calc($default-margin * .25);
-    }
-  }
-}
-

package/dist/cjs/a/Charts/Common/YLabelsDropDown/YlabelsDropDown.js

@@ -1,97 +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 _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-var _utils = require("../../../../utils");
-require("./styles.scss");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// DropdownStatus.js
-
-const baseClassName = _exports.default.base;
-const componentClassName = 'y-labels-dropdown';
-const YLabelsDropDown = _ref => {
-  let {
-    id,
-    className: userClassName,
-    placeholder,
-    selectedYLabels,
-    setSelectedYLabels,
-    allYLabels
-  } = _ref;
-  const [isOpen, setIsOpen] = React.useState(false);
-  const toggleYLabel = yLabel => {
-    setSelectedYLabels(prev => prev.some(label => label.label === yLabel.label) ? prev.filter(label => label.label !== yLabel.label) : [...prev, yLabel]);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
-  }, /*#__PURE__*/React.createElement("button", {
-    className: "dropdown-button",
-    onClick: () => setIsOpen(!isOpen),
-    type: "button"
-  }, placeholder, /*#__PURE__*/React.createElement("span", {
-    className: `icon ${isOpen ? _exports.default.modifierOpen : ''}`
-  }, "W")), /*#__PURE__*/React.createElement("div", {
-    className: `dropdown-content ${isOpen ? _exports.default.modifierOpen : ''}`
-  }, allYLabels.map(item =>
-  /*#__PURE__*/
-  // eslint-disable-next-line max-len
-  // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-  React.createElement("div", {
-    key: item.label,
-    className: `dropdown-item ${selectedYLabels.some(label => label.label === item.label) ? _exports.default.modifierActive : ''}`
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    ,
-    onClick: () => toggleYLabel(item)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "status-dot",
-    style: {
-      backgroundColor: item.color
-    }
-  }), (0, _utils.snakeCaseToTitleCase)(item.label), selectedYLabels.some(label => label.label === item.label) && /*#__PURE__*/React.createElement("span", {
-    className: "icon checkmark"
-  }, "I")))));
-};
-YLabelsDropDown.propTypes = {
-  /**
-   * The id of the dropdown component.
-   */
-  id: _propTypes.default.string,
-  /**
-   * Additional class names for the dropdown component.
-   */
-  className: _propTypes.default.string,
-  /**
-   * Placeholder text for the dropdown button.
-   */
-  placeholder: _propTypes.default.string,
-  /**
-   * Array of selected Y labels with their corresponding colors.
-   */
-  selectedYLabels: _propTypes.default.arrayOf(_propTypes.default.shape({
-    label: _propTypes.default.string,
-    color: _propTypes.default.string
-  })),
-  /**
-   * Function to set the selected Y labels.
-   */
-  setSelectedYLabels: _propTypes.default.func,
-  /**
-   * Array of all Y labels with their corresponding colors.
-   */
-  allYLabels: _propTypes.default.arrayOf(_propTypes.default.shape({
-    label: _propTypes.default.string,
-    color: _propTypes.default.string
-  }))
-};
-YLabelsDropDown.defaultProps = {
-  placeholder: 'Select Item'
-};
-var _default = exports.default = YLabelsDropDown;

package/dist/cjs/a/Charts/Common/YLabelsDropDown/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "YLabelsDropDown", {
-  enumerable: true,
-  get: function () {
-    return _YlabelsDropDown.default;
-  }
-});
-var _YlabelsDropDown = _interopRequireDefault(require("./YlabelsDropDown"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/a/Charts/Common/YLabelsDropDown/styles.scss

@@ -1,89 +0,0 @@
-@use "@pareto-engineering/bem";
-
-$default-margin: 1rem;
-$default-border: var(--theme-default-input-border);
-$default-border-radius: var(--theme-default-input-border-radius);
-$default-padding: 1rem;
-$default-width: 15rem;
-$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
-$default-dot-width: .5rem;
-$default-dot-height: .5rem;
-$default-checkmark-font-size: calc(var(--s-1) * .75rem);
-
-.#{bem.$base} {
-  &.y-labels-dropdown {
-    display: inline-block;
-    position: relative;
-
-    .dropdown-button {
-      align-items: center;
-      background-color: var(--background-far);
-      border: $default-border;
-      border-radius: calc($default-border-radius / 2);
-      color: var(--hard-paragraph);
-      cursor: pointer;
-      display: flex;
-      justify-content: space-between;
-      padding: calc($default-padding * .5);
-      text-align: left;
-      width: $default-width;
-
-      .icon {
-        color: var(--hard-ui-icons);
-        font-size: calc($default-checkmark-font-size * 1.25);
-
-        &.#{bem.$modifier-open} {
-          transform: rotate(180deg);
-        }
-      }
-    }
-
-    .dropdown-content {
-      background-color: var(--background-far);
-      border-radius: $default-border-radius;
-      box-shadow: $default-box-shadow;
-      display: none;
-      margin-top: calc($default-margin * .125);
-      position: absolute;
-      width: $default-width;
-      z-index: 1;
-
-      &.#{bem.$modifier-open} {
-        display: block;
-      }
-
-      .dropdown-item {
-        align-items: center;
-        border-radius: calc($default-border-radius / 2);
-        color: var(--paragraph);
-        cursor: pointer;
-        display: flex;
-        margin: calc($default-margin * .125);
-        padding: calc($default-padding * .5);
-        text-decoration: none;
-
-        &.#{bem.$modifier-active} {
-          background-color: var(--background-near);
-        }
-
-        &:hover {
-          background-color: var(--background-near);
-        }
-
-        .status-dot {
-          border-radius: 50%;
-          display: inline-block;
-          height: $default-dot-height;
-          margin-right: calc($default-margin * .5);
-          width: $default-dot-width;
-        }
-
-        .checkmark {
-          color: var(--hard-main);
-          font-size: $default-checkmark-font-size;
-          margin-left: auto;
-        }
-      }
-    }
-  }
-}

package/dist/cjs/a/Charts/Common/index.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "CustomLegend", {
-  enumerable: true,
-  get: function () {
-    return _CustomLegend.CustomLegend;
-  }
-});
-Object.defineProperty(exports, "CustomTooltipContent", {
-  enumerable: true,
-  get: function () {
-    return _CustomTooltipContent.CustomTooltipContent;
-  }
-});
-Object.defineProperty(exports, "YLabelsDropDown", {
-  enumerable: true,
-  get: function () {
-    return _YLabelsDropDown.YLabelsDropDown;
-  }
-});
-var _CustomLegend = require("./CustomLegend");
-var _CustomTooltipContent = require("./CustomTooltipContent");
-var _YLabelsDropDown = require("./YLabelsDropDown");