@dxc-technology/halstack-react 0.0.0-4dc6bb3 → 0.0.0-4dc980c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "0.0.0-4dc6bb3",
+  "version": "0.0.0-4dc980c",
   "description": "DXC Halstack React components library",
   "repository": "dxc-technology/halstack-react",
   "homepage": "https://developer.dxc.com/halstack",
@@ -18,24 +18,17 @@
     "styled-components": "^5.0.1"
   },
   "dependencies": {
-    "@date-io/dayjs": "^1.3.9",
-    "@material-ui/core": "4.11.1",
-    "@material-ui/icons": "4.4.3",
-    "@material-ui/lab": "4.0.0-alpha.17",
-    "@material-ui/pickers": "3.2.2",
-    "@material-ui/styles": "4.0.2",
     "@radix-ui/react-popover": "0.1.6",
     "@types/styled-components": "^5.1.24",
     "@types/uuid": "^8.3.4",
     "color": "^3.1.3",
     "dayjs": "^1.11.1",
-    "prop-types": "^15.7.2",
     "rgb-hex": "^3.0.0",
     "slugify": "^1.6.5",
     "uuid": "^8.3.2"
   },
   "scripts": {
-    "test": "jest",
+    "test": "jest --env=jsdom",
     "test:watch": "npm test -- --watch --coverage",
     "build": "babel src --extensions .js,.jsx,.ts,.tsx --out-dir ../dist --copy-files --verbose && node ../scripts/build/copy-package.js && tsc ",
     "build:watch": "babel src --watch --extensions .js,.jsx,.ts,.tsx --out-dir ../dist --copy-files --verbose",
@@ -57,7 +50,7 @@
     "@storybook/react": "^6.4.9",
     "@storybook/testing-library": "0.0.7",
     "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^12.6.3",
+    "@testing-library/user-event": "^13.0.0",
     "@types/react": "^18.0.18",
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.6",
@@ -72,7 +65,8 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-storybook": "^0.5.5",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^25.5.4",
+    "jest": "^29.2.2",
+    "jest-environment-jsdom": "^29.3.1",
     "react": "^18.x",
     "react-dom": "^18.x",
     "react-test-renderer": "^16.8.6",
@@ -84,7 +78,8 @@
     "moduleNameMapper": {
       "\\.(css|less|scss|sass)$": "identity-obj-proxy",
       "\\.(svg)$": "<rootDir>/test/mocks/svgMock.js",
-      "\\.(png)$": "<rootDir>/test/mocks/pngMock.js"
+      "\\.(png)$": "<rootDir>/test/mocks/pngMock.js",
+      "^uuid$": "uuid"
     }
   }
 }

package/paginator/Paginator.js

@@ -153,7 +153,7 @@ var ItemsPageContainer = _styledComponents["default"].span(_templateObject3 || (
 
 var ItemsLabel = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: 0.5rem;\n"])));
 
-var GoToLabel = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: 0.5rem;\n  margin-left: 1rem;\n"])));
+var GoToLabel = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: 0.5rem;\n  margin-left: 0.5rem;\n"])));
 
 var TotalItemsContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: ", ";\n  margin-left: ", ";\n"])), function (props) {
   return props.theme.totalItemsContainerMarginRight;
@@ -163,7 +163,7 @@ var TotalItemsContainer = _styledComponents["default"].span(_templateObject6 ||
 
 var LabelsContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  gap: 0.5rem;\n  width: 100%;\n  justify-content: flex-end;\n  align-items: center;\n"])));
 
-var PageToSelectContainer = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n\n  label {\n    height: 0px;\n  }\n  label + .MuiInput-formControl {\n    margin-top: 0px;\n  }\n"])));
+var PageToSelectContainer = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin-right: 0.5rem;\n\n  label {\n    height: 0px;\n  }\n  label + .MuiInput-formControl {\n    margin-top: 0px;\n  }\n"])));
 
 var TextContainer = _styledComponents["default"].span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])([""])));
 

package/paginator/Paginator.test.js

@@ -77,7 +77,7 @@ describe("Paginator component tests", function () {
     })),
         getByText = _render3.getByText;
 
-    expect(getByText("Items per page")).toBeTruthy();
+    expect(getByText("Items per page:")).toBeTruthy();
   });
   test("Paginator renders with itemsPerPageOptions", function () {
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {

package/quick-nav/QuickNav.js

@@ -65,7 +65,9 @@ var DxcQuickNav = function DxcQuickNav(_ref) {
       }, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
         horizontal: "0.5rem"
       }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, /*#__PURE__*/_react["default"].createElement(Link, {
-        href: "#".concat((0, _slugify["default"])(sublink === null || sublink === void 0 ? void 0 : sublink.label, {
+        href: "#".concat((0, _slugify["default"])(link === null || link === void 0 ? void 0 : link.label, {
+          lower: true
+        }), "-").concat((0, _slugify["default"])(sublink === null || sublink === void 0 ? void 0 : sublink.label, {
           lower: true
         }))
       }, sublink === null || sublink === void 0 ? void 0 : sublink.label))));

package/quick-nav/QuickNav.stories.tsx

@@ -14,28 +14,19 @@ export default {
 const defaultLinks = [
   {
     label: "Overview",
-    id: "overview",
   },
   {
     label: "Principles",
-    id: "principles",
-    links: [
-      { label: "Color", id: "color" },
-      { label: "Spacing", id: "spacing" },
-      { label: "Typography", id: "typography" },
-    ],
+    links: [{ label: "Color" }, { label: "Spacing" }, { label: "Typography" }],
   },
   {
     label: "Components",
-    id: "components",
     links: [
       {
         label: "Accordion",
-        id: "accordion",
       },
       {
         label: "Button",
-        id: "button",
       },
     ],
   },
@@ -44,30 +35,36 @@ const defaultLinks = [
 const links = [
   {
     label: "Overview",
-    id: "overview",
     links: [
       {
         label: "Introduction",
-        id: "introduction",
+      },
+    ],
+  },
+  {
+    label: "Components",
+    links: [
+      {
+        label: "Introduction",
+      },
+      {
+        label: "Accordion",
       },
     ],
   },
   {
     label: "Principles very very very very very very very very long",
-    id: "principles",
     links: [
-      { label: "Color very very very very very very very very long", id: "color" },
-      { label: "Spacingveryveryveryveryveryveryveryverylong", id: "spacing" },
-      { label: "Typography", id: "typography" },
+      { label: "Color very very very very very very very very long" },
+      { label: "Spacingveryveryveryveryveryveryveryverylong" },
+      { label: "Typography" },
     ],
   },
   {
     label: "Componentsveryveryveryveryveryveryveryverylong",
-    id: "components",
     links: [
       {
         label: "Accordion",
-        id: "accordion",
       },
     ],
   },
@@ -123,7 +120,7 @@ export const Chromatic = () => (
               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.
             </DxcParagraph>
-            <Content id="introduction">
+            <Content id="overview-introduction">
               <DxcHeading level={2} text="Introduction" margin={{ top: "xsmall", bottom: "xsmall" }} />
               <DxcParagraph>
                 Design principles Halstack design principles are the fundamental part of DXC Technology's approach to
@@ -158,9 +155,54 @@ export const Chromatic = () => (
               </DxcParagraph>
             </Content>
           </Content>
-          <Content id="principles">
+          <Content id="components">
+            <DxcHeading level={1} text="Components" margin={{ top: "small", bottom: "xsmall" }} />
+            <Content id="components-introduction">
+              <DxcHeading level={2} text="Introduction" margin={{ top: "xsmall", bottom: "xsmall" }} />
+              <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
+                guidelines, responsive design techniques, and layout proposals have been carefully curated by DXC design
+                and engineering teams with the objective of creating a unique visual language and ecosystem for our
+                applications. This is the DXC way of creating User Experiences. Open Source Halstack is an open source
+                design system, this means that we work towards DXC Technology bussines needs, but it is open for anyone
+                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.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 guidelines, responsive design techniques, and layout
+                proposals have been carefully curated by DXC design and engineering teams with the objective of creating
+                a unique visual language and ecosystem for our applications. This is the DXC way of creating User
+                Experiences. Open Source Halstack is an open source design system, this means that we work towards DXC
+                Technology bussines needs, but it is open for anyone 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.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 guidelines,
+                responsive design techniques, and layout proposals have been carefully curated by DXC design and
+                engineering teams with the objective of creating a unique visual language and ecosystem for our
+                applications. This is the DXC way of creating User Experiences. Open Source Halstack is an open source
+                design system, this means that we work towards DXC Technology bussines needs, but it is open for anyone
+                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.
+              </DxcParagraph>
+            </Content>
+            <Content id="components-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>
+          <Content id="principles-very-very-very-very-very-very-very-very-long">
             <DxcHeading level={1} text="Principles" margin={{ top: "small", bottom: "xsmall" }} />
-            <Content id="color">
+            <Content id="principles-very-very-very-very-very-very-very-very-long-color-very-very-very-very-very-very-very-very-long">
               <DxcHeading level={2} text="Color" margin={{ top: "xsmall", bottom: "xsmall" }} />
               <DxcParagraph>
                 The color palette is an essential asset as a communication resource of our design system. Halstack color
@@ -197,7 +239,7 @@ export const Chromatic = () => (
                 role-based color palettes and must not be used outside this context.
               </DxcParagraph>
             </Content>
-            <Content id="spacing">
+            <Content id="principles-very-very-very-very-very-very-very-very-long-spacingveryveryveryveryveryveryveryverylong">
               <DxcHeading level={2} text="Spacing" margin={{ top: "xsmall", bottom: "xsmall" }} />
               <DxcParagraph>
                 In the search of consistent alignment between the elements we provide a spacing scale based on a root
@@ -219,7 +261,7 @@ export const Chromatic = () => (
                 easily multiplied, they provide flexible and consistent, yet distinct enough, steps between them.
               </DxcParagraph>
             </Content>
-            <Content id="typography">
+            <Content id="principles-very-very-very-very-very-very-very-very-long-typography">
               <DxcHeading level={2} text="Typography" margin={{ top: "xsmall", bottom: "xsmall" }} />
               <DxcParagraph>
                 Our selected typography helps in structuring our user's experience based on the visual impact that it
@@ -256,9 +298,9 @@ export const Chromatic = () => (
               </DxcParagraph>
             </Content>
           </Content>
-          <Content id="components">
+          <Content id="componentsveryveryveryveryveryveryveryverylong">
             <DxcHeading level={1} text="Components" margin={{ top: "small", bottom: "xsmall" }} />
-            <Content id="accordion">
+            <Content id="componentsveryveryveryveryveryveryveryverylong-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.

package/radio-group/RadioGroup.js

@@ -27,7 +27,7 @@ var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabel
 
 var _Radio = _interopRequireDefault(require("./Radio"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -198,10 +198,12 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
     "aria-required": !disabled && !readonly && !optional,
     "aria-readonly": readonly,
     "aria-orientation": stacking === "column" ? "vertical" : "horizontal"
-  }, /*#__PURE__*/_react["default"].createElement("input", {
-    type: "hidden",
+  }, /*#__PURE__*/_react["default"].createElement(ValueInput, {
     name: name,
-    value: (_ref2 = value !== null && value !== void 0 ? value : innerValue) !== null && _ref2 !== void 0 ? _ref2 : ""
+    disabled: disabled,
+    value: (_ref2 = value !== null && value !== void 0 ? value : innerValue) !== null && _ref2 !== void 0 ? _ref2 : "",
+    readOnly: true,
+    "aria-hidden": "true"
   }), innerOptions.map(function (option, index) {
     return /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
       key: "radio-".concat(index),
@@ -269,7 +271,9 @@ var RadioGroup = _styledComponents["default"].div(_templateObject5 || (_template
   return props.theme.groupHorizontalGutter;
 });
 
-var Error = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 1.5em;\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.5em;\n  margin-top: 0.5rem;\n"])), function (props) {
+var ValueInput = _styledComponents["default"].input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: none;\n"])));
+
+var Error = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 1.5em;\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.5em;\n  margin-top: 0.5rem;\n"])), function (props) {
   return props.theme.errorMessageColor;
 }, function (props) {
   return props.theme.fontFamily;