@dxc-technology/halstack-react 0.0.0-7c194f8 → 0.0.0-7c2b794

package/badge/Badge.stories.tsx

@@ -0,0 +1,210 @@
+import React from "react";
+import DxcBadge from "./Badge";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import DxcFlex from "../flex/Flex";
+
+export default {
+  title: "Badge",
+  component: DxcBadge,
+};
+
+const icon = (
+  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <path d="M11 17H13V11H11V17ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM11 9H13V7H11V9Z" />
+    <path d="M11 7H13V9H11V7ZM11 11H13V17H11V11Z" />
+    <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z" />
+  </svg>
+);
+
+export const Chromatic = () => (
+  <>
+    <Title title="Notification" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge mode="notification" size="small" />
+        <DxcBadge mode="notification" label={1} size="small" />
+        <DxcBadge mode="notification" label={10} size="small" />
+        <DxcBadge mode="notification" label={1000000} size="small" notificationLimit={99999999} />
+        <DxcBadge mode="notification" label={100} size="small" notificationLimit={99} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignContent="center" alignItems="center">
+        <DxcBadge mode="notification" size="medium" />
+        <DxcBadge mode="notification" label={1} size="medium" />
+        <DxcBadge mode="notification" label={10} size="medium" />
+        <DxcBadge mode="notification" label={1000000} size="medium" notificationLimit={99999999} />
+        <DxcBadge mode="notification" label={100} size="medium" />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge mode="notification" size="large" />
+        <DxcBadge mode="notification" label={1} size="large" />
+        <DxcBadge mode="notification" label={10} size="large" />
+        <DxcBadge mode="notification" label={1000000} size="large" notificationLimit={99999999} />
+        <DxcBadge mode="notification" label={100} size="large" />
+      </DxcFlex>
+    </ExampleContainer>
+    <Title title="Contextual" theme="light" level={2} />
+    <Title title="Grey" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge label="Label" size="small" />
+        <DxcBadge label="Label" size="small" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge label="Label" />
+        <DxcBadge label="Label" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge label="Label" size="large" />
+        <DxcBadge label="Label" size="large" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <Title title="Blue" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="blue" label="Label" size="small" />
+        <DxcBadge color="blue" label="Label" size="small" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="blue" label="Label" />
+        <DxcBadge color="blue" label="Label" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="blue" label="Label" size="large" />
+        <DxcBadge color="blue" label="Label" size="large" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <Title title="Green" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="green" label="Label" size="small" />
+        <DxcBadge color="green" label="Label" size="small" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="green" label="Label" />
+        <DxcBadge color="green" label="Label" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="green" label="Label" size="large" />
+        <DxcBadge color="green" label="Label" size="large" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer></ExampleContainer>
+    <Title title="Orange" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="orange" label="Label" size="small" />
+        <DxcBadge color="orange" label="Label" size="small" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="orange" label="Label" />
+        <DxcBadge color="orange" label="Label" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="orange" label="Label" size="large" />
+        <DxcBadge color="orange" label="Label" size="large" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <Title title="Red" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="red" label="Label" size="small" />
+        <DxcBadge color="red" label="Label" size="small" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="red" label="Label" />
+        <DxcBadge color="red" label="Label" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="red" label="Label" size="large" />
+        <DxcBadge color="red" label="Label" size="large" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <Title title="Yellow" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="yellow" label="Label" size="small" />
+        <DxcBadge color="yellow" label="Label" size="small" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="yellow" label="Label" />
+        <DxcBadge color="yellow" label="Label" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="yellow" label="Label" size="large" />
+        <DxcBadge color="yellow" label="Label" size="large" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <Title title="Purple" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="purple" label="Label" size="small" />
+        <DxcBadge color="purple" label="Label" size="small" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="purple" label="Label" />
+        <DxcBadge color="purple" label="Label" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcFlex gap="3rem" alignItems="center">
+        <DxcBadge color="purple" label="Label" size="large" />
+        <DxcBadge color="purple" label="Label" size="large" icon={icon} />
+      </DxcFlex>
+    </ExampleContainer>
+  </>
+);

package/badge/Badge.test.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Badge = _interopRequireDefault(require("./Badge.tsx"));
+var _Flex = _interopRequireDefault(require("../flex/Flex.tsx"));
+describe("Badge component tests", function () {
+  test("Badge renders with correct label when it is less than notification limit", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+        label: 99,
+        mode: "notification"
+      })),
+      getByText = _render.getByText;
+    expect(getByText("99")).toBeTruthy();
+  });
+  test("Badge renders +99 as label when it is greater than notification limit", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+        label: 120,
+        mode: "notification"
+      }), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+        label: 11,
+        mode: "notification",
+        notificationLimit: 10
+      }))),
+      getByText = _render2.getByText;
+    expect(getByText("+99")).toBeTruthy();
+    expect(getByText("+10")).toBeTruthy();
+  });
+});

package/badge/types.d.ts

@@ -1,5 +1,54 @@
-type Props = {
-    notificationText: boolean | number | string;
-    disabled?: boolean;
+/// <reference types="react" />
+type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+export type ContextualProps = {
+    /**
+     * Text to be placed in the badge.
+     */
+    label: string;
+    /**
+     * The available badge modes.
+     */
+    mode?: "contextual";
+    /**
+     * In notification mode, if the number entered as label is greater that this notification limit, +99 will be shown. If not, the entered text will be shown as label.
+     */
+    notificationLimit?: never;
+    /**
+     * Affects the visual style of the badge. It can be used following semantic purposes or not.
+     */
+    color?: "grey" | "blue" | "green" | "orange" | "red" | "yellow" | "purple";
 };
+export type NotificationProps = {
+    /**
+     * Text to be placed in the badge.
+     */
+    label?: number;
+    /**
+     * The available badge modes.
+     */
+    mode: "notification";
+    /**
+     * In notification mode, if the number entered as label is greater that this notification limit, +99 will be shown. If not, the entered text will be shown as label.
+     */
+    notificationLimit?: number;
+    /**
+     * Affects the visual style of the badge. It can be used following semantic purposes or not.
+     */
+    color?: never;
+};
+export type CommonProps = {
+    /**
+     * Text representing advisory information related to the badge. Under the hood, this prop also serves as an accessible label for the component.
+     */
+    title?: string;
+    /**
+     * Element or path used as the icon that will be placed next to the badge label in contextual mode.
+     */
+    icon?: string | SVG;
+    /**
+     * Size of the component.
+     */
+    size?: "small" | "medium" | "large";
+};
+type Props = (ContextualProps | NotificationProps) & CommonProps;
 export default Props;

package/button/Button.js

@@ -13,6 +13,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _variables = require("../common/variables");
 var _utils = require("../common/utils");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -54,8 +55,8 @@ var DxcButton = function DxcButton(_ref) {
     iconPosition: iconPosition,
     size: size,
     margin: margin
-  }, label && /*#__PURE__*/_react["default"].createElement(LabelContainer, null, label), icon && /*#__PURE__*/_react["default"].createElement(IconContainer, null, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
-    src: icon
+  }, label && /*#__PURE__*/_react["default"].createElement(LabelContainer, null, label), icon && /*#__PURE__*/_react["default"].createElement(IconContainer, null, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: icon
   }) : icon)));
 };
 var sizes = {

package/button/Button.stories.tsx

@@ -76,30 +76,26 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
-      <DxcButton label="Primary disabled" disabled icon={iconSVG} />
+      <DxcButton label="Primary disabled" disabled icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With left icon" theme="light" level={4} />
-      <DxcButton label="Primary" icon={iconSVG} />
+      <DxcButton label="Primary" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With right icon" theme="light" level={4} />
-      <DxcButton label="Primary" icon={iconSVG} iconPosition="after" />
+      <DxcButton label="Primary" icon="filled_bottom_app_bar" iconPosition="after" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Only icon" theme="light" level={4} />
-      <DxcButton icon={iconSVG} />
+      <DxcButton icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Big icon (SVG)" theme="light" level={4} />
       <DxcButton icon={facebookIcon} />
     </ExampleContainer>
     <ExampleContainer>
-      <Title title="Big icon (image)" theme="light" level={4} />
-      <DxcButton icon="https://www.freepnglogos.com/uploads/facebook-logo-design-1.png" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Small icon" theme="light" level={4} />
+      <Title title="Small icon (SVG)" theme="light" level={4} />
       <DxcButton icon={smallIcon} />
     </ExampleContainer>
     <Title title="Secondary" theme="light" level={2} />
@@ -121,18 +117,11 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
-      <DxcButton mode="secondary" disabled label="Secondary disabled" icon={iconSVG} />
+      <DxcButton mode="secondary" disabled label="Secondary disabled" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With icon" theme="light" level={4} />
-      <DxcButton mode="secondary" label="Secondary" icon={iconSVG} />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Only icon (image)" theme="light" level={4} />
-      <DxcButton
-        mode="secondary"
-        icon="https://www.freepnglogos.com/uploads/facebook-logo-design-1.png"
-      />
+      <DxcButton mode="secondary" label="Secondary" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <Title title="Text" theme="light" level={2} />
     <ExampleContainer>
@@ -153,18 +142,11 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
-      <DxcButton mode="text" label="Text disabled" disabled icon={iconSVG} />
+      <DxcButton mode="text" label="Text disabled" disabled icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With icon" theme="light" level={4} />
-      <DxcButton label="Text" mode="text" icon={iconSVG} />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Only icon (image)" theme="light" level={4} />
-      <DxcButton
-        mode="text"
-        icon="https://www.freepnglogos.com/uploads/facebook-logo-design-1.png"
-      />
+      <DxcButton label="Text" mode="text" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <Title title="Sizes" theme="light" level={2} />
     <ExampleContainer>
@@ -181,19 +163,19 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium size icon after" theme="light" level={4} />
-      <DxcButton label="Medium" iconPosition="after" icon={iconSVG} size="medium" />
+      <DxcButton label="Medium" iconPosition="after" icon="filled_bottom_app_bar" size="medium" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium size icon before" theme="light" level={4} />
-      <DxcButton label="Medium" iconPosition="before" icon={iconSVG} size="medium" />
+      <DxcButton label="Medium" iconPosition="before" icon="filled_bottom_app_bar" size="medium" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium size icon after with ellipsis" theme="light" level={4} />
-      <DxcButton label="Medium" iconPosition="after" icon={iconSVG} size="medium" />
+      <DxcButton label="Medium" iconPosition="after" icon="filled_bottom_app_bar" size="medium" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium size icon before with ellipsis" theme="light" level={4} />
-      <DxcButton label="Medium" iconPosition="before" icon={iconSVG} size="medium" />
+      <DxcButton label="Medium" iconPosition="before" icon="filled_bottom_app_bar" size="medium" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large size" theme="light" level={4} />
@@ -205,19 +187,19 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large size icon after" theme="light" level={4} />
-      <DxcButton label="LargeSizePrimaryButton" iconPosition="after" icon={iconSVG} size="large" />
+      <DxcButton label="LargeSizePrimaryButton" iconPosition="after" icon="filled_bottom_app_bar" size="large" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large size icon before" theme="light" level={4} />
-      <DxcButton label="LargeSizePrimaryButton" iconPosition="before" icon={iconSVG} size="large" />
+      <DxcButton label="LargeSizePrimaryButton" iconPosition="before" icon="filled_bottom_app_bar" size="large" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large size icon after with ellipsis" theme="light" level={4} />
-      <DxcButton label="LargeSizePrimaryButton" iconPosition="after" icon={iconSVG} size="large" />
+      <DxcButton label="LargeSizePrimaryButton" iconPosition="after" icon="filled_bottom_app_bar" size="large" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large size icon before with ellipsis" theme="light" level={4} />
-      <DxcButton label="LargeSizePrimaryButton" iconPosition="before" icon={iconSVG} size="large" />
+      <DxcButton label="LargeSizePrimaryButton" iconPosition="before" icon="filled_bottom_app_bar" size="large" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="FillParent size" theme="light" level={4} />
@@ -269,75 +251,75 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Enabled" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcButton label="Primary" icon={iconSVG} />
+        <DxcButton label="Primary" icon="filled_bottom_app_bar" />
       </HalstackProvider>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
-      <DxcButton label="Primary hovered" icon={iconSVG} />
+      <DxcButton label="Primary hovered" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Focused" theme="light" level={4} />
-      <DxcButton label="Primary focused" icon={iconSVG} />
+      <DxcButton label="Primary focused" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Actived" theme="light" level={4} />
-      <DxcButton label="Primary actived" icon={iconSVG} />
+      <DxcButton label="Primary actived" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcButton label="Primary" icon={iconSVG} disabled />
+        <DxcButton label="Primary" icon="filled_bottom_app_bar" disabled />
       </HalstackProvider>
     </ExampleContainer>
     <Title title="Secondary" theme="light" level={3} />
     <ExampleContainer>
       <Title title="Enabled" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcButton mode="secondary" label="Secondary" icon={iconSVG} />
+        <DxcButton mode="secondary" label="Secondary" icon="filled_bottom_app_bar" />
       </HalstackProvider>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
-      <DxcButton mode="secondary" label="Secondary hovered" icon={iconSVG} />
+      <DxcButton mode="secondary" label="Secondary hovered" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Focused" theme="light" level={4} />
-      <DxcButton mode="secondary" label="Secondary focused" icon={iconSVG} />
+      <DxcButton mode="secondary" label="Secondary focused" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Actived" theme="light" level={4} />
-      <DxcButton mode="secondary" label="Secondary actived" icon={iconSVG} />
+      <DxcButton mode="secondary" label="Secondary actived" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcButton mode="secondary" label="Secondary" icon={iconSVG} disabled />
+        <DxcButton mode="secondary" label="Secondary" icon="filled_bottom_app_bar" disabled />
       </HalstackProvider>
     </ExampleContainer>
     <Title title="Text" theme="light" level={3} />
     <ExampleContainer>
       <Title title="Enabled" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcButton mode="text" label="Text" icon={iconSVG} />
+        <DxcButton mode="text" label="Text" icon="filled_bottom_app_bar" />
       </HalstackProvider>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
-      <DxcButton mode="text" label="Text hovered" icon={iconSVG} />
+      <DxcButton mode="text" label="Text hovered" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Focused" theme="light" level={4} />
-      <DxcButton mode="text" label="Text focused" icon={iconSVG} />
+      <DxcButton mode="text" label="Text focused" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Actived" theme="light" level={4} />
-      <DxcButton mode="text" label="Text actived" icon={iconSVG} />
+      <DxcButton mode="text" label="Text actived" icon="filled_bottom_app_bar" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcButton mode="text" label="Text disabled" icon={iconSVG} disabled />
+        <DxcButton mode="text" label="Text disabled" icon="filled_bottom_app_bar" disabled />
       </HalstackProvider>
     </ExampleContainer>
   </>

package/button/Button.test.js

@@ -26,11 +26,13 @@ describe("Button component tests", function () {
   test("Renders with correct accessibility attributes", function () {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         label: "Home",
-        title: "Go home"
+        title: "Go home",
+        tabIndex: 1
       })),
       getByRole = _render3.getByRole;
     var button = getByRole("button");
     expect(button.getAttribute("aria-label")).toBe("Go home");
     expect(button.getAttribute("title")).toBe("Go home");
+    expect(button.getAttribute("tabindex")).toBe("1");
   });
 });

package/button/types.d.ts

@@ -33,7 +33,7 @@ type Props = {
      */
     type?: "button" | "reset" | "submit";
     /**
-     * Element or path used as the icon that will be placed next to the label.
+     * Material Symbol name or SVG element as the icon that will be placed next to the label.
      */
     icon?: string | SVG;
     /**

package/common/coreTokens.js

@@ -9,7 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
- * Halstack Color Palette 
+ * Halstack Color Palette
  * @link https://developer.dxc.com/halstack/next/principles/color/#color-tokens-core-color-tokens
  */
 var CoreColorTokens = {
@@ -112,7 +112,7 @@ var getCoreColorToken = exports.getCoreColorToken = function getCoreColorToken(k
   return CoreColorTokens[key];
 };
 /**
- * Halstack Spacing Principles 
+ * Halstack Spacing Principles
  * @link https://developer.dxc.com/halstack/next/principles/spacing/
  */
 var SpacingTokens = {