@dxc-technology/halstack-react 0.0.0-1819a7a → 0.0.0-1853afe

package/sidenav/Sidenav.stories.tsx

@@ -143,7 +143,24 @@ export const Chromatic = () => (
             gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare,
             malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam
             sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo.
-            Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
+            Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus. Lorem ipsum dolor sit amet,
+            consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna, placerat sit amet felis
+            eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue
+            laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus tincidunt. Vestibulum
+            cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus eros aliquam erat, ut
+            efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida enim. Donec rhoncus
+            aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu, fringilla mauris.
+            Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus augue. Vivamus erat
+            sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc dignissim, pharetra
+            neque molestie, molestie lectus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas
+            luctus porttitor. Donec massa magna, placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum
+            dolor sit amet, consectetur adipiscing elit. Donec congue laoreet orci, nec elementum dolor consequat quis.
+            Curabitur rhoncus justo sed dapibus tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna
+            ullamcorper facilisis Jia Le, risus eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo,
+            dignissim sit amet dolor ut, congue gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae.
+            Nunc sit amet elit ornare, malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum
+            purus euismod sit amet. Etiam sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id,
+            condimentum blandit justo. Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
           </p>
         </DxcSidenav>
       </StyledContainer>

package/spinner/Spinner.stories.jsx

@@ -62,6 +62,7 @@ export const Chromatic = () => (
       <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 />
     </ExampleContainer>
   </>
 );

package/stack/Stack.d.ts

@@ -1,10 +1,3 @@
-import React from "react";
-declare type StackProps = {
-    gutter?: "none" | "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.js

@@ -34,7 +34,7 @@ function Stack(_ref) {
 
 var Divider = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  height: 1px;\n  background-color: #999999;\n"])));
 
-var StyledStack = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  align-items: ", "};\n  gap: ", ";\n  margin: 0;\n  padding: 0;\n"])), function (_ref2) {
+var StyledStack = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  align-items: ", ";\n  gap: ", ";\n  margin: 0;\n  padding: 0;\n"])), function (_ref2) {
   var align = _ref2.align;
 
   switch (align) {
@@ -64,30 +64,33 @@ var StyledStack = _styledComponents["default"].div(_templateObject2 || (_templat
     case "none":
       return "0";
 
-    case "xxsmall":
+    case "xxxsmall":
       return "calc(0.125rem / ".concat(divider ? 2 : 1, ")");
 
-    case "xsmall":
+    case "xxsmall":
       return "calc(0.25rem / ".concat(divider ? 2 : 1, ")");
 
-    case "small":
+    case "xsmall":
       return "calc(0.5rem / ".concat(divider ? 2 : 1, ")");
 
-    case "medium":
+    case "small":
       return "calc(1rem / ".concat(divider ? 2 : 1, ")");
 
-    case "large":
+    case "medium":
       return "calc(1.5rem / ".concat(divider ? 2 : 1, ")");
 
-    case "xlarge":
+    case "large":
       return "calc(2rem / ".concat(divider ? 2 : 1, ")");
 
-    case "xxlarge":
+    case "xlarge":
       return "calc(3rem / ".concat(divider ? 2 : 1, ")");
 
-    case "xxxlarge":
+    case "xxlarge":
       return "calc(4rem / ".concat(divider ? 2 : 1, ")");
 
+    case "xxxlarge":
+      return "calc(5rem / ".concat(divider ? 2 : 1, ")");
+
     default:
       return "0";
   }

package/stack/Stack.stories.tsx

@@ -58,6 +58,14 @@ export const Chromatic = () => (
         <Placeholder paddingLeft={60}></Placeholder>
       </DxcStack>
     </Container>
+    <Title title="gutter = xxxsmall" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="xxxsmall">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
     <Title title="gutter = xxsmall" theme="light" level={4} />
     <Container>
       <DxcStack gutter="xxsmall">
@@ -114,6 +122,14 @@ export const Chromatic = () => (
         <Placeholder></Placeholder>
       </DxcStack>
     </Container>
+    <Title title="gutter = xxxlarge" theme="light" level={4} />
+    <Container>
+      <DxcStack gutter="xxxlarge">
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
     <Title title="gutter = xxlarge && divider" theme="light" level={4} />
     <Container>
       <DxcStack gutter="xxlarge" divider>
@@ -134,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/switch/Switch.stories.tsx

@@ -72,7 +72,7 @@ export const Chromatic = () => (
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />
-      <DxcSwitch label="Xxsmmall" margin="xxsmall" />
+      <DxcSwitch label="Xxsmall" margin="xxsmall" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xsmall margin" theme="light" level={4} />

package/table/Table.stories.jsx

@@ -271,6 +271,7 @@ export const Chromatic = () => (
           <td>Cell 9</td>
         </tr>
       </DxcTable>
+      <hr />
     </ExampleContainer>
   </>
-);
+);

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 = [
   {
@@ -116,6 +114,7 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcTabs tabs={tabs} margin="xxlarge" />
+      <hr />
     </ExampleContainer>
   </>
 );

package/tabs/types.d.ts

@@ -6,20 +6,8 @@ declare type Margin = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-declare type Tab = {
-    /**
-     * Tab label.
-     */
-    label?: string;
-    /**
-     * Element used as the icon that will be displayed in the tab.
-     */
-    icon?: SVG;
-    /**
-     * @deprecated URL of the icon to be displayed in the tab.
-     */
-    iconSrc?: string;
+declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type TabCommonProps = {
     /**
      * Whether the tab is disabled or not.
      */
@@ -33,11 +21,31 @@ declare type Tab = {
      */
     notificationNumber?: boolean | number;
 };
+declare type TabLabelProps = TabCommonProps & {
+    /**
+     * Tab label.
+     */
+    label: string;
+    /**
+     * Element or path used as the icon that will be displayed in the tab.
+     */
+    icon?: string | SVG;
+};
+declare type TabIconProps = TabCommonProps & {
+    /**
+     * Tab label.
+     */
+    label?: string;
+    /**
+     * Element or path used as the icon that will be displayed in the tab.
+     */
+    icon: string | SVG;
+};
 declare type Props = {
     /**
      * An array of objects representing the tabs.
      */
-    tabs: Tab[];
+    tabs: (TabLabelProps | TabIconProps)[];
     /**
      * Whether the icon should appear above or to the left of the label.
      */

package/tag/Tag.stories.tsx

@@ -132,7 +132,7 @@ export const Chromatic = () => (
 );
 
 const LinkTag = () => (
-  <ExampleContainer>
+  <ExampleContainer expanded>
     <Title title="Hover link tag" theme="light" level={4} />
     <DxcTag label="Tag" icon={icon} linkHref="https://www.dxc.com" />
   </ExampleContainer>

package/text/Text.js

@@ -24,7 +24,7 @@ function Text(_ref) {
   }, children);
 }
 
-var StyledText = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0px;\n  font-family: Open Sans, sans-serif;\n"])));
+var StyledText = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0px;\n  font-family: Open Sans, sans-serif;\n  line-height: 1.5em;\n"])));
 
 var _default = Text;
 exports["default"] = _default;

package/text-input/TextInput.js

@@ -548,7 +548,9 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     backgroundType: backgroundType,
     "aria-label": "Error"
   }, textInputIcons.error), !disabled && clearable && (value !== null && value !== void 0 ? value : innerValue).length > 0 && /*#__PURE__*/_react["default"].createElement(Action, {
-    onClick: handleClearActionOnClick,
+    onClick: function onClick() {
+      return handleClearActionOnClick();
+    },
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },
@@ -559,7 +561,9 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   }, textInputIcons.clear), (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number" ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Action, {
     ref: actionRef,
     disabled: disabled,
-    onClick: handleDecrementActionOnClick,
+    onClick: function onClick() {
+      return handleDecrementActionOnClick();
+    },
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },
@@ -570,7 +574,9 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   }, textInputIcons.decrement), /*#__PURE__*/_react["default"].createElement(Action, {
     ref: actionRef,
     disabled: disabled,
-    onClick: handleIncrementActionOnClick,
+    onClick: function onClick() {
+      return handleIncrementActionOnClick();
+    },
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },
@@ -581,7 +587,9 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   }, textInputIcons.increment)) : action && /*#__PURE__*/_react["default"].createElement(Action, {
     ref: actionRef,
     disabled: disabled,
-    onClick: action.onClick,
+    onClick: function onClick() {
+      return action.onClick();
+    },
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },

package/text-input/TextInput.stories.tsx

@@ -262,14 +262,14 @@ export const Chromatic = () => (
 );
 
 const FocusedActionTextInput = () => (
-  <ExampleContainer>
+  <ExampleContainer expanded>
     <Title title="Focused action" theme="light" level={4} />
     <DxcTextInput label="Text input" action={action} clearable />
   </ExampleContainer>
 );
 
 const ActivedActionTextInput = () => (
-  <ExampleContainer pseudoState="pseudo-active">
+  <ExampleContainer pseudoState="pseudo-active" expanded>
     <Title title="Actived action" theme="light" level={4} />
     <DxcTextInput label="Text input" action={action} clearable />
   </ExampleContainer>
@@ -306,7 +306,7 @@ const ActivedOptionAutosuggest = () => (
 const FocusedActionTextInputOnDark = () => (
   <BackgroundColorProvider color="#333333">
     <DarkContainer>
-      <ExampleContainer>
+      <ExampleContainer expanded>
         <Title title="Focused action" theme="dark" level={4} />
         <DxcTextInput label="Text input" action={action} clearable />
       </ExampleContainer>
@@ -317,7 +317,7 @@ const FocusedActionTextInputOnDark = () => (
 const ActivedActionTextInputOnDark = () => (
   <BackgroundColorProvider color="#333333">
     <DarkContainer>
-      <ExampleContainer pseudoState="pseudo-active">
+      <ExampleContainer pseudoState="pseudo-active" expanded>
         <Title title="Actived action" theme="dark" level={4} />
         <DxcTextInput label="Text input" action={action} clearable />
       </ExampleContainer>

package/text-input/types.d.ts

@@ -11,7 +11,7 @@ declare type Action = {
     /**
      * This function will be called when the user clicks the action.
      */
-    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick: () => void;
     /**
      * Icon to be shown in the action.
      */

package/textarea/Textarea.stories.jsx

@@ -105,15 +105,15 @@ export const Chromatic = () => (
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />
-      <DxcTextarea label="Xxsmmall" margin="xxsmall" />
+      <DxcTextarea label="Xxsmall" margin="xxsmall" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xsmall margin" theme="light" level={4} />
-      <DxcTextarea label="xsmmall" margin="xsmall" />
+      <DxcTextarea label="xsmall" margin="xsmall" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Small margin" theme="light" level={4} />
-      <DxcTextarea label="smmall" margin="small" />
+      <DxcTextarea label="small" margin="small" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium margin" theme="light" level={4} />
@@ -130,6 +130,7 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcTextarea label="Xxlarge" margin="xxlarge" />
+      <hr />
     </ExampleContainer>
   </>
 );

package/toggle-group/ToggleGroup.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 = _interopRequireWildcard(require("react"));
@@ -46,7 +46,7 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
   var colorsTheme = (0, _useTheme["default"])();
 
-  var _useState = (0, _react.useState)(multiple ? [] : ""),
+  var _useState = (0, _react.useState)(multiple ? [] : -1),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       selectedValue = _useState2[0],
       setSelectedValue = _useState2[1];
@@ -108,16 +108,16 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
     role: multiple ? "group" : "radiogroup"
   }, options.map(function (option, i) {
     return /*#__PURE__*/_react["default"].createElement(ToggleContainer, {
-      selected: multiple ? value ? value.includes(option.value) : selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
+      selected: multiple && Array.isArray(value) ? value ? value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
       role: multiple ? "switch" : "radio",
-      "aria-checked": multiple ? value ? value.includes(option.value) : selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
+      "aria-checked": multiple && Array.isArray(value) ? value ? value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
       tabIndex: !disabled ? tabIndex : -1,
       onClick: function onClick() {
         return !disabled && handleToggleChange(option.value);
       },
       isFirst: i === 0,
       isLast: i === options.length - 1,
-      isIcon: option.iconSrc || option.icon,
+      isIcon: option.icon,
       optionLabel: option.label,
       disabled: disabled,
       onKeyPress: function onKeyPress(event) {
@@ -126,10 +126,9 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
       key: "toggle-".concat(i, "-").concat(option.label)
     }, /*#__PURE__*/_react["default"].createElement(OptionContent, null, option.icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
       optionLabel: option.label
-    }, (0, _typeof2["default"])(option.icon) === "object" ? option.icon : /*#__PURE__*/_react["default"].createElement(option.icon)), option.iconSrc && /*#__PURE__*/_react["default"].createElement(Icon, {
-      src: option.iconSrc,
-      optionLabel: option.label
-    }), option.label && /*#__PURE__*/_react["default"].createElement(LabelContainer, null, option.label)));
+    }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement(Icon, {
+      src: option.icon
+    }) : option.icon), option.label && /*#__PURE__*/_react["default"].createElement(LabelContainer, null, option.label)));
   }))));
 };
 
@@ -205,9 +204,7 @@ var LabelContainer = _styledComponents["default"].span(_templateObject6 || (_tem
 
 var OptionContent = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
 
-var Icon = _styledComponents["default"].img(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 24px;\n  width: 24px;\n  margin-right: ", ";\n"])), function (props) {
-  return props.optionLabel && props.theme.iconMarginRight;
-});
+var Icon = _styledComponents["default"].img(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])([""])));
 
 var IconContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: ", ";\n  height: 24px;\n  width: 24px;\n  overflow: hidden;\n  display: flex;\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.optionLabel && props.theme.iconMarginRight;

package/toggle-group/ToggleGroup.stories.tsx

@@ -9,36 +9,31 @@ export default {
   component: DxcToggleGroup,
 };
 
-const ethernetSVG = () => {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
-      <path d="M0 0h24v24H0V0z" fill="none" />
-      <path d="M7.77 6.76L6.23 5.48.82 12l5.41 6.52 1.54-1.28L3.42 12l4.35-5.24zM7 13h2v-2H7v2zm10-2h-2v2h2v-2zm-6 2h2v-2h-2v2zm6.77-7.52l-1.54 1.28L20.58 12l-4.35 5.24 1.54 1.28L23.18 12l-5.41-6.52z" />
-    </svg>
-  );
-};
-const gMobileSVG = () => {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
-      <g>
-        <path d="M0,0h24v24H0V0z" fill="none" />
-      </g>
+const ethernetSVG = (
+  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path d="M7.77 6.76L6.23 5.48.82 12l5.41 6.52 1.54-1.28L3.42 12l4.35-5.24zM7 13h2v-2H7v2zm10-2h-2v2h2v-2zm-6 2h2v-2h-2v2zm6.77-7.52l-1.54 1.28L20.58 12l-4.35 5.24 1.54 1.28L23.18 12l-5.41-6.52z" />
+  </svg>
+);
+const gMobileSVG = (
+  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+    <g>
+      <path d="M0,0h24v24H0V0z" fill="none" />
+    </g>
+    <g>
       <g>
-        <g>
-          <path d="M3,7v2h5v2H4v2h4v2H3v2h5c1.1,0,2-0.9,2-2v-1.5c0-0.83-0.67-1.5-1.5-1.5c0.83,0,1.5-0.67,1.5-1.5V9c0-1.1-0.9-2-2-2H3z M21,11v4c0,1.1-0.9,2-2,2h-5c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h5c1.1,0,2,0.9,2,2h-7v6h5v-2h-2.5v-2H21z" />
-        </g>
+        <path d="M3,7v2h5v2H4v2h4v2H3v2h5c1.1,0,2-0.9,2-2v-1.5c0-0.83-0.67-1.5-1.5-1.5c0.83,0,1.5-0.67,1.5-1.5V9c0-1.1-0.9-2-2-2H3z M21,11v4c0,1.1-0.9,2-2,2h-5c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h5c1.1,0,2,0.9,2,2h-7v6h5v-2h-2.5v-2H21z" />
       </g>
-    </svg>
-  );
-};
-const wifiSVG = () => {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
-      <path d="M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none" />
-      <path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z" />
-    </svg>
-  );
-};
+    </g>
+  </svg>
+);
+const wifiSVG = (
+  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+    <path d="M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none" />
+    <path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z" />
+  </svg>
+);
+
 const options = [
   {
     value: 1,