@coorpacademy/components 11.35.2-alpha.13 → 11.35.2-alpha.4

package/lib/organism/header-with-actions/index.js

@@ -18,6 +18,78 @@ const getDataName = suffix => `header-with-actions-${suffix}`;
 const uncappedMap = _map.default.convert({
   cap: false
 });
+const buildCloseButton = ({
+  onClick,
+  ariaLabel
+}) => {
+  return {
+    size: 'default',
+    icon: 'close',
+    'data-name': 'close-button',
+    'aria-label': ariaLabel,
+    onClick
+  };
+};
+const buildButtonMenu = ({
+  dataName,
+  label,
+  iconName,
+  iconColor,
+  onClick
+}) => {
+  return {
+    'data-name': dataName,
+    label,
+    buttonLinkType: 'tertiary',
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: iconName,
+        color: iconColor,
+        size: 14,
+        customStyle: {
+          padding: 0
+        }
+      }
+    },
+    onClick,
+    type: 'defaultLeft'
+  };
+};
+const buildActionButton = ({
+  type,
+  label,
+  onClick,
+  disabled,
+  iconName,
+  iconColor
+}) => {
+  return {
+    type,
+    label,
+    onClick,
+    disabled,
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: iconName,
+        color: iconColor,
+        size: 14,
+        customStyle: {
+          padding: 0
+        }
+      }
+    },
+    customStyle: {
+      fontWeight: '600',
+      borderRadius: '12px',
+      padding: '0 8px 0 16px'
+    }
+  };
+};
+const isButtonActionProps = action => {
+  return typeof action.iconName === 'string' && typeof action.iconColor === 'string';
+};
 const HeaderWithActions = props => {
   const {
     closeButton,
@@ -27,13 +99,23 @@ const HeaderWithActions = props => {
     bulletPointMenuButton,
     actionButtons
   } = props;
+  const renderedActionButtons = uncappedMap((action, key) => {
+    return isButtonActionProps(action) ? /*#__PURE__*/_react.default.createElement(_buttonLink.default, _extends({}, buildActionButton(action), {
+      key: key
+    })) : /*#__PURE__*/_react.default.createElement(_buttonLink.default, _extends({}, action, {
+      key: key
+    }));
+  }, actionButtons);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.headerWrapper,
     "data-name": getDataName('wrapper')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.titleAndButtonWrapper,
     "data-name": getDataName('title-and-button-wrapper')
-  }, /*#__PURE__*/_react.default.createElement(_buttonLinkIcon.default, _extends({}, closeButton, {
+  }, /*#__PURE__*/_react.default.createElement(_buttonLinkIcon.default, _extends({}, buildCloseButton({
+    onClick: closeButton.onClick,
+    ariaLabel: closeButton['aria-label']
+  }), {
     className: _style.default.button
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.titleWrapper
@@ -49,12 +131,8 @@ const HeaderWithActions = props => {
     className: _style.default.buttonsWrapper,
     "data-name": getDataName('buttons-wrapper')
   }, bulletPointMenuButton && !(0, _isEmpty.default)(bulletPointMenuButton.buttons) ? /*#__PURE__*/_react.default.createElement(_bulletPointMenuButton.default, _extends({}, bulletPointMenuButton, {
-    buttonAriaLabel: "More actions"
-  })) : null, uncappedMap((action, key) => {
-    return /*#__PURE__*/_react.default.createElement(_buttonLink.default, _extends({}, action, {
-      key: key
-    }));
-  }, actionButtons)));
+    buttons: uncappedMap(buildButtonMenu, bulletPointMenuButton.buttons)
+  })) : null, renderedActionButtons));
 };
 HeaderWithActions.propTypes = process.env.NODE_ENV !== "production" ? _types.default : {};
 var _default = exports.default = HeaderWithActions;

package/lib/organism/header-with-actions/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_isEmpty","_map","_buttonLink","_buttonLinkIcon","_tag","_bulletPointMenuButton","_types","_style","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","getDataName","suffix","uncappedMap","map","convert","cap","HeaderWithActions","props","closeButton","title","tag","saveStatus","bulletPointMenuButton","actionButtons","createElement","className","style","headerWrapper","titleAndButtonWrapper","button","titleWrapper","statusWrapper","display","label","buttonsWrapper","isEmpty","buttons","buttonAriaLabel","action","key","propTypes","process","env","NODE_ENV","headerWithActionsPropTypes","_default","exports"],"sources":["../../../src/organism/header-with-actions/index.tsx"],"sourcesContent":["import React from 'react';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport map from 'lodash/fp/map';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Tag from '../../atom/tag';\nimport {ButtonLinkProps} from '../../atom/button-link/types';\nimport BulletPointMenuButton from '../../molecule/bullet-point-menu-button';\nimport headerWithActionsPropTypes, {HeaderWithActionsProps} from './types';\nimport style from './style.css';\n\nconst getDataName = (suffix: string) => `header-with-actions-${suffix}`;\n// @ts-expect-error (need to get the index)\nconst uncappedMap = map.convert({cap: false});\n\nconst HeaderWithActions = (props: HeaderWithActionsProps) => {\n  const {closeButton, title, tag, saveStatus, bulletPointMenuButton, actionButtons} = props;\n\n  return (\n    <div className={style.headerWrapper} data-name={getDataName('wrapper')}>\n      <div\n        className={style.titleAndButtonWrapper}\n        data-name={getDataName('title-and-button-wrapper')}\n      >\n        <ButtonLinkIcon {...closeButton} className={style.button} />\n        <div className={style.titleWrapper}>\n          <div className={style.statusWrapper}>\n            <Tag {...tag} />\n            {saveStatus.display && saveStatus.label ? (\n              <p className={style.saveStatus}>{saveStatus.label}</p>\n            ) : null}\n          </div>\n          <h3 className={style.title} aria-label={title} data-name={getDataName('title')}>\n            {title}\n          </h3>\n        </div>\n      </div>\n      <div className={style.buttonsWrapper} data-name={getDataName('buttons-wrapper')}>\n        {bulletPointMenuButton && !isEmpty(bulletPointMenuButton.buttons) ? (\n          <BulletPointMenuButton {...bulletPointMenuButton} buttonAriaLabel=\"More actions\" />\n        ) : null}\n        {uncappedMap((action: ButtonLinkProps, key: string) => {\n          return <ButtonLink {...action} key={key} />;\n        }, actionButtons)}\n      </div>\n    </div>\n  );\n};\n\nHeaderWithActions.propTypes = headerWithActionsPropTypes;\n\nexport default HeaderWithActions;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_isEmpty","_map","_buttonLink","_buttonLinkIcon","_tag","_bulletPointMenuButton","_types","_style","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","getDataName","suffix","uncappedMap","map","convert","cap","buildCloseButton","onClick","ariaLabel","size","icon","buildButtonMenu","dataName","label","iconName","iconColor","buttonLinkType","position","faIcon","name","color","customStyle","padding","type","buildActionButton","disabled","fontWeight","borderRadius","isButtonActionProps","action","HeaderWithActions","props","closeButton","title","tag","saveStatus","bulletPointMenuButton","actionButtons","renderedActionButtons","key","createElement","className","style","headerWrapper","titleAndButtonWrapper","button","titleWrapper","statusWrapper","display","buttonsWrapper","isEmpty","buttons","propTypes","process","env","NODE_ENV","headerWithActionsPropTypes","_default","exports"],"sources":["../../../src/organism/header-with-actions/index.tsx"],"sourcesContent":["import React from 'react';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport map from 'lodash/fp/map';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Tag from '../../atom/tag';\nimport {ButtonLinkProps} from '../../atom/button-link/types';\nimport BulletPointMenuButton from '../../molecule/bullet-point-menu-button';\nimport headerWithActionsPropTypes, {\n  HeaderWithActionsProps,\n  ButtonMenuProps,\n  ButtonActionProps\n} from './types';\nimport style from './style.css';\n\nconst getDataName = (suffix: string) => `header-with-actions-${suffix}`;\n// @ts-expect-error (need to get the index)\nconst uncappedMap = map.convert({cap: false});\n\nconst buildCloseButton = ({onClick, ariaLabel}: {onClick: () => void; ariaLabel: string}) => {\n  return {\n    size: 'default',\n    icon: 'close',\n    'data-name': 'close-button',\n    'aria-label': ariaLabel,\n    onClick\n  };\n};\n\nconst buildButtonMenu = ({dataName, label, iconName, iconColor, onClick}: ButtonMenuProps) => {\n  return {\n    'data-name': dataName,\n    label,\n    buttonLinkType: 'tertiary',\n    icon: {\n      position: 'left' as const,\n      faIcon: {\n        name: iconName,\n        color: iconColor,\n        size: 14,\n        customStyle: {padding: 0}\n      }\n    },\n    onClick,\n    type: 'defaultLeft'\n  };\n};\n\nconst buildActionButton = ({\n  type,\n  label,\n  onClick,\n  disabled,\n  iconName,\n  iconColor\n}: ButtonActionProps) => {\n  return {\n    type,\n    label,\n    onClick,\n    disabled,\n    icon: {\n      position: 'left' as const,\n      faIcon: {\n        name: iconName,\n        color: iconColor,\n        size: 14,\n        customStyle: {padding: 0}\n      }\n    },\n    customStyle: {\n      fontWeight: '600',\n      borderRadius: '12px',\n      padding: '0 8px 0 16px'\n    }\n  };\n};\n\nconst isButtonActionProps = (action: any): action is ButtonActionProps => {\n  return typeof action.iconName === 'string' && typeof action.iconColor === 'string';\n};\n\nconst HeaderWithActions = (props: HeaderWithActionsProps) => {\n  const {closeButton, title, tag, saveStatus, bulletPointMenuButton, actionButtons} = props;\n\n  const renderedActionButtons = uncappedMap(\n    (action: ButtonLinkProps | ButtonActionProps, key: string) => {\n      return isButtonActionProps(action) ? (\n        <ButtonLink {...buildActionButton(action)} key={key} />\n      ) : (\n        <ButtonLink {...action} key={key} />\n      );\n    },\n    actionButtons\n  );\n\n  return (\n    <div className={style.headerWrapper} data-name={getDataName('wrapper')}>\n      <div\n        className={style.titleAndButtonWrapper}\n        data-name={getDataName('title-and-button-wrapper')}\n      >\n        <ButtonLinkIcon\n          {...buildCloseButton({\n            onClick: closeButton.onClick,\n            ariaLabel: closeButton['aria-label']\n          })}\n          className={style.button}\n        />\n        <div className={style.titleWrapper}>\n          <div className={style.statusWrapper}>\n            <Tag {...tag} />\n            {saveStatus.display && saveStatus.label ? (\n              <p className={style.saveStatus}>{saveStatus.label}</p>\n            ) : null}\n          </div>\n          <h3 className={style.title} aria-label={title} data-name={getDataName('title')}>\n            {title}\n          </h3>\n        </div>\n      </div>\n      <div className={style.buttonsWrapper} data-name={getDataName('buttons-wrapper')}>\n        {bulletPointMenuButton && !isEmpty(bulletPointMenuButton.buttons) ? (\n          <BulletPointMenuButton\n            {...bulletPointMenuButton}\n            buttons={uncappedMap(buildButtonMenu, bulletPointMenuButton.buttons)}\n          />\n        ) : null}\n        {renderedActionButtons}\n      </div>\n    </div>\n  );\n};\n\nHeaderWithActions.propTypes = headerWithActionsPropTypes;\n\nexport default HeaderWithActions;\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,IAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,WAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,eAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,IAAA,GAAAN,sBAAA,CAAAC,OAAA;AAEA,IAAAM,sBAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,MAAA,GAAAR,sBAAA,CAAAC,OAAA;AAKA,IAAAQ,MAAA,GAAAT,sBAAA,CAAAC,OAAA;AAAgC,SAAAD,uBAAAU,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,SAAA,WAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,CAAA,aAAAP,CAAA,MAAAA,CAAA,GAAAQ,SAAA,CAAAC,MAAA,EAAAT,CAAA,UAAAU,CAAA,GAAAF,SAAA,CAAAR,CAAA,YAAAW,CAAA,IAAAD,CAAA,OAAAE,cAAA,CAAAC,IAAA,CAAAH,CAAA,EAAAC,CAAA,MAAAJ,CAAA,CAAAI,CAAA,IAAAD,CAAA,CAAAC,CAAA,aAAAJ,CAAA,KAAAJ,QAAA,CAAAW,KAAA,OAAAN,SAAA;AAEhC,MAAMO,WAAW,GAAIC,MAAc,IAAK,uBAAuBA,MAAM,EAAE;AACvE;AACA,MAAMC,WAAW,GAAGC,YAAG,CAACC,OAAO,CAAC;EAACC,GAAG,EAAE;AAAK,CAAC,CAAC;AAE7C,MAAMC,gBAAgB,GAAGA,CAAC;EAACC,OAAO;EAAEC;AAAmD,CAAC,KAAK;EAC3F,OAAO;IACLC,IAAI,EAAE,SAAS;IACfC,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,cAAc;IAC3B,YAAY,EAAEF,SAAS;IACvBD;EACF,CAAC;AACH,CAAC;AAED,MAAMI,eAAe,GAAGA,CAAC;EAACC,QAAQ;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,SAAS;EAAER;AAAwB,CAAC,KAAK;EAC5F,OAAO;IACL,WAAW,EAAEK,QAAQ;IACrBC,KAAK;IACLG,cAAc,EAAE,UAAU;IAC1BN,IAAI,EAAE;MACJO,QAAQ,EAAE,MAAe;MACzBC,MAAM,EAAE;QACNC,IAAI,EAAEL,QAAQ;QACdM,KAAK,EAAEL,SAAS;QAChBN,IAAI,EAAE,EAAE;QACRY,WAAW,EAAE;UAACC,OAAO,EAAE;QAAC;MAC1B;IACF,CAAC;IACDf,OAAO;IACPgB,IAAI,EAAE;EACR,CAAC;AACH,CAAC;AAED,MAAMC,iBAAiB,GAAGA,CAAC;EACzBD,IAAI;EACJV,KAAK;EACLN,OAAO;EACPkB,QAAQ;EACRX,QAAQ;EACRC;AACiB,CAAC,KAAK;EACvB,OAAO;IACLQ,IAAI;IACJV,KAAK;IACLN,OAAO;IACPkB,QAAQ;IACRf,IAAI,EAAE;MACJO,QAAQ,EAAE,MAAe;MACzBC,MAAM,EAAE;QACNC,IAAI,EAAEL,QAAQ;QACdM,KAAK,EAAEL,SAAS;QAChBN,IAAI,EAAE,EAAE;QACRY,WAAW,EAAE;UAACC,OAAO,EAAE;QAAC;MAC1B;IACF,CAAC;IACDD,WAAW,EAAE;MACXK,UAAU,EAAE,KAAK;MACjBC,YAAY,EAAE,MAAM;MACpBL,OAAO,EAAE;IACX;EACF,CAAC;AACH,CAAC;AAED,MAAMM,mBAAmB,GAAIC,MAAW,IAAkC;EACxE,OAAO,OAAOA,MAAM,CAACf,QAAQ,KAAK,QAAQ,IAAI,OAAOe,MAAM,CAACd,SAAS,KAAK,QAAQ;AACpF,CAAC;AAED,MAAMe,iBAAiB,GAAIC,KAA6B,IAAK;EAC3D,MAAM;IAACC,WAAW;IAAEC,KAAK;IAAEC,GAAG;IAAEC,UAAU;IAAEC,qBAAqB;IAAEC;EAAa,CAAC,GAAGN,KAAK;EAEzF,MAAMO,qBAAqB,GAAGpC,WAAW,CACvC,CAAC2B,MAA2C,EAAEU,GAAW,KAAK;IAC5D,OAAOX,mBAAmB,CAACC,MAAM,CAAC,gBAChCvD,MAAA,CAAAa,OAAA,CAAAqD,aAAA,CAAC7D,WAAA,CAAAQ,OAAU,EAAAC,QAAA,KAAKoC,iBAAiB,CAACK,MAAM,CAAC;MAAEU,GAAG,EAAEA;IAAI,EAAE,CAAC,gBAEvDjE,MAAA,CAAAa,OAAA,CAAAqD,aAAA,CAAC7D,WAAA,CAAAQ,OAAU,EAAAC,QAAA,KAAKyC,MAAM;MAAEU,GAAG,EAAEA;IAAI,EAAE,CACpC;EACH,CAAC,EACDF,aACF,CAAC;EAED,oBACE/D,MAAA,CAAAa,OAAA,CAAAqD,aAAA;IAAKC,SAAS,EAAEC,cAAK,CAACC,aAAc;IAAC,aAAW3C,WAAW,CAAC,SAAS;EAAE,gBACrE1B,MAAA,CAAAa,OAAA,CAAAqD,aAAA;IACEC,SAAS,EAAEC,cAAK,CAACE,qBAAsB;IACvC,aAAW5C,WAAW,CAAC,0BAA0B;EAAE,gBAEnD1B,MAAA,CAAAa,OAAA,CAAAqD,aAAA,CAAC5D,eAAA,CAAAO,OAAc,EAAAC,QAAA,KACTkB,gBAAgB,CAAC;IACnBC,OAAO,EAAEyB,WAAW,CAACzB,OAAO;IAC5BC,SAAS,EAAEwB,WAAW,CAAC,YAAY;EACrC,CAAC,CAAC;IACFS,SAAS,EAAEC,cAAK,CAACG;EAAO,EACzB,CAAC,eACFvE,MAAA,CAAAa,OAAA,CAAAqD,aAAA;IAAKC,SAAS,EAAEC,cAAK,CAACI;EAAa,gBACjCxE,MAAA,CAAAa,OAAA,CAAAqD,aAAA;IAAKC,SAAS,EAAEC,cAAK,CAACK;EAAc,gBAClCzE,MAAA,CAAAa,OAAA,CAAAqD,aAAA,CAAC3D,IAAA,CAAAM,OAAG,EAAK+C,GAAM,CAAC,EACfC,UAAU,CAACa,OAAO,IAAIb,UAAU,CAACtB,KAAK,gBACrCvC,MAAA,CAAAa,OAAA,CAAAqD,aAAA;IAAGC,SAAS,EAAEC,cAAK,CAACP;EAAW,GAAEA,UAAU,CAACtB,KAAS,CAAC,GACpD,IACD,CAAC,eACNvC,MAAA,CAAAa,OAAA,CAAAqD,aAAA;IAAIC,SAAS,EAAEC,cAAK,CAACT,KAAM;IAAC,cAAYA,KAAM;IAAC,aAAWjC,WAAW,CAAC,OAAO;EAAE,GAC5EiC,KACC,CACD,CACF,CAAC,eACN3D,MAAA,CAAAa,OAAA,CAAAqD,aAAA;IAAKC,SAAS,EAAEC,cAAK,CAACO,cAAe;IAAC,aAAWjD,WAAW,CAAC,iBAAiB;EAAE,GAC7EoC,qBAAqB,IAAI,CAAC,IAAAc,gBAAO,EAACd,qBAAqB,CAACe,OAAO,CAAC,gBAC/D7E,MAAA,CAAAa,OAAA,CAAAqD,aAAA,CAAC1D,sBAAA,CAAAK,OAAqB,EAAAC,QAAA,KAChBgD,qBAAqB;IACzBe,OAAO,EAAEjD,WAAW,CAACS,eAAe,EAAEyB,qBAAqB,CAACe,OAAO;EAAE,EACtE,CAAC,GACA,IAAI,EACPb,qBACE,CACF,CAAC;AAEV,CAAC;AAEDR,iBAAiB,CAACsB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAGC,cAA0B;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAvE,OAAA,GAE1C2C,iBAAiB","ignoreList":[]}

package/lib/organism/header-with-actions/types.d.ts

@@ -3,10 +3,7 @@ import { BulletPointMenuButtonProps } from '../../molecule/bullet-point-menu-but
 import { ButtonLinkProps } from '../../atom/button-link/types';
 declare const headerWithActionsPropTypes: {
     closeButton: PropTypes.Requireable<PropTypes.InferProps<{
-        size: PropTypes.Validator<string>;
-        icon: PropTypes.Validator<string>;
-        'data-name': PropTypes.Validator<string>;
-        'aria-label': PropTypes.Validator<string>;
+        'aria-label': PropTypes.Requireable<string>;
         onClick: PropTypes.Validator<(...args: any[]) => any>;
     }>>;
     title: PropTypes.Validator<string>;
@@ -19,7 +16,7 @@ declare const headerWithActionsPropTypes: {
         display: PropTypes.Validator<boolean>;
         label: PropTypes.Requireable<string>;
     }>>>;
-    bulletPointMenuButton: PropTypes.Requireable<PropTypes.InferProps<{
+    bulletPointMenuButtonPropTypes: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
         'data-name': PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
         buttonAriaLabel: PropTypes.Requireable<string>;
@@ -52,8 +49,18 @@ declare const headerWithActionsPropTypes: {
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         menuButtonClassName: PropTypes.Requireable<string>;
         isBulkMenu: PropTypes.Requireable<boolean>;
-    }>>;
-    actionButtons: PropTypes.Validator<(PropTypes.InferProps<{
+    }> | PropTypes.InferProps<{
+        buttons: PropTypes.Validator<(PropTypes.InferProps<{
+            dataName: PropTypes.Requireable<string>;
+            label: PropTypes.Validator<string>;
+            iconName: PropTypes.Validator<string>;
+            iconColor: PropTypes.Validator<string>;
+            onClick: PropTypes.Validator<(...args: any[]) => any>;
+        }> | null | undefined)[]>;
+        onClick: PropTypes.Validator<(...args: any[]) => any>;
+        buttonAriaLabel: PropTypes.Requireable<string>;
+    }> | null | undefined>>;
+    actionButtons: PropTypes.Validator<NonNullable<NonNullable<(PropTypes.InferProps<{
         type: PropTypes.Requireable<string>;
         usage: PropTypes.Requireable<string>;
         label: PropTypes.Requireable<string>;
@@ -89,7 +96,14 @@ declare const headerWithActionsPropTypes: {
         customStyle: PropTypes.Requireable<{
             [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
         }>;
-    }> | null | undefined)[]>;
+    }> | null | undefined)[] | (PropTypes.InferProps<{
+        type: PropTypes.Validator<string>;
+        label: PropTypes.Validator<string>;
+        onClick: PropTypes.Validator<(...args: any[]) => any>;
+        disabled: PropTypes.Requireable<boolean>;
+        iconName: PropTypes.Validator<string>;
+        iconColor: PropTypes.Validator<string>;
+    }> | null | undefined)[] | null | undefined>>>;
 };
 export default headerWithActionsPropTypes;
 declare type TagProps = {
@@ -102,19 +116,36 @@ declare type SaveStatusProps = {
     label?: 'Unsaved changes' | 'Saved';
 };
 declare type CloseButtonProps = {
-    size: 'default' | 'small' | 'responsive';
-    icon: string;
-    'data-name': string;
     'aria-label': string;
     onClick: () => void;
 };
+export declare type ButtonMenuProps = {
+    dataName: string;
+    label: string;
+    iconName: string;
+    iconColor: string;
+    onClick: () => void;
+};
+declare type BulletPointMenuButtonCustomProps = {
+    buttons: ButtonMenuProps[];
+    onClick: () => void;
+    buttonAriaLabel: string;
+};
+export declare type ButtonActionProps = {
+    type: 'primary' | 'secondary';
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    iconName: string;
+    iconColor: string;
+};
 export declare type HeaderWithActionsProps = {
     closeButton: CloseButtonProps;
     title: string;
     tag: TagProps;
     saveStatus: SaveStatusProps;
-    actionButtons: ButtonLinkProps[];
-    bulletPointMenuButton?: BulletPointMenuButtonProps;
+    actionButtons: ButtonLinkProps[] | ButtonActionProps[];
+    bulletPointMenuButton?: BulletPointMenuButtonProps | BulletPointMenuButtonCustomProps;
 };
 export declare type HeaderWithActionsPropsFixture = {
     props: HeaderWithActionsProps;

package/lib/organism/header-with-actions/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/organism/header-with-actions/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAuC,EACrC,0BAA0B,EAC3B,MAAM,+CAA+C,CAAC;AACvD,OAA4B,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AASlF,QAAA,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAc/B,CAAC;AAEF,eAAe,0BAA0B,CAAC;AAE1C,aAAK,QAAQ,GAAG;IACd,KAAK,EAAE,WAAW,GAAG,iBAAiB,GAAG,OAAO,GAAG,UAAU,CAAC;IAC9D,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACzC,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,aAAK,eAAe,GAAG;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC;CACrC,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,YAAY,CAAC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACnC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,QAAQ,CAAC;IACd,UAAU,EAAE,eAAe,CAAC;IAC5B,aAAa,EAAE,eAAe,EAAE,CAAC;IACjC,qBAAqB,CAAC,EAAE,0BAA0B,CAAC;CACpD,CAAC;AAEF,oBAAY,6BAA6B,GAAG;IAAC,KAAK,EAAE,sBAAsB,CAAA;CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/organism/header-with-actions/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAuC,EACrC,0BAA0B,EAC3B,MAAM,+CAA+C,CAAC;AACvD,OAA4B,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAwBlF,QAAA,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwB/B,CAAC;AAEF,eAAe,0BAA0B,CAAC;AAE1C,aAAK,QAAQ,GAAG;IACd,KAAK,EAAE,WAAW,GAAG,iBAAiB,GAAG,OAAO,GAAG,UAAU,CAAC;IAC9D,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACzC,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,aAAK,eAAe,GAAG;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC;CACrC,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,aAAK,gCAAgC,GAAG;IACtC,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,oBAAY,iBAAiB,GAAG;IAC9B,IAAI,EAAE,SAAS,GAAG,WAAW,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACnC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,QAAQ,CAAC;IACd,UAAU,EAAE,eAAe,CAAC;IAC5B,aAAa,EAAE,eAAe,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACvD,qBAAqB,CAAC,EAAE,0BAA0B,GAAG,gCAAgC,CAAC;CACvF,CAAC;AAEF,oBAAY,6BAA6B,GAAG;IAAC,KAAK,EAAE,sBAAsB,CAAA;CAAC,CAAC"}

package/lib/organism/header-with-actions/types.js

@@ -7,12 +7,24 @@ var _types = _interopRequireDefault(require("../../molecule/bullet-point-menu-bu
 var _types2 = _interopRequireDefault(require("../../atom/button-link/types"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const closeButtonPropTypes = {
-  size: _propTypes.default.oneOf(['default', 'small', 'responsive']).isRequired,
-  icon: _propTypes.default.string.isRequired,
-  'data-name': _propTypes.default.string.isRequired,
-  'aria-label': _propTypes.default.string.isRequired,
+  'aria-label': _propTypes.default.string,
   onClick: _propTypes.default.func.isRequired
 };
+const ButtonMenuPropTypes = {
+  dataName: _propTypes.default.string,
+  label: _propTypes.default.string.isRequired,
+  iconName: _propTypes.default.string.isRequired,
+  iconColor: _propTypes.default.string.isRequired,
+  onClick: _propTypes.default.func.isRequired
+};
+const ButtonActionPropTypes = {
+  type: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string.isRequired,
+  onClick: _propTypes.default.func.isRequired,
+  disabled: _propTypes.default.bool,
+  iconName: _propTypes.default.string.isRequired,
+  iconColor: _propTypes.default.string.isRequired
+};
 const headerWithActionsPropTypes = {
   closeButton: _propTypes.default.shape(closeButtonPropTypes),
   title: _propTypes.default.string.isRequired,
@@ -25,8 +37,12 @@ const headerWithActionsPropTypes = {
     display: _propTypes.default.bool.isRequired,
     label: _propTypes.default.oneOf(['Unsaved changes', 'Saved'])
   }).isRequired,
-  bulletPointMenuButton: _propTypes.default.shape(_types.default),
-  actionButtons: _propTypes.default.arrayOf(_propTypes.default.shape(_types2.default)).isRequired
+  bulletPointMenuButtonPropTypes: _propTypes.default.oneOfType([_propTypes.default.shape(_types.default), _propTypes.default.shape({
+    buttons: _propTypes.default.arrayOf(_propTypes.default.shape(ButtonMenuPropTypes)).isRequired,
+    onClick: _propTypes.default.func.isRequired,
+    buttonAriaLabel: _propTypes.default.string
+  })]),
+  actionButtons: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape(_types2.default)), _propTypes.default.arrayOf(_propTypes.default.shape(ButtonActionPropTypes))]).isRequired
 };
 var _default = exports.default = headerWithActionsPropTypes;
 //# sourceMappingURL=types.js.map

package/lib/organism/header-with-actions/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["_propTypes","_interopRequireDefault","require","_types","_types2","e","__esModule","default","closeButtonPropTypes","size","PropTypes","oneOf","isRequired","icon","string","onClick","func","headerWithActionsPropTypes","closeButton","shape","title","tag","label","type","saveStatus","display","bool","bulletPointMenuButton","bulletPointMenuButtonPropTypes","actionButtons","arrayOf","ButtonLinkPropTypes","_default","exports"],"sources":["../../../src/organism/header-with-actions/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport bulletPointMenuButtonPropTypes, {\n  BulletPointMenuButtonProps\n} from '../../molecule/bullet-point-menu-button/types';\nimport ButtonLinkPropTypes, {ButtonLinkProps} from '../../atom/button-link/types';\n\nconst closeButtonPropTypes = {\n  size: PropTypes.oneOf(['default', 'small', 'responsive']).isRequired,\n  icon: PropTypes.string.isRequired,\n  'data-name': PropTypes.string.isRequired,\n  'aria-label': PropTypes.string.isRequired,\n  onClick: PropTypes.func.isRequired\n};\nconst headerWithActionsPropTypes = {\n  closeButton: PropTypes.shape(closeButtonPropTypes),\n  title: PropTypes.string.isRequired,\n  tag: PropTypes.shape({\n    label: PropTypes.oneOf(['Published', 'Ongoing changes', 'Draft', 'Archived']).isRequired,\n    type: PropTypes.oneOf(['success', 'progress', 'warning']).isRequired,\n    size: PropTypes.string.isRequired\n  }).isRequired,\n  saveStatus: PropTypes.shape({\n    display: PropTypes.bool.isRequired,\n    label: PropTypes.oneOf(['Unsaved changes', 'Saved'])\n  }).isRequired,\n  bulletPointMenuButton: PropTypes.shape(bulletPointMenuButtonPropTypes),\n  actionButtons: PropTypes.arrayOf(PropTypes.shape(ButtonLinkPropTypes)).isRequired\n};\n\nexport default headerWithActionsPropTypes;\n\ntype TagProps = {\n  label: 'Published' | 'Ongoing changes' | 'Draft' | 'Archived';\n  type: 'success' | 'progress' | 'warning';\n  size: string;\n};\n\ntype SaveStatusProps = {\n  display: boolean;\n  label?: 'Unsaved changes' | 'Saved';\n};\n\ntype CloseButtonProps = {\n  size: 'default' | 'small' | 'responsive';\n  icon: string;\n  'data-name': string;\n  'aria-label': string;\n  onClick: () => void;\n};\n\nexport type HeaderWithActionsProps = {\n  closeButton: CloseButtonProps;\n  title: string;\n  tag: TagProps;\n  saveStatus: SaveStatusProps;\n  actionButtons: ButtonLinkProps[];\n  bulletPointMenuButton?: BulletPointMenuButtonProps;\n};\n\nexport type HeaderWithActionsPropsFixture = {props: HeaderWithActionsProps};\n"],"mappings":";;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AAGA,IAAAE,OAAA,GAAAH,sBAAA,CAAAC,OAAA;AAAkF,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAElF,MAAMG,oBAAoB,GAAG;EAC3BC,IAAI,EAAEC,kBAAS,CAACC,KAAK,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC,CAACC,UAAU;EACpEC,IAAI,EAAEH,kBAAS,CAACI,MAAM,CAACF,UAAU;EACjC,WAAW,EAAEF,kBAAS,CAACI,MAAM,CAACF,UAAU;EACxC,YAAY,EAAEF,kBAAS,CAACI,MAAM,CAACF,UAAU;EACzCG,OAAO,EAAEL,kBAAS,CAACM,IAAI,CAACJ;AAC1B,CAAC;AACD,MAAMK,0BAA0B,GAAG;EACjCC,WAAW,EAAER,kBAAS,CAACS,KAAK,CAACX,oBAAoB,CAAC;EAClDY,KAAK,EAAEV,kBAAS,CAACI,MAAM,CAACF,UAAU;EAClCS,GAAG,EAAEX,kBAAS,CAACS,KAAK,CAAC;IACnBG,KAAK,EAAEZ,kBAAS,CAACC,KAAK,CAAC,CAAC,WAAW,EAAE,iBAAiB,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,CAACC,UAAU;IACxFW,IAAI,EAAEb,kBAAS,CAACC,KAAK,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAACC,UAAU;IACpEH,IAAI,EAAEC,kBAAS,CAACI,MAAM,CAACF;EACzB,CAAC,CAAC,CAACA,UAAU;EACbY,UAAU,EAAEd,kBAAS,CAACS,KAAK,CAAC;IAC1BM,OAAO,EAAEf,kBAAS,CAACgB,IAAI,CAACd,UAAU;IAClCU,KAAK,EAAEZ,kBAAS,CAACC,KAAK,CAAC,CAAC,iBAAiB,EAAE,OAAO,CAAC;EACrD,CAAC,CAAC,CAACC,UAAU;EACbe,qBAAqB,EAAEjB,kBAAS,CAACS,KAAK,CAACS,cAA8B,CAAC;EACtEC,aAAa,EAAEnB,kBAAS,CAACoB,OAAO,CAACpB,kBAAS,CAACS,KAAK,CAACY,eAAmB,CAAC,CAAC,CAACnB;AACzE,CAAC;AAAC,IAAAoB,QAAA,GAAAC,OAAA,CAAA1B,OAAA,GAEaU,0BAA0B","ignoreList":[]}
+{"version":3,"file":"types.js","names":["_propTypes","_interopRequireDefault","require","_types","_types2","e","__esModule","default","closeButtonPropTypes","PropTypes","string","onClick","func","isRequired","ButtonMenuPropTypes","dataName","label","iconName","iconColor","ButtonActionPropTypes","type","disabled","bool","headerWithActionsPropTypes","closeButton","shape","title","tag","oneOf","size","saveStatus","display","bulletPointMenuButtonPropTypes","oneOfType","buttons","arrayOf","buttonAriaLabel","actionButtons","ButtonLinkPropTypes","_default","exports"],"sources":["../../../src/organism/header-with-actions/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport bulletPointMenuButtonPropTypes, {\n  BulletPointMenuButtonProps\n} from '../../molecule/bullet-point-menu-button/types';\nimport ButtonLinkPropTypes, {ButtonLinkProps} from '../../atom/button-link/types';\n\nconst closeButtonPropTypes = {\n  'aria-label': PropTypes.string,\n  onClick: PropTypes.func.isRequired\n};\n\nconst ButtonMenuPropTypes = {\n  dataName: PropTypes.string,\n  label: PropTypes.string.isRequired,\n  iconName: PropTypes.string.isRequired,\n  iconColor: PropTypes.string.isRequired,\n  onClick: PropTypes.func.isRequired\n};\n\nconst ButtonActionPropTypes = {\n  type: PropTypes.string.isRequired,\n  label: PropTypes.string.isRequired,\n  onClick: PropTypes.func.isRequired,\n  disabled: PropTypes.bool,\n  iconName: PropTypes.string.isRequired,\n  iconColor: PropTypes.string.isRequired\n};\n\nconst headerWithActionsPropTypes = {\n  closeButton: PropTypes.shape(closeButtonPropTypes),\n  title: PropTypes.string.isRequired,\n  tag: PropTypes.shape({\n    label: PropTypes.oneOf(['Published', 'Ongoing changes', 'Draft', 'Archived']).isRequired,\n    type: PropTypes.oneOf(['success', 'progress', 'warning']).isRequired,\n    size: PropTypes.string.isRequired\n  }).isRequired,\n  saveStatus: PropTypes.shape({\n    display: PropTypes.bool.isRequired,\n    label: PropTypes.oneOf(['Unsaved changes', 'Saved'])\n  }).isRequired,\n  bulletPointMenuButtonPropTypes: PropTypes.oneOfType([\n    PropTypes.shape(bulletPointMenuButtonPropTypes),\n    PropTypes.shape({\n      buttons: PropTypes.arrayOf(PropTypes.shape(ButtonMenuPropTypes)).isRequired,\n      onClick: PropTypes.func.isRequired,\n      buttonAriaLabel: PropTypes.string\n    })\n  ]),\n  actionButtons: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.shape(ButtonLinkPropTypes)),\n    PropTypes.arrayOf(PropTypes.shape(ButtonActionPropTypes))\n  ]).isRequired\n};\n\nexport default headerWithActionsPropTypes;\n\ntype TagProps = {\n  label: 'Published' | 'Ongoing changes' | 'Draft' | 'Archived';\n  type: 'success' | 'progress' | 'warning';\n  size: string;\n};\n\ntype SaveStatusProps = {\n  display: boolean;\n  label?: 'Unsaved changes' | 'Saved';\n};\n\ntype CloseButtonProps = {\n  'aria-label': string;\n  onClick: () => void;\n};\n\nexport type ButtonMenuProps = {\n  dataName: string;\n  label: string;\n  iconName: string;\n  iconColor: string;\n  onClick: () => void;\n};\n\ntype BulletPointMenuButtonCustomProps = {\n  buttons: ButtonMenuProps[];\n  onClick: () => void;\n  buttonAriaLabel: string;\n};\n\nexport type ButtonActionProps = {\n  type: 'primary' | 'secondary';\n  label: string;\n  onClick: () => void;\n  disabled?: boolean;\n  iconName: string;\n  iconColor: string;\n};\n\nexport type HeaderWithActionsProps = {\n  closeButton: CloseButtonProps;\n  title: string;\n  tag: TagProps;\n  saveStatus: SaveStatusProps;\n  actionButtons: ButtonLinkProps[] | ButtonActionProps[];\n  bulletPointMenuButton?: BulletPointMenuButtonProps | BulletPointMenuButtonCustomProps;\n};\n\nexport type HeaderWithActionsPropsFixture = {props: HeaderWithActionsProps};\n"],"mappings":"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","ignoreList":[]}

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

@@ -146,6 +146,7 @@
   font-size: 14px;
   font-weight: 600;
   line-height: 20px;
+  cursor: pointer;
   margin-top: 32px;
   width: auto;
 }

package/lib/organism/mooc-header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/mooc-header/index.js"],"names":[],"mappings":";AAuBA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA+FE;IAEF;;;;;;;;;;;;;;;;;;;;;;;MAGE;IAEF,wBAwBC;IAtBC;;;;;;MAMC;IAgDH,6BAIC;IAED,yBAGC;IAxBD,qCAQC;IAED,wBAGC;IAjBD,+BAEC;IA4BD,2BAKC;IAED,0BAKC;IAED,sBAIC;IAED,qBAIC;IAED,yBAQC;IAED,0BAQC;IAED,0BAIC;IAED,2BAIC;IAED,iCAUC;IA7GD,2EASC;IAGC,kBAAsB;IAmGxB,6BAIE;IAEF,6BAIE;IAEF,6BA4dC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/mooc-header/index.js"],"names":[],"mappings":";AAwBA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA+FE;IAEF;;;;;;;;;;;;;;;;;;;;;;;MAGE;IAEF,wBAwBC;IAtBC;;;;;;MAMC;IAgDH,6BAIC;IAED,yBAGC;IAxBD,qCAQC;IAED,wBAGC;IAjBD,+BAEC;IA4BD,2BAKC;IAED,0BAKC;IAED,sBAIC;IAED,qBAIC;IAED,yBAQC;IAED,0BAQC;IAED,0BAIC;IAED,2BAIC;IAED,iCAUC;IA7GD,2EASC;IAGC,kBAAsB;IAmGxB,6BAIE;IAEF,6BAIE;IAEF,6BA2dC;CACF"}

package/lib/organism/mooc-header/index.js

@@ -233,7 +233,7 @@ class MoocHeader extends _react.default.Component {
           "aria-label": pageCountAriaLabel
         }, /*#__PURE__*/_react.default.createElement("span", {
           className: _style.default.counter
-        }, item.counter > 99 ? '99+' : item.counter)) : null;
+        }, item.counter > 99 ? '+99' : item.counter)) : null;
         const {
           name: itemName = index
         } = item;
@@ -337,18 +337,16 @@ class MoocHeader extends _react.default.Component {
         href: user.notifications.href,
         "data-name": "user-notifications",
         className: _style.default.notifications
-      }, nbNotifications > 99 ? '99+' : nbNotifications) : null;
+      }, nbNotifications) : null;
       const notificationPageView = /*#__PURE__*/_react.default.createElement(_link.default, {
         className: (0, _classnames.default)(_style.default.notification, nbNotifications > 0 ? _style.default.active : null),
         "data-name": "stat-notifications",
         href: user.notifications.href,
         "aria-label": notificationsAriaLabel
-      }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-        icon: "bell",
-        style: {
-          color: nbNotifications > 0 ? _colors.COLORS.negative_700 : _colors.COLORS.neutral_500
-        }
-      }), notificationsView);
+      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidTimeAlarm, {
+        width: 16,
+        height: 16
+      })), notificationsView);
       userView = /*#__PURE__*/_react.default.createElement("div", {
         className: _style.default.user
       }, /*#__PURE__*/_react.default.createElement("div", {