@coorpacademy/components 11.15.2 → 11.15.3

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

@@ -0,0 +1,75 @@
+import _slice from "lodash/fp/slice";
+import React, { useState } from 'react';
+import classnames from 'classnames';
+import { NovaCompositionNavigationArrowDown as ArrowIcon, NovaLinePhoneMobilePhone as MobilePhone, NovaLineMessagesChatChatBubbleCircleQuestionMark as ChatBubbleCircleQuestionMark, NovaLineNetworkNetworkAlert as NetworkAlert, NovaLineObjectsBinoculars as Binoculaire, NovaLineContentEditionContentBook as ContentBook } from '@coorpacademy/nova-icons';
+import { propTypes } from './types';
+import styles from './style.css';
+const ICONS = {
+  mobilePhone: MobilePhone,
+  chatBubbleCircleQuestionMark: ChatBubbleCircleQuestionMark,
+  networkAlert: NetworkAlert,
+  binoculaire: Binoculaire,
+  contentBook: ContentBook
+};
+
+const MenuLinks = ({
+  items,
+  title,
+  showMoreItem,
+  numberOfDisplayedItems,
+  isDesktopMode,
+  withScroll = false
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const itemsToDisplay = isDesktopMode || isOpen ? items : _slice(0, numberOfDisplayedItems, items);
+
+  const handleOnclickShowMore = () => setIsOpen(!isOpen);
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: styles.title
+  }, title), /*#__PURE__*/React.createElement("ul", {
+    className: styles.list,
+    "data-name": "menu-links"
+  }, itemsToDisplay.map((item, index) => {
+    const {
+      handleOnclick
+    } = item;
+    const Icon = item.icon ? ICONS[item.icon] : null;
+    const Item = /*#__PURE__*/React.createElement("div", {
+      className: styles.flexContainer
+    }, /*#__PURE__*/React.createElement("span", {
+      className: item.isSelected ? styles.selectedItem : undefined
+    }, item.text), Icon ? /*#__PURE__*/React.createElement(ArrowIcon, {
+      className: classnames(styles.arrowIcon, item.isSelected ? styles.selectedIcon : null)
+    }) : null);
+    return /*#__PURE__*/React.createElement("li", {
+      onClick: handleOnclick,
+      key: `menu-link-item-${index}`,
+      className: styles.item
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.border, item.isSelected ? styles.selectedBorder : null)
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles.flexContainer
+    }, Icon ? /*#__PURE__*/React.createElement(Icon, {
+      className: classnames(styles.icon, item.isSelected ? styles.selectedIcon : null)
+    }) : null, withScroll ? /*#__PURE__*/React.createElement("a", {
+      className: styles.link,
+      href: `#menu-link-item-${index}`
+    }, Item) : Item));
+  }), !isDesktopMode ? /*#__PURE__*/React.createElement("li", {
+    // eslint-disable-next-line react/jsx-no-bind
+    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 : {};
+export default MenuLinks;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useState","classnames","NovaCompositionNavigationArrowDown","ArrowIcon","NovaLinePhoneMobilePhone","MobilePhone","NovaLineMessagesChatChatBubbleCircleQuestionMark","ChatBubbleCircleQuestionMark","NovaLineNetworkNetworkAlert","NetworkAlert","NovaLineObjectsBinoculars","Binoculaire","NovaLineContentEditionContentBook","ContentBook","propTypes","styles","ICONS","mobilePhone","chatBubbleCircleQuestionMark","networkAlert","binoculaire","contentBook","MenuLinks","items","title","showMoreItem","numberOfDisplayedItems","isDesktopMode","withScroll","isOpen","setIsOpen","itemsToDisplay","handleOnclickShowMore","container","list","map","item","index","handleOnclick","Icon","icon","Item","flexContainer","isSelected","selectedItem","undefined","text","arrowIcon","selectedIcon","border","selectedBorder","link","showLessText","showMoreText","showLessIcon","showMoreIcon"],"sources":["../../../src/molecule/menu-links/index.tsx"],"sourcesContent":["import React, {useState} from 'react';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionNavigationArrowDown as ArrowIcon,\n  NovaLinePhoneMobilePhone as MobilePhone,\n  NovaLineMessagesChatChatBubbleCircleQuestionMark as ChatBubbleCircleQuestionMark,\n  NovaLineNetworkNetworkAlert as NetworkAlert,\n  NovaLineObjectsBinoculars as Binoculaire,\n  NovaLineContentEditionContentBook as ContentBook\n} from '@coorpacademy/nova-icons';\nimport {slice} from 'lodash/fp';\nimport {propTypes, Props} from './types';\nimport styles from './style.css';\n\nconst ICONS = {\n  mobilePhone: MobilePhone,\n  chatBubbleCircleQuestionMark: ChatBubbleCircleQuestionMark,\n  networkAlert: NetworkAlert,\n  binoculaire: Binoculaire,\n  contentBook: ContentBook\n};\n\nconst MenuLinks = ({\n  items,\n  title,\n  showMoreItem,\n  numberOfDisplayedItems,\n  isDesktopMode,\n  withScroll = false\n}: Props) => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const itemsToDisplay = 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        {itemsToDisplay.map((item, index) => {\n          const {handleOnclick} = item;\n          const Icon = item.icon ? ICONS[item.icon] : null;\n          const Item = (\n            <div className={styles.flexContainer}>\n              <span className={item.isSelected ? styles.selectedItem : undefined}>{item.text}</span>\n              {Icon ? (\n                <ArrowIcon\n                  className={classnames(\n                    styles.arrowIcon,\n                    item.isSelected ? styles.selectedIcon : null\n                  )}\n                />\n              ) : null}\n            </div>\n          );\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              <div className={styles.flexContainer}>\n                {Icon ? (\n                  <Icon\n                    className={classnames(\n                      styles.icon,\n                      item.isSelected ? styles.selectedIcon : null\n                    )}\n                  />\n                ) : null}\n                {withScroll ? (\n                  <a className={styles.link} href={`#menu-link-item-${index}`}>\n                    {Item}\n                  </a>\n                ) : (\n                  Item\n                )}\n              </div>\n            </li>\n          );\n        })}\n        {!isDesktopMode ? (\n          <li\n            // eslint-disable-next-line react/jsx-no-bind\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":"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"}

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

@@ -0,0 +1,166 @@
+@value colors: "../../variables/colors.css";
+@value breakpoints: "../../variables/breakpoints.css";
+@value mobile 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;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 24px 24px 8px 0px;
+  gap: 24px;
+  background: #FFFFFF;
+  border-radius: 8px;
+  flex: none;
+  order: 0;
+  flex-grow: 0;
+}
+
+.link {
+  text-decoration: none;
+  color: cm_grey_700;
+}
+
+.title {
+  padding: 0px 0px 0px 24px;
+  margin: 0;
+  font-family: 'Gilroy';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 22px;
+  order: 0;
+  flex-grow: 0;
+  z-index: 0;
+  color: cm_grey_500;
+}
+
+.list {
+  list-style: none;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.item {
+  display: flex;
+  flex-direction: row;
+  gap: 28px;
+  margin-bottom: 16px;
+  width: 100%;
+}
+
+.flexContainer span {
+  font-family: Gilroy;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 20px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+
+.flexContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+.border {
+  width: 4px;
+  font-weight: inherit;
+  background-color: white;
+  flex-shrink: 0;
+  min-width: 4px;
+  flex-basis: 4px;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  color: #000;
+  margin-right: 12px;
+}
+
+.arrowIcon{
+  width: 12px;
+  min-width: 12px;
+  height: 12px;
+  margin-left: 10px;
+  transform: rotateZ(270deg);
+}
+
+.selectedBorder {
+  background-color: cm_primary_blue;
+}
+
+.showMoreItem {
+  display: none;
+}
+
+.selectedItem {
+  color: cm_primary_blue;
+  font-weight: 600;
+}
+
+.selectedIcon {
+  color: cm_primary_blue;
+}
+.item:hover{
+  text-decoration: underline;
+}
+
+.selectedItem:hover {
+  text-decoration-color: cm_primary_blue!important;
+  color: cm_primary_blue;
+}
+.showMoreIcon {
+  width: 12px;
+  height: 8px;
+  margin-left: 8px;
+}
+
+.showLessIcon {
+  width: 12px;
+  height: 8px;
+  margin-left: 8px;
+  transform: rotateZ(180deg);
+}
+
+@media tablet {
+  .showMoreItem {
+    font-family: 'Gilroy';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 20px;
+    color: cm_grey_700;
+    margin: 0;
+    display: block;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 16px;
+  }
+}
+
+@media mobile {
+  .showMoreItem {
+    font-family: 'Gilroy';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 20px;
+    color: cm_grey_700;
+    margin: 0;
+    display: block;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 16px;
+  }
+}

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

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+export declare const propTypes: {
+    title: PropTypes.Requireable<string>;
+    numberOfDisplayedItems: PropTypes.Requireable<number>;
+    isDesktopMode: PropTypes.Requireable<boolean>;
+    withScroll: 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>;
+    }> | null | undefined)[]>;
+};
+export declare type Item = {
+    text: string;
+    isSelected?: boolean;
+    handleOnclick: () => void;
+    icon?: IconsType;
+};
+export declare type ShowMoreItem = {
+    showMoreText: string;
+    showLessText: string;
+};
+export declare type IconsType = 'mobilePhone' | 'chatBubbleCircleQuestionMark' | 'networkAlert' | 'binoculaire' | 'contentBook';
+export declare type Props = {
+    title: string;
+    isDesktopMode: boolean;
+    withScroll?: boolean;
+    showMoreItem: ShowMoreItem;
+    numberOfDisplayedItems: number;
+    items: Item[];
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;CAiBrB,CAAC;AAEF,oBAAY,IAAI,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,oBAAY,SAAS,GACjB,aAAa,GACb,8BAA8B,GAC9B,cAAc,GACd,aAAa,GACb,aAAa,CAAC;AAElB,oBAAY,KAAK,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,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

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  title: PropTypes.string,
+  numberOfDisplayedItems: PropTypes.number,
+  isDesktopMode: PropTypes.bool,
+  withScroll: 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
+  }))
+};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["PropTypes","propTypes","title","string","numberOfDisplayedItems","number","isDesktopMode","bool","withScroll","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  withScroll: 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  icon?: IconsType;\n};\n\nexport type ShowMoreItem = {\n  showMoreText: string;\n  showLessText: string;\n};\n\nexport type IconsType =\n  | 'mobilePhone'\n  | 'chatBubbleCircleQuestionMark'\n  | 'networkAlert'\n  | 'binoculaire'\n  | 'contentBook';\n\nexport type Props = {\n  title: string;\n  isDesktopMode: boolean;\n  withScroll?: 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,UAAU,EAAER,SAAS,CAACO,IAJC;EAKvBE,YAAY,EAAET,SAAS,CAACU,KAAV,CAAgB;IAC5BC,YAAY,EAAEX,SAAS,CAACG,MADI;IAE5BS,YAAY,EAAEZ,SAAS,CAACG,MAFI;IAG5BU,UAAU,EAAEb,SAAS,CAACO;EAHM,CAAhB,CALS;EAUvBO,KAAK,EAAEd,SAAS,CAACe,OAAV,CACLf,SAAS,CAACU,KAAV,CAAgB;IACdM,IAAI,EAAEhB,SAAS,CAACG,MADF;IAEdU,UAAU,EAAEb,SAAS,CAACO,IAFR;IAGdU,aAAa,EAAEjB,SAAS,CAACkB;EAHX,CAAhB,CADK;AAVgB,CAAlB"}

package/es/molecule/privacy-policy-contact/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Props } from './types';
+export declare const ICONS: {
+    arrow: any;
+};
+declare const PrivacyPolicyContact: {
+    ({ title, content }: Props): JSX.Element;
+    propTypes: {
+        title: import("prop-types").Requireable<string>;
+        content: import("prop-types").Requireable<string>;
+    };
+};
+export default PrivacyPolicyContact;
+//# sourceMappingURL=index.d.ts.map

package/es/molecule/privacy-policy-contact/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/privacy-policy-contact/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAY,KAAK,EAAC,MAAM,SAAS,CAAC;AAGzC,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,QAAA,MAAM,oBAAoB;yBAAsB,KAAK;;;;;CAWpD,CAAC;AAIF,eAAe,oBAAoB,CAAC"}

package/es/molecule/privacy-policy-contact/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { NovaCompositionNavigationArrowDown as ArrowIcon } from '@coorpacademy/nova-icons';
+import { propTypes } from './types';
+import styles from './style.css';
+export const ICONS = {
+  arrow: ArrowIcon
+};
+
+const PrivacyPolicyContact = ({
+  title,
+  content
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: styles.title // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: title
+    }
+  }), /*#__PURE__*/React.createElement("p", {
+    className: styles.content
+  }, content));
+};
+
+PrivacyPolicyContact.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+export default PrivacyPolicyContact;
+//# sourceMappingURL=index.js.map

package/es/molecule/privacy-policy-contact/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","NovaCompositionNavigationArrowDown","ArrowIcon","propTypes","styles","ICONS","arrow","PrivacyPolicyContact","title","content","container","__html"],"sources":["../../../src/molecule/privacy-policy-contact/index.tsx"],"sourcesContent":["import React from 'react';\nimport {NovaCompositionNavigationArrowDown as ArrowIcon} from '@coorpacademy/nova-icons';\nimport {propTypes, Props} from './types';\nimport styles from './style.css';\n\nexport const ICONS = {\n  arrow: ArrowIcon\n};\n\nconst PrivacyPolicyContact = ({title, content}: Props) => {\n  return (\n    <div className={styles.container}>\n      <h3\n        className={styles.title}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: title}}\n      />\n      <p className={styles.content}>{content}</p>\n    </div>\n  );\n};\n\nPrivacyPolicyContact.propTypes = propTypes;\n\nexport default PrivacyPolicyContact;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,kCAAkC,IAAIC,SAA9C,QAA8D,0BAA9D;AACA,SAAQC,SAAR,QAA+B,SAA/B;AACA,OAAOC,MAAP,MAAmB,aAAnB;AAEA,OAAO,MAAMC,KAAK,GAAG;EACnBC,KAAK,EAAEJ;AADY,CAAd;;AAIP,MAAMK,oBAAoB,GAAG,CAAC;EAACC,KAAD;EAAQC;AAAR,CAAD,KAA6B;EACxD,oBACE;IAAK,SAAS,EAAEL,MAAM,CAACM;EAAvB,gBACE;IACE,SAAS,EAAEN,MAAM,CAACI,KADpB,CAEE;IAFF;IAGE,uBAAuB,EAAE;MAACG,MAAM,EAAEH;IAAT;EAH3B,EADF,eAME;IAAG,SAAS,EAAEJ,MAAM,CAACK;EAArB,GAA+BA,OAA/B,CANF,CADF;AAUD,CAXD;;AAaAF,oBAAoB,CAACJ,SAArB,2CAAiCA,SAAjC;AAEA,eAAeI,oBAAf"}

package/es/molecule/privacy-policy-contact/style.css

@@ -0,0 +1,39 @@
+@value colors: "../../variables/colors.css";
+@value breakpoints: "../../variables/breakpoints.css";
+@value mobile from breakpoints;
+@value tablet from breakpoints;
+@value cm_primary_blue from colors;
+@value cm_grey_500 from colors;
+@value cm_grey_400 from colors;
+@value white from colors;
+@value white from colors;
+
+.container {
+  padding: 16px 14px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: white;
+  flex: 1;
+}
+
+.title {
+font-family: Gilroy;
+font-size: 16px;
+font-weight: 400;
+line-height: 24px;
+letter-spacing: 0em;
+text-align: center;
+margin: 0;  
+}
+
+.content {
+font-family: Gilroy;
+font-size: 14px;
+font-style: italic;
+font-weight: 400;
+line-height: 22px;
+letter-spacing: 0em;
+text-align: center;
+margin: 0;
+}

package/es/molecule/privacy-policy-contact/types.d.ts

@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+export declare const propTypes: {
+    title: PropTypes.Requireable<string>;
+    content: PropTypes.Requireable<string>;
+};
+export declare type Props = {
+    title: string;
+    content: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/es/molecule/privacy-policy-contact/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/privacy-policy-contact/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,eAAO,MAAM,SAAS;;;CAGrB,CAAC;AAEF,oBAAY,KAAK,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC"}

package/es/molecule/privacy-policy-contact/types.js

@@ -0,0 +1,6 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  title: PropTypes.string,
+  content: PropTypes.string
+};
+//# sourceMappingURL=types.js.map

package/es/molecule/privacy-policy-contact/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["PropTypes","propTypes","title","string","content"],"sources":["../../../src/molecule/privacy-policy-contact/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nexport const propTypes = {\n  title: PropTypes.string,\n  content: PropTypes.string\n};\n\nexport type Props = {\n  title: string;\n  content: string;\n};\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB;AAEA,OAAO,MAAMC,SAAS,GAAG;EACvBC,KAAK,EAAEF,SAAS,CAACG,MADM;EAEvBC,OAAO,EAAEJ,SAAS,CAACG;AAFI,CAAlB"}

package/es/molecule/quick-access-card/index.d.ts

@@ -6,6 +6,7 @@ declare namespace QuickAccessCard {
         const description: PropTypes.Requireable<string>;
         const href: PropTypes.Requireable<string>;
         const openInNewTab: PropTypes.Requireable<boolean>;
+        const isMoocCard: PropTypes.Requireable<boolean>;
         const feature: PropTypes.Requireable<string>;
     }
 }

package/es/molecule/quick-access-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-access-card/index.js"],"names":[],"mappings":";AA+EA,wEAwDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-access-card/index.js"],"names":[],"mappings":";AAiIA,wEAkEC"}

package/es/molecule/quick-access-card/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { NovaSolidContentContentBookAdd as CockpitIcon, NovaSolidUsersActionsUser as ManageUserIcon, NovaSolidFilesBasicFileUpload2 as UploadUserIcon, NovaSolidEmailAtSign as ManageEmailIcon, NovaSolidDesignPaintBrush2 as LookAndFeelIcon, NovaSolidContentContentViewList as DashboardIcon, NovaSolidContentEditionFlash as MassiveBattleIcon, NovaSolidApplicationsWindowApplication5 as CmsIcon, NovaSolidBusinessBusinessGraphLine2 as AnalyticsIcon, NovaCompositionNavigationArrowRight as ActionIcon, NovaCompositionCoorpacademyOpenInNewTab as NewTabIcon } from '@coorpacademy/nova-icons';
+import { NovaSolidContentContentBookAdd as CockpitIcon, NovaSolidUsersActionsUser as ManageUserIcon, NovaSolidFilesBasicFileUpload2 as UploadUserIcon, NovaSolidEmailAtSign as ManageEmailIcon, NovaSolidDesignPaintBrush2 as LookAndFeelIcon, NovaSolidContentContentViewList as DashboardIcon, NovaSolidContentEditionFlash as MassiveBattleIcon, NovaSolidApplicationsWindowApplication5 as CmsIcon, NovaSolidBusinessBusinessGraphLine2 as AnalyticsIcon, NovaCompositionNavigationArrowRight as ActionIcon, NovaCompositionCoorpacademyOpenInNewTab as NewTabIcon, NovaLinePhoneMobilePhone as MobilePhone, NovaLineMessagesChatChatBubbleCircleQuestionMark as ChatBubbleCircleQuestionMark, NovaLineNetworkNetworkAlert as NetworkAlert, NovaLineObjectsBinoculars as Binoculaire, NovaLineContentEditionContentBook as ContentBook } from '@coorpacademy/nova-icons';
 import Link from '../../atom/link';
 import style from './style.css';
 
@@ -33,6 +33,21 @@ const getIcon = feature => {
     case 'analytics':
       return AnalyticsIcon;
 
+    case 'binoculaire':
+      return Binoculaire;
+
+    case 'book':
+      return ContentBook;
+
+    case 'network':
+      return NetworkAlert;
+
+    case 'chat-bubble-question':
+      return ChatBubbleCircleQuestionMark;
+
+    case 'mobile-phone':
+      return MobilePhone;
+
     default:
       return CockpitIcon;
   }
@@ -43,37 +58,77 @@ const getBackgroudRadialColors = feature => {
     case 'manage_users':
     case 'upload_users':
       return {
-        iconColor: '#2EC1D6',
-        degrees: '187'
+        iconBackgroundColor: '#2EC1D6',
+        degrees: '187',
+        iconColor: null
       };
 
     case 'look_and_feel':
     case 'dashboard':
       return {
-        iconColor: '#18BB98',
-        degrees: '167'
+        iconBackgroundColor: '#18BB98',
+        degrees: '167',
+        iconColor: null
       };
 
     case 'cockpit':
       return {
-        iconColor: '#FF7043',
-        degrees: '14'
+        iconBackgroundColor: '#FF7043',
+        degrees: '14',
+        iconColor: null
       };
 
     case 'manage_email':
     case 'massive_battle':
     case 'cms':
       return {
-        iconColor: '#7340FF',
-        degrees: '256'
+        iconBackgroundColor: '#7340FF',
+        degrees: '256',
+        iconColor: null
       };
 
     case 'analytics':
       return {
-        iconColor: '#FF4040',
+        iconBackgroundColor: '#FF4040',
+        degrees: '0',
+        iconColor: null
+      };
+
+    case 'binoculaire':
+      return {
+        iconBackgroundColor: '#FFEFEB',
+        iconColor: '#FF541F',
+        degrees: '0'
+      };
+
+    case 'book':
+      return {
+        iconBackgroundColor: '#F1F6FE',
+        degrees: '0',
+        iconColor: '#0061FF'
+      };
+
+    case 'network':
+      return {
+        iconBackgroundColor: '#FFE5E6',
+        iconColor: '#FF0A0A',
         degrees: '0'
       };
 
+    case 'chat-bubble-question':
+      return {
+        iconBackgroundColor: '#E8FCF8',
+        iconColor: '#16AC8C',
+        degrees: '0'
+      };
+
+    case 'mobile-phone':
+      return {
+        iconBackgroundColor: '#F4F0FF',
+        degrees: '0',
+        iconColor: '#5C21FF'
+      };
+
     default:
       return null;
   }
@@ -85,11 +140,13 @@ const QuickAccessCard = (props, context) => {
     description,
     feature,
     href,
-    openInNewTab = false
+    openInNewTab = false,
+    isMoocCard = false
   } = props;
   const {
-    iconColor,
-    degrees
+    iconBackgroundColor,
+    degrees,
+    iconColor
   } = getBackgroudRadialColors(feature);
   const Icon = getIcon(feature);
   const newTabOnClick = openInNewTab ? /*#__PURE__*/React.createElement(NewTabIcon, {
@@ -104,7 +161,7 @@ const QuickAccessCard = (props, context) => {
     target: openInNewTab ? '_blank' : '_self',
     className: style.link
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
+    style: !isMoocCard ? {
       background: `radial-gradient(62.12% 56.45% at 0% 77.29%, 
             hsl(${degrees}deg 68% 40% / 20%) 0%, 
             hsl(${degrees}deg 68% 40% / 0%) 100%), 
@@ -115,32 +172,37 @@ const QuickAccessCard = (props, context) => {
             hsl(${degrees}deg 87% 91%) 0%, 
             hsl(${degrees}deg 87% 91% / 0%) 100%), 
           #FAFAFA`
-    },
+    } : null,
     className: style.content
   }, /*#__PURE__*/React.createElement("div", {
     className: style.iconFeatureWrapper,
     style: {
-      backgroundColor: iconColor
+      backgroundColor: iconBackgroundColor
     }
   }, /*#__PURE__*/React.createElement(Icon, {
-    className: style.iconFeature
+    className: style.iconFeature,
+    style: {
+      color: iconColor
+    }
   })), /*#__PURE__*/React.createElement("div", {
     className: style.title
   }, title, newTabOnClick), /*#__PURE__*/React.createElement("div", {
     className: style.description
   }, description), /*#__PURE__*/React.createElement("div", {
-    className: style.iconGotoWrapper,
-    style: {
-      backgroundColor: iconColor
-    }
+    className: style.cta
+  }, /*#__PURE__*/React.createElement("div", {
+    className: !isMoocCard ? style.iconGotoWrapper : null,
+    style: !isMoocCard ? {
+      backgroundColor: iconBackgroundColor
+    } : null
   }, /*#__PURE__*/React.createElement("div", {
-    className: style.hover,
+    className: isMoocCard ? style.hoverMooc : style.hover,
     style: {
-      color: iconColor
+      color: isMoocCard ? '#FFFFFF' : iconBackgroundColor
     }
   }, /*#__PURE__*/React.createElement(ActionIcon, {
     className: style.iconGoto
-  }))))));
+  })))))));
 };
 
 QuickAccessCard.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -148,7 +210,8 @@ QuickAccessCard.propTypes = process.env.NODE_ENV !== "production" ? {
   description: PropTypes.string,
   href: PropTypes.string,
   openInNewTab: PropTypes.bool,
-  feature: PropTypes.oneOf(['analytics', 'cms', 'cockpit', 'massive_battle', 'manage_email', 'dashboard', 'look_and_feel', 'manage_users', 'upload_users'])
+  isMoocCard: PropTypes.bool,
+  feature: PropTypes.oneOf(['analytics', 'cms', 'cockpit', 'massive_battle', 'manage_email', 'dashboard', 'look_and_feel', 'manage_users', 'upload_users', 'binoculaire', 'book', 'network', 'chat-bubble-question', 'mobile-phone'])
 } : {};
 export default QuickAccessCard;
 //# sourceMappingURL=index.js.map