@dxc-technology/halstack-react 0.0.0-c9b5c13 → 0.0.0-ca55cbe

package/slider/Slider.test.js

@@ -6,19 +6,26 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Slider = _interopRequireDefault(require("./Slider"));
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _Slider = _interopRequireDefault(require("./Slider.tsx"));
 
 describe("Slider component tests", function () {
-  test("Slider renders with correct text", function () {
+  test("Slider renders with correct text and label id", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
+      label: "label",
       minValue: 0,
       maxValue: 100,
       showLimitsValues: true
     })),
-        getByText = _render.getByText;
+        getByText = _render.getByText,
+        getByRole = _render.getByRole;
 
     expect(getByText("0")).toBeTruthy();
     expect(getByText("100")).toBeTruthy();
+    var sliderId = getByText("label").getAttribute("id");
+    expect(getByRole("slider").getAttribute("aria-labelledby")).toBe(sliderId);
+    expect(getByRole("slider").getAttribute("aria-orientation")).toBe("horizontal");
   });
   test("Slider renders with correct initial value when it is uncontrolled", function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
@@ -35,10 +42,37 @@ describe("Slider component tests", function () {
     expect(slider.getAttribute("aria-valuenow")).toBe("30");
     expect(input.value).toBe("30");
   });
+  test("Slider correct limit values", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
+      defaultValue: 125,
+      minValue: 30,
+      maxValue: 125,
+      showLimitsValues: true
+    })),
+        getByRole = _render3.getByRole,
+        getByText = _render3.getByText;
+
+    var slider = getByRole("slider");
+    expect(slider.getAttribute("aria-valuemin")).toBe("30");
+    expect(slider.getAttribute("aria-valuemax")).toBe("125");
+
+    _userEvent["default"].tab();
+
+    _react2.fireEvent.keyDown(slider, {
+      key: "ArrowRight",
+      code: "ArrowRight",
+      keyCode: 39,
+      charCode: 39
+    });
+
+    expect(slider.getAttribute("aria-valuenow")).toBe("125");
+    expect(getByText("30")).toBeTruthy();
+    expect(getByText("125")).toBeTruthy();
+  });
   test("Calls correct function onChange in controlled slider", function () {
     var onChange = jest.fn();
 
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
       minValue: 0,
       maxValue: 100,
       onChange: onChange,
@@ -46,7 +80,7 @@ describe("Slider component tests", function () {
       value: 13,
       showInput: true
     })),
-        getByRole = _render3.getByRole;
+        getByRole = _render4.getByRole;
 
     expect(getByRole("slider").getAttribute("aria-valuenow")).toBe("13");
     expect(getByRole("textbox").value).toBe("13");
@@ -64,14 +98,14 @@ describe("Slider component tests", function () {
   test("Calls correct function onChange in uncontrolled slider", function () {
     var onChange = jest.fn();
 
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
       minValue: 0,
       maxValue: 100,
       onChange: onChange,
       showLimitsValues: true,
       showInput: true
     })),
-        getByRole = _render4.getByRole;
+        getByRole = _render5.getByRole;
 
     (0, _react2.act)(function () {
       _react2.fireEvent.change(getByRole("textbox"), {
@@ -84,10 +118,10 @@ describe("Slider component tests", function () {
     expect(getByRole("slider").getAttribute("aria-valuenow")).toBe("25");
     expect(getByRole("textbox").value).toBe("25");
   });
-  test("Disabled slider have disabled input", function () {
+  test("Disabled slider have disabled input and slider", function () {
     var onChange = jest.fn();
 
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
       minValue: 0,
       maxValue: 100,
       onChange: onChange,
@@ -96,7 +130,7 @@ describe("Slider component tests", function () {
       showInput: true,
       value: 13
     })),
-        getByRole = _render5.getByRole;
+        getByRole = _render6.getByRole;
 
     (0, _react2.act)(function () {
       _react2.fireEvent.change(getByRole("textbox"), {
@@ -107,33 +141,64 @@ describe("Slider component tests", function () {
     });
     expect(getByRole("textbox").hasAttribute("disabled")).toBeTruthy();
     expect(getByRole("textbox").value).toBe("13");
+    expect(getByRole("slider").hasAttribute("disabled")).toBeTruthy();
   });
-  test("Calls correct function onDragEnd", function () {
+  test("Calls correct function onDragEnd when it is uncontrolled", function () {
     var onDragEnd = jest.fn();
 
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
       minValue: 0,
-      maxValue: 100,
-      showLimitsValues: true,
-      showInput: true,
+      maxValue: 150,
       onDragEnd: onDragEnd,
-      value: 25
+      showInput: true
     })),
-        getByRole = _render6.getByRole;
+        getByRole = _render7.getByRole;
 
+    var slider = getByRole("slider");
+    (0, _react2.act)(function () {
+      _react2.fireEvent.mouseDown(slider);
+    });
     (0, _react2.act)(function () {
-      _react2.fireEvent.mouseDown(getByRole("slider"));
+      _react2.fireEvent.mouseUp(slider, {
+        target: {
+          value: 120
+        }
+      });
+    });
+    expect(onDragEnd).toHaveBeenCalledWith("120");
+  });
+  test("Calls correct function onDragEnd when it is controlled", function () {
+    var onDragEnd = jest.fn();
 
-      _react2.fireEvent.mouseUp(getByRole("slider"));
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
+      minValue: 0,
+      maxValue: 150,
+      value: 50,
+      onDragEnd: onDragEnd,
+      showInput: true
+    })),
+        getByRole = _render8.getByRole;
+
+    var slider = getByRole("slider");
+    (0, _react2.act)(function () {
+      _react2.fireEvent.mouseDown(slider);
     });
-    expect(onDragEnd).toHaveBeenCalled();
+    (0, _react2.act)(function () {
+      _react2.fireEvent.mouseUp(slider, {
+        target: {
+          value: 120
+        }
+      });
+    });
+    expect(onDragEnd).toHaveBeenCalledWith("120");
+    expect(slider.getAttribute("aria-valuenow")).toBe("50");
   });
   test("Calls correct function labelFormatCallback", function () {
     var labelFormatCallback = jest.fn(function (x) {
       return "".concat(x, "$");
     });
 
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
       minValue: 0,
       maxValue: 100,
       showLimitsValues: true,
@@ -141,10 +206,45 @@ describe("Slider component tests", function () {
       value: 25,
       labelFormatCallback: labelFormatCallback
     })),
-        getByText = _render7.getByText;
+        getByText = _render9.getByText;
 
     expect(getByText("0$")).toBeTruthy();
     expect(getByText("100$")).toBeTruthy();
     expect(labelFormatCallback).toHaveBeenCalledTimes(2);
   });
+  test("Change value correctly to 0 from external function", function () {
+    var onChange = jest.fn();
+
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
+      minValue: 0,
+      maxValue: 100,
+      onChange: onChange,
+      showLimitsValues: true,
+      value: 13,
+      showInput: true
+    })),
+        rerender = _render10.rerender,
+        getByRole = _render10.getByRole;
+
+    var slider = getByRole("slider");
+
+    _userEvent["default"].tab();
+
+    _react2.fireEvent.keyDown(slider, {
+      key: "ArrowRight",
+      code: "ArrowRight",
+      keyCode: 39,
+      charCode: 39
+    });
+
+    rerender( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
+      minValue: 0,
+      maxValue: 100,
+      onChange: onChange,
+      showLimitsValues: true,
+      value: 0,
+      showInput: true
+    }));
+    expect(slider.getAttribute("aria-valuenow")).toBe("0");
+  });
 });

package/slider/types.d.ts

@@ -79,4 +79,8 @@ declare type Props = {
      */
     size?: "medium" | "large" | "fillParent";
 };
+/**
+ * Reference to the component.
+ */
+export declare type RefType = HTMLDivElement;
 export default Props;

package/spinner/Spinner.js

@@ -17,7 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
@@ -46,11 +46,8 @@ var DxcSpinner = function DxcSpinner(_ref) {
     margin: margin,
     mode: mode
   }, /*#__PURE__*/_react["default"].createElement(SpinnerContainer, {
-    backgroundType: backgroundType,
-    mode: mode
-  }, mode === "overlay" && /*#__PURE__*/_react["default"].createElement(BackOverlay, null), /*#__PURE__*/_react["default"].createElement(BackgroundSpinner, {
     mode: mode
-  }, mode !== "small" && /*#__PURE__*/_react["default"].createElement(SVGBackground, {
+  }, mode === "overlay" && /*#__PURE__*/_react["default"].createElement(BackOverlay, null), /*#__PURE__*/_react["default"].createElement(BackgroundSpinner, null, mode !== "small" && /*#__PURE__*/_react["default"].createElement(SVGBackground, {
     viewBox: "0 0 140 140"
   }, /*#__PURE__*/_react["default"].createElement(CircleBackground, {
     cx: "70",
@@ -65,8 +62,7 @@ var DxcSpinner = function DxcSpinner(_ref) {
     r: "6",
     mode: mode
   }))), value >= 0 && value <= 100 ? /*#__PURE__*/_react["default"].createElement(Spinner, {
-    role: "progressbar",
-    mode: mode
+    role: "progressbar"
   }, mode !== "small" && /*#__PURE__*/_react["default"].createElement(SVGSpinner, {
     viewBox: "0 0 140 140",
     isDeterminated: true
@@ -90,8 +86,7 @@ var DxcSpinner = function DxcSpinner(_ref) {
     isDeterminated: true,
     value: value
   }))) : /*#__PURE__*/_react["default"].createElement(Spinner, {
-    role: "progressbar",
-    mode: mode
+    role: "progressbar"
   }, mode !== "small" && /*#__PURE__*/_react["default"].createElement(SVGSpinner, {
     viewBox: "0 0 140 140",
     isDeterminated: false
@@ -101,7 +96,8 @@ var DxcSpinner = function DxcSpinner(_ref) {
     r: "65",
     backgroundType: backgroundType,
     mode: mode,
-    isDeterminated: false
+    isDeterminated: false,
+    value: value
   })), mode === "small" && /*#__PURE__*/_react["default"].createElement(SVGSpinner, {
     viewBox: "0 0 16 16",
     isDeterminated: false
@@ -111,26 +107,24 @@ var DxcSpinner = function DxcSpinner(_ref) {
     r: "6",
     backgroundType: backgroundType,
     mode: mode,
-    isDeterminated: false
-  }))), mode !== "small" && /*#__PURE__*/_react["default"].createElement(LabelsContainer, {
-    label: label,
-    value: value,
-    showValue: showValue
-  }, /*#__PURE__*/_react["default"].createElement(SpinnerLabel, {
+    isDeterminated: false,
+    value: value
+  }))), mode !== "small" && /*#__PURE__*/_react["default"].createElement(LabelsContainer, null, /*#__PURE__*/_react["default"].createElement(SpinnerLabel, {
     backgroundType: backgroundType,
     mode: mode
   }, label), (value || value === 0) && showValue && /*#__PURE__*/_react["default"].createElement(SpinnerProgress, {
+    value: value,
     backgroundType: backgroundType,
     mode: mode,
     showValue: showValue
   }, value, "%")))));
 };
 
-var determinatedValue = function determinatedValue(props, strokeDashArray) {
+var determinatedValue = function determinatedValue(value, strokeDashArray) {
   var val = 0;
 
-  if (props.value >= 0 && props.value <= 100) {
-    val = strokeDashArray * (1 - props.value / 100);
+  if (value >= 0 && value <= 100) {
+    val = strokeDashArray * (1 - value / 100);
   }
 
   return val;
@@ -178,7 +172,7 @@ var BackOverlay = _styledComponents["default"].div(_templateObject3 || (_templat
   return "".concat(props.theme.overlayOpacity);
 });
 
-var BackgroundSpinner = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  height: inherit;\n  width: inherit;\n  position: absolute;\n  z-index: 1;\n"])));
+var BackgroundSpinner = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  height: inherit;\n  width: inherit;\n  position: absolute;\n"])));
 
 var SVGBackground = _styledComponents["default"].svg(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  height: inherit;\n  width: inherit;\n"])));
 
@@ -190,7 +184,7 @@ var CircleBackground = _styledComponents["default"].circle(_templateObject6 || (
   return props.mode !== "small" ? "8.5px" : "2px";
 });
 
-var Spinner = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  height: inherit;\n  width: inherit;\n  position: relative;\n  z-index: 2;\n"])));
+var Spinner = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  height: inherit;\n  width: inherit;\n  position: relative;\n"])));
 
 var SVGSpinner = _styledComponents["default"].svg(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  height: inherit;\n  width: inherit;\n  transform: rotate(-90deg);\n  top: 0;\n  left: 0;\n  transform-origin: center;\n  overflow: visible;\n  animation: ", ";\n"])), function (props) {
   return !props.isDeterminated ? "1.4s linear infinite both spinner-svg" : "";
@@ -207,7 +201,7 @@ var CircleSpinner = _styledComponents["default"].circle(_templateObject9 || (_te
 }, function (props) {
   return props.mode !== "small" ? "8.5px" : "2px";
 }, function (props) {
-  return props.isDeterminated ? props.mode !== "small" ? determinatedValue(props, 409) : determinatedValue(props, 38) : "";
+  return props.isDeterminated ? props.mode !== "small" ? determinatedValue(props.value, 409) : determinatedValue(props.value, 38) : "";
 });
 
 var LabelsContainer = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  display: block;\n  margin: 0 auto;\n  position: absolute;\n  text-align: center;\n  width: 110px;\n"])));
@@ -229,7 +223,7 @@ var SpinnerLabel = _styledComponents["default"].p(_templateObject11 || (_templat
 });
 
 var SpinnerProgress = _styledComponents["default"].p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0;\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: ", ";\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  color: ", ";\n  text-align: ", ";\n  letter-spacing: ", ";\n"])), function (props) {
-  return props.value !== "" && props.showValue === true && "block" || "none";
+  return props.value && props.showValue === true && "block" || "none";
 }, function (props) {
   return props.mode === "overlay" ? props.theme.overlayProgressValueFontFamily : props.theme.progressValueFontFamily;
 }, function (props) {

package/spinner/Spinner.stories.jsx

@@ -2,67 +2,84 @@ import React from "react";
 import DxcSpinner from "./Spinner";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Spinner",
   component: DxcSpinner,
 };
 
+const opinionatedTheme = {
+  spinner: {
+    accentColor: "#5f249f",
+    baseColor: "#ffffff",
+    fontColor: "#000000",
+    overlayColor: "#a46ede",
+    overlayFontColor: "#ffffff",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
       <Title title="With label" theme="light" level={4} />
-      <DxcSpinner label="Label" value="50"></DxcSpinner>
+      <DxcSpinner label="Label" value={50}></DxcSpinner>
       <Title title="With value label" theme="light" level={4} />
-      <DxcSpinner value="50" showValue></DxcSpinner>
+      <DxcSpinner value={50} showValue></DxcSpinner>
       <Title title="With label and value label" theme="light" level={4} />
-      <DxcSpinner label="Label" value="50" showValue></DxcSpinner>
+      <DxcSpinner label="Label" value={50} showValue></DxcSpinner>
       <Title title="With 100%" theme="light" level={4} />
-      <DxcSpinner label="Label" value="100" showValue></DxcSpinner>
+      <DxcSpinner label="Label" value={100} showValue></DxcSpinner>
     </ExampleContainer>
     <Title title="Modes" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Mode large" theme="light" level={4} />
-      <DxcSpinner mode="large" value="50"></DxcSpinner>
+      <DxcSpinner mode="large" value={50}></DxcSpinner>
       <Title title="Mode small" theme="light" level={4} />
-      <DxcSpinner mode="small" value="50"></DxcSpinner>
+      <DxcSpinner mode="small" value={50}></DxcSpinner>
       <Title title="Mode small with 100%" theme="light" level={4} />
-      <DxcSpinner mode="small" value="100" showValue></DxcSpinner>
+      <DxcSpinner mode="small" value={100} showValue></DxcSpinner>
     </ExampleContainer>
     <Title title="Margins with large mode" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />
-      <DxcSpinner margin="xxsmall" value="75"></DxcSpinner>
+      <DxcSpinner margin="xxsmall" value={75}></DxcSpinner>
       <Title title="Xsmall margin" theme="light" level={4} />
-      <DxcSpinner margin="xsmall" value="75"></DxcSpinner>
+      <DxcSpinner margin="xsmall" value={75}></DxcSpinner>
       <Title title="Small margin" theme="light" level={4} />
-      <DxcSpinner margin="small" value="75"></DxcSpinner>
+      <DxcSpinner margin="small" value={75}></DxcSpinner>
       <Title title="Medium margin" theme="light" level={4} />
-      <DxcSpinner margin="medium" value="75"></DxcSpinner>
+      <DxcSpinner margin="medium" value={75}></DxcSpinner>
       <Title title="Large margin" theme="light" level={4} />
-      <DxcSpinner margin="large" value="75"></DxcSpinner>
+      <DxcSpinner margin="large" value={75}></DxcSpinner>
       <Title title="Xlarge margin" theme="light" level={4} />
-      <DxcSpinner margin="xlarge" value="75"></DxcSpinner>
+      <DxcSpinner margin="xlarge" value={75}></DxcSpinner>
       <Title title="Xxlarge margin" theme="light" level={4} />
-      <DxcSpinner margin="xxlarge" value="75"></DxcSpinner>
+      <DxcSpinner margin="xxlarge" value={75}></DxcSpinner>
     </ExampleContainer>
     <Title title="Margins with small mode" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />
-      <DxcSpinner margin="xxsmall" mode="small" value="75"></DxcSpinner>
+      <DxcSpinner margin="xxsmall" mode="small" value={75}></DxcSpinner>
       <Title title="Xsmall margin" theme="light" level={4} />
-      <DxcSpinner margin="xsmall" mode="small" value="75"></DxcSpinner>
+      <DxcSpinner margin="xsmall" mode="small" value={75}></DxcSpinner>
       <Title title="Small margin" theme="light" level={4} />
-      <DxcSpinner margin="small" mode="small" value="75"></DxcSpinner>
+      <DxcSpinner margin="small" mode="small" value={75}></DxcSpinner>
       <Title title="Medium margin" theme="light" level={4} />
-      <DxcSpinner margin="medium" mode="small" value="75"></DxcSpinner>
+      <DxcSpinner margin="medium" mode="small" value={75}></DxcSpinner>
       <Title title="Large margin" theme="light" level={4} />
-      <DxcSpinner margin="large" mode="small" value="75"></DxcSpinner>
+      <DxcSpinner margin="large" mode="small" value={75}></DxcSpinner>
       <Title title="Xlarge margin" theme="light" level={4} />
-      <DxcSpinner margin="xlarge" mode="small" value="75"></DxcSpinner>
+      <DxcSpinner margin="xlarge" mode="small" value={75}></DxcSpinner>
       <Title title="Xxlarge margin" theme="light" level={4} />
-      <DxcSpinner margin="xxlarge" mode="small" value="75"></DxcSpinner>
-      <hr />
+      <DxcSpinner margin="xxlarge" mode="small" value={75}></DxcSpinner>
+    </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="With label and value label" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcSpinner label="Label" value={50} showValue></DxcSpinner>
+      </HalstackProvider>
     </ExampleContainer>
   </>
 );
@@ -70,34 +87,43 @@ export const Chromatic = () => (
 export const SpinnerOverlay = () => (
   <ExampleContainer>
     <Title title="Mode overlay" theme="light" level={4} />
-    <DxcSpinner mode="overlay" value="25"></DxcSpinner>
+    <DxcSpinner mode="overlay" value={25}></DxcSpinner>
   </ExampleContainer>
 );
 
 export const SpinnerOverlayWith100 = () => (
   <ExampleContainer>
     <Title title="Mode overlay" theme="light" level={4} />
-    <DxcSpinner mode="overlay" value="100"></DxcSpinner>
+    <DxcSpinner mode="overlay" value={100}></DxcSpinner>
   </ExampleContainer>
 );
 
 export const SpinnerOverlayWithLabel = () => (
   <ExampleContainer>
     <Title title="Mode overlay" theme="light" level={4} />
-    <DxcSpinner mode="overlay" value="50" label="Label"></DxcSpinner>
+    <DxcSpinner mode="overlay" value={50} label="Label"></DxcSpinner>
   </ExampleContainer>
 );
 
 export const SpinnerOverlayWithValue = () => (
   <ExampleContainer>
     <Title title="Mode overlay" theme="light" level={4} />
-    <DxcSpinner mode="overlay" value="50" showValue></DxcSpinner>
+    <DxcSpinner mode="overlay" value={50} showValue></DxcSpinner>
   </ExampleContainer>
 );
 
 export const SpinnerOverlayWithValueAndLabel = () => (
   <ExampleContainer>
     <Title title="Mode overlay" theme="light" level={4} />
-    <DxcSpinner mode="overlay" label="Label" value="50" showValue></DxcSpinner>
+    <DxcSpinner mode="overlay" label="Label" value={50} showValue></DxcSpinner>
+  </ExampleContainer>
+);
+
+export const SpinnerOverlayWithValueAndLabelOpinionated = () => (
+  <ExampleContainer>
+    <HalstackProvider theme={opinionatedTheme}>
+      <Title title="Mode overlay" theme="light" level={4} />
+      <DxcSpinner mode="overlay" label="Label" value={50} showValue></DxcSpinner>
+    </HalstackProvider>
   </ExampleContainer>
 );

package/spinner/Spinner.test.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Spinner = _interopRequireDefault(require("./Spinner"));
+var _Spinner = _interopRequireDefault(require("./Spinner.tsx"));
 
 describe("Spinner component tests", function () {
   test("Spinner renders with correct label", function () {

package/switch/Switch.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import SwitchPropsType from "./types";
-declare const DxcSwitch: ({ defaultChecked, checked, value, label, labelPosition, name, disabled, optional, onChange, margin, size, tabIndex, }: SwitchPropsType) => JSX.Element;
+declare const DxcSwitch: React.ForwardRefExoticComponent<SwitchPropsType & React.RefAttributes<HTMLDivElement>>;
 export default DxcSwitch;