@pareto-engineering/design-system 5.0.2 → 5.0.4

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

@@ -1,7 +1,6 @@
 @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;
@@ -9,59 +8,33 @@ $default-legend-padding: calc($default-padding * .125) calc($default-padding * .
 $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 {
+    display: flex;
     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 {
-        box-shadow: $default-box-shadow;
-        padding-top: $default-padding;
-      }
-    }
-
-    &.horizontal {
-      display: flex;
-    }
-
     .item {
+      align-items: center;
       border-radius: $default-border-radius;
+      display: flex;
       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);
-        }
-      }
+    .dot {
+      border-radius: 50%;
+      display: inline-block;
+      height: $default-legend-dot-height;
+      margin-right: $default-legend-dot-margin-right;
+      width: $default-legend-dot-width;
+    }
 
-      .sub-title {
-        color: var(--heading);
-        display: flex;
-        font-size: calc($default-text-font-size * 1.2);
-        font-weight: 500;
-        justify-content: flex-end;
-      }
+    .text {
+      color: var(--paragraph);
+      font-size: calc($default-text-font-size * .75);
     }
   }
 }

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

@@ -1,30 +1,20 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
-import { formatTime, formatDate, DATE_FORMATS, snakeCaseToTitleCase } from "../../../../utils";
+import { formatTime, formatDate, DATE_FORMATS } from "../../../../utils";
 import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'custom-tooltip-content';
 const CustomTooltipContent = ({
   id,
   className: userClassName,
+  xLabel,
   dateFormat,
   isTimeFormat,
-  isDateValue,
   active,
   payload,
   label
 }) => {
-  const formatLabelValue = value => {
-    if (isTimeFormat) {
-      return formatTime(value);
-    }
-    if (typeof value === 'number') {
-      if (Number.isInteger(value)) return value;
-      return value.toFixed(2);
-    }
-    return value;
-  };
   if (active && payload && payload.length) {
     const newPayload = payload.filter(item => item.name !== 'bounds');
     return /*#__PURE__*/React.createElement("div", {
@@ -32,14 +22,14 @@ const CustomTooltipContent = ({
       className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
     }, /*#__PURE__*/React.createElement("p", {
       className: "label"
-    }, isDateValue ? formatDate(label, dateFormat) : label), newPayload.map(entry => /*#__PURE__*/React.createElement("p", {
+    }, `${xLabel}: ${formatDate(label, dateFormat)}`), newPayload.map(entry => /*#__PURE__*/React.createElement("p", {
       className: "label",
       key: `${entry.name}`,
       style: {
         color: entry.color,
         textTransform: 'capitalize'
       }
-    }, `${snakeCaseToTitleCase(entry.name)}: ${formatLabelValue(entry.value)}`)));
+    }, `${entry.name}: ${isTimeFormat ? formatTime(entry.value) : entry.value}`)));
   }
   return null;
 };
@@ -52,6 +42,10 @@ CustomTooltipContent.propTypes = {
    * Additional class names for the dropdown component.
    */
   className: PropTypes.string,
+  /**
+   * The label for the x-axis.
+   */
+  xLabel: PropTypes.string,
   /**
    * Flag on whether it is a timeformat or not
    */
@@ -60,10 +54,6 @@ CustomTooltipContent.propTypes = {
    * The type of format for the datetime value
    */
   dateFormat: PropTypes.oneOf(Object.values(DATE_FORMATS)),
-  /**
-   * Flag on whether the label is a date value or not
-   */
-  isDateValue: PropTypes.bool,
   /**
    * If set true, the tooltip is displayed.
    * If set false, the tooltip is hidden, usually calculated internally.
@@ -81,7 +71,6 @@ CustomTooltipContent.propTypes = {
 };
 CustomTooltipContent.defaultProps = {
   isTimeFormat: false,
-  isDateValue: true,
   dateFormat: DATE_FORMATS.HUMAN_READABLE
 };
 export default CustomTooltipContent;

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

@@ -2,8 +2,10 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
-import { snakeCaseToTitleCase } from "../../../../utils";
 import "./styles.scss";
+
+// Local Definitions
+
 const baseClassName = styleNames.base;
 const componentClassName = 'y-labels-dropdown';
 const YLabelsDropDown = ({
@@ -44,7 +46,7 @@ const YLabelsDropDown = ({
     style: {
       backgroundColor: item.color
     }
-  }), snakeCaseToTitleCase(item.label), selectedYLabels.some(label => label.label === item.label) && /*#__PURE__*/React.createElement("span", {
+  }), item.label, selectedYLabels.some(label => label.label === item.label) && /*#__PURE__*/React.createElement("span", {
     className: "icon checkmark"
   }, "I")))));
 };
@@ -81,6 +83,6 @@ YLabelsDropDown.propTypes = {
   }))
 };
 YLabelsDropDown.defaultProps = {
-  placeholder: 'Select Item'
+  placeholder: 'Submission status'
 };
 export default YLabelsDropDown;

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

@@ -1,8 +1,7 @@
 @use "@pareto-engineering/bem";
 
 $default-margin: 1rem;
-$default-border: var(--theme-default-input-border);
-$default-border-radius: var(--theme-default-input-border-radius);
+$default-border-radius: .25rem;
 $default-padding: 1rem;
 $default-width: 15rem;
 $default-box-shadow: 0 .25rem .75rem var(--ui-lines);
@@ -17,9 +16,9 @@ $default-checkmark-font-size: calc(var(--s-1) * .75rem);
 
     .dropdown-button {
       align-items: center;
-      background-color: var(--background-far);
-      border: $default-border;
-      border-radius: calc($default-border-radius / 2);
+      background-color: var(--soft-background-inputs);
+      border: none;
+      border-radius: $default-border-radius;
       color: var(--hard-paragraph);
       cursor: pointer;
       display: flex;
@@ -54,8 +53,8 @@ $default-checkmark-font-size: calc(var(--s-1) * .75rem);
 
       .dropdown-item {
         align-items: center;
-        border-radius: calc($default-border-radius / 2);
-        color: var(--paragraph);
+        border-radius: $default-border-radius;
+        color: var(--hard-paragraph);
         cursor: pointer;
         display: flex;
         margin: calc($default-margin * .125);

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

@@ -1,3 +1,2 @@
 export { AreaChart } from "./AreaChart";
-export { BarChart } from "./BarChart";
-export { PieChart } from "./PieChart";
+export { BarChart } from "./BarChart";

package/dist/es/a/index.js

@@ -28,4 +28,4 @@ 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 } from "./Charts";

package/dist/es/f/fields/FileUpload/common/Preview/Preview.js

@@ -57,12 +57,19 @@ const Preview = ({
   }, type), /*#__PURE__*/React.createElement("span", {
     title: file.name,
     className: "name"
-  }, file.name), isFileBroken ? /*#__PURE__*/React.createElement(Tooltip, {
+  }, file.name), isFileBroken ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
     description: "bulk-updates-text",
     content: /*#__PURE__*/React.createElement("p", null, "This file doesn't have a link or the link is invalid.")
   }, /*#__PURE__*/React.createElement("span", {
     className: "icon x-ui-icons c-x"
-  }, "h")) : /*#__PURE__*/React.createElement(Button, {
+  }, "h")), writeOnly && /*#__PURE__*/React.createElement(Button, {
+    color: "ui-icons",
+    isCompact: true,
+    isSimple: true,
+    onClick: () => handleDelete()
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon"
+  }, canDelete ? 'Y' : '9'))) : /*#__PURE__*/React.createElement(Button, {
     color: "ui-icons",
     isCompact: true,
     isSimple: true,

package/dist/es/utils/formatting.js

@@ -37,9 +37,6 @@ export const formatTime = seconds => {
   if (hours > 0) parts.push(`${hours}h`);
   if (minutes > 0 || hours > 0 && remainingSeconds > 0) parts.push(`${minutes}m`);
   if (remainingSeconds > 0) parts.push(`${remainingSeconds}s`);
-
-  // Cater for decimal seconds
-  if (parts.length === 0) return '0s';
   return parts.join(' ');
 };
 const parseDate = input => {
@@ -102,8 +99,4 @@ export const formatDate = (input, format = DATE_FORMATS.HUMAN_READABLE) => {
   } catch (error) {
     return 'Invalid Date';
   }
-};
-export const snakeCaseToTitleCase = word => {
-  const result = word.replace(/([A-Z])/g, ' $1');
-  return result.charAt(0).toUpperCase() + result.slice(1);
 };

package/dist/es/utils/index.js

@@ -1,2 +1,2 @@
 export { useWindowSize, useDynamicPosition, useOutsideClick } from "./hooks";
-export { formatTime, formatDate, DATE_FORMATS, snakeCaseToTitleCase } from "./formatting";
+export { formatTime, formatDate, DATE_FORMATS } from "./formatting";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "5.0.2",
+  "version": "5.0.4",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -87,5 +87,5 @@
     "remark-math": "^6.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "af1d9f8a840222f80506834a9ed5402c4465b69a"
+  "gitHead": "a9fbff3dbe659640a9ce467be3ef88f3b4f0e4b0"
 }

package/src/stories/a/AreaChart.stories.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { AreaChart } from 'ui'
 
 export default {
-  title    :'a/Charts/AreaChart',
+  title    :'a/AreaChart',
   component:AreaChart,
 }
 

package/src/stories/a/BarChart.stories.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { BarChart } from 'ui'
 
 export default {
-  title    :'a/Charts/BarChart',
+  title    :'a/BarChart',
   component:BarChart,
 }
 

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

@@ -50,6 +50,18 @@ const AreaChart = ({
 
   const [selectedYLabels, setSelectedYLabels] = useState(allYLabels)
 
+  const processedData = data.map((item) => {
+    const yValues = yKeys.map((key) => item[key])
+    const lowerBound = Math.min(...yValues)
+    const upperBound = Math.max(...yValues)
+    const margin = (upperBound - lowerBound) * 0.1
+    return {
+      ...item,
+      bounds:[lowerBound - margin, upperBound + margin],
+      isTimeFormat,
+    }
+  })
+
   const yAxisBounds = () => {
     const yValues = data.map((item) => yKeys.map((key) => item[key]))
     const min = Math.min(...yValues.flat())
@@ -83,7 +95,7 @@ const AreaChart = ({
         capitalizedLegend={capitalizedLegend}
       />
       <ResponsiveContainer width={width} height={height}>
-        <RechartsAreaChart data={data}>
+        <RechartsAreaChart data={processedData}>
           <CartesianGrid strokeDasharray="3 3" />
           <XAxis
             dataKey={xKey}
@@ -114,13 +126,7 @@ const AreaChart = ({
               return value.toFixed(2)
             }}
           />
-          <Tooltip content={(
-            <CustomTooltipContent
-              dateFormat={dateFormat}
-              isTimeFormat={isTimeFormat}
-            />
-          )}
-          />
+          <Tooltip content={<CustomTooltipContent xLabel={xLabel} />} />
           {filled && (
             <Area
               id="bounds"

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

@@ -38,8 +38,7 @@ const BarChart = ({
   colors,
   height,
   width,
-  isTimeFormat,
-  capitalizedLegend,
+  // ...otherProps
 }) => {
   const allYLabels = yKeys.map((key) => ({
     label:key,
@@ -70,7 +69,6 @@ const BarChart = ({
       <CustomLegend
         colorsArray={selectedYLabels.map((item) => item.color)}
         yKeysArray={selectedYLabels.map((item) => item.label)}
-        capitalizedLegend={capitalizedLegend}
       />
       <ResponsiveContainer width={width} height={height}>
         <RechartsBarChart data={data}>
@@ -89,7 +87,7 @@ const BarChart = ({
             axisLine={false}
             tickLine={false}
           />
-          <Tooltip content={<CustomTooltipContent isTimeFormat={isTimeFormat} />} />
+          <Tooltip content={<CustomTooltipContent xLabel={xLabel} />} />
           {selectedYLabels.map((key) => (
             <Bar
               stackId="a"

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

@@ -4,8 +4,6 @@ import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
-import { snakeCaseToTitleCase } from 'ui/utils'
-
 import './styles.scss'
 
 const baseClassName = styleNames.base
@@ -17,44 +15,40 @@ const CustomLegend = ({
   className: userClassName,
   colorsArray,
   yKeysArray,
-  orientation,
-  getLegendItemTitle,
-  getLegendItemSubtitle,
   capitalizedLegend,
-}) => (
-  <div
-    id={id}
-    className={[
-      baseClassName,
-      componentClassName,
-      userClassName,
-      orientation,
-    ]
-      .filter((e) => e)
-      .join(' ')}
-  >
-    {yKeysArray.map((key, index) => (
-      <div key={key} className="item">
-        <div className="title">
+}) => {
+  const capitalizeWord = (word) => {
+    if (!capitalizedLegend) return word
+    const wordsToCapitalize = ['average', 'best', 'worst']
+    return word.split(' ').map((part) => (wordsToCapitalize.includes(part.toLowerCase())
+      ? part.charAt(0).toUpperCase() + part.slice(1).toLowerCase()
+      : part),
+    ).join(' ')
+  }
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+    >
+      {yKeysArray.map((key, index) => (
+        <div key={key} className="item">
           <span
             className="dot"
             style={{ backgroundColor: colorsArray[index] }}
           />
-          <span className="text">
-            {
-              capitalizedLegend
-                ? snakeCaseToTitleCase(getLegendItemTitle(key))
-                : getLegendItemTitle(key)
-            }
-          </span>
+          <span className="text">{capitalizeWord(key)}</span>
         </div>
-        <span className="sub-title">
-          {getLegendItemSubtitle(key)}
-        </span>
-      </div>
-    ))}
-  </div>
-)
+      ))}
+    </div>
+  )
+}
 
 CustomLegend.propTypes = {
   /**
@@ -77,21 +71,6 @@ CustomLegend.propTypes = {
    */
   yKeysArray:PropTypes.arrayOf(PropTypes.string).isRequired,
 
-  /**
-   * The orientation of the Legend
-   */
-  orientation:PropTypes.oneOf(['vertical', 'horizontal']),
-
-  /**
-   * The function to get the legendItemKey
-   */
-  getLegendItemTitle:PropTypes.func,
-
-  /**
-   * The function to get legend children
-   */
-  getLegendItemSubtitle:PropTypes.func,
-
   /**
    * Flag on whether to capitalize legend keys
    */
@@ -99,11 +78,7 @@ CustomLegend.propTypes = {
 }
 
 CustomLegend.defaultProps = {
-  orientation          :'horizontal',
-  getLegendItemTitle   :(key) => key,
-  /* eslint-disable no-unused-vars */
-  getLegendItemSubtitle:() => {},
-  capitalizedLegend    :false,
+  capitalizedLegend:false,
 }
 
 export default CustomLegend

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

@@ -1,7 +1,6 @@
 @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;
@@ -9,59 +8,33 @@ $default-legend-padding: calc($default-padding * .125) calc($default-padding * .
 $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 {
+    display: flex;
     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 {
-        box-shadow: $default-box-shadow;
-        padding-top: $default-padding;
-      }
-    }
-
-    &.horizontal {
-      display: flex;
-    }
-
     .item {
+      align-items: center;
       border-radius: $default-border-radius;
+      display: flex;
       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);
-        }
-      }
+    .dot {
+      border-radius: 50%;
+      display: inline-block;
+      height: $default-legend-dot-height;
+      margin-right: $default-legend-dot-margin-right;
+      width: $default-legend-dot-width;
+    }
 
-      .sub-title {
-        color: var(--heading);
-        display: flex;
-        font-size: calc($default-text-font-size * 1.2);
-        font-weight: 500;
-        justify-content: flex-end;
-      }
+    .text {
+      color: var(--paragraph);
+      font-size: calc($default-text-font-size * .75);
     }
   }
 }

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

@@ -4,9 +4,7 @@ import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
-import {
-  formatTime, formatDate, DATE_FORMATS, snakeCaseToTitleCase,
-} from 'ui/utils'
+import { formatTime, formatDate, DATE_FORMATS } from 'ui/utils'
 
 import './styles.scss'
 
@@ -17,26 +15,13 @@ const componentClassName = 'custom-tooltip-content'
 const CustomTooltipContent = ({
   id,
   className: userClassName,
+  xLabel,
   dateFormat,
   isTimeFormat,
-  isDateValue,
   active,
   payload,
   label,
 }) => {
-  const formatLabelValue = (value) => {
-    if (isTimeFormat) {
-      return formatTime(value)
-    }
-
-    if (typeof value === 'number') {
-      if (Number.isInteger(value)) return value
-      return value.toFixed(2)
-    }
-
-    return value
-  }
-
   if (active && payload && payload.length) {
     const newPayload = payload.filter((item) => item.name !== 'bounds')
     return (
@@ -51,11 +36,15 @@ const CustomTooltipContent = ({
           .join(' ')}
       >
         <p className="label">
-          {isDateValue ? formatDate(label, dateFormat) : label}
+          {`${xLabel}: ${formatDate(label, dateFormat)}`}
         </p>
         {newPayload.map((entry) => (
           <p className="label" key={`${entry.name}`} style={{ color: entry.color, textTransform: 'capitalize' }}>
-            {`${snakeCaseToTitleCase(entry.name)}: ${formatLabelValue(entry.value)}`}
+            {`${entry.name}: ${
+              isTimeFormat
+                ? formatTime(entry.value)
+                : entry.value
+            }`}
           </p>
         ))}
       </div>
@@ -75,6 +64,11 @@ CustomTooltipContent.propTypes = {
    */
   className:PropTypes.string,
 
+  /**
+   * The label for the x-axis.
+   */
+  xLabel:PropTypes.string,
+
   /**
    * Flag on whether it is a timeformat or not
    */
@@ -85,11 +79,6 @@ CustomTooltipContent.propTypes = {
    */
   dateFormat:PropTypes.oneOf(Object.values(DATE_FORMATS)),
 
-  /**
-   * Flag on whether the label is a date value or not
-   */
-  isDateValue:PropTypes.bool,
-
   /**
    * If set true, the tooltip is displayed.
    * If set false, the tooltip is hidden, usually calculated internally.
@@ -110,7 +99,6 @@ CustomTooltipContent.propTypes = {
 
 CustomTooltipContent.defaultProps = {
   isTimeFormat:false,
-  isDateValue :true,
   dateFormat  :DATE_FORMATS.HUMAN_READABLE,
 }