@coorpacademy/components 11.36.10-alpha.9 → 11.36.10-alpha.99.2
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/es/molecule/base-modal/index.d.ts.map +1 -1
- package/es/molecule/base-modal/index.js +3 -3
- package/es/molecule/base-modal/index.js.map +1 -1
- package/es/molecule/base-modal/style.css +1 -4
- package/es/organism/content-skill-modal/index.d.ts.map +1 -1
- package/es/organism/content-skill-modal/index.js +5 -5
- package/es/organism/content-skill-modal/index.js.map +1 -1
- package/es/organism/header-with-actions/index.d.ts +73 -15
- package/es/organism/header-with-actions/index.d.ts.map +1 -1
- package/es/organism/header-with-actions/index.js +5 -76
- package/es/organism/header-with-actions/index.js.map +1 -1
- package/es/organism/header-with-actions/types.d.ts +81 -38
- package/es/organism/header-with-actions/types.d.ts.map +1 -1
- package/es/organism/header-with-actions/types.js +12 -25
- package/es/organism/header-with-actions/types.js.map +1 -1
- package/es/organism/skill-edition/index.d.ts.map +1 -1
- package/es/organism/skill-edition/index.js +1 -0
- package/es/organism/skill-edition/index.js.map +1 -1
- package/es/template/back-office/brand-update/index.d.ts +73 -15
- package/es/template/back-office/brand-update/index.d.ts.map +1 -1
- package/es/template/back-office/brand-update/index.js +6 -4
- package/es/template/back-office/brand-update/index.js.map +1 -1
- package/es/template/back-office/brand-update/style.css +6 -5
- package/es/template/back-office/brand-update/utils.d.ts +10 -38
- package/es/template/back-office/brand-update/utils.js +0 -19
- package/es/template/back-office/brand-update/utils.js.map +1 -1
- package/lib/molecule/base-modal/index.d.ts.map +1 -1
- package/lib/molecule/base-modal/index.js +3 -3
- package/lib/molecule/base-modal/index.js.map +1 -1
- package/lib/molecule/base-modal/style.css +1 -4
- package/lib/organism/content-skill-modal/index.d.ts.map +1 -1
- package/lib/organism/content-skill-modal/index.js +5 -5
- package/lib/organism/content-skill-modal/index.js.map +1 -1
- package/lib/organism/header-with-actions/index.d.ts +73 -15
- package/lib/organism/header-with-actions/index.d.ts.map +1 -1
- package/lib/organism/header-with-actions/index.js +3 -74
- package/lib/organism/header-with-actions/index.js.map +1 -1
- package/lib/organism/header-with-actions/types.d.ts +81 -38
- package/lib/organism/header-with-actions/types.d.ts.map +1 -1
- package/lib/organism/header-with-actions/types.js +12 -25
- package/lib/organism/header-with-actions/types.js.map +1 -1
- package/lib/organism/skill-edition/index.d.ts.map +1 -1
- package/lib/organism/skill-edition/index.js +1 -0
- package/lib/organism/skill-edition/index.js.map +1 -1
- package/lib/template/back-office/brand-update/index.d.ts +73 -15
- package/lib/template/back-office/brand-update/index.d.ts.map +1 -1
- package/lib/template/back-office/brand-update/index.js +6 -4
- package/lib/template/back-office/brand-update/index.js.map +1 -1
- package/lib/template/back-office/brand-update/style.css +6 -5
- package/lib/template/back-office/brand-update/utils.d.ts +10 -38
- package/lib/template/back-office/brand-update/utils.js +0 -19
- package/lib/template/back-office/brand-update/utils.js.map +1 -1
- package/package.json +2 -2
- package/locales/.mtslconfig.json +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/base-modal/index.js"],"names":[],"mappings":";AAUA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/base-modal/index.js"],"names":[],"mappings":";AAUA,yEA8KC"}
|
|
@@ -137,7 +137,8 @@ const BaseModal = (props, context) => {
|
|
|
137
137
|
className: style.modalWrapper,
|
|
138
138
|
"data-testid": "modal"
|
|
139
139
|
}, /*#__PURE__*/React.createElement("div", {
|
|
140
|
-
className: style.modal
|
|
140
|
+
className: style.modal,
|
|
141
|
+
style: customStyle
|
|
141
142
|
}, /*#__PURE__*/React.createElement("header", {
|
|
142
143
|
className: style.header
|
|
143
144
|
}, headerIcon?.name ? /*#__PURE__*/React.createElement("div", {
|
|
@@ -171,8 +172,7 @@ const BaseModal = (props, context) => {
|
|
|
171
172
|
ref: bodyRef,
|
|
172
173
|
className: isScrollbarVisible ? style.body : style.bodyWithoutScrollbar,
|
|
173
174
|
onScroll: onScroll,
|
|
174
|
-
"data-testid": "modal-body"
|
|
175
|
-
style: customStyle
|
|
175
|
+
"data-testid": "modal-body"
|
|
176
176
|
}, children), /*#__PURE__*/React.createElement(Footer, null)));
|
|
177
177
|
};
|
|
178
178
|
BaseModal.contextTypes = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useRef","useState","PropTypes","convert","Provider","Icon","ButtonLink","COLORS","style","BaseModal","props","context","title","description","headerIcon","children","isOpen","footer","onClose","onScroll","detectScrollbar","customStyle","skin","bodyRef","isScrollbarVisible","setIsScrollbarVisible","checkScrollbar","bodyElement","current","scrollHeight","clientHeight","debouncedCheckScrollbar","_debounce","mutationObserver","MutationObserver","observe","childList","subtree","resizeObserver","ResizeObserver","disconnect","cancel","Footer","_isEmpty","cancelButton","confirmButton","text","isError","label","cancelLabel","onCancel","disabled","cancelDisabled","confirmLabel","onConfirm","confirmDisabled","iconName","color","buttonConfirmColor","_get","createElement","className","footerCTAWrapper","button","type","onClick","_extends","backgroundColor","paddingLeft","hoverBackgroundColor","hoverColor","white","icon","position","faIcon","name","size","padding","footerDescription","footerDescriptionError","handleOnClose","e","stopPropagation","modalWrapper","modal","header","iconColor","faSize","wrapperSize","headerContent","headerTitle","headerDescription","headerCloseIcon","ref","body","bodyWithoutScrollbar","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","shape","node","bool","oneOfType","func","boolean","objectOf","number"],"sources":["../../../src/molecule/base-modal/index.js"],"sourcesContent":["import React, {useCallback, useEffect, useRef, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, get, debounce} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport Provider from '../../atom/provider';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst BaseModal = (props, context) => {\n const {\n title,\n description,\n headerIcon,\n children,\n isOpen,\n footer,\n onClose,\n onScroll,\n detectScrollbar = false,\n customStyle\n } = props;\n const {skin} = context;\n const bodyRef = useRef(null);\n const [isScrollbarVisible, setIsScrollbarVisible] = useState(!detectScrollbar);\n\n const checkScrollbar = () => {\n const bodyElement = bodyRef.current;\n if (bodyElement) {\n setIsScrollbarVisible(bodyElement.scrollHeight > bodyElement.clientHeight);\n }\n };\n\n useEffect(() => {\n if (!detectScrollbar) return;\n const bodyElement = bodyRef.current;\n\n if (!bodyElement) return;\n\n const debouncedCheckScrollbar = debounce(100, () => {\n checkScrollbar();\n });\n\n // Observer of the body content\n const mutationObserver = new MutationObserver(() => {\n debouncedCheckScrollbar();\n });\n\n mutationObserver.observe(bodyElement, {childList: true, subtree: true});\n\n // Observer of the body size\n const resizeObserver = new ResizeObserver(() => {\n debouncedCheckScrollbar();\n });\n\n if (bodyRef.current) {\n resizeObserver.observe(bodyRef.current);\n }\n\n checkScrollbar();\n\n return () => {\n mutationObserver.disconnect();\n resizeObserver.disconnect();\n debouncedCheckScrollbar.cancel();\n };\n }, [children, detectScrollbar]);\n\n const Footer = useCallback(() => {\n if (isEmpty(footer)) return null;\n if (typeof footer === 'function') return footer();\n\n const {cancelButton, confirmButton, text, isError} = footer;\n const {label: cancelLabel, onCancel, disabled: cancelDisabled} = cancelButton || {};\n const {\n label: confirmLabel,\n onConfirm,\n disabled: confirmDisabled,\n iconName,\n color\n } = confirmButton || {};\n const buttonConfirmColor = color || get('common.primary', skin);\n\n return (\n <div className={style.footer}>\n <div className={style.footerCTAWrapper}>\n {onCancel && cancelLabel ? (\n <ButtonLink\n {...{\n className: style.button,\n type: 'secondary',\n onClick: onCancel,\n label: cancelLabel,\n disabled: cancelDisabled,\n 'data-testid': `button-link-${cancelLabel}`\n }}\n />\n ) : null}\n {onConfirm && confirmLabel ? (\n <div>\n <ButtonLink\n {...{\n customStyle: {backgroundColor: buttonConfirmColor, paddingLeft: '16px'},\n hoverBackgroundColor: convert(\n `hsl(from ${buttonConfirmColor} h s calc(l*(1 - 0.08)))`\n ),\n hoverColor: COLORS.white,\n className: style.button,\n type: 'primary',\n onClick: onConfirm,\n label: confirmLabel,\n disabled: confirmDisabled,\n ...(iconName\n ? {\n icon: {\n position: 'left',\n faIcon: {\n name: iconName,\n color: COLORS.white,\n size: 14,\n customStyle: {padding: 0}\n }\n }\n }\n : {}),\n 'data-testid': `button-link-${confirmLabel}`\n }}\n />\n </div>\n ) : null}\n </div>\n {text ? (\n <div\n className={`${style.footerDescription} ${isError ? style.footerDescriptionError : ''}`}\n >\n {text}\n </div>\n ) : null}\n </div>\n );\n }, [footer, skin]);\n\n if (!isOpen || !title || !children) return null;\n\n function handleOnClose(e) {\n e?.stopPropagation();\n onClose();\n }\n\n return (\n <div className={style.modalWrapper} data-testid=\"modal\">\n <div className={style.modal}>\n <header className={style.header}>\n {headerIcon?.name ? (\n <div className={style.headerIcon}>\n <Icon\n iconName={headerIcon.name}\n iconColor={headerIcon.color}\n backgroundColor={headerIcon.backgroundColor}\n size={{faSize: 20, wrapperSize: 48}}\n />\n </div>\n ) : null}\n <div className={style.headerContent}>\n <div className={style.headerTitle}>{title}</div>\n {description ? <div className={style.headerDescription}>{description}</div> : null}\n </div>\n <div className={style.headerCloseIcon} onClick={handleOnClose} data-testid=\"close-icon\">\n <Icon iconName=\"close\" backgroundColor=\"#F4F4F5\" size={{faSize: 14, wrapperSize: 28}} />\n </div>\n </header>\n <div\n ref={bodyRef}\n className={isScrollbarVisible ? style.body : style.bodyWithoutScrollbar}\n onScroll={onScroll}\n data-testid=\"modal-body\"\n style={customStyle}\n >\n {children}\n </div>\n <Footer />\n </div>\n </div>\n );\n};\n\nBaseModal.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nBaseModal.propTypes = {\n title: PropTypes.string,\n headerIcon: PropTypes.shape({\n name: PropTypes.string,\n color: PropTypes.string,\n backgroundColor: PropTypes.string\n }),\n description: PropTypes.string,\n children: PropTypes.node,\n isOpen: PropTypes.bool,\n footer: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({\n text: PropTypes.string,\n isError: PropTypes.boolean,\n cancelButton: PropTypes.shape({\n label: PropTypes.string,\n onCancel: PropTypes.func,\n disabled: PropTypes.bool\n }),\n confirmButton: PropTypes.shape({\n label: PropTypes.string,\n onConfirm: PropTypes.func,\n iconName: PropTypes.string,\n disabled: PropTypes.bool,\n color: PropTypes.string\n })\n })\n ]),\n onClose: PropTypes.func,\n onScroll: PropTypes.func,\n detectScrollbar: PropTypes.bool,\n customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nexport default BaseModal;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useRef","useState","PropTypes","convert","Provider","Icon","ButtonLink","COLORS","style","BaseModal","props","context","title","description","headerIcon","children","isOpen","footer","onClose","onScroll","detectScrollbar","customStyle","skin","bodyRef","isScrollbarVisible","setIsScrollbarVisible","checkScrollbar","bodyElement","current","scrollHeight","clientHeight","debouncedCheckScrollbar","_debounce","mutationObserver","MutationObserver","observe","childList","subtree","resizeObserver","ResizeObserver","disconnect","cancel","Footer","_isEmpty","cancelButton","confirmButton","text","isError","label","cancelLabel","onCancel","disabled","cancelDisabled","confirmLabel","onConfirm","confirmDisabled","iconName","color","buttonConfirmColor","_get","createElement","className","footerCTAWrapper","button","type","onClick","_extends","backgroundColor","paddingLeft","hoverBackgroundColor","hoverColor","white","icon","position","faIcon","name","size","padding","footerDescription","footerDescriptionError","handleOnClose","e","stopPropagation","modalWrapper","modal","header","iconColor","faSize","wrapperSize","headerContent","headerTitle","headerDescription","headerCloseIcon","ref","body","bodyWithoutScrollbar","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","shape","node","bool","oneOfType","func","boolean","objectOf","number"],"sources":["../../../src/molecule/base-modal/index.js"],"sourcesContent":["import React, {useCallback, useEffect, useRef, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, get, debounce} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport Provider from '../../atom/provider';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst BaseModal = (props, context) => {\n const {\n title,\n description,\n headerIcon,\n children,\n isOpen,\n footer,\n onClose,\n onScroll,\n detectScrollbar = false,\n customStyle\n } = props;\n const {skin} = context;\n const bodyRef = useRef(null);\n const [isScrollbarVisible, setIsScrollbarVisible] = useState(!detectScrollbar);\n\n const checkScrollbar = () => {\n const bodyElement = bodyRef.current;\n if (bodyElement) {\n setIsScrollbarVisible(bodyElement.scrollHeight > bodyElement.clientHeight);\n }\n };\n\n useEffect(() => {\n if (!detectScrollbar) return;\n const bodyElement = bodyRef.current;\n\n if (!bodyElement) return;\n\n const debouncedCheckScrollbar = debounce(100, () => {\n checkScrollbar();\n });\n\n // Observer of the body content\n const mutationObserver = new MutationObserver(() => {\n debouncedCheckScrollbar();\n });\n\n mutationObserver.observe(bodyElement, {childList: true, subtree: true});\n\n // Observer of the body size\n const resizeObserver = new ResizeObserver(() => {\n debouncedCheckScrollbar();\n });\n\n if (bodyRef.current) {\n resizeObserver.observe(bodyRef.current);\n }\n\n checkScrollbar();\n\n return () => {\n mutationObserver.disconnect();\n resizeObserver.disconnect();\n debouncedCheckScrollbar.cancel();\n };\n }, [children, detectScrollbar]);\n\n const Footer = useCallback(() => {\n if (isEmpty(footer)) return null;\n if (typeof footer === 'function') return footer();\n\n const {cancelButton, confirmButton, text, isError} = footer;\n const {label: cancelLabel, onCancel, disabled: cancelDisabled} = cancelButton || {};\n const {\n label: confirmLabel,\n onConfirm,\n disabled: confirmDisabled,\n iconName,\n color\n } = confirmButton || {};\n const buttonConfirmColor = color || get('common.primary', skin);\n\n return (\n <div className={style.footer}>\n <div className={style.footerCTAWrapper}>\n {onCancel && cancelLabel ? (\n <ButtonLink\n {...{\n className: style.button,\n type: 'secondary',\n onClick: onCancel,\n label: cancelLabel,\n disabled: cancelDisabled,\n 'data-testid': `button-link-${cancelLabel}`\n }}\n />\n ) : null}\n {onConfirm && confirmLabel ? (\n <div>\n <ButtonLink\n {...{\n customStyle: {backgroundColor: buttonConfirmColor, paddingLeft: '16px'},\n hoverBackgroundColor: convert(\n `hsl(from ${buttonConfirmColor} h s calc(l*(1 - 0.08)))`\n ),\n hoverColor: COLORS.white,\n className: style.button,\n type: 'primary',\n onClick: onConfirm,\n label: confirmLabel,\n disabled: confirmDisabled,\n ...(iconName\n ? {\n icon: {\n position: 'left',\n faIcon: {\n name: iconName,\n color: COLORS.white,\n size: 14,\n customStyle: {padding: 0}\n }\n }\n }\n : {}),\n 'data-testid': `button-link-${confirmLabel}`\n }}\n />\n </div>\n ) : null}\n </div>\n {text ? (\n <div\n className={`${style.footerDescription} ${isError ? style.footerDescriptionError : ''}`}\n >\n {text}\n </div>\n ) : null}\n </div>\n );\n }, [footer, skin]);\n\n if (!isOpen || !title || !children) return null;\n\n function handleOnClose(e) {\n e?.stopPropagation();\n onClose();\n }\n\n return (\n <div className={style.modalWrapper} data-testid=\"modal\">\n <div className={style.modal} style={customStyle}>\n <header className={style.header}>\n {headerIcon?.name ? (\n <div className={style.headerIcon}>\n <Icon\n iconName={headerIcon.name}\n iconColor={headerIcon.color}\n backgroundColor={headerIcon.backgroundColor}\n size={{faSize: 20, wrapperSize: 48}}\n />\n </div>\n ) : null}\n <div className={style.headerContent}>\n <div className={style.headerTitle}>{title}</div>\n {description ? <div className={style.headerDescription}>{description}</div> : null}\n </div>\n <div className={style.headerCloseIcon} onClick={handleOnClose} data-testid=\"close-icon\">\n <Icon iconName=\"close\" backgroundColor=\"#F4F4F5\" size={{faSize: 14, wrapperSize: 28}} />\n </div>\n </header>\n <div\n ref={bodyRef}\n className={isScrollbarVisible ? style.body : style.bodyWithoutScrollbar}\n onScroll={onScroll}\n data-testid=\"modal-body\"\n >\n {children}\n </div>\n <Footer />\n </div>\n </div>\n );\n};\n\nBaseModal.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nBaseModal.propTypes = {\n title: PropTypes.string,\n headerIcon: PropTypes.shape({\n name: PropTypes.string,\n color: PropTypes.string,\n backgroundColor: PropTypes.string\n }),\n description: PropTypes.string,\n children: PropTypes.node,\n isOpen: PropTypes.bool,\n footer: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({\n text: PropTypes.string,\n isError: PropTypes.boolean,\n cancelButton: PropTypes.shape({\n label: PropTypes.string,\n onCancel: PropTypes.func,\n disabled: PropTypes.bool\n }),\n confirmButton: PropTypes.shape({\n label: PropTypes.string,\n onConfirm: PropTypes.func,\n iconName: PropTypes.string,\n disabled: PropTypes.bool,\n color: PropTypes.string\n })\n })\n ]),\n onClose: PropTypes.func,\n onScroll: PropTypes.func,\n detectScrollbar: PropTypes.bool,\n customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nexport default BaseModal;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -24,10 +24,6 @@
|
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
.modal {
|
|
27
|
-
max-width: 71vw;
|
|
28
|
-
max-height: 86vh;
|
|
29
|
-
min-width: 450px;
|
|
30
|
-
min-height: 165px;
|
|
31
27
|
overflow: hidden;
|
|
32
28
|
border-radius: 16px;
|
|
33
29
|
background-color: white;
|
|
@@ -77,6 +73,7 @@
|
|
|
77
73
|
min-height: 100px;
|
|
78
74
|
border-top: 1px solid cm_grey_150;
|
|
79
75
|
border-bottom: 1px solid cm_grey_150;
|
|
76
|
+
flex: 1;
|
|
80
77
|
}
|
|
81
78
|
|
|
82
79
|
.bodyWithoutScrollbar {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/content-skill-modal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAOlD,OAAkB,EAAC,sBAAsB,EAAC,MAAM,SAAS,CAAC;AAE1D,QAAA,MAAM,iBAAiB;YAAW,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/content-skill-modal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAOlD,OAAkB,EAAC,sBAAsB,EAAC,MAAM,SAAS,CAAC;AAE1D,QAAA,MAAM,iBAAiB;YAAW,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DvD,CAAC;AAQF,eAAe,iBAAiB,CAAC"}
|
|
@@ -42,21 +42,21 @@ const ContentSkillModal = props => {
|
|
|
42
42
|
color: COLORS.cm_primary_blue
|
|
43
43
|
}
|
|
44
44
|
}), [handleCancel, onConfirm]);
|
|
45
|
-
const
|
|
45
|
+
const baseModalProps = {
|
|
46
46
|
title: 'Add content',
|
|
47
47
|
description: 'Add courses, video, interactive and more to this skill',
|
|
48
48
|
headerIcon,
|
|
49
49
|
footer,
|
|
50
50
|
isOpen,
|
|
51
51
|
onClose: handleClose,
|
|
52
|
+
// fullscreen modal
|
|
52
53
|
customStyle: {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
overflow: 'hidden'
|
|
54
|
+
height: '80vh',
|
|
55
|
+
width: '80vw'
|
|
56
56
|
}
|
|
57
57
|
};
|
|
58
58
|
if (!isOpen) return null;
|
|
59
|
-
return /*#__PURE__*/React.createElement(BaseModal,
|
|
59
|
+
return /*#__PURE__*/React.createElement(BaseModal, baseModalProps, /*#__PURE__*/React.createElement("div", {
|
|
60
60
|
className: style.container
|
|
61
61
|
}, /*#__PURE__*/React.createElement("div", {
|
|
62
62
|
className: style.containerList
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useCallback","useMemo","BaseModal","ListItems","MultiFilterPanel","Provider","COLORS","style","propTypes","ContentSkillModal","props","contentList","filters","modal","isOpen","onCancel","onConfirm","onClose","handleCancel","handleClose","headerIcon","name","color","primary_600","backgroundColor","primary_100","footer","cancelButton","label","confirmButton","iconName","disabled","cm_primary_blue","
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useCallback","useMemo","BaseModal","ListItems","MultiFilterPanel","Provider","COLORS","style","propTypes","ContentSkillModal","props","contentList","filters","modal","isOpen","onCancel","onConfirm","onClose","handleCancel","handleClose","headerIcon","name","color","primary_600","backgroundColor","primary_100","footer","cancelButton","label","confirmButton","iconName","disabled","cm_primary_blue","baseModalProps","title","description","customStyle","height","width","createElement","className","container","containerList","filtersContainer","contextTypes","translate","childContextTypes","process","env","NODE_ENV"],"sources":["../../../src/organism/content-skill-modal/index.tsx"],"sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport BaseModal from '../../molecule/base-modal';\nimport ListItems from '../list-items';\nimport MultiFilterPanel from '../../molecule/multi-filter-panel';\nimport Provider from '../../atom/provider';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\nimport propTypes, {ContentSkillModalProps} from './types';\n\nconst ContentSkillModal = (props: ContentSkillModalProps) => {\n const {contentList, filters, modal} = props;\n const {isOpen, onCancel, onConfirm, onClose} = modal;\n\n const handleCancel = useCallback(() => {\n onCancel();\n }, [onCancel]);\n const handleClose = useCallback(() => {\n onClose();\n }, [onClose]);\n\n const headerIcon = {\n name: 'circle-plus',\n color: COLORS.primary_600,\n backgroundColor: COLORS.primary_100\n };\n const footer = useMemo(\n () => ({\n cancelButton: {\n onCancel: handleCancel,\n label: 'Cancel'\n },\n confirmButton: {\n onConfirm,\n label: 'Add',\n iconName: 'plus',\n disabled: false,\n color: COLORS.cm_primary_blue\n }\n }),\n [handleCancel, onConfirm]\n );\n\n const baseModalProps = {\n title: 'Add content',\n description: 'Add courses, video, interactive and more to this skill',\n headerIcon,\n footer,\n isOpen,\n onClose: handleClose,\n // fullscreen modal\n customStyle: {\n height: '80vh',\n width: '80vw'\n }\n };\n\n if (!isOpen) return null;\n\n return (\n <BaseModal {...baseModalProps}>\n <div className={style.container}>\n <div className={style.containerList}>\n <ListItems {...contentList} />\n </div>\n <div className={style.filtersContainer}>\n <MultiFilterPanel {...filters} />\n </div>\n </div>\n </BaseModal>\n );\n};\n\nContentSkillModal.contextTypes = {\n translate: Provider.childContextTypes.translate\n};\n\nContentSkillModal.propTypes = propTypes;\n\nexport default ContentSkillModal;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAGC,WAAW,EAAEC,OAAO,QAAO,OAAO;AACjD,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,SAAS,MAAM,eAAe;AACrC,OAAOC,gBAAgB,MAAM,mCAAmC;AAChE,OAAOC,QAAQ,MAAM,qBAAqB;AAC1C,SAAQC,MAAM,QAAO,wBAAwB;AAC7C,OAAOC,KAAK,MAAM,aAAa;AAC/B,OAAOC,SAAS,MAAgC,SAAS;AAEzD,MAAMC,iBAAiB,GAAIC,KAA6B,IAAK;EAC3D,MAAM;IAACC,WAAW;IAAEC,OAAO;IAAEC;EAAK,CAAC,GAAGH,KAAK;EAC3C,MAAM;IAACI,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAEC;EAAO,CAAC,GAAGJ,KAAK;EAEpD,MAAMK,YAAY,GAAGlB,WAAW,CAAC,MAAM;IACrCe,QAAQ,CAAC,CAAC;EACZ,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EACd,MAAMI,WAAW,GAAGnB,WAAW,CAAC,MAAM;IACpCiB,OAAO,CAAC,CAAC;EACX,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,MAAMG,UAAU,GAAG;IACjBC,IAAI,EAAE,aAAa;IACnBC,KAAK,EAAEhB,MAAM,CAACiB,WAAW;IACzBC,eAAe,EAAElB,MAAM,CAACmB;EAC1B,CAAC;EACD,MAAMC,MAAM,GAAGzB,OAAO,CACpB,OAAO;IACL0B,YAAY,EAAE;MACZZ,QAAQ,EAAEG,YAAY;MACtBU,KAAK,EAAE;IACT,CAAC;IACDC,aAAa,EAAE;MACbb,SAAS;MACTY,KAAK,EAAE,KAAK;MACZE,QAAQ,EAAE,MAAM;MAChBC,QAAQ,EAAE,KAAK;MACfT,KAAK,EAAEhB,MAAM,CAAC0B;IAChB;EACF,CAAC,CAAC,EACF,CAACd,YAAY,EAAEF,SAAS,CAC1B,CAAC;EAED,MAAMiB,cAAc,GAAG;IACrBC,KAAK,EAAE,aAAa;IACpBC,WAAW,EAAE,wDAAwD;IACrEf,UAAU;IACVM,MAAM;IACNZ,MAAM;IACNG,OAAO,EAAEE,WAAW;IACpB;IACAiB,WAAW,EAAE;MACXC,MAAM,EAAE,MAAM;MACdC,KAAK,EAAE;IACT;EACF,CAAC;EAED,IAAI,CAACxB,MAAM,EAAE,OAAO,IAAI;EAExB,oBACEf,KAAA,CAAAwC,aAAA,CAACrC,SAAS,EAAK+B,cAAc,eAC3BlC,KAAA,CAAAwC,aAAA;IAAKC,SAAS,EAAEjC,KAAK,CAACkC;EAAU,gBAC9B1C,KAAA,CAAAwC,aAAA;IAAKC,SAAS,EAAEjC,KAAK,CAACmC;EAAc,gBAClC3C,KAAA,CAAAwC,aAAA,CAACpC,SAAS,EAAKQ,WAAc,CAC1B,CAAC,eACNZ,KAAA,CAAAwC,aAAA;IAAKC,SAAS,EAAEjC,KAAK,CAACoC;EAAiB,gBACrC5C,KAAA,CAAAwC,aAAA,CAACnC,gBAAgB,EAAKQ,OAAU,CAC7B,CACF,CACI,CAAC;AAEhB,CAAC;AAEDH,iBAAiB,CAACmC,YAAY,GAAG;EAC/BC,SAAS,EAAExC,QAAQ,CAACyC,iBAAiB,CAACD;AACxC,CAAC;AAEDpC,iBAAiB,CAACD,SAAS,GAAAuC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAGzC,SAAS;AAEvC,eAAeC,iBAAiB","ignoreList":[]}
|
|
@@ -4,7 +4,10 @@ declare const HeaderWithActions: {
|
|
|
4
4
|
(props: HeaderWithActionsProps): JSX.Element;
|
|
5
5
|
propTypes: {
|
|
6
6
|
closeButton: import("prop-types").Requireable<import("prop-types").InferProps<{
|
|
7
|
-
|
|
7
|
+
size: import("prop-types").Validator<string>;
|
|
8
|
+
icon: import("prop-types").Validator<string>;
|
|
9
|
+
'data-name': import("prop-types").Validator<string>;
|
|
10
|
+
'aria-label': import("prop-types").Validator<string>;
|
|
8
11
|
onClick: import("prop-types").Validator<(...args: any[]) => any>;
|
|
9
12
|
}>>;
|
|
10
13
|
title: import("prop-types").Validator<string>;
|
|
@@ -17,25 +20,80 @@ declare const HeaderWithActions: {
|
|
|
17
20
|
display: import("prop-types").Validator<boolean>;
|
|
18
21
|
label: import("prop-types").Requireable<string>;
|
|
19
22
|
}>>>;
|
|
20
|
-
actionButtons: import("prop-types").Validator<(import("prop-types").InferProps<{
|
|
21
|
-
type: import("prop-types").Validator<string>;
|
|
22
|
-
label: import("prop-types").Validator<string>;
|
|
23
|
-
onClick: import("prop-types").Validator<(...args: any[]) => any>;
|
|
24
|
-
disabled: import("prop-types").Requireable<boolean>;
|
|
25
|
-
iconName: import("prop-types").Requireable<string>;
|
|
26
|
-
iconColor: import("prop-types").Requireable<string>;
|
|
27
|
-
}> | null | undefined)[]>;
|
|
28
23
|
bulletPointMenuButton: import("prop-types").Requireable<import("prop-types").InferProps<{
|
|
24
|
+
'data-name': import("prop-types").Requireable<string>;
|
|
25
|
+
disabled: import("prop-types").Requireable<boolean>;
|
|
26
|
+
buttonAriaLabel: import("prop-types").Requireable<string>;
|
|
27
|
+
menuAriaLabel: import("prop-types").Requireable<string>;
|
|
29
28
|
buttons: import("prop-types").Validator<(import("prop-types").InferProps<{
|
|
30
|
-
|
|
29
|
+
'data-name': import("prop-types").Requireable<string>;
|
|
30
|
+
disabled: import("prop-types").Requireable<boolean>;
|
|
31
31
|
label: import("prop-types").Validator<string>;
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
onClick: import("prop-types").Requireable<(...args: any[]) => any>;
|
|
33
|
+
type: import("prop-types").Requireable<string>;
|
|
34
|
+
buttonLinkType: import("prop-types").Requireable<string>;
|
|
35
|
+
icon: import("prop-types").Requireable<import("prop-types").InferProps<{
|
|
36
|
+
theme: import("prop-types").Requireable<string>;
|
|
37
|
+
position: import("prop-types").Requireable<string>;
|
|
38
|
+
type: import("prop-types").Requireable<string>;
|
|
39
|
+
faIcon: import("prop-types").Requireable<import("prop-types").InferProps<{
|
|
40
|
+
name: import("prop-types").Validator<string>;
|
|
41
|
+
color: import("prop-types").Requireable<string>;
|
|
42
|
+
backgroundColor: import("prop-types").Requireable<string>;
|
|
43
|
+
size: import("prop-types").Requireable<number>;
|
|
44
|
+
customStyle: import("prop-types").Requireable<{
|
|
45
|
+
[x: string]: NonNullable<string | number | null | undefined> | null | undefined;
|
|
46
|
+
}>;
|
|
47
|
+
}>>;
|
|
48
|
+
}>>;
|
|
49
|
+
customStyle: import("prop-types").Requireable<{
|
|
50
|
+
[x: string]: NonNullable<string | number | null | undefined> | null | undefined;
|
|
51
|
+
}>;
|
|
52
|
+
customLabelClassName: import("prop-types").Requireable<string>;
|
|
35
53
|
}> | null | undefined)[]>;
|
|
36
|
-
onClick: import("prop-types").
|
|
37
|
-
|
|
54
|
+
onClick: import("prop-types").Requireable<(...args: any[]) => any>;
|
|
55
|
+
menuButtonClassName: import("prop-types").Requireable<string>;
|
|
56
|
+
isBulkMenu: import("prop-types").Requireable<boolean>;
|
|
38
57
|
}>>;
|
|
58
|
+
actionButtons: import("prop-types").Validator<(import("prop-types").InferProps<{
|
|
59
|
+
type: import("prop-types").Requireable<string>;
|
|
60
|
+
usage: import("prop-types").Requireable<string>;
|
|
61
|
+
label: import("prop-types").Requireable<string>;
|
|
62
|
+
content: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
|
|
63
|
+
'aria-label': import("prop-types").Requireable<string>;
|
|
64
|
+
tooltipText: import("prop-types").Requireable<string>;
|
|
65
|
+
tooltipPlacement: import("prop-types").Requireable<string>;
|
|
66
|
+
'data-name': import("prop-types").Requireable<string>;
|
|
67
|
+
'data-testid': import("prop-types").Requireable<string>;
|
|
68
|
+
icon: import("prop-types").Requireable<import("prop-types").InferProps<{
|
|
69
|
+
position: import("prop-types").Requireable<string>;
|
|
70
|
+
type: import("prop-types").Requireable<string>;
|
|
71
|
+
faIcon: import("prop-types").Requireable<import("prop-types").InferProps<{
|
|
72
|
+
name: import("prop-types").Validator<string>;
|
|
73
|
+
color: import("prop-types").Requireable<string>;
|
|
74
|
+
backgroundColor: import("prop-types").Requireable<string>;
|
|
75
|
+
size: import("prop-types").Requireable<number>;
|
|
76
|
+
customStyle: import("prop-types").Requireable<{
|
|
77
|
+
[x: string]: NonNullable<string | number | null | undefined> | null | undefined;
|
|
78
|
+
}>;
|
|
79
|
+
}>>;
|
|
80
|
+
}>>;
|
|
81
|
+
onClick: import("prop-types").Requireable<(...args: any[]) => any>;
|
|
82
|
+
link: import("prop-types").Requireable<import("prop-types").InferProps<{
|
|
83
|
+
href: import("prop-types").Requireable<string>;
|
|
84
|
+
download: import("prop-types").Requireable<boolean>;
|
|
85
|
+
target: import("prop-types").Requireable<string>;
|
|
86
|
+
}>>;
|
|
87
|
+
hoverBackgroundColor: import("prop-types").Requireable<string>;
|
|
88
|
+
hoverColor: import("prop-types").Requireable<string>;
|
|
89
|
+
disabled: import("prop-types").Requireable<boolean>;
|
|
90
|
+
className: import("prop-types").Requireable<string>;
|
|
91
|
+
customStyle: import("prop-types").Requireable<{
|
|
92
|
+
[x: string]: NonNullable<string | number | null | undefined> | null | undefined;
|
|
93
|
+
}>;
|
|
94
|
+
useTitle: import("prop-types").Requireable<boolean>;
|
|
95
|
+
customLabelClassName: import("prop-types").Requireable<string>;
|
|
96
|
+
}> | null | undefined)[]>;
|
|
39
97
|
};
|
|
40
98
|
};
|
|
41
99
|
export default HeaderWithActions;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/header-with-actions/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/header-with-actions/index.tsx"],"names":[],"mappings":";AAQA,OAAmC,EAAC,sBAAsB,EAAC,MAAM,SAAS,CAAC;AAO3E,QAAA,MAAM,iBAAiB;YAAW,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCvD,CAAC;AAIF,eAAe,iBAAiB,CAAC"}
|
|
@@ -6,81 +6,13 @@ import ButtonLink from '../../atom/button-link';
|
|
|
6
6
|
import ButtonLinkIcon from '../../atom/button-link-icon';
|
|
7
7
|
import Tag from '../../atom/tag';
|
|
8
8
|
import BulletPointMenuButton from '../../molecule/bullet-point-menu-button';
|
|
9
|
-
import
|
|
9
|
+
import headerWithActionsPropTypes from './types';
|
|
10
10
|
import style from './style.css';
|
|
11
11
|
const getDataName = suffix => `header-with-actions-${suffix}`;
|
|
12
12
|
// @ts-expect-error (need to get the index)
|
|
13
13
|
const uncappedMap = map.convert({
|
|
14
14
|
cap: false
|
|
15
15
|
});
|
|
16
|
-
const buildCloseButton = ({
|
|
17
|
-
onClick,
|
|
18
|
-
ariaLabel
|
|
19
|
-
}) => {
|
|
20
|
-
return {
|
|
21
|
-
size: 'default',
|
|
22
|
-
icon: 'close',
|
|
23
|
-
'data-name': 'close-button',
|
|
24
|
-
'aria-label': ariaLabel,
|
|
25
|
-
onClick
|
|
26
|
-
};
|
|
27
|
-
};
|
|
28
|
-
const buildButtonMenu = ({
|
|
29
|
-
dataName,
|
|
30
|
-
label,
|
|
31
|
-
iconName,
|
|
32
|
-
iconColor,
|
|
33
|
-
onClick
|
|
34
|
-
}) => {
|
|
35
|
-
return {
|
|
36
|
-
'data-name': dataName,
|
|
37
|
-
label,
|
|
38
|
-
buttonLinkType: 'tertiary',
|
|
39
|
-
icon: {
|
|
40
|
-
position: 'left',
|
|
41
|
-
faIcon: {
|
|
42
|
-
name: iconName,
|
|
43
|
-
color: iconColor,
|
|
44
|
-
size: 14
|
|
45
|
-
}
|
|
46
|
-
},
|
|
47
|
-
onClick,
|
|
48
|
-
type: iconName === 'trash' ? 'dangerousLeft' : 'defaultLeft'
|
|
49
|
-
};
|
|
50
|
-
};
|
|
51
|
-
const buildActionButton = ({
|
|
52
|
-
type,
|
|
53
|
-
label,
|
|
54
|
-
onClick,
|
|
55
|
-
disabled,
|
|
56
|
-
iconName,
|
|
57
|
-
iconColor
|
|
58
|
-
}) => {
|
|
59
|
-
const base = {
|
|
60
|
-
type,
|
|
61
|
-
label,
|
|
62
|
-
onClick,
|
|
63
|
-
disabled,
|
|
64
|
-
customStyle: {
|
|
65
|
-
fontWeight: '600',
|
|
66
|
-
borderRadius: '12px'
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
if (iconName && iconColor) {
|
|
70
|
-
return {
|
|
71
|
-
...base,
|
|
72
|
-
icon: {
|
|
73
|
-
position: 'left',
|
|
74
|
-
faIcon: {
|
|
75
|
-
name: iconName,
|
|
76
|
-
color: iconColor,
|
|
77
|
-
size: 14
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
};
|
|
81
|
-
}
|
|
82
|
-
return base;
|
|
83
|
-
};
|
|
84
16
|
const HeaderWithActions = props => {
|
|
85
17
|
const {
|
|
86
18
|
closeButton,
|
|
@@ -96,10 +28,7 @@ const HeaderWithActions = props => {
|
|
|
96
28
|
}, /*#__PURE__*/React.createElement("div", {
|
|
97
29
|
className: style.titleAndButtonWrapper,
|
|
98
30
|
"data-name": getDataName('title-and-button-wrapper')
|
|
99
|
-
}, /*#__PURE__*/React.createElement(ButtonLinkIcon, _extends({},
|
|
100
|
-
onClick: closeButton.onClick,
|
|
101
|
-
ariaLabel: closeButton['aria-label']
|
|
102
|
-
}), {
|
|
31
|
+
}, /*#__PURE__*/React.createElement(ButtonLinkIcon, _extends({}, closeButton, {
|
|
103
32
|
className: style.button
|
|
104
33
|
})), /*#__PURE__*/React.createElement("div", {
|
|
105
34
|
className: style.titleWrapper
|
|
@@ -115,13 +44,13 @@ const HeaderWithActions = props => {
|
|
|
115
44
|
className: style.buttonsWrapper,
|
|
116
45
|
"data-name": getDataName('buttons-wrapper')
|
|
117
46
|
}, bulletPointMenuButton && !isEmpty(bulletPointMenuButton.buttons) ? /*#__PURE__*/React.createElement(BulletPointMenuButton, _extends({}, bulletPointMenuButton, {
|
|
118
|
-
|
|
47
|
+
buttonAriaLabel: "More actions"
|
|
119
48
|
})) : null, uncappedMap((action, key) => {
|
|
120
|
-
return /*#__PURE__*/React.createElement(ButtonLink, _extends({},
|
|
49
|
+
return /*#__PURE__*/React.createElement(ButtonLink, _extends({}, action, {
|
|
121
50
|
key: key
|
|
122
51
|
}));
|
|
123
52
|
}, actionButtons)));
|
|
124
53
|
};
|
|
125
|
-
HeaderWithActions.propTypes = process.env.NODE_ENV !== "production" ?
|
|
54
|
+
HeaderWithActions.propTypes = process.env.NODE_ENV !== "production" ? headerWithActionsPropTypes : {};
|
|
126
55
|
export default HeaderWithActions;
|
|
127
56
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","isEmpty","map","ButtonLink","ButtonLinkIcon","Tag","BulletPointMenuButton","
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","isEmpty","map","ButtonLink","ButtonLinkIcon","Tag","BulletPointMenuButton","headerWithActionsPropTypes","style","getDataName","suffix","uncappedMap","convert","cap","HeaderWithActions","props","closeButton","title","tag","saveStatus","bulletPointMenuButton","actionButtons","createElement","className","headerWrapper","titleAndButtonWrapper","_extends","button","titleWrapper","statusWrapper","display","label","buttonsWrapper","buttons","buttonAriaLabel","action","key","propTypes","process","env","NODE_ENV"],"sources":["../../../src/organism/header-with-actions/index.tsx"],"sourcesContent":["import React from 'react';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport map from 'lodash/fp/map';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Tag from '../../atom/tag';\nimport {ButtonLinkProps} from '../../atom/button-link/types';\nimport BulletPointMenuButton from '../../molecule/bullet-point-menu-button';\nimport headerWithActionsPropTypes, {HeaderWithActionsProps} from './types';\nimport style from './style.css';\n\nconst getDataName = (suffix: string) => `header-with-actions-${suffix}`;\n// @ts-expect-error (need to get the index)\nconst uncappedMap = map.convert({cap: false});\n\nconst HeaderWithActions = (props: HeaderWithActionsProps) => {\n const {closeButton, title, tag, saveStatus, bulletPointMenuButton, actionButtons} = props;\n\n return (\n <div className={style.headerWrapper} data-name={getDataName('wrapper')}>\n <div\n className={style.titleAndButtonWrapper}\n data-name={getDataName('title-and-button-wrapper')}\n >\n <ButtonLinkIcon {...closeButton} className={style.button} />\n <div className={style.titleWrapper}>\n <div className={style.statusWrapper}>\n <Tag {...tag} />\n {saveStatus.display && saveStatus.label ? (\n <p className={style.saveStatus}>{saveStatus.label}</p>\n ) : null}\n </div>\n <h3 className={style.title} aria-label={title} data-name={getDataName('title')}>\n {title}\n </h3>\n </div>\n </div>\n <div className={style.buttonsWrapper} data-name={getDataName('buttons-wrapper')}>\n {bulletPointMenuButton && !isEmpty(bulletPointMenuButton.buttons) ? (\n <BulletPointMenuButton {...bulletPointMenuButton} buttonAriaLabel=\"More actions\" />\n ) : null}\n {uncappedMap((action: ButtonLinkProps, key: string) => {\n return <ButtonLink {...action} key={key} />;\n }, actionButtons)}\n </div>\n </div>\n );\n};\n\nHeaderWithActions.propTypes = headerWithActionsPropTypes;\n\nexport default HeaderWithActions;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,OAAO,MAAM,mBAAmB;AACvC,OAAOC,GAAG,MAAM,eAAe;AAC/B,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,OAAOC,cAAc,MAAM,6BAA6B;AACxD,OAAOC,GAAG,MAAM,gBAAgB;AAEhC,OAAOC,qBAAqB,MAAM,yCAAyC;AAC3E,OAAOC,0BAA0B,MAAgC,SAAS;AAC1E,OAAOC,KAAK,MAAM,aAAa;AAE/B,MAAMC,WAAW,GAAIC,MAAc,IAAK,uBAAuBA,MAAM,EAAE;AACvE;AACA,MAAMC,WAAW,GAAGT,GAAG,CAACU,OAAO,CAAC;EAACC,GAAG,EAAE;AAAK,CAAC,CAAC;AAE7C,MAAMC,iBAAiB,GAAIC,KAA6B,IAAK;EAC3D,MAAM;IAACC,WAAW;IAAEC,KAAK;IAAEC,GAAG;IAAEC,UAAU;IAAEC,qBAAqB;IAAEC;EAAa,CAAC,GAAGN,KAAK;EAEzF,oBACEf,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAEf,KAAK,CAACgB,aAAc;IAAC,aAAWf,WAAW,CAAC,SAAS;EAAE,gBACrET,KAAA,CAAAsB,aAAA;IACEC,SAAS,EAAEf,KAAK,CAACiB,qBAAsB;IACvC,aAAWhB,WAAW,CAAC,0BAA0B;EAAE,gBAEnDT,KAAA,CAAAsB,aAAA,CAAClB,cAAc,EAAAsB,QAAA,KAAKV,WAAW;IAAEO,SAAS,EAAEf,KAAK,CAACmB;EAAO,EAAE,CAAC,eAC5D3B,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAEf,KAAK,CAACoB;EAAa,gBACjC5B,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAEf,KAAK,CAACqB;EAAc,gBAClC7B,KAAA,CAAAsB,aAAA,CAACjB,GAAG,EAAKa,GAAM,CAAC,EACfC,UAAU,CAACW,OAAO,IAAIX,UAAU,CAACY,KAAK,gBACrC/B,KAAA,CAAAsB,aAAA;IAAGC,SAAS,EAAEf,KAAK,CAACW;EAAW,GAAEA,UAAU,CAACY,KAAS,CAAC,GACpD,IACD,CAAC,eACN/B,KAAA,CAAAsB,aAAA;IAAIC,SAAS,EAAEf,KAAK,CAACS,KAAM;IAAC,cAAYA,KAAM;IAAC,aAAWR,WAAW,CAAC,OAAO;EAAE,GAC5EQ,KACC,CACD,CACF,CAAC,eACNjB,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAEf,KAAK,CAACwB,cAAe;IAAC,aAAWvB,WAAW,CAAC,iBAAiB;EAAE,GAC7EW,qBAAqB,IAAI,CAACnB,OAAO,CAACmB,qBAAqB,CAACa,OAAO,CAAC,gBAC/DjC,KAAA,CAAAsB,aAAA,CAAChB,qBAAqB,EAAAoB,QAAA,KAAKN,qBAAqB;IAAEc,eAAe,EAAC;EAAc,EAAE,CAAC,GACjF,IAAI,EACPvB,WAAW,CAAC,CAACwB,MAAuB,EAAEC,GAAW,KAAK;IACrD,oBAAOpC,KAAA,CAAAsB,aAAA,CAACnB,UAAU,EAAAuB,QAAA,KAAKS,MAAM;MAAEC,GAAG,EAAEA;IAAI,EAAE,CAAC;EAC7C,CAAC,EAAEf,aAAa,CACb,CACF,CAAC;AAEV,CAAC;AAEDP,iBAAiB,CAACuB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAGjC,0BAA0B;AAExD,eAAeO,iBAAiB","ignoreList":[]}
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import PropTypes from 'prop-types';
|
|
2
|
-
|
|
2
|
+
import { BulletPointMenuButtonProps } from '../../molecule/bullet-point-menu-button/types';
|
|
3
|
+
import { ButtonLinkProps } from '../../atom/button-link/types';
|
|
4
|
+
declare const headerWithActionsPropTypes: {
|
|
3
5
|
closeButton: PropTypes.Requireable<PropTypes.InferProps<{
|
|
4
|
-
|
|
6
|
+
size: PropTypes.Validator<string>;
|
|
7
|
+
icon: PropTypes.Validator<string>;
|
|
8
|
+
'data-name': PropTypes.Validator<string>;
|
|
9
|
+
'aria-label': PropTypes.Validator<string>;
|
|
5
10
|
onClick: PropTypes.Validator<(...args: any[]) => any>;
|
|
6
11
|
}>>;
|
|
7
12
|
title: PropTypes.Validator<string>;
|
|
@@ -14,27 +19,82 @@ declare const HeaderWithActionsPropTypes: {
|
|
|
14
19
|
display: PropTypes.Validator<boolean>;
|
|
15
20
|
label: PropTypes.Requireable<string>;
|
|
16
21
|
}>>>;
|
|
17
|
-
actionButtons: PropTypes.Validator<(PropTypes.InferProps<{
|
|
18
|
-
type: PropTypes.Validator<string>;
|
|
19
|
-
label: PropTypes.Validator<string>;
|
|
20
|
-
onClick: PropTypes.Validator<(...args: any[]) => any>;
|
|
21
|
-
disabled: PropTypes.Requireable<boolean>;
|
|
22
|
-
iconName: PropTypes.Requireable<string>;
|
|
23
|
-
iconColor: PropTypes.Requireable<string>;
|
|
24
|
-
}> | null | undefined)[]>;
|
|
25
22
|
bulletPointMenuButton: PropTypes.Requireable<PropTypes.InferProps<{
|
|
23
|
+
'data-name': PropTypes.Requireable<string>;
|
|
24
|
+
disabled: PropTypes.Requireable<boolean>;
|
|
25
|
+
buttonAriaLabel: PropTypes.Requireable<string>;
|
|
26
|
+
menuAriaLabel: PropTypes.Requireable<string>;
|
|
26
27
|
buttons: PropTypes.Validator<(PropTypes.InferProps<{
|
|
27
|
-
|
|
28
|
+
'data-name': PropTypes.Requireable<string>;
|
|
29
|
+
disabled: PropTypes.Requireable<boolean>;
|
|
28
30
|
label: PropTypes.Validator<string>;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
31
|
+
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
32
|
+
type: PropTypes.Requireable<string>;
|
|
33
|
+
buttonLinkType: PropTypes.Requireable<string>;
|
|
34
|
+
icon: PropTypes.Requireable<PropTypes.InferProps<{
|
|
35
|
+
theme: PropTypes.Requireable<string>;
|
|
36
|
+
position: PropTypes.Requireable<string>;
|
|
37
|
+
type: PropTypes.Requireable<string>;
|
|
38
|
+
faIcon: PropTypes.Requireable<PropTypes.InferProps<{
|
|
39
|
+
name: PropTypes.Validator<string>;
|
|
40
|
+
color: PropTypes.Requireable<string>;
|
|
41
|
+
backgroundColor: PropTypes.Requireable<string>;
|
|
42
|
+
size: PropTypes.Requireable<number>;
|
|
43
|
+
customStyle: PropTypes.Requireable<{
|
|
44
|
+
[x: string]: NonNullable<string | number | null | undefined> | null | undefined;
|
|
45
|
+
}>;
|
|
46
|
+
}>>;
|
|
47
|
+
}>>;
|
|
48
|
+
customStyle: PropTypes.Requireable<{
|
|
49
|
+
[x: string]: NonNullable<string | number | null | undefined> | null | undefined;
|
|
50
|
+
}>;
|
|
51
|
+
customLabelClassName: PropTypes.Requireable<string>;
|
|
32
52
|
}> | null | undefined)[]>;
|
|
33
|
-
onClick: PropTypes.
|
|
34
|
-
|
|
53
|
+
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
54
|
+
menuButtonClassName: PropTypes.Requireable<string>;
|
|
55
|
+
isBulkMenu: PropTypes.Requireable<boolean>;
|
|
35
56
|
}>>;
|
|
57
|
+
actionButtons: PropTypes.Validator<(PropTypes.InferProps<{
|
|
58
|
+
type: PropTypes.Requireable<string>;
|
|
59
|
+
usage: PropTypes.Requireable<string>;
|
|
60
|
+
label: PropTypes.Requireable<string>;
|
|
61
|
+
content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
62
|
+
'aria-label': PropTypes.Requireable<string>;
|
|
63
|
+
tooltipText: PropTypes.Requireable<string>;
|
|
64
|
+
tooltipPlacement: PropTypes.Requireable<string>;
|
|
65
|
+
'data-name': PropTypes.Requireable<string>;
|
|
66
|
+
'data-testid': PropTypes.Requireable<string>;
|
|
67
|
+
icon: PropTypes.Requireable<PropTypes.InferProps<{
|
|
68
|
+
position: PropTypes.Requireable<string>;
|
|
69
|
+
type: PropTypes.Requireable<string>;
|
|
70
|
+
faIcon: PropTypes.Requireable<PropTypes.InferProps<{
|
|
71
|
+
name: PropTypes.Validator<string>;
|
|
72
|
+
color: PropTypes.Requireable<string>;
|
|
73
|
+
backgroundColor: PropTypes.Requireable<string>;
|
|
74
|
+
size: PropTypes.Requireable<number>;
|
|
75
|
+
customStyle: PropTypes.Requireable<{
|
|
76
|
+
[x: string]: NonNullable<string | number | null | undefined> | null | undefined;
|
|
77
|
+
}>;
|
|
78
|
+
}>>;
|
|
79
|
+
}>>;
|
|
80
|
+
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
81
|
+
link: PropTypes.Requireable<PropTypes.InferProps<{
|
|
82
|
+
href: PropTypes.Requireable<string>;
|
|
83
|
+
download: PropTypes.Requireable<boolean>;
|
|
84
|
+
target: PropTypes.Requireable<string>;
|
|
85
|
+
}>>;
|
|
86
|
+
hoverBackgroundColor: PropTypes.Requireable<string>;
|
|
87
|
+
hoverColor: PropTypes.Requireable<string>;
|
|
88
|
+
disabled: PropTypes.Requireable<boolean>;
|
|
89
|
+
className: PropTypes.Requireable<string>;
|
|
90
|
+
customStyle: PropTypes.Requireable<{
|
|
91
|
+
[x: string]: NonNullable<string | number | null | undefined> | null | undefined;
|
|
92
|
+
}>;
|
|
93
|
+
useTitle: PropTypes.Requireable<boolean>;
|
|
94
|
+
customLabelClassName: PropTypes.Requireable<string>;
|
|
95
|
+
}> | null | undefined)[]>;
|
|
36
96
|
};
|
|
37
|
-
export default
|
|
97
|
+
export default headerWithActionsPropTypes;
|
|
38
98
|
declare type TagProps = {
|
|
39
99
|
label: 'Published' | 'Ongoing changes' | 'Draft' | 'Archived';
|
|
40
100
|
type: 'success' | 'progress' | 'warning';
|
|
@@ -45,35 +105,18 @@ declare type SaveStatusProps = {
|
|
|
45
105
|
label?: 'Unsaved changes' | 'Saved';
|
|
46
106
|
};
|
|
47
107
|
declare type CloseButtonProps = {
|
|
108
|
+
size: 'default' | 'small' | 'responsive';
|
|
109
|
+
icon: string;
|
|
110
|
+
'data-name': string;
|
|
48
111
|
'aria-label': string;
|
|
49
112
|
onClick: () => void;
|
|
50
113
|
};
|
|
51
|
-
export declare type ButtonMenuProps = {
|
|
52
|
-
dataName: string;
|
|
53
|
-
label: string;
|
|
54
|
-
iconName: string;
|
|
55
|
-
iconColor: string;
|
|
56
|
-
onClick: () => void;
|
|
57
|
-
};
|
|
58
|
-
declare type BulletPointMenuButtonProps = {
|
|
59
|
-
buttons: ButtonMenuProps[];
|
|
60
|
-
onClick: () => void;
|
|
61
|
-
buttonAriaLabel: string;
|
|
62
|
-
};
|
|
63
|
-
export declare type ButtonActionProps = {
|
|
64
|
-
type: 'primary' | 'secondary';
|
|
65
|
-
label: string;
|
|
66
|
-
onClick: () => void;
|
|
67
|
-
disabled?: boolean;
|
|
68
|
-
iconName?: string;
|
|
69
|
-
iconColor?: string;
|
|
70
|
-
};
|
|
71
114
|
export declare type HeaderWithActionsProps = {
|
|
72
115
|
closeButton: CloseButtonProps;
|
|
73
116
|
title: string;
|
|
74
117
|
tag: TagProps;
|
|
75
118
|
saveStatus: SaveStatusProps;
|
|
76
|
-
actionButtons:
|
|
119
|
+
actionButtons: ButtonLinkProps[];
|
|
77
120
|
bulletPointMenuButton?: BulletPointMenuButtonProps;
|
|
78
121
|
};
|
|
79
122
|
export declare type HeaderWithActionsPropsFixture = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/organism/header-with-actions/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/organism/header-with-actions/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAuC,EACrC,0BAA0B,EAC3B,MAAM,+CAA+C,CAAC;AACvD,OAA4B,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AASlF,QAAA,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAc/B,CAAC;AAEF,eAAe,0BAA0B,CAAC;AAE1C,aAAK,QAAQ,GAAG;IACd,KAAK,EAAE,WAAW,GAAG,iBAAiB,GAAG,OAAO,GAAG,UAAU,CAAC;IAC9D,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACzC,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,aAAK,eAAe,GAAG;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC;CACrC,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,YAAY,CAAC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACnC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,QAAQ,CAAC;IACd,UAAU,EAAE,eAAe,CAAC;IAC5B,aAAa,EAAE,eAAe,EAAE,CAAC;IACjC,qBAAqB,CAAC,EAAE,0BAA0B,CAAC;CACpD,CAAC;AAEF,oBAAY,6BAA6B,GAAG;IAAC,KAAK,EAAE,sBAAsB,CAAA;CAAC,CAAC"}
|