@dxc-technology/halstack-react 0.0.0-64f5836 → 0.0.0-6501724

package/checkbox/Checkbox.test.js

@@ -0,0 +1,155 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _Checkbox = _interopRequireDefault(require("./Checkbox.tsx"));
+
+describe("Checkbox component tests", function () {
+  test("Checkbox renders with correct aria-labelledby and aria-required", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Checkbox"
+    })),
+        getByText = _render.getByText,
+        getByRole = _render.getByRole;
+
+    var labelId = getByText("Checkbox").getAttribute("id");
+    expect(getByRole("checkbox").getAttribute("aria-labelledby")).toBe(labelId);
+    expect(getByRole("checkbox").getAttribute("aria-required")).toBe("true");
+  });
+  test("Optional checkbox renders with correct aria-required", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Checkbox",
+      optional: true
+    })),
+        getByRole = _render2.getByRole;
+
+    expect(getByRole("checkbox").getAttribute("aria-required")).toBe("false");
+  });
+  test("Calls correct function on click", function () {
+    var onChange = jest.fn();
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Checkbox",
+      onChange: onChange
+    })),
+        getByText = _render3.getByText;
+
+    _react2.fireEvent.click(getByText("Checkbox"));
+
+    expect(onChange).toHaveBeenCalled();
+  });
+  test("Uncontrolled checkbox", function () {
+    var onChange = jest.fn();
+    var component = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Checkbox",
+      onChange: onChange,
+      name: "test"
+    }));
+    var visibleCheckbox = component.getByText("Checkbox");
+    var input = component.getByRole("checkbox");
+    var submitInput = component.container.querySelector("input[name=\"test\"]");
+    expect(input.getAttribute("aria-checked")).toBe("false");
+    expect(submitInput.checked).toBe(false);
+
+    _react2.fireEvent.click(visibleCheckbox);
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith(true);
+    expect(input.getAttribute("aria-checked")).toBe("true");
+    expect(submitInput.checked).toBe(true);
+  });
+  test("Controlled checkbox", function () {
+    var onChange = jest.fn();
+    var component = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Checkbox",
+      checked: false,
+      onChange: onChange,
+      name: "test"
+    }));
+    var input = component.getByRole("checkbox");
+    var visibleCheckbox = component.getByText("Checkbox");
+    var submitInput = component.container.querySelector("input[name=\"test\"]");
+
+    _react2.fireEvent.click(visibleCheckbox);
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith(true);
+    expect(input.getAttribute("aria-checked")).toBe("false");
+    expect(submitInput.checked).toBe(false);
+  });
+  test("Renders with correct initial value and initial state when it is uncontrolled", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Default label",
+      defaultChecked: true,
+      value: "test-defaultChecked",
+      name: "test"
+    })),
+        getByRole = _render4.getByRole,
+        container = _render4.container;
+
+    var checkbox = getByRole("checkbox");
+    var submitInput = container.querySelector("input[name=\"test\"]");
+    expect(submitInput.value).toBe("test-defaultChecked");
+    expect(checkbox.getAttribute("aria-checked")).toBe("true");
+    expect(submitInput.checked).toBe(true);
+  });
+  test("Test disable keyboard and mouse interactions", function () {
+    var onChange = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Checkbox",
+      onChange: onChange,
+      disabled: true,
+      name: "test"
+    })),
+        getByRole = _render5.getByRole,
+        getByText = _render5.getByText,
+        container = _render5.container;
+
+    var input = getByRole("checkbox");
+    var visibleCheckbox = getByText("Checkbox");
+    var submitInput = container.querySelector("input[name=\"test\"]");
+
+    _react2.fireEvent.click(visibleCheckbox);
+
+    expect(onChange).toHaveBeenCalledTimes(0);
+    expect(input.getAttribute("aria-checked")).toBe("false");
+    expect(input.getAttribute("aria-disabled")).toBe("true");
+    expect(submitInput.checked).toBe(false);
+
+    _userEvent["default"].tab();
+
+    expect(document.activeElement === input).toBeFalsy();
+  });
+  test("Test keyboard interactions", function () {
+    var onChange = jest.fn();
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Checkbox",
+      name: "test",
+      onChange: onChange
+    })),
+        getByRole = _render6.getByRole;
+
+    var checkbox = getByRole("checkbox");
+
+    _userEvent["default"].tab();
+
+    expect(document.activeElement === checkbox).toBeTruthy();
+
+    _react2.fireEvent.keyDown(checkbox, {
+      key: " ",
+      code: "Space",
+      keyCode: 32,
+      charCode: 32
+    });
+
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+});

package/checkbox/types.d.ts

@@ -1,4 +1,3 @@
-declare type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
 declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
 declare type Margin = {
     top?: Space;
@@ -7,6 +6,10 @@ declare type Margin = {
     right?: Space;
 };
 declare type Props = {
+    /**
+     * Initial state of the checkbox, only when it is uncontrolled.
+     */
+    defaultChecked?: boolean;
     /**
      * If true, the component is checked. If undefined the component will be
      * uncontrolled and the value will be managed internally by the component.
@@ -34,14 +37,14 @@ declare type Props = {
      */
     disabled?: boolean;
     /**
-     * If true, the checkbox will change its appearence, showing that the value is required.
+     * If true, the component will display '(Optional)' next to the label.
      */
-    required?: boolean;
+    optional?: boolean;
     /**
      * This function will be called when the user clicks the checkbox.
      * The new value will be passed as a parameter.
      */
-    onChange?: (val: boolean) => void;
+    onChange?: (value: boolean) => void;
     /**
      * Size of the margin to be applied to the component
      * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
@@ -50,12 +53,16 @@ declare type Props = {
      */
     margin?: Space | Margin;
     /**
-     * Size of the component ('small' | 'medium' | 'large' | 'fillParent' | 'fitContent').
+     * Size of the component.
      */
-    size?: Size;
+    size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
     /**
      * Value of the tabindex.
      */
     tabIndex?: number;
 };
+/**
+ * Reference to the component.
+ */
+export declare type RefType = HTMLDivElement;
 export default Props;

package/chip/Chip.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import ChipPropsType from "./types";
+declare const DxcChip: ({ label, suffixIcon, prefixIcon, onClickSuffix, onClickPrefix, disabled, margin, tabIndex, }: ChipPropsType) => JSX.Element;
+export default DxcChip;

package/chip/Chip.js

@@ -9,25 +9,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _variables = require("../common/variables");
 
-var _variables = require("../common/variables.js");
+var _utils = require("../common/utils");
 
-var _utils = require("../common/utils.js");
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3;
 
 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); }
 
@@ -37,9 +33,7 @@ var DxcChip = function DxcChip(_ref) {
   var label = _ref.label,
       suffixIcon = _ref.suffixIcon,
       prefixIcon = _ref.prefixIcon,
-      suffixIconSrc = _ref.suffixIconSrc,
       onClickSuffix = _ref.onClickSuffix,
-      prefixIconSrc = _ref.prefixIconSrc,
       onClickPrefix = _ref.onClickPrefix,
       disabled = _ref.disabled,
       margin = _ref.margin,
@@ -48,69 +42,42 @@ var DxcChip = function DxcChip(_ref) {
   var colorsTheme = (0, _useTheme["default"])();
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.chip
-  }, /*#__PURE__*/_react["default"].createElement(StyledDxcChip, {
+  }, /*#__PURE__*/_react["default"].createElement(Chip, {
     disabled: disabled,
     margin: margin
-  }, prefixIcon ? /*#__PURE__*/_react["default"].createElement(IconContainer, {
-    disabled: disabled,
-    prefixIcon: true,
-    label: label,
-    mode: "prefix",
-    tabIndex: typeof onClickPrefix === "function" && !disabled ? tabIndex : -1,
-    onClick: function onClick() {
-      return onClickPrefix && !disabled && onClickPrefix(label);
-    },
-    interactuable: typeof onClickPrefix === "function" && !disabled
-  }, (0, _typeof2["default"])(prefixIcon) === "object" ? prefixIcon : /*#__PURE__*/_react["default"].createElement(prefixIcon)) : prefixIconSrc && /*#__PURE__*/_react["default"].createElement(PrefixIconContainer, {
+  }, prefixIcon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
+    role: typeof onClickPrefix === "function" ? "button" : undefined,
     disabled: disabled,
-    src: prefixIconSrc,
-    label: label,
+    interactuable: typeof onClickPrefix === "function" && !disabled,
     tabIndex: typeof onClickPrefix === "function" && !disabled ? tabIndex : -1,
     onClick: function onClick() {
-      return onClickPrefix && !disabled && onClickPrefix(label);
-    },
-    interactuable: typeof onClickPrefix === "function" && !disabled
-  }), label && /*#__PURE__*/_react["default"].createElement(ChipTextContainer, {
-    disabled: disabled,
-    prefixIconSrc: prefixIconSrc,
-    suffixIconSrc: suffixIconSrc
-  }, label), suffixIcon ? /*#__PURE__*/_react["default"].createElement(IconContainer, {
+      return onClickPrefix && !disabled && onClickPrefix();
+    }
+  }, typeof prefixIcon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
+    src: prefixIcon
+  }) : prefixIcon), label && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
+    disabled: disabled
+  }, label), suffixIcon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
+    role: typeof onClickSuffix === "function" ? "button" : undefined,
     disabled: disabled,
-    suffixIcon: true,
-    mode: "suffix",
-    label: label,
+    interactuable: typeof onClickSuffix === "function" && !disabled,
     tabIndex: typeof onClickSuffix === "function" && !disabled ? tabIndex : -1,
     onClick: function onClick() {
-      return onClickSuffix && !disabled && onClickSuffix(label);
-    },
-    interactuable: typeof onClickSuffix === "function" && !disabled
-  }, (0, _typeof2["default"])(suffixIcon) === "object" ? suffixIcon : /*#__PURE__*/_react["default"].createElement(suffixIcon)) : suffixIconSrc && /*#__PURE__*/_react["default"].createElement(SuffixIconContainer, {
-    disabled: disabled,
-    src: suffixIconSrc,
-    label: label,
-    tabIndex: typeof onClickSuffix === "function" && !disabled ? tabIndex : -1,
-    onClick: function onClick() {
-      return onClickSuffix && !disabled && onClickSuffix(label);
-    },
-    interactuable: typeof onClickSuffix === "function" && !disabled
-  })));
+      return !disabled && (onClickSuffix === null || onClickSuffix === void 0 ? void 0 : onClickSuffix());
+    }
+  }, typeof suffixIcon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
+    src: suffixIcon
+  }) : suffixIcon)));
 };
 
-var getCursor = function getCursor(interactuable, disabled) {
-  if (disabled) {
-    return "cursor:not-allowed;";
-  }
-
-  if (interactuable) {
-    return "cursor:pointer;";
-  }
-
-  return "cursor:default; outline:none;";
+var calculateWidth = function calculateWidth(margin) {
+  return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
 };
 
-var StyledDxcChip = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  align-items: center;\n  min-height: 40px;\n  max-width: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  cursor: ", ";\n"])), function (_ref2) {
-  var margin = _ref2.margin;
-  return "calc(100% - 40px - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
+var Chip = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  min-height: 40px;\n  max-width: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  cursor: ", ";\n"])), function (props) {
+  return props.theme.iconSpacing;
+}, function (props) {
+  return calculateWidth(props.margin);
 }, function (props) {
   return props.disabled && props.theme.disabledBackgroundColor || props.theme.backgroundColor;
 }, function (props) {
@@ -139,12 +106,12 @@ var StyledDxcChip = _styledComponents["default"].div(_templateObject || (_templa
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
-}, function (_ref3) {
-  var disabled = _ref3.disabled;
+}, function (_ref2) {
+  var disabled = _ref2.disabled;
   return disabled && "not-allowed";
 });
 
-var ChipTextContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  color: ", ";\n  cursor: ", ";\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])), function (props) {
+var LabelContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  font-size: ", ";\n  font-family: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  color: ", ";\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])), function (props) {
   return props.theme.fontSize;
 }, function (props) {
   return props.theme.fontFamily;
@@ -154,68 +121,20 @@ var ChipTextContainer = _styledComponents["default"].span(_templateObject2 || (_
   return props.theme.fontStyle;
 }, function (props) {
   return props.disabled ? props.theme.disabledFontColor : props.theme.fontColor;
-}, function (_ref4) {
-  var disabled = _ref4.disabled;
-  return disabled && "not-allowed" || "default";
-});
-
-var SuffixIconContainer = _styledComponents["default"].img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  ", "\n  margin-left: ", ";\n  width: ", ";\n  height: ", ";\n"])), function (props) {
-  return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
-}, function (props) {
-  return getCursor(props.interactuable, props.disabled);
-}, function (props) {
-  return (props.label || props.suffixIconSrc) && props.theme.iconSpacing || props.prefixIconSrc && "5px";
-}, function (props) {
-  return props.theme.iconSize;
-}, function (props) {
-  return props.theme.iconSize;
 });
 
-var PrefixIconContainer = _styledComponents["default"].img(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  ", "\n  margin-right: ", ";\n  width: ", ";\n  height: ", ";\n"])), function (props) {
+var IconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  border-radius: 0.25rem;\n  color: ", ";\n  ", "\n\n  ", "\n\n  img,\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) {
   return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
+}, function (_ref3) {
+  var interactuable = _ref3.interactuable;
+  return interactuable && "cursor: pointer;";
 }, function (props) {
-  return getCursor(props.interactuable, props.disabled);
-}, function (props) {
-  return (props.label || props.suffixIconSrc) && props.theme.iconSpacing || props.prefixIconSrc && "5px";
-}, function (props) {
-  return props.theme.iconSize;
-}, function (props) {
-  return props.theme.iconSize;
-});
-
-var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  ", "\n  ", "\n  width: ", ";\n  height: ", ";\n  overflow: hidden;\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n  &:focus {\n    outline-color: ", ";\n    outline-width: 2px;\n    ", "\n  }\n"])), function (props) {
-  return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
-}, function (props) {
-  return props.prefixIcon ? "margin-right: ".concat((props.label || props.suffixIcon || props.suffixIconSrc) && props.theme.iconSpacing || (props.prefixIcon || props.prefixIconSrc) && "0", ";") : "margin-left: ".concat((props.label || props.prefixIcon || props.prefixIconSrc) && props.theme.iconSpacing || (props.prefixIcon || props.prefixIconSrc) && "0", ";");
-}, function (props) {
-  return getCursor(props.interactuable, props.disabled);
+  return props.interactuable && "\n      &:hover {\n        color: ".concat(props.theme.hoverIconColor, ";\n      }\n      &:focus,\n      &:focus-visible {\n        outline: ").concat(props.theme.focusBorderThickness, " solid ").concat(props.theme.focusColor, ";\n      }\n      &:active {\n        color: ").concat(props.theme.activeIconColor, ";\n      }\n    ");
 }, function (props) {
   return props.theme.iconSize;
 }, function (props) {
   return props.theme.iconSize;
-}, function (props) {
-  return props.theme.focusColor;
-}, function (props) {
-  return props.disabled && "outline: none;";
 });
 
-DxcChip.propTypes = {
-  label: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  theme: _propTypes["default"].oneOf(["dark", "light"]),
-  suffixIcon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
-  prefixIcon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
-  suffixIconSrc: _propTypes["default"].string,
-  prefixIconSrc: _propTypes["default"].string,
-  onClickSuffix: _propTypes["default"].func,
-  onClickPrefix: _propTypes["default"].func,
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
-  tabIndex: _propTypes["default"].number
-};
 var _default = DxcChip;
 exports["default"] = _default;

package/chip/Chip.stories.tsx

@@ -0,0 +1,214 @@
+import React from "react";
+import { userEvent, within } from "@storybook/testing-library";
+import DxcChip from "./Chip";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { HalstackProvider } from "../HalstackContext";
+
+export default {
+  title: "Chip",
+  component: DxcChip,
+};
+
+const iconSVG = (
+  <svg
+    version="1.1"
+    id="Capa_1"
+    x="0px"
+    y="0px"
+    width="438.536px"
+    height="438.536px"
+    viewBox="0 0 438.536 438.536"
+    fill="currentColor"
+  >
+    <g>
+      <path
+        d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
+C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
+h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
+C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
+c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
+c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
+      />
+    </g>
+  </svg>
+);
+
+const smallIconSVG = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20">
+    <path d="m10 17-1.042-.938q-2.083-1.854-3.437-3.177-1.354-1.323-2.136-2.354Q2.604 9.5 2.302 8.646 2 7.792 2 6.896q0-1.854 1.271-3.125T6.396 2.5q1.021 0 1.979.438.958.437 1.625 1.229.667-.792 1.625-1.229.958-.438 1.979-.438 1.854 0 3.125 1.271T18 6.896q0 .896-.292 1.729-.291.833-1.073 1.854-.781 1.021-2.145 2.365-1.365 1.344-3.49 3.26Zm0-2.021q1.938-1.729 3.188-2.948 1.25-1.219 1.989-2.125.74-.906 1.031-1.614.292-.709.292-1.396 0-1.229-.833-2.063Q14.833 4 13.604 4q-.729 0-1.364.302-.636.302-1.094.844L10.417 6h-.834l-.729-.854q-.458-.542-1.114-.844Q7.083 4 6.396 4q-1.229 0-2.063.833-.833.834-.833 2.063 0 .687.271 1.364.271.678.989 1.573.719.896 1.98 2.125Q8 13.188 10 14.979Zm0-5.5Z" />
+  </svg>
+);
+
+const opinionatedTheme = {
+  chip: {
+    baseColor: "#e6e6e6",
+    fontColor: "#000000",
+    iconColor: "#4d4d4d",
+  },
+};
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Basic chip" theme="light" level={4} />
+      <DxcChip label="Default Chip" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Chip with prefix SVG (small icon)" theme="light" level={4} />
+      <DxcChip label="Chip with prefix" prefixIcon={smallIconSVG} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Chip with suffix SVG (large icon)" theme="light" level={4} />
+      <DxcChip label="Chip with suffix" suffixIcon={iconSVG} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Chip with prefix (SVG) and suffix (URL)" theme="light" level={4} />
+      <DxcChip
+        label="Chip with prefix and suffix"
+        prefixIcon={iconSVG}
+        suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled chip" theme="light" level={4} />
+      <DxcChip
+        label="Disabled"
+        disabled
+        prefixIcon={iconSVG}
+        suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Chip with ellipsis" theme="light" level={4} />
+      <div style={{ width: "200px" }}>
+        <DxcChip label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf  afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasd fg ssssssssssss ssss" />
+      </div>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Chip with ellipsis and suffix" theme="light" level={4} />
+      <div style={{ width: "200px" }}>
+        <DxcChip
+          suffixIcon={iconSVG}
+          label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf  afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasd fgsss"
+        />
+      </div>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Chip with ellipsis and prefix" theme="light" level={4} />
+      <div style={{ width: "200px" }}>
+        <DxcChip
+          prefixIcon={iconSVG}
+          label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf  afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasd fgsss"
+        />
+      </div>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Chip with ellipsis, suffix and prefix" theme="light" level={4} />
+      <div style={{ width: "200px" }}>
+        <DxcChip
+          prefixIcon={iconSVG}
+          suffixIcon={iconSVG}
+          label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf  afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasdf"
+        />
+      </div>
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall margin" theme="light" level={4} />
+      <DxcChip label="xxsmall" margin="xxsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall margin" theme="light" level={4} />
+      <DxcChip label="xsmall" margin="xsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small margin" theme="light" level={4} />
+      <DxcChip label="small" margin="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium margin" theme="light" level={4} />
+      <DxcChip label="medium" margin="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large margin" theme="light" level={4} />
+      <DxcChip label="large" margin="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge margin" theme="light" level={4} />
+      <DxcChip label="xlarge" margin="xlarge" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge margin" theme="light" level={4} />
+      <DxcChip label="xxlarge" margin="xxlarge" />
+    </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Chip with prefix and suffix" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcChip
+          label="Chip"
+          prefixIcon={iconSVG}
+          suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Chip with prefix and suffix" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcChip
+          label="Chip"
+          disabled
+          prefixIcon={iconSVG}
+          suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcChip
+          label="Chip"
+          prefixIcon={iconSVG}
+          suffixIcon={iconSVG}
+          onClickPrefix={() => {}}
+          onClickSuffix={() => {}}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Actived" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcChip
+          label="Chip"
+          prefixIcon={iconSVG}
+          suffixIcon={iconSVG}
+          onClickPrefix={() => {}}
+          onClickSuffix={() => {}}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+  </>
+);
+const ChipPrefixFocused = () => (
+  <ExampleContainer>
+    <Title title="Chip with prefix" theme="light" level={4} />
+    <DxcChip label="Chip with prefix" prefixIcon={iconSVG} onClickPrefix={() => {}} />
+  </ExampleContainer>
+);
+const ChipSuffixFocused = () => (
+  <ExampleContainer>
+    <Title title="Chip with suffix" theme="light" level={4} />
+    <DxcChip label="Chip with suffix" suffixIcon="https://icons-for-free.com/download-icon-close+icon-1320184117228553763_512.png" onClickSuffix={() => {}} />
+  </ExampleContainer>
+);
+
+export const PrefixFocused = ChipPrefixFocused.bind({});
+PrefixFocused.play = async () => {
+  await userEvent.tab();
+};
+
+export const SuffixFocused = ChipSuffixFocused.bind({});
+SuffixFocused.play = async () => {
+  await userEvent.tab();
+};