@coorpacademy/components 11.33.16 → 11.34.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/content-skill-modal/index.tsx"],"names":[],"mappings":";AAOA,OAAkB,EAAC,sBAAsB,EAAC,MAAM,SAAS,CAAC;AAE1D,QAAA,MAAM,iBAAiB;YAAW,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DvD,CAAC;AAQF,eAAe,iBAAiB,CAAC"}

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

@@ -0,0 +1,72 @@
+import React, { useCallback, useMemo } from 'react';
+import BaseModal from '../../molecule/base-modal';
+import ListItems from '../list-items';
+import MultiFilterPanel from '../../molecule/multi-filter-panel';
+import Provider from '../../atom/provider';
+import { COLORS } from '../../variables/colors';
+import style from './style.css';
+import propTypes from './types';
+const ContentSkillModal = props => {
+  const {
+    contentList,
+    filters,
+    modal
+  } = props;
+  const {
+    isOpen,
+    onCancel,
+    onConfirm,
+    onClose
+  } = modal;
+  const handleCancel = useCallback(() => {
+    onCancel();
+  }, [onCancel]);
+  const handleClose = useCallback(() => {
+    onClose();
+  }, [onClose]);
+  const headerIcon = {
+    name: 'circle-plus',
+    color: COLORS.primary_600,
+    backgroundColor: COLORS.primary_100
+  };
+  const footer = useMemo(() => ({
+    cancelButton: {
+      onCancel: handleCancel,
+      label: 'Cancel'
+    },
+    confirmButton: {
+      onConfirm,
+      label: 'Add',
+      iconName: 'plus',
+      disabled: false,
+      color: COLORS.cm_primary_blue
+    }
+  }), [handleCancel, onConfirm]);
+  const baseModal = {
+    title: 'Add content',
+    description: 'Add courses, video, interactive and more to this skill',
+    headerIcon,
+    footer,
+    isOpen,
+    onClose: handleClose,
+    customStyle: {
+      padding: 0,
+      height: '60vh',
+      overflow: 'hidden'
+    }
+  };
+  if (!isOpen) return null;
+  return /*#__PURE__*/React.createElement(BaseModal, baseModal, /*#__PURE__*/React.createElement("div", {
+    className: style.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.containerList
+  }, /*#__PURE__*/React.createElement(ListItems, contentList)), /*#__PURE__*/React.createElement("div", {
+    className: style.filtersContainer
+  }, /*#__PURE__*/React.createElement(MultiFilterPanel, filters))));
+};
+ContentSkillModal.contextTypes = {
+  translate: Provider.childContextTypes.translate
+};
+ContentSkillModal.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+export default ContentSkillModal;
+//# sourceMappingURL=index.js.map

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

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

package/es/organism/content-skill-modal/style.css

@@ -0,0 +1,20 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_100 from colors;
+
+.container {
+  display: flex;
+  height: 100%;
+}
+
+.containerList {
+  flex: 2;
+  border-right: 1px solid cm_grey_100;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+.filtersContainer {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+}