@dxc-technology/halstack-react 0.0.0-e33af28 → 0.0.0-e360842

package/sidenav/types.d.ts

@@ -1,50 +1,76 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Padding = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    right?: Space;
+type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+export type SidenavTitlePropsType = {
+    /**
+     * The area inside the sidenav title. This area can be used to render custom content.
+     */
+    children: React.ReactNode;
 };
-export declare type SidenavLinkPropsType = {
+export type SidenavSectionPropsType = {
     /**
-     * Value of the tabindex.
+     * The area inside the sidenav section. This area can be used to render sidenav groups, links and custom content.
      */
-    tabIndex?: number;
+    children: React.ReactNode;
+};
+export type SidenavGroupPropsType = {
     /**
-     * Page to be opened when the user clicks on the link.
+     * The title of the sidenav group.
      */
-    href?: string;
+    title?: string;
     /**
-     * This function will be called when the user clicks the link.
+     * If true, the sidenav group will be a button that will allow you to collapse the links contained within it.
+     * In addition, if it's collapsed and contains the currently selected link, the group title will also be marked as selected.
      */
-    onClick?: () => void;
+    collapsable?: boolean;
     /**
-     * The area inside the sidenav link. This area can be used to render custom content.
+     * Material Symbol name or SVG icon to be displayed next to the title of the group.
      */
-    children: React.ReactNode;
-};
-export declare type SidenavTitlePropsType = {
+    icon?: string | SVG;
     /**
-     * The area inside the sidenav title. This area can be used to render custom content.
+     * The area inside the sidenav group. This area can be used to render sidenav links.
      */
     children: React.ReactNode;
 };
-export declare type SidenavSubtitlePropsType = {
+export type SidenavLinkPropsType = {
     /**
-     * The area inside the sidenav subtitle. This area can be used to render custom content.
+     * Page to be opened when the user clicks on the link.
+     */
+    href?: string;
+    /**
+     * If true, the page is opened in a new browser tab.
+     */
+    newWindow?: boolean;
+    /**
+     * The Material symbol or SVG element used as the icon that will be placed to the left of the link text.
+     */
+    icon?: string | SVG;
+    /**
+     * If true, the link will be marked as selected. Moreover, in that same case,
+     * if it is contained within a collapsed group, and consequently, the currently selected link is not visible,
+     * the group title will appear as selected too.
+     */
+    selected?: boolean;
+    /**
+     * This function will be called when the user clicks the link and the event will be passed to this function.
+     */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * The area inside the sidenav link.
      */
     children: React.ReactNode;
+    /**
+     * Value of the tabindex.
+     */
+    tabIndex?: number;
 };
-declare type SidenavPropsType = {
+type Props = {
     /**
-     * Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
+     * The area assigned to render the sidenav title. It is highly recommended to use the sidenav title.
      */
-    padding?: Space | Padding;
+    title?: React.ReactNode;
     /**
-     * The area inside the sidenav. This area can be used to render custom content.
+     * The area inside the sidenav. This area can be used to render the content inside the sidenav.
      */
     children: React.ReactNode;
 };
-export default SidenavPropsType;
+export default Props;

package/slider/Slider.accessibility.test.d.ts

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

package/slider/Slider.accessibility.test.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+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");
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Slider = _interopRequireDefault(require("./Slider"));
+// Mocking DOMRect for Radix Primitive Popover
+global.globalThis = global;
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver() {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+  }
+  (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {}
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }, {
+    key: "disconnect",
+    value: function disconnect() {}
+  }]);
+  return ResizeObserver;
+}();
+describe("Slider component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
+            helperText: "Helper Text",
+            margin: "medium",
+            name: "Name",
+            size: "medium",
+            label: "label",
+            step: 10,
+            minValue: 0,
+            maxValue: 100,
+            value: 50,
+            showLimitsValues: true,
+            showInput: true,
+            marks: true
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for disabled mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, container, results;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
+            helperText: "Helper Text",
+            margin: "medium",
+            name: "Name",
+            size: "medium",
+            label: "label",
+            step: 10,
+            minValue: 0,
+            maxValue: 100,
+            value: 50,
+            showLimitsValues: true,
+            showInput: true,
+            marks: true,
+            disabled: true
+          })), container = _render2.container;
+          _context2.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+});

package/slider/Slider.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import SliderPropsType from "./types";
-declare const DxcSlider: ({ label, name, defaultValue, value, helperText, minValue, maxValue, step, showLimitsValues, showInput, disabled, marks, onChange, onDragEnd, labelFormatCallback, margin, size, }: SliderPropsType) => JSX.Element;
+declare const DxcSlider: React.ForwardRefExoticComponent<SliderPropsType & React.RefAttributes<HTMLDivElement>>;
 export default DxcSlider;