@dxc-technology/halstack-react 0.0.0-9e83fd2 → 0.0.0-9f6fced

package/HalstackContext.js

@@ -1,36 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.HalstackProvider = exports.HalstackLanguageContext = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _color = _interopRequireDefault(require("color"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _variables = require("./common/variables");
-
 var _templateObject;
-
-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); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(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; }
-
+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" != _typeof(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 && {}.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; }
 var HalstackContext = /*#__PURE__*/_react["default"].createContext(null);
-
-var HalstackLanguageContext = /*#__PURE__*/_react["default"].createContext(null);
-
-exports.HalstackLanguageContext = HalstackLanguageContext;
-
+var HalstackLanguageContext = exports.HalstackLanguageContext = /*#__PURE__*/_react["default"].createContext(null);
 var addLightness = function addLightness(newLightness, hexColor) {
   try {
     if (hexColor) {
@@ -43,7 +28,6 @@ var addLightness = function addLightness(newLightness, hexColor) {
     return null;
   }
 };
-
 var subLightness = function subLightness(newLightness, hexColor) {
   try {
     if (hexColor) {
@@ -56,7 +40,6 @@ var subLightness = function subLightness(newLightness, hexColor) {
     return null;
   }
 };
-
 var parseAdvancedTheme = function parseAdvancedTheme(advancedTheme) {
   var allTokensCopy = JSON.parse(JSON.stringify(_variables.componentTokens));
   Object.keys(allTokensCopy).map(function (component) {
@@ -70,10 +53,8 @@ var parseAdvancedTheme = function parseAdvancedTheme(advancedTheme) {
   });
   return allTokensCopy;
 };
-
 var parseTheme = function parseTheme(theme) {
   var _theme$alert$baseColo, _theme$alert, _theme$alert$accentCo, _theme$alert2, _theme$alert$accentCo2, _theme$alert3, _theme$alert$overlayC, _theme$alert4, _theme$accordion$assi, _theme$accordion, _theme$accordion$titl, _theme$accordion2, _theme$accordion$acce, _theme$accordion3, _theme$accordion$acce2, _theme$accordion4, _addLightness, _theme$accordion5, _theme$box$baseColor, _theme$box, _theme$button$primary, _theme$button, _theme$button$baseCol, _theme$button2, _theme$button$baseCol2, _theme$button3, _theme$button$seconda, _theme$button4, _theme$button$baseCol3, _theme$button5, _theme$button$baseCol4, _theme$button6, _theme$button$baseCol5, _theme$button7, _subLightness, _theme$button8, _subLightness2, _theme$button9, _subLightness3, _theme$button10, _addLightness2, _theme$button11, _addLightness3, _theme$button12, _theme$checkbox$baseC, _theme$checkbox, _theme$checkbox$baseC2, _theme$checkbox2, _theme$checkbox$check, _theme$checkbox3, _theme$checkbox$fontC, _theme$checkbox4, _subLightness4, _theme$checkbox5, _subLightness5, _theme$checkbox6, _theme$chip$baseColor, _theme$chip, _theme$chip$fontColor, _theme$chip2, _theme$chip$iconColor, _theme$chip3, _subLightness6, _theme$chip4, _subLightness7, _theme$chip5, _theme$dateInput$base, _theme$dateInput, _theme$dateInput$sele, _theme$dateInput2, _subLightness8, _theme$dateInput3, _theme$dateInput$sele2, _theme$dateInput4, _theme$dateInput$base2, _theme$dateInput5, _subLightness9, _theme$dateInput6, _theme$dateInput$sele3, _theme$dateInput7, _addLightness4, _theme$dateInput8, _addLightness5, _theme$dateInput9, _addLightness6, _theme$dateInput10, _theme$dialog$baseCol, _theme$dialog, _theme$dialog$closeIc, _theme$dialog2, _theme$dialog$overlay, _theme$dialog3, _theme$dropdown$baseC, _theme$dropdown, _theme$dropdown$fontC, _theme$dropdown2, _theme$dropdown$fontC2, _theme$dropdown3, _theme$dropdown$fontC3, _theme$dropdown4, _theme$dropdown$optio, _theme$dropdown5, _theme$dropdown$optio2, _theme$dropdown6, _subLightness10, _theme$dropdown7, _subLightness11, _theme$dropdown8, _subLightness12, _theme$dropdown9, _subLightness13, _theme$dropdown10, _theme$fileInput$font, _theme$fileInput, _theme$fileInput$font2, _theme$fileInput2, _theme$fileInput$font3, _theme$fileInput3, _theme$fileInput$font4, _theme$fileInput4, _theme$footer$baseCol, _theme$footer, _theme$footer$fontCol, _theme$footer2, _theme$footer$fontCol2, _theme$footer3, _theme$footer$fontCol3, _theme$footer4, _theme$footer$accentC, _theme$footer5, _theme$footer$logo, _theme$footer6, _theme$header$baseCol, _theme$header, _theme$header$accentC, _theme$header2, _theme$header$menuBas, _theme$header3, _theme$header$fontCol, _theme$header4, _theme$header$hamburg, _theme$header5, _addLightness7, _theme$header6, _theme$header$logo, _theme$header7, _theme$header$logoRes, _theme$header8, _theme$header$content, _theme$header9, _theme$header$overlay, _theme$header10, _theme$link$baseColor, _theme$link, _theme$link$baseColor2, _theme$link2, _theme$navTabs$baseCo, _theme$navTabs, _theme$navTabs$baseCo2, _theme$navTabs2, _theme$navTabs$baseCo3, _theme$navTabs3, _theme$navTabs$baseCo4, _theme$navTabs4, _theme$navTabs$accent, _theme$navTabs5, _addLightness8, _theme$navTabs6, _addLightness9, _theme$navTabs7, _theme$paginator$base, _theme$paginator, _theme$paginator$font, _theme$paginator2, _theme$progressBar$ac, _theme$progressBar, _theme$progressBar$ba, _theme$progressBar2, _theme$progressBar$fo, _theme$progressBar3, _theme$progressBar$fo2, _theme$progressBar4, _theme$progressBar$fo3, _theme$progressBar5, _theme$progressBar$ov, _theme$progressBar6, _theme$progressBar$ov2, _theme$progressBar7, _theme$quickNav$fontC, _theme$quickNav, _theme$quickNav$accen, _theme$quickNav2, _theme$radioGroup$bas, _theme$radioGroup, _theme$radioGroup$fon, _theme$radioGroup2, _theme$radioGroup$fon2, _theme$radioGroup3, _theme$radioGroup$fon3, _theme$radioGroup4, _subLightness14, _theme$radioGroup5, _subLightness15, _theme$radioGroup6, _theme$select$selecte, _theme$select, _theme$select$fontCol, _theme$select2, _theme$select$fontCol2, _theme$select3, _theme$select$fontCol3, _theme$select4, _theme$select$optionF, _theme$select5, _addLightness10, _theme$select6, _theme$select$fontCol4, _theme$select7, _theme$select$hoverBo, _theme$select8, _subLightness16, _theme$select9, _subLightness17, _theme$select10, _theme$sidenav$baseCo, _theme$sidenav, _theme$slider$fontCol, _theme$slider, _theme$slider$fontCol2, _theme$slider2, _theme$slider$fontCol3, _theme$slider3, _theme$slider$baseCol, _theme$slider4, _theme$slider$baseCol2, _theme$slider5, _theme$slider$baseCol3, _theme$slider6, _theme$slider$baseCol4, _theme$slider7, _theme$slider$totalLi, _theme$slider8, _subLightness18, _theme$slider9, _subLightness19, _theme$slider10, _theme$spinner$accent, _theme$spinner, _theme$spinner$baseCo, _theme$spinner2, _theme$spinner$overla, _theme$spinner3, _theme$spinner$fontCo, _theme$spinner4, _theme$spinner$fontCo2, _theme$spinner5, _theme$spinner$overla2, _theme$spinner6, _theme$spinner$overla3, _theme$spinner7, _theme$switch$checked, _theme$switch, _theme$switch$fontCol, _theme$switch2, _addLightness11, _theme$switch3, _theme$table$baseColo, _theme$table, _theme$table$headerFo, _theme$table2, _theme$table$cellFont, _theme$table3, _theme$table$headerFo2, _theme$table4, _theme$tabs$baseColor, _theme$tabs, _theme$tabs$baseColor2, _theme$tabs2, _theme$tabs$baseColor3, _theme$tabs3, _theme$tabs$baseColor4, _theme$tabs4, _addLightness12, _theme$tabs5, _addLightness13, _theme$tabs6, _theme$tag$fontColor, _theme$tag, _theme$tag$iconColor, _theme$tag2, _theme$textInput$font, _theme$textInput, _theme$textInput$font2, _theme$textInput2, _theme$textInput$font3, _theme$textInput3, _theme$textInput$font4, _theme$textInput4, _theme$textInput$font5, _theme$textInput5, _theme$textInput$font6, _theme$textInput6, _theme$textInput$font7, _theme$textInput7, _theme$textInput$hove, _theme$textInput8, _addLightness14, _theme$textInput9, _addLightness15, _theme$textInput10, _addLightness16, _theme$textInput11, _theme$textarea$fontC, _theme$textarea, _theme$textarea$fontC2, _theme$textarea2, _theme$textarea$fontC3, _theme$textarea3, _theme$textarea$hover, _theme$textarea4, _addLightness17, _theme$textarea5, _theme$toggleGroup$se, _theme$toggleGroup, _theme$toggleGroup$se2, _theme$toggleGroup2, _theme$toggleGroup$un, _theme$toggleGroup3, _theme$toggleGroup$se3, _theme$toggleGroup4, _theme$toggleGroup$un2, _theme$toggleGroup5, _subLightness20, _theme$toggleGroup6, _subLightness21, _theme$toggleGroup7, _addLightness18, _theme$toggleGroup8, _addLightness19, _theme$toggleGroup9, _subLightness22, _theme$toggleGroup10, _theme$wizard$baseCol, _theme$wizard, _theme$wizard$selecte, _theme$wizard2, _theme$wizard$baseCol2, _theme$wizard3, _theme$wizard$fontCol, _theme$wizard4, _theme$wizard$fontCol2, _theme$wizard5, _theme$wizard$fontCol3, _theme$wizard6, _theme$wizard$fontCol4, _theme$wizard7, _addLightness20, _theme$wizard8, _addLightness21, _theme$wizard9, _addLightness22, _theme$wizard10, _addLightness23, _theme$wizard11;
-
   var componentTokensCopy = JSON.parse(JSON.stringify(_variables.componentTokens));
   var alertTokens = componentTokensCopy.alert;
   alertTokens.infoBackgroundColor = (_theme$alert$baseColo = theme === null || theme === void 0 ? void 0 : (_theme$alert = theme.alert) === null || _theme$alert === void 0 ? void 0 : _theme$alert.baseColor) !== null && _theme$alert$baseColo !== void 0 ? _theme$alert$baseColo : alertTokens.infoBackgroundColor;
@@ -289,7 +270,6 @@ var parseTheme = function parseTheme(theme) {
   wizardTokens.unvisitedHelperTextFontColor = (_addLightness23 = addLightness(40, theme === null || theme === void 0 ? void 0 : (_theme$wizard11 = theme.wizard) === null || _theme$wizard11 === void 0 ? void 0 : _theme$wizard11.fontColor)) !== null && _addLightness23 !== void 0 ? _addLightness23 : wizardTokens.unvisitedHelperTextFontColor;
   return componentTokensCopy;
 };
-
 var parseLabels = function parseLabels(labels) {
   var parsedLabels = _variables.defaultTranslatedComponentLabels;
   Object.keys(labels).map(function (component) {
@@ -303,17 +283,17 @@ var parseLabels = function parseLabels(labels) {
   });
   return parsedLabels;
 };
+
 /**
  * This type is used to allow partial themes and labels objects to be passed to the HalstackProvider.
  * This is an extension of the already existing Partial type, which only allows one level of partiality.
  */
 
-
-var HalstackProvider = function HalstackProvider(_ref) {
+var HalstackProvider = exports.HalstackProvider = function HalstackProvider(_ref) {
   var theme = _ref.theme,
-      advancedTheme = _ref.advancedTheme,
-      labels = _ref.labels,
-      children = _ref.children;
+    advancedTheme = _ref.advancedTheme,
+    labels = _ref.labels,
+    children = _ref.children;
   var parsedTheme = (0, _react.useMemo)(function () {
     return theme ? parseTheme(theme) : advancedTheme ? parseAdvancedTheme(advancedTheme) : _variables.componentTokens;
   }, [theme, advancedTheme]);
@@ -326,10 +306,5 @@ var HalstackProvider = function HalstackProvider(_ref) {
     value: parsedLabels
   }, children)));
 };
-
-exports.HalstackProvider = HalstackProvider;
-
-var Halstack = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap\");\n"])));
-
-var _default = HalstackContext;
-exports["default"] = _default;
+var Halstack = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap\");\n  @import url(\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1\");\n"])));
+var _default = exports["default"] = HalstackContext;

package/README.md

@@ -0,0 +1,47 @@
+<p align="center">
+  <a href="https://developer.dxc.com/halstack/">
+    <img src="website/screens/common/images/halstack_logo.svg" alt="Halstack Design System logo" />
+  </a>
+</p>
+
+<h1 align="center">Halstack Design System</h1>
+
+Halstack is an Open Source Design System built and maintained by DXC Technology with the purpose of providing all the necessary tools for designing and implementing accessible, intuitive and consistent User Experiences with React.
+
+## How to start
+
+You can start using Halstack right now:
+
+```bash
+npm i @dxc-technology/halstack-react
+```
+
+### Usage
+
+```jsx
+import React from "react";
+import { DxcButton, DxcTextInput } from "@dxc-technology/halstack-react";
+
+const App = () => (
+  <>
+    <DxcTextInput label="Enter your name" />
+    <DxcButton label="Submit" type="submit" />
+  </>
+);
+```
+
+## Where to start
+
+Learn everything you need to know about Halstack principles and components on the [official documentation site](https://developer.dxc.com/halstack/).
+
+## Contributing
+
+Any feedback is always welcome in Halstack!
+
+Before opening a new issue, pull request or discussion, please read carefully and respect our [contribution guidelines](https://github.com/dxc-technology/halstack-react/wiki/Contributing).
+
+## Thanks
+
+<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>
+
+Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.

package/accordion/Accordion.accessibility.test.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Accordion = _interopRequireDefault(require("./Accordion.tsx"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var folderIcon = /*#__PURE__*/_react["default"].createElement("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"
+}, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("rect", {
+  fill: "none",
+  height: "24",
+  width: "24"
+})), /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("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"
+})));
+describe("Accordion component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+            label: "Accordion",
+            assistiveText: "Assistive Text",
+            icon: folderIcon,
+            margin: "small",
+            defaultIsExpanded: true
+          }, /*#__PURE__*/_react["default"].createElement("div", null, "test-expanded"))), container = _render.container;
+          _context.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for disabled mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, container, results;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+            label: "Accordion",
+            assistiveText: "Assistive Text",
+            icon: folderIcon,
+            margin: "small",
+            disabled: true
+          }, /*#__PURE__*/_react["default"].createElement("div", null, "test-expanded"))), container = _render2.container;
+          _context2.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+});

package/accordion/Accordion.js

@@ -1,96 +1,52 @@
 "use strict";
 
 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 _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _utils = require("../common/utils");
-
 var _variables = require("../common/variables");
-
 var _useTheme = _interopRequireDefault(require("../useTheme"));
-
-var _BackgroundColorContext = require("../BackgroundColorContext");
-
 var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
-
-var _uuid = require("uuid");
-
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
-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); }
-
-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 expandLess = /*#__PURE__*/_react["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  height: "24",
-  width: "24",
-  fill: "currentColor"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  d: "m7.4 15.375-1.4-1.4 6-6 6 6-1.4 1.4-4.6-4.6Z"
-}));
-
-var expandMore = /*#__PURE__*/_react["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  height: "24",
-  width: "24",
-  fill: "currentColor"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  d: "m12 15.375-6-6 1.4-1.4 4.6 4.6 4.6-4.6 1.4 1.4Z"
-}));
-
+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 && {}.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; }
 var DxcAccordion = function DxcAccordion(_ref) {
   var _ref$label = _ref.label,
-      label = _ref$label === void 0 ? "" : _ref$label,
-      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,
-      onChange = _ref.onChange,
-      children = _ref.children,
-      margin = _ref.margin,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-
-  var _useState = (0, _react.useState)((0, _uuid.v4)()),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-      id = _useState2[0];
-
-  var _useState3 = (0, _react.useState)(defaultIsExpanded !== null && defaultIsExpanded !== void 0 ? defaultIsExpanded : false),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      innerIsExpanded = _useState4[0],
-      setInnerIsExpanded = _useState4[1];
-
+    label = _ref$label === void 0 ? "" : _ref$label,
+    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,
+    onChange = _ref.onChange,
+    children = _ref.children,
+    margin = _ref.margin,
+    _ref$tabIndex = _ref.tabIndex,
+    tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
+  var id = (0, _react.useId)();
+  var _useState = (0, _react.useState)(defaultIsExpanded !== null && defaultIsExpanded !== void 0 ? defaultIsExpanded : false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    innerIsExpanded = _useState2[0],
+    setInnerIsExpanded = _useState2[1];
   var colorsTheme = (0, _useTheme["default"])();
-
   var handleAccordionState = function handleAccordionState() {
     var _isExpanded;
-
     isExpanded !== null && isExpanded !== void 0 ? isExpanded : setInnerIsExpanded(function (innerIsExpanded) {
       return !innerIsExpanded;
     });
     onChange === null || onChange === void 0 ? void 0 : onChange((_isExpanded = !isExpanded) !== null && _isExpanded !== void 0 ? _isExpanded : !innerIsExpanded);
   };
-
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.accordion
   }, /*#__PURE__*/_react["default"].createElement(AccordionContainer, {
@@ -106,8 +62,8 @@ var DxcAccordion = function DxcAccordion(_ref) {
     isExpanded: isExpanded !== null && isExpanded !== void 0 ? isExpanded : innerIsExpanded
   }, /*#__PURE__*/_react["default"].createElement(AccordionInfo, null, /*#__PURE__*/_react["default"].createElement(AccordionLabel, null, icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
     disabled: disabled
-  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
-    src: icon
+  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: icon
   }) : icon), /*#__PURE__*/_react["default"].createElement(_BaseTypography["default"], {
     color: disabled ? colorsTheme.accordion.disabledTitleLabelFontColor : colorsTheme.accordion.titleLabelFontColor,
     fontFamily: colorsTheme.accordion.titleLabelFontFamily,
@@ -125,19 +81,17 @@ var DxcAccordion = function DxcAccordion(_ref) {
     lineHeight: "1.5em"
   }, assistiveText))), /*#__PURE__*/_react["default"].createElement(CollapseIndicator, {
     disabled: disabled
-  }, (isExpanded !== null && isExpanded !== void 0 ? isExpanded : innerIsExpanded) ? expandLess : expandMore))), (isExpanded !== null && isExpanded !== void 0 ? isExpanded : innerIsExpanded) && /*#__PURE__*/_react["default"].createElement(AccordionPanel, {
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: (isExpanded !== null && isExpanded !== void 0 ? isExpanded : innerIsExpanded) ? "expand_less" : "expand_more"
+  })))), (isExpanded !== null && isExpanded !== void 0 ? isExpanded : innerIsExpanded) && /*#__PURE__*/_react["default"].createElement(AccordionPanel, {
     id: "accordion-panel-".concat(id),
     role: "region",
     "aria-labelledby": "accordion-".concat(id)
-  }, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
-    color: colorsTheme.accordion.backgroundColor
-  }, children))));
+  }, children)));
 };
-
 var calculateWidth = function calculateWidth(margin) {
   return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
 };
-
 var AccordionContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  background-color: ", ";\n  border-radius: ", ";\n  ", "\n  box-shadow: ", ";\n  min-width: 280px;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  width: ", ";\n"])), function (props) {
   return props.theme.backgroundColor;
 }, function (props) {
@@ -159,9 +113,7 @@ var AccordionContainer = _styledComponents["default"].div(_templateObject || (_t
 }, function (props) {
   return calculateWidth(props.margin);
 });
-
 var AccordionHeader = _styledComponents["default"].h3(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  min-height: 48px;\n  margin: 0;\n"])));
-
 var AccordionTrigger = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 24px;\n  width: 100%;\n  background-color: transparent;\n  border: none;\n  border-radius: ", ";\n  ", "\n  padding: 12px 16px;\n  cursor: ", ";\n\n  :focus {\n    outline: ", ";\n  }\n  :hover:enabled {\n    background-color: ", ";\n  }\n  :active:enabled {\n    background-color: ", ";\n  }\n"])), function (props) {
   return props.theme.borderRadius;
 }, function (props) {
@@ -175,9 +127,7 @@ var AccordionTrigger = _styledComponents["default"].button(_templateObject3 || (
 }, function (props) {
   return "".concat(props.theme.hoverBackgroundColor);
 });
-
 var AccordionInfo = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  justify-content: space-between;\n  width: 100%;\n"])));
-
 var AccordionLabel = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-right: ", ";\n  padding-left: ", ";\n"])), function (props) {
   return props.theme.titleLabelPaddingTop;
 }, function (props) {
@@ -187,19 +137,19 @@ var AccordionLabel = _styledComponents["default"].span(_templateObject5 || (_tem
 }, function (props) {
   return props.theme.titleLabelPaddingLeft;
 });
-
-var IconContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  margin-left: ", ";\n  margin-right: ", ";\n  color: ", ";\n\n  svg,\n  img {\n    height: ", ";\n    width: ", ";\n  }\n"])), function (props) {
+var IconContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  margin-left: ", ";\n  margin-right: ", ";\n  color: ", ";\n  font-size: ", ";\n\n  svg {\n    height: ", ";\n    width: ", ";\n  }\n"])), function (props) {
   return props.theme.iconMarginLeft;
 }, function (props) {
-  return props.theme.iconMarginRigth;
+  return props.theme.iconMarginRight;
 }, function (props) {
   return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
 }, function (props) {
   return props.theme.iconSize;
 }, function (props) {
   return props.theme.iconSize;
+}, function (props) {
+  return props.theme.iconSize;
 });
-
 var AccordionAssistiveText = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  min-width: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (props) {
   return props.theme.assistiveTextMinWidth;
 }, function (props) {
@@ -207,16 +157,12 @@ var AccordionAssistiveText = _styledComponents["default"].span(_templateObject7
 }, function (props) {
   return props.theme.assistiveTextPaddingRight;
 });
-
-var CollapseIndicator = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  color: ", ";\n"])), function (props) {
+var CollapseIndicator = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  font-size: 24px;\n  color: ", ";\n"])), function (props) {
   return props.disabled ? props.theme.disabledArrowColor : props.theme.arrowColor;
 });
-
 var AccordionPanel = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  border-bottom-left-radius: ", ";\n  border-bottom-right-radius: ", ";\n"])), function (props) {
   return props.theme.borderRadius;
 }, function (props) {
   return props.theme.borderRadius;
 });
-
-var _default = DxcAccordion;
-exports["default"] = _default;
+var _default = exports["default"] = DxcAccordion;

package/accordion/Accordion.stories.tsx

@@ -1,8 +1,5 @@
 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";
@@ -12,24 +9,6 @@ export default {
   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 smallIcon = (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20">
     <path d="m7.646 18.333-.313-2.625q-.208-.125-.458-.27-.25-.146-.458-.271l-2.438 1.021-2.354-4.063 2.083-1.583V9.458L1.625 7.875l2.354-4.063 2.438 1.021q.208-.125.458-.27.25-.146.458-.271l.313-2.625h4.708l.313 2.625q.208.125.458.271.25.145.458.27l2.438-1.021 2.354 4.063-2.063 1.583v1.084l2.063 1.583-2.354 4.063-2.438-1.021q-.208.125-.458.271-.25.145-.458.27l-.313 2.625ZM10 12.979q1.229 0 2.104-.875T12.979 10q0-1.229-.875-2.104T10 7.021q-1.229 0-2.104.875T7.021 10q0 1.229.875 2.104t2.104.875Zm0-1.75q-.5 0-.865-.364-.364-.365-.364-.865t.364-.865q.365-.364.865-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.854 6.583h1.666l.25-2.166q.605-.167 1.167-.5.562-.334 1.021-.792l2.021.854.833-1.375-1.771-1.354q.104-.292.146-.604.042-.313.042-.646 0-.292-.042-.594t-.125-.635l1.771-1.375-.834-1.375-2.02.875q-.48-.479-1.032-.802-.552-.323-1.156-.49l-.271-2.187H9.167l-.271 2.187q-.604.167-1.156.49-.552.323-1.011.781l-2.021-.854-.833 1.375 1.75 1.354q-.083.333-.125.646-.042.312-.042.604t.042.594q.042.302.125.635l-1.75 1.375.833 1.375 2.021-.854q.459.458 1.011.781.552.323 1.156.49Z" />
@@ -39,7 +18,6 @@ const smallIcon = (
 const facebookIcon = (
   <svg
     version="1.1"
-    id="Capa_1"
     x="0px"
     y="0px"
     width="438.536px"
@@ -60,16 +38,6 @@ const facebookIcon = (
   </svg>
 );
 
-const advancedTheme = {
-  accordion: {
-    backgroundColor: "#000000",
-    assistiveTextFontColor: "#ffffff",
-    titleLabelFontColor: "#ffffff",
-    arrowColor: "#5f249f",
-    iconColor: "#5f249f",
-  },
-};
-
 const opinionatedTheme = {
   accordion: {
     accentColor: "#5f249f",
@@ -83,7 +51,7 @@ export const Chromatic = () => (
     <Title title="Component anatomy" theme="light" level={2} />
     <ExampleContainer>
       <Title title="With label" theme="light" level={4} />
-      <DxcAccordion label="Accordion">
+      <DxcAccordion label="Accordion 1">
         <div>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
           lobortis eget.
@@ -92,7 +60,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With assistive text" theme="light" level={4} />
-      <DxcAccordion label="Accordion" assistiveText="Assistive text">
+      <DxcAccordion label="Accordion 2" assistiveText="Assistive text">
         <div>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
           lobortis eget.
@@ -101,7 +69,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With icon" theme="light" level={4} />
-      <DxcAccordion label="Accordion" assistiveText="Assistive text" icon={folderIcon}>
+      <DxcAccordion label="Accordion 3" assistiveText="Assistive text" icon="folder">
         <div>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
           lobortis eget.
@@ -110,7 +78,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With smaller icon" theme="light" level={4} />
-      <DxcAccordion label="Accordion" assistiveText="Assistive text" icon={smallIcon}>
+      <DxcAccordion label="Accordion 4" assistiveText="Assistive text" icon={smallIcon}>
         <div>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
           lobortis eget.
@@ -119,20 +87,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With bigger icon (SVG)" theme="light" level={4} />
-      <DxcAccordion label="AccordionTest" assistiveText="Assistive text" icon={facebookIcon}>
-        <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 (image)" theme="light" level={4} />
-      <DxcAccordion
-        label="Accordion"
-        assistiveText="Assistive text"
-        icon="https://www.freepnglogos.com/uploads/facebook-logo-design-1.png"
-      >
+      <DxcAccordion label="Accordion Test" assistiveText="Assistive text" icon={facebookIcon}>
         <div>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
           lobortis eget.
@@ -169,24 +124,13 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
-      <DxcAccordion label="Disabled" assistiveText="Assistive text" icon={folderIcon} disabled>
+      <DxcAccordion label="Disabled" assistiveText="Assistive text" icon="folder" 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}>
-          <div style={{ display: "flex", flexDirection: "column", gap: "36px", padding: "36px" }}>
-            <DxcTextInput label="Label" helperText="HelperText" placeholder="Placeholder" size="fillParent" />
-            <DxcButton label="Submit" size="medium" />
-          </div>
-        </DxcAccordion>
-      </HalstackProvider>
-    </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />
@@ -255,7 +199,7 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="With assistive text and icon" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcAccordion label="Accordion" assistiveText="Assistive text" icon={folderIcon}>
+        <DxcAccordion label="Accordion" assistiveText="Assistive text" icon="folder">
           Content
         </DxcAccordion>
       </HalstackProvider>
@@ -285,7 +229,7 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcAccordion label="Disabled" assistiveText="Assistive text" icon={folderIcon} disabled>
+        <DxcAccordion label="Disabled" assistiveText="Assistive text" icon="folder" disabled>
           <div>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
             leo lobortis eget.