@pareto-engineering/design-system 5.1.3 → 5.2.1

package/src/ui/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/src/ui/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/src/ui/a/XMLEditor/XMLEditor.jsx

@@ -5,7 +5,7 @@ import { useEffect, useRef } from 'react'
 
 import PropTypes from 'prop-types'
 
-import { EditorState } from '@codemirror/state'
+import { EditorState, Prec } from '@codemirror/state'
 
 import {
   EditorView,
@@ -25,6 +25,7 @@ import {
   indentWithTab,
   history,
   historyKeymap,
+  insertNewlineAndIndent,
 } from '@codemirror/commands'
 
 import {
@@ -67,7 +68,19 @@ const XMLEditor = ({
     const startState = EditorState.create({
       doc       :config,
       extensions:[
-        keymap.of([defaultKeymap, indentWithTab, ...historyKeymap]),
+        Prec.highest(
+          keymap.of([
+            {
+              key:'Enter',
+              run:(view) => insertNewlineAndIndent(view),
+            },
+          ]),
+        ),
+        keymap.of([
+          defaultKeymap,
+          indentWithTab,
+          ...historyKeymap,
+        ]),
         indentOnInput(),
         lineNumbers(),
         bracketMatching(),

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

@@ -2,6 +2,7 @@
 /* eslint-disable import/no-extraneous-dependencies -- required here */
 import * as React from 'react'
 import { memo, useEffect } from 'react'
+import { $getRoot } from 'lexical'
 import { useField, useFormikContext } from 'formik'
 import { LexicalComposer } from '@lexical/react/LexicalComposer'
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
@@ -66,6 +67,7 @@ const EditorInput = ({
   showDebugger,
   setEditorState,
   setPlainTextKey,
+  validate,
   // ...otherProps
 }) => {
   const [field, ,] = useField(name)
@@ -116,6 +118,11 @@ const EditorInput = ({
 
   const onChange = (state) => {
     setFieldValue(name, JSON.stringify(state))
+    validate?.(state.read(() => {
+      const root = $getRoot()
+      const textContent = root.getTextContent()
+      return textContent
+    }))
   }
 
   const initialConfig = {