@laerdal/life-react-components 1.3.1-dev.3.full → 1.3.1-dev.4

package/dist/js/Accordion/__tests__/ContetnAccordion.test.js

@@ -0,0 +1,151 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ContentAccordion = _interopRequireDefault(require("../ContentAccordion"));
+
+var _react2 = require("@testing-library/react");
+
+var _types = require("../../types");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('ContentAccordion', function () {
+  var contentAccordionItemsWithBody = [{
+    key: '1',
+    title: 'Item 1',
+    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+  }, {
+    key: '2',
+    title: 'Item 2',
+    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    active: true
+  }, {
+    key: '3',
+    title: 'Item 3',
+    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    disabled: true
+  }, {
+    key: '4',
+    title: 'Item 4',
+    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+  }];
+  var contentAccordionItemsWithBodyAndHeaderAndFooter = [{
+    key: '1',
+    title: 'Item 1',
+    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    header: 'Header 1',
+    footer: /*#__PURE__*/_react.default.createElement("span", null)
+  }, {
+    key: '2',
+    title: 'Item 2',
+    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    header: 'Header 2',
+    footer: /*#__PURE__*/_react.default.createElement("span", null)
+  }, {
+    key: '3',
+    title: 'Item 3',
+    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    header: 'Header 3',
+    footer: /*#__PURE__*/_react.default.createElement("span", null),
+    disabled: true
+  }, {
+    key: '4',
+    title: 'Item 4',
+    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    header: 'Header 4',
+    footer: /*#__PURE__*/_react.default.createElement("span", null)
+  }];
+  it('should render items in correct state', function () {
+    var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
+      items: contentAccordionItemsWithBody
+    }));
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item').length).toBe(4);
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item disabled').length).toBe(1);
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item disabled')[0].id).toBe('item_3');
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
+  });
+  it('should not render header if not provided', function () {
+    var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
+      items: contentAccordionItemsWithBody
+    }));
+    expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
+    expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(0);
+  });
+  it('should not render footer if not provided', function () {
+    var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
+      items: contentAccordionItemsWithBody
+    }));
+    expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
+    expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(0);
+  });
+  it('should render body, header, and footer if all are provided', function () {
+    var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
+      items: contentAccordionItemsWithBodyAndHeaderAndFooter
+    }));
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item').length).toBe(4);
+    expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
+    expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(4);
+    expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(4);
+  });
+  it('should set correct size class name for small accordion', function () {
+    var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
+      items: contentAccordionItemsWithBodyAndHeaderAndFooter,
+      size: _types.Size.Small
+    }));
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion small').length).toBe(1);
+  });
+  it('should set correct size class name for medium accordion', function () {
+    var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
+      items: contentAccordionItemsWithBodyAndHeaderAndFooter,
+      size: _types.Size.Medium
+    }));
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion medium').length).toBe(1);
+  });
+  it('should set correct size class name for large accordion', function () {
+    var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
+      items: contentAccordionItemsWithBodyAndHeaderAndFooter,
+      size: _types.Size.Large
+    }));
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion large').length).toBe(1);
+  });
+  it('should change active state when item header is clicked', function () {
+    var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
+      items: contentAccordionItemsWithBody,
+      multi: false
+    }));
+    var itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];
+
+    _react2.fireEvent.click(itemHeader);
+
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_4');
+  });
+  it('should not change active state when disabled item header is clicked', function () {
+    var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
+      items: contentAccordionItemsWithBody,
+      multi: false
+    }));
+    var itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[2];
+
+    _react2.fireEvent.click(itemHeader);
+
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
+  });
+  it('should append active items if multi property is true', function () {
+    var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
+      items: contentAccordionItemsWithBody,
+      multi: true
+    }));
+    var itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];
+
+    _react2.fireEvent.click(itemHeader);
+
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(2);
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
+    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[1].id).toBe('item_4');
+  });
+});
+//# sourceMappingURL=ContetnAccordion.test.js.map

package/dist/js/Accordion/__tests__/ContetnAccordion.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Accordion/__tests__/ContetnAccordion.test.tsx"],"names":["describe","contentAccordionItemsWithBody","key","title","body","active","disabled","contentAccordionItemsWithBodyAndHeaderAndFooter","header","footer","it","wrapper","expect","baseElement","getElementsByClassName","length","toBe","id","Size","Small","Medium","Large","itemHeader","fireEvent","click"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;;;AAEAA,QAAQ,CAAC,kBAAD,EAAqB,YAAM;AACjC,MAAMC,6BAA6B,GAAG,CACpC;AACEC,IAAAA,GAAG,EAAE,GADP;AAEEC,IAAAA,KAAK,EAAE,QAFT;AAGEC,IAAAA,IAAI,EAAE;AAHR,GADoC,EAMpC;AACEF,IAAAA,GAAG,EAAE,GADP;AAEEC,IAAAA,KAAK,EAAE,QAFT;AAGEC,IAAAA,IAAI,EAAE,6HAHR;AAIEC,IAAAA,MAAM,EAAE;AAJV,GANoC,EAYpC;AACEH,IAAAA,GAAG,EAAE,GADP;AAEEC,IAAAA,KAAK,EAAE,QAFT;AAGEC,IAAAA,IAAI,EAAE,6HAHR;AAIEE,IAAAA,QAAQ,EAAE;AAJZ,GAZoC,EAkBpC;AACEJ,IAAAA,GAAG,EAAE,GADP;AAEEC,IAAAA,KAAK,EAAE,QAFT;AAGEC,IAAAA,IAAI,EAAE;AAHR,GAlBoC,CAAtC;AAyBA,MAAMG,+CAA+C,GAAG,CACtD;AACEL,IAAAA,GAAG,EAAE,GADP;AAEEC,IAAAA,KAAK,EAAE,QAFT;AAGEC,IAAAA,IAAI,EAAE,6HAHR;AAIEI,IAAAA,MAAM,EAAE,UAJV;AAKEC,IAAAA,MAAM,eAAE;AALV,GADsD,EAQtD;AACEP,IAAAA,GAAG,EAAE,GADP;AAEEC,IAAAA,KAAK,EAAE,QAFT;AAGEC,IAAAA,IAAI,EAAE,6HAHR;AAIEI,IAAAA,MAAM,EAAE,UAJV;AAKEC,IAAAA,MAAM,eAAE;AALV,GARsD,EAetD;AACEP,IAAAA,GAAG,EAAE,GADP;AAEEC,IAAAA,KAAK,EAAE,QAFT;AAGEC,IAAAA,IAAI,EAAE,6HAHR;AAIEI,IAAAA,MAAM,EAAE,UAJV;AAKEC,IAAAA,MAAM,eAAE,0CALV;AAMEH,IAAAA,QAAQ,EAAE;AANZ,GAfsD,EAuBtD;AACEJ,IAAAA,GAAG,EAAE,GADP;AAEEC,IAAAA,KAAK,EAAE,QAFT;AAGEC,IAAAA,IAAI,EAAE,6HAHR;AAIEI,IAAAA,MAAM,EAAE,UAJV;AAKEC,IAAAA,MAAM,eAAE;AALV,GAvBsD,CAAxD;AAgCAC,EAAAA,EAAE,CAAC,sCAAD,EAAyC,YAAM;AAC/C,QAAMC,OAAO,GAAG,kCAAO,6BAAC,yBAAD;AAAkB,MAAA,KAAK,EAAEV;AAAzB,MAAP,CAAhB;AAEAW,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,wBAA3C,EAAqEC,MAAtE,CAAN,CAAoFC,IAApF,CAAyF,CAAzF;AACAJ,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,iCAA3C,EAA8EC,MAA/E,CAAN,CAA6FC,IAA7F,CAAkG,CAAlG;AACAJ,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,iCAA3C,EAA8E,CAA9E,EAAiFG,EAAlF,CAAN,CAA4FD,IAA5F,CAAiG,QAAjG;AACAJ,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,+BAA3C,EAA4EC,MAA7E,CAAN,CAA2FC,IAA3F,CAAgG,CAAhG;AACAJ,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,+BAA3C,EAA4E,CAA5E,EAA+EG,EAAhF,CAAN,CAA0FD,IAA1F,CAA+F,QAA/F;AACD,GARC,CAAF;AAUAN,EAAAA,EAAE,CAAC,0CAAD,EAA6C,YAAM;AACnD,QAAMC,OAAO,GAAG,kCAAO,6BAAC,yBAAD;AAAkB,MAAA,KAAK,EAAEV;AAAzB,MAAP,CAAhB;AAEAW,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,mBAA3C,EAAgEC,MAAjE,CAAN,CAA+EC,IAA/E,CAAoF,CAApF;AACAJ,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,qBAA3C,EAAkEC,MAAnE,CAAN,CAAiFC,IAAjF,CAAsF,CAAtF;AACD,GALC,CAAF;AAOAN,EAAAA,EAAE,CAAC,0CAAD,EAA6C,YAAM;AACnD,QAAMC,OAAO,GAAG,kCAAO,6BAAC,yBAAD;AAAkB,MAAA,KAAK,EAAEV;AAAzB,MAAP,CAAhB;AAEAW,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,mBAA3C,EAAgEC,MAAjE,CAAN,CAA+EC,IAA/E,CAAoF,CAApF;AACAJ,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,qBAA3C,EAAkEC,MAAnE,CAAN,CAAiFC,IAAjF,CAAsF,CAAtF;AACD,GALC,CAAF;AAOAN,EAAAA,EAAE,CAAC,4DAAD,EAA+D,YAAM;AACrE,QAAMC,OAAO,GAAG,kCAAO,6BAAC,yBAAD;AAAkB,MAAA,KAAK,EAAEJ;AAAzB,MAAP,CAAhB;AAEAK,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,wBAA3C,EAAqEC,MAAtE,CAAN,CAAoFC,IAApF,CAAyF,CAAzF;AACAJ,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,mBAA3C,EAAgEC,MAAjE,CAAN,CAA+EC,IAA/E,CAAoF,CAApF;AACAJ,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,qBAA3C,EAAkEC,MAAnE,CAAN,CAAiFC,IAAjF,CAAsF,CAAtF;AACAJ,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,qBAA3C,EAAkEC,MAAnE,CAAN,CAAiFC,IAAjF,CAAsF,CAAtF;AACD,GAPC,CAAF;AASAN,EAAAA,EAAE,CAAC,wDAAD,EAA2D,YAAM;AACjE,QAAMC,OAAO,GAAG,kCAAO,6BAAC,yBAAD;AAAkB,MAAA,KAAK,EAAEJ,+CAAzB;AACkB,MAAA,IAAI,EAAEW,YAAKC;AAD7B,MAAP,CAAhB;AAEAP,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,yBAA3C,EAAsEC,MAAvE,CAAN,CAAqFC,IAArF,CAA0F,CAA1F;AACD,GAJC,CAAF;AAMAN,EAAAA,EAAE,CAAC,yDAAD,EAA4D,YAAM;AAClE,QAAMC,OAAO,GAAG,kCAAO,6BAAC,yBAAD;AAAkB,MAAA,KAAK,EAAEJ,+CAAzB;AACkB,MAAA,IAAI,EAAEW,YAAKE;AAD7B,MAAP,CAAhB;AAEAR,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,0BAA3C,EAAuEC,MAAxE,CAAN,CAAsFC,IAAtF,CAA2F,CAA3F;AACD,GAJC,CAAF;AAMAN,EAAAA,EAAE,CAAC,wDAAD,EAA2D,YAAM;AACjE,QAAMC,OAAO,GAAG,kCAAO,6BAAC,yBAAD;AAAkB,MAAA,KAAK,EAAEJ,+CAAzB;AACkB,MAAA,IAAI,EAAEW,YAAKG;AAD7B,MAAP,CAAhB;AAEAT,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,yBAA3C,EAAsEC,MAAvE,CAAN,CAAqFC,IAArF,CAA0F,CAA1F;AACD,GAJC,CAAF;AAMAN,EAAAA,EAAE,CAAC,wDAAD,EAA2D,YAAM;AACjE,QAAMC,OAAO,GAAG,kCAAO,6BAAC,yBAAD;AAAkB,MAAA,KAAK,EAAEV,6BAAzB;AAAwD,MAAA,KAAK,EAAE;AAA/D,MAAP,CAAhB;AACA,QAAMqB,UAAU,GAAGX,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,aAA3C,EAA0D,CAA1D,CAAnB;;AAEAS,sBAAUC,KAAV,CAAgBF,UAAhB;;AAEAV,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,+BAA3C,EAA4EC,MAA7E,CAAN,CAA2FC,IAA3F,CAAgG,CAAhG;AACAJ,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,+BAA3C,EAA4E,CAA5E,EAA+EG,EAAhF,CAAN,CAA0FD,IAA1F,CAA+F,QAA/F;AACD,GARC,CAAF;AAUAN,EAAAA,EAAE,CAAC,qEAAD,EAAwE,YAAM;AAC9E,QAAMC,OAAO,GAAG,kCAAO,6BAAC,yBAAD;AAAkB,MAAA,KAAK,EAAEV,6BAAzB;AAAwD,MAAA,KAAK,EAAE;AAA/D,MAAP,CAAhB;AACA,QAAMqB,UAAU,GAAGX,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,aAA3C,EAA0D,CAA1D,CAAnB;;AAEAS,sBAAUC,KAAV,CAAgBF,UAAhB;;AAEAV,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,+BAA3C,EAA4EC,MAA7E,CAAN,CAA2FC,IAA3F,CAAgG,CAAhG;AACAJ,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,+BAA3C,EAA4E,CAA5E,EAA+EG,EAAhF,CAAN,CAA0FD,IAA1F,CAA+F,QAA/F;AACD,GARC,CAAF;AAUAN,EAAAA,EAAE,CAAC,sDAAD,EAAyD,YAAM;AAC/D,QAAMC,OAAO,GAAG,kCAAO,6BAAC,yBAAD;AAAkB,MAAA,KAAK,EAAEV,6BAAzB;AAAwD,MAAA,KAAK,EAAE;AAA/D,MAAP,CAAhB;AACA,QAAMqB,UAAU,GAAGX,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,aAA3C,EAA0D,CAA1D,CAAnB;;AAEAS,sBAAUC,KAAV,CAAgBF,UAAhB;;AAEAV,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,+BAA3C,EAA4EC,MAA7E,CAAN,CAA2FC,IAA3F,CAAgG,CAAhG;AACAJ,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,+BAA3C,EAA4E,CAA5E,EAA+EG,EAAhF,CAAN,CAA0FD,IAA1F,CAA+F,QAA/F;AACAJ,IAAAA,MAAM,CAACD,OAAO,CAACE,WAAR,CAAoBC,sBAApB,CAA2C,+BAA3C,EAA4E,CAA5E,EAA+EG,EAAhF,CAAN,CAA0FD,IAA1F,CAA+F,QAA/F;AACD,GATC,CAAF;AAWD,CA5IO,CAAR","sourcesContent":["import React from 'react';\nimport ContentAccordion from '../ContentAccordion';\nimport {fireEvent, render} from '@testing-library/react';\nimport {Size} from '../../types';\n\ndescribe('ContentAccordion', () => {\n  const contentAccordionItemsWithBody = [\n    {\n      key: '1',\n      title: 'Item 1',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'\n    },\n    {\n      key: '2',\n      title: 'Item 2',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n      active: true\n    },\n    {\n      key: '3',\n      title: 'Item 3',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n      disabled: true\n    },\n    {\n      key: '4',\n      title: 'Item 4',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'\n    }\n  ];\n\n  const contentAccordionItemsWithBodyAndHeaderAndFooter = [\n    {\n      key: '1',\n      title: 'Item 1',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n      header: 'Header 1',\n      footer: <span/>,\n    },\n    {\n      key: '2',\n      title: 'Item 2',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n      header: 'Header 2',\n      footer: <span/>,\n    },\n    {\n      key: '3',\n      title: 'Item 3',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n      header: 'Header 3',\n      footer: <span/>,\n      disabled: true\n    },\n    {\n      key: '4',\n      title: 'Item 4',\n      body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',\n      header: 'Header 4',\n      footer: <span/>,\n    }\n  ];\n\n  it('should render items in correct state', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody}/>);\n\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item').length).toBe(4);\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item disabled').length).toBe(1);\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item disabled')[0].id).toBe('item_3');\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');\n  });\n\n  it('should not render header if not provided', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody}/>);\n\n    expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);\n    expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(0);\n  });\n\n  it('should not render footer if not provided', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody}/>);\n\n    expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);\n    expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(0);\n  });\n\n  it('should render body, header, and footer if all are provided', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}/>);\n\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item').length).toBe(4);\n    expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);\n    expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(4);\n    expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(4);\n  });\n\n  it('should set correct size class name for small accordion', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}\n                                             size={Size.Small}/>);\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion small').length).toBe(1);\n  });\n\n  it('should set correct size class name for medium accordion', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}\n                                             size={Size.Medium}/>);\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion medium').length).toBe(1);\n  });\n\n  it('should set correct size class name for large accordion', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBodyAndHeaderAndFooter}\n                                             size={Size.Large}/>);\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion large').length).toBe(1);\n  });\n\n  it('should change active state when item header is clicked', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody} multi={false}/>);\n    const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];\n\n    fireEvent.click(itemHeader);\n\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_4');\n  });\n\n  it('should not change active state when disabled item header is clicked', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody} multi={false}/>);\n    const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[2];\n\n    fireEvent.click(itemHeader);\n\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');\n  });\n\n  it('should append active items if multi property is true', () => {\n    const wrapper = render(<ContentAccordion items={contentAccordionItemsWithBody} multi={true}/>);\n    const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];\n\n    fireEvent.click(itemHeader);\n\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(2);\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');\n    expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[1].id).toBe('item_4');\n  });\n\n});\n"],"file":"ContetnAccordion.test.js"}

package/dist/js/Accordion/index.d.ts

@@ -1,3 +1,4 @@
 export { default as AccordionMenu } from './AccordionMenu';
 export { default as AccordionMenuItem } from './AccordionMenu';
+export { ContentAccordion } from './ContentAccordion';
 export { AccordionMenuWrapper } from './styles';

package/dist/js/Accordion/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "AccordionMenuItem", {
     return _AccordionMenu.default;
   }
 });
+Object.defineProperty(exports, "ContentAccordion", {
+  enumerable: true,
+  get: function get() {
+    return _ContentAccordion.ContentAccordion;
+  }
+});
 Object.defineProperty(exports, "AccordionMenuWrapper", {
   enumerable: true,
   get: function get() {
@@ -24,6 +30,8 @@ Object.defineProperty(exports, "AccordionMenuWrapper", {
 
 var _AccordionMenu = _interopRequireDefault(require("./AccordionMenu"));
 
+var _ContentAccordion = require("./ContentAccordion");
+
 var _styles = require("./styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/js/Accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Accordion/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA","sourcesContent":["export { default as AccordionMenu } from './AccordionMenu';\nexport { default as AccordionMenuItem } from './AccordionMenu';\nexport { AccordionMenuWrapper } from './styles';\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Accordion/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA","sourcesContent":["export {default as AccordionMenu} from './AccordionMenu';\nexport {default as AccordionMenuItem} from './AccordionMenu';\nexport {ContentAccordion} from './ContentAccordion';\nexport {AccordionMenuWrapper} from './styles';\n"],"file":"index.js"}

package/dist/umd/Accordion/ContentAccordion.js

@@ -0,0 +1,266 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "../types", "../icons", "../styles/typography", "../styles", "../styles/z-indexes"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../types"), require("../icons"), require("../styles/typography"), require("../styles"), require("../styles/z-indexes"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.types, global.icons, global.typography, global.styles, global.zIndexes);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _types, _icons, _typography, _styles, _zIndexes) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.ContentAccordion = undefined;
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var _react2 = _interopRequireDefault(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const ContentAccordionWrapper = _styledComponents2.default.div`
+  width: 100%;
+  position: relative;
+
+
+  .content-accordion-item {
+    display: flex;
+    flex-direction: column;
+    border-top: 1px solid ${_styles.COLORS.neutral_100};
+
+    .item-header {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      min-height: 48px;
+      color: ${_styles.COLORS.neutral_600};
+      cursor: pointer;
+
+      &:hover {
+        color: ${_styles.COLORS.primary_700};
+        background-color: ${_styles.COLORS.primary_20};
+        z-index: ${_zIndexes.Z_INDEXES.hover};
+      }
+
+      &:focus {
+        box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;
+        background-color: ${_styles.COLORS.white};
+        z-index: ${_zIndexes.Z_INDEXES.focus};
+        outline: none;
+      }
+
+      &:active {
+        color: ${_styles.COLORS.primary_800};
+        background-color: ${_styles.COLORS.primary_100};
+        box-shadow: none;
+        z-index: ${_zIndexes.Z_INDEXES.active};
+      }
+
+      .item-header-icon,
+      .item-header-icon svg {
+        width: 24px;
+        height: 24px;
+      }
+
+      .item-header-text {
+      }
+    }
+
+    .item-content {
+      display: none;
+      flex-direction: column;
+
+      .item-content-header {
+
+      }
+
+      .item-content-body {
+
+      }
+
+      .item-content-footer {
+      }
+    }
+
+    &.active {
+      .item-content {
+        display: flex;
+      }
+    }
+
+    &.disabled {
+      .item-header {
+        color: ${_styles.COLORS.neutral_300};
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    }
+  }
+
+  .content-accordion-item:last-child {
+    border-bottom: 1px solid ${_styles.COLORS.neutral_100};
+  }
+
+  &.small {
+    min-width: 320px;
+    max-width: 528px;
+
+    .item-header {
+      gap: 8px;
+      padding: 0 8px;
+      ${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null)}
+    }
+
+    .item-content {
+      padding: 0 8px 16px 40px;
+      gap: 8px;
+
+      .item-content-header {
+        ${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, null)}
+      }
+
+      .item-content-body {
+        ${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null)}
+      }
+    }
+  }
+
+
+  &.medium {
+    min-width: 344px;
+    max-width: 584px;
+
+    .item-header {
+      gap: 12px;
+      padding: 0 12px;
+      ${(0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null)}
+    }
+
+    .item-content {
+      padding: 8px 12px 24px 48px;
+      gap: 12px;
+
+      .item-content-header {
+        ${(0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, null)}
+      }
+
+      .item-content-body {
+        ${(0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null)}
+      }
+
+    }
+  }
+
+  &.large {
+    min-width: 384px;
+    max-width: 656px;
+
+    .item-header {
+      gap: 16px;
+      padding: 0 16px;
+      ${(0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null)}
+    }
+
+    .item-content {
+      padding: 16px 16px 32px 56px;
+      gap: 16px;
+
+      .item-content-header {
+        ${(0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, null)}
+      }
+
+      .item-content-body {
+        ${(0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null)}
+      }
+    }
+  }
+`;
+
+  const ContentAccordion = exports.ContentAccordion = props => {
+    const [opened, setOpened] = _react2.default.useState([]);
+
+    _react2.default.useEffect(() => {
+      if (props.multi) {
+        setOpened(props.items.filter(item => item.active).map(item => item.key));
+      } else {
+        let active = props.items.find(item => !!item.active)?.key;
+
+        if (active) {
+          setOpened([active]);
+        }
+      }
+    }, [props.items, props.multi]);
+
+    const onItemClick = item => {
+      if (item.disabled) return;
+
+      if (opened.includes(item.key)) {
+        setOpened(opened.filter(key => key !== item.key));
+      } else {
+        if (props.multi) {
+          setOpened([...opened, item.key]);
+        } else {
+          setOpened([item.key]);
+        }
+      }
+    };
+
+    const renderItem = item => {
+      const isActive = opened.includes(item.key);
+      return /*#__PURE__*/_react2.default.createElement("div", {
+        key: item.key,
+        id: `item_${item.key}`,
+        className: 'content-accordion-item'.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')
+      }, /*#__PURE__*/_react2.default.createElement("div", {
+        className: 'item-header',
+        tabIndex: !item.disabled ? 0 : undefined,
+        onMouseDown: e => e.preventDefault(),
+        onClick: () => !item.disabled && onItemClick(item),
+        onKeyPress: event => event.key === 'Enter' && onItemClick(item)
+      }, /*#__PURE__*/_react2.default.createElement("div", {
+        className: 'item-header-icon'
+      }, props.multi ? isActive ? /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.Minus, null) : /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.Plus, null) : isActive ? /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.ChevronDown, null) : /*#__PURE__*/_react2.default.createElement(_icons.SystemIcons.ChevronRight, null)), /*#__PURE__*/_react2.default.createElement("div", {
+        className: 'item-header-text'
+      }, item.title)), /*#__PURE__*/_react2.default.createElement("div", {
+        className: 'item-content'
+      }, item.header && /*#__PURE__*/_react2.default.createElement("div", {
+        className: 'item-content-header'
+      }, item.header), /*#__PURE__*/_react2.default.createElement("div", {
+        className: 'item-content-body'
+      }, item.body), item.footer && /*#__PURE__*/_react2.default.createElement("div", {
+        className: 'item-content-footer'
+      }, item.footer)));
+    };
+
+    return /*#__PURE__*/_react2.default.createElement(ContentAccordionWrapper, {
+      className: 'content-accordion'.concat(` ${props.size ?? _types.Size.Medium}`)
+    }, props.items.map(item => renderItem(item)));
+  };
+
+  ContentAccordion.propTypes = {
+    items: _propTypes2.default.arrayOf(_propTypes2.default.shape({
+      key: _propTypes2.default.string.isRequired,
+      title: _propTypes2.default.string.isRequired,
+      header: _propTypes2.default.string,
+      body: _propTypes2.default.any.isRequired,
+      footer: _propTypes2.default.any,
+      disabled: _propTypes2.default.bool,
+      active: _propTypes2.default.bool
+    })).isRequired,
+    multi: _propTypes2.default.bool
+  };
+  exports.default = ContentAccordion;
+});
+//# sourceMappingURL=ContentAccordion.js.map

package/dist/umd/Accordion/ContentAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Accordion/ContentAccordion.tsx"],"names":["ContentAccordionWrapper","styled","div","COLORS","neutral_100","neutral_600","primary_700","primary_20","Z_INDEXES","hover","white","focus","primary_800","primary_100","active","neutral_300","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","key","title","header","body","footer","disabled","items","multi","ContentAccordion","props","React","setOpened","item","onItemClick","opened","renderItem","isActive","e","event","Size","Medium"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,QAAMA,uBAAuB,GAAGC,2BAAOC,GAAI;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BC,eAAOC,WAAY;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA,eAAeD,eAAOE,WAAY;AAClC;AACA;AACA;AACA,iBAAiBF,eAAOG,WAAY;AACpC,4BAA4BH,eAAOI,UAAW;AAC9C,mBAAmBC,oBAAUC,KAAM;AACnC;AACA;AACA;AACA;AACA,4BAA4BN,eAAOO,KAAM;AACzC,mBAAmBF,oBAAUG,KAAM;AACnC;AACA;AACA;AACA;AACA,iBAAiBR,eAAOS,WAAY;AACpC,4BAA4BT,eAAOU,WAAY;AAC/C;AACA,mBAAmBL,oBAAUM,MAAO;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBX,eAAOY,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+BZ,eAAOC,WAAY;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQY,mCAAkBC,+BAAD,OAAjBD,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUA,mCAAkBC,+BAAD,IAAjBD,EAAiB,IAAjBA,CAAiD;AAC3D;AACA;AACA;AACA,UAAUA,mCAAkBC,+BAAD,OAAjBD,EAAiB,IAAjBA,CAAoD;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQE,mCAAkBD,+BAAD,OAAjBC,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUA,mCAAkBD,+BAAD,IAAjBC,EAAiB,IAAjBA,CAAiD;AAC3D;AACA;AACA;AACA,UAAUA,mCAAkBD,+BAAD,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","sourcesContent":["import React from 'react'\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles/typography';\nimport {COLORS} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n\nconst ContentAccordionWrapper = styled.div`\n  width: 100%;\n  position: relative;\n\n\n  .content-accordion-item {\n    display: flex;\n    flex-direction: column;\n    border-top: 1px solid ${COLORS.neutral_100};\n\n    .item-header {\n      display: flex;\n      align-items: center;\n      box-sizing: border-box;\n      min-height: 48px;\n      color: ${COLORS.neutral_600};\n      cursor: pointer;\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background-color: ${COLORS.primary_20};\n        z-index: ${Z_INDEXES.hover};\n      }\n\n      &:focus {\n        box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n        background-color: ${COLORS.white};\n        z-index: ${Z_INDEXES.focus};\n        outline: none;\n      }\n\n      &:active {\n        color: ${COLORS.primary_800};\n        background-color: ${COLORS.primary_100};\n        box-shadow: none;\n        z-index: ${Z_INDEXES.active};\n      }\n\n      .item-header-icon,\n      .item-header-icon svg {\n        width: 24px;\n        height: 24px;\n      }\n\n      .item-header-text {\n      }\n    }\n\n    .item-content {\n      display: none;\n      flex-direction: column;\n\n      .item-content-header {\n\n      }\n\n      .item-content-body {\n\n      }\n\n      .item-content-footer {\n      }\n    }\n\n    &.active {\n      .item-content {\n        display: flex;\n      }\n    }\n\n    &.disabled {\n      .item-header {\n        color: ${COLORS.neutral_300};\n        cursor: not-allowed;\n        pointer-events: none;\n      }\n    }\n  }\n\n  .content-accordion-item:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    .item-header {\n      gap: 8px;\n      padding: 0 8px;\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .item-content {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      .item-content-header {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      .item-content-body {\n        ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      }\n    }\n  }\n\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    .item-header {\n      gap: 12px;\n      padding: 0 12px;\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .item-content {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      .item-content-header {\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      .item-content-body {\n        ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      }\n\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    .item-header {\n      gap: 16px;\n      padding: 0 16px;\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .item-content {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      .item-content-header {\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      .item-content-body {\n        ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem {\n  key: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = (props) => {\n\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (props.multi) {\n      setOpened(props.items.filter(item => item.active).map(item => item.key));\n    } else {\n      let active = props.items.find(item => !!item.active)?.key;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [props.items, props.multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.key)) {\n      setOpened(opened.filter(key => key !== item.key));\n    } else {\n      if (props.multi) {\n        setOpened([...opened, item.key]);\n      } else {\n        setOpened([item.key]);\n      }\n    }\n  }\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const isActive = opened.includes(item.key);\n\n    return (\n      <div key={item.key}\n           id={`item_${item.key}`}\n           className={'content-accordion-item'.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <div className={'item-header'}\n             tabIndex={!item.disabled ? 0 : undefined}\n             onMouseDown={e => e.preventDefault()}\n             onClick={() => !item.disabled && onItemClick(item)}\n             onKeyPress={event => event.key === 'Enter' && onItemClick(item)}>\n          <div className={'item-header-icon'}>\n            {\n              props.multi\n                ? isActive\n                  ? <SystemIcons.Minus/>\n                  : <SystemIcons.Plus/>\n                : isActive\n                  ? <SystemIcons.ChevronDown/>\n                  : <SystemIcons.ChevronRight/>\n            }\n          </div>\n          <div className={'item-header-text'}>\n            {item.title}\n          </div>\n        </div>\n        <div className={'item-content'}>\n          {\n            item.header &&\n            <div className={'item-content-header'}>\n              {item.header}\n            </div>\n          }\n          <div className={'item-content-body'}>\n            {item.body}\n          </div>\n          {\n            item.footer &&\n            <div className={'item-content-footer'}>\n              {item.footer}\n            </div>\n          }\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <ContentAccordionWrapper className={'content-accordion'.concat(` ${props.size ?? Size.Medium}`)}>\n      {props.items.map(item => renderItem(item))}\n    </ContentAccordionWrapper>\n  );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}