@dxc-technology/halstack-react 0.0.0-5a1e592 → 0.0.0-5a7a613

package/badge/types.d.ts

@@ -1,5 +1,54 @@
-declare type Props = {
-    notificationText: boolean | number | string;
-    disabled?: boolean;
+/// <reference types="react" />
+type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+export type ContextualProps = {
+    /**
+     * Text to be placed in the badge.
+     */
+    label: string;
+    /**
+     * The available badge modes.
+     */
+    mode?: "contextual";
+    /**
+     * In notification mode, if the number entered as label is greater that this notification limit, +99 will be shown. If not, the entered text will be shown as label.
+     */
+    notificationLimit?: never;
+    /**
+     * Affects the visual style of the badge. It can be used following semantic purposes or not.
+     */
+    color?: "grey" | "blue" | "green" | "orange" | "red" | "yellow" | "purple";
 };
+export type NotificationProps = {
+    /**
+     * Text to be placed in the badge.
+     */
+    label?: number;
+    /**
+     * The available badge modes.
+     */
+    mode: "notification";
+    /**
+     * In notification mode, if the number entered as label is greater that this notification limit, +99 will be shown. If not, the entered text will be shown as label.
+     */
+    notificationLimit?: number;
+    /**
+     * Affects the visual style of the badge. It can be used following semantic purposes or not.
+     */
+    color?: never;
+};
+export type CommonProps = {
+    /**
+     * Text representing advisory information related to the badge. Under the hood, this prop also serves as an accessible label for the component.
+     */
+    title?: string;
+    /**
+     *  Material Symbol name or SVG element used as the icon that will be placed next to the badge label in contextual mode.
+     */
+    icon?: string | SVG;
+    /**
+     * Size of the component.
+     */
+    size?: "small" | "medium" | "large";
+};
+type Props = (ContextualProps | NotificationProps) & CommonProps;
 export default Props;

package/bar-chart/BarChart.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import BarChartProps, { DataTypes } from "./types";
+declare const DxcBarChart: <X extends DataTypes>({ chartTitle, error, horizontalBars, legendTitle, loading, onFilterChange, onHighlightChange, onRetry, series, showFilter, showLegend, stackedBars, xDomain, xFormatter, xTitle, yDomain, yFormatter, yTitle, }: BarChartProps<X>) => React.JSX.Element;
+export default DxcBarChart;

package/bar-chart/BarChart.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _components = require("@cloudscape-design/components");
+var _theming = require("@cloudscape-design/components/theming");
+var _theme = _interopRequireDefault(require("./theme"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Spinner = _interopRequireDefault(require("../spinner/Spinner"));
+var _Inset = _interopRequireDefault(require("../inset/Inset"));
+var _Select = _interopRequireDefault(require("../select/Select"));
+var _Button = _interopRequireDefault(require("../button/Button"));
+var _Heading = _interopRequireDefault(require("../heading/Heading"));
+var _Grid = _interopRequireDefault(require("../grid/Grid"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
+var _coreTokens = _interopRequireDefault(require("../common/coreTokens"));
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+/**
+ * Cloudscape Design Components - Theming
+ * https://cloudscape.design/foundation/visual-foundation/theming/
+ */
+(0, _theming.applyTheme)({
+  theme: _theme["default"]
+});
+var StatusMessage = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var title = _ref.title,
+    description = _ref.description;
+  return /*#__PURE__*/_react["default"].createElement(StatusMessageContainer, null, /*#__PURE__*/_react["default"].createElement("strong", null, title), description);
+});
+var InsetWrapper = function InsetWrapper(_ref2) {
+  var condition = _ref2.condition,
+    children = _ref2.children;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, condition ? /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
+    top: "0.5rem"
+  }, children) : children);
+};
+var DxcBarChart = function DxcBarChart(_ref3) {
+  var chartTitle = _ref3.chartTitle,
+    error = _ref3.error,
+    horizontalBars = _ref3.horizontalBars,
+    legendTitle = _ref3.legendTitle,
+    loading = _ref3.loading,
+    onFilterChange = _ref3.onFilterChange,
+    _onHighlightChange = _ref3.onHighlightChange,
+    onRetry = _ref3.onRetry,
+    series = _ref3.series,
+    showFilter = _ref3.showFilter,
+    showLegend = _ref3.showLegend,
+    stackedBars = _ref3.stackedBars,
+    xDomain = _ref3.xDomain,
+    xFormatter = _ref3.xFormatter,
+    xTitle = _ref3.xTitle,
+    yDomain = _ref3.yDomain,
+    yFormatter = _ref3.yFormatter,
+    yTitle = _ref3.yTitle;
+  var _useState = (0, _react.useState)(series),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    filteredData = _useState2[0],
+    setFilteredData = _useState2[1];
+  var filters = (0, _react.useMemo)(function () {
+    return series.map(function (series) {
+      return series.title;
+    });
+  }, [series]);
+  var _useState3 = (0, _react.useState)(filters),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    selectedFilters = _useState4[0],
+    setSelectedFilters = _useState4[1];
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
+  var filterData = (0, _react.useCallback)(function (value) {
+    setSelectedFilters(value);
+    setFilteredData(series.filter(function (series) {
+      return value.includes(series.title);
+    }));
+  }, [series]);
+  return loading ? /*#__PURE__*/_react["default"].createElement(LoadingContainer, null, /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
+    mode: "small"
+  }), translatedLabels.barChart.loadingDataMessage) : error ? /*#__PURE__*/_react["default"].createElement(ErrorStatus, null, /*#__PURE__*/_react["default"].createElement(Label, null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "cancel"
+  }), error), onRetry && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    label: translatedLabels.barChart.retryButtonLabel,
+    mode: "secondary",
+    onClick: function onClick() {
+      onRetry();
+    }
+  })) : /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+    gap: "1rem"
+  }, chartTitle && /*#__PURE__*/_react["default"].createElement(_Grid["default"].Item, {
+    placeSelf: "center"
+  }, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+    text: chartTitle,
+    level: 2
+  })), showFilter && /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    label: translatedLabels.barChart.filterLabel,
+    multiple: true,
+    onChange: function onChange(_ref4) {
+      var visibleSeries = _ref4.value;
+      filterData(visibleSeries);
+      onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(visibleSeries);
+    },
+    options: filters.map(function (filter) {
+      return {
+        label: filter,
+        value: filter
+      };
+    }),
+    placeholder: translatedLabels.barChart.filterPlaceholder,
+    searchable: true,
+    value: selectedFilters
+  }), /*#__PURE__*/_react["default"].createElement(InsetWrapper, {
+    condition: !yTitle && !horizontalBars
+  }, /*#__PURE__*/_react["default"].createElement(_components.BarChart, {
+    ariaLabel: translatedLabels.barChart.ariaLabel,
+    empty: /*#__PURE__*/_react["default"].createElement(StatusMessage, {
+      title: translatedLabels.barChart.noDataMessageTitle,
+      description: translatedLabels.barChart.noDataMessageBody
+    }),
+    hideFilter: true,
+    hideLegend: !showLegend,
+    horizontalBars: horizontalBars,
+    legendTitle: legendTitle,
+    noMatch: /*#__PURE__*/_react["default"].createElement(StatusMessage, {
+      title: translatedLabels.barChart.noMatchesMessageTitle,
+      description: translatedLabels.barChart.noMatchesMessageBody
+    }),
+    onHighlightChange: function onHighlightChange(highlightedSeries) {
+      var _highlightedSeries$de;
+      var highlightedSeriesTitle = (_highlightedSeries$de = highlightedSeries.detail.highlightedSeries) === null || _highlightedSeries$de === void 0 ? void 0 : _highlightedSeries$de.title;
+      _onHighlightChange === null || _onHighlightChange === void 0 ? void 0 : _onHighlightChange(highlightedSeriesTitle);
+    },
+    series: series,
+    stackedBars: stackedBars,
+    visibleSeries: filteredData,
+    xDomain: xDomain,
+    xTickFormatter: xFormatter,
+    xTitle: xTitle,
+    yDomain: yDomain,
+    yTickFormatter: yFormatter,
+    yTitle: yTitle
+  })));
+};
+var sharedStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: ", ";\n  font-size: ", ";\n  min-height: 500px;\n"])), _coreTokens["default"].type_sans, _coreTokens["default"].type_scale_02);
+var ErrorStatus = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  flex-direction: column;\n  gap: ", ";\n  color: ", ";\n"])), sharedStyles, _coreTokens["default"].spacing_16, _coreTokens["default"].color_red_700);
+var Label = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n\n  > span {\n    font-size: 20px;\n  }\n"])), _coreTokens["default"].spacing_4);
+var LoadingContainer = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  gap: ", ";\n  color: ", ";\n"])), sharedStyles, _coreTokens["default"].spacing_8, _coreTokens["default"].color_grey_900);
+var StatusMessageContainer = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  flex-direction: column;\n  gap: ", ";\n  color: ", ";\n"])), sharedStyles, _coreTokens["default"].spacing_4, _coreTokens["default"].color_grey_800);
+var _default = exports["default"] = DxcBarChart;

package/bar-chart/BarChart.stories.tsx

@@ -0,0 +1,281 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import DxcBarChart from "./BarChart";
+import { userEvent, within } from "@storybook/test";
+
+export default {
+  title: "Bar Chart",
+  component: DxcBarChart,
+};
+
+const series = [
+  {
+    title: "Series 1",
+    type: "bar",
+    data: [
+      { x: 0, y: 100000 },
+      { x: 1, y: 200000 },
+      { x: 2, y: 300000 },
+      { x: 3, y: 400000 },
+      { x: 4, y: 500000 },
+    ],
+  },
+  {
+    title: "Series 2",
+    type: "bar",
+    data: [
+      { x: 0, y: 50000 },
+      { x: 1, y: 100000 },
+      { x: 2, y: 150000 },
+      { x: 3, y: 200000 },
+      { x: 4, y: 250000 },
+    ],
+  },
+  {
+    title: "Series 3",
+    type: "bar",
+    data: [
+      { x: 0, y: 200000 },
+      { x: 1, y: 400000 },
+      { x: 2, y: 600000 },
+      { x: 3, y: 800000 },
+      { x: 4, y: 1000000 },
+    ],
+  },
+  {
+    title: "Series 4",
+    type: "bar",
+    data: [
+      { x: 0, y: 100000 },
+      { x: 1, y: 200000 },
+      { x: 2, y: 400000 },
+      { x: 3, y: 700000 },
+      { x: 4, y: 900000 },
+    ],
+  },
+  {
+    title: "Series 5",
+    type: "bar",
+    data: [
+      { x: 0, y: 50000 },
+      { x: 1, y: 500000 },
+      { x: 2, y: 800000 },
+      { x: 3, y: 900000 },
+      { x: 4, y: 100000 },
+    ],
+  },
+  {
+    title: "Series 6",
+    type: "bar",
+    data: [
+      { x: 0, y: 10000 },
+      { x: 1, y: 250000 },
+      { x: 2, y: 550000 },
+      { x: 3, y: 750000 },
+      { x: 4, y: 950000 },
+    ],
+  },
+  {
+    title: "Average",
+    type: "threshold",
+    y: 400000,
+  },
+];
+
+const BarChart = () => (
+  <>
+    <Title title="Basic bar chart" theme="light" level={4} />
+    <ExampleContainer>
+      <DxcBarChart
+        series={[
+          {
+            title: "Series 1",
+            type: "bar",
+            data: [
+              { x: 0, y: 100000 },
+              { x: 1, y: 200000 },
+              { x: 2, y: 300000 },
+              { x: 3, y: 400000 },
+              { x: 4, y: 500000 },
+            ],
+          },
+          {
+            title: "Average",
+            type: "threshold",
+            y: 300000,
+          },
+        ]}
+        xDomain={[0, 1, 2, 3, 4]}
+        yDomain={[0, 600000]}
+      />
+    </ExampleContainer>
+    <Title title="Horizontal bar chart" theme="light" level={4} />
+    <ExampleContainer>
+      <DxcBarChart
+        series={[
+          {
+            title: "Series 1",
+            type: "bar",
+            data: [
+              { x: 0, y: 100000 },
+              { x: 1, y: 200000 },
+              { x: 2, y: 300000 },
+            ],
+          },
+          {
+            title: "Series 2",
+            type: "bar",
+            data: [
+              { x: 0, y: 50000 },
+              { x: 1, y: 100000 },
+              { x: 2, y: 150000 },
+            ],
+          },
+        ]}
+        xDomain={[0, 1, 2]}
+        yDomain={[0, 600000]}
+        horizontalBars
+      />
+    </ExampleContainer>
+    <Title title="Stacked bar chart" theme="light" level={4} />
+    <ExampleContainer>
+      <DxcBarChart series={series as any} xDomain={[0, 1, 2, 3, 4]} yDomain={[0, 5000000]} stackedBars />
+    </ExampleContainer>
+    <Title title="Stacked & horizontal bar chart" theme="light" level={4} />
+    <ExampleContainer>
+      <DxcBarChart series={series as any} xDomain={[0, 1, 2, 3, 4]} yDomain={[0, 5000000]} stackedBars horizontalBars />
+    </ExampleContainer>
+    <Title title="Complete bar chart" theme="light" level={4} />
+    <ExampleContainer>
+      <DxcBarChart
+        chartTitle="Bar Chart"
+        series={series as any}
+        xDomain={[0, 1, 2, 3, 4]}
+        yDomain={[0, 1000000]}
+        xTitle="X Axis"
+        yTitle="Y Axis"
+        showFilter
+        showLegend
+        legendTitle="Legend"
+      />
+    </ExampleContainer>
+    <Title title="Error state" theme="light" level={4} />
+    <ExampleContainer>
+      <DxcBarChart series={[]} error="Error loading data." />
+    </ExampleContainer>
+    <Title title="Error state with 'Retry' action" theme="light" level={4} />
+    <ExampleContainer>
+      <DxcBarChart series={[]} error="Error loading data." onRetry={() => {}} />
+    </ExampleContainer>
+    <Title title="Loading state" theme="light" level={4} />
+    <ExampleContainer>
+      <DxcBarChart series={[]} loading />
+    </ExampleContainer>
+    <Title title="No data" theme="light" level={4} />
+    <ExampleContainer>
+      <DxcBarChart series={[]} />
+    </ExampleContainer>
+    <Title title="No matching data" theme="light" level={4} />
+    <ExampleContainer>
+      <DxcBarChart
+        series={[
+          {
+            title: "Series 1",
+            type: "bar",
+            data: [
+              { x: 0, y: 100000 },
+              { x: 1, y: 200000 },
+              { x: 2, y: 300000 },
+              { x: 3, y: 400000 },
+              { x: 4, y: 500000 },
+            ],
+          },
+          {
+            title: "Series 2",
+            type: "bar",
+            data: [
+              { x: 0, y: 50000 },
+              { x: 1, y: 100000 },
+              { x: 2, y: 150000 },
+              { x: 3, y: 200000 },
+              { x: 4, y: 250000 },
+            ],
+          },
+          {
+            title: "Series 3",
+            type: "bar",
+            data: [
+              { x: 0, y: 200000 },
+              { x: 1, y: 400000 },
+              { x: 2, y: 600000 },
+              { x: 3, y: 800000 },
+              { x: 4, y: 1000000 },
+            ],
+          },
+          {
+            title: "Series 4",
+            type: "bar",
+            data: [
+              { x: 0, y: 100000 },
+              { x: 1, y: 200000 },
+              { x: 2, y: 400000 },
+              { x: 3, y: 700000 },
+              { x: 4, y: 900000 },
+            ],
+          },
+          {
+            title: "Series 5",
+            type: "bar",
+            data: [
+              { x: 0, y: 50000 },
+              { x: 1, y: 500000 },
+              { x: 2, y: 800000 },
+              { x: 3, y: 900000 },
+              { x: 4, y: 100000 },
+            ],
+          },
+          {
+            title: "Series 6",
+            type: "bar",
+            data: [
+              { x: 0, y: 10000 },
+              { x: 1, y: 250000 },
+              { x: 2, y: 550000 },
+              { x: 3, y: 750000 },
+              { x: 4, y: 950000 },
+            ],
+          },
+          {
+            title: "Series 7",
+            type: "bar",
+            data: [
+              { x: 0, y: 20000 },
+              { x: 1, y: 150000 },
+              { x: 2, y: 350000 },
+              { x: 3, y: 450000 },
+              { x: 4, y: 750000 },
+            ],
+          },
+          {
+            title: "Average",
+            type: "threshold",
+            y: 400000,
+          },
+        ]}
+        xDomain={[0, 1, 2, 3, 4]}
+        yDomain={[0, 1000000]}
+        showFilter
+        xTitle="X Axis"
+        yTitle="Y Axis"
+        legendTitle="Legend"
+      />
+    </ExampleContainer>
+  </>
+);
+
+export const Chromatic = BarChart.bind({});
+Chromatic.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getAllByTitle("Clear selection")[1]);
+};

package/bar-chart/BarChart.test.d.ts

@@ -0,0 +1 @@
+export {};