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

package/bar-chart/types.d.ts

@@ -0,0 +1,118 @@
+/// <reference types="react" />
+type DataTypes = string | number;
+type BarChartThresholdSeries<X> = {
+    /**
+     * Title of the series.
+     */
+    title: string;
+    /**
+     * Type of the series. It can be either "threshold" or "bar".
+     */
+    type: "threshold";
+    /**
+     * Value of the y axis.
+     */
+    y?: number;
+    /**
+     * Value of the x axis. It can be a string or a number.
+     */
+    x?: X;
+};
+type BarChartDataSeries<X> = {
+    /**
+     * Title of the series.
+     */
+    title: string;
+    /**
+     * Type of the series. It can be either "threshold" or "bar".
+     */
+    type: "bar";
+    /**
+     * Data points of the series. Each data point is represented by an object with an x value and a y value.
+     */
+    data: {
+        x: X;
+        y: number;
+    }[];
+};
+type BarChartSeries<X> = BarChartThresholdSeries<X> | BarChartDataSeries<X>;
+type BarChartProps<X extends DataTypes> = {
+    /**
+     * Title of the chart.
+     */
+    chartTitle?: string;
+    /**
+     * Error state of the chart. If set, the chart will display an error message with a retry action.
+     */
+    error?: string;
+    /**
+     * If true, the chart will display horizontal bars.
+     */
+    horizontalBars?: boolean;
+    /**
+     * Legend title.
+     */
+    legendTitle?: string;
+    /**
+     * Activates the loading state.
+     */
+    loading?: boolean;
+    /**
+     * Event called when the bar chart filters are changed.
+     */
+    onFilterChange?: (visibleSeries: string[]) => void;
+    /**
+     * Event called when the highlighted series has changed because of user interaction.
+     */
+    onHighlightChange?: (highlightedSeries?: string) => void;
+    /**
+     * Event called when the user clicks on the retry action of the error state.
+     */
+    onRetry?: () => void;
+    /**
+     * Array that represents the source of data for the displayed chart.
+     */
+    series: BarChartSeries<X>[];
+    /**
+     * If true, the chart will display a filter to show/hide series.
+     */
+    showFilter?: boolean;
+    /**
+     * If true, the chart will display a legend with the corresponding data series.
+     */
+    showLegend?: boolean;
+    /**
+     * When set to true, bars in the same data point are stacked instead of being grouped next to each other.
+     */
+    stackedBars?: boolean;
+    /**
+     * Determines the domain of the x axis, i.e. the range of values that will be visible in the chart
+     */
+    xDomain?: X[];
+    /**
+     * Formatter function for the x axis. It receives the x value and returns a string.
+     */
+    xFormatter?: (value: X) => string;
+    /**
+     * Title of the x axis.
+     */
+    xTitle?: string;
+    /**
+     * Determines the domain of the y axis, i.e. the range of values that will be visible in the chart
+     */
+    yDomain?: [number, number];
+    /**
+     * Formatter function for the y axis. It receives the y value and returns a string.
+     */
+    yFormatter?: (value: number) => string;
+    /**
+     * Title of the y axis.
+     */
+    yTitle?: string;
+};
+type InsetWrapperProps = {
+    condition: boolean;
+    children: React.ReactNode;
+};
+export default BarChartProps;
+export type { DataTypes, InsetWrapperProps };

package/bleed/Bleed.js

@@ -1,29 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = Bleed;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _templateObject;
-
 function Bleed(_ref) {
   var space = _ref.space,
-      horizontal = _ref.horizontal,
-      vertical = _ref.vertical,
-      top = _ref.top,
-      right = _ref.right,
-      bottom = _ref.bottom,
-      left = _ref.left,
-      children = _ref.children;
+    horizontal = _ref.horizontal,
+    vertical = _ref.vertical,
+    top = _ref.top,
+    right = _ref.right,
+    bottom = _ref.bottom,
+    left = _ref.left,
+    children = _ref.children;
   return /*#__PURE__*/_react["default"].createElement(StyledBleed, {
     space: space,
     horizontal: horizontal,
@@ -34,51 +28,16 @@ function Bleed(_ref) {
     left: left
   }, children);
 }
-
 function getSpacingValue(spacingName) {
-  switch (spacingName) {
-    case "none":
-      return "0rem";
-
-    case "xxxsmall":
-      return "0.125rem";
-
-    case "xxsmall":
-      return "0.25rem";
-
-    case "xsmall":
-      return "0.5rem";
-
-    case "small":
-      return "1rem";
-
-    case "medium":
-      return "1.5rem";
-
-    case "large":
-      return "2rem";
-
-    case "xlarge":
-      return "3rem";
-
-    case "xxlarge":
-      return "4rem";
-
-    case "xxxlarge":
-      return "5rem";
-
-    default:
-      return "0rem";
-  }
+  return spacingName ? spacingName : "0rem";
 }
-
 var StyledBleed = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"])), function (_ref2) {
   var space = _ref2.space,
-      horizontal = _ref2.horizontal,
-      vertical = _ref2.vertical,
-      top = _ref2.top,
-      right = _ref2.right,
-      bottom = _ref2.bottom,
-      left = _ref2.left;
+    horizontal = _ref2.horizontal,
+    vertical = _ref2.vertical,
+    top = _ref2.top,
+    right = _ref2.right,
+    bottom = _ref2.bottom,
+    left = _ref2.left;
   return "\n    margin: -".concat(getSpacingValue(top || vertical || space), " -").concat(getSpacingValue(right || horizontal || space), " -").concat(getSpacingValue(bottom || vertical || space), " -").concat(getSpacingValue(left || horizontal || space), ";\n");
 });

package/bleed/Bleed.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import Title from "../../.storybook/components/Title";
 import DxcBleed from "./Bleed";
-import DxcStack from "../stack/Stack";
+import DxcFlex from "../flex/Flex";
 
 export default {
   title: "Bleed",
@@ -13,316 +13,315 @@ export const Chromatic = () => (
   <>
     <Title title="Space = none" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed space="none">
+        <DxcBleed space="0rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Space = xxxsmall" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed space="xxxsmall">
+        <DxcBleed space="0.125rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Space = xxsmall" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed space="xxsmall">
+        <DxcBleed space="0.25rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Space = xsmall" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed space="xsmall">
+        <DxcBleed space="0.5rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Space = small" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed space="small">
+        <DxcBleed space="1rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Space = medium" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed space="medium">
+        <DxcBleed space="1.5rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Space = large" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed space="large">
+        <DxcBleed space="2rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Space = xlarge" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed space="xlarge">
+        <DxcBleed space="3rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Space = xxlarge" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed space="xxlarge">
+        <DxcBleed space="4rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Space = xxxlarge" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed space="xxxlarge">
+        <DxcBleed space="5rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
-
     <Title title="Horizontal = none" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed horizontal="none">
+        <DxcBleed horizontal="0rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Horizontal = xxxsmall" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed horizontal="xxxsmall">
+        <DxcBleed horizontal="0.125rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Horizontal = xxsmall" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed horizontal="xxsmall">
+        <DxcBleed horizontal="0.25rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Horizontal = xsmall" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed horizontal="xsmall">
+        <DxcBleed horizontal="0.5rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Horizontal = small" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed horizontal="small">
+        <DxcBleed horizontal="1rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Horizontal = medium" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed horizontal="medium">
+        <DxcBleed horizontal="1.5rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Horizontal = large" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed horizontal="large">
+        <DxcBleed horizontal="2rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Horizontal = xlarge" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed horizontal="xlarge">
+        <DxcBleed horizontal="3rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Horizontal = xxlarge" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed horizontal="xxlarge">
+        <DxcBleed horizontal="4rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Horizontal = xxxlarge" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed horizontal="xxxlarge">
+        <DxcBleed horizontal="5rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
 
     <Title title="Vertical = none" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed vertical="none">
+        <DxcBleed vertical="0rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Vertical = xxxsmall" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed vertical="xxxsmall">
+        <DxcBleed vertical="0.125rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Vertical = xxsmall" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed vertical="xxsmall">
+        <DxcBleed vertical="0.25rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Vertical = xsmall" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed vertical="xsmall">
+        <DxcBleed vertical="0.5rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Vertical = small" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed vertical="small">
+        <DxcBleed vertical="1rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Vertical = medium" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed vertical="medium">
+        <DxcBleed vertical="1.5rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Vertical = large" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed vertical="large">
+        <DxcBleed vertical="2rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Vertical = xlarge" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed vertical="xlarge">
+        <DxcBleed vertical="3rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Vertical = xxlarge" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed vertical="xxlarge">
+        <DxcBleed vertical="4rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
     <Title title="Vertical = xxxlarge" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed vertical="xxxlarge">
+        <DxcBleed vertical="5rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
 
     <Title title="Top = xsmall, right = small, bottom = medium and left = large" theme="light" level={4} />
     <Container>
-      <DxcStack gutter="medium">
+      <DxcFlex direction="column" gap="1.5rem">
         <Placeholder></Placeholder>
-        <DxcBleed top="xsmall" right="small" bottom="medium" left="large">
+        <DxcBleed top="0.5rem" right="1rem" bottom="1.5rem" left="2rem">
           <Placeholder></Placeholder>
         </DxcBleed>
         <Placeholder></Placeholder>
-      </DxcStack>
+      </DxcFlex>
     </Container>
   </>
 );
@@ -337,6 +336,6 @@ const Placeholder = styled.div`
   min-height: 40px;
   min-width: 120px;
   border: 1px solid #a46ede;
+  border-radius: 0.5rem;
   background-color: #e5d5f6;
 `;
-

package/bleed/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-declare type Spacing = "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
-declare type Props = {
+type Spacing = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
+type Props = {
     /**
      * Applies the spacing scale to all sides.
      */

package/box/Box.accessibility.test.d.ts

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