@dxc-technology/halstack-react 0.0.0-c293b72 → 0.0.0-c2b6ec9

package/select/Select.test.js

@@ -8,7 +8,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _Select = _interopRequireDefault(require("./Select.tsx"));
+var _Select = _interopRequireDefault(require("./Select"));
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {
@@ -27,7 +27,7 @@ global.ResizeObserver = /*#__PURE__*/function () {
   function ResizeObserver() {
     (0, _classCallCheck2["default"])(this, ResizeObserver);
   }
-  (0, _createClass2["default"])(ResizeObserver, [{
+  return (0, _createClass2["default"])(ResizeObserver, [{
     key: "observe",
     value: function observe() {}
   }, {
@@ -37,7 +37,6 @@ global.ResizeObserver = /*#__PURE__*/function () {
     key: "disconnect",
     value: function disconnect() {}
   }]);
-  return ResizeObserver;
 }();
 var singleOptions = [{
   label: "Option 01",
@@ -272,7 +271,8 @@ describe("Select component tests", function () {
           _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             helperText: "test-select-helper-text",
-            placeholder: "Example text"
+            placeholder: "Example text",
+            options: singleOptions
           })), getByText = _render.getByText, getByRole = _render.getByRole;
           select = getByRole("combobox");
           label = getByText("test-select-label");
@@ -289,7 +289,8 @@ describe("Select component tests", function () {
   test("Renders with correct aria attributes when is in error state", function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         label: "Error label",
-        error: "Error message."
+        error: "Error message.",
+        options: singleOptions
       })),
       getByText = _render2.getByText,
       getByRole = _render2.getByRole;
@@ -382,15 +383,12 @@ describe("Select component tests", function () {
           _context4.next = 8;
           return _userEvent["default"].click(select);
         case 8:
-          expect(getAllByRole("option")[3].getAttribute("aria-selected")).toBe("true");
-          expect(getAllByRole("option")[1].getAttribute("aria-selected")).toBe("true");
-          expect(getAllByRole("option")[5].getAttribute("aria-selected")).toBe("true");
-          _context4.next = 13;
+          _context4.next = 10;
           return _userEvent["default"].click(getAllByRole("option")[2]);
-        case 13:
+        case 10:
           expect(getByText("Option 02, Option 03, Option 04, Option 06")).toBeTruthy();
           expect(submitInput.value).toBe("4,2,6,3");
-        case 15:
+        case 12:
         case "end":
           return _context4.stop();
       }
@@ -481,6 +479,7 @@ describe("Select component tests", function () {
             label: "test-select-label",
             value: ["1", "2"],
             options: singleOptions,
+            multiple: true,
             disabled: true
           })), getByRole = _render8.getByRole, queryByRole = _render8.queryByRole;
           select = getByRole("combobox");
@@ -1320,10 +1319,8 @@ describe("Select component tests", function () {
           });
           expect(queryByRole("listbox")).toBeTruthy();
           expect(getByText("Option 11, Option 19")).toBeTruthy();
-          expect(getAllByRole("option")[10].getAttribute("aria-selected")).toBe("true");
-          expect(getAllByRole("option")[18].getAttribute("aria-selected")).toBe("true");
           expect(submitInput.value).toBe("11,19");
-        case 21:
+        case 19:
         case "end":
           return _context30.stop();
       }
@@ -1399,15 +1396,14 @@ describe("Select component tests", function () {
           return _userEvent["default"].click(select);
         case 6:
           expect(getAllByText("Choose an option").length).toBe(1);
-          expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("false");
-          _context32.next = 10;
+          _context32.next = 9;
           return _userEvent["default"].click(getAllByRole("option")[0]);
-        case 10:
+        case 9:
           expect(onChange).toHaveBeenCalledWith({
             value: ["1"]
           });
           expect(getAllByText("Option 01").length).toBe(2);
-        case 12:
+        case 11:
         case "end":
           return _context32.stop();
       }
@@ -1566,7 +1562,7 @@ describe("Select component tests", function () {
           _context35.next = 4;
           return _userEvent["default"].click(select);
         case 4:
-          listbox = getByRole("listbox");
+          listbox = getByRole("list");
           expect(listbox).toBeTruthy();
           expect(select.getAttribute("aria-expanded")).toBe("true");
           expect(getByText("Colores")).toBeTruthy();
@@ -1574,7 +1570,7 @@ describe("Select component tests", function () {
           expect(getByText("Negro")).toBeTruthy();
           expect(getByText("Ciudades españolas")).toBeTruthy();
           expect(getByText("Madrid")).toBeTruthy();
-          groups = getAllByRole("group");
+          groups = getAllByRole("listbox");
           expect(groups.length).toBe(3);
           groupLabels = getAllByRole("presentation");
           expect(groups[0].getAttribute("aria-labelledby")).toBe(groupLabels[0].id);
@@ -1584,7 +1580,7 @@ describe("Select component tests", function () {
           _context35.next = 21;
           return _userEvent["default"].click(select);
         case 21:
-          expect(queryByRole("listbox")).toBeFalsy();
+          expect(queryByRole("list")).toBeFalsy();
           expect(select.getAttribute("aria-expanded")).toBe("false");
         case 23:
         case "end":
@@ -1608,7 +1604,7 @@ describe("Select component tests", function () {
           _context36.next = 4;
           return _userEvent["default"].click(select);
         case 4:
-          expect(queryByRole("listbox")).toBeFalsy();
+          expect(queryByRole("list")).toBeFalsy();
           expect(select.getAttribute("aria-expanded")).toBe("false");
         case 6:
         case "end":
@@ -1639,7 +1635,7 @@ describe("Select component tests", function () {
           expect(onChange).toHaveBeenCalledWith({
             value: "oviedo"
           });
-          expect(queryByRole("listbox")).toBeFalsy();
+          expect(queryByRole("list")).toBeFalsy();
           expect(getByText("Oviedo")).toBeTruthy();
           _context37.next = 13;
           return _userEvent["default"].click(select);
@@ -1755,7 +1751,7 @@ describe("Select component tests", function () {
       keyCode: 38,
       charCode: 38
     });
-    expect(queryByRole("listbox")).toBeTruthy();
+    expect(queryByRole("list")).toBeTruthy();
     expect(select.getAttribute("aria-activedescendant")).toBe("option-17");
   });
   test("Grouped Options: Arrow up key - Puts the focus in last option when the first one is visually focused", function () {
@@ -1778,7 +1774,7 @@ describe("Select component tests", function () {
       keyCode: 38,
       charCode: 38
     });
-    expect(queryByRole("listbox")).toBeTruthy();
+    expect(queryByRole("list")).toBeTruthy();
     expect(select.getAttribute("aria-activedescendant")).toBe("option-17");
   });
   test("Grouped Options: Arrow down key - Opens the listbox and visually focus the first option", function () {
@@ -1795,7 +1791,7 @@ describe("Select component tests", function () {
       keyCode: 40,
       charCode: 40
     });
-    expect(queryByRole("listbox")).toBeTruthy();
+    expect(queryByRole("list")).toBeTruthy();
     expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
   });
   test("Grouped Options: Arrow down key - Puts the focus in the first option when the last one is visually focused", function () {
@@ -1818,7 +1814,7 @@ describe("Select component tests", function () {
       keyCode: 40,
       charCode: 40
     });
-    expect(queryByRole("listbox")).toBeTruthy();
+    expect(queryByRole("list")).toBeTruthy();
     expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
   });
   test("Grouped Options: Enter key - Selects the visually focused option and closes the listbox", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee40() {
@@ -1867,7 +1863,7 @@ describe("Select component tests", function () {
           expect(onChange).toHaveBeenCalledWith({
             value: "ebro"
           });
-          expect(queryByRole("listbox")).toBeFalsy();
+          expect(queryByRole("list")).toBeFalsy();
           expect(getByText("Ebro")).toBeTruthy();
           _context40.next = 13;
           return _userEvent["default"].click(select);
@@ -1896,29 +1892,28 @@ describe("Select component tests", function () {
           _context41.next = 6;
           return _userEvent["default"].click(select);
         case 6:
-          expect(getByRole("listbox")).toBeTruthy();
+          expect(getByRole("list")).toBeTruthy();
           _context41.next = 9;
           return _userEvent["default"].type(searchInput, "ro");
         case 9:
-          expect(getAllByRole("group").length).toBe(2);
           expect(getAllByRole("presentation").length).toBe(2);
           expect(getAllByRole("option").length).toBe(5);
           expect(getByText("Colores")).toBeTruthy();
           expect(getByText("Ríos españoles")).toBeTruthy();
-          _context41.next = 16;
+          _context41.next = 15;
           return _userEvent["default"].click(getAllByRole("option")[4]);
-        case 16:
+        case 15:
           expect(onChange).toHaveBeenCalledWith({
             value: "ebro"
           });
-          expect(queryByRole("listbox")).toBeFalsy();
+          expect(queryByRole("list")).toBeFalsy();
           expect(getByText("Ebro")).toBeTruthy();
           expect(searchInput.value).toBe("");
-          _context41.next = 22;
+          _context41.next = 21;
           return _userEvent["default"].click(select);
-        case 22:
+        case 21:
           expect(getAllByRole("option")[17].getAttribute("aria-selected")).toBe("true");
-        case 23:
+        case 22:
         case "end":
           return _context41.stop();
       }
@@ -1941,7 +1936,7 @@ describe("Select component tests", function () {
           _context42.next = 6;
           return _userEvent["default"].click(select);
         case 6:
-          expect(getByRole("listbox")).toBeTruthy();
+          expect(getByRole("list")).toBeTruthy();
           _context42.next = 9;
           return _userEvent["default"].type(searchInput, "very long string");
         case 9:
@@ -1970,14 +1965,13 @@ describe("Select component tests", function () {
           _context43.next = 6;
           return _userEvent["default"].click(select);
         case 6:
-          expect(getByRole("listbox").getAttribute("aria-multiselectable")).toBe("true");
-          _context43.next = 9;
+          _context43.next = 8;
           return _userEvent["default"].click(getAllByRole("option")[10]);
-        case 9:
+        case 8:
           expect(onChange).toHaveBeenCalledWith({
             value: ["bilbao"]
           });
-          expect(queryByRole("listbox")).toBeTruthy();
+          expect(queryByRole("list")).toBeTruthy();
           expect(getAllByText("Bilbao").length).toBe(2);
           _react2.fireEvent.keyDown(select, {
             key: "ArrowUp",
@@ -2000,12 +1994,10 @@ describe("Select component tests", function () {
           expect(onChange).toHaveBeenCalledWith({
             value: ["bilbao", "guadalquivir"]
           });
-          expect(queryByRole("listbox")).toBeTruthy();
+          expect(queryByRole("list")).toBeTruthy();
           expect(getByText("Bilbao, Guadalquivir")).toBeTruthy();
-          expect(getAllByRole("option")[10].getAttribute("aria-selected")).toBe("true");
-          expect(getAllByRole("option")[16].getAttribute("aria-selected")).toBe("true");
           expect(submitInput.value).toBe("bilbao,guadalquivir");
-        case 21:
+        case 18:
         case "end":
           return _context43.stop();
       }
@@ -2042,7 +2034,7 @@ describe("Select component tests", function () {
           expect(onChange).toHaveBeenCalledWith({
             value: ["blanco", "oviedo", "duero", "ebro"]
           });
-          expect(queryByRole("listbox")).toBeTruthy();
+          expect(queryByRole("list")).toBeTruthy();
           expect(getByText("Blanco, Oviedo, Duero, Ebro")).toBeTruthy();
           expect(getByText("4", {
             exact: true
@@ -2050,7 +2042,7 @@ describe("Select component tests", function () {
           _context44.next = 19;
           return _userEvent["default"].click(getByTitle("Clear selection"));
         case 19:
-          expect(queryByRole("listbox")).toBeTruthy();
+          expect(queryByRole("list")).toBeTruthy();
           expect(queryByText("Blanco, Oviedo, Duero, Ebro")).toBeFalsy();
           expect(queryByText("4")).toBeFalsy();
           expect(queryByTitle("Clear selection")).toBeFalsy();
@@ -2080,15 +2072,14 @@ describe("Select component tests", function () {
           return _userEvent["default"].click(select);
         case 6:
           expect(getAllByText("Choose an option").length).toBe(1);
-          expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("false");
-          _context45.next = 10;
+          _context45.next = 9;
           return _userEvent["default"].click(getAllByRole("option")[0]);
-        case 10:
+        case 9:
           expect(onChange).toHaveBeenCalledWith({
             value: ["azul"]
           });
           expect(getAllByText("Azul").length).toBe(2);
-        case 12:
+        case 11:
         case "end":
           return _context45.stop();
       }

package/sidenav/Sidenav.accessibility.test.d.ts

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

package/sidenav/Sidenav.accessibility.test.js

@@ -5,8 +5,8 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _jestAxe = require("jest-axe");
-var _Sidenav = _interopRequireDefault(require("./Sidenav.tsx"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Sidenav = _interopRequireDefault(require("./Sidenav"));
 var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
   version: "1.1",
   x: "0px",
@@ -46,7 +46,7 @@ describe("Sidenav component accessibility tests", function () {
             href: "#"
           }, "Lorem ipsum"))))), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();

package/sidenav/Sidenav.js

@@ -22,7 +22,7 @@ var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 var _excluded = ["href", "newWindow", "selected", "icon", "onClick", "tabIndex", "children"];
 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 && Object.prototype.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; }
+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; }
 var DxcSidenav = function DxcSidenav(_ref) {
   var title = _ref.title,
     children = _ref.children;

package/sidenav/Sidenav.stories.tsx

@@ -4,7 +4,7 @@ import DxcSelect from "../select/Select";
 import DxcInset from "../inset/Inset";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import { userEvent, within } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/test";
 import { HalstackProvider } from "../HalstackContext";
 
 export default {

package/sidenav/Sidenav.test.d.ts

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

package/sidenav/Sidenav.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _Sidenav = _interopRequireDefault(require("./Sidenav.tsx"));
+var _Sidenav = _interopRequireDefault(require("./Sidenav"));
 describe("Sidenav component tests", function () {
   test("Sidenav renders anchors and Section correctly", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Sidenav["default"], null, /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Section, null, /*#__PURE__*/_react["default"].createElement("p", null, "nav-content-test"), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {

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

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

package/slider/Slider.accessibility.test.js

@@ -7,8 +7,8 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _jestAxe = require("jest-axe");
-var _Slider = _interopRequireDefault(require("./Slider.tsx"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Slider = _interopRequireDefault(require("./Slider"));
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {
@@ -27,7 +27,7 @@ global.ResizeObserver = /*#__PURE__*/function () {
   function ResizeObserver() {
     (0, _classCallCheck2["default"])(this, ResizeObserver);
   }
-  (0, _createClass2["default"])(ResizeObserver, [{
+  return (0, _createClass2["default"])(ResizeObserver, [{
     key: "observe",
     value: function observe() {}
   }, {
@@ -37,7 +37,6 @@ global.ResizeObserver = /*#__PURE__*/function () {
     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() {
@@ -60,7 +59,7 @@ describe("Slider component accessibility tests", function () {
             marks: true
           })), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();
@@ -91,7 +90,7 @@ describe("Slider component accessibility tests", function () {
             disabled: true
           })), container = _render2.container;
           _context2.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context2.sent;
           expect(results).toHaveNoViolations();

package/slider/Slider.js

@@ -15,10 +15,9 @@ var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
 var _variables = require("../common/variables");
 var _utils = require("../common/utils");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
-var _uuid = require("uuid");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 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" != _typeof3(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 && Object.prototype.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; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(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; }
 var DxcSlider = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var _navigator;
   var _ref$label = _ref.label,
@@ -49,17 +48,15 @@ var DxcSlider = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     margin = _ref.margin,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "fillParent" : _ref$size;
-  var _useState = (0, _react.useState)("label-".concat((0, _uuid.v4)())),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-    labelId = _useState2[0];
-  var _useState3 = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0),
+  var labelId = "label-".concat((0, _react.useId)());
+  var _useState = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    innerValue = _useState2[0],
+    setInnerValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    innerValue = _useState4[0],
-    setInnerValue = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    dragging = _useState6[0],
-    setDragging = _useState6[1];
+    dragging = _useState4[0],
+    setDragging = _useState4[1];
   var colorsTheme = (0, _useTheme["default"])();
   var isFirefox = ((_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.userAgent.indexOf("Firefox")) !== -1;
   var minLabel = (0, _react.useMemo)(function () {
@@ -78,7 +75,8 @@ var DxcSlider = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
         ticks.push( /*#__PURE__*/_react["default"].createElement(TickMark, {
           disabled: disabled,
           stepPosition: step * index / range,
-          stepValue: (value !== null && value !== void 0 ? value : innerValue) / maxValue
+          stepValue: (value !== null && value !== void 0 ? value : innerValue) / maxValue,
+          key: "tickmark-".concat(index, "-").concat(labelId)
         }));
         index++;
       }

package/slider/Slider.stories.tsx

@@ -0,0 +1,180 @@
+import React from "react";
+import DxcSlider from "./Slider";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { HalstackProvider } from "../HalstackContext";
+
+export default {
+  title: "Slider",
+  component: DxcSlider,
+};
+
+const labelFormat = (value) => `${value}E100000000000000000000000`;
+
+const opinionatedTheme = {
+  slider: {
+    baseColor: "#0067b3",
+    fontColor: "#000000",
+    totalLineColor: "#e6e6e6",
+  },
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="States" theme="light" level={2} />
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Active" theme="light" level={4} />
+      <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused" theme="light" level={4} />
+      <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <DxcSlider label="Slider" helperText="Help message" disabled showLimitsValues />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled discrete slider with input" theme="light" level={4} />
+      <DxcSlider
+        label="Slider"
+        helperText="Help message"
+        disabled
+        defaultValue={40}
+        minValue={0}
+        maxValue={50}
+        showLimitsValues
+        showInput
+        marks
+        step={10}
+      />
+    </ExampleContainer>
+    <Title title="Variants" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Continuous slider" theme="light" level={4} />
+      <DxcSlider defaultValue={65} label="Slider" helperText="Help message" showLimitsValues />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Discrete slider" theme="light" level={4} />
+      <DxcSlider defaultValue={20} label="Slider" helperText="Help message" showLimitsValues marks step={5} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Discrete slider with input" theme="light" level={4} />
+      <DxcSlider
+        defaultValue={20}
+        minValue={0}
+        maxValue={50}
+        label="Slider"
+        helperText="Help message"
+        showLimitsValues
+        showInput
+        marks
+        step={10}
+      />
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall" theme="light" level={4} />
+      <DxcSlider label="Xxsmall" margin="xxsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall" theme="light" level={4} />
+      <DxcSlider label="Xsmall" margin="xsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcSlider label="Small" margin="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcSlider label="Medium" margin="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcSlider label="Large" margin="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge" theme="light" level={4} />
+      <DxcSlider label="Xlarge" margin="xlarge" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge" theme="light" level={4} />
+      <DxcSlider label="Xxlarge" margin="xxlarge" />
+    </ExampleContainer>
+    <Title title="Sizes" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcSlider label="Medium" size="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcSlider label="Large" size="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="FillParent" theme="light" level={4} />
+      <DxcSlider label="FillParent" size="fillParent" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large limit values labels" theme="light" level={4} />
+      <DxcSlider
+        label="Slider"
+        helperText="Help message"
+        showLimitsValues
+        labelFormatCallback={labelFormat}
+        size="large"
+      />
+    </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Active" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled discrete slider with input" theme="light" level={4} />{" "}
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcSlider
+          label="Slider"
+          helperText="Help message"
+          disabled
+          defaultValue={40}
+          minValue={0}
+          maxValue={50}
+          showLimitsValues
+          showInput
+          marks
+          step={10}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Continuous slider" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcSlider defaultValue={65} label="Slider" helperText="Help message" showLimitsValues />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Discrete slider" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcSlider defaultValue={20} label="Slider" helperText="Help message" showLimitsValues marks step={5} />
+      </HalstackProvider>
+    </ExampleContainer>
+  </>
+);

package/slider/Slider.test.d.ts

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