@pareto-engineering/design-system 5.2.0 → 5.3.0

package/dist/es/a/Charts/PieChart/styles.scss

@@ -3,7 +3,11 @@
 $default-margin: 1rem;
 $default-padding: 1rem;
 $default-box-shadow: 0 .25rem .75rem var(--ui-lines);
+$soft-box-shadow: 0 .25rem 1rem var(--soft-shadow);
 $default-text-font-size: calc(var(--s-1) * 1rem);
+$default-legend-dot-width: .75rem;
+$default-legend-dot-height: .75rem;
+$default-legend-dot-margin-right: .3125rem;
 
 .#{bem.$base} {
   &.pie-chart {
@@ -13,6 +17,90 @@ $default-text-font-size: calc(var(--s-1) * 1rem);
     margin: $default-margin 0;
     padding: $default-padding;
 
+    .custom-legend {
+      .item {
+        padding-top: 0;
+      }
+
+      .title .dot {
+        height: $default-legend-dot-height;
+        width: $default-legend-dot-width;
+      }
+
+      .title .text {
+        font-size: calc($default-text-font-size * 1.5);
+      }
+
+      .sub-title-percentage-container {
+        align-items: center;
+        display: flex;
+        gap: .8rem;
+        margin-left: .5rem;
+        width: fit-content;
+      }
+
+      .sub-title-percentage-container .sub-title {
+        font-size: calc($default-text-font-size * 1.25);
+      }
+
+      .sub-title-percentage-container .percentage-title {
+        font-size: calc($default-text-font-size * 1);
+      }
+    }
+
+    .custom-tooltip-content {
+      box-shadow: $soft-box-shadow;
+
+      p {
+        color: var(--hard-paragraph);
+        font-size: calc($default-text-font-size * .8);
+        font-weight: 600;
+        margin: 0;
+      }
+
+      .pie-chart-label {
+        align-items: center;
+        display: flex;
+        gap: 1.25rem;
+        justify-content: flex-start;
+
+        .status {
+          align-items: center;
+          display: flex;
+          gap: .1rem;
+        }
+
+        .label {
+          color: var(--hard-paragraph);
+          font-size: calc($default-text-font-size * 1);
+          font-weight: 600;
+          text-transform: capitalize;
+        }
+
+        .dot {
+          border-radius: 50%;
+          display: inline-block;
+          height: $default-legend-dot-height;
+          margin-right: $default-legend-dot-margin-right;
+          width: $default-legend-dot-width;
+        }
+
+        .value {
+          color: var(--hard-paragraph);
+          font-size: calc($default-text-font-size * 1);
+          font-weight: 600;
+          text-transform: capitalize;
+        }
+
+        .percentage-title {
+          color: var(--soft-paragraph);
+          font-size: calc($default-text-font-size * 1);
+          font-weight: 300;
+          text-transform: capitalize;
+        }
+      }
+    }
+
     .chart-header {
       align-items: center;
       display: flex;

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

@@ -1,6 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
+@use "sass:math";
+@use "sass:list";
 
 /*
 $hamburger-padding-x           : 15px !default;
@@ -22,17 +24,157 @@ $hamburger-hover-filter       : opacity(50%) !default;
 $hamburger-active-hover-filter: $hamburger-hover-filter !default;
 */
 
-$hamburgers-types:(
-  squeeze
-);
-$hamburger-layer-color         : var(--x);
-$hamburger-padding-x           : .5em;
-$hamburger-padding-y           : .5em;
+// Define the variables to be used with the hamburgers library
+$hamburger-types: (squeeze);
+$hamburger-layer-color: var(--x);
+$hamburger-padding-x: .5em;
+$hamburger-padding-y: .5em;
 
-// Open the following file for the template
+// Additional hamburger variables with defaults
+$hamburger-layer-width: 40px !default;
+$hamburger-layer-height: 4px !default;
+$hamburger-layer-spacing: 6px !default;
+$hamburger-layer-border-radius: 4px !default;
+$hamburger-hover-opacity: .7 !default;
+$hamburger-hover-use-filter: false !default;
+$hamburger-hover-filter: opacity(50%) !default;
+$hamburger-active-layer-color: $hamburger-layer-color !default;
+$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
+$hamburger-active-hover-filter: $hamburger-hover-filter !default;
+
+// Base Hamburger Styles
+// ==================================================
+.hamburger {
+  background-color: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  display: inline-block;
+
+  // Normalize (<button>)
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  padding: $hamburger-padding-y $hamburger-padding-x;
+  text-transform: none;
+  transition-duration: .15s;
+
+  transition-property: opacity, filter;
+  transition-timing-function: linear;
+
+  &:hover {
+    @if $hamburger-hover-use-filter == true {
+      filter: $hamburger-hover-filter;
+    }
+    @else {
+      opacity: $hamburger-hover-opacity;
+    }
+  }
+
+  &.is-active {
+    &:hover {
+      @if $hamburger-hover-use-filter == true {
+        filter: $hamburger-active-hover-filter;
+      }
+      @else {
+        opacity: $hamburger-active-hover-opacity;
+      }
+    }
+
+    .hamburger-inner,
+    .hamburger-inner::before,
+    .hamburger-inner::after {
+      background-color: $hamburger-active-layer-color;
+    }
+  }
+}
+
+.hamburger-box {
+  display: inline-block;
+  height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
+  position: relative;
+  width: $hamburger-layer-width;
+}
+
+.hamburger-inner {
+  display: block;
+  margin-top: math.div($hamburger-layer-height, -2);
+  top: 50%;
+
+  &,
+  &::before,
+  &::after {
+    background-color: $hamburger-layer-color;
+    border-radius: $hamburger-layer-border-radius;
+    height: $hamburger-layer-height;
+    position: absolute;
+    transition-duration: .15s;
+    transition-property: transform;
+    transition-timing-function: ease;
+    width: $hamburger-layer-width;
+  }
+
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+  }
+
+  &::before {
+    top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+  }
+
+  &::after {
+    bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+  }
+}
+
+// Squeeze Type
+// ==================================================
+
+@if list.index($hamburger-types, squeeze) {
+  /*
+    * Squeeze
+    */
+  .hamburger-squeeze {
+    .hamburger-inner {
+      transition-duration: .1s;
+      transition-timing-function: cubic-bezier(.55, .055, .675, .19);
+
+      &::before {
+        transition: top .1s .12s ease,
+          opacity .1s ease;
+      }
+
+      &::after {
+        transition: bottom .1s .12s ease,
+          transform .1s cubic-bezier(.55, .055, .675, .19);
+      }
+    }
+
+    &.is-active {
+      .hamburger-inner {
+        transform: rotate(45deg);
+        transition-delay: .12s;
+        transition-timing-function: cubic-bezier(.215, .61, .355, 1);
+
+        &::before {
+          opacity: 0;
+          top: 0;
+          transition: top .1s ease,
+            opacity .1s .12s ease;
+        }
 
-@import "hamburgers/_sass/hamburgers/hamburgers";
-@import "hamburgers/_sass/hamburgers/types/squeeze";
+        &::after {
+          bottom: 0;
+          transform: rotate(-90deg);
+          transition: bottom .1s ease,
+            transform .1s .12s cubic-bezier(.215, .61, .355, 1);
+        }
+      }
+    }
+  }
+}
 
 /*
 .#{bem.$base}.hamburger-button{

package/dist/es/a/ThroughPutIndicator/ThroughPutIndicator.js

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
+
+// Local Definitions
+const baseClassName = styleNames.base;
+const componentClassName = 'throughput-indicator';
+const ThroughPutIndicator = ({
+  data,
+  keyName = 'reserved'
+}) => {
+  const renderNoChange = () => /*#__PURE__*/React.createElement("div", {
+    className: [baseClassName, componentClassName].filter(e => e).join(' ')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "no-change-text"
+  }, "No change"));
+  const renderChange = (direction, percentage, icon = direction === 'positive' ? 'S' : 'R') => /*#__PURE__*/React.createElement("div", {
+    className: [baseClassName, componentClassName].filter(e => e).join(' ')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `ai-icon ${direction}-throughput-indicator`
+  }, icon), /*#__PURE__*/React.createElement("p", null, percentage, "%"));
+
+  // Handle invalid or insufficient data
+  if (!data || data.length < 2) {
+    return renderNoChange();
+  }
+  const first = data[0][keyName];
+  const last = data[data.length - 1][keyName];
+
+  // Handle no change scenarios
+  if (first === 0 && last === 0) {
+    return renderNoChange();
+  }
+
+  // Handle special case: starting from zero
+  if (first === 0 && last !== 0) {
+    return renderChange('positive', '100');
+  }
+
+  // Calculate percentage change
+  const percentChange = (last - first) / Math.abs(first) * 100;
+  const rounded = Math.abs(percentChange).toFixed(1);
+
+  // No change
+  if (percentChange === 0) {
+    return renderNoChange();
+  }
+
+  // Positive or negative change
+  const direction = percentChange > 0 ? 'positive' : 'negative';
+  const icon = direction === 'positive' ? 'S' : 'R';
+  return renderChange(direction, rounded, icon);
+};
+ThroughPutIndicator.propTypes = {
+  /**
+   * The data to be displayed in the throughput indicator
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * The key name to be displayed in the throughput indicator
+   */
+  keyName: PropTypes.string
+};
+export default ThroughPutIndicator;

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

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

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

@@ -0,0 +1,35 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-text-font-size: calc(var(--s-1) * 1rem);
+
+.#{bem.$base} {
+  .throughput-indicator {
+    align-items: center;
+    border: 1px solid var(--hard-grey);
+    border-radius: 2rem;
+    display: flex;
+    gap: .5rem;
+    height: 3rem;
+    padding: .5rem;
+
+    .positive-throughput-indicator {
+      color: var(--success);
+      font-size: 1rem;
+    }
+
+    .negative-throughput-indicator {
+      color: var(--error);
+      font-size: .75rem;
+    }
+
+    .no-change-text {
+      color: var(--paragraph);
+    }
+
+    p {
+      font-size: 1rem;
+    }
+  }
+}

package/dist/es/a/ToggleSwitch/ToggleSwitch.js

@@ -36,7 +36,8 @@ const ToggleSwitch = ({
   checked: checked,
   onChange: handleOnChange
 }), /*#__PURE__*/React.createElement("label", {
-  htmlFor: inputId
+  htmlFor: inputId,
+  className: checked ? 'checked' : ''
 }));
 ToggleSwitch.propTypes = {
   /**

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

@@ -7,7 +7,7 @@ $default-size: var(--size, 1.2em);
 $default-slider-color: var(--slider-color, var(--background-far));
 $default-slider-border-color: var(--slider-border-color, var(--ui-lines));
 $default-background-color: var(--slider-background-color, var(--interactive));
-
+$default-background-disabled: var(--disabled, var(--background-far));
 .#{bem.$base}.toggle-switch {
   background: transparent;
   border: none;
@@ -21,7 +21,6 @@ $default-background-color: var(--slider-background-color, var(--interactive));
   }
 
   >label {
-    background: $default-background-color;
     border-radius: $default-border-radius;
     cursor: pointer;
     display: block;
@@ -29,6 +28,14 @@ $default-background-color: var(--slider-background-color, var(--interactive));
     position: relative;
     width: calc($default-size * 2);
 
+    &.checked {
+      background: $default-background-color;
+    }
+
+    &:not(.checked) {
+      background: $default-background-disabled;
+    }
+
     &::after {
       background: $default-slider-color;
       border: 1px solid $default-slider-border-color;

package/dist/es/a/Tooltip/Tooltip.js

@@ -1,5 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import "./styles.scss";
@@ -17,23 +18,37 @@ const Tooltip = ({
   className: userClassName,
   style,
   position,
+  isFloating,
   color,
   description,
   content,
   children
   // ...otherProps
-}) => /*#__PURE__*/React.createElement("div", {
-  id: id,
-  className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
-  style: style
-}, /*#__PURE__*/React.createElement("div", {
-  className: "tooltip-trigger-wrapper",
-  "aria-describedby": description
-}, children), /*#__PURE__*/React.createElement("div", {
-  className: `tooltip-content ${position}`,
-  role: "tooltip",
-  id: description
-}, content));
+}) => {
+  useEffect(() => {
+    const handleMouseMove = e => {
+      document.documentElement.style.setProperty('--mouse-x', `${e.clientX}px`);
+      document.documentElement.style.setProperty('--mouse-y', `${e.clientY}px`);
+    };
+    if (!isFloating) {
+      return () => window.removeEventListener('mousemove', handleMouseMove);
+    }
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  }, [isFloating]);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tooltip-trigger-wrapper",
+    "aria-describedby": description
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: ['tooltip-content', position, isFloating ? 'floating' : ''].filter(e => e).join(' '),
+    role: "tooltip",
+    id: description
+  }, content));
+};
 Tooltip.propTypes = {
   /**
    * The HTML id for this element
@@ -63,6 +78,10 @@ Tooltip.propTypes = {
    * The position of the tooltip with respect to the trigger element
    */
   position: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  /**
+   * Whether or not the tooltip should be floating
+   */
+  isFloating: PropTypes.bool,
   /**
    * The base color of the tooltip
    */

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

@@ -24,25 +24,53 @@ $default-width: var(--tooltip-width, 20rem);
     visibility: hidden;
     z-index: 10;
 
-    &.top {
+    &.floating.top {
+      left: var(--mouse-x);
+      position: fixed;
+      top: calc(var(--mouse-y) - $default-block-padding);
+      transform: translate(-50%, -100%);
+    }
+
+    &.floating.right {
+      left: calc(var(--mouse-x) + $default-inline-padding);
+      position: fixed;
+      top: var(--mouse-y);
+      transform: translateY(-50%);
+    }
+
+    &.floating.bottom {
+      left: var(--mouse-x);
+      position: fixed;
+      top: calc(var(--mouse-y) + $default-block-padding);
+      transform: translateX(-50%);
+    }
+
+    &.floating.left {
+      left: calc(var(--mouse-x) - $default-inline-padding);
+      position: fixed;
+      top: var(--mouse-y);
+      transform: translate(-100%, -50%);
+    }
+
+    &:not(.floating).top {
       --horizontal: -50%;
       bottom: calc(100% + $default-block-padding);
       left: 50%;
     }
 
-    &.right {
+    &:not(.floating).right {
       --vertical: 50%;
       bottom: 50%;
       left: calc(100% + $default-inline-padding);
     }
 
-    &.bottom {
+    &:not(.floating).bottom {
       --horizontal: -50%;
       left: 50%;
       top: calc(100% + $default-block-padding);
     }
 
-    &.left {
+    &:not(.floating).left {
       --vertical: 50%;
       bottom: 50%;
       right: calc(100% + $default-inline-padding);

package/dist/es/a/XMLEditor/XMLEditor.js

@@ -2,9 +2,9 @@
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { EditorState } from '@codemirror/state';
+import { EditorState, Prec } from '@codemirror/state';
 import { EditorView, keymap, lineNumbers, drawSelection, dropCursor, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, crosshairCursor, rectangularSelection } from '@codemirror/view';
-import { defaultKeymap, indentWithTab, history, historyKeymap } from '@codemirror/commands';
+import { defaultKeymap, indentWithTab, history, historyKeymap, insertNewlineAndIndent } from '@codemirror/commands';
 import { indentOnInput, bracketMatching, foldGutter } from '@codemirror/language';
 import { xml } from '@codemirror/lang-xml';
 import styleNames from '@pareto-engineering/bem/exports';
@@ -33,7 +33,10 @@ const XMLEditor = ({
   useEffect(() => {
     const startState = EditorState.create({
       doc: config,
-      extensions: [keymap.of([defaultKeymap, indentWithTab, ...historyKeymap]), indentOnInput(), lineNumbers(), bracketMatching(), foldGutter(), drawSelection(), highlightActiveLine(), highlightActiveLineGutter(), highlightSpecialChars(), dropCursor(), rectangularSelection(), crosshairCursor(), xml(), history(), theme, EditorState.readOnly.of(readOnly), EditorView.updateListener.of(view => {
+      extensions: [Prec.highest(keymap.of([{
+        key: 'Enter',
+        run: view => insertNewlineAndIndent(view)
+      }])), keymap.of([defaultKeymap, indentWithTab, ...historyKeymap]), indentOnInput(), lineNumbers(), bracketMatching(), foldGutter(), drawSelection(), highlightActiveLine(), highlightActiveLineGutter(), highlightSpecialChars(), dropCursor(), rectangularSelection(), crosshairCursor(), xml(), history(), theme, EditorState.readOnly.of(readOnly), EditorView.updateListener.of(view => {
         onChange(view);
         // view.state.doc.toString() to receive the current content in the editor.
       }), EditorView.focusChangeEffect.of((state, focused) => {

package/dist/es/a/index.js

@@ -28,4 +28,5 @@ export { ToggleSwitch } from "./ToggleSwitch";
 export { XMLEditor } from "./XMLEditor";
 export { DatePicker } from "./DatePicker";
 export { Tooltip } from "./Tooltip";
-export { AreaChart, BarChart, PieChart } from "./Charts";
+export { AreaChart, BarChart, PieChart } from "./Charts";
+export { ThroughPutIndicator } from "./ThroughPutIndicator";

package/dist/es/f/FormInput/FormInput.js

@@ -3,7 +3,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import * as React from 'react';
 import { memo } from 'react';
 import PropTypes from 'prop-types';
-import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices, LinkInput, EditorInput, FileUpload, LatexPreviewInput } from "../fields";
+import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices, LinkInput, EditorInput, FileUpload, LatexPreviewInput, ToggleInput } from "../fields";
 import "./styles.scss";
 
 // Local Definitions
@@ -60,6 +60,12 @@ const FormInput = ({
       disabled: disabled
     }, otherProps));
   }
+  if (type === 'toggle') {
+    return /*#__PURE__*/React.createElement(ToggleInput, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
   if (type === 'query-choices') {
     return /*#__PURE__*/React.createElement(QueryChoices, _extends({
       className: newClassName,
@@ -122,7 +128,7 @@ FormInput.propTypes = {
   /**
    * The HTML class names for this element
    */
-  type: PropTypes.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', 'query-combobox', 'query-select', 'url', 'rating', 'checkbox',
+  type: PropTypes.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', 'query-combobox', 'query-select', 'url', 'rating', 'checkbox', 'toggle',
   // to be removed
   'extendedTypeInput']),
   /**