@pareto-engineering/design-system 5.0.2 → 5.0.5

package/dist/cjs/a/Charts/AreaChart/AreaChart.js

@@ -40,6 +40,17 @@ const AreaChart = _ref => {
     color: colors[yKeys.indexOf(key)]
   }));
   const [selectedYLabels, setSelectedYLabels] = (0, _react.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());
@@ -64,7 +75,7 @@ const AreaChart = _ref => {
     width: width,
     height: height
   }, /*#__PURE__*/React.createElement(_recharts.AreaChart, {
-    data: data
+    data: processedData
   }, /*#__PURE__*/React.createElement(_recharts.CartesianGrid, {
     strokeDasharray: "3 3"
   }), /*#__PURE__*/React.createElement(_recharts.XAxis, {
@@ -105,8 +116,7 @@ const AreaChart = _ref => {
     }
   }), /*#__PURE__*/React.createElement(_recharts.Tooltip, {
     content: /*#__PURE__*/React.createElement(_Common.CustomTooltipContent, {
-      dateFormat: dateFormat,
-      isTimeFormat: isTimeFormat
+      xLabel: xLabel
     })
   }), filled && /*#__PURE__*/React.createElement(_recharts.Area, {
     id: "bounds",

package/dist/cjs/a/Charts/BarChart/BarChart.js

@@ -30,9 +30,8 @@ const BarChart = _ref => {
     yLabel,
     colors,
     height,
-    width,
-    isTimeFormat,
-    capitalizedLegend
+    width
+    // ...otherProps
   } = _ref;
   const allYLabels = yKeys.map(key => ({
     label: key,
@@ -50,8 +49,7 @@ const BarChart = _ref => {
     setSelectedYLabels: setSelectedYLabels
   })), /*#__PURE__*/React.createElement(_Common.CustomLegend, {
     colorsArray: selectedYLabels.map(item => item.color),
-    yKeysArray: selectedYLabels.map(item => item.label),
-    capitalizedLegend: capitalizedLegend
+    yKeysArray: selectedYLabels.map(item => item.label)
   }), /*#__PURE__*/React.createElement(_recharts.ResponsiveContainer, {
     width: width,
     height: height
@@ -81,7 +79,7 @@ const BarChart = _ref => {
     tickLine: false
   }), /*#__PURE__*/React.createElement(_recharts.Tooltip, {
     content: /*#__PURE__*/React.createElement(_Common.CustomTooltipContent, {
-      isTimeFormat: isTimeFormat
+      xLabel: xLabel
     })
   }), selectedYLabels.map(key => /*#__PURE__*/React.createElement(_recharts.Bar, {
     stackId: "a",

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

@@ -7,7 +7,6 @@ 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); }
@@ -20,19 +19,19 @@ const CustomLegend = _ref => {
     className: userClassName,
     colorsArray,
     yKeysArray,
-    orientation,
-    getLegendItemTitle,
-    getLegendItemSubtitle,
     capitalizedLegend
   } = _ref;
+  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 /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, orientation].filter(e => e).join(' ')
+    className: [baseClassName, componentClassName, userClassName].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: {
@@ -40,9 +39,7 @@ const CustomLegend = _ref => {
     }
   }), /*#__PURE__*/React.createElement("span", {
     className: "text"
-  }, capitalizedLegend ? (0, _utils.snakeCaseToTitleCase)(getLegendItemTitle(key)) : getLegendItemTitle(key))), /*#__PURE__*/React.createElement("span", {
-    className: "sub-title"
-  }, getLegendItemSubtitle(key)))));
+  }, capitalizeWord(key)))));
 };
 CustomLegend.propTypes = {
   /**
@@ -61,28 +58,12 @@ CustomLegend.propTypes = {
    * 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/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/cjs/a/Charts/Common/CustomTooltipContent/CustomTooltipContent.js

@@ -18,23 +18,13 @@ const CustomTooltipContent = _ref => {
   let {
     id,
     className: userClassName,
+    xLabel,
     dateFormat,
     isTimeFormat,
-    isDateValue,
     active,
     payload,
     label
   } = _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;
-  };
   if (active && payload && payload.length) {
     const newPayload = payload.filter(item => item.name !== 'bounds');
     return /*#__PURE__*/React.createElement("div", {
@@ -42,14 +32,14 @@ const CustomTooltipContent = _ref => {
       className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
     }, /*#__PURE__*/React.createElement("p", {
       className: "label"
-    }, isDateValue ? (0, _utils.formatDate)(label, dateFormat) : label), newPayload.map(entry => /*#__PURE__*/React.createElement("p", {
+    }, `${xLabel}: ${(0, _utils.formatDate)(label, dateFormat)}`), newPayload.map(entry => /*#__PURE__*/React.createElement("p", {
       className: "label",
       key: `${entry.name}`,
       style: {
         color: entry.color,
         textTransform: 'capitalize'
       }
-    }, `${(0, _utils.snakeCaseToTitleCase)(entry.name)}: ${formatLabelValue(entry.value)}`)));
+    }, `${entry.name}: ${isTimeFormat ? (0, _utils.formatTime)(entry.value) : entry.value}`)));
   }
   return null;
 };
@@ -62,6 +52,10 @@ CustomTooltipContent.propTypes = {
    * Additional class names for the dropdown component.
    */
   className: _propTypes.default.string,
+  /**
+   * The label for the x-axis.
+   */
+  xLabel: _propTypes.default.string,
   /**
    * Flag on whether it is a timeformat or not
    */
@@ -70,10 +64,6 @@ CustomTooltipContent.propTypes = {
    * 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.
@@ -91,7 +81,6 @@ CustomTooltipContent.propTypes = {
 };
 CustomTooltipContent.defaultProps = {
   isTimeFormat: false,
-  isDateValue: true,
   dateFormat: _utils.DATE_FORMATS.HUMAN_READABLE
 };
 var _default = exports.default = CustomTooltipContent;

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

@@ -7,13 +7,14 @@ 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
 
+// Local Definitions
+
 const baseClassName = _exports.default.base;
 const componentClassName = 'y-labels-dropdown';
 const YLabelsDropDown = _ref => {
@@ -55,7 +56,7 @@ const YLabelsDropDown = _ref => {
     style: {
       backgroundColor: item.color
     }
-  }), (0, _utils.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")))));
 };
@@ -92,6 +93,6 @@ YLabelsDropDown.propTypes = {
   }))
 };
 YLabelsDropDown.defaultProps = {
-  placeholder: 'Select Item'
+  placeholder: 'Submission status'
 };
 var _default = exports.default = YLabelsDropDown;

package/dist/cjs/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/cjs/a/Charts/index.js

@@ -15,12 +15,5 @@ Object.defineProperty(exports, "BarChart", {
     return _BarChart.BarChart;
   }
 });
-Object.defineProperty(exports, "PieChart", {
-  enumerable: true,
-  get: function () {
-    return _PieChart.PieChart;
-  }
-});
 var _AreaChart = require("./AreaChart");
-var _BarChart = require("./BarChart");
-var _PieChart = require("./PieChart");
+var _BarChart = require("./BarChart");

package/dist/cjs/a/index.js

@@ -123,12 +123,6 @@ Object.defineProperty(exports, "People", {
     return _People.People;
   }
 });
-Object.defineProperty(exports, "PieChart", {
-  enumerable: true,
-  get: function () {
-    return _Charts.PieChart;
-  }
-});
 Object.defineProperty(exports, "Popover", {
   enumerable: true,
   get: function () {

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

@@ -67,12 +67,19 @@ const Preview = _ref => {
   }, type), /*#__PURE__*/React.createElement("span", {
     title: file.name,
     className: "name"
-  }, file.name), isFileBroken ? /*#__PURE__*/React.createElement(_a.Tooltip, {
+  }, file.name), isFileBroken ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_a.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(_b.Button, {
+  }, "h")), writeOnly && /*#__PURE__*/React.createElement(_b.Button, {
+    color: "ui-icons",
+    isCompact: true,
+    isSimple: true,
+    onClick: () => handleDelete()
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "icon"
+  }, canDelete ? 'Y' : '9'))) : /*#__PURE__*/React.createElement(_b.Button, {
     color: "ui-icons",
     isCompact: true,
     isSimple: true,

package/dist/cjs/utils/formatting.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.snakeCaseToTitleCase = exports.formatTime = exports.formatDate = exports.DATE_FORMATS = void 0;
+exports.formatTime = exports.formatDate = exports.DATE_FORMATS = void 0;
 const DATE_FORMATS = exports.DATE_FORMATS = {
   HUMAN_READABLE: 'human_readable',
   TIME: 'time',
@@ -43,9 +43,6 @@ 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(' ');
 };
 exports.formatTime = formatTime;
@@ -111,9 +108,4 @@ const formatDate = function (input) {
     return 'Invalid Date';
   }
 };
-exports.formatDate = formatDate;
-const snakeCaseToTitleCase = word => {
-  const result = word.replace(/([A-Z])/g, ' $1');
-  return result.charAt(0).toUpperCase() + result.slice(1);
-};
-exports.snakeCaseToTitleCase = snakeCaseToTitleCase;
+exports.formatDate = formatDate;

package/dist/cjs/utils/index.js

@@ -21,12 +21,6 @@ Object.defineProperty(exports, "formatTime", {
     return _formatting.formatTime;
   }
 });
-Object.defineProperty(exports, "snakeCaseToTitleCase", {
-  enumerable: true,
-  get: function () {
-    return _formatting.snakeCaseToTitleCase;
-  }
-});
 Object.defineProperty(exports, "useDynamicPosition", {
   enumerable: true,
   get: function () {

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

@@ -30,6 +30,17 @@ const AreaChart = ({
     color: colors[yKeys.indexOf(key)]
   }));
   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());
@@ -54,7 +65,7 @@ const AreaChart = ({
     width: width,
     height: height
   }, /*#__PURE__*/React.createElement(RechartsAreaChart, {
-    data: data
+    data: processedData
   }, /*#__PURE__*/React.createElement(CartesianGrid, {
     strokeDasharray: "3 3"
   }), /*#__PURE__*/React.createElement(XAxis, {
@@ -95,8 +106,7 @@ const AreaChart = ({
     }
   }), /*#__PURE__*/React.createElement(Tooltip, {
     content: /*#__PURE__*/React.createElement(CustomTooltipContent, {
-      dateFormat: dateFormat,
-      isTimeFormat: isTimeFormat
+      xLabel: xLabel
     })
   }), filled && /*#__PURE__*/React.createElement(Area, {
     id: "bounds",

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

@@ -21,9 +21,8 @@ const BarChart = ({
   yLabel,
   colors,
   height,
-  width,
-  isTimeFormat,
-  capitalizedLegend
+  width
+  // ...otherProps
 }) => {
   const allYLabels = yKeys.map(key => ({
     label: key,
@@ -41,8 +40,7 @@ const BarChart = ({
     setSelectedYLabels: setSelectedYLabels
   })), /*#__PURE__*/React.createElement(CustomLegend, {
     colorsArray: selectedYLabels.map(item => item.color),
-    yKeysArray: selectedYLabels.map(item => item.label),
-    capitalizedLegend: capitalizedLegend
+    yKeysArray: selectedYLabels.map(item => item.label)
   }), /*#__PURE__*/React.createElement(ResponsiveContainer, {
     width: width,
     height: height
@@ -72,7 +70,7 @@ const BarChart = ({
     tickLine: false
   }), /*#__PURE__*/React.createElement(Tooltip, {
     content: /*#__PURE__*/React.createElement(CustomTooltipContent, {
-      isTimeFormat: isTimeFormat
+      xLabel: xLabel
     })
   }), selectedYLabels.map(key => /*#__PURE__*/React.createElement(Bar, {
     stackId: "a",

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
-import { snakeCaseToTitleCase } from "../../../../utils";
 import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'custom-legend';
@@ -10,28 +9,28 @@ const CustomLegend = ({
   className: userClassName,
   colorsArray,
   yKeysArray,
-  orientation,
-  getLegendItemTitle,
-  getLegendItemSubtitle,
   capitalizedLegend
-}) => /*#__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 ? snakeCaseToTitleCase(getLegendItemTitle(key)) : getLegendItemTitle(key))), /*#__PURE__*/React.createElement("span", {
-  className: "sub-title"
-}, getLegendItemSubtitle(key)))));
+}) => {
+  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 /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
+  }, yKeysArray.map((key, index) => /*#__PURE__*/React.createElement("div", {
+    key: key,
+    className: "item"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "dot",
+    style: {
+      backgroundColor: colorsArray[index]
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "text"
+  }, capitalizeWord(key)))));
+};
 CustomLegend.propTypes = {
   /**
    * The id of the dropdown component.
@@ -49,28 +48,12 @@ CustomLegend.propTypes = {
    * Array of keys for the y-axis data.
    */
   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
    */
   capitalizedLegend: PropTypes.bool
 };
 CustomLegend.defaultProps = {
-  orientation: 'horizontal',
-  getLegendItemTitle: key => key,
-  /* eslint-disable no-unused-vars */
-  getLegendItemSubtitle: () => {},
   capitalizedLegend: false
 };
 export default CustomLegend;