@dreamcommerce/aurora 2.1.30 → 2.1.31-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.
- package/build/cjs/packages/aurora/src/components/accordion/index.js +6 -4
- package/build/cjs/packages/aurora/src/components/accordion/index.js.map +1 -1
- package/build/cjs/packages/aurora/src/css/accordion/main.module.less.js +1 -1
- package/build/esm/packages/aurora/src/components/accordion/index.js +6 -4
- package/build/esm/packages/aurora/src/components/accordion/index.js.map +1 -1
- package/build/esm/packages/aurora/src/components/accordion/types.d.ts +1 -0
- package/build/esm/packages/aurora/src/css/accordion/main.module.less.js +1 -1
- package/package.json +1 -1
|
@@ -11,16 +11,18 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
11
|
|
|
12
12
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
13
|
|
|
14
|
-
const Accordion = ({ id, title, isOpened = false, secondary, children }) => {
|
|
14
|
+
const Accordion = ({ id, title, isOpened = false, secondary, negativeIndentValue, children }) => {
|
|
15
15
|
const [isOpen, setIsOpen] = React.useState(isOpened);
|
|
16
16
|
const handleOnClick = () => {
|
|
17
17
|
setIsOpen(!isOpen);
|
|
18
18
|
};
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
const wrapperIndentStyles = { marginLeft: `-${negativeIndentValue}px`, marginRight: `-${negativeIndentValue}px` };
|
|
20
|
+
const contentIndentStyles = { paddingLeft: `${negativeIndentValue}px`, paddingRight: `${negativeIndentValue}px` };
|
|
21
|
+
return (React__default['default'].createElement("div", { className: `${main_module['default'][css_classes['default'].accordion]} ${secondary ? main_module['default'][css_classes['default'].accordionSecondary] : ''}`, style: negativeIndentValue ? wrapperIndentStyles : undefined },
|
|
22
|
+
React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].accordionHeader], onClick: handleOnClick, "aria-expanded": isOpen, "aria-controls": id, style: negativeIndentValue ? contentIndentStyles : undefined },
|
|
21
23
|
React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].accordionTitle] }, title),
|
|
22
24
|
React__default['default'].createElement(icon_arrow_down['default'], { size: "m", className: `${isOpen ? main_module['default'][css_classes['default'].accordionIconRotate180] : ''}` })),
|
|
23
|
-
isOpen && (React__default['default'].createElement("div", { id: id, className: main_module['default'][css_classes['default'].accordionContent] }, children))));
|
|
25
|
+
isOpen && (React__default['default'].createElement("div", { id: id, className: main_module['default'][css_classes['default'].accordionContent], style: negativeIndentValue ? contentIndentStyles : undefined }, children))));
|
|
24
26
|
};
|
|
25
27
|
|
|
26
28
|
exports.default = Accordion;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
|
|
6
6
|
|
|
7
|
-
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_accordion__qbc72 {\n background-color: #f3f4f8;\n border: 1px solid #abb4cd;\n border-radius: 2px;\n overflow: hidden;\n}\n.main-module_accordion__header__28z7_ {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 8px;\n font-weight: 600;\n cursor: pointer;\n}\n.main-module_accordion__title__cZTxX {\n max-width: calc(100% - (12px + 8px));\n word-wrap: break-word;\n}\n.main-module_accordion__content__3c3tq {\n padding: 8px;\n border-top: 1px solid #abb4cd;\n}\n.main-module_accordion__icon_rotate-180__1tqnh {\n transform: rotate(180deg);\n}\n.main-module_accordion_secondary__-v9gP {\n border: 0;\n background-color: transparent;\n}\n.main-module_accordion_secondary__-v9gP .main-module_accordion__header__28z7_ {\n background-color: #f3f4f8;\n}\n.main-module_accordion_secondary__-v9gP .main-module_accordion__content__3c3tq {\n border-top: 0;\n}\n";
|
|
7
|
+
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_accordion__qbc72 {\n background-color: #f3f4f8;\n border: 1px solid #abb4cd;\n border-radius: 2px;\n overflow: hidden;\n}\n.main-module_accordion__header__28z7_ {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 8px;\n font-weight: 600;\n cursor: pointer;\n}\n.main-module_accordion__title__cZTxX {\n max-width: calc(100% - (12px + 8px));\n word-wrap: break-word;\n}\n.main-module_accordion__content__3c3tq {\n padding: 8px;\n border-top: 1px solid #abb4cd;\n}\n.main-module_accordion__icon_rotate-180__1tqnh {\n transform: rotate(180deg);\n}\n.main-module_accordion_secondary__-v9gP {\n border: 0;\n background-color: transparent;\n}\n.main-module_accordion_secondary__-v9gP > .main-module_accordion__header__28z7_ {\n background-color: #f3f4f8;\n}\n.main-module_accordion_secondary__-v9gP > .main-module_accordion__content__3c3tq {\n border-top: 0;\n}\n";
|
|
8
8
|
var cssClasses = {"accordion":"main-module_accordion__qbc72","accordion__header":"main-module_accordion__header__28z7_","accordion__title":"main-module_accordion__title__cZTxX","accordion__content":"main-module_accordion__content__3c3tq","accordion__icon_rotate-180":"main-module_accordion__icon_rotate-180__1tqnh","accordion_secondary":"main-module_accordion_secondary__-v9gP"};
|
|
9
9
|
styleInject_es['default'](css_248z);
|
|
10
10
|
|
|
@@ -3,16 +3,18 @@ import CSS_CLASSES from './css_classes.js';
|
|
|
3
3
|
import IconArrowDown from '../../assets/icon_arrow_down.js';
|
|
4
4
|
import cssClasses from '../../css/accordion/main.module.less.js';
|
|
5
5
|
|
|
6
|
-
const Accordion = ({ id, title, isOpened = false, secondary, children }) => {
|
|
6
|
+
const Accordion = ({ id, title, isOpened = false, secondary, negativeIndentValue, children }) => {
|
|
7
7
|
const [isOpen, setIsOpen] = useState(isOpened);
|
|
8
8
|
const handleOnClick = () => {
|
|
9
9
|
setIsOpen(!isOpen);
|
|
10
10
|
};
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
const wrapperIndentStyles = { marginLeft: `-${negativeIndentValue}px`, marginRight: `-${negativeIndentValue}px` };
|
|
12
|
+
const contentIndentStyles = { paddingLeft: `${negativeIndentValue}px`, paddingRight: `${negativeIndentValue}px` };
|
|
13
|
+
return (React.createElement("div", { className: `${cssClasses[CSS_CLASSES.accordion]} ${secondary ? cssClasses[CSS_CLASSES.accordionSecondary] : ''}`, style: negativeIndentValue ? wrapperIndentStyles : undefined },
|
|
14
|
+
React.createElement("div", { className: cssClasses[CSS_CLASSES.accordionHeader], onClick: handleOnClick, "aria-expanded": isOpen, "aria-controls": id, style: negativeIndentValue ? contentIndentStyles : undefined },
|
|
13
15
|
React.createElement("div", { className: cssClasses[CSS_CLASSES.accordionTitle] }, title),
|
|
14
16
|
React.createElement(IconArrowDown, { size: "m", className: `${isOpen ? cssClasses[CSS_CLASSES.accordionIconRotate180] : ''}` })),
|
|
15
|
-
isOpen && (React.createElement("div", { id: id, className: cssClasses[CSS_CLASSES.accordionContent] }, children))));
|
|
17
|
+
isOpen && (React.createElement("div", { id: id, className: cssClasses[CSS_CLASSES.accordionContent], style: negativeIndentValue ? contentIndentStyles : undefined }, children))));
|
|
16
18
|
};
|
|
17
19
|
|
|
18
20
|
export default Accordion;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_accordion__qbc72 {\n background-color: #f3f4f8;\n border: 1px solid #abb4cd;\n border-radius: 2px;\n overflow: hidden;\n}\n.main-module_accordion__header__28z7_ {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 8px;\n font-weight: 600;\n cursor: pointer;\n}\n.main-module_accordion__title__cZTxX {\n max-width: calc(100% - (12px + 8px));\n word-wrap: break-word;\n}\n.main-module_accordion__content__3c3tq {\n padding: 8px;\n border-top: 1px solid #abb4cd;\n}\n.main-module_accordion__icon_rotate-180__1tqnh {\n transform: rotate(180deg);\n}\n.main-module_accordion_secondary__-v9gP {\n border: 0;\n background-color: transparent;\n}\n.main-module_accordion_secondary__-v9gP .main-module_accordion__header__28z7_ {\n background-color: #f3f4f8;\n}\n.main-module_accordion_secondary__-v9gP .main-module_accordion__content__3c3tq {\n border-top: 0;\n}\n";
|
|
3
|
+
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_accordion__qbc72 {\n background-color: #f3f4f8;\n border: 1px solid #abb4cd;\n border-radius: 2px;\n overflow: hidden;\n}\n.main-module_accordion__header__28z7_ {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 8px;\n font-weight: 600;\n cursor: pointer;\n}\n.main-module_accordion__title__cZTxX {\n max-width: calc(100% - (12px + 8px));\n word-wrap: break-word;\n}\n.main-module_accordion__content__3c3tq {\n padding: 8px;\n border-top: 1px solid #abb4cd;\n}\n.main-module_accordion__icon_rotate-180__1tqnh {\n transform: rotate(180deg);\n}\n.main-module_accordion_secondary__-v9gP {\n border: 0;\n background-color: transparent;\n}\n.main-module_accordion_secondary__-v9gP > .main-module_accordion__header__28z7_ {\n background-color: #f3f4f8;\n}\n.main-module_accordion_secondary__-v9gP > .main-module_accordion__content__3c3tq {\n border-top: 0;\n}\n";
|
|
4
4
|
var cssClasses = {"accordion":"main-module_accordion__qbc72","accordion__header":"main-module_accordion__header__28z7_","accordion__title":"main-module_accordion__title__cZTxX","accordion__content":"main-module_accordion__content__3c3tq","accordion__icon_rotate-180":"main-module_accordion__icon_rotate-180__1tqnh","accordion_secondary":"main-module_accordion_secondary__-v9gP"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|