@coorpacademy/components 11.38.2 → 11.38.3-alpha.1

package/es/atom/checkbox-with-title/style.css

@@ -35,6 +35,7 @@
   justify-content: center;
   align-items: center;
   border-radius: 4px;
+  cursor: pointer;
 }
 
 .container:hover .label {

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":";AAUA,yEA+KC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/base-modal/index.js"],"names":[],"mappings":";AAUA,yEA8KC"}

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

@@ -137,7 +137,8 @@ const BaseModal = (props, context) => {
     className: style.modalWrapper,
     "data-testid": "modal"
   }, /*#__PURE__*/React.createElement("div", {
-    className: style.modal
+    className: style.modal,
+    style: customStyle
   }, /*#__PURE__*/React.createElement("header", {
     className: style.header
   }, headerIcon?.name ? /*#__PURE__*/React.createElement("div", {
@@ -171,8 +172,7 @@ const BaseModal = (props, context) => {
     ref: bodyRef,
     className: isScrollbarVisible ? style.body : style.bodyWithoutScrollbar,
     onScroll: onScroll,
-    "data-testid": "modal-body",
-    style: customStyle
+    "data-testid": "modal-body"
   }, children), /*#__PURE__*/React.createElement(Footer, null)));
 };
 BaseModal.contextTypes = {

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","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":[]}
+{"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":[]}

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

@@ -24,10 +24,6 @@
 }
 
 .modal {
-  max-width: 71vw;
-  max-height: 86vh;
-  min-width: 450px;
-  min-height: 165px;
   overflow: hidden;
   border-radius: 16px;
   background-color: white;
@@ -77,6 +73,7 @@
   min-height: 100px;
   border-top: 1px solid cm_grey_150;
   border-bottom: 1px solid cm_grey_150;
+  flex: 1;
 }
 
 .bodyWithoutScrollbar {

package/es/organism/content-skill-modal/index.d.ts.map

@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DvD,CAAC;AAQF,eAAe,iBAAiB,CAAC"}
+{"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"}

package/es/organism/content-skill-modal/index.js

@@ -42,21 +42,21 @@ const ContentSkillModal = props => {
       color: COLORS.cm_primary_blue
     }
   }), [handleCancel, onConfirm]);
-  const baseModal = {
+  const baseModalProps = {
     title: 'Add content',
     description: 'Add courses, video, interactive and more to this skill',
     headerIcon,
     footer,
     isOpen,
     onClose: handleClose,
+    // fullscreen modal
     customStyle: {
-      padding: 0,
-      height: '60vh',
-      overflow: 'hidden'
+      height: '80vh',
+      width: '80vw'
     }
   };
   if (!isOpen) return null;
-  return /*#__PURE__*/React.createElement(BaseModal, baseModal, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(BaseModal, baseModalProps, /*#__PURE__*/React.createElement("div", {
     className: style.container
   }, /*#__PURE__*/React.createElement("div", {
     className: style.containerList

package/es/organism/content-skill-modal/index.js.map

@@ -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","baseModal","title","description","customStyle","padding","height","overflow","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  const baseModal = {\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    customStyle: {\n      padding: 0,\n      height: '60vh',\n      overflow: 'hidden'\n    }\n  };\n\n  if (!isOpen) return null;\n\n  return (\n    <BaseModal {...baseModal}>\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;EACD,MAAMiB,SAAS,GAAG;IAChBC,KAAK,EAAE,aAAa;IACpBC,WAAW,EAAE,wDAAwD;IACrEf,UAAU;IACVM,MAAM;IACNZ,MAAM;IACNG,OAAO,EAAEE,WAAW;IACpBiB,WAAW,EAAE;MACXC,OAAO,EAAE,CAAC;MACVC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE;IACZ;EACF,CAAC;EAED,IAAI,CAACzB,MAAM,EAAE,OAAO,IAAI;EAExB,oBACEf,KAAA,CAAAyC,aAAA,CAACtC,SAAS,EAAK+B,SAAS,eACtBlC,KAAA,CAAAyC,aAAA;IAAKC,SAAS,EAAElC,KAAK,CAACmC;EAAU,gBAC9B3C,KAAA,CAAAyC,aAAA;IAAKC,SAAS,EAAElC,KAAK,CAACoC;EAAc,gBAClC5C,KAAA,CAAAyC,aAAA,CAACrC,SAAS,EAAKQ,WAAc,CAC1B,CAAC,eACNZ,KAAA,CAAAyC,aAAA;IAAKC,SAAS,EAAElC,KAAK,CAACqC;EAAiB,gBACrC7C,KAAA,CAAAyC,aAAA,CAACpC,gBAAgB,EAAKQ,OAAU,CAC7B,CACF,CACI,CAAC;AAEhB,CAAC;AAEDH,iBAAiB,CAACoC,YAAY,GAAG;EAC/BC,SAAS,EAAEzC,QAAQ,CAAC0C,iBAAiB,CAACD;AACxC,CAAC;AAEDrC,iBAAiB,CAACD,SAAS,GAAAwC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG1C,SAAS;AAEvC,eAAeC,iBAAiB","ignoreList":[]}
+{"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":[]}

package/es/organism/filter-checkbox-and-search/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/filter-checkbox-and-search/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAKjE,OAAkB,EAAC,4BAA4B,EAAC,MAAM,eAAe,CAAC;AAiBtE,QAAA,MAAM,uBAAuB;YACpB,4BAA4B,WAC1B,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;CAiG1B,CAAC;AAQF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/filter-checkbox-and-search/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAKjE,OAAkB,EAAC,4BAA4B,EAAC,MAAM,eAAe,CAAC;AAiBtE,QAAA,MAAM,uBAAuB;YACpB,4BAA4B,WAC1B,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;CA+F1B,CAAC;AAQF,eAAe,uBAAuB,CAAC"}

package/es/organism/filter-checkbox-and-search/index.js

@@ -21,7 +21,7 @@ const SHOW_BUTTON_STYLE = {
   fontSize: '14px',
   fontWeight: '600',
   fontFamily: 'Gilroy',
-  marginTop: '16px'
+  padding: '0'
 };
 const CHECKBOX_TITLE_STYLE = {
   marginRight: '16px',
@@ -99,7 +99,7 @@ const FilterCheckboxAndSearch = (props, context) => {
     customStyle: CHECKBOX_TITLE_STYLE
   }), /*#__PURE__*/React.createElement("p", {
     className: style.optionCount
-  }, count)))), _size(options) > INITIAL_VISIBLE_OPTIONS ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ButtonLink, {
+  }, count)))), _size(options) > INITIAL_VISIBLE_OPTIONS ? /*#__PURE__*/React.createElement(ButtonLink, {
     label: showMore ? translate('Show less') : translate('Show more'),
     type: "text",
     icon: {
@@ -113,7 +113,7 @@ const FilterCheckboxAndSearch = (props, context) => {
     customStyle: SHOW_BUTTON_STYLE,
     onClick: handleShowMore,
     "data-testid": "filter-checkbox-and-search-show-button"
-  })) : null);
+  }) : null);
 };
 FilterCheckboxAndSearch.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
 FilterCheckboxAndSearch.contextTypes = {

package/es/organism/filter-checkbox-and-search/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","Title","Tag","ButtonLink","Provider","GetTranslateFromContext","CheckboxWithTitle","COLORS","Search","style","propTypes","CLEAR_BUTTON_STYLE","fontWeight","padding","SHOW_BUTTON_STYLE","fontSize","fontFamily","marginTop","CHECKBOX_TITLE_STYLE","marginRight","INITIAL_VISIBLE_OPTIONS","FilterCheckboxAndSearch","props","context","title","searchOptions","onClear","options","translate","showMore","setShowMore","selectedFiltersCount","_pipe","_filter","selected","_size","hasSelectedFilters","handleShowMore","visibleOptions","slice","createElement","className","container","header","titleAndTagWrapper","label","_toString","type","size","clearButtonContainer","onClick","customStyle","search","optionsContainer","_isEmpty","emptySearchResult","map","value","count","index","key","optionRow","onChange","name","checked","optionCount","icon","position","faIcon","color","cm_grey_500","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/organism/filter-checkbox-and-search/index.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport {filter, isEmpty, pipe, size, toString} from 'lodash/fp';\nimport Title from '../../atom/title';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport CheckboxWithTitle from '../../atom/checkbox-with-title';\nimport {COLORS} from '../../variables/colors';\nimport Search from '../../atom/input-search';\nimport style from './style.css';\nimport propTypes, {FilterCheckboxAndSearchProps} from './props-types';\n\nconst CLEAR_BUTTON_STYLE = {fontWeight: 'normal', padding: 0};\nconst SHOW_BUTTON_STYLE = {\n  fontSize: '14px',\n  fontWeight: '600',\n  fontFamily: 'Gilroy',\n  marginTop: '16px'\n};\nconst CHECKBOX_TITLE_STYLE = {\n  marginRight: '16px',\n  fontSize: '14px',\n  fontFamily: 'Gilroy',\n  fontWeight: 'normal'\n};\nconst INITIAL_VISIBLE_OPTIONS = 5;\n\nconst FilterCheckboxAndSearch = (\n  props: FilterCheckboxAndSearchProps,\n  context: WebContextValues\n) => {\n  const {title, searchOptions, onClear, options} = props;\n  const translate = GetTranslateFromContext(context);\n  const [showMore, setShowMore] = useState(false);\n  const selectedFiltersCount = pipe(filter({selected: true}), size)(options);\n  const hasSelectedFilters = selectedFiltersCount > 0;\n\n  const handleShowMore = useCallback(() => {\n    setShowMore(!showMore);\n  }, [showMore]);\n\n  const visibleOptions = useMemo(() => {\n    return showMore ? options : options.slice(0, INITIAL_VISIBLE_OPTIONS);\n  }, [options, showMore]);\n\n  return (\n    <div data-testid=\"filter-checkbox-and-search-container\" className={style.container}>\n      <div className={style.header} data-testid=\"filter-checkbox-and-search-header\">\n        <div\n          className={style.titleAndTagWrapper}\n          data-testid=\"filter-checkbox-and-searh-title-and-tag-wrapper\"\n        >\n          <Title title={title} />\n          {hasSelectedFilters ? (\n            <Tag label={toString(selectedFiltersCount)} type=\"info\" size=\"S\" />\n          ) : null}\n        </div>\n        {hasSelectedFilters ? (\n          <div className={style.clearButtonContainer}>\n            <ButtonLink\n              label={translate('clear')}\n              type=\"text\"\n              data-testid=\"filter-checkbox-and-search-clear-button\"\n              onClick={onClear}\n              customStyle={CLEAR_BUTTON_STYLE}\n            />\n          </div>\n        ) : null}\n      </div>\n      {searchOptions ? (\n        <div className={style.search}>\n          <Search {...searchOptions} />\n        </div>\n      ) : null}\n      <div\n        data-testid=\"filter-checkbox-and-search-options-container\"\n        className={style.optionsContainer}\n      >\n        {isEmpty(visibleOptions) ? (\n          <p\n            className={style.emptySearchResult}\n            data-testid=\"filter-checkbox-and-search-empty-message\"\n          >\n            No results... Try adjusting your search.\n          </p>\n        ) : (\n          visibleOptions.map(({value, label, selected, count, onClick}, index) => (\n            <div\n              key={value}\n              className={style.optionRow}\n              data-testid={`filter-checkbox-and-search-option-row-${index}`}\n            >\n              <CheckboxWithTitle\n                key={value}\n                title={label}\n                onChange={onClick}\n                name={label}\n                checked={selected}\n                customStyle={CHECKBOX_TITLE_STYLE}\n              />\n              <p className={style.optionCount}>{count}</p>\n            </div>\n          ))\n        )}\n      </div>\n      {size(options) > INITIAL_VISIBLE_OPTIONS ? (\n        <div>\n          <ButtonLink\n            label={showMore ? translate('Show less') : translate('Show more')}\n            type=\"text\"\n            icon={{\n              position: 'right',\n              faIcon: {\n                name: showMore ? 'chevron-up' : 'chevron-down',\n                size: 16,\n                color: COLORS.cm_grey_500\n              }\n            }}\n            customStyle={SHOW_BUTTON_STYLE}\n            onClick={handleShowMore}\n            data-testid=\"filter-checkbox-and-search-show-button\"\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nFilterCheckboxAndSearch.propTypes = propTypes;\n\nFilterCheckboxAndSearch.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nexport default FilterCheckboxAndSearch;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","Title","Tag","ButtonLink","Provider","GetTranslateFromContext","CheckboxWithTitle","COLORS","Search","style","propTypes","CLEAR_BUTTON_STYLE","fontWeight","padding","SHOW_BUTTON_STYLE","fontSize","fontFamily","CHECKBOX_TITLE_STYLE","marginRight","INITIAL_VISIBLE_OPTIONS","FilterCheckboxAndSearch","props","context","title","searchOptions","onClear","options","translate","showMore","setShowMore","selectedFiltersCount","_pipe","_filter","selected","_size","hasSelectedFilters","handleShowMore","visibleOptions","slice","createElement","className","container","header","titleAndTagWrapper","label","_toString","type","size","clearButtonContainer","onClick","customStyle","search","optionsContainer","_isEmpty","emptySearchResult","map","value","count","index","key","optionRow","onChange","name","checked","optionCount","icon","position","faIcon","color","cm_grey_500","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/organism/filter-checkbox-and-search/index.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport {filter, isEmpty, pipe, size, toString} from 'lodash/fp';\nimport Title from '../../atom/title';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport CheckboxWithTitle from '../../atom/checkbox-with-title';\nimport {COLORS} from '../../variables/colors';\nimport Search from '../../atom/input-search';\nimport style from './style.css';\nimport propTypes, {FilterCheckboxAndSearchProps} from './props-types';\n\nconst CLEAR_BUTTON_STYLE = {fontWeight: 'normal', padding: 0};\nconst SHOW_BUTTON_STYLE = {\n  fontSize: '14px',\n  fontWeight: '600',\n  fontFamily: 'Gilroy',\n  padding: '0'\n};\nconst CHECKBOX_TITLE_STYLE = {\n  marginRight: '16px',\n  fontSize: '14px',\n  fontFamily: 'Gilroy',\n  fontWeight: 'normal'\n};\nconst INITIAL_VISIBLE_OPTIONS = 5;\n\nconst FilterCheckboxAndSearch = (\n  props: FilterCheckboxAndSearchProps,\n  context: WebContextValues\n) => {\n  const {title, searchOptions, onClear, options} = props;\n  const translate = GetTranslateFromContext(context);\n  const [showMore, setShowMore] = useState(false);\n  const selectedFiltersCount = pipe(filter({selected: true}), size)(options);\n  const hasSelectedFilters = selectedFiltersCount > 0;\n\n  const handleShowMore = useCallback(() => {\n    setShowMore(!showMore);\n  }, [showMore]);\n\n  const visibleOptions = useMemo(() => {\n    return showMore ? options : options.slice(0, INITIAL_VISIBLE_OPTIONS);\n  }, [options, showMore]);\n\n  return (\n    <div data-testid=\"filter-checkbox-and-search-container\" className={style.container}>\n      <div className={style.header} data-testid=\"filter-checkbox-and-search-header\">\n        <div\n          className={style.titleAndTagWrapper}\n          data-testid=\"filter-checkbox-and-searh-title-and-tag-wrapper\"\n        >\n          <Title title={title} />\n          {hasSelectedFilters ? (\n            <Tag label={toString(selectedFiltersCount)} type=\"info\" size=\"S\" />\n          ) : null}\n        </div>\n        {hasSelectedFilters ? (\n          <div className={style.clearButtonContainer}>\n            <ButtonLink\n              label={translate('clear')}\n              type=\"text\"\n              data-testid=\"filter-checkbox-and-search-clear-button\"\n              onClick={onClear}\n              customStyle={CLEAR_BUTTON_STYLE}\n            />\n          </div>\n        ) : null}\n      </div>\n      {searchOptions ? (\n        <div className={style.search}>\n          <Search {...searchOptions} />\n        </div>\n      ) : null}\n      <div\n        data-testid=\"filter-checkbox-and-search-options-container\"\n        className={style.optionsContainer}\n      >\n        {isEmpty(visibleOptions) ? (\n          <p\n            className={style.emptySearchResult}\n            data-testid=\"filter-checkbox-and-search-empty-message\"\n          >\n            No results... Try adjusting your search.\n          </p>\n        ) : (\n          visibleOptions.map(({value, label, selected, count, onClick}, index) => (\n            <div\n              key={value}\n              className={style.optionRow}\n              data-testid={`filter-checkbox-and-search-option-row-${index}`}\n            >\n              <CheckboxWithTitle\n                key={value}\n                title={label}\n                onChange={onClick}\n                name={label}\n                checked={selected}\n                customStyle={CHECKBOX_TITLE_STYLE}\n              />\n              <p className={style.optionCount}>{count}</p>\n            </div>\n          ))\n        )}\n      </div>\n      {size(options) > INITIAL_VISIBLE_OPTIONS ? (\n        <ButtonLink\n          label={showMore ? translate('Show less') : translate('Show more')}\n          type=\"text\"\n          icon={{\n            position: 'right',\n            faIcon: {\n              name: showMore ? 'chevron-up' : 'chevron-down',\n              size: 16,\n              color: COLORS.cm_grey_500\n            }\n          }}\n          customStyle={SHOW_BUTTON_STYLE}\n          onClick={handleShowMore}\n          data-testid=\"filter-checkbox-and-search-show-button\"\n        />\n      ) : null}\n    </div>\n  );\n};\n\nFilterCheckboxAndSearch.propTypes = propTypes;\n\nFilterCheckboxAndSearch.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nexport default FilterCheckboxAndSearch;\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAGC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAO,OAAO;AAE3D,OAAOC,KAAK,MAAM,kBAAkB;AACpC,OAAOC,GAAG,MAAM,gBAAgB;AAChC,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,OAAOC,QAAQ,IAAGC,uBAAuB,QAAO,qBAAqB;AAErE,OAAOC,iBAAiB,MAAM,gCAAgC;AAC9D,SAAQC,MAAM,QAAO,wBAAwB;AAC7C,OAAOC,MAAM,MAAM,yBAAyB;AAC5C,OAAOC,KAAK,MAAM,aAAa;AAC/B,OAAOC,SAAS,MAAsC,eAAe;AAErE,MAAMC,kBAAkB,GAAG;EAACC,UAAU,EAAE,QAAQ;EAAEC,OAAO,EAAE;AAAC,CAAC;AAC7D,MAAMC,iBAAiB,GAAG;EACxBC,QAAQ,EAAE,MAAM;EAChBH,UAAU,EAAE,KAAK;EACjBI,UAAU,EAAE,QAAQ;EACpBH,OAAO,EAAE;AACX,CAAC;AACD,MAAMI,oBAAoB,GAAG;EAC3BC,WAAW,EAAE,MAAM;EACnBH,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE,QAAQ;EACpBJ,UAAU,EAAE;AACd,CAAC;AACD,MAAMO,uBAAuB,GAAG,CAAC;AAEjC,MAAMC,uBAAuB,GAAGA,CAC9BC,KAAmC,EACnCC,OAAyB,KACtB;EACH,MAAM;IAACC,KAAK;IAAEC,aAAa;IAAEC,OAAO;IAAEC;EAAO,CAAC,GAAGL,KAAK;EACtD,MAAMM,SAAS,GAAGtB,uBAAuB,CAACiB,OAAO,CAAC;EAClD,MAAM,CAACM,QAAQ,EAAEC,WAAW,CAAC,GAAG7B,QAAQ,CAAC,KAAK,CAAC;EAC/C,MAAM8B,oBAAoB,GAAGC,KAAA,CAAKC,OAAA,CAAO;IAACC,QAAQ,EAAE;EAAI,CAAC,CAAC,EAAAC,KAAM,CAAC,CAACR,OAAO,CAAC;EAC1E,MAAMS,kBAAkB,GAAGL,oBAAoB,GAAG,CAAC;EAEnD,MAAMM,cAAc,GAAGtC,WAAW,CAAC,MAAM;IACvC+B,WAAW,CAAC,CAACD,QAAQ,CAAC;EACxB,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,MAAMS,cAAc,GAAGtC,OAAO,CAAC,MAAM;IACnC,OAAO6B,QAAQ,GAAGF,OAAO,GAAGA,OAAO,CAACY,KAAK,CAAC,CAAC,EAAEnB,uBAAuB,CAAC;EACvE,CAAC,EAAE,CAACO,OAAO,EAAEE,QAAQ,CAAC,CAAC;EAEvB,oBACE/B,KAAA,CAAA0C,aAAA;IAAK,eAAY,sCAAsC;IAACC,SAAS,EAAE/B,KAAK,CAACgC;EAAU,gBACjF5C,KAAA,CAAA0C,aAAA;IAAKC,SAAS,EAAE/B,KAAK,CAACiC,MAAO;IAAC,eAAY;EAAmC,gBAC3E7C,KAAA,CAAA0C,aAAA;IACEC,SAAS,EAAE/B,KAAK,CAACkC,kBAAmB;IACpC,eAAY;EAAiD,gBAE7D9C,KAAA,CAAA0C,aAAA,CAACtC,KAAK;IAACsB,KAAK,EAAEA;EAAM,CAAE,CAAC,EACtBY,kBAAkB,gBACjBtC,KAAA,CAAA0C,aAAA,CAACrC,GAAG;IAAC0C,KAAK,EAAEC,SAAA,CAASf,oBAAoB,CAAE;IAACgB,IAAI,EAAC,MAAM;IAACC,IAAI,EAAC;EAAG,CAAE,CAAC,GACjE,IACD,CAAC,EACLZ,kBAAkB,gBACjBtC,KAAA,CAAA0C,aAAA;IAAKC,SAAS,EAAE/B,KAAK,CAACuC;EAAqB,gBACzCnD,KAAA,CAAA0C,aAAA,CAACpC,UAAU;IACTyC,KAAK,EAAEjB,SAAS,CAAC,OAAO,CAAE;IAC1BmB,IAAI,EAAC,MAAM;IACX,eAAY,yCAAyC;IACrDG,OAAO,EAAExB,OAAQ;IACjByB,WAAW,EAAEvC;EAAmB,CACjC,CACE,CAAC,GACJ,IACD,CAAC,EACLa,aAAa,gBACZ3B,KAAA,CAAA0C,aAAA;IAAKC,SAAS,EAAE/B,KAAK,CAAC0C;EAAO,gBAC3BtD,KAAA,CAAA0C,aAAA,CAAC/B,MAAM,EAAKgB,aAAgB,CACzB,CAAC,GACJ,IAAI,eACR3B,KAAA,CAAA0C,aAAA;IACE,eAAY,8CAA8C;IAC1DC,SAAS,EAAE/B,KAAK,CAAC2C;EAAiB,GAEjCC,QAAA,CAAQhB,cAAc,CAAC,gBACtBxC,KAAA,CAAA0C,aAAA;IACEC,SAAS,EAAE/B,KAAK,CAAC6C,iBAAkB;IACnC,eAAY;EAA0C,GACvD,0CAEE,CAAC,GAEJjB,cAAc,CAACkB,GAAG,CAAC,CAAC;IAACC,KAAK;IAAEZ,KAAK;IAAEX,QAAQ;IAAEwB,KAAK;IAAER;EAAO,CAAC,EAAES,KAAK,kBACjE7D,KAAA,CAAA0C,aAAA;IACEoB,GAAG,EAAEH,KAAM;IACXhB,SAAS,EAAE/B,KAAK,CAACmD,SAAU;IAC3B,eAAa,yCAAyCF,KAAK;EAAG,gBAE9D7D,KAAA,CAAA0C,aAAA,CAACjC,iBAAiB;IAChBqD,GAAG,EAAEH,KAAM;IACXjC,KAAK,EAAEqB,KAAM;IACbiB,QAAQ,EAAEZ,OAAQ;IAClBa,IAAI,EAAElB,KAAM;IACZmB,OAAO,EAAE9B,QAAS;IAClBiB,WAAW,EAAEjC;EAAqB,CACnC,CAAC,eACFpB,KAAA,CAAA0C,aAAA;IAAGC,SAAS,EAAE/B,KAAK,CAACuD;EAAY,GAAEP,KAAS,CACxC,CACN,CAEA,CAAC,EACLvB,KAAA,CAAKR,OAAO,CAAC,GAAGP,uBAAuB,gBACtCtB,KAAA,CAAA0C,aAAA,CAACpC,UAAU;IACTyC,KAAK,EAAEhB,QAAQ,GAAGD,SAAS,CAAC,WAAW,CAAC,GAAGA,SAAS,CAAC,WAAW,CAAE;IAClEmB,IAAI,EAAC,MAAM;IACXmB,IAAI,EAAE;MACJC,QAAQ,EAAE,OAAO;MACjBC,MAAM,EAAE;QACNL,IAAI,EAAElC,QAAQ,GAAG,YAAY,GAAG,cAAc;QAC9CmB,IAAI,EAAE,EAAE;QACRqB,KAAK,EAAE7D,MAAM,CAAC8D;MAChB;IACF,CAAE;IACFnB,WAAW,EAAEpC,iBAAkB;IAC/BmC,OAAO,EAAEb,cAAe;IACxB,eAAY;EAAwC,CACrD,CAAC,GACA,IACD,CAAC;AAEV,CAAC;AAEDhB,uBAAuB,CAACV,SAAS,GAAA4D,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG9D,SAAS;AAE7CU,uBAAuB,CAACqD,YAAY,GAAG;EACrC9C,SAAS,EAAEvB,QAAQ,CAACsE,iBAAiB,CAAC/C;AACxC,CAAC;AAED,eAAeP,uBAAuB","ignoreList":[]}

package/es/organism/list-item/style.css

@@ -122,7 +122,7 @@
 .dataColumnsWrapper {
   display: flex;
   width: 100%;
-  gap: 54px;
+  gap: 16px;
   min-height: inherit;
   justify-content: flex-start;
   align-items: center;

package/es/template/back-office/brand-update/style.css

@@ -37,7 +37,8 @@
 
 .contentWrapper {
   width: calc(100% - 351px);
-  padding: 0 64px 0 64px;
+  padding: 0 64px;
+  height: fit-content;
 }
 
 .headerSticky {

package/lib/atom/checkbox-with-title/style.css

@@ -35,6 +35,7 @@
   justify-content: center;
   align-items: center;
   border-radius: 4px;
+  cursor: pointer;
 }
 
 .container:hover .label {

package/lib/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":";AAUA,yEA+KC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/base-modal/index.js"],"names":[],"mappings":";AAUA,yEA8KC"}

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

@@ -144,7 +144,8 @@ const BaseModal = (props, context) => {
     className: _style.default.modalWrapper,
     "data-testid": "modal"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.modal
+    className: _style.default.modal,
+    style: customStyle
   }, /*#__PURE__*/_react.default.createElement("header", {
     className: _style.default.header
   }, headerIcon?.name ? /*#__PURE__*/_react.default.createElement("div", {
@@ -178,8 +179,7 @@ const BaseModal = (props, context) => {
     ref: bodyRef,
     className: isScrollbarVisible ? _style.default.body : _style.default.bodyWithoutScrollbar,
     onScroll: onScroll,
-    "data-testid": "modal-body",
-    style: customStyle
+    "data-testid": "modal-body"
   }, children), /*#__PURE__*/_react.default.createElement(Footer, null)));
 };
 BaseModal.contextTypes = {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_cssColorFunction","_provider","_icon","_buttonLink","_colors","_style","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","BaseModal","props","context","title","description","headerIcon","children","isOpen","footer","onClose","onScroll","detectScrollbar","customStyle","skin","bodyRef","useRef","isScrollbarVisible","setIsScrollbarVisible","useState","checkScrollbar","bodyElement","current","scrollHeight","clientHeight","useEffect","debouncedCheckScrollbar","_debounce2","mutationObserver","MutationObserver","observe","childList","subtree","resizeObserver","ResizeObserver","disconnect","cancel","Footer","useCallback","_isEmpty2","cancelButton","confirmButton","text","isError","label","cancelLabel","onCancel","disabled","cancelDisabled","confirmLabel","onConfirm","confirmDisabled","iconName","color","buttonConfirmColor","_get2","createElement","className","style","footerCTAWrapper","button","type","onClick","backgroundColor","paddingLeft","hoverBackgroundColor","convert","hoverColor","COLORS","white","icon","position","faIcon","name","size","padding","footerDescription","footerDescriptionError","handleOnClose","stopPropagation","modalWrapper","modal","header","iconColor","faSize","wrapperSize","headerContent","headerTitle","headerDescription","headerCloseIcon","ref","body","bodyWithoutScrollbar","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","string","shape","node","bool","oneOfType","func","boolean","objectOf","number","_default","exports"],"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":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_cssColorFunction","_provider","_icon","_buttonLink","_colors","_style","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","BaseModal","props","context","title","description","headerIcon","children","isOpen","footer","onClose","onScroll","detectScrollbar","customStyle","skin","bodyRef","useRef","isScrollbarVisible","setIsScrollbarVisible","useState","checkScrollbar","bodyElement","current","scrollHeight","clientHeight","useEffect","debouncedCheckScrollbar","_debounce2","mutationObserver","MutationObserver","observe","childList","subtree","resizeObserver","ResizeObserver","disconnect","cancel","Footer","useCallback","_isEmpty2","cancelButton","confirmButton","text","isError","label","cancelLabel","onCancel","disabled","cancelDisabled","confirmLabel","onConfirm","confirmDisabled","iconName","color","buttonConfirmColor","_get2","createElement","className","style","footerCTAWrapper","button","type","onClick","backgroundColor","paddingLeft","hoverBackgroundColor","convert","hoverColor","COLORS","white","icon","position","faIcon","name","size","padding","footerDescription","footerDescriptionError","handleOnClose","stopPropagation","modalWrapper","modal","header","iconColor","faSize","wrapperSize","headerContent","headerTitle","headerDescription","headerCloseIcon","ref","body","bodyWithoutScrollbar","contextTypes","Provider","childContextTypes","propTypes","process","env","NODE_ENV","PropTypes","string","shape","node","bool","oneOfType","func","boolean","objectOf","number","_default","exports"],"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":[]}

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

@@ -24,10 +24,6 @@
 }
 
 .modal {
-  max-width: 71vw;
-  max-height: 86vh;
-  min-width: 450px;
-  min-height: 165px;
   overflow: hidden;
   border-radius: 16px;
   background-color: white;
@@ -77,6 +73,7 @@
   min-height: 100px;
   border-top: 1px solid cm_grey_150;
   border-bottom: 1px solid cm_grey_150;
+  flex: 1;
 }
 
 .bodyWithoutScrollbar {

package/lib/organism/content-skill-modal/index.d.ts.map

@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DvD,CAAC;AAQF,eAAe,iBAAiB,CAAC"}
+{"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"}

package/lib/organism/content-skill-modal/index.js

@@ -49,21 +49,21 @@ const ContentSkillModal = props => {
       color: _colors.COLORS.cm_primary_blue
     }
   }), [handleCancel, onConfirm]);
-  const baseModal = {
+  const baseModalProps = {
     title: 'Add content',
     description: 'Add courses, video, interactive and more to this skill',
     headerIcon,
     footer,
     isOpen,
     onClose: handleClose,
+    // fullscreen modal
     customStyle: {
-      padding: 0,
-      height: '60vh',
-      overflow: 'hidden'
+      height: '80vh',
+      width: '80vw'
     }
   };
   if (!isOpen) return null;
-  return /*#__PURE__*/_react.default.createElement(_baseModal.default, baseModal, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_baseModal.default, baseModalProps, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.container
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.containerList

package/lib/organism/content-skill-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_baseModal","_interopRequireDefault","_listItems","_multiFilterPanel","_provider","_colors","_style","_types","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ContentSkillModal","props","contentList","filters","modal","isOpen","onCancel","onConfirm","onClose","handleCancel","useCallback","handleClose","headerIcon","name","color","COLORS","primary_600","backgroundColor","primary_100","footer","useMemo","cancelButton","label","confirmButton","iconName","disabled","cm_primary_blue","baseModal","title","description","customStyle","padding","height","overflow","createElement","className","style","container","containerList","filtersContainer","contextTypes","translate","Provider","childContextTypes","propTypes","process","env","NODE_ENV","_default","exports"],"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  const baseModal = {\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    customStyle: {\n      padding: 0,\n      height: '60vh',\n      overflow: 'hidden'\n    }\n  };\n\n  if (!isOpen) return null;\n\n  return (\n    <BaseModal {...baseModal}>\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":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_baseModal","_interopRequireDefault","_listItems","_multiFilterPanel","_provider","_colors","_style","_types","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ContentSkillModal","props","contentList","filters","modal","isOpen","onCancel","onConfirm","onClose","handleCancel","useCallback","handleClose","headerIcon","name","color","COLORS","primary_600","backgroundColor","primary_100","footer","useMemo","cancelButton","label","confirmButton","iconName","disabled","cm_primary_blue","baseModalProps","title","description","customStyle","height","width","createElement","className","style","container","containerList","filtersContainer","contextTypes","translate","Provider","childContextTypes","propTypes","process","env","NODE_ENV","_default","exports"],"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":"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","ignoreList":[]}

package/lib/organism/filter-checkbox-and-search/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/filter-checkbox-and-search/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAKjE,OAAkB,EAAC,4BAA4B,EAAC,MAAM,eAAe,CAAC;AAiBtE,QAAA,MAAM,uBAAuB;YACpB,4BAA4B,WAC1B,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;CAiG1B,CAAC;AAQF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/filter-checkbox-and-search/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAKjE,OAAkB,EAAC,4BAA4B,EAAC,MAAM,eAAe,CAAC;AAiBtE,QAAA,MAAM,uBAAuB;YACpB,4BAA4B,WAC1B,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;CA+F1B,CAAC;AAQF,eAAe,uBAAuB,CAAC"}

package/lib/organism/filter-checkbox-and-search/index.js

@@ -28,7 +28,7 @@ const SHOW_BUTTON_STYLE = {
   fontSize: '14px',
   fontWeight: '600',
   fontFamily: 'Gilroy',
-  marginTop: '16px'
+  padding: '0'
 };
 const CHECKBOX_TITLE_STYLE = {
   marginRight: '16px',
@@ -106,7 +106,7 @@ const FilterCheckboxAndSearch = (props, context) => {
     customStyle: CHECKBOX_TITLE_STYLE
   }), /*#__PURE__*/_react.default.createElement("p", {
     className: _style.default.optionCount
-  }, count)))), (0, _size2.default)(options) > INITIAL_VISIBLE_OPTIONS ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
+  }, count)))), (0, _size2.default)(options) > INITIAL_VISIBLE_OPTIONS ? /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
     label: showMore ? translate('Show less') : translate('Show more'),
     type: "text",
     icon: {
@@ -120,7 +120,7 @@ const FilterCheckboxAndSearch = (props, context) => {
     customStyle: SHOW_BUTTON_STYLE,
     onClick: handleShowMore,
     "data-testid": "filter-checkbox-and-search-show-button"
-  })) : null);
+  }) : null);
 };
 FilterCheckboxAndSearch.propTypes = process.env.NODE_ENV !== "production" ? _propsTypes.default : {};
 FilterCheckboxAndSearch.contextTypes = {

package/lib/organism/filter-checkbox-and-search/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_title","_interopRequireDefault","_tag","_buttonLink","_provider","_checkboxWithTitle","_colors","_inputSearch","_style","_propsTypes","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CLEAR_BUTTON_STYLE","fontWeight","padding","SHOW_BUTTON_STYLE","fontSize","fontFamily","marginTop","CHECKBOX_TITLE_STYLE","marginRight","INITIAL_VISIBLE_OPTIONS","FilterCheckboxAndSearch","props","context","title","searchOptions","onClear","options","translate","GetTranslateFromContext","showMore","setShowMore","useState","selectedFiltersCount","_pipe2","_filter2","selected","_size2","hasSelectedFilters","handleShowMore","useCallback","visibleOptions","useMemo","slice","createElement","className","style","container","header","titleAndTagWrapper","label","_toString2","type","size","clearButtonContainer","onClick","customStyle","search","optionsContainer","_isEmpty2","emptySearchResult","map","value","count","index","key","optionRow","onChange","name","checked","optionCount","icon","position","faIcon","color","COLORS","cm_grey_500","propTypes","process","env","NODE_ENV","contextTypes","Provider","childContextTypes","_default","exports"],"sources":["../../../src/organism/filter-checkbox-and-search/index.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport {filter, isEmpty, pipe, size, toString} from 'lodash/fp';\nimport Title from '../../atom/title';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport CheckboxWithTitle from '../../atom/checkbox-with-title';\nimport {COLORS} from '../../variables/colors';\nimport Search from '../../atom/input-search';\nimport style from './style.css';\nimport propTypes, {FilterCheckboxAndSearchProps} from './props-types';\n\nconst CLEAR_BUTTON_STYLE = {fontWeight: 'normal', padding: 0};\nconst SHOW_BUTTON_STYLE = {\n  fontSize: '14px',\n  fontWeight: '600',\n  fontFamily: 'Gilroy',\n  marginTop: '16px'\n};\nconst CHECKBOX_TITLE_STYLE = {\n  marginRight: '16px',\n  fontSize: '14px',\n  fontFamily: 'Gilroy',\n  fontWeight: 'normal'\n};\nconst INITIAL_VISIBLE_OPTIONS = 5;\n\nconst FilterCheckboxAndSearch = (\n  props: FilterCheckboxAndSearchProps,\n  context: WebContextValues\n) => {\n  const {title, searchOptions, onClear, options} = props;\n  const translate = GetTranslateFromContext(context);\n  const [showMore, setShowMore] = useState(false);\n  const selectedFiltersCount = pipe(filter({selected: true}), size)(options);\n  const hasSelectedFilters = selectedFiltersCount > 0;\n\n  const handleShowMore = useCallback(() => {\n    setShowMore(!showMore);\n  }, [showMore]);\n\n  const visibleOptions = useMemo(() => {\n    return showMore ? options : options.slice(0, INITIAL_VISIBLE_OPTIONS);\n  }, [options, showMore]);\n\n  return (\n    <div data-testid=\"filter-checkbox-and-search-container\" className={style.container}>\n      <div className={style.header} data-testid=\"filter-checkbox-and-search-header\">\n        <div\n          className={style.titleAndTagWrapper}\n          data-testid=\"filter-checkbox-and-searh-title-and-tag-wrapper\"\n        >\n          <Title title={title} />\n          {hasSelectedFilters ? (\n            <Tag label={toString(selectedFiltersCount)} type=\"info\" size=\"S\" />\n          ) : null}\n        </div>\n        {hasSelectedFilters ? (\n          <div className={style.clearButtonContainer}>\n            <ButtonLink\n              label={translate('clear')}\n              type=\"text\"\n              data-testid=\"filter-checkbox-and-search-clear-button\"\n              onClick={onClear}\n              customStyle={CLEAR_BUTTON_STYLE}\n            />\n          </div>\n        ) : null}\n      </div>\n      {searchOptions ? (\n        <div className={style.search}>\n          <Search {...searchOptions} />\n        </div>\n      ) : null}\n      <div\n        data-testid=\"filter-checkbox-and-search-options-container\"\n        className={style.optionsContainer}\n      >\n        {isEmpty(visibleOptions) ? (\n          <p\n            className={style.emptySearchResult}\n            data-testid=\"filter-checkbox-and-search-empty-message\"\n          >\n            No results... Try adjusting your search.\n          </p>\n        ) : (\n          visibleOptions.map(({value, label, selected, count, onClick}, index) => (\n            <div\n              key={value}\n              className={style.optionRow}\n              data-testid={`filter-checkbox-and-search-option-row-${index}`}\n            >\n              <CheckboxWithTitle\n                key={value}\n                title={label}\n                onChange={onClick}\n                name={label}\n                checked={selected}\n                customStyle={CHECKBOX_TITLE_STYLE}\n              />\n              <p className={style.optionCount}>{count}</p>\n            </div>\n          ))\n        )}\n      </div>\n      {size(options) > INITIAL_VISIBLE_OPTIONS ? (\n        <div>\n          <ButtonLink\n            label={showMore ? translate('Show less') : translate('Show more')}\n            type=\"text\"\n            icon={{\n              position: 'right',\n              faIcon: {\n                name: showMore ? 'chevron-up' : 'chevron-down',\n                size: 16,\n                color: COLORS.cm_grey_500\n              }\n            }}\n            customStyle={SHOW_BUTTON_STYLE}\n            onClick={handleShowMore}\n            data-testid=\"filter-checkbox-and-search-show-button\"\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nFilterCheckboxAndSearch.propTypes = propTypes;\n\nFilterCheckboxAndSearch.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nexport default FilterCheckboxAndSearch;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireWildcard","require","_title","_interopRequireDefault","_tag","_buttonLink","_provider","_checkboxWithTitle","_colors","_inputSearch","_style","_propsTypes","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CLEAR_BUTTON_STYLE","fontWeight","padding","SHOW_BUTTON_STYLE","fontSize","fontFamily","CHECKBOX_TITLE_STYLE","marginRight","INITIAL_VISIBLE_OPTIONS","FilterCheckboxAndSearch","props","context","title","searchOptions","onClear","options","translate","GetTranslateFromContext","showMore","setShowMore","useState","selectedFiltersCount","_pipe2","_filter2","selected","_size2","hasSelectedFilters","handleShowMore","useCallback","visibleOptions","useMemo","slice","createElement","className","style","container","header","titleAndTagWrapper","label","_toString2","type","size","clearButtonContainer","onClick","customStyle","search","optionsContainer","_isEmpty2","emptySearchResult","map","value","count","index","key","optionRow","onChange","name","checked","optionCount","icon","position","faIcon","color","COLORS","cm_grey_500","propTypes","process","env","NODE_ENV","contextTypes","Provider","childContextTypes","_default","exports"],"sources":["../../../src/organism/filter-checkbox-and-search/index.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport {filter, isEmpty, pipe, size, toString} from 'lodash/fp';\nimport Title from '../../atom/title';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport CheckboxWithTitle from '../../atom/checkbox-with-title';\nimport {COLORS} from '../../variables/colors';\nimport Search from '../../atom/input-search';\nimport style from './style.css';\nimport propTypes, {FilterCheckboxAndSearchProps} from './props-types';\n\nconst CLEAR_BUTTON_STYLE = {fontWeight: 'normal', padding: 0};\nconst SHOW_BUTTON_STYLE = {\n  fontSize: '14px',\n  fontWeight: '600',\n  fontFamily: 'Gilroy',\n  padding: '0'\n};\nconst CHECKBOX_TITLE_STYLE = {\n  marginRight: '16px',\n  fontSize: '14px',\n  fontFamily: 'Gilroy',\n  fontWeight: 'normal'\n};\nconst INITIAL_VISIBLE_OPTIONS = 5;\n\nconst FilterCheckboxAndSearch = (\n  props: FilterCheckboxAndSearchProps,\n  context: WebContextValues\n) => {\n  const {title, searchOptions, onClear, options} = props;\n  const translate = GetTranslateFromContext(context);\n  const [showMore, setShowMore] = useState(false);\n  const selectedFiltersCount = pipe(filter({selected: true}), size)(options);\n  const hasSelectedFilters = selectedFiltersCount > 0;\n\n  const handleShowMore = useCallback(() => {\n    setShowMore(!showMore);\n  }, [showMore]);\n\n  const visibleOptions = useMemo(() => {\n    return showMore ? options : options.slice(0, INITIAL_VISIBLE_OPTIONS);\n  }, [options, showMore]);\n\n  return (\n    <div data-testid=\"filter-checkbox-and-search-container\" className={style.container}>\n      <div className={style.header} data-testid=\"filter-checkbox-and-search-header\">\n        <div\n          className={style.titleAndTagWrapper}\n          data-testid=\"filter-checkbox-and-searh-title-and-tag-wrapper\"\n        >\n          <Title title={title} />\n          {hasSelectedFilters ? (\n            <Tag label={toString(selectedFiltersCount)} type=\"info\" size=\"S\" />\n          ) : null}\n        </div>\n        {hasSelectedFilters ? (\n          <div className={style.clearButtonContainer}>\n            <ButtonLink\n              label={translate('clear')}\n              type=\"text\"\n              data-testid=\"filter-checkbox-and-search-clear-button\"\n              onClick={onClear}\n              customStyle={CLEAR_BUTTON_STYLE}\n            />\n          </div>\n        ) : null}\n      </div>\n      {searchOptions ? (\n        <div className={style.search}>\n          <Search {...searchOptions} />\n        </div>\n      ) : null}\n      <div\n        data-testid=\"filter-checkbox-and-search-options-container\"\n        className={style.optionsContainer}\n      >\n        {isEmpty(visibleOptions) ? (\n          <p\n            className={style.emptySearchResult}\n            data-testid=\"filter-checkbox-and-search-empty-message\"\n          >\n            No results... Try adjusting your search.\n          </p>\n        ) : (\n          visibleOptions.map(({value, label, selected, count, onClick}, index) => (\n            <div\n              key={value}\n              className={style.optionRow}\n              data-testid={`filter-checkbox-and-search-option-row-${index}`}\n            >\n              <CheckboxWithTitle\n                key={value}\n                title={label}\n                onChange={onClick}\n                name={label}\n                checked={selected}\n                customStyle={CHECKBOX_TITLE_STYLE}\n              />\n              <p className={style.optionCount}>{count}</p>\n            </div>\n          ))\n        )}\n      </div>\n      {size(options) > INITIAL_VISIBLE_OPTIONS ? (\n        <ButtonLink\n          label={showMore ? translate('Show less') : translate('Show more')}\n          type=\"text\"\n          icon={{\n            position: 'right',\n            faIcon: {\n              name: showMore ? 'chevron-up' : 'chevron-down',\n              size: 16,\n              color: COLORS.cm_grey_500\n            }\n          }}\n          customStyle={SHOW_BUTTON_STYLE}\n          onClick={handleShowMore}\n          data-testid=\"filter-checkbox-and-search-show-button\"\n        />\n      ) : null}\n    </div>\n  );\n};\n\nFilterCheckboxAndSearch.propTypes = propTypes;\n\nFilterCheckboxAndSearch.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nexport default FilterCheckboxAndSearch;\n"],"mappings":"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","ignoreList":[]}

package/lib/organism/list-item/style.css

@@ -122,7 +122,7 @@
 .dataColumnsWrapper {
   display: flex;
   width: 100%;
-  gap: 54px;
+  gap: 16px;
   min-height: inherit;
   justify-content: flex-start;
   align-items: center;

package/lib/template/back-office/brand-update/style.css

@@ -37,7 +37,8 @@
 
 .contentWrapper {
   width: calc(100% - 351px);
-  padding: 0 64px 0 64px;
+  padding: 0 64px;
+  height: fit-content;
 }
 
 .headerSticky {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.38.2",
+  "version": "11.38.3-alpha.1+8470743b9",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -165,5 +165,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "4888ddb1d6d8c1a074ee242b31f738e1c79ad256"
+  "gitHead": "8470743b9251a1abd6a14d51e97243528611a0d6"
 }