@coorpacademy/components 11.12.3-alpha.13 → 11.12.3-alpha.16

package/es/molecule/expandable-item/style.css

@@ -20,6 +20,7 @@
   height: 72px;
   justify-content: center;
 }
+
 .header {
   display: flex;
   flex-direction: row;
@@ -29,7 +30,6 @@
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
-  height: 72px;
   padding: 24px;
   gap: 16px;
 }
@@ -46,8 +46,7 @@
 }
 
 .expendedHeader {
-  padding: 24px 40px 0px 40px;
-  border-radius: 10px;
+  padding: 24px 24px 0px 24px;
 }
 
 .title {

package/es/molecule/menu-links/index.d.ts

@@ -1,14 +1,20 @@
 /// <reference types="react" />
 import { Props } from './types';
 declare const MenuLinks: {
-    ({ items, title }: Props): JSX.Element;
+    ({ items, title, showMoreItem, numberOfDisplayedItems, isDesktopMode }: Props): JSX.Element;
     propTypes: {
         title: import("prop-types").Requireable<string>;
+        numberOfDisplayedItems: import("prop-types").Requireable<number>;
+        isDesktopMode: import("prop-types").Requireable<boolean>;
+        showMoreItem: import("prop-types").Requireable<import("prop-types").InferProps<{
+            showMoreText: import("prop-types").Requireable<string>;
+            showLessText: import("prop-types").Requireable<string>;
+            isSelected: import("prop-types").Requireable<boolean>;
+        }>>;
         items: import("prop-types").Requireable<(import("prop-types").InferProps<{
             text: import("prop-types").Requireable<string>;
             isSelected: import("prop-types").Requireable<boolean>;
             handleOnclick: import("prop-types").Requireable<(...args: any[]) => any>;
-            isShowMoreItem: import("prop-types").Requireable<boolean>;
         }> | null | undefined)[]>;
     };
 };

package/es/molecule/menu-links/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/menu-links/index.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAY,KAAK,EAAC,MAAM,SAAS,CAAC;AAGzC,QAAA,MAAM,SAAS;uBAAoB,KAAK;;;;;;;;;;CAwBvC,CAAC;AAIF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/menu-links/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAY,KAAK,EAAC,MAAM,SAAS,CAAC;AAGzC,QAAA,MAAM,SAAS;4EAAyE,KAAK;;;;;;;;;;;;;;;;CAwC5F,CAAC;AAIF,eAAe,SAAS,CAAC"}

package/es/molecule/menu-links/index.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import _slice from "lodash/fp/slice";
+import React, { useState } from 'react';
 import classnames from 'classnames';
 import { NovaCompositionNavigationArrowDown as ArrowIcon } from '@coorpacademy/nova-icons';
 import { propTypes } from './types';
@@ -6,8 +7,16 @@ import styles from './style.css';
 
 const MenuLinks = ({
   items,
-  title
+  title,
+  showMoreItem,
+  numberOfDisplayedItems,
+  isDesktopMode
 }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const itemsToDesplaye = isDesktopMode || isOpen ? items : _slice(0, numberOfDisplayedItems, items);
+
+  const handleOnclickShowMore = () => setIsOpen(!isOpen);
+
   return /*#__PURE__*/React.createElement("div", {
     className: styles.container
   }, /*#__PURE__*/React.createElement("h2", {
@@ -15,22 +24,32 @@ const MenuLinks = ({
   }, title), /*#__PURE__*/React.createElement("ul", {
     className: styles.list,
     "data-name": "menu-links"
-  }, items.map((item, index) => {
+  }, itemsToDesplaye.map((item, index) => {
     const {
       handleOnclick
     } = item;
+    console.log({
+      isOpen,
+      numberOfDisplayedItems
+    });
     return /*#__PURE__*/React.createElement("li", {
       onClick: handleOnclick,
       key: `menu-link-item-${index}`,
-      className: classnames(item.isShowMoreItem ? styles.showMoreItem : null, styles.item)
+      className: styles.item
     }, /*#__PURE__*/React.createElement("div", {
-      className: item.isSelected ? styles.border : null
+      className: classnames(styles.border, item.isSelected ? styles.selectedBorder : null)
     }), /*#__PURE__*/React.createElement("span", {
       className: item.isSelected ? styles.selectedItem : undefined
-    }, item.text, item.isShowMoreItem ? /*#__PURE__*/React.createElement(ArrowIcon, {
-      className: styles.showMoreIcon
-    }) : null));
-  })));
+    }, item.text));
+  }), !isDesktopMode ? /*#__PURE__*/React.createElement("li", {
+    onClick: handleOnclickShowMore,
+    key: `menu-link-item-show-more`,
+    className: classnames(styles.showMoreItem, styles.item)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.border
+  }), /*#__PURE__*/React.createElement("span", null, isOpen ? showMoreItem.showLessText : showMoreItem.showMoreText, /*#__PURE__*/React.createElement(ArrowIcon, {
+    className: isOpen ? styles.showLessIcon : styles.showMoreIcon
+  }))) : null));
 };
 
 MenuLinks.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};

package/es/molecule/menu-links/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","classnames","NovaCompositionNavigationArrowDown","ArrowIcon","propTypes","styles","MenuLinks","items","title","container","list","map","item","index","handleOnclick","isShowMoreItem","showMoreItem","isSelected","border","selectedItem","undefined","text","showMoreIcon"],"sources":["../../../src/molecule/menu-links/index.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport {NovaCompositionNavigationArrowDown as ArrowIcon} from '@coorpacademy/nova-icons';\nimport {propTypes, Props} from './types';\nimport styles from './style.css';\n\nconst MenuLinks = ({items, title}: Props) => {\n  return (\n    <div className={styles.container}>\n      <h2 className={styles.title}>{title}</h2>\n      <ul className={styles.list} data-name=\"menu-links\">\n        {items.map((item, index) => {\n          const {handleOnclick} = item;\n          return (\n            <li\n              onClick={handleOnclick}\n              key={`menu-link-item-${index}`}\n              className={classnames(item.isShowMoreItem ? styles.showMoreItem : null, styles.item)}\n            >\n              <div className={item.isSelected ? styles.border : null} />\n              <span className={item.isSelected ? styles.selectedItem : undefined}>\n                {item.text}\n                {item.isShowMoreItem ? <ArrowIcon className={styles.showMoreIcon} /> : null}\n              </span>\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n\nMenuLinks.propTypes = propTypes;\n\nexport default MenuLinks;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAAQC,kCAAkC,IAAIC,SAA9C,QAA8D,0BAA9D;AACA,SAAQC,SAAR,QAA+B,SAA/B;AACA,OAAOC,MAAP,MAAmB,aAAnB;;AAEA,MAAMC,SAAS,GAAG,CAAC;EAACC,KAAD;EAAQC;AAAR,CAAD,KAA2B;EAC3C,oBACE;IAAK,SAAS,EAAEH,MAAM,CAACI;EAAvB,gBACE;IAAI,SAAS,EAAEJ,MAAM,CAACG;EAAtB,GAA8BA,KAA9B,CADF,eAEE;IAAI,SAAS,EAAEH,MAAM,CAACK,IAAtB;IAA4B,aAAU;EAAtC,GACGH,KAAK,CAACI,GAAN,CAAU,CAACC,IAAD,EAAOC,KAAP,KAAiB;IAC1B,MAAM;MAACC;IAAD,IAAkBF,IAAxB;IACA,oBACE;MACE,OAAO,EAAEE,aADX;MAEE,GAAG,EAAG,kBAAiBD,KAAM,EAF/B;MAGE,SAAS,EAAEZ,UAAU,CAACW,IAAI,CAACG,cAAL,GAAsBV,MAAM,CAACW,YAA7B,GAA4C,IAA7C,EAAmDX,MAAM,CAACO,IAA1D;IAHvB,gBAKE;MAAK,SAAS,EAAEA,IAAI,CAACK,UAAL,GAAkBZ,MAAM,CAACa,MAAzB,GAAkC;IAAlD,EALF,eAME;MAAM,SAAS,EAAEN,IAAI,CAACK,UAAL,GAAkBZ,MAAM,CAACc,YAAzB,GAAwCC;IAAzD,GACGR,IAAI,CAACS,IADR,EAEGT,IAAI,CAACG,cAAL,gBAAsB,oBAAC,SAAD;MAAW,SAAS,EAAEV,MAAM,CAACiB;IAA7B,EAAtB,GAAsE,IAFzE,CANF,CADF;EAaD,CAfA,CADH,CAFF,CADF;AAuBD,CAxBD;;AA0BAhB,SAAS,CAACF,SAAV,2CAAsBA,SAAtB;AAEA,eAAeE,SAAf"}
+{"version":3,"file":"index.js","names":["React","useState","classnames","NovaCompositionNavigationArrowDown","ArrowIcon","propTypes","styles","MenuLinks","items","title","showMoreItem","numberOfDisplayedItems","isDesktopMode","isOpen","setIsOpen","itemsToDesplaye","handleOnclickShowMore","container","list","map","item","index","handleOnclick","console","log","border","isSelected","selectedBorder","selectedItem","undefined","text","showLessText","showMoreText","showLessIcon","showMoreIcon"],"sources":["../../../src/molecule/menu-links/index.tsx"],"sourcesContent":["import React, {useState} from 'react';\nimport classnames from 'classnames';\nimport {NovaCompositionNavigationArrowDown as ArrowIcon} from '@coorpacademy/nova-icons';\nimport {slice} from 'lodash/fp';\nimport {propTypes, Props} from './types';\nimport styles from './style.css';\n\nconst MenuLinks = ({items, title, showMoreItem, numberOfDisplayedItems, isDesktopMode}: Props) => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const itemsToDesplaye = isDesktopMode || isOpen ? items : slice(0, numberOfDisplayedItems, items);\n  const handleOnclickShowMore = () => setIsOpen(!isOpen);\n\n  return (\n    <div className={styles.container}>\n      <h2 className={styles.title}>{title}</h2>\n      <ul className={styles.list} data-name=\"menu-links\">\n        {itemsToDesplaye.map((item, index) => {\n          const {handleOnclick} = item;\n          console.log({isOpen, numberOfDisplayedItems});\n          return (\n            <li onClick={handleOnclick} key={`menu-link-item-${index}`} className={styles.item}>\n              <div\n                className={classnames(\n                  styles.border,\n                  item.isSelected ? styles.selectedBorder : null\n                )}\n              />\n              <span className={item.isSelected ? styles.selectedItem : undefined}>{item.text}</span>\n            </li>\n          );\n        })}\n        {!isDesktopMode ? (\n          <li\n            onClick={handleOnclickShowMore}\n            key={`menu-link-item-show-more`}\n            className={classnames(styles.showMoreItem, styles.item)}\n          >\n            <div className={styles.border} />\n            <span>\n              {isOpen ? showMoreItem.showLessText : showMoreItem.showMoreText}\n              <ArrowIcon className={isOpen ? styles.showLessIcon : styles.showMoreIcon} />\n            </span>\n          </li>\n        ) : null}\n      </ul>\n    </div>\n  );\n};\n\nMenuLinks.propTypes = propTypes;\n\nexport default MenuLinks;\n"],"mappings":";AAAA,OAAOA,KAAP,IAAeC,QAAf,QAA8B,OAA9B;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAAQC,kCAAkC,IAAIC,SAA9C,QAA8D,0BAA9D;AAEA,SAAQC,SAAR,QAA+B,SAA/B;AACA,OAAOC,MAAP,MAAmB,aAAnB;;AAEA,MAAMC,SAAS,GAAG,CAAC;EAACC,KAAD;EAAQC,KAAR;EAAeC,YAAf;EAA6BC,sBAA7B;EAAqDC;AAArD,CAAD,KAAgF;EAChG,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsBb,QAAQ,CAAU,KAAV,CAApC;EACA,MAAMc,eAAe,GAAGH,aAAa,IAAIC,MAAjB,GAA0BL,KAA1B,GAAkC,OAAM,CAAN,EAASG,sBAAT,EAAiCH,KAAjC,CAA1D;;EACA,MAAMQ,qBAAqB,GAAG,MAAMF,SAAS,CAAC,CAACD,MAAF,CAA7C;;EAEA,oBACE;IAAK,SAAS,EAAEP,MAAM,CAACW;EAAvB,gBACE;IAAI,SAAS,EAAEX,MAAM,CAACG;EAAtB,GAA8BA,KAA9B,CADF,eAEE;IAAI,SAAS,EAAEH,MAAM,CAACY,IAAtB;IAA4B,aAAU;EAAtC,GACGH,eAAe,CAACI,GAAhB,CAAoB,CAACC,IAAD,EAAOC,KAAP,KAAiB;IACpC,MAAM;MAACC;IAAD,IAAkBF,IAAxB;IACAG,OAAO,CAACC,GAAR,CAAY;MAACX,MAAD;MAASF;IAAT,CAAZ;IACA,oBACE;MAAI,OAAO,EAAEW,aAAb;MAA4B,GAAG,EAAG,kBAAiBD,KAAM,EAAzD;MAA4D,SAAS,EAAEf,MAAM,CAACc;IAA9E,gBACE;MACE,SAAS,EAAElB,UAAU,CACnBI,MAAM,CAACmB,MADY,EAEnBL,IAAI,CAACM,UAAL,GAAkBpB,MAAM,CAACqB,cAAzB,GAA0C,IAFvB;IADvB,EADF,eAOE;MAAM,SAAS,EAAEP,IAAI,CAACM,UAAL,GAAkBpB,MAAM,CAACsB,YAAzB,GAAwCC;IAAzD,GAAqET,IAAI,CAACU,IAA1E,CAPF,CADF;EAWD,CAdA,CADH,EAgBG,CAAClB,aAAD,gBACC;IACE,OAAO,EAAEI,qBADX;IAEE,GAAG,EAAG,0BAFR;IAGE,SAAS,EAAEd,UAAU,CAACI,MAAM,CAACI,YAAR,EAAsBJ,MAAM,CAACc,IAA7B;EAHvB,gBAKE;IAAK,SAAS,EAAEd,MAAM,CAACmB;EAAvB,EALF,eAME,kCACGZ,MAAM,GAAGH,YAAY,CAACqB,YAAhB,GAA+BrB,YAAY,CAACsB,YADrD,eAEE,oBAAC,SAAD;IAAW,SAAS,EAAEnB,MAAM,GAAGP,MAAM,CAAC2B,YAAV,GAAyB3B,MAAM,CAAC4B;EAA5D,EAFF,CANF,CADD,GAYG,IA5BN,CAFF,CADF;AAmCD,CAxCD;;AA0CA3B,SAAS,CAACF,SAAV,2CAAsBA,SAAtB;AAEA,eAAeE,SAAf"}

package/es/molecule/menu-links/style.css

@@ -1,11 +1,13 @@
 @value colors: "../../variables/colors.css";
 @value breakpoints: "../../variables/breakpoints.css";
 @value mobile from breakpoints;
-@value mooc_tablet from breakpoints;
+@value tablet from breakpoints;
 @value cm_primary_blue from colors;
 @value cm_grey_500 from colors;
 @value cm_grey_700 from colors;
 @value cm_grey_800 from colors;
+@value white from colors;
+
 
 .container {
   display: flex;
@@ -21,7 +23,7 @@
 }
 
 .title {
-  padding: 0px 0px 0px 40px;
+  padding: 0px 0px 0px 24px;
   margin: 0;
   font-family: 'Gilroy';
   font-style: normal;
@@ -44,31 +46,23 @@
 .item {
   display: flex;
   flex-direction: row;
-  gap: 36px;
+  gap: 20px;
   margin-bottom: 16px;
 }
 
-.itemText {
-  font-family: Gilroy;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  letter-spacing: 0px;
-  font-style: normal;
-  text-align: left;
-  margin: 0;
-  color: cm_grey_800;
-}
-
 .border {
   width: 4px;
   font-weight: inherit;
-  background-color: cm_primary_blue;
+  background-color: white;
   flex-shrink: 0;
   min-width: 4px;
   flex-basis: 4px;
 }
 
+.selectedBorder {
+  background-color: cm_primary_blue;
+}
+
 .showMoreItem {
   display: none;
 }
@@ -88,7 +82,14 @@
   margin-left: 8px;
 }
 
-@media mooc_tablet {
+.showLessIcon {
+  width: 12px;
+  height: 8px;
+  margin-left: 8px;
+  transform: rotateZ(180deg);
+}
+
+@media tablet {
   .showMoreItem {
     font-family: 'Gilroy';
     font-style: normal;
@@ -100,7 +101,6 @@
     display: block;
     display: flex;
     flex-direction: row;
-    gap: 36px;
     margin-bottom: 16px;
   }
 }
@@ -117,7 +117,6 @@
     display: block;
     display: flex;
     flex-direction: row;
-    gap: 36px;
     margin-bottom: 16px;
   }
 }

package/es/molecule/menu-links/types.d.ts

@@ -1,21 +1,33 @@
 import PropTypes from 'prop-types';
 export declare const propTypes: {
     title: PropTypes.Requireable<string>;
+    numberOfDisplayedItems: PropTypes.Requireable<number>;
+    isDesktopMode: PropTypes.Requireable<boolean>;
+    showMoreItem: PropTypes.Requireable<PropTypes.InferProps<{
+        showMoreText: PropTypes.Requireable<string>;
+        showLessText: PropTypes.Requireable<string>;
+        isSelected: PropTypes.Requireable<boolean>;
+    }>>;
     items: PropTypes.Requireable<(PropTypes.InferProps<{
         text: PropTypes.Requireable<string>;
         isSelected: PropTypes.Requireable<boolean>;
         handleOnclick: PropTypes.Requireable<(...args: any[]) => any>;
-        isShowMoreItem: PropTypes.Requireable<boolean>;
     }> | null | undefined)[]>;
 };
 export declare type Item = {
     text: string;
     isSelected?: boolean;
     handleOnclick: () => void;
-    isShowMoreItem?: boolean;
+};
+export declare type ShowMoreItem = {
+    showMoreText: string;
+    showLessText: string;
 };
 export declare type Props = {
     title: string;
+    isDesktopMode: boolean;
+    showMoreItem: ShowMoreItem;
+    numberOfDisplayedItems: number;
     items: Item[];
 };
 //# sourceMappingURL=types.d.ts.map

package/es/molecule/menu-links/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/menu-links/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,eAAO,MAAM,SAAS;;;;;;;;CAUrB,CAAC;AAEF,oBAAY,IAAI,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AACF,oBAAY,KAAK,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;CACf,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/menu-links/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;CAgBrB,CAAC;AAEF,oBAAY,IAAI,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,oBAAY,KAAK,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,YAAY,CAAC;IAC3B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;CACf,CAAC"}

package/es/molecule/menu-links/types.js

@@ -1,11 +1,17 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
   title: PropTypes.string,
+  numberOfDisplayedItems: PropTypes.number,
+  isDesktopMode: PropTypes.bool,
+  showMoreItem: PropTypes.shape({
+    showMoreText: PropTypes.string,
+    showLessText: PropTypes.string,
+    isSelected: PropTypes.bool
+  }),
   items: PropTypes.arrayOf(PropTypes.shape({
     text: PropTypes.string,
     isSelected: PropTypes.bool,
-    handleOnclick: PropTypes.func,
-    isShowMoreItem: PropTypes.bool
+    handleOnclick: PropTypes.func
   }))
 };
 //# sourceMappingURL=types.js.map

package/es/molecule/menu-links/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["PropTypes","propTypes","title","string","items","arrayOf","shape","text","isSelected","bool","handleOnclick","func","isShowMoreItem"],"sources":["../../../src/molecule/menu-links/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nexport const propTypes = {\n  title: PropTypes.string,\n  items: PropTypes.arrayOf(\n    PropTypes.shape({\n      text: PropTypes.string,\n      isSelected: PropTypes.bool,\n      handleOnclick: PropTypes.func,\n      isShowMoreItem: PropTypes.bool\n    })\n  )\n};\n\nexport type Item = {\n  text: string;\n  isSelected?: boolean;\n  handleOnclick: () => void;\n  isShowMoreItem?: boolean;\n};\nexport type Props = {\n  title: string;\n  items: Item[];\n};\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB;AAEA,OAAO,MAAMC,SAAS,GAAG;EACvBC,KAAK,EAAEF,SAAS,CAACG,MADM;EAEvBC,KAAK,EAAEJ,SAAS,CAACK,OAAV,CACLL,SAAS,CAACM,KAAV,CAAgB;IACdC,IAAI,EAAEP,SAAS,CAACG,MADF;IAEdK,UAAU,EAAER,SAAS,CAACS,IAFR;IAGdC,aAAa,EAAEV,SAAS,CAACW,IAHX;IAIdC,cAAc,EAAEZ,SAAS,CAACS;EAJZ,CAAhB,CADK;AAFgB,CAAlB"}
+{"version":3,"file":"types.js","names":["PropTypes","propTypes","title","string","numberOfDisplayedItems","number","isDesktopMode","bool","showMoreItem","shape","showMoreText","showLessText","isSelected","items","arrayOf","text","handleOnclick","func"],"sources":["../../../src/molecule/menu-links/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nexport const propTypes = {\n  title: PropTypes.string,\n  numberOfDisplayedItems: PropTypes.number,\n  isDesktopMode: PropTypes.bool,\n  showMoreItem: PropTypes.shape({\n    showMoreText: PropTypes.string,\n    showLessText: PropTypes.string,\n    isSelected: PropTypes.bool\n  }),\n  items: PropTypes.arrayOf(\n    PropTypes.shape({\n      text: PropTypes.string,\n      isSelected: PropTypes.bool,\n      handleOnclick: PropTypes.func\n    })\n  )\n};\n\nexport type Item = {\n  text: string;\n  isSelected?: boolean;\n  handleOnclick: () => void;\n};\n\nexport type ShowMoreItem = {\n  showMoreText: string;\n  showLessText: string;\n};\n\nexport type Props = {\n  title: string;\n  isDesktopMode: boolean;\n  showMoreItem: ShowMoreItem;\n  numberOfDisplayedItems: number;\n  items: Item[];\n};\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB;AAEA,OAAO,MAAMC,SAAS,GAAG;EACvBC,KAAK,EAAEF,SAAS,CAACG,MADM;EAEvBC,sBAAsB,EAAEJ,SAAS,CAACK,MAFX;EAGvBC,aAAa,EAAEN,SAAS,CAACO,IAHF;EAIvBC,YAAY,EAAER,SAAS,CAACS,KAAV,CAAgB;IAC5BC,YAAY,EAAEV,SAAS,CAACG,MADI;IAE5BQ,YAAY,EAAEX,SAAS,CAACG,MAFI;IAG5BS,UAAU,EAAEZ,SAAS,CAACO;EAHM,CAAhB,CAJS;EASvBM,KAAK,EAAEb,SAAS,CAACc,OAAV,CACLd,SAAS,CAACS,KAAV,CAAgB;IACdM,IAAI,EAAEf,SAAS,CAACG,MADF;IAEdS,UAAU,EAAEZ,SAAS,CAACO,IAFR;IAGdS,aAAa,EAAEhB,SAAS,CAACiB;EAHX,CAAhB,CADK;AATgB,CAAlB"}

package/es/template/common/faq-page/index.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="react" />
+import { Props } from './types';
+declare const PrivacyPolicy: {
+    ({ header, privacyPolicyContact, menuLinks, privacyPolicyDownload, expandableList }: Props): JSX.Element;
+    propTypes: {
+        header: {
+            image: import("prop-types").Requireable<string>;
+            mode: import("prop-types").Requireable<string>;
+            description: import("prop-types").Requireable<string>;
+            title: import("prop-types").Requireable<string>;
+            author: import("prop-types").Requireable<string>;
+            progress: import("prop-types").Requireable<number>;
+            onClick: import("prop-types").Requireable<(...args: any[]) => any>;
+            submitValue: import("prop-types").Requireable<string>;
+        };
+        privacyPolicyContact: {
+            title: import("prop-types").Requireable<string>;
+            content: import("prop-types").Requireable<string>;
+        };
+        menuLinks: {
+            title: import("prop-types").Requireable<string>;
+            numberOfDisplayedItems: import("prop-types").Requireable<number>;
+            isDesktopMode: import("prop-types").Requireable<boolean>;
+            showMoreItem: import("prop-types").Requireable<import("prop-types").InferProps<{
+                showMoreText: import("prop-types").Requireable<string>;
+                showLessText: import("prop-types").Requireable<string>;
+                isSelected: import("prop-types").Requireable<boolean>;
+            }>>;
+            items: import("prop-types").Requireable<(import("prop-types").InferProps<{
+                text: import("prop-types").Requireable<string>;
+                isSelected: import("prop-types").Requireable<boolean>;
+                handleOnclick: import("prop-types").Requireable<(...args: any[]) => any>;
+            }> | null | undefined)[]>;
+        };
+        privacyPolicyDownload: {
+            title: import("prop-types").Requireable<string>;
+            content: import("prop-types").Requireable<string>;
+            downloadButton: import("prop-types").Requireable<import("prop-types").InferProps<{
+                color: any;
+                submitValue: import("prop-types").Requireable<string>;
+                disabled: import("prop-types").Requireable<boolean>;
+                isLinkDisabled: import("prop-types").Requireable<boolean>;
+                href: import("prop-types").Requireable<string>;
+                download: import("prop-types").Requireable<boolean>;
+                target: import("prop-types").Requireable<string>;
+                type: import("prop-types").Requireable<string>;
+                onClick: import("prop-types").Requireable<(...args: any[]) => any>;
+                children: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+                className: import("prop-types").Requireable<string>;
+                buttonContentClassName: import("prop-types").Requireable<string>;
+                style: import("prop-types").Requireable<import("prop-types").InferProps<{}>>;
+                'data-name': import("prop-types").Requireable<string>;
+            }>>;
+        };
+        expandableList: {
+            items: import("prop-types").Requireable<(import("prop-types").InferProps<{
+                title: import("prop-types").Requireable<string>;
+                icon: import("prop-types").Requireable<string>;
+                isExpended: import("prop-types").Requireable<boolean>;
+                content: import("prop-types").Requireable<string>;
+                image: import("prop-types").Requireable<string>;
+                onClick: import("prop-types").Requireable<(...args: any[]) => any>;
+            }> | null | undefined)[]>;
+        };
+    };
+};
+export default PrivacyPolicy;
+//# sourceMappingURL=index.d.ts.map

package/es/template/common/faq-page/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/faq-page/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAY,KAAK,EAAC,MAAM,SAAS,CAAC;AAGzC,QAAA,MAAM,aAAa;yFAMhB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyBP,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/es/template/common/faq-page/index.js

@@ -0,0 +1,42 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import Hero from '../../../molecule/hero';
+import PrivacyPolicyContact from '../../../molecule/privacy-policy-contact';
+import PrivacyPolicyDownload from '../../../molecule/privacy-policy-download';
+import MenuLinks from '../../../molecule/menu-links';
+import ExpandableList from '../../../molecule/expandable-list';
+import { propTypes } from './types';
+import styles from './style.css';
+
+const PrivacyPolicy = ({
+  header,
+  privacyPolicyContact,
+  menuLinks,
+  privacyPolicyDownload,
+  expandableList
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.wrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.hero
+  }, /*#__PURE__*/React.createElement(Hero, _extends({}, header, {
+    mode: 'header'
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.menuContainer
+  }, /*#__PURE__*/React.createElement(MenuLinks, menuLinks), /*#__PURE__*/React.createElement("div", {
+    className: styles.privacyPolicyDownloadDesktop
+  }, /*#__PURE__*/React.createElement(PrivacyPolicyDownload, privacyPolicyDownload))), /*#__PURE__*/React.createElement("div", {
+    className: styles.expandableList
+  }, /*#__PURE__*/React.createElement(ExpandableList, expandableList)), /*#__PURE__*/React.createElement("div", {
+    className: styles.privacyPolicyDownload
+  }, /*#__PURE__*/React.createElement(PrivacyPolicyDownload, privacyPolicyDownload))), /*#__PURE__*/React.createElement("div", {
+    className: styles.privacyPolicyContact
+  }, /*#__PURE__*/React.createElement(PrivacyPolicyContact, privacyPolicyContact)));
+};
+
+PrivacyPolicy.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+export default PrivacyPolicy;
+//# sourceMappingURL=index.js.map

package/es/template/common/faq-page/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","Hero","PrivacyPolicyContact","PrivacyPolicyDownload","MenuLinks","ExpandableList","propTypes","styles","PrivacyPolicy","header","privacyPolicyContact","menuLinks","privacyPolicyDownload","expandableList","wrapper","hero","container","menuContainer","privacyPolicyDownloadDesktop"],"sources":["../../../../src/template/common/faq-page/index.tsx"],"sourcesContent":["import React from 'react';\nimport Hero from '../../../molecule/hero';\nimport PrivacyPolicyContact from '../../../molecule/privacy-policy-contact';\nimport PrivacyPolicyDownload from '../../../molecule/privacy-policy-download';\nimport MenuLinks from '../../../molecule/menu-links';\nimport ExpandableList from '../../../molecule/expandable-list';\nimport {propTypes, Props} from './types';\nimport styles from './style.css';\n\nconst PrivacyPolicy = ({\n  header,\n  privacyPolicyContact,\n  menuLinks,\n  privacyPolicyDownload,\n  expandableList\n}: Props) => {\n  return (\n    <div className={styles.wrapper}>\n      <div className={styles.hero}>\n        <Hero {...header} mode={'header'} />\n      </div>\n      <div className={styles.container}>\n        <div className={styles.menuContainer}>\n          <MenuLinks {...menuLinks} />\n          <div className={styles.privacyPolicyDownloadDesktop}>\n            <PrivacyPolicyDownload {...privacyPolicyDownload} />\n          </div>\n        </div>\n        <div className={styles.expandableList}>\n          <ExpandableList {...expandableList} />\n        </div>\n        <div className={styles.privacyPolicyDownload}>\n          <PrivacyPolicyDownload {...privacyPolicyDownload} />\n        </div>\n      </div>\n      <div className={styles.privacyPolicyContact}>\n        <PrivacyPolicyContact {...privacyPolicyContact} />\n      </div>\n    </div>\n  );\n};\n\nPrivacyPolicy.propTypes = propTypes;\n\nexport default PrivacyPolicy;\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,IAAP,MAAiB,wBAAjB;AACA,OAAOC,oBAAP,MAAiC,0CAAjC;AACA,OAAOC,qBAAP,MAAkC,2CAAlC;AACA,OAAOC,SAAP,MAAsB,8BAAtB;AACA,OAAOC,cAAP,MAA2B,mCAA3B;AACA,SAAQC,SAAR,QAA+B,SAA/B;AACA,OAAOC,MAAP,MAAmB,aAAnB;;AAEA,MAAMC,aAAa,GAAG,CAAC;EACrBC,MADqB;EAErBC,oBAFqB;EAGrBC,SAHqB;EAIrBC,qBAJqB;EAKrBC;AALqB,CAAD,KAMT;EACX,oBACE;IAAK,SAAS,EAAEN,MAAM,CAACO;EAAvB,gBACE;IAAK,SAAS,EAAEP,MAAM,CAACQ;EAAvB,gBACE,oBAAC,IAAD,eAAUN,MAAV;IAAkB,IAAI,EAAE;EAAxB,GADF,CADF,eAIE;IAAK,SAAS,EAAEF,MAAM,CAACS;EAAvB,gBACE;IAAK,SAAS,EAAET,MAAM,CAACU;EAAvB,gBACE,oBAAC,SAAD,EAAeN,SAAf,CADF,eAEE;IAAK,SAAS,EAAEJ,MAAM,CAACW;EAAvB,gBACE,oBAAC,qBAAD,EAA2BN,qBAA3B,CADF,CAFF,CADF,eAOE;IAAK,SAAS,EAAEL,MAAM,CAACM;EAAvB,gBACE,oBAAC,cAAD,EAAoBA,cAApB,CADF,CAPF,eAUE;IAAK,SAAS,EAAEN,MAAM,CAACK;EAAvB,gBACE,oBAAC,qBAAD,EAA2BA,qBAA3B,CADF,CAVF,CAJF,eAkBE;IAAK,SAAS,EAAEL,MAAM,CAACG;EAAvB,gBACE,oBAAC,oBAAD,EAA0BA,oBAA1B,CADF,CAlBF,CADF;AAwBD,CA/BD;;AAiCAF,aAAa,CAACF,SAAd,2CAA0BA,SAA1B;AAEA,eAAeE,aAAf"}

package/es/template/common/faq-page/style.css

@@ -0,0 +1,103 @@
+@value breakpoints: "../../../variables/breakpoints.css";
+@value mobile from breakpoints;
+@value mooc_tablet from breakpoints;
+@value desktop from breakpoints;
+@value colors: "../../../variables/colors.css";
+@value cm_grey_50 from colors;
+
+.wrapper {
+  background-color: cm_grey_50;
+}
+
+.hero {
+  height: 228px;
+  width: 100%;
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  margin: 40px auto;
+  padding: 0px 40px;
+  justify-content: center;
+}
+
+.menuContainer {
+  margin-right: 32px;
+  min-width: 388px;
+  max-width: 388px;
+}
+
+.privacyPolicyContact{
+  width: 100%;
+  height: 86px;
+}
+
+.privacyPolicyDownloadDesktop {
+  margin-top: 28px;
+  display: block;
+}
+.privacyPolicyDownload {
+  display: none;
+}
+
+.expandableList {
+  min-width: 686px;
+  max-width: 748px;
+  width: 100%;
+}
+@media mooc_tablet {
+  .privacyPolicyDownloadDesktop {
+    display: none;
+  }
+  .privacyPolicyDownload {
+    display: block;
+  }
+  .container {
+    display: flex;
+    flex-direction: column;
+    margin: 40px;
+    padding: 0px;
+  }
+  .menuContainer {
+    margin: 0px 0px 16px 0px;
+    width: 100%;
+    min-width: inherit;
+    max-width: inherit;
+  }
+  .expandableList {
+    min-width: inherit;
+    max-width: inherit;
+    width: 100%;
+  }
+}
+
+@media mobile {
+  .hero {
+    height: 264px;
+    width: 100%;
+  }
+  .privacyPolicyDownloadDesktop {
+    display: none;
+  }
+  .privacyPolicyDownload {
+    display: block;
+  }
+  .container {
+    display: flex;
+    flex-direction: column;
+    margin: 40px 24px;
+    padding: 0px;
+  }
+  .menuContainer {
+    margin: 0px 0px 16px 0px;
+    width: 100%;
+    min-width: inherit;
+    max-width: inherit;
+  }
+  .expandableList {
+    min-width: inherit;
+    max-width: inherit;
+    width: 100%;
+  }
+}

package/es/template/common/faq-page/types.d.ts

@@ -0,0 +1,74 @@
+import { Props as ContactProps } from '../../../molecule/privacy-policy-contact/types';
+import { Props as DownloadProps } from '../../../molecule/privacy-policy-download/types';
+import { Props as HeroProps } from '../../../molecule/hero/types';
+import { Props as MenuLinksProps } from '../../../molecule/menu-links/types';
+import { Props as ListProps } from '../../../molecule/expandable-list/types';
+export declare const propTypes: {
+    header: {
+        image: import("prop-types").Requireable<string>;
+        mode: import("prop-types").Requireable<string>;
+        description: import("prop-types").Requireable<string>;
+        title: import("prop-types").Requireable<string>;
+        author: import("prop-types").Requireable<string>;
+        progress: import("prop-types").Requireable<number>;
+        onClick: import("prop-types").Requireable<(...args: any[]) => any>;
+        submitValue: import("prop-types").Requireable<string>;
+    };
+    privacyPolicyContact: {
+        title: import("prop-types").Requireable<string>;
+        content: import("prop-types").Requireable<string>;
+    };
+    menuLinks: {
+        title: import("prop-types").Requireable<string>;
+        numberOfDisplayedItems: import("prop-types").Requireable<number>;
+        isDesktopMode: import("prop-types").Requireable<boolean>;
+        showMoreItem: import("prop-types").Requireable<import("prop-types").InferProps<{
+            showMoreText: import("prop-types").Requireable<string>;
+            showLessText: import("prop-types").Requireable<string>;
+            isSelected: import("prop-types").Requireable<boolean>;
+        }>>;
+        items: import("prop-types").Requireable<(import("prop-types").InferProps<{
+            text: import("prop-types").Requireable<string>;
+            isSelected: import("prop-types").Requireable<boolean>;
+            handleOnclick: import("prop-types").Requireable<(...args: any[]) => any>;
+        }> | null | undefined)[]>;
+    };
+    privacyPolicyDownload: {
+        title: import("prop-types").Requireable<string>;
+        content: import("prop-types").Requireable<string>;
+        downloadButton: import("prop-types").Requireable<import("prop-types").InferProps<{
+            color: any;
+            submitValue: import("prop-types").Requireable<string>;
+            disabled: import("prop-types").Requireable<boolean>;
+            isLinkDisabled: import("prop-types").Requireable<boolean>;
+            href: import("prop-types").Requireable<string>;
+            download: import("prop-types").Requireable<boolean>;
+            target: import("prop-types").Requireable<string>;
+            type: import("prop-types").Requireable<string>;
+            onClick: import("prop-types").Requireable<(...args: any[]) => any>;
+            children: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+            className: import("prop-types").Requireable<string>;
+            buttonContentClassName: import("prop-types").Requireable<string>;
+            style: import("prop-types").Requireable<import("prop-types").InferProps<{}>>;
+            'data-name': import("prop-types").Requireable<string>;
+        }>>;
+    };
+    expandableList: {
+        items: import("prop-types").Requireable<(import("prop-types").InferProps<{
+            title: import("prop-types").Requireable<string>;
+            icon: import("prop-types").Requireable<string>;
+            isExpended: import("prop-types").Requireable<boolean>;
+            content: import("prop-types").Requireable<string>;
+            image: import("prop-types").Requireable<string>;
+            onClick: import("prop-types").Requireable<(...args: any[]) => any>;
+        }> | null | undefined)[]>;
+    };
+};
+export declare type Props = {
+    header: HeroProps;
+    privacyPolicyContact: ContactProps;
+    menuLinks: MenuLinksProps;
+    privacyPolicyDownload: DownloadProps;
+    expandableList: ListProps;
+};
+//# sourceMappingURL=types.d.ts.map

package/es/template/common/faq-page/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/template/common/faq-page/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,IAAI,YAAY,EAEtB,MAAM,gDAAgD,CAAC;AACxD,OAAO,EACL,KAAK,IAAI,aAAa,EAEvB,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAC,KAAK,IAAI,SAAS,EAA6B,MAAM,8BAA8B,CAAC;AAC5F,OAAO,EACL,KAAK,IAAI,cAAc,EAExB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EACL,KAAK,IAAI,SAAS,EAEnB,MAAM,yCAAyC,CAAC;AAEjD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMrB,CAAC;AAEF,oBAAY,KAAK,GAAG;IAClB,MAAM,EAAE,SAAS,CAAC;IAClB,oBAAoB,EAAE,YAAY,CAAC;IACnC,SAAS,EAAE,cAAc,CAAC;IAC1B,qBAAqB,EAAE,aAAa,CAAC;IACrC,cAAc,EAAE,SAAS,CAAC;CAC3B,CAAC"}

package/es/template/common/faq-page/types.js

@@ -0,0 +1,13 @@
+import { propTypes as ContactPropTypes } from '../../../molecule/privacy-policy-contact/types';
+import { propTypes as DownloadPropTypes } from '../../../molecule/privacy-policy-download/types';
+import { propTypes as HeroPropTypes } from '../../../molecule/hero/types';
+import { propTypes as MenuLinksPropTypes } from '../../../molecule/menu-links/types';
+import { propTypes as ListPropTypes } from '../../../molecule/expandable-list/types';
+export const propTypes = {
+  header: HeroPropTypes,
+  privacyPolicyContact: ContactPropTypes,
+  menuLinks: MenuLinksPropTypes,
+  privacyPolicyDownload: DownloadPropTypes,
+  expandableList: ListPropTypes
+};
+//# sourceMappingURL=types.js.map

package/es/template/common/faq-page/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["propTypes","ContactPropTypes","DownloadPropTypes","HeroPropTypes","MenuLinksPropTypes","ListPropTypes","header","privacyPolicyContact","menuLinks","privacyPolicyDownload","expandableList"],"sources":["../../../../src/template/common/faq-page/types.ts"],"sourcesContent":["import {\n  Props as ContactProps,\n  propTypes as ContactPropTypes\n} from '../../../molecule/privacy-policy-contact/types';\nimport {\n  Props as DownloadProps,\n  propTypes as DownloadPropTypes\n} from '../../../molecule/privacy-policy-download/types';\nimport {Props as HeroProps, propTypes as HeroPropTypes} from '../../../molecule/hero/types';\nimport {\n  Props as MenuLinksProps,\n  propTypes as MenuLinksPropTypes\n} from '../../../molecule/menu-links/types';\nimport {\n  Props as ListProps,\n  propTypes as ListPropTypes\n} from '../../../molecule/expandable-list/types';\n\nexport const propTypes = {\n  header: HeroPropTypes,\n  privacyPolicyContact: ContactPropTypes,\n  menuLinks: MenuLinksPropTypes,\n  privacyPolicyDownload: DownloadPropTypes,\n  expandableList: ListPropTypes\n};\n\nexport type Props = {\n  header: HeroProps;\n  privacyPolicyContact: ContactProps;\n  menuLinks: MenuLinksProps;\n  privacyPolicyDownload: DownloadProps;\n  expandableList: ListProps;\n};\n"],"mappings":"AAAA,SAEEA,SAAS,IAAIC,gBAFf,QAGO,gDAHP;AAIA,SAEED,SAAS,IAAIE,iBAFf,QAGO,iDAHP;AAIA,SAA4BF,SAAS,IAAIG,aAAzC,QAA6D,8BAA7D;AACA,SAEEH,SAAS,IAAII,kBAFf,QAGO,oCAHP;AAIA,SAEEJ,SAAS,IAAIK,aAFf,QAGO,yCAHP;AAKA,OAAO,MAAML,SAAS,GAAG;EACvBM,MAAM,EAAEH,aADe;EAEvBI,oBAAoB,EAAEN,gBAFC;EAGvBO,SAAS,EAAEJ,kBAHY;EAIvBK,qBAAqB,EAAEP,iBAJA;EAKvBQ,cAAc,EAAEL;AALO,CAAlB"}