@dxc-technology/halstack-react 0.0.0-6a36022 → 0.0.0-6b2dd6f

package/radio-group/Radio.js

@@ -21,7 +21,7 @@ var _uuid = require("uuid");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -63,11 +63,25 @@ var DxcRadio = function DxcRadio(_ref) {
   }, [focused]);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.radioGroup
-  }, /*#__PURE__*/_react["default"].createElement(RadioContainer, null, /*#__PURE__*/_react["default"].createElement(RadioInputContainer, null, /*#__PURE__*/_react["default"].createElement(RadioInput, {
+  }, /*#__PURE__*/_react["default"].createElement(RadioMainContainer, null, /*#__PURE__*/_react["default"].createElement(RadioContainer, {
+    error: error,
+    disabled: disabled,
+    readonly: readonly,
+    onMouseDown: function onMouseDown(event) {
+      // Prevents div's onclick from stealing the radio button's focus
+      event.preventDefault();
+    },
+    onClick: function onClick() {
+      var _ref$current2;
+
+      ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
+
+      _onClick();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(RadioInputContainer, null, /*#__PURE__*/_react["default"].createElement(RadioInput, {
     error: error,
     disabled: disabled,
     readonly: readonly,
-    onClick: _onClick,
     onFocus: onFocus,
     role: "radio",
     "aria-checked": checked,
@@ -81,35 +95,31 @@ var DxcRadio = function DxcRadio(_ref) {
     error: error
   }))), /*#__PURE__*/_react["default"].createElement(Label, {
     id: radioLabelId,
-    onMouseDown: function onMouseDown(event) {
-      event.preventDefault();
-    },
-    onClick: function onClick() {
-      var _ref$current2;
-
-      ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
-
-      _onClick();
-    },
     disabled: disabled
-  }, option.label)));
+  }, option.label))));
 };
 
-var RadioContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n"])));
+var RadioMainContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n"])));
+
+var RadioContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  align-items: center;\n  cursor: ", ";\n  \n  ", "\n"])), function (props) {
+  return props.disabled ? "not-allowed" : props.readonly ? "default" : "pointer";
+}, function (props) {
+  return !props.disabled && "\n      &:hover {\n        & > div > div { \n          border-color: ".concat(props.error ? props.theme.hoverErrorRadioInputColor : props.readonly ? props.theme.hoverReadonlyRadioInputColor : props.theme.hoverRadioInputColor, ";\n          & > span {\n            background-color: ").concat(props.error ? props.theme.hoverErrorRadioInputColor : props.readonly ? props.theme.hoverReadonlyRadioInputColor : props.theme.hoverRadioInputColor, ";\n          }\n        };\n      }\n      &:active {\n        & > div > div {\n          border-color: ").concat(props.error ? props.theme.activeErrorRadioInputColor : props.readonly ? props.theme.activeReadonlyRadioInputColor : props.theme.activeRadioInputColor, ";\n          & > span {\n            background-color: ").concat(props.error ? props.theme.activeErrorRadioInputColor : props.readonly ? props.theme.activeReadonlyRadioInputColor : props.theme.activeRadioInputColor, ";\n          }\n        }\n      }\n    ");
+});
 
-var RadioInputContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  width: 24px;\n"])));
+var RadioInputContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  width: 24px;\n"])));
 
-var RadioInput = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 18px;\n  height: 18px;\n  border: 2px solid\n    ", ";\n  border-radius: 50%;\n  box-shadow: 0 0 0 2px transparent;\n\n  ", "\n"])), function (props) {
+var RadioInput = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 18px;\n  height: 18px;\n  border: 2px solid\n    ", ";\n  border-radius: 50%;\n  box-shadow: 0 0 0 2px transparent;\n\n  ", "\n"])), function (props) {
   if (props.disabled) return props.theme.disabledRadioInputColor;else if (props.error) return props.theme.errorRadioInputColor;else if (props.readonly) return props.theme.readonlyRadioInputColor;else return props.theme.radioInputColor;
 }, function (props) {
-  return !props.disabled ? "\n        &:focus {\n          outline: 2px solid ".concat(props.theme.focusBorderColor, ";\n          outline-offset: 1px;\n        }\n        &:focus-visible {\n          outline: 2px solid ").concat(props.theme.focusBorderColor, ";\n          outline-offset: 1px;\n        }\n        &:hover {\n          cursor: pointer;\n          border-color: ").concat(props.error ? props.theme.hoverErrorRadioInputColor : props.readonly ? props.theme.hoverReadonlyRadioInputColor : props.theme.hoverRadioInputColor, ";\n          & > span {\n            background-color: ").concat(props.error ? props.theme.hoverErrorRadioInputColor : props.readonly ? props.theme.hoverReadonlyRadioInputColor : props.theme.hoverRadioInputColor, ";\n          }\n        }\n        &:active {\n          cursor: pointer;\n          border-color: ").concat(props.error ? props.theme.activeErrorRadioInputColor : props.readonly ? props.theme.activeReadonlyRadioInputColor : props.theme.activeRadioInputColor, ";\n          & > span {\n            background-color: ").concat(props.error ? props.theme.activeErrorRadioInputColor : props.readonly ? props.theme.activeReadonlyRadioInputColor : props.theme.activeRadioInputColor, ";\n          }\n        }\n      ") : "\n        cursor: not-allowed;\n        pointer-events: none;\n        :focus-visible {\n          outline: none;\n        }\n      ";
+  return !props.disabled ? "&:focus {\n          outline: 2px solid ".concat(props.theme.focusBorderColor, ";\n          outline-offset: 1px;\n        }\n        &:focus-visible {\n          outline: 2px solid ").concat(props.theme.focusBorderColor, ";\n          outline-offset: 1px;\n        }\n      ") : "\n        pointer-events: none;\n        :focus-visible {\n          outline: none;\n        }\n    ";
 });
 
-var Dot = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 10px;\n  width: 10px;\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (props) {
+var Dot = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 10px;\n  width: 10px;\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (props) {
   if (props.disabled) return props.theme.disabledRadioInputColor;else if (props.error) return props.theme.errorRadioInputColor;else if (props.readonly) return props.theme.readonlyRadioInputColor;else return props.theme.radioInputColor;
 });
 
-var Label = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  ", "\n"])), function (props) {
+var Label = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  ", "\n"])), function (props) {
   return props.theme.radioInputLabelMargin;
 }, function (props) {
   return props.theme.fontFamily;
@@ -122,7 +132,7 @@ var Label = _styledComponents["default"].span(_templateObject5 || (_templateObje
 }, function (props) {
   return props.theme.radioInputLabelLineHeight;
 }, function (props) {
-  return props.disabled ? "color: ".concat(props.theme.disabledRadioInputLabelFontColor, "; pointer-events: none;") : "cursor: pointer;";
+  return props.disabled && "color: ".concat(props.theme.disabledRadioInputLabelFontColor, "; pointer-events: none;");
 });
 
 var _default = /*#__PURE__*/_react["default"].memo(DxcRadio);

package/radio-group/RadioGroup.js

@@ -59,11 +59,12 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       onBlur = _ref.onBlur,
       error = _ref.error;
 
-  var _useState = (0, _react.useState)("select-".concat((0, _uuid.v4)())),
+  var _useState = (0, _react.useState)("radio-group-".concat((0, _uuid.v4)())),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
       radioGroupId = _useState2[0];
 
   var radioGroupLabelId = "label-".concat(radioGroupId);
+  var errorId = "error-".concat(radioGroupId);
 
   var _useState3 = (0, _react.useState)(defaultValue),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
@@ -185,6 +186,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
     "aria-disabled": disabled,
     "aria-labelledby": radioGroupLabelId,
     "aria-invalid": error ? "true" : "false",
+    "aria-errormessage": error ? errorId : undefined,
     "aria-required": !optional
   }, /*#__PURE__*/_react["default"].createElement(ValueInput, {
     name: name,
@@ -207,10 +209,13 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
       focused: currentFocusIndex === index,
       readonly: readonly
     });
-  })), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, null, error)));
+  })), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
+    id: errorId,
+    "aria-live": error ? "assertive" : "off"
+  }, error)));
 });
 
-var RadioGroupContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
+var RadioGroupContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
 
 var Label = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  ", "\n"])), function (props) {
   return props.disabled ? props.theme.disabledLabelFontColor : props.theme.labelFontColor;

package/radio-group/RadioGroup.stories.tsx

@@ -24,7 +24,7 @@ export const Chromatic = () => (
   <>
     <ExampleContainer>
       <Title title="Label only" theme="light" level={4} />
-      <DxcRadioGroup label="Example of label" options={options}/>
+      <DxcRadioGroup label="Example of a label only" options={options} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Column" theme="light" level={4} />

package/radio-group/RadioGroup.test.js

@@ -0,0 +1,248 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _RadioGroup = _interopRequireDefault(require("./RadioGroup"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var single_options = [{
+  label: "Option 01",
+  value: "1"
+}, {
+  label: "Option 02",
+  value: "2"
+}, {
+  label: "Option 03",
+  value: "3"
+}, {
+  label: "Option 04",
+  value: "4"
+}, {
+  label: "Option 05",
+  value: "5"
+}, {
+  label: "Option 06",
+  value: "6"
+}, {
+  label: "Option 07",
+  value: "7"
+}, {
+  label: "Option 08",
+  value: "8"
+}, {
+  label: "Option 09",
+  value: "9"
+}, {
+  label: "Option 10",
+  value: "10"
+}];
+describe("Radio Group component tests", function () {
+  test("Controlled - Not optional constraint - undefined", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      label: "test-select-label",
+      options: single_options,
+      onChange: onChange,
+      onBlur: onBlur
+    })),
+        getByRole = _render.getByRole,
+        getAllByRole = _render.getAllByRole;
+
+    var radioGroup = getByRole("radiogroup");
+    expect(radioGroup.getAttribute("aria-required")).toBe("true");
+
+    _react2.fireEvent.focus(radioGroup);
+
+    _react2.fireEvent.blur(radioGroup);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      error: "This field is required. Please, choose an option."
+    });
+
+    _userEvent["default"].click(radioGroup);
+
+    _userEvent["default"].click(getAllByRole("radio")[0]);
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith("1");
+
+    _react2.fireEvent.focus(radioGroup);
+
+    _react2.fireEvent.blur(radioGroup);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "1"
+    });
+  });
+  test("Controlled - Not optional constraint - empty string", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      label: "test-select-label",
+      value: "",
+      options: single_options,
+      onChange: onChange,
+      onBlur: onBlur
+    })),
+        getByRole = _render2.getByRole,
+        getAllByRole = _render2.getAllByRole;
+
+    var radioGroup = getByRole("radiogroup");
+    expect(radioGroup.getAttribute("aria-required")).toBe("true");
+
+    _react2.fireEvent.focus(radioGroup);
+
+    _react2.fireEvent.blur(radioGroup);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "",
+      error: "This field is required. Please, choose an option."
+    });
+
+    _userEvent["default"].click(getAllByRole("radio")[0]);
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith("1");
+  });
+  test("Controlled - Optional constraint", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      label: "test-radio-group-label",
+      helperText: "test-radio-group-helper-text",
+      options: single_options,
+      onChange: onChange,
+      onBlur: onBlur,
+      optional: true
+    })),
+        getByRole = _render3.getByRole;
+
+    var radioGroup = getByRole("radiogroup");
+    expect(radioGroup.getAttribute("aria-required")).toBe("false");
+
+    _react2.fireEvent.focus(radioGroup);
+
+    _react2.fireEvent.blur(radioGroup);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({});
+    expect(radioGroup.getAttribute("aria-invalid")).toBe("false");
+  });
+  test("Select an option - Click on radio input label", function () {
+    var onChange = jest.fn();
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      label: "test-radio-group-label",
+      helperText: "test-radio-group-helper-text",
+      options: single_options,
+      onChange: onChange
+    })),
+        getByText = _render4.getByText,
+        getAllByRole = _render4.getAllByRole;
+
+    var radio = getByText("Option 10");
+
+    _userEvent["default"].click(radio);
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith("10");
+    expect(getAllByRole("radio")[9].getAttribute("aria-checked")).toBe("true");
+  });
+  test("Select an option - Click on radio input", function () {
+    var onChange = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      label: "test-radio-group-label",
+      helperText: "test-radio-group-helper-text",
+      options: single_options,
+      onChange: onChange
+    })),
+        getAllByRole = _render5.getAllByRole;
+
+    var radio = getAllByRole("radio")[6];
+
+    _userEvent["default"].click(radio);
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith("7");
+    expect(radio.getAttribute("aria-checked")).toBe("true");
+  });
+  test("Select an option - Tab and Enter key", function () {
+    var onChange = jest.fn();
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      label: "test-radio-group-label",
+      helperText: "test-radio-group-helper-text",
+      options: single_options,
+      onChange: onChange
+    })),
+        getByRole = _render6.getByRole,
+        getAllByRole = _render6.getAllByRole;
+
+    var radioGroup = getByRole("radiogroup");
+    var radio = getAllByRole("radio")[0];
+
+    _react2.fireEvent.keyDown(radioGroup, {
+      key: "Tab",
+      code: "Tab",
+      keyCode: 9,
+      charCode: 9
+    });
+
+    _react2.fireEvent.keyDown(radioGroup, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 13,
+      charCode: 13
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith("1");
+    expect(radio.getAttribute("aria-checked")).toBe("true");
+  });
+  test("Select an option - Tab and Space key", function () {
+    var onChange = jest.fn();
+
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
+      label: "test-radio-group-label",
+      helperText: "test-radio-group-helper-text",
+      options: single_options,
+      onChange: onChange
+    })),
+        getByRole = _render7.getByRole,
+        getAllByRole = _render7.getAllByRole;
+
+    var radioGroup = getByRole("radiogroup");
+    var radio = getAllByRole("radio")[0];
+
+    _react2.fireEvent.keyDown(radioGroup, {
+      key: "Tab",
+      code: "Tab",
+      keyCode: 9,
+      charCode: 9
+    });
+
+    _react2.fireEvent.keyDown(radioGroup, {
+      key: "Space",
+      code: "Space",
+      keyCode: 32,
+      charCode: 32
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith("1");
+    expect(radio.getAttribute("aria-checked")).toBe("true");
+  });
+});

package/radio-group/types.d.ts

@@ -15,7 +15,7 @@ declare type RadioGroupProps = {
     stacking?: "row" | "column";
     defaultValue?: string;
     value?: string;
-    onChange?: (value: string) => void;
+    onChange?: (value?: string) => void;
     onBlur?: (val: {
         value?: string;
         error?: string;

package/resultsetTable/ResultsetTable.stories.tsx

@@ -10,14 +10,12 @@ export default {
   component: DxcResultsetTable,
 };
 
-const deleteIcon = () => {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
-      <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
-      <path d="M0 0h24v24H0z" fill="none" />
-    </svg>
-  );
-};
+const deleteIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
+    <path d="M0 0h24v24H0z" fill="none" />
+  </svg>
+);
 
 const columns = [{ displayValue: "Id" }, { displayValue: "Name" }, { displayValue: "City" }];
 

package/row/Row.d.ts

@@ -1,11 +1,3 @@
-import React from "react";
-declare type RowProps = {
-    gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
-    align?: "start" | "center" | "end" | "baseline" | "stretch";
-    justify?: "start" | "center" | "end" | "spaceBetween" | "spaceAround" | "spaceEvenly";
-    wrap?: boolean;
-    reverse?: boolean;
-    children: React.ReactNode;
-};
-export default function Row({ gutter, align, justify, wrap, reverse, children }: RowProps): JSX.Element;
-export {};
+/// <reference types="react" />
+import RowPropsType from "./types";
+export default function Row({ gutter, align, justify, wrap, reverse, children, }: RowPropsType): JSX.Element;

package/row/Row.stories.tsx

@@ -106,7 +106,7 @@ export const Chromatic = () => (
         <Placeholder paddingTop={60}></Placeholder>
       </DxcRow>
     </Container>
-     <Title title="gutter = xxxsmall" theme="light" level={4} />
+    <Title title="gutter = xxxsmall" theme="light" level={4} />
     <Container>
       <DxcRow gutter="xxxsmall">
         <Placeholder></Placeholder>
@@ -222,18 +222,16 @@ export const Chromatic = () => (
 );
 
 const Container = styled.div`
-  background: #d0d0d0;
+  background: #f2eafa;
   padding: 10px;
-  border-radius: 10px;
   width: ${({ width }) => (width ? `${width}px` : "unset")};
 `;
 
 const Placeholder = styled.div`
-  min-height: 80px;
+  min-height: 40px;
   min-width: 120px;
-  border: 1px solid #fabada;
-  background-color: #fff7fb;
-  border-radius: 5px;
+  border: 1px solid #a46ede;
+  background-color: #e5d5f6;
   padding-top: ${({ paddingTop }) => `${paddingTop ?? 0}px`};
   padding-bottom: ${({ paddingBottom }) => `${paddingBottom ?? 0}px`};
 `;

package/row/types.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare type Props = {
+    gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
+    align?: "start" | "center" | "end" | "baseline" | "stretch";
+    justify?: "start" | "center" | "end" | "spaceBetween" | "spaceAround" | "spaceEvenly";
+    wrap?: boolean;
+    reverse?: boolean;
+    children: React.ReactNode;
+};
+export default Props;

package/row/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/stack/Stack.d.ts

@@ -1,10 +1,3 @@
-import React from "react";
-declare type StackProps = {
-    gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
-    divider?: boolean;
-    align?: "start" | "center" | "end" | "baseline" | "stretch";
-    as?: React.ElementType;
-    children: React.ReactNode;
-};
-export default function Stack({ gutter, divider, align, as, children }: StackProps): JSX.Element;
-export {};
+/// <reference types="react" />
+import StackPropsType from "./types";
+export default function Stack({ gutter, divider, align, as, children }: StackPropsType): JSX.Element;

package/stack/Stack.stories.tsx

@@ -150,17 +150,15 @@ export const Chromatic = () => (
 );
 
 const Container = styled.div`
-  background: #d0d0d0;
+  background: #f2eafa;
   padding: 10px;
-  border-radius: 10px;
 `;
 
 const Placeholder = styled.div`
-  min-height: 80px;
+  min-height: 40px;
   min-width: 120px;
-  border: 1px solid #fabada;
-  background-color: #fff7fb;
-  border-radius: 5px;
+  border: 1px solid #a46ede;
+  background-color: #e5d5f6;
   padding-left: ${({ paddingLeft }) => `${paddingLeft ?? 0}px`};
   padding-right: ${({ paddingRight }) => `${paddingRight ?? 0}px`};
 `;

package/stack/types.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type Props = {
+    gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
+    divider?: boolean;
+    align?: "start" | "center" | "end" | "baseline" | "stretch";
+    as?: React.ElementType;
+    children: React.ReactNode;
+};
+export default Props;

package/stack/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/tabs/Tabs.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -70,12 +70,12 @@ var DxcTabs = function DxcTabs(_ref) {
     }, /*#__PURE__*/_react["default"].createElement(TabLabelContainer, {
       hasLabelAndIcon: hasLabelAndIcon,
       iconPosition: iconPosition
-    }, tab.icon ? /*#__PURE__*/_react["default"].createElement(TabIconContainer, {
+    }, tab.icon && /*#__PURE__*/_react["default"].createElement(TabIconContainer, {
       hasLabelAndIcon: hasLabelAndIcon,
       iconPosition: iconPosition
-    }, (0, _typeof2["default"])(tab.icon) === "object" ? tab.icon : /*#__PURE__*/_react["default"].createElement(tab.icon)) : tab.iconSrc && /*#__PURE__*/_react["default"].createElement(TabIcon, {
-      src: tab.iconSrc
-    }), /*#__PURE__*/_react["default"].createElement(LabelTextContainer, null, tab.label))), tab.notificationNumber && tab.notificationNumber !== false && /*#__PURE__*/_react["default"].createElement(BadgeContainer, {
+    }, typeof tab.icon === "string" ? /*#__PURE__*/_react["default"].createElement(TabIcon, {
+      src: tab.icon
+    }) : tab.icon), /*#__PURE__*/_react["default"].createElement(LabelTextContainer, null, tab.label))), tab.notificationNumber && tab.notificationNumber !== false && /*#__PURE__*/_react["default"].createElement(BadgeContainer, {
       hasLabelAndIcon: hasLabelAndIcon,
       iconPosition: iconPosition
     }, /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
@@ -201,7 +201,7 @@ var DxCTabs = _styledComponents["default"].div(_templateObject7 || (_templateObj
   return props.theme.scrollButtonsWidth;
 });
 
-var TabIcon = _styledComponents["default"].img(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 22px;\n  max-width: 22px;\n"])));
+var TabIcon = _styledComponents["default"].img(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])([""])));
 
 var TabIconContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 22px;\n  max-width: 22px;\n  margin-bottom: ", ";\n  margin-right: ", ";\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.hasLabelAndIcon && props.iconPosition === "top" && "8px" || "";

package/tabs/Tabs.stories.tsx

@@ -9,14 +9,12 @@ export default {
   component: DxcTabs,
 };
 
-const iconSVG = () => {
-  return (
-    <svg viewBox="0 0 24 24" fill="currentColor">
-      <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
-    </svg>
-  );
-};
+const iconSVG = (
+  <svg viewBox="0 0 24 24" fill="currentColor">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+  </svg>
+);
 
 const tabs: any = [
   {