@dxc-technology/halstack-react 0.0.0-74ba970 → 0.0.0-752ca0a

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

package/switch/Switch.js

@@ -21,9 +21,9 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _uuid = require("uuid");
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
-var _utils = require("../common/utils.js");
+var _utils = require("../common/utils");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
@@ -37,7 +37,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var DxcSwitch = function DxcSwitch(_ref) {
+var DxcSwitch = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var defaultChecked = _ref.defaultChecked,
       checked = _ref.checked,
       value = _ref.value,
@@ -102,7 +102,8 @@ var DxcSwitch = function DxcSwitch(_ref) {
     size: size,
     onKeyDown: handleOnKeyDown,
     disabled: disabled,
-    onClick: !disabled ? handlerSwitchChange : undefined
+    onClick: !disabled ? handlerSwitchChange : undefined,
+    ref: ref
   }, labelPosition === "before" && label && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
     id: labelId,
     labelPosition: labelPosition,
@@ -133,7 +134,7 @@ var DxcSwitch = function DxcSwitch(_ref) {
     backgroundType: backgroundType,
     label: label
   }, optional && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, translatedLabels.formFields.optionalLabel), " ", label)));
-};
+});
 
 var sizes = {
   small: "60px",
@@ -233,7 +234,7 @@ var SwitchBase = _styledComponents["default"].label(_templateObject3 || (_templa
 
 var ValueInput = _styledComponents["default"].input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: none;\n"])));
 
-var SwitchTrack = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  border-radius: 15px;\n  width: ", ";\n  height: ", ";\n  position: relative;\n  cursor: ", ";\n\n  &:focus-visible {\n    outline: none;\n    ::before {\n      outline: ", ";\n      outline-offset: 6px;\n    }\n  }\n\n  /* Thumb element */\n  ::before {\n    content: \"\";\n    transform: initial;\n    position: absolute;\n    width: ", ";\n    height: ", ";\n    border-radius: 50%;\n    z-index: 1;\n    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);\n    bottom: -6px;\n    left: -4px;\n    transform: translateX(0px);\n    background-color: ", ";\n  }\n\n  /* Unchecked */\n  background-color: ", ";\n\n  /* Checked */\n  &[aria-checked=\"true\"] {\n    background-color: ", ";\n    ::before {\n      transform: translateX(", ");\n      background-color: ", ";\n    }\n  }\n"])), function (props) {
+var SwitchTrack = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  border-radius: 15px;\n  width: ", ";\n  height: ", ";\n  position: relative;\n  cursor: ", ";\n\n  &:focus-visible {\n    outline: none;\n    ::before {\n      outline: ", ";\n      outline-offset: 6px;\n    }\n  }\n\n  /* Thumb element */\n  ::before {\n    content: \"\";\n    transform: initial;\n    position: absolute;\n    width: ", ";\n    height: ", ";\n    border-radius: 50%;\n    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);\n    bottom: -6px;\n    left: -4px;\n    transform: translateX(0px);\n    background-color: ", ";\n  }\n\n  /* Unchecked */\n  background-color: ", ";\n\n  /* Checked */\n  &[aria-checked=\"true\"] {\n    background-color: ", ";\n    ::before {\n      transform: translateX(", ");\n      background-color: ", ";\n    }\n  }\n"])), function (props) {
   return props.theme.trackWidth;
 }, function (props) {
   return props.theme.trackHeight;

package/switch/Switch.stories.tsx

@@ -4,12 +4,20 @@ import { BackgroundColorProvider } from "../BackgroundColorContext";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DarkContainer from "../../.storybook/components/DarkSection";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Switch",
   component: DxcSwitch,
 };
 
+const opinionatedTheme = {
+  switch: {
+    checkedBaseColor: "#5f249f",
+    fontColor: "#000000",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
@@ -134,5 +142,30 @@ export const Chromatic = () => (
       <Title title="FitContent size" theme="light" level={4} />
       <DxcSwitch label="FitContent" size="fitContent" />
     </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Checked" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcSwitch label="Switch" defaultChecked />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Default" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcSwitch label="Switch" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcSwitch label="Switch" disabled />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled checked" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcSwitch label="Switch" disabled defaultChecked />
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );

package/switch/Switch.test.js

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

package/switch/types.d.ts

@@ -1,11 +1,11 @@
-export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-export declare type Margin = {
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-export declare type SwitchPropsType = {
+declare type Props = {
     /**
      * Initial state of the switch, only when it is uncontrolled.
      */
@@ -59,3 +59,8 @@ export declare type SwitchPropsType = {
      */
     tabIndex?: number;
 };
+/**
+ * Reference to the component.
+ */
+export declare type RefType = HTMLDivElement;
+export default Props;

package/table/Table.js

@@ -17,9 +17,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
-var _utils = require("../common/utils.js");
+var _utils = require("../common/utils");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
@@ -66,7 +66,7 @@ var DxcTableContainer = _styledComponents["default"].div(_templateObject || (_te
   return props.theme.scrollBarTrackColor;
 });
 
-var DxcTableContent = _styledComponents["default"].table(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  border-collapse: collapse;\n  width: 100%;\n\n  & tr {\n    border-bottom: ", ";\n  }\n  & td {\n    background-color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: ", ";\n    font-weight: ", ";\n    color: ", ";\n    text-transform: ", ";\n    text-align: ", ";\n    line-height: ", ";\n    padding: ", ";\n  }\n  & th {\n    background-color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: ", ";\n    font-weight: ", ";\n    color: ", ";\n    text-transform: ", ";\n    text-align: ", ";\n    line-height: ", ";\n    padding: ", ";\n  }\n  & th:first-child {\n    border-top-left-radius: ", ";\n  }\n  & th:last-child {\n    border-top-right-radius: ", ";\n  }\n"])), function (props) {
+var DxcTableContent = _styledComponents["default"].table(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  border-collapse: collapse;\n  width: 100%;\n\n  & tr {\n    border-bottom: ", ";\n    height: 60px;\n  }\n  & td {\n    background-color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: ", ";\n    font-weight: ", ";\n    color: ", ";\n    text-transform: ", ";\n    text-align: ", ";\n    line-height: ", ";\n    padding: ", ";\n  }\n  & th {\n    background-color: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    font-style: ", ";\n    font-weight: ", ";\n    color: ", ";\n    text-transform: ", ";\n    text-align: ", ";\n    line-height: ", ";\n    padding: ", ";\n  }\n  & th:first-child {\n    border-top-left-radius: ", ";\n  }\n  & th:last-child {\n    border-top-right-radius: ", ";\n  }\n  & td:last-child {\n    padding-right: 40px;\n  }\n"])), function (props) {
   return "".concat(props.theme.rowSeparatorThickness, " ").concat(props.theme.rowSeparatorStyle, " ").concat(props.theme.rowSeparatorColor);
 }, function (props) {
   return props.theme.dataBackgroundColor;

package/table/Table.stories.jsx

@@ -2,12 +2,21 @@ import React from "react";
 import DxcTable from "./Table";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Table",
   component: DxcTable,
 };
 
+const opinionatedTheme = {
+  table: {
+    baseColor: "#5f249f",
+    headerFontColor: "#ffffff",
+    cellFontColor: "#000000",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
@@ -271,7 +280,77 @@ export const Chromatic = () => (
           <td>Cell 9</td>
         </tr>
       </DxcTable>
-      <hr />
+    </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTable>
+          <tr>
+            <th>
+              header<br></br>subheader
+            </th>
+            <th>
+              header<br></br>subheader
+            </th>
+            <th>
+              header<br></br>subheader
+            </th>
+          </tr>
+          <tr>
+            <td>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.
+            </td>
+            <td>
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+              consequat.
+            </td>
+            <td>
+              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            </td>
+          </tr>
+          <tr>
+            <td>cell data</td>
+            <td>cell data</td>
+            <td>cell data</td>
+          </tr>
+          <tr>
+            <td>cell data</td>
+            <td>cell data</td>
+            <td>cell data</td>
+          </tr>
+          <tr>
+            <td>cell data</td>
+            <td>cell data</td>
+            <td>cell data</td>
+          </tr>
+          <tr>
+            <td>cell data</td>
+            <td>cell data</td>
+            <td>cell data</td>
+          </tr>
+          <tr>
+            <td>cell data</td>
+            <td>cell data</td>
+            <td>cell data</td>
+          </tr>
+          <tr>
+            <td>cell data</td>
+            <td>cell data</td>
+            <td>cell data</td>
+          </tr>
+          <tr>
+            <td>cell data</td>
+            <td>cell data</td>
+            <td>cell data</td>
+          </tr>
+          <tr>
+            <td>cell data</td>
+            <td>cell data</td>
+            <td>cell data</td>
+          </tr>
+        </DxcTable>
+      </HalstackProvider>
     </ExampleContainer>
   </>
 );

package/table/Table.test.js

@@ -6,11 +6,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Table = _interopRequireDefault(require("./Table"));
+var _Table = _interopRequireDefault(require("./Table.tsx"));
 
 describe("Table component tests", function () {
   test("Table renders with correct content", function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Table["default"], null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("th", null, "header-1"), /*#__PURE__*/_react["default"].createElement("th", null, "header-2"), /*#__PURE__*/_react["default"].createElement("th", null, "header-3")), /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", null, "cell-1"), /*#__PURE__*/_react["default"].createElement("td", null, "cell-2"), /*#__PURE__*/_react["default"].createElement("td", null, "cell-3")), /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", null, "cell-4"), /*#__PURE__*/_react["default"].createElement("td", null, "cell-5"), /*#__PURE__*/_react["default"].createElement("td", null, "cell-6")))),
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Table["default"], null, /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("th", null, "header-1"), /*#__PURE__*/_react["default"].createElement("th", null, "header-2"), /*#__PURE__*/_react["default"].createElement("th", null, "header-3"))), /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", null, "cell-1"), /*#__PURE__*/_react["default"].createElement("td", null, "cell-2"), /*#__PURE__*/_react["default"].createElement("td", null, "cell-3")), /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", null, "cell-4"), /*#__PURE__*/_react["default"].createElement("td", null, "cell-5"), /*#__PURE__*/_react["default"].createElement("td", null, "cell-6"))))),
         getByText = _render.getByText;
 
     expect(getByText("header-1")).toBeTruthy();