@pareto-engineering/design-system 5.2.0 → 5.2.1

package/dist/es/a/Charts/PieChart/PieChart.js

@@ -52,9 +52,27 @@ const PieChart = ({
     strokeWidth: 0
   }))), /*#__PURE__*/React.createElement(Tooltip, {
     content: /*#__PURE__*/React.createElement(CustomTooltipContent, {
-      isDateValue: false
+      isDateValue: false,
+      isPieChart: true
     })
-  }))), /*#__PURE__*/React.createElement(CustomLegend, {
+  }), /*#__PURE__*/React.createElement("text", {
+    x: "50%",
+    y: "50%",
+    textAnchor: "middle",
+    dominantBaseline: "middle",
+    style: {}
+  }, /*#__PURE__*/React.createElement("tspan", {
+    x: "50%",
+    dy: "-1.2em",
+    fontSize: "14",
+    fill: "grey"
+  }, "Total"), /*#__PURE__*/React.createElement("tspan", {
+    x: "50%",
+    dy: "1.2em",
+    fill: "var(--heading)",
+    fontSize: "22"
+  }, `${total}`)))), /*#__PURE__*/React.createElement(CustomLegend, {
+    key: id,
     colorsArray: colors,
     yKeysArray: formattedData,
     capitalizedLegend: true,
@@ -83,7 +101,7 @@ PieChart.defaultProps = {
   className: undefined,
   width: '100%',
   height: 300,
-  innerRadius: '0%',
+  innerRadius: '50%',
   outerRadius: '100%'
 };
 export default PieChart;

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -45,7 +45,8 @@
     "css-loader": "^6.7.3",
     "identity-obj-proxy": "^3.0.0",
     "jest-environment-jsdom": "^29.5.0",
-    "sass-loader": "^13.2.2",
+    "sass": "^1.85.1",
+    "sass-loader": "^16.0.5",
     "storybook": "^7.0.6",
     "style-loader": "^3.3.2"
   },
@@ -60,8 +61,8 @@
     "@lexical/table": "0.12.2",
     "@lexical/utils": "0.12.2",
     "@pareto-engineering/assets": "^5.1.1",
-    "@pareto-engineering/bem": "^5.0.0",
-    "@pareto-engineering/styles": "^5.0.0",
+    "@pareto-engineering/bem": "^5.2.1",
+    "@pareto-engineering/styles": "^5.2.1",
     "@pareto-engineering/utils": "^5.0.0",
     "better-react-mathjax": "^2.0.3",
     "codemirror": "^6.0.1",
@@ -87,5 +88,5 @@
     "remark-math": "^6.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "2f0f3c933a23635520aebf9b3bb932a4063c432e"
+  "gitHead": "dad6ef35dec907ece7e046fdd5697e44e70c8941"
 }

package/src/ui/a/Charts/AreaChart/AreaChart.jsx

@@ -78,6 +78,7 @@ const AreaChart = ({
         />
       </div>
       <CustomLegend
+        key={id}
         colorsArray={colors}
         yKeysArray={yKeys}
         capitalizedLegend={capitalizedLegend}

package/src/ui/a/Charts/BarChart/BarChart.jsx

@@ -68,6 +68,7 @@ const BarChart = ({
         />
       </div>
       <CustomLegend
+        key={id}
         colorsArray={selectedYLabels.map((item) => item.color)}
         yKeysArray={selectedYLabels.map((item) => item.label)}
         capitalizedLegend={capitalizedLegend}

package/src/ui/a/Charts/Common/CustomLegend/CustomLegend.jsx

@@ -46,11 +46,19 @@ const CustomLegend = ({
                 ? snakeCaseToTitleCase(getLegendItemTitle(key))
                 : getLegendItemTitle(key)
             }
+
+          </span>
+        </div>
+        <div className="sub-title-percentage-container">
+          <span className="sub-title">
+            {getLegendItemSubtitle(key)}
           </span>
+          {key.percentage && (
+            <span className="percentage-title">
+              {`${key.percentage}%`}
+            </span>
+          )}
         </div>
-        <span className="sub-title">
-          {getLegendItemSubtitle(key)}
-        </span>
       </div>
     ))}
   </div>

package/src/ui/a/Charts/Common/CustomLegend/styles.scss

@@ -24,7 +24,6 @@ $default-box-shadow: 0 4px 16px 0 var(--soft-shadow);
       min-width: fit-content;
 
       .item {
-        box-shadow: $default-box-shadow;
         padding-top: $default-padding;
       }
     }
@@ -55,12 +54,21 @@ $default-box-shadow: 0 4px 16px 0 var(--soft-shadow);
         }
       }
 
+
+
       .sub-title {
         color: var(--heading);
         display: flex;
         font-size: calc($default-text-font-size * 1.2);
         font-weight: 500;
-        justify-content: flex-end;
+        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/src/ui/a/Charts/Common/CustomTooltipContent/CustomTooltipContent.jsx

@@ -23,6 +23,7 @@ const CustomTooltipContent = ({
   active,
   payload,
   label,
+  isPieChart,
 }) => {
   const formatLabelValue = (value) => {
     if (isTimeFormat) {
@@ -37,8 +38,40 @@ const CustomTooltipContent = ({
     return value
   }
 
-  if (active && payload && payload.length) {
-    const newPayload = payload.filter((item) => item.name !== 'bounds')
+  const renderContent = (entry) => {
+    if (isPieChart) {
+      return (
+        <>
+          <p>Submissions</p>
+          <div className="pie-chart-label">
+            <div className="status">
+              <span
+                className="dot"
+                style={{ backgroundColor: entry?.payload?.color }}
+              />
+              <p className="label" key={`${entry.name}`} style={{ color: entry.color, textTransform: 'capitalize' }}>
+                {`${snakeCaseToTitleCase(entry.name)}  `}
+              </p>
+            </div>
+            <p className="value">
+              {`${formatLabelValue(entry.value)}`}
+            </p>
+            <p className="percentage-title">
+              {`${entry?.payload?.percentage}%`}
+            </p>
+          </div>
+        </>
+      )
+    }
+    return (
+      <p className="label" key={`${entry.name}`} style={{ color: entry.color, textTransform: 'capitalize' }}>
+        {`${snakeCaseToTitleCase(entry.name)}: ${formatLabelValue(entry.value)}`}
+      </p>
+    )
+  }
+
+  if (active && payload && payload?.length) {
+    const newPayload = payload.filter((item) => item?.name !== 'bounds')
     return (
       <div
         id={id}
@@ -54,9 +87,7 @@ const CustomTooltipContent = ({
           {isDateValue ? formatDate(label, dateFormat) : label}
         </p>
         {newPayload.map((entry) => (
-          <p className="label" key={`${entry.name}`} style={{ color: entry.color, textTransform: 'capitalize' }}>
-            {`${snakeCaseToTitleCase(entry.name)}: ${formatLabelValue(entry.value)}`}
-          </p>
+          renderContent(entry)
         ))}
       </div>
     )
@@ -106,12 +137,18 @@ CustomTooltipContent.propTypes = {
    *The label value which is active now, usually calculated internally.
    */
   label:PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+
+  /**
+   * Flag on whether the chart is a pie chart or not
+   */
+  isPieChart:PropTypes.bool,
 }
 
 CustomTooltipContent.defaultProps = {
   isTimeFormat:false,
   isDateValue :true,
   dateFormat  :DATE_FORMATS.HUMAN_READABLE,
+  isPieChart  :false,
 }
 
 export default CustomTooltipContent

package/src/ui/a/Charts/Common/CustomTooltipContent/styles.scss

@@ -5,6 +5,9 @@ $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 {
@@ -20,3 +23,4 @@ $default-border-line-width: .0625rem;
     }
   }
 }
+

package/src/ui/a/Charts/PieChart/PieChart.jsx

@@ -78,10 +78,27 @@ const PieChart = ({
                 />
               ))}
             </Pie>
-            <Tooltip content={<CustomTooltipContent isDateValue={false} />} />
+            <Tooltip content={<CustomTooltipContent isDateValue={false} isPieChart />} />
+
+            <text
+              x="50%"
+              y="50%"
+              textAnchor="middle"
+              dominantBaseline="middle"
+              style={{
+              }}
+            >
+              <tspan x="50%" dy="-1.2em" fontSize="14" fill="grey">
+                Total
+              </tspan>
+              <tspan x="50%" dy="1.2em" fill="var(--heading)" fontSize="22">
+                {`${total}`}
+              </tspan>
+            </text>
           </RechartsPieChart>
         </ResponsiveContainer>
         <CustomLegend
+          key={id}
           colorsArray={colors}
           yKeysArray={formattedData}
           capitalizedLegend
@@ -118,7 +135,7 @@ PieChart.defaultProps = {
   className  :undefined,
   width      :'100%',
   height     :300,
-  innerRadius:'0%',
+  innerRadius:'50%',
   outerRadius:'100%',
 }
 

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;