@dxc-technology/halstack-react 4.0.0 → 6.0.0

package/accordion/Accordion.js

@@ -1,20 +1,18 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -29,135 +27,44 @@ var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/E
 
 var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _utils = require("../common/utils.js");
 
 var _variables = require("../common/variables.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
-
-var _BackgroundColorContext = require("../BackgroundColorContext.js");
-
-function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  overflow: hidden;\n  color: ", ";\n"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  overflow: hidden;\n  color: ", ";\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  padding-left: ", ";\n  padding-right: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  letter-spacing: ", ";\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: ", ";\n  text-align: end;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])([""]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  padding-left: ", ";\n  padding-right: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n"]);
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
+var _BackgroundColorContext = require("../BackgroundColorContext");
 
-  return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  min-width: 280px;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  width: ", ";\n  cursor: ", ";\n\n  .MuiPaper-root {\n    min-width: 0;\n    display: flex;\n    left: 85px;\n    background-color: ", " !important;\n    box-shadow: ", ";\n    position: static;\n    width: 100%;\n    border-radius: ", ";\n\n    &.Mui-expanded {\n      border-radius: ", ";\n    }\n    &.MuiExpansionPanel-root {\n      display: flex;\n      flex-direction: column;\n      min-height: 48px;\n    }\n    &.MuiExpansionPanel-rounded {\n      border-radius: ", ";\n    }\n    .MuiButtonBase-root.MuiExpansionPanelSummary-root {\n      min-height: 48px;\n      height: 48px;\n\n      :focus {\n        outline-color: ", ";\n        outline-style: ", ";\n        outline-width: ", ";\n        background-color: ", ";\n      }\n      :hover {\n        background-color: ", ";\n      }\n      :active {\n        background-color: ", ";\n      }\n      &.Mui-disabled {\n        opacity: 1;\n      }\n    }\n    .MuiButtonBase-root {\n      border-radius: ", ";\n\n      &.Mui-expanded {\n        border-bottom-right-radius: 0;\n        border-bottom-left-radius: 0;\n        .MuiSvgIcon-root {\n          opacity: 1;\n        }\n      }\n      &.MuiIconButton-root {\n        height: auto;\n      }\n      .MuiExpansionPanelSummary-content {\n        padding-top: ", ";\n        padding-bottom: ", ";\n        padding-right: ", ";\n        padding-left: ", ";\n        min-width: 0;\n        align-items: baseline;\n        &.Mui-expanded {\n          div:nth-child(2) {\n            opacity: 1;\n          }\n        }\n        :hover {\n          div {\n            opacity: 1;\n          }\n        }\n      }\n    }\n    .MuiTouchRipple-root {\n      display: none;\n    }\n  }\n  .MuiCollapse-hidden {\n    display: none;\n  }\n  .MuiCollapse-container {\n    border-radius: 0px 0px 4px 4px;\n    cursor: default;\n    width: 100%;\n  }\n  .MuiIconButton-label {\n    & > .MuiSvgIcon-root {\n      color: ", ";\n    }\n  }\n  .MuiExpansionPanelDetails-root {\n    padding: ", ";\n    padding-top: ", ";\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  }\n"]);
+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); }
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var DxcAccordion = function DxcAccordion(_ref) {
   var _ref$label = _ref.label,
       label = _ref$label === void 0 ? "" : _ref$label,
-      _ref$iconSrc = _ref.iconSrc,
-      iconSrc = _ref$iconSrc === void 0 ? "" : _ref$iconSrc,
+      defaultIsExpanded = _ref.defaultIsExpanded,
+      isExpanded = _ref.isExpanded,
       icon = _ref.icon,
       _ref$assistiveText = _ref.assistiveText,
       assistiveText = _ref$assistiveText === void 0 ? "" : _ref$assistiveText,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? "" : _ref$onChange,
-      isExpanded = _ref.isExpanded,
+      onChange = _ref.onChange,
       children = _ref.children,
       margin = _ref.margin,
       padding = _ref.padding,
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
 
-  var _React$useState = _react["default"].useState(false),
-      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-      innerIsExpanded = _React$useState2[0],
-      setInnerIsExpanded = _React$useState2[1];
-
-  var _useState = (0, _react.useState)(),
+  var _useState = (0, _react.useState)(defaultIsExpanded !== null && defaultIsExpanded !== void 0 ? defaultIsExpanded : false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isResponsive = _useState2[0],
-      setIsResponsive = _useState2[1];
+      innerIsExpanded = _useState2[0],
+      setInnerIsExpanded = _useState2[1];
 
   var colorsTheme = (0, _useTheme["default"])();
 
-  var handleResize = function handleResize(width) {
-    if (width) {
-      if (width <= _variables.responsiveSizes.tablet ? setIsResponsive(true) : setIsResponsive(false)) ;
-    }
-  };
-
-  var handleEventListener = function handleEventListener() {
-    handleResize(window.innerWidth);
-  };
-
-  (0, _react.useEffect)(function () {
-    window.addEventListener("resize", handleEventListener);
-    handleResize(window.innerWidth);
-    return function () {
-      window.removeEventListener("resize", handleEventListener);
-    };
-  }, []);
-
   var handlerAccordion = function handlerAccordion() {
     if (isExpanded == null) {
       setInnerIsExpanded(!innerIsExpanded);
@@ -168,32 +75,31 @@ var DxcAccordion = function DxcAccordion(_ref) {
     }
   };
 
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.accordion
-  }, _react["default"].createElement(DXCAccordion, {
+  }, /*#__PURE__*/_react["default"].createElement(DXCAccordion, {
     padding: padding,
     margin: margin,
     disabled: disabled,
-    icon: icon || iconSrc,
-    isResponsive: isResponsive
-  }, _react["default"].createElement(_ExpansionPanel["default"], {
+    icon: icon
+  }, /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], {
     disabled: disabled,
     onChange: handlerAccordion,
     expanded: isExpanded != null ? isExpanded : innerIsExpanded
-  }, _react["default"].createElement(_ExpansionPanelSummary["default"], {
-    expandIcon: _react["default"].createElement(_ExpandMore["default"], null),
+  }, /*#__PURE__*/_react["default"].createElement(_ExpansionPanelSummary["default"], {
+    expandIcon: /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], null),
     tabIndex: disabled ? -1 : tabIndex
-  }, _react["default"].createElement(AccordionInfo, {
+  }, /*#__PURE__*/_react["default"].createElement(AccordionInfo, {
     disabled: disabled
-  }, _react["default"].createElement(AccordionLabel, null, label), icon ? _react["default"].createElement(IconContainer, {
+  }, icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
     disabled: disabled
-  }, (0, _typeof2["default"])(icon) === "object" ? icon : _react["default"].createElement(icon)) : iconSrc && _react["default"].createElement(AccordionIcon, {
-    src: iconSrc
-  })), assistiveText && _react["default"].createElement(AccordionAssistiveText, {
+  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(AccordionIcon, {
+    src: icon
+  }) : icon), /*#__PURE__*/_react["default"].createElement(AccordionLabel, null, label)), assistiveText && /*#__PURE__*/_react["default"].createElement(AccordionAssistiveText, {
     disabled: disabled
-  }, assistiveText)), _react["default"].createElement(_ExpansionPanelDetails["default"], null, _react["default"].createElement(AccordionContent, {
+  }, assistiveText)), /*#__PURE__*/_react["default"].createElement(_ExpansionPanelDetails["default"], null, /*#__PURE__*/_react["default"].createElement(AccordionContent, {
     disabled: disabled
-  }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+  }, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
     color: colorsTheme.accordion.backgroundColor
   }, children))))));
 };
@@ -202,7 +108,7 @@ var calculateWidth = function calculateWidth(margin) {
   return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
 };
 
-var DXCAccordion = _styledComponents["default"].div(_templateObject(), function (props) {
+var DXCAccordion = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  min-width: 280px;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  width: ", ";\n  cursor: ", ";\n\n  .MuiPaper-root {\n    min-width: 0;\n    display: flex;\n    left: 85px;\n    background-color: ", " !important;\n    box-shadow: ", ";\n    position: static;\n    width: 100%;\n    border-radius: ", ";\n\n    &.Mui-expanded {\n      border-radius: ", ";\n    }\n    &.MuiExpansionPanel-root {\n      display: flex;\n      flex-direction: column;\n      min-height: 48px;\n    }\n    &.MuiExpansionPanel-rounded {\n      border-radius: ", ";\n    }\n    .MuiButtonBase-root.MuiExpansionPanelSummary-root {\n      min-height: 48px;\n      height: 48px;\n\n      :focus {\n        outline-color: ", ";\n        outline-style: ", ";\n        outline-width: ", ";\n        background-color: ", ";\n      }\n      :hover {\n        background-color: ", ";\n      }\n      :active {\n        background-color: ", ";\n      }\n      &.Mui-disabled {\n        opacity: 1;\n      }\n    }\n    .MuiButtonBase-root {\n      border-radius: ", ";\n\n      &.Mui-expanded {\n        border-bottom-right-radius: 0;\n        border-bottom-left-radius: 0;\n        .MuiSvgIcon-root {\n          opacity: 1;\n        }\n      }\n      &.MuiIconButton-root {\n        height: auto;\n      }\n      .MuiExpansionPanelSummary-content {\n        padding-top: ", ";\n        padding-bottom: ", ";\n        padding-right: ", ";\n        padding-left: ", ";\n        min-width: 0;\n        &.Mui-expanded {\n          div:nth-child(2) {\n            opacity: 1;\n          }\n        }\n        :hover {\n          div {\n            opacity: 1;\n          }\n        }\n      }\n    }\n    .MuiTouchRipple-root {\n      display: none;\n    }\n  }\n  .MuiCollapse-hidden {\n    display: none;\n  }\n  .MuiCollapse-container {\n    border-radius: 0px 0px 4px 4px;\n    cursor: default;\n    width: 100%;\n  }\n  .MuiIconButton-label {\n    & > .MuiSvgIcon-root {\n      color: ", ";\n    }\n  }\n  .MuiExpansionPanelDetails-root {\n    padding: ", ";\n    padding-top: ", ";\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  }\n"])), function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -217,7 +123,7 @@ var DXCAccordion = _styledComponents["default"].div(_templateObject(), function
 }, function (props) {
   return props.disabled && "not-allowed" || "pointer";
 }, function (props) {
-  return props.disabled ? props.theme.disabledBackgroundColor : props.theme.backgroundColor;
+  return props.theme.backgroundColor;
 }, function (props) {
   return "".concat(props.theme.boxShadowOffsetX, " ").concat(props.theme.boxShadowOffsetY, " ").concat(props.theme.boxShadowBlur, " ").concat(props.theme.boxShadowColor);
 }, function (props) {
@@ -262,7 +168,7 @@ var DXCAccordion = _styledComponents["default"].div(_templateObject(), function
   return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
 });
 
-var AccordionInfo = _styledComponents["default"].div(_templateObject2(), function (props) {
+var AccordionInfo = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  padding-left: ", ";\n  padding-right: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n"])), function (props) {
   return props.theme.titlePaddingLeft;
 }, function (props) {
   return props.theme.titlePaddingRight;
@@ -278,11 +184,11 @@ var AccordionInfo = _styledComponents["default"].div(_templateObject2(), functio
   return props.disabled ? props.theme.disabledTitleLabelFontColor : props.theme.titleLabelFontColor;
 });
 
-var AccordionLabel = _styledComponents["default"].div(_templateObject3());
+var AccordionLabel = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])([""])));
 
-var AccordionContent = _styledComponents["default"].div(_templateObject4());
+var AccordionContent = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n"])));
 
-var AccordionAssistiveText = _styledComponents["default"].div(_templateObject5(), function (props) {
+var AccordionAssistiveText = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  padding-left: ", ";\n  padding-right: ", ";\n  font-size: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  letter-spacing: ", ";\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: ", ";\n  text-align: end;\n"])), function (props) {
   return props.theme.assistiveTextPaddingLeft;
 }, function (props) {
   return props.theme.assistiveTextPaddingRight;
@@ -302,7 +208,7 @@ var AccordionAssistiveText = _styledComponents["default"].div(_templateObject5()
   return props.theme.assistiveTextMinWidth;
 });
 
-var IconContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
+var IconContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  overflow: hidden;\n  color: ", ";\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.theme.iconSize;
 }, function (props) {
   return props.theme.iconSize;
@@ -314,40 +220,7 @@ var IconContainer = _styledComponents["default"].div(_templateObject6(), functio
   return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
 });
 
-var AccordionIcon = _styledComponents["default"].img(_templateObject7(), function (props) {
-  return props.theme.iconSize;
-}, function (props) {
-  return props.theme.iconSize;
-}, function (props) {
-  return props.theme.iconMarginLeft;
-}, function (props) {
-  return props.theme.iconMarginRigth;
-}, function (props) {
-  return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
-});
+var AccordionIcon = _styledComponents["default"].img(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])([""])));
 
-DxcAccordion.propTypes = {
-  label: _propTypes["default"].string,
-  iconSrc: _propTypes["default"].string,
-  icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
-  assistiveText: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func,
-  isExpanded: _propTypes["default"].bool,
-  children: _propTypes["default"].element,
-  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)))]),
-  padding: _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 = DxcAccordion;
 exports["default"] = _default;

package/accordion/Accordion.stories.tsx

@@ -0,0 +1,307 @@
+import React from "react";
+import DxcAccordion from "./Accordion";
+import DxcHeading from "../heading/Heading";
+import DxcTextInput from "../text-input/TextInput";
+import DxcButton from "../button/Button";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { HalstackProvider } from "../HalstackContext";
+
+export default {
+  title: "Accordion",
+  component: DxcAccordion,
+};
+
+const folderIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    enableBackground="new 0 0 24 24"
+    height="24px"
+    viewBox="0 0 24 24"
+    width="24px"
+    fill="currentColor"
+  >
+    <g>
+      <rect fill="none" height="24" width="24" />
+    </g>
+    <g>
+      <path d="M20,6h-8l-2-2H4C2.9,4,2.01,4.9,2.01,6L2,18c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z M16,16h2v-2h-2v-2 h2v-2h-2V8h4v10h-4V16z M16,16h-2v2H4V6h5.17l2,2H14v2h2v2h-2v2h2V16z" />
+    </g>
+  </svg>
+);
+
+const thumbIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="currentColor">
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z" />
+  </svg>
+);
+
+const advancedTheme = {
+  accordion: {
+    backgroundColor: "#000000",
+    assistiveTextFontColor: "#ffffff",
+    titleLabelFontColor: "#ffffff",
+    arrowColor: "#5f249f",
+    iconColor: "#5f249f",
+  },
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="Component anatomy" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="With label" theme="light" level={4} />
+      <DxcAccordion label="Accordion">
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+          lobortis eget.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With assistive text" theme="light" level={4} />
+      <DxcAccordion label="Accordion" assistiveText="Assistive text">
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+          lobortis eget.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With icon" theme="light" level={4} />
+      <DxcAccordion label="Accordion" assistiveText="Assistive text" icon={folderIcon}>
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+          lobortis eget.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With bigger icon 48x48" theme="light" level={4} />
+      <DxcAccordion label="Accordion" assistiveText="Assistive text" icon={thumbIcon}>
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+          lobortis eget.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <Title title="States" theme="light" level={2} />
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused" theme="light" level={4} />
+      <DxcAccordion label="Focused">
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+          lobortis eget.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <DxcAccordion label="Hovered">
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+          lobortis eget.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Active" theme="light" level={4} />
+      <DxcAccordion label="Active">
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+          lobortis eget.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <DxcAccordion label="Disabled" assistiveText="Assistive text" icon={folderIcon} disabled>
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+          lobortis eget.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Background color provider over accordion content" theme="light" level={4} />
+      <HalstackProvider advancedTheme={advancedTheme}>
+        <DxcAccordion
+          label="Dark Accordion"
+          defaultIsExpanded
+          assistiveText="Assistive text"
+          icon={folderIcon}
+          padding="medium"
+        >
+          <div style={{ display: "flex", flexDirection: "column" }}>
+            <DxcTextInput
+              label="Label"
+              helperText="HelperText"
+              placeholder="Placeholder"
+              size="fillParent"
+              margin={{ bottom: "medium" }}
+            />
+            <DxcButton label="Submit" size="medium" />
+          </div>
+        </DxcAccordion>
+      </HalstackProvider>
+    </ExampleContainer>
+    <Title title="Paddings" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall padding" theme="light" level={4} />
+      <DxcAccordion label="Xxsmall padding" defaultIsExpanded padding="xxsmall">
+        <div>
+          <DxcHeading level={5} text="Content header" margin={{ bottom: "xxsmall" }} />
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall padding" theme="light" level={4} />
+      <DxcAccordion label="Xsmall padding" defaultIsExpanded padding="xsmall">
+        <div>
+          <DxcHeading level={5} text="Content header" margin={{ bottom: "xxsmall" }} />
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small padding" theme="light" level={4} />
+      <DxcAccordion label="Small padding" defaultIsExpanded padding="small">
+        <div>
+          <DxcHeading level={5} text="Content header" margin={{ bottom: "xxsmall" }} />
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium padding" theme="light" level={4} />
+      <DxcAccordion label="Medium padding" defaultIsExpanded padding="medium">
+        <div>
+          <DxcHeading level={5} text="Content header" margin={{ bottom: "xxsmall" }} />
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large padding" theme="light" level={4} />
+      <DxcAccordion label="Large padding" defaultIsExpanded padding="large">
+        <div>
+          <DxcHeading level={5} text="Content header" margin={{ bottom: "xxsmall" }} />
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge padding" theme="light" level={4} />
+      <DxcAccordion label="Xlarge padding" defaultIsExpanded padding="xlarge">
+        <div>
+          <DxcHeading level={5} text="Content header" margin={{ bottom: "xxsmall" }} />
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge padding" theme="light" level={4} />
+      <DxcAccordion label="Xxlarge padding" defaultIsExpanded padding="xxlarge">
+        <div>
+          <DxcHeading level={5} text="Content header" margin={{ bottom: "xxsmall" }} />
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall margin" theme="light" level={4} />
+      <DxcAccordion label="Xxsmall margin" margin="xxsmall">
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+          lobortis eget.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall margin" theme="light" level={4} />
+      <DxcAccordion label="Xsmall margin" margin="xsmall">
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+          lobortis eget.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small margin" theme="light" level={4} />
+      <DxcAccordion label="Small margin" margin="small">
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+          lobortis eget.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium margin" theme="light" level={4} />
+      <DxcAccordion label="Medium margin" margin="medium">
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+          lobortis eget.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large margin" theme="light" level={4} />
+      <DxcAccordion label="Large margin" margin="large">
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+          lobortis eget.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge margin" theme="light" level={4} />
+      <DxcAccordion label="Xlarge margin" margin="xlarge">
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+          lobortis eget.
+        </div>
+      </DxcAccordion>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge margin" theme="light" level={4} />
+      <DxcAccordion label="Xxlarge margin" margin="xxlarge">
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+          lobortis eget.
+        </div>
+      </DxcAccordion>
+      <hr />
+    </ExampleContainer>
+  </>
+);