@coorpacademy/components 11.33.15 → 11.34.0

package/es/atom/button-link/style.css

@@ -4,6 +4,7 @@
 @value cm_grey_50 from colors;
 @value cm_grey_100 from colors;
 @value cm_grey_200 from colors;
+@value cm_grey_700 from colors;
 @value cm_grey_900 from colors;
 @value cm_negative_100 from colors;
 @value cm_negative_200 from colors;
@@ -70,7 +71,7 @@
 
 .secondary {
   background-color: cm_grey_100;
-  color: cm_grey_900;
+  color: cm_grey_700;
 }
 
 .secondary:hover {

package/es/molecule/base-modal/index.d.ts

@@ -53,6 +53,9 @@ declare namespace BaseModal {
         const onClose: PropTypes.Requireable<(...args: any[]) => any>;
         const onScroll: PropTypes.Requireable<(...args: any[]) => any>;
         const detectScrollbar: PropTypes.Requireable<boolean>;
+        const customStyle: PropTypes.Requireable<{
+            [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
+        }>;
     }
 }
 import PropTypes from "prop-types";

package/es/molecule/base-modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/base-modal/index.js"],"names":[],"mappings":";AASA,yEA4KC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/base-modal/index.js"],"names":[],"mappings":";AAUA,yEA+KC"}

package/es/molecule/base-modal/index.js

@@ -8,6 +8,7 @@ import { convert } from 'css-color-function';
 import Provider from '../../atom/provider';
 import Icon from '../../atom/icon';
 import ButtonLink from '../../atom/button-link';
+import { COLORS } from '../../variables/colors';
 import style from './style.css';
 const BaseModal = (props, context) => {
   const {
@@ -19,7 +20,8 @@ const BaseModal = (props, context) => {
     footer,
     onClose,
     onScroll,
-    detectScrollbar = false
+    detectScrollbar = false,
+    customStyle
   } = props;
   const {
     skin
@@ -90,7 +92,7 @@ const BaseModal = (props, context) => {
     }, /*#__PURE__*/React.createElement("div", {
       className: style.footerCTAWrapper
     }, onCancel && cancelLabel ? /*#__PURE__*/React.createElement(ButtonLink, {
-      className: style.footerCancelButton,
+      className: style.button,
       type: 'secondary',
       onClick: onCancel,
       label: cancelLabel,
@@ -98,11 +100,12 @@ const BaseModal = (props, context) => {
       'data-testid': `button-link-${cancelLabel}`
     }) : null, onConfirm && confirmLabel ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ButtonLink, _extends({
       customStyle: {
-        backgroundColor: buttonConfirmColor
+        backgroundColor: buttonConfirmColor,
+        paddingLeft: '16px'
       },
       hoverBackgroundColor: convert(`hsl(from ${buttonConfirmColor} h s calc(l*(1 - 0.08)))`),
-      hoverColor: '#FFFFFF',
-      className: style.footerConfirmButton,
+      hoverColor: COLORS.white,
+      className: style.button,
       type: 'primary',
       onClick: onConfirm,
       label: confirmLabel,
@@ -112,8 +115,11 @@ const BaseModal = (props, context) => {
         position: 'left',
         faIcon: {
           name: iconName,
-          color: '#FFFFFF',
-          size: 16
+          color: COLORS.white,
+          size: 14,
+          customStyle: {
+            padding: 0
+          }
         }
       }
     } : {}, {
@@ -128,7 +134,8 @@ const BaseModal = (props, context) => {
     onClose();
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: style.modalWrapper
+    className: style.modalWrapper,
+    "data-testid": "modal"
   }, /*#__PURE__*/React.createElement("div", {
     className: style.modal
   }, /*#__PURE__*/React.createElement("header", {
@@ -164,7 +171,8 @@ const BaseModal = (props, context) => {
     ref: bodyRef,
     className: isScrollbarVisible ? style.body : style.bodyWithoutScrollbar,
     onScroll: onScroll,
-    "data-testid": "modal-body"
+    "data-testid": "modal-body",
+    style: customStyle
   }, children), /*#__PURE__*/React.createElement(Footer, null)));
 };
 BaseModal.contextTypes = {
@@ -198,7 +206,8 @@ BaseModal.propTypes = process.env.NODE_ENV !== "production" ? {
   })]),
   onClose: PropTypes.func,
   onScroll: PropTypes.func,
-  detectScrollbar: PropTypes.bool
+  detectScrollbar: PropTypes.bool,
+  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
 } : {};
 export default BaseModal;
 //# sourceMappingURL=index.js.map

package/es/molecule/base-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useRef","useState","PropTypes","convert","Provider","Icon","ButtonLink","style","BaseModal","props","context","title","description","headerIcon","children","isOpen","footer","onClose","onScroll","detectScrollbar","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","footerCancelButton","type","onClick","_extends","customStyle","backgroundColor","hoverBackgroundColor","hoverColor","footerConfirmButton","icon","position","faIcon","name","size","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"],"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 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  } = 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.footerCancelButton,\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},\n                  hoverBackgroundColor: convert(\n                    `hsl(from ${buttonConfirmColor} h s calc(l*(1 - 0.08)))`\n                  ),\n                  hoverColor: '#FFFFFF',\n                  className: style.footerConfirmButton,\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: '#FFFFFF',\n                            size: 16\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}>\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        >\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};\n\nexport default BaseModal;\n"],"mappings":"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","ignoreList":[]}
+{"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":[]}

package/es/molecule/base-modal/style.css

@@ -103,12 +103,10 @@
   gap: 8px;
 }
 
-.footerCancelButton {
-  width: 94px;
-}
-
-.footerConfirmButton {
-  width: 121px;
+.button {
+  border-radius: 12px;
+  padding: 8px;
+  font-weight: 600;
 }
 
 @media mobile {
@@ -124,9 +122,8 @@
   }
 
   .footerCTAWrapper,
-  .footerCancelButton,
-  .footerConfirmButton,
-  .footerDescription {
+  .footerDescription,
+  .button {
     width: 100%;
   }