@dxc-technology/halstack-react 5.0.0 → 6.1.0

package/quick-nav/QuickNav.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import DxcQuickNav from "./QuickNav";
 import DxcHeading from "../heading/Heading";
-import DxcText from "../text/Text";
+import DxcParagraph from "../paragraph/Paragraph";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 
@@ -23,14 +23,24 @@ const links = [
     ],
   },
   {
-    label: "Principles",
+    label: "Principles very very very very very very very very long",
     id: "principles",
     links: [
-      { label: "Color", id: "color" },
-      { label: "Spacing", id: "spacing" },
+      { label: "Color very very very very very very very very long", id: "color" },
+      { label: "Spacingveryveryveryveryveryveryveryverylong", id: "spacing" },
       { label: "Typography", id: "typography" },
     ],
   },
+  {
+    label: "Componentsveryveryveryveryveryveryveryverylong",
+    id: "components",
+    links: [
+      {
+        label: "Accordion",
+        id: "accordion",
+      },
+    ],
+  },
 ];
 
 export const Chromatic = () => (
@@ -38,13 +48,19 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Default" level={4} />
       <QuickNavContainer>
-        <DxcQuickNav title="Sections" links={links}></DxcQuickNav>
+        <DxcQuickNav links={links}></DxcQuickNav>
       </QuickNavContainer>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Link hovered" level={4} />
       <QuickNavContainer>
-        <DxcQuickNav title="Sections" links={links}></DxcQuickNav>
+        <DxcQuickNav links={links}></DxcQuickNav>
+      </QuickNavContainer>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Link focus" level={4} />
+      <QuickNavContainer>
+        <DxcQuickNav links={links}></DxcQuickNav>
       </QuickNavContainer>
     </ExampleContainer>
     <ExampleContainer>
@@ -53,7 +69,7 @@ export const Chromatic = () => (
         <ContentContainer>
           <Content id="overview">
             <DxcHeading level={1} text="Overview" margin={{ bottom: "small" }} />
-            <DxcText>
+            <DxcParagraph>
               Halstack is the DXC Technology's open source design system for insurance products and digital experiences.
               Our system provides all the tools and resources needed to create superior, beautiful but above all,
               functional user experiences. Halstack is the DXC Technology's open source design system for insurance
@@ -70,10 +86,10 @@ export const Chromatic = () => (
               create superior, beautiful but above all, functional user experiences.Halstack is the DXC Technology's
               open source design system for insurance products and digital experiences. Our system provides all the
               tools and resources needed to create superior, beautiful but above all, functional user experiences.
-            </DxcText>
+            </DxcParagraph>
             <Content id="introduction">
               <DxcHeading level={2} text="Introduction" margin={{ top: "xsmall", bottom: "xsmall" }} />
-              <DxcText>
+              <DxcParagraph>
                 Design principles Halstack design principles are the fundamental part of DXC Technology's approach to
                 provide guidance for development teams in order to deliver delightful and consistent user experiences to
                 our customers: Balance Consistency Visual hierarchy All our components, design tokens, accessibility
@@ -103,14 +119,14 @@ export const Chromatic = () => (
                 to use and contribute back to. We are charmed to receive external contributions to help us find bugs,
                 design new features, or help us improve the project documentation. If you're interested, definitely
                 check out our contribution guidelines.
-              </DxcText>
+              </DxcParagraph>
             </Content>
           </Content>
           <Content id="principles">
             <DxcHeading level={1} text="Principles" margin={{ top: "small", bottom: "xsmall" }} />
             <Content id="color">
               <DxcHeading level={2} text="Color" margin={{ top: "xsmall", bottom: "xsmall" }} />
-              <DxcText>
+              <DxcParagraph>
                 The color palette is an essential asset as a communication resource of our design system. Halstack color
                 palette brings a unified consistency and helps in guiding the user's perception order. Our color palette
                 is based in the HSL model . All our color families are calculated using the lightness value of the
@@ -143,11 +159,11 @@ export const Chromatic = () => (
                 tokens to manage color. Appart from a multi-purpose greyscale family, purple and blue are the core color
                 families used in our set of components. Additional families as red, green and yellow help as feedback
                 role-based color palettes and must not be used outside this context.
-              </DxcText>
+              </DxcParagraph>
             </Content>
             <Content id="spacing">
               <DxcHeading level={2} text="Spacing" margin={{ top: "xsmall", bottom: "xsmall" }} />
-              <DxcText>
+              <DxcParagraph>
                 In the search of consistent alignment between the elements we provide a spacing scale based on a root
                 values of 8px and 4px. The numbers 4 and 8 are easily multiplied, they provide flexible and consistent,
                 yet distinct enough, steps between them.In the search of consistent alignment between the elements we
@@ -165,11 +181,11 @@ export const Chromatic = () => (
                 consistent, yet distinct enough, steps between them.In the search of consistent alignment between the
                 elements we provide a spacing scale based on a root values of 8px and 4px. The numbers 4 and 8 are
                 easily multiplied, they provide flexible and consistent, yet distinct enough, steps between them.
-              </DxcText>
+              </DxcParagraph>
             </Content>
             <Content id="typography">
               <DxcHeading level={2} text="Typography" margin={{ top: "xsmall", bottom: "xsmall" }} />
-              <DxcText>
+              <DxcParagraph>
                 Our selected typography helps in structuring our user's experience based on the visual impact that it
                 has on the user interface content. It defines what is the first noticeable piece of information or data
                 based on the font shape, size, color, or type and it highlights some pieces of text over the rest. Some
@@ -201,7 +217,18 @@ export const Chromatic = () => (
                 Halstack Design System include headers, body, taglines, captions, and labels. Make sure you include all
                 the different typographic variants in order to enhance the application's content structure, including
                 the Heading component which defines different levels of page and section titles.
-              </DxcText>
+              </DxcParagraph>
+            </Content>
+          </Content>
+          <Content id="components">
+            <DxcHeading level={1} text="Components" margin={{ top: "small", bottom: "xsmall" }} />
+            <Content id="accordion">
+              <DxcHeading level={2} text="Accordion" margin={{ top: "xsmall", bottom: "xsmall" }} />
+              <DxcParagraph>
+                Accordions are used to group similar content and hide or show it depending on user needs or preferences.
+                Accordions give users more granular control over the interface and help digest content in stages, rather
+                than all at once.
+              </DxcParagraph>
             </Content>
           </Content>
         </ContentContainer>

package/quick-nav/types.d.ts

@@ -2,13 +2,13 @@ declare type Props = {
     /**
      * Title of the quick nav component.
      */
-    title: string;
+    title?: string;
     /**
      * Links to be shown inside the quick nav component.
      */
-    links: Link[];
+    links: LinkType[];
 };
-declare type Link = {
+declare type LinkType = {
     /**
      * Label to be shown in the link.
      */
@@ -16,6 +16,6 @@ declare type Link = {
     /**
      * Sublinks of the link.
      */
-    links?: Link[];
+    links?: LinkType[];
 };
 export default Props;

package/radio-group/Radio.js

@@ -133,7 +133,7 @@ var Label = _styledComponents["default"].span(_templateObject6 || (_templateObje
 }, function (props) {
   return props.theme.radioInputLabelLineHeight;
 }, function (props) {
-  return props.disabled && "color: ".concat(props.theme.disabledRadioInputLabelFontColor, "; pointer-events: none;");
+  return props.disabled ? "color: ".concat(props.theme.disabledRadioInputLabelFontColor, "; pointer-events: none;") : "color: ".concat(props.theme.radioInputLabelFontColor);
 });
 
 var _default = /*#__PURE__*/_react["default"].memo(DxcRadio);

package/radio-group/RadioGroup.js

@@ -23,6 +23,8 @@ var _uuid = require("uuid");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _Radio = _interopRequireDefault(require("./Radio"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
@@ -47,8 +49,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$optional = _ref.optional,
       optional = _ref$optional === void 0 ? false : _ref$optional,
-      _ref$optionalItemLabe = _ref.optionalItemLabel,
-      optionalItemLabel = _ref$optionalItemLabe === void 0 ? "N/A" : _ref$optionalItemLabe,
+      optionalItemLabel = _ref.optionalItemLabel,
       _ref$readonly = _ref.readonly,
       readonly = _ref$readonly === void 0 ? false : _ref$readonly,
       _ref$stacking = _ref.stacking,
@@ -78,8 +79,10 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       firstTimeFocus = _useState6[0],
       setFirstTimeFocus = _useState6[1];
 
+  var colorsTheme = (0, _useTheme["default"])();
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
   var optionalItem = {
-    label: optionalItemLabel,
+    label: optionalItemLabel || translatedLabels.radioGroup.optionalItemLabelDefault,
     value: "",
     disabled: disabled
   };
@@ -92,7 +95,6 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       currentFocusIndex = _useState8[0],
       setCurrentFocusIndex = _useState8[1];
 
-  var colorsTheme = (0, _useTheme["default"])();
   var handleOnChange = (0, _react.useCallback)(function (newValue) {
     var currentValue = value !== null && value !== void 0 ? value : innerValue;
 
@@ -109,7 +111,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       var currentValue = value !== null && value !== void 0 ? value : innerValue;
       !optional && !Boolean(currentValue) ? onBlur === null || onBlur === void 0 ? void 0 : onBlur({
         value: currentValue,
-        error: "This field is required. Please, choose an option."
+        error: translatedLabels.formFields.requiredSelectionErrorMessage
       }) : onBlur === null || onBlur === void 0 ? void 0 : onBlur({
         value: currentValue
       });
@@ -147,27 +149,25 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
   };
 
   var handleOnKeyDown = function handleOnKeyDown(event) {
-    switch (event.keyCode) {
-      case 37: // arrow left
-
-      case 38:
-        // arrow up
+    switch (event.key) {
+      case "Left":
+      case "ArrowLeft":
+      case "Up":
+      case "ArrowUp":
         event.preventDefault();
         setPreviousRadioChecked();
         break;
 
-      case 39: // arrow right
-
-      case 40:
-        // arrow down
+      case "Right":
+      case "ArrowRight":
+      case "Down":
+      case "ArrowDown":
         event.preventDefault();
         setNextRadioChecked();
         break;
 
-      case 13: // enter
-
-      case 32:
-        // space
+      case "Enter":
+      case "Space":
         event.preventDefault();
         handleOnChange(innerOptions[currentFocusIndex].value);
         break;
@@ -182,7 +182,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
     id: radioGroupLabelId,
     helperText: helperText,
     disabled: disabled
-  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, "(Optional)")), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
+  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, translatedLabels.formFields.optionalLabel)), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
     disabled: disabled
   }, helperText), /*#__PURE__*/_react["default"].createElement(RadioGroup, {
     onBlur: handleOnBlur,
@@ -214,7 +214,8 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       disabled: option.disabled || disabled,
       focused: currentFocusIndex === index,
       readonly: readonly,
-      tabIndex: tabIndex
+      tabIndex: tabIndex,
+      key: "radio-".concat(index)
     });
   })), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
     id: errorId,

package/resultsetTable/ResultsetTable.test.js

@@ -2,6 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
@@ -10,6 +14,44 @@ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
 var _ResultsetTable = _interopRequireDefault(require("./ResultsetTable"));
 
+// Mocking DOMRect for Radix Primitive Popover
+global.globalThis = global;
+
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver(cb) {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+    this.cb = cb;
+  }
+
+  (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {
+      this.cb([{
+        borderBoxSize: {
+          inlineSize: 0,
+          blockSize: 0
+        }
+      }]);
+    }
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }]);
+  return ResizeObserver;
+}();
+
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
 var columns = [{
   displayValue: "Id",
   isSortable: false

package/select/Listbox.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { ListboxProps } from "./types";
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ListboxProps & React.RefAttributes<HTMLUListElement>>>;
+declare const _default: React.MemoExoticComponent<({ id, currentValue, options, visualFocusIndex, lastOptionIndex, multiple, optional, optionalItem, searchable, handleOptionOnClick, getSelectWidth, }: ListboxProps) => JSX.Element>;
 export default _default;

package/select/Listbox.js

@@ -11,12 +11,16 @@ exports["default"] = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _Option = _interopRequireDefault(require("./Option"));
 
 var _Icons = _interopRequireDefault(require("./Icons"));
@@ -35,7 +39,7 @@ var groupsHaveOptions = function groupsHaveOptions(options) {
   }) : true;
 };
 
-var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+var Listbox = function Listbox(_ref) {
   var id = _ref.id,
       currentValue = _ref.currentValue,
       options = _ref.options,
@@ -45,8 +49,17 @@ var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       optional = _ref.optional,
       optionalItem = _ref.optionalItem,
       searchable = _ref.searchable,
-      handleOptionOnClick = _ref.handleOptionOnClick;
+      handleOptionOnClick = _ref.handleOptionOnClick,
+      getSelectWidth = _ref.getSelectWidth;
   var colorsTheme = (0, _useTheme["default"])();
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
+  var listboxRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      styles = _useState2[0],
+      setStyles = _useState2[1];
+
   var globalIndex = optional && !multiple ? 0 : -1; // index for options, starting from 0 to options.length -1
 
   var mapOptionFunc = function mapOptionFunc(option, mapIndex) {
@@ -89,6 +102,42 @@ var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     }
   };
 
+  (0, _react.useLayoutEffect)(function () {
+    if (currentValue && !multiple) {
+      var _listEl$scrollTo;
+
+      var listEl = listboxRef === null || listboxRef === void 0 ? void 0 : listboxRef.current;
+      var selectedListOptionEl = listEl === null || listEl === void 0 ? void 0 : listEl.querySelector("[aria-selected='true']");
+      listEl === null || listEl === void 0 ? void 0 : (_listEl$scrollTo = listEl.scrollTo) === null || _listEl$scrollTo === void 0 ? void 0 : _listEl$scrollTo.call(listEl, {
+        top: (selectedListOptionEl === null || selectedListOptionEl === void 0 ? void 0 : selectedListOptionEl.offsetTop) - (listEl === null || listEl === void 0 ? void 0 : listEl.clientHeight) / 2
+      });
+    }
+  }, [currentValue, multiple]);
+  (0, _react.useLayoutEffect)(function () {
+    var _listboxRef$current, _visualFocusedOptionE;
+
+    var visualFocusedOptionEl = listboxRef === null || listboxRef === void 0 ? void 0 : (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 ? void 0 : _listboxRef$current.querySelectorAll("[role='option']")[visualFocusIndex];
+    visualFocusedOptionEl === null || visualFocusedOptionEl === void 0 ? void 0 : (_visualFocusedOptionE = visualFocusedOptionEl.scrollIntoView) === null || _visualFocusedOptionE === void 0 ? void 0 : _visualFocusedOptionE.call(visualFocusedOptionEl, {
+      block: "nearest",
+      inline: "start"
+    });
+  }, [visualFocusIndex]);
+
+  var handleResize = function handleResize() {
+    setStyles({
+      width: getSelectWidth()
+    });
+  };
+
+  (0, _react.useLayoutEffect)(function () {
+    handleResize();
+  }, [getSelectWidth]);
+  (0, _react.useEffect)(function () {
+    window.addEventListener("resize", handleResize);
+    return function () {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [getSelectWidth]);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.select
   }, /*#__PURE__*/_react["default"].createElement(ListboxContainer, {
@@ -99,11 +148,13 @@ var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     onMouseDown: function onMouseDown(event) {
       event.preventDefault();
     },
-    ref: ref,
+    ref: listboxRef,
     role: "listbox",
     "aria-multiselectable": multiple,
-    "aria-orientation": "vertical"
-  }, searchable && (options.length === 0 || !groupsHaveOptions(options)) ? /*#__PURE__*/_react["default"].createElement(OptionsSystemMessage, null, /*#__PURE__*/_react["default"].createElement(NoMatchesFoundIcon, null, _Icons["default"].searchOff), "No matches found") : optional && !multiple && /*#__PURE__*/_react["default"].createElement(_Option["default"], {
+    "aria-orientation": "vertical",
+    style: styles
+  }, searchable && (options.length === 0 || !groupsHaveOptions(options)) ? /*#__PURE__*/_react["default"].createElement(OptionsSystemMessage, null, /*#__PURE__*/_react["default"].createElement(NoMatchesFoundIcon, null, _Icons["default"].searchOff), translatedLabels.select.noMatchesErrorMessage) : optional && !multiple && /*#__PURE__*/_react["default"].createElement(_Option["default"], {
+    key: "option-".concat(optionalItem.value),
     id: "option-".concat(0),
     option: optionalItem,
     onClick: handleOptionOnClick,
@@ -113,9 +164,9 @@ var Listbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     isLastOption: lastOptionIndex === 0,
     isSelected: multiple ? currentValue.includes(optionalItem.value) : currentValue === optionalItem.value
   }), options.map(mapOptionFunc)));
-});
+};
 
-var ListboxContainer = _styledComponents["default"].ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  z-index: 1;\n  max-height: 304px;\n  overflow-y: auto;\n  top: calc(100% + 4px);\n  left: 0;\n  margin: 0;\n  padding: 0.25rem 0;\n  width: 100%;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 0.25rem;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  cursor: default;\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"])), function (props) {
+var ListboxContainer = _styledComponents["default"].ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  max-height: 304px;\n  overflow-y: auto;\n  margin: 0;\n  padding: 0.25rem 0;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 0.25rem;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  cursor: default;\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"])), function (props) {
   return props.theme.listDialogBackgroundColor;
 }, function (props) {
   return props.theme.listDialogBorderColor;