@dxc-technology/halstack-react 0.0.0-b061aa1 → 0.0.0-b063530

package/badge/Badge.stories.tsx

@@ -0,0 +1,210 @@
+import React from "react";
+import DxcBadge from "./Badge";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import DxcFlex from "../flex/Flex";
+
+export default {
+  title: "Badge",
+  component: DxcBadge,
+};
+
+const icon = (
+  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <path d="M11 17H13V11H11V17ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM11 9H13V7H11V9Z" />
+    <path d="M11 7H13V9H11V7ZM11 11H13V17H11V11Z" />
+    <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z" />
+  </svg>
+);
+
+export const Chromatic = () => (
+  <>
+    <Title title="Notification" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge mode="notification" size="small" />
+        <DxcBadge mode="notification" label={1} size="small" />
+        <DxcBadge mode="notification" label={10} size="small" />
+        <DxcBadge mode="notification" label={1000000} size="small" notificationLimit={99999999} />
+        <DxcBadge mode="notification" label={100} size="small" notificationLimit={99} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignContent="center" alignItems="center">
+        <DxcBadge mode="notification" size="medium" />
+        <DxcBadge mode="notification" label={1} size="medium" />
+        <DxcBadge mode="notification" label={10} size="medium" />
+        <DxcBadge mode="notification" label={1000000} size="medium" notificationLimit={99999999} />
+        <DxcBadge mode="notification" label={100} size="medium" />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge mode="notification" size="large" />
+        <DxcBadge mode="notification" label={1} size="large" />
+        <DxcBadge mode="notification" label={10} size="large" />
+        <DxcBadge mode="notification" label={1000000} size="large" notificationLimit={99999999} />
+        <DxcBadge mode="notification" label={100} size="large" />
+      </DxcFlex>
+    </ExampleContainer>
+    <Title title="Contextual" theme="light" level={2} />
+    <Title title="Grey" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge label="Label" size="small" />
+        <DxcBadge label="Label" size="small" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge label="Label" />
+        <DxcBadge label="Label" icon="done" />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge label="Label" size="large" />
+        <DxcBadge label="Label" size="large" icon="done" />
+      </DxcFlex>
+    </ExampleContainer>
+    <Title title="Blue" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="blue" label="Label" size="small" />
+        <DxcBadge color="blue" label="Label" size="small" icon="done" />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="blue" label="Label" />
+        <DxcBadge color="blue" label="Label" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="blue" label="Label" size="large" />
+        <DxcBadge color="blue" label="Label" size="large" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <Title title="Green" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="green" label="Label" size="small" />
+        <DxcBadge color="green" label="Label" size="small" icon="done" />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="green" label="Label" />
+        <DxcBadge color="green" label="Label" icon="done" />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="green" label="Label" size="large" />
+        <DxcBadge color="green" label="Label" size="large" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer></ExampleContainer>
+    <Title title="Orange" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="orange" label="Label" size="small" />
+        <DxcBadge color="orange" label="Label" size="small" icon="done" />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="orange" label="Label" />
+        <DxcBadge color="orange" label="Label" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="orange" label="Label" size="large" />
+        <DxcBadge color="orange" label="Label" size="large" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <Title title="Red" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="red" label="Label" size="small" />
+        <DxcBadge color="red" label="Label" size="small" icon="done" />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="red" label="Label" />
+        <DxcBadge color="red" label="Label" icon="done" />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="red" label="Label" size="large" />
+        <DxcBadge color="red" label="Label" size="large" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <Title title="Yellow" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="yellow" label="Label" size="small" />
+        <DxcBadge color="yellow" label="Label" size="small" icon="done" />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="yellow" label="Label" />
+        <DxcBadge color="yellow" label="Label" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="yellow" label="Label" size="large" />
+        <DxcBadge color="yellow" label="Label" size="large" icon="done" />
+      </DxcFlex>
+    </ExampleContainer>
+    <Title title="Purple" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="purple" label="Label" size="small" />
+        <DxcBadge color="purple" label="Label" size="small" icon="done" />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="purple" label="Label" />
+        <DxcBadge color="purple" label="Label" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="purple" label="Label" size="large" />
+        <DxcBadge color="purple" label="Label" size="large" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+  </>
+);

package/badge/Badge.test.d.ts

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

package/badge/Badge.test.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Badge = _interopRequireDefault(require("./Badge"));
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
+describe("Badge component tests", function () {
+  test("Badge renders with correct label when it is less than notification limit", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+        label: 99,
+        mode: "notification"
+      })),
+      getByText = _render.getByText;
+    expect(getByText("99")).toBeTruthy();
+  });
+  test("Badge renders +99 as label when it is greater than notification limit", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+        label: 120,
+        mode: "notification"
+      }), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+        label: 11,
+        mode: "notification",
+        notificationLimit: 10
+      }))),
+      getByText = _render2.getByText;
+    expect(getByText("+99")).toBeTruthy();
+    expect(getByText("+10")).toBeTruthy();
+  });
+});

package/badge/types.d.ts

@@ -0,0 +1,54 @@
+/// <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,152 @@
+"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 _main = require("../main");
+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(_main.DxcInset, {
+    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(_main.DxcSpinner, {
+    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(_main.DxcButton, {
+    label: translatedLabels.barChart.retryButtonLabel,
+    mode: "secondary",
+    onClick: function onClick() {
+      onRetry();
+    }
+  })) : /*#__PURE__*/_react["default"].createElement(_main.DxcGrid, {
+    gap: "1rem"
+  }, chartTitle && /*#__PURE__*/_react["default"].createElement(_main.DxcGrid.Item, {
+    placeSelf: "center"
+  }, /*#__PURE__*/_react["default"].createElement(_main.DxcHeading, {
+    text: chartTitle,
+    level: 2
+  })), showFilter && /*#__PURE__*/_react["default"].createElement(_main.DxcSelect, {
+    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;