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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/esm/Accordion/index.js +0 -1
  2. package/dist/esm/Accordion/index.js.map +1 -1
  3. package/dist/esm/Button/Button.js +53 -8
  4. package/dist/esm/Button/Button.js.map +1 -1
  5. package/dist/esm/Dropdown/ChipDropdownInput.js +2 -2
  6. package/dist/esm/Dropdown/ChipDropdownInput.js.map +1 -1
  7. package/dist/js/Accordion/index.d.ts +0 -1
  8. package/dist/js/Accordion/index.js +0 -8
  9. package/dist/js/Accordion/index.js.map +1 -1
  10. package/dist/js/Button/Button.js +12 -6
  11. package/dist/js/Button/Button.js.map +1 -1
  12. package/dist/js/Dropdown/ChipDropdownInput.js +3 -1
  13. package/dist/js/Dropdown/ChipDropdownInput.js.map +1 -1
  14. package/dist/umd/Accordion/index.js +4 -10
  15. package/dist/umd/Accordion/index.js.map +1 -1
  16. package/dist/umd/Button/Button.js +53 -8
  17. package/dist/umd/Button/Button.js.map +1 -1
  18. package/dist/umd/Dropdown/ChipDropdownInput.js +2 -2
  19. package/dist/umd/Dropdown/ChipDropdownInput.js.map +1 -1
  20. package/package.json +1 -1
  21. package/dist/esm/Accordion/ContentAccordion.js +0 -238
  22. package/dist/esm/Accordion/ContentAccordion.js.map +0 -1
  23. package/dist/esm/Accordion/__tests__/ContetnAccordion.test.js +0 -137
  24. package/dist/esm/Accordion/__tests__/ContetnAccordion.test.js.map +0 -1
  25. package/dist/js/Accordion/ContentAccordion.d.ts +0 -18
  26. package/dist/js/Accordion/ContentAccordion.js +0 -151
  27. package/dist/js/Accordion/ContentAccordion.js.map +0 -1
  28. package/dist/js/Accordion/__tests__/ContetnAccordion.test.js +0 -151
  29. package/dist/js/Accordion/__tests__/ContetnAccordion.test.js.map +0 -1
  30. package/dist/umd/Accordion/ContentAccordion.js +0 -266
  31. package/dist/umd/Accordion/ContentAccordion.js.map +0 -1
  32. package/dist/umd/Accordion/__tests__/ContetnAccordion.test.js +0 -165
  33. package/dist/umd/Accordion/__tests__/ContetnAccordion.test.js.map +0 -1
@@ -1,137 +0,0 @@
1
- import React from 'react';
2
- import ContentAccordion from '../ContentAccordion';
3
- import { fireEvent, render } from '@testing-library/react';
4
- import { Size } from '../../types';
5
- describe('ContentAccordion', () => {
6
- const contentAccordionItemsWithBody = [{
7
- key: '1',
8
- title: 'Item 1',
9
- body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
10
- }, {
11
- key: '2',
12
- title: 'Item 2',
13
- body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
14
- active: true
15
- }, {
16
- key: '3',
17
- title: 'Item 3',
18
- body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
19
- disabled: true
20
- }, {
21
- key: '4',
22
- title: 'Item 4',
23
- body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
24
- }];
25
- const contentAccordionItemsWithBodyAndHeaderAndFooter = [{
26
- key: '1',
27
- title: 'Item 1',
28
- body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
29
- header: 'Header 1',
30
- footer: /*#__PURE__*/React.createElement("span", null)
31
- }, {
32
- key: '2',
33
- title: 'Item 2',
34
- body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
35
- header: 'Header 2',
36
- footer: /*#__PURE__*/React.createElement("span", null)
37
- }, {
38
- key: '3',
39
- title: 'Item 3',
40
- body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
41
- header: 'Header 3',
42
- footer: /*#__PURE__*/React.createElement("span", null),
43
- disabled: true
44
- }, {
45
- key: '4',
46
- title: 'Item 4',
47
- body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
48
- header: 'Header 4',
49
- footer: /*#__PURE__*/React.createElement("span", null)
50
- }];
51
- it('should render items in correct state', () => {
52
- const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
53
- items: contentAccordionItemsWithBody
54
- }));
55
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item').length).toBe(4);
56
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item disabled').length).toBe(1);
57
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item disabled')[0].id).toBe('item_3');
58
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
59
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
60
- });
61
- it('should not render header if not provided', () => {
62
- const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
63
- items: contentAccordionItemsWithBody
64
- }));
65
- expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
66
- expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(0);
67
- });
68
- it('should not render footer if not provided', () => {
69
- const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
70
- items: contentAccordionItemsWithBody
71
- }));
72
- expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
73
- expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(0);
74
- });
75
- it('should render body, header, and footer if all are provided', () => {
76
- const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
77
- items: contentAccordionItemsWithBodyAndHeaderAndFooter
78
- }));
79
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item').length).toBe(4);
80
- expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
81
- expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(4);
82
- expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(4);
83
- });
84
- it('should set correct size class name for small accordion', () => {
85
- const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
86
- items: contentAccordionItemsWithBodyAndHeaderAndFooter,
87
- size: Size.Small
88
- }));
89
- expect(wrapper.baseElement.getElementsByClassName('content-accordion small').length).toBe(1);
90
- });
91
- it('should set correct size class name for medium accordion', () => {
92
- const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
93
- items: contentAccordionItemsWithBodyAndHeaderAndFooter,
94
- size: Size.Medium
95
- }));
96
- expect(wrapper.baseElement.getElementsByClassName('content-accordion medium').length).toBe(1);
97
- });
98
- it('should set correct size class name for large accordion', () => {
99
- const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
100
- items: contentAccordionItemsWithBodyAndHeaderAndFooter,
101
- size: Size.Large
102
- }));
103
- expect(wrapper.baseElement.getElementsByClassName('content-accordion large').length).toBe(1);
104
- });
105
- it('should change active state when item header is clicked', () => {
106
- const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
107
- items: contentAccordionItemsWithBody,
108
- multi: false
109
- }));
110
- const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];
111
- fireEvent.click(itemHeader);
112
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
113
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_4');
114
- });
115
- it('should not change active state when disabled item header is clicked', () => {
116
- const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
117
- items: contentAccordionItemsWithBody,
118
- multi: false
119
- }));
120
- const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[2];
121
- fireEvent.click(itemHeader);
122
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
123
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
124
- });
125
- it('should append active items if multi property is true', () => {
126
- const wrapper = render( /*#__PURE__*/React.createElement(ContentAccordion, {
127
- items: contentAccordionItemsWithBody,
128
- multi: true
129
- }));
130
- const itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];
131
- fireEvent.click(itemHeader);
132
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(2);
133
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
134
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[1].id).toBe('item_4');
135
- });
136
- });
137
- //# sourceMappingURL=ContetnAccordion.test.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../../src/Accordion/__tests__/ContetnAccordion.test.tsx"],"names":["React","ContentAccordion","fireEvent","render","Size","describe","contentAccordionItemsWithBody","key","title","body","active","disabled","contentAccordionItemsWithBodyAndHeaderAndFooter","header","footer","it","wrapper","expect","baseElement","getElementsByClassName","length","toBe","id","Small","Medium","Large","itemHeader","click"],"mappings":"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","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"}
@@ -1,18 +0,0 @@
1
- import React from 'react';
2
- import { Size } from '../types';
3
- export interface ContentAccordionItem {
4
- key: string;
5
- title: string;
6
- header?: string;
7
- body: any;
8
- footer?: any;
9
- disabled?: boolean;
10
- active?: boolean;
11
- }
12
- export interface ContentAccordionProps {
13
- items: ContentAccordionItem[];
14
- multi?: boolean;
15
- size?: Size;
16
- }
17
- export declare const ContentAccordion: React.FunctionComponent<ContentAccordionProps>;
18
- export default ContentAccordion;
@@ -1,151 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.ContentAccordion = void 0;
7
-
8
- var _propTypes = _interopRequireDefault(require("prop-types"));
9
-
10
- var _react = _interopRequireDefault(require("react"));
11
-
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
13
-
14
- var _types = require("../types");
15
-
16
- var _icons = require("../icons");
17
-
18
- var _typography = require("../styles/typography");
19
-
20
- var _styles = require("../styles");
21
-
22
- var _zIndexes = require("../styles/z-indexes");
23
-
24
- var _templateObject;
25
-
26
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
27
-
28
- function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
29
-
30
- function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
31
-
32
- function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
33
-
34
- function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
35
-
36
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
37
-
38
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
39
-
40
- function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
41
-
42
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
43
-
44
- function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
45
-
46
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
47
-
48
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
49
-
50
- var ContentAccordionWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n position: relative;\n\n\n .content-accordion-item {\n display: flex;\n flex-direction: column;\n border-top: 1px solid ", ";\n\n .item-header {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n min-height: 48px;\n color: ", ";\n cursor: pointer;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n z-index: ", ";\n }\n\n &:focus {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n background-color: ", ";\n z-index: ", ";\n outline: none;\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n box-shadow: none;\n z-index: ", ";\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: ", ";\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n }\n\n .content-accordion-item:last-child {\n border-bottom: 1px solid ", ";\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n .item-header {\n gap: 8px;\n padding: 0 8px;\n ", "\n }\n\n .item-content {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n .item-content-header {\n ", "\n }\n\n .item-content-body {\n ", "\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 ", "\n }\n\n .item-content {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n .item-content-header {\n ", "\n }\n\n .item-content-body {\n ", "\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 ", "\n }\n\n .item-content {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n .item-content-header {\n ", "\n }\n\n .item-content-body {\n ", "\n }\n }\n }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_600, _styles.COLORS.primary_700, _styles.COLORS.primary_20, _zIndexes.Z_INDEXES.hover, _styles.COLORS.white, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, null), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, null), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, null), (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null));
51
-
52
- var ContentAccordion = function ContentAccordion(props) {
53
- var _props$size;
54
-
55
- var _React$useState = _react.default.useState([]),
56
- _React$useState2 = _slicedToArray(_React$useState, 2),
57
- opened = _React$useState2[0],
58
- setOpened = _React$useState2[1];
59
-
60
- _react.default.useEffect(function () {
61
- if (props.multi) {
62
- setOpened(props.items.filter(function (item) {
63
- return item.active;
64
- }).map(function (item) {
65
- return item.key;
66
- }));
67
- } else {
68
- var _props$items$find;
69
-
70
- var active = (_props$items$find = props.items.find(function (item) {
71
- return !!item.active;
72
- })) === null || _props$items$find === void 0 ? void 0 : _props$items$find.key;
73
-
74
- if (active) {
75
- setOpened([active]);
76
- }
77
- }
78
- }, [props.items, props.multi]);
79
-
80
- var onItemClick = function onItemClick(item) {
81
- if (item.disabled) return;
82
-
83
- if (opened.includes(item.key)) {
84
- setOpened(opened.filter(function (key) {
85
- return key !== item.key;
86
- }));
87
- } else {
88
- if (props.multi) {
89
- setOpened([].concat(_toConsumableArray(opened), [item.key]));
90
- } else {
91
- setOpened([item.key]);
92
- }
93
- }
94
- };
95
-
96
- var renderItem = function renderItem(item) {
97
- var isActive = opened.includes(item.key);
98
- return /*#__PURE__*/_react.default.createElement("div", {
99
- key: item.key,
100
- id: "item_".concat(item.key),
101
- className: 'content-accordion-item'.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')
102
- }, /*#__PURE__*/_react.default.createElement("div", {
103
- className: 'item-header',
104
- tabIndex: !item.disabled ? 0 : undefined,
105
- onMouseDown: function onMouseDown(e) {
106
- return e.preventDefault();
107
- },
108
- onClick: function onClick() {
109
- return !item.disabled && onItemClick(item);
110
- },
111
- onKeyPress: function onKeyPress(event) {
112
- return event.key === 'Enter' && onItemClick(item);
113
- }
114
- }, /*#__PURE__*/_react.default.createElement("div", {
115
- className: 'item-header-icon'
116
- }, props.multi ? isActive ? /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.Minus, null) : /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.Plus, null) : isActive ? /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.ChevronDown, null) : /*#__PURE__*/_react.default.createElement(_icons.SystemIcons.ChevronRight, null)), /*#__PURE__*/_react.default.createElement("div", {
117
- className: 'item-header-text'
118
- }, item.title)), /*#__PURE__*/_react.default.createElement("div", {
119
- className: 'item-content'
120
- }, item.header && /*#__PURE__*/_react.default.createElement("div", {
121
- className: 'item-content-header'
122
- }, item.header), /*#__PURE__*/_react.default.createElement("div", {
123
- className: 'item-content-body'
124
- }, item.body), item.footer && /*#__PURE__*/_react.default.createElement("div", {
125
- className: 'item-content-footer'
126
- }, item.footer)));
127
- };
128
-
129
- return /*#__PURE__*/_react.default.createElement(ContentAccordionWrapper, {
130
- className: 'content-accordion'.concat(" ".concat((_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : _types.Size.Medium))
131
- }, props.items.map(function (item) {
132
- return renderItem(item);
133
- }));
134
- };
135
-
136
- exports.ContentAccordion = ContentAccordion;
137
- ContentAccordion.propTypes = {
138
- items: _propTypes.default.arrayOf(_propTypes.default.shape({
139
- key: _propTypes.default.string.isRequired,
140
- title: _propTypes.default.string.isRequired,
141
- header: _propTypes.default.string,
142
- body: _propTypes.default.any.isRequired,
143
- footer: _propTypes.default.any,
144
- disabled: _propTypes.default.bool,
145
- active: _propTypes.default.bool
146
- })).isRequired,
147
- multi: _propTypes.default.bool
148
- };
149
- var _default = ContentAccordion;
150
- exports.default = _default;
151
- //# sourceMappingURL=ContentAccordion.js.map
@@ -1 +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","ComponentTextStyle","Regular","Bold","ContentAccordion","props","React","useState","opened","setOpened","useEffect","multi","items","filter","item","map","key","find","onItemClick","disabled","includes","renderItem","isActive","concat","undefined","e","preventDefault","event","title","header","body","footer","size","Size","Medium"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,IAAMA,uBAAuB,GAAGC,0BAAOC,GAAV,29EAQDC,eAAOC,WARN,EAedD,eAAOE,WAfO,EAmBZF,eAAOG,WAnBK,EAoBDH,eAAOI,UApBN,EAqBVC,oBAAUC,KArBA,EA0BDN,eAAOO,KA1BN,EA2BVF,oBAAUG,KA3BA,EAgCZR,eAAOS,WAhCK,EAiCDT,eAAOU,WAjCN,EAmCVL,oBAAUM,MAnCA,EAwEZX,eAAOY,WAxEK,EAgFEZ,eAAOC,WAhFT,EA0FrB,mCAAkBY,+BAAmBC,OAArC,EAA8C,IAA9C,CA1FqB,EAkGnB,mCAAkBD,+BAAmBE,IAArC,EAA2C,IAA3C,CAlGmB,EAsGnB,mCAAkBF,+BAAmBC,OAArC,EAA8C,IAA9C,CAtGmB,EAmHrB,mCAAkBD,+BAAmBC,OAArC,EAA8C,IAA9C,CAnHqB,EA2HnB,mCAAkBD,+BAAmBE,IAArC,EAA2C,IAA3C,CA3HmB,EA+HnB,mCAAkBF,+BAAmBC,OAArC,EAA8C,IAA9C,CA/HmB,EA4IrB,mCAAkBD,+BAAmBC,OAArC,EAA8C,IAA9C,CA5IqB,EAoJnB,mCAAkBD,+BAAmBE,IAArC,EAA2C,IAA3C,CApJmB,EAwJnB,mCAAkBF,+BAAmBC,OAArC,EAA8C,IAA9C,CAxJmB,CAA7B;;AA8KO,IAAME,gBAAgE,GAAG,SAAnEA,gBAAmE,CAACC,KAAD,EAAW;AAAA;;AAEzF,wBAA4BC,eAAMC,QAAN,CAAyB,EAAzB,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEAH,iBAAMI,SAAN,CAAgB,YAAM;AACpB,QAAIL,KAAK,CAACM,KAAV,EAAiB;AACfF,MAAAA,SAAS,CAACJ,KAAK,CAACO,KAAN,CAAYC,MAAZ,CAAmB,UAAAC,IAAI;AAAA,eAAIA,IAAI,CAACf,MAAT;AAAA,OAAvB,EAAwCgB,GAAxC,CAA4C,UAAAD,IAAI;AAAA,eAAIA,IAAI,CAACE,GAAT;AAAA,OAAhD,CAAD,CAAT;AACD,KAFD,MAEO;AAAA;;AACL,UAAIjB,MAAM,wBAAGM,KAAK,CAACO,KAAN,CAAYK,IAAZ,CAAiB,UAAAH,IAAI;AAAA,eAAI,CAAC,CAACA,IAAI,CAACf,MAAX;AAAA,OAArB,CAAH,sDAAG,kBAAyCiB,GAAtD;;AACA,UAAIjB,MAAJ,EAAY;AACVU,QAAAA,SAAS,CAAC,CAACV,MAAD,CAAD,CAAT;AACD;AACF;AACF,GATD,EASG,CAACM,KAAK,CAACO,KAAP,EAAcP,KAAK,CAACM,KAApB,CATH;;AAWA,MAAMO,WAAW,GAAG,SAAdA,WAAc,CAACJ,IAAD,EAAgC;AAClD,QAAIA,IAAI,CAACK,QAAT,EAAmB;;AACnB,QAAIX,MAAM,CAACY,QAAP,CAAgBN,IAAI,CAACE,GAArB,CAAJ,EAA+B;AAC7BP,MAAAA,SAAS,CAACD,MAAM,CAACK,MAAP,CAAc,UAAAG,GAAG;AAAA,eAAIA,GAAG,KAAKF,IAAI,CAACE,GAAjB;AAAA,OAAjB,CAAD,CAAT;AACD,KAFD,MAEO;AACL,UAAIX,KAAK,CAACM,KAAV,EAAiB;AACfF,QAAAA,SAAS,8BAAKD,MAAL,IAAaM,IAAI,CAACE,GAAlB,GAAT;AACD,OAFD,MAEO;AACLP,QAAAA,SAAS,CAAC,CAACK,IAAI,CAACE,GAAN,CAAD,CAAT;AACD;AACF;AACF,GAXD;;AAaA,MAAMK,UAAU,GAAG,SAAbA,UAAa,CAACP,IAAD,EAAgC;AACjD,QAAMQ,QAAQ,GAAGd,MAAM,CAACY,QAAP,CAAgBN,IAAI,CAACE,GAArB,CAAjB;AAEA,wBACE;AAAK,MAAA,GAAG,EAAEF,IAAI,CAACE,GAAf;AACK,MAAA,EAAE,iBAAUF,IAAI,CAACE,GAAf,CADP;AAEK,MAAA,SAAS,EAAE,yBAAyBO,MAAzB,CAAgCD,QAAQ,GAAG,SAAH,GAAe,EAAvD,EAA2DC,MAA3D,CAAkET,IAAI,CAACK,QAAL,GAAgB,WAAhB,GAA8B,EAAhG;AAFhB,oBAGE;AAAK,MAAA,SAAS,EAAE,aAAhB;AACK,MAAA,QAAQ,EAAE,CAACL,IAAI,CAACK,QAAN,GAAiB,CAAjB,GAAqBK,SADpC;AAEK,MAAA,WAAW,EAAE,qBAAAC,CAAC;AAAA,eAAIA,CAAC,CAACC,cAAF,EAAJ;AAAA,OAFnB;AAGK,MAAA,OAAO,EAAE;AAAA,eAAM,CAACZ,IAAI,CAACK,QAAN,IAAkBD,WAAW,CAACJ,IAAD,CAAnC;AAAA,OAHd;AAIK,MAAA,UAAU,EAAE,oBAAAa,KAAK;AAAA,eAAIA,KAAK,CAACX,GAAN,KAAc,OAAd,IAAyBE,WAAW,CAACJ,IAAD,CAAxC;AAAA;AAJtB,oBAKE;AAAK,MAAA,SAAS,EAAE;AAAhB,OAEIT,KAAK,CAACM,KAAN,GACIW,QAAQ,gBACN,6BAAC,kBAAD,CAAa,KAAb,OADM,gBAEN,6BAAC,kBAAD,CAAa,IAAb,OAHN,GAIIA,QAAQ,gBACN,6BAAC,kBAAD,CAAa,WAAb,OADM,gBAEN,6BAAC,kBAAD,CAAa,YAAb,OARV,CALF,eAgBE;AAAK,MAAA,SAAS,EAAE;AAAhB,OACGR,IAAI,CAACc,KADR,CAhBF,CAHF,eAuBE;AAAK,MAAA,SAAS,EAAE;AAAhB,OAEId,IAAI,CAACe,MAAL,iBACA;AAAK,MAAA,SAAS,EAAE;AAAhB,OACGf,IAAI,CAACe,MADR,CAHJ,eAOE;AAAK,MAAA,SAAS,EAAE;AAAhB,OACGf,IAAI,CAACgB,IADR,CAPF,EAWIhB,IAAI,CAACiB,MAAL,iBACA;AAAK,MAAA,SAAS,EAAE;AAAhB,OACGjB,IAAI,CAACiB,MADR,CAZJ,CAvBF,CADF;AA2CD,GA9CD;;AAgDA,sBACE,6BAAC,uBAAD;AAAyB,IAAA,SAAS,EAAE,oBAAoBR,MAApB,2BAA+BlB,KAAK,CAAC2B,IAArC,qDAA6CC,YAAKC,MAAlD;AAApC,KACG7B,KAAK,CAACO,KAAN,CAAYG,GAAZ,CAAgB,UAAAD,IAAI;AAAA,WAAIO,UAAU,CAACP,IAAD,CAAd;AAAA,GAApB,CADH,CADF;AAKD,CAjFM;;;;AALLF,EAAAA,K;AAVAI,IAAAA,G;AACAY,IAAAA,K;AACAC,IAAAA,M;AACAC,IAAAA,I;AACAC,IAAAA,M;AACAZ,IAAAA,Q;AACApB,IAAAA,M;;AAKAY,EAAAA,K;;eAuFaP,gB","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"}
@@ -1,151 +0,0 @@
1
- "use strict";
2
-
3
- var _react = _interopRequireDefault(require("react"));
4
-
5
- var _ContentAccordion = _interopRequireDefault(require("../ContentAccordion"));
6
-
7
- var _react2 = require("@testing-library/react");
8
-
9
- var _types = require("../../types");
10
-
11
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
-
13
- describe('ContentAccordion', function () {
14
- var contentAccordionItemsWithBody = [{
15
- key: '1',
16
- title: 'Item 1',
17
- body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
18
- }, {
19
- key: '2',
20
- title: 'Item 2',
21
- body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
22
- active: true
23
- }, {
24
- key: '3',
25
- title: 'Item 3',
26
- body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
27
- disabled: true
28
- }, {
29
- key: '4',
30
- title: 'Item 4',
31
- body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
32
- }];
33
- var contentAccordionItemsWithBodyAndHeaderAndFooter = [{
34
- key: '1',
35
- title: 'Item 1',
36
- body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
37
- header: 'Header 1',
38
- footer: /*#__PURE__*/_react.default.createElement("span", null)
39
- }, {
40
- key: '2',
41
- title: 'Item 2',
42
- body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
43
- header: 'Header 2',
44
- footer: /*#__PURE__*/_react.default.createElement("span", null)
45
- }, {
46
- key: '3',
47
- title: 'Item 3',
48
- body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
49
- header: 'Header 3',
50
- footer: /*#__PURE__*/_react.default.createElement("span", null),
51
- disabled: true
52
- }, {
53
- key: '4',
54
- title: 'Item 4',
55
- body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
56
- header: 'Header 4',
57
- footer: /*#__PURE__*/_react.default.createElement("span", null)
58
- }];
59
- it('should render items in correct state', function () {
60
- var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
61
- items: contentAccordionItemsWithBody
62
- }));
63
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item').length).toBe(4);
64
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item disabled').length).toBe(1);
65
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item disabled')[0].id).toBe('item_3');
66
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
67
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
68
- });
69
- it('should not render header if not provided', function () {
70
- var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
71
- items: contentAccordionItemsWithBody
72
- }));
73
- expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
74
- expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(0);
75
- });
76
- it('should not render footer if not provided', function () {
77
- var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
78
- items: contentAccordionItemsWithBody
79
- }));
80
- expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
81
- expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(0);
82
- });
83
- it('should render body, header, and footer if all are provided', function () {
84
- var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
85
- items: contentAccordionItemsWithBodyAndHeaderAndFooter
86
- }));
87
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item').length).toBe(4);
88
- expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
89
- expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(4);
90
- expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(4);
91
- });
92
- it('should set correct size class name for small accordion', function () {
93
- var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
94
- items: contentAccordionItemsWithBodyAndHeaderAndFooter,
95
- size: _types.Size.Small
96
- }));
97
- expect(wrapper.baseElement.getElementsByClassName('content-accordion small').length).toBe(1);
98
- });
99
- it('should set correct size class name for medium accordion', function () {
100
- var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
101
- items: contentAccordionItemsWithBodyAndHeaderAndFooter,
102
- size: _types.Size.Medium
103
- }));
104
- expect(wrapper.baseElement.getElementsByClassName('content-accordion medium').length).toBe(1);
105
- });
106
- it('should set correct size class name for large accordion', function () {
107
- var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
108
- items: contentAccordionItemsWithBodyAndHeaderAndFooter,
109
- size: _types.Size.Large
110
- }));
111
- expect(wrapper.baseElement.getElementsByClassName('content-accordion large').length).toBe(1);
112
- });
113
- it('should change active state when item header is clicked', function () {
114
- var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
115
- items: contentAccordionItemsWithBody,
116
- multi: false
117
- }));
118
- var itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];
119
-
120
- _react2.fireEvent.click(itemHeader);
121
-
122
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
123
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_4');
124
- });
125
- it('should not change active state when disabled item header is clicked', function () {
126
- var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
127
- items: contentAccordionItemsWithBody,
128
- multi: false
129
- }));
130
- var itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[2];
131
-
132
- _react2.fireEvent.click(itemHeader);
133
-
134
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(1);
135
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
136
- });
137
- it('should append active items if multi property is true', function () {
138
- var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
139
- items: contentAccordionItemsWithBody,
140
- multi: true
141
- }));
142
- var itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];
143
-
144
- _react2.fireEvent.click(itemHeader);
145
-
146
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active').length).toBe(2);
147
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[0].id).toBe('item_2');
148
- expect(wrapper.baseElement.getElementsByClassName('content-accordion-item active')[1].id).toBe('item_4');
149
- });
150
- });
151
- //# sourceMappingURL=ContetnAccordion.test.js.map
@@ -1 +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":"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","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"}