@laerdal/life-react-components 1.4.1-dev.1.full → 1.4.1-dev.4

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 (23) hide show
  1. package/dist/esm/Accordion/ContentAccordion.js +81 -102
  2. package/dist/esm/Accordion/ContentAccordion.js.map +1 -1
  3. package/dist/esm/Accordion/__tests__/{ContetnAccordion.test.js → ContentAccordion.test.js} +28 -28
  4. package/dist/esm/Accordion/__tests__/ContentAccordion.test.js.map +1 -0
  5. package/dist/esm/Modals/ModalDialog.js +7 -1
  6. package/dist/esm/Modals/ModalDialog.js.map +1 -1
  7. package/dist/js/Accordion/ContentAccordion.d.ts +9 -0
  8. package/dist/js/Accordion/ContentAccordion.js +42 -21
  9. package/dist/js/Accordion/ContentAccordion.js.map +1 -1
  10. package/dist/js/Accordion/__tests__/{ContetnAccordion.test.js → ContentAccordion.test.js} +34 -28
  11. package/dist/js/Accordion/__tests__/ContentAccordion.test.js.map +1 -0
  12. package/dist/js/Modals/ModalDialog.js +7 -1
  13. package/dist/js/Modals/ModalDialog.js.map +1 -1
  14. package/dist/umd/Accordion/ContentAccordion.js +82 -103
  15. package/dist/umd/Accordion/ContentAccordion.js.map +1 -1
  16. package/dist/umd/Accordion/__tests__/{ContetnAccordion.test.js → ContentAccordion.test.js} +27 -27
  17. package/dist/umd/Accordion/__tests__/ContentAccordion.test.js.map +1 -0
  18. package/dist/umd/Modals/ModalDialog.js +7 -1
  19. package/dist/umd/Modals/ModalDialog.js.map +1 -1
  20. package/package.json +1 -1
  21. package/dist/esm/Accordion/__tests__/ContetnAccordion.test.js.map +0 -1
  22. package/dist/js/Accordion/__tests__/ContetnAccordion.test.js.map +0 -1
  23. package/dist/umd/Accordion/__tests__/ContetnAccordion.test.js.map +0 -1
package/dist/js/Accordion/ContentAccordion.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.ContentAccordion = void 0;
6
+ exports.default = exports.ContentAccordion = exports.ContentAccordionWrapper = exports.ContentAccordionItem = exports.ContentAccordionItemContentFooter = exports.ContentAccordionItemContentBody = exports.ContentAccordionItemContentHeader = exports.ContentAccordionItemContent = exports.ContentAccordionItemHeaderText = exports.ContentAccordionItemHeaderIcon = exports.ContentAccordionItemHeader = void 0;
7
7
 
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
 
@@ -21,7 +21,7 @@ var _styles = require("../styles");
21
21
 
22
22
  var _zIndexes = require("../styles/z-indexes");
23
23
 
24
- var _templateObject;
24
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
25
25
 
26
26
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
27
27
 
@@ -47,7 +47,41 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
47
47
 
48
48
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
49
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));
50
+ var ContentAccordionItemHeader = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), _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);
51
+
52
+ exports.ContentAccordionItemHeader = ContentAccordionItemHeader;
53
+
54
+ var ContentAccordionItemHeaderIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
55
+
56
+ exports.ContentAccordionItemHeaderIcon = ContentAccordionItemHeaderIcon;
57
+
58
+ var ContentAccordionItemHeaderText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n"])));
59
+
60
+ exports.ContentAccordionItemHeaderText = ContentAccordionItemHeaderText;
61
+
62
+ var ContentAccordionItemContent = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: none;\n flex-direction: column;\n"])));
63
+
64
+ exports.ContentAccordionItemContent = ContentAccordionItemContent;
65
+
66
+ var ContentAccordionItemContentHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n"])));
67
+
68
+ exports.ContentAccordionItemContentHeader = ContentAccordionItemContentHeader;
69
+
70
+ var ContentAccordionItemContentBody = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n"])));
71
+
72
+ exports.ContentAccordionItemContentBody = ContentAccordionItemContentBody;
73
+
74
+ var ContentAccordionItemContentFooter = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n"])));
75
+
76
+ exports.ContentAccordionItemContentFooter = ContentAccordionItemContentFooter;
77
+
78
+ var ContentAccordionItem = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n border-top: 1px solid ", ";\n\n &.active {\n ", " {\n display: flex;\n }\n }\n\n &.disabled {\n ", " {\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n"])), _styles.COLORS.neutral_100, ContentAccordionItemContent, ContentAccordionItemHeader, _styles.COLORS.neutral_300);
79
+
80
+ exports.ContentAccordionItem = ContentAccordionItem;
81
+
82
+ var ContentAccordionWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n width: 100%;\n position: relative;\n\n ", ":last-child {\n border-bottom: 1px solid ", ";\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ", " {\n gap: 8px;\n padding: 0 8px;\n ", "\n }\n\n ", " {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ", " {\n gap: 12px;\n padding: 0 12px;\n ", "\n }\n\n ", " {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ", " {\n gap: 16px;\n padding: 0 16px;\n ", "\n }\n\n ", " {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ", " {\n ", "\n }\n\n ", " {\n ", "\n }\n }\n }\n"])), ContentAccordionItem, _styles.COLORS.neutral_100, ContentAccordionItemHeader, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemHeader, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemHeader, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null), ContentAccordionItemContent, ContentAccordionItemContentHeader, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, null), ContentAccordionItemContentBody, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null));
83
+
84
+ exports.ContentAccordionWrapper = ContentAccordionWrapper;
51
85
 
52
86
  var ContentAccordion = function ContentAccordion(props) {
53
87
  var _props$size;
@@ -95,12 +129,11 @@ var ContentAccordion = function ContentAccordion(props) {
95
129
 
96
130
  var renderItem = function renderItem(item) {
97
131
  var isActive = opened.includes(item.key);
98
- return /*#__PURE__*/_react.default.createElement("div", {
132
+ return /*#__PURE__*/_react.default.createElement(ContentAccordionItem, {
99
133
  key: item.key,
100
134
  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',
135
+ className: ''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')
136
+ }, /*#__PURE__*/_react.default.createElement(ContentAccordionItemHeader, {
104
137
  tabIndex: !item.disabled ? 0 : undefined,
105
138
  onMouseDown: function onMouseDown(e) {
106
139
  return e.preventDefault();
@@ -111,23 +144,11 @@ var ContentAccordion = function ContentAccordion(props) {
111
144
  onKeyPress: function onKeyPress(event) {
112
145
  return event.key === 'Enter' && onItemClick(item);
113
146
  }
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)));
147
+ }, /*#__PURE__*/_react.default.createElement(ContentAccordionItemHeaderIcon, null, 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(ContentAccordionItemHeaderText, null, item.title)), /*#__PURE__*/_react.default.createElement(ContentAccordionItemContent, null, item.header && /*#__PURE__*/_react.default.createElement(ContentAccordionItemContentHeader, null, item.header), /*#__PURE__*/_react.default.createElement(ContentAccordionItemContentBody, null, item.body), item.footer && /*#__PURE__*/_react.default.createElement(ContentAccordionItemContentFooter, null, item.footer)));
127
148
  };
128
149
 
129
150
  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))
151
+ className: ''.concat(" ".concat((_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : _types.Size.Medium))
131
152
  }, props.items.map(function (item) {
132
153
  return renderItem(item);
133
154
  }));
package/dist/js/Accordion/ContentAccordion.js.map CHANGED
@@ -1 +1 @@
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":"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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"}
1
+ {"version":3,"sources":["../../../src/Accordion/ContentAccordion.tsx"],"names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","white","focus","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","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":"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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\nexport const ContentAccordionItemHeader = styled.div`\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\nexport const ContentAccordionItemHeaderIcon = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div`\n`;\n\nexport const ContentAccordionItemContent = styled.div`\n display: none;\n flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div`\n`;\n\nexport const ContentAccordionItemContentBody = styled.div`\n`;\n\nexport const ContentAccordionItemContentFooter = styled.div`\n`;\n\nexport const ContentAccordionItem = styled.div`\n display: flex;\n flex-direction: column;\n border-top: 1px solid ${COLORS.neutral_100};\n\n &.active {\n ${ContentAccordionItemContent} {\n display: flex;\n }\n }\n\n &.disabled {\n ${ContentAccordionItemHeader} {\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n width: 100%;\n position: relative;\n\n ${ContentAccordionItem}:last-child {\n border-bottom: 1px solid ${COLORS.neutral_100};\n }\n\n &.small {\n min-width: 320px;\n max-width: 528px;\n\n ${ContentAccordionItemHeader} {\n gap: 8px;\n padding: 0 8px;\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 0 8px 16px 40px;\n gap: 8px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n &.medium {\n min-width: 344px;\n max-width: 584px;\n\n ${ContentAccordionItemHeader} {\n gap: 12px;\n padding: 0 12px;\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 8px 12px 24px 48px;\n gap: 12px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n }\n }\n\n &.large {\n min-width: 384px;\n max-width: 656px;\n\n ${ContentAccordionItemHeader} {\n gap: 16px;\n padding: 0 16px;\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${ContentAccordionItemContent} {\n padding: 16px 16px 32px 56px;\n gap: 16px;\n\n ${ContentAccordionItemContentHeader} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${ContentAccordionItemContentBody} {\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 <ContentAccordionItem key={item.key}\n id={`item_${item.key}`}\n className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n <ContentAccordionItemHeader 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 <ContentAccordionItemHeaderIcon>\n {\n props.multi\n ? isActive\n ? <SystemIcons.Minus/>\n : <SystemIcons.Plus/>\n : isActive\n ? <SystemIcons.ChevronDown/>\n : <SystemIcons.ChevronRight/>\n }\n </ContentAccordionItemHeaderIcon>\n <ContentAccordionItemHeaderText>\n {item.title}\n </ContentAccordionItemHeaderText>\n </ContentAccordionItemHeader>\n <ContentAccordionItemContent>\n {\n item.header &&\n <ContentAccordionItemContentHeader>\n {item.header}\n </ContentAccordionItemContentHeader>\n }\n <ContentAccordionItemContentBody>\n {item.body}\n </ContentAccordionItemContentBody>\n {\n item.footer &&\n <ContentAccordionItemContentFooter>\n {item.footer}\n </ContentAccordionItemContentFooter>\n }\n </ContentAccordionItemContent>\n </ContentAccordionItem>\n );\n }\n\n return (\n <ContentAccordionWrapper className={''.concat(` ${props.size ?? Size.Medium}`)}>\n {props.items.map(item => renderItem(item))}\n </ContentAccordionWrapper>\n );\n};\n\nexport default ContentAccordion;\n"],"file":"ContentAccordion.js"}
package/dist/js/Accordion/__tests__/{ContetnAccordion.test.js → ContentAccordion.test.js} RENAMED
@@ -1,13 +1,19 @@
1
1
  "use strict";
2
2
 
3
+ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
4
+
3
5
  var _react = _interopRequireDefault(require("react"));
4
6
 
5
- var _ContentAccordion = _interopRequireDefault(require("../ContentAccordion"));
7
+ var _ContentAccordion = _interopRequireWildcard(require("../ContentAccordion"));
6
8
 
7
9
  var _react2 = require("@testing-library/react");
8
10
 
9
11
  var _types = require("../../types");
10
12
 
13
+ 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); }
14
+
15
+ 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; }
16
+
11
17
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
18
 
13
19
  describe('ContentAccordion', function () {
@@ -60,92 +66,92 @@ describe('ContentAccordion', function () {
60
66
  var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
61
67
  items: contentAccordionItemsWithBody
62
68
  }));
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');
69
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItem)).length).toBe(4);
70
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItem, ".disabled")).length).toBe(1);
71
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItem, ".disabled"))[0].id).toBe('item_3');
72
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItem, ".active")).length).toBe(1);
73
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItem, ".active"))[0].id).toBe('item_2');
68
74
  });
69
75
  it('should not render header if not provided', function () {
70
76
  var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
71
77
  items: contentAccordionItemsWithBody
72
78
  }));
73
- expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
74
- expect(wrapper.baseElement.getElementsByClassName('item-content-header').length).toBe(0);
79
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItemContentBody)).length).toBe(4);
80
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItemContentHeader)).length).toBe(0);
75
81
  });
76
82
  it('should not render footer if not provided', function () {
77
83
  var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
78
84
  items: contentAccordionItemsWithBody
79
85
  }));
80
- expect(wrapper.baseElement.getElementsByClassName('item-content-body').length).toBe(4);
81
- expect(wrapper.baseElement.getElementsByClassName('item-content-footer').length).toBe(0);
86
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItemContentBody)).length).toBe(4);
87
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItemContentFooter)).length).toBe(0);
82
88
  });
83
89
  it('should render body, header, and footer if all are provided', function () {
84
90
  var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
85
91
  items: contentAccordionItemsWithBodyAndHeaderAndFooter
86
92
  }));
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);
93
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItem)).length).toBe(4);
94
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItemContentBody)).length).toBe(4);
95
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItemContentHeader)).length).toBe(4);
96
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItemContentFooter)).length).toBe(4);
91
97
  });
92
98
  it('should set correct size class name for small accordion', function () {
93
99
  var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
94
100
  items: contentAccordionItemsWithBodyAndHeaderAndFooter,
95
101
  size: _types.Size.Small
96
102
  }));
97
- expect(wrapper.baseElement.getElementsByClassName('content-accordion small').length).toBe(1);
103
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionWrapper, ".small")).length).toBe(1);
98
104
  });
99
105
  it('should set correct size class name for medium accordion', function () {
100
106
  var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
101
107
  items: contentAccordionItemsWithBodyAndHeaderAndFooter,
102
108
  size: _types.Size.Medium
103
109
  }));
104
- expect(wrapper.baseElement.getElementsByClassName('content-accordion medium').length).toBe(1);
110
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionWrapper, ".medium")).length).toBe(1);
105
111
  });
106
112
  it('should set correct size class name for large accordion', function () {
107
113
  var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
108
114
  items: contentAccordionItemsWithBodyAndHeaderAndFooter,
109
115
  size: _types.Size.Large
110
116
  }));
111
- expect(wrapper.baseElement.getElementsByClassName('content-accordion large').length).toBe(1);
117
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionWrapper, ".large")).length).toBe(1);
112
118
  });
113
119
  it('should change active state when item header is clicked', function () {
114
120
  var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
115
121
  items: contentAccordionItemsWithBody,
116
122
  multi: false
117
123
  }));
118
- var itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];
124
+ var itemHeader = wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItemHeader))[3];
119
125
 
120
126
  _react2.fireEvent.click(itemHeader);
121
127
 
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');
128
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItem, ".active")).length).toBe(1);
129
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItem, ".active"))[0].id).toBe('item_4');
124
130
  });
125
131
  it('should not change active state when disabled item header is clicked', function () {
126
132
  var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
127
133
  items: contentAccordionItemsWithBody,
128
134
  multi: false
129
135
  }));
130
- var itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[2];
136
+ var itemHeader = wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItemHeader))[2];
131
137
 
132
138
  _react2.fireEvent.click(itemHeader);
133
139
 
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');
140
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItem, ".active")).length).toBe(1);
141
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItem, ".active"))[0].id).toBe('item_2');
136
142
  });
137
143
  it('should append active items if multi property is true', function () {
138
144
  var wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_ContentAccordion.default, {
139
145
  items: contentAccordionItemsWithBody,
140
146
  multi: true
141
147
  }));
142
- var itemHeader = wrapper.baseElement.getElementsByClassName('item-header')[3];
148
+ var itemHeader = wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItemHeader))[3];
143
149
 
144
150
  _react2.fireEvent.click(itemHeader);
145
151
 
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');
152
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItem, ".active")).length).toBe(2);
153
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItem, ".active"))[0].id).toBe('item_2');
154
+ expect(wrapper.container.querySelectorAll("".concat(_ContentAccordion.ContentAccordionItem, ".active"))[1].id).toBe('item_4');
149
155
  });
150
156
  });
151
- //# sourceMappingURL=ContetnAccordion.test.js.map
157
+ //# sourceMappingURL=ContentAccordion.test.js.map
package/dist/js/Accordion/__tests__/ContentAccordion.test.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/Accordion/__tests__/ContentAccordion.test.tsx"],"names":["describe","contentAccordionItemsWithBody","key","title","body","active","disabled","contentAccordionItemsWithBodyAndHeaderAndFooter","header","footer","it","wrapper","expect","container","querySelectorAll","ContentAccordionItem","length","toBe","id","ContentAccordionItemContentBody","ContentAccordionItemContentHeader","ContentAccordionItemContentFooter","Size","Small","ContentAccordionWrapper","Medium","Large","itemHeader","ContentAccordionItemHeader","fireEvent","click"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ContentAccordion, {\n ContentAccordionItem,\n ContentAccordionItemContentBody, ContentAccordionItemContentFooter,\n ContentAccordionItemContentHeader, ContentAccordionItemHeader, ContentAccordionWrapper\n} 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.container.querySelectorAll(`${ContentAccordionItem}`).length).toBe(4);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.disabled`).length).toBe(1);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.disabled`)[0].id).toBe('item_3');\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(1);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.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.container.querySelectorAll(`${ContentAccordionItemContentBody}`).length).toBe(4);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentHeader}`).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.container.querySelectorAll(`${ContentAccordionItemContentBody}`).length).toBe(4);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentFooter}`).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.container.querySelectorAll(`${ContentAccordionItem}`).length).toBe(4);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentBody}`).length).toBe(4);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentHeader}`).length).toBe(4);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItemContentFooter}`).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.container.querySelectorAll(`${ContentAccordionWrapper}.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.container.querySelectorAll(`${ContentAccordionWrapper}.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.container.querySelectorAll(`${ContentAccordionWrapper}.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.container.querySelectorAll(`${ContentAccordionItemHeader}`)[3];\n\n fireEvent.click(itemHeader);\n\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(1);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.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.container.querySelectorAll(`${ContentAccordionItemHeader}`)[2];\n\n fireEvent.click(itemHeader);\n\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(1);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.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.container.querySelectorAll(`${ContentAccordionItemHeader}`)[3];\n\n fireEvent.click(itemHeader);\n\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`).length).toBe(2);\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[0].id).toBe('item_2');\n expect(wrapper.container.querySelectorAll(`${ContentAccordionItem}.active`)[1].id).toBe('item_4');\n });\n\n});\n"],"file":"ContentAccordion.test.js"}
package/dist/js/Modals/ModalDialog.js CHANGED
@@ -244,7 +244,13 @@ var ModalDialog = function ModalDialog(_ref) {
244
244
  className: "footer-action",
245
245
  href: leftFooterAction.href,
246
246
  disabled: disabled,
247
- variant: "default"
247
+ variant: "default",
248
+ onClick: function onClick(e) {
249
+ if (action) {
250
+ e.preventDefault();
251
+ action(e);
252
+ }
253
+ }
248
254
  }, icon && getLeftActionIconElement(icon), text);
249
255
 
250
256
  case 'note':
package/dist/js/Modals/ModalDialog.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalTootip","XSmall","COLORS","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","map","b","i","id"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n ModalHoverModifier,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { ReactNode } from 'react';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string;\n topImage?: any;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string | React.ReactNode;\n state?: string;\n icon?: React.ReactNode;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n}) => {\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const ModalTitle = (title: string, size?: Size) => {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n };\n\n const ModalTootip = (tooltip: string) => {\n return (\n <ModalHoverModifier>\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n <Help size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </TooltipWrapper>\n </ModalHoverModifier>\n );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n <Close size=\"24px\" color={COLORS.black} />\n </IconButton>\n </CloseButtonWrapper>\n );\n };\n\n const ModalBackButton = () => {\n if (backButton) {\n return (\n <BackButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n </IconButton>\n </BackButtonWrapper>\n );\n }\n };\n\n const getLeftActionIconElement = (icon: ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink id=\"left-action-hyperlink\" className=\"footer-action\" href={(leftFooterAction as LeftFooterHyperlink).href} disabled={disabled} variant=\"default\">\n {icon && getLeftActionIconElement(icon)}\n {text}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n return (\n <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n <Column>\n <form onSubmit={submitAction}>\n {topImage && (\n <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n <img src={topImage} alt=\"Modal top\" />\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!topImage && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!topImage && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n </ModalTitleSection>\n\n <ModalBody size={size}>{children}</ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n <ModalFooter size={size}>\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n {buttons?.map((b, i) => (\n <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
1
+ {"version":3,"sources":["../../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalTootip","XSmall","COLORS","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","map","b","i","id"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n ModalHoverModifier,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { ReactNode } from 'react';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string;\n topImage?: any;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string | React.ReactNode;\n state?: string;\n icon?: React.ReactNode;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n}) => {\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const ModalTitle = (title: string, size?: Size) => {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n };\n\n const ModalTootip = (tooltip: string) => {\n return (\n <ModalHoverModifier>\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n <Help size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </TooltipWrapper>\n </ModalHoverModifier>\n );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n <Close size=\"24px\" color={COLORS.black} />\n </IconButton>\n </CloseButtonWrapper>\n );\n };\n\n const ModalBackButton = () => {\n if (backButton) {\n return (\n <BackButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n </IconButton>\n </BackButtonWrapper>\n );\n }\n };\n\n const getLeftActionIconElement = (icon: ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink\n id=\"left-action-hyperlink\"\n className=\"footer-action\"\n href={(leftFooterAction as LeftFooterHyperlink).href}\n disabled={disabled}\n variant=\"default\"\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {icon && getLeftActionIconElement(icon)}\n {text}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n return (\n <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n <Column>\n <form onSubmit={submitAction}>\n {topImage && (\n <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n <img src={topImage} alt=\"Modal top\" />\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!topImage && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!topImage && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n </ModalTitleSection>\n\n <ModalBody size={size}>{children}</ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n <ModalFooter size={size}>\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n {buttons?.map((b, i) => (\n <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}