@dxc-technology/halstack-react 0.0.0-b0ec7b9 → 0.0.0-b16a10a

package/badge/Badge.stories.tsx

@@ -1,210 +0,0 @@
-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

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

package/badge/Badge.test.js

@@ -1,30 +0,0 @@
-"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

@@ -1,54 +0,0 @@
-/// <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/badge/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/bar-chart/BarChart.d.ts

@@ -1,4 +0,0 @@
-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

@@ -1,152 +0,0 @@
-"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;