@coorpacademy/components 11.38.6-alpha.27 → 11.38.6-alpha.28

package/es/atom/input-search/index.d.ts

@@ -31,8 +31,6 @@ declare namespace Search {
         const onClear: PropTypes.Requireable<(...args: any[]) => any>;
         const onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
-        const onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-        const inputRef: PropTypes.Requireable<(...args: any[]) => any>;
         const theme: PropTypes.Requireable<string>;
         const dataTestId: PropTypes.Requireable<string>;
     }

package/es/atom/input-search/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-search/index.js"],"names":[],"mappings":";AAiBA,iDAoFC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-search/index.js"],"names":[],"mappings":";AAYA,iDAkDC"}

package/es/atom/input-search/index.js

@@ -6,10 +6,6 @@ import classnames from 'classnames';
 import { NovaCompositionCoorpacademySearchThin as CMSearchIcon, NovaCompositionCoorpacademySearch as SearchIcon, NovaSolidStatusClose as CloseIcon } from '@coorpacademy/nova-icons';
 import Provider from '../provider';
 import style from './style.css';
-const handleMouseDown = e => {
-  e.preventDefault();
-  e.stopPropagation();
-};
 const Search = props => {
   const {
     value,
@@ -18,53 +14,27 @@ const Search = props => {
     onClear = _noop,
     onFocus,
     onBlur,
-    onKeyDown,
-    inputRef,
     theme = 'default',
     dataTestId
   } = props;
   const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);
-  const handleKeyDown = useMemo(() => e => {
-    if (onKeyDown) {
-      onKeyDown(e);
-    }
-  }, [onKeyDown]);
-  const isCoorpManager = theme === 'coorpmanager';
-  const isMooc = theme === 'mooc';
-  const isDefault = theme === 'default';
-  const wrapperClass = classnames({
-    [style.wrapperSearch]: isDefault,
-    [style.coorpmanager]: isCoorpManager,
-    [style.wrapperMooc]: isMooc
-  });
-  const wrapperParentClass = classnames({
-    [style.wrapperMoocParent]: isMooc
-  });
-  const searchClass = classnames({
-    [style.search]: true,
-    [style.moocSearch]: isMooc
-  });
-  const SearchIconComponent = isCoorpManager ? CMSearchIcon : SearchIcon;
-  const showTitle = isCoorpManager;
-  const showClearIcon = value && isCoorpManager;
+  const cmStyle = classnames(style.coorpmanager);
+  const isDefaultTheme = theme === 'default';
   return /*#__PURE__*/React.createElement("div", {
-    className: wrapperParentClass
-  }, /*#__PURE__*/React.createElement("div", {
-    className: wrapperClass
+    className: isDefaultTheme ? style.wrapperSearch : cmStyle
   }, /*#__PURE__*/React.createElement("label", {
     htmlFor: "search",
     title: placeholder
-  }, /*#__PURE__*/React.createElement(SearchIconComponent, {
-    className: style.searchIcon,
-    "data-name": "search-icon",
-    onMouseDown: handleMouseDown
-  }), showTitle ? /*#__PURE__*/React.createElement("span", {
+  }, !isDefaultTheme ? /*#__PURE__*/React.createElement(CMSearchIcon, {
+    className: style.searchIcon
+  }) : /*#__PURE__*/React.createElement(SearchIcon, {
+    className: style.searchIcon
+  }), !isDefaultTheme ? /*#__PURE__*/React.createElement("span", {
     className: classnames(style.title, _isEmpty(value) && style.noValue)
   }, placeholder) : null), /*#__PURE__*/React.createElement("input", {
-    ref: inputRef,
     "data-name": "search-input",
     "data-testid": dataTestId,
-    className: searchClass,
+    className: style.search,
     "aria-label": placeholder,
     type: "text",
     name: "search",
@@ -75,12 +45,11 @@ const Search = props => {
     onInput: handleChange,
     onFocus: onFocus,
     onChange: _noop,
-    onBlur: onBlur,
-    onKeyDown: handleKeyDown
-  }), showClearIcon ? /*#__PURE__*/React.createElement(CloseIcon, {
+    onBlur: onBlur
+  }), value && !isDefaultTheme ? /*#__PURE__*/React.createElement(CloseIcon, {
     onClick: onClear,
     className: style.clearIcon
-  }) : null));
+  }) : null);
 };
 Search.contextTypes = {
   skin: Provider.childContextTypes.skin
@@ -92,9 +61,7 @@ Search.propTypes = process.env.NODE_ENV !== "production" ? {
   onClear: PropTypes.func,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  inputRef: PropTypes.func,
-  theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),
+  theme: PropTypes.oneOf(['default', 'coorpmanager']),
   dataTestId: PropTypes.string
 } : {};
 export default Search;

package/es/atom/input-search/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","classnames","NovaCompositionCoorpacademySearchThin","CMSearchIcon","NovaCompositionCoorpacademySearch","SearchIcon","NovaSolidStatusClose","CloseIcon","Provider","style","handleMouseDown","e","preventDefault","stopPropagation","Search","props","value","placeholder","onChange","_noop","onClear","onFocus","onBlur","onKeyDown","inputRef","theme","dataTestId","handleChange","target","handleKeyDown","isCoorpManager","isMooc","isDefault","wrapperClass","wrapperSearch","coorpmanager","wrapperMooc","wrapperParentClass","wrapperMoocParent","searchClass","search","moocSearch","SearchIconComponent","showTitle","showClearIcon","createElement","className","htmlFor","title","searchIcon","onMouseDown","_isEmpty","noValue","ref","type","name","id","onInput","onClick","clearIcon","contextTypes","skin","childContextTypes","propTypes","process","env","NODE_ENV","string","isRequired","func","oneOf"],"sources":["../../../src/atom/input-search/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionCoorpacademySearchThin as CMSearchIcon,\n  NovaCompositionCoorpacademySearch as SearchIcon,\n  NovaSolidStatusClose as CloseIcon\n} from '@coorpacademy/nova-icons';\nimport {noop, isEmpty} from 'lodash/fp';\nimport Provider from '../provider';\nimport style from './style.css';\n\nconst handleMouseDown = e => {\n  e.preventDefault();\n  e.stopPropagation();\n};\n\nconst Search = props => {\n  const {\n    value,\n    placeholder,\n    onChange = noop,\n    onClear = noop,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    inputRef,\n    theme = 'default',\n    dataTestId\n  } = props;\n  const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n\n  const handleKeyDown = useMemo(\n    () => e => {\n      if (onKeyDown) {\n        onKeyDown(e);\n      }\n    },\n    [onKeyDown]\n  );\n\n  const isCoorpManager = theme === 'coorpmanager';\n  const isMooc = theme === 'mooc';\n  const isDefault = theme === 'default';\n\n  const wrapperClass = classnames({\n    [style.wrapperSearch]: isDefault,\n    [style.coorpmanager]: isCoorpManager,\n    [style.wrapperMooc]: isMooc\n  });\n\n  const wrapperParentClass = classnames({\n    [style.wrapperMoocParent]: isMooc\n  });\n\n  const searchClass = classnames({\n    [style.search]: true,\n    [style.moocSearch]: isMooc\n  });\n\n  const SearchIconComponent = isCoorpManager ? CMSearchIcon : SearchIcon;\n  const showTitle = isCoorpManager;\n  const showClearIcon = value && isCoorpManager;\n\n  return (\n    <div className={wrapperParentClass}>\n      <div className={wrapperClass}>\n        <label htmlFor=\"search\" title={placeholder}>\n          <SearchIconComponent\n            className={style.searchIcon}\n            data-name=\"search-icon\"\n            onMouseDown={handleMouseDown}\n          />\n          {showTitle ? (\n            <span className={classnames(style.title, isEmpty(value) && style.noValue)}>\n              {placeholder}\n            </span>\n          ) : null}\n        </label>\n        <input\n          ref={inputRef}\n          data-name=\"search-input\"\n          data-testid={dataTestId}\n          className={searchClass}\n          aria-label={placeholder}\n          type=\"text\"\n          name=\"search\"\n          id=\"search\"\n          placeholder={placeholder}\n          title={placeholder}\n          value={value}\n          onInput={handleChange}\n          onFocus={onFocus}\n          onChange={noop}\n          onBlur={onBlur}\n          onKeyDown={handleKeyDown}\n        />\n        {showClearIcon ? <CloseIcon onClick={onClear} className={style.clearIcon} /> : null}\n      </div>\n    </div>\n  );\n};\n\nSearch.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSearch.propTypes = {\n  value: PropTypes.string,\n  placeholder: PropTypes.string.isRequired,\n  onChange: PropTypes.func,\n  onClear: PropTypes.func,\n  onFocus: PropTypes.func,\n  onBlur: PropTypes.func,\n  onKeyDown: PropTypes.func,\n  inputRef: PropTypes.func,\n  theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),\n  dataTestId: PropTypes.string\n};\n\nexport default Search;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","classnames","NovaCompositionCoorpacademySearchThin","CMSearchIcon","NovaCompositionCoorpacademySearch","SearchIcon","NovaSolidStatusClose","CloseIcon","Provider","style","Search","props","value","placeholder","onChange","_noop","onClear","onFocus","onBlur","theme","dataTestId","handleChange","e","target","cmStyle","coorpmanager","isDefaultTheme","createElement","className","wrapperSearch","htmlFor","title","searchIcon","_isEmpty","noValue","search","type","name","id","onInput","onClick","clearIcon","contextTypes","skin","childContextTypes","propTypes","process","env","NODE_ENV","string","isRequired","func","oneOf"],"sources":["../../../src/atom/input-search/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionCoorpacademySearchThin as CMSearchIcon,\n  NovaCompositionCoorpacademySearch as SearchIcon,\n  NovaSolidStatusClose as CloseIcon\n} from '@coorpacademy/nova-icons';\nimport {noop, isEmpty} from 'lodash/fp';\nimport Provider from '../provider';\nimport style from './style.css';\n\nconst Search = props => {\n  const {\n    value,\n    placeholder,\n    onChange = noop,\n    onClear = noop,\n    onFocus,\n    onBlur,\n    theme = 'default',\n    dataTestId\n  } = props;\n  const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n  const cmStyle = classnames(style.coorpmanager);\n  const isDefaultTheme = theme === 'default';\n\n  return (\n    <div className={isDefaultTheme ? style.wrapperSearch : cmStyle}>\n      <label htmlFor=\"search\" title={placeholder}>\n        {!isDefaultTheme ? (\n          <CMSearchIcon className={style.searchIcon} />\n        ) : (\n          <SearchIcon className={style.searchIcon} />\n        )}\n        {!isDefaultTheme ? (\n          <span className={classnames(style.title, isEmpty(value) && style.noValue)}>\n            {placeholder}\n          </span>\n        ) : null}\n      </label>\n      <input\n        data-name=\"search-input\"\n        data-testid={dataTestId}\n        className={style.search}\n        aria-label={placeholder}\n        type=\"text\"\n        name=\"search\"\n        id=\"search\"\n        placeholder={placeholder}\n        title={placeholder}\n        value={value}\n        onInput={handleChange}\n        onFocus={onFocus}\n        onChange={noop}\n        onBlur={onBlur}\n      />\n      {value && !isDefaultTheme ? (\n        <CloseIcon onClick={onClear} className={style.clearIcon} />\n      ) : null}\n    </div>\n  );\n};\n\nSearch.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSearch.propTypes = {\n  value: PropTypes.string,\n  placeholder: PropTypes.string.isRequired,\n  onChange: PropTypes.func,\n  onClear: PropTypes.func,\n  onFocus: PropTypes.func,\n  onBlur: PropTypes.func,\n  theme: PropTypes.oneOf(['default', 'coorpmanager']),\n  dataTestId: PropTypes.string\n};\n\nexport default Search;\n"],"mappings":"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","ignoreList":[]}

package/es/atom/input-search/style.css

@@ -8,13 +8,11 @@
 @value white from colors;
 @value dark from colors;
 @value black from colors;
-@value cm_grey_75 from colors;
 @value cm_grey_100 from colors;
 @value cm_grey_150 from colors;
 @value cm_grey_400 from colors;
 @value cm_grey_500 from colors;
 @value cm_grey_700 from colors;
-@value brand from colors;
 
 .wrapperSearch {
   display: flex;
@@ -68,7 +66,6 @@
   color: medium;
 }
 
-/* Theme: coorpmanager */
 .coorpmanager {
   position: relative;
 }
@@ -180,65 +177,6 @@
   line-height: 16px;
 }
 
-/* Theme: mooc */
-.wrapperMooc {
-  display: flex;
-  flex-flow: nowrap;
-  flex-direction: row;
-  align-items: center;
-  overflow: hidden;
-  border-radius: 12px;
-  transition: box-shadow 0.3s ease-in-out;
-  background: cm_grey_100;
-  padding: 2px;
-  width: 100%;
-  flex: 1;
-}
-
-.wrapperMoocParent {
-  width: 100%;
-  flex: 1;
-  border-radius: 12px;
-  transition: box-shadow 0.3s ease-in-out;
-  background: transparent;
-}
-
-.moocSearch {
-  background-color: cm_grey_100;
-  border-radius: 12px;
-  height: 44px;
-  margin: 0;
-  font-family: Gilroy;
-  font-size: 14px;
-  font-weight: 500;
-  color: cm_grey_700;
-  padding: 0 0 0 45px;
-  padding-right: 48px;
-  outline: none;
-}
-
-.moocSearch:focus-within {
-  background-color: cm_grey_75;
-}
-
-.wrapperMoocParent:focus-within .wrapperMooc {
-  background: transparent;
-  box-shadow: 0 0 0 2px rgba(255,255,255,0), 0 0 0 2px brand;
-}
-
-.wrapperMooc:hover {
-  box-shadow: 0 0 0 2px brand;
-}
-
-.wrapperMooc .clearIcon {
-  position: relative;
-  right: 26px;
-  color: cm_grey_400;
-  width: 14px;
-  height: 14px;
-  cursor: pointer;
-}
-
 input:-webkit-autofill,
 input:-webkit-autofill:hover, 
 input:-webkit-autofill:focus, 
@@ -246,20 +184,6 @@ input:-webkit-autofill:active{
   -webkit-background-clip: text;
 }
 
-.moocSearch:-webkit-autofill,
-.moocSearch:-webkit-autofill:hover,
-.moocSearch:-webkit-autofill:focus,
-.moocSearch:-webkit-autofill:active {
-  -webkit-box-shadow: 0 0 0 1000px cm_grey_100 inset !important;
-  -webkit-text-fill-color: cm_grey_700 !important;
-  background-color: cm_grey_100 !important;
-}
-
-.wrapperMoocParent:focus-within .moocSearch:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 1000px cm_grey_75 inset !important;
-  background-color: cm_grey_75 !important;
-}
-
 @media tablet {
   .search,
   input {
@@ -270,16 +194,6 @@ input:-webkit-autofill:active{
     font-size: 12px;
     color: medium;
   }
-
-  .wrapperMoocParent {
-    max-width: 100%;
-    box-sizing: border-box;
-  }
-
-  .wrapperMooc {
-    max-width: 100%;
-    box-sizing: border-box;
-  }
 }
 
 @media mobile {
@@ -290,14 +204,4 @@ input:-webkit-autofill:active{
   .search::placeholder {
     font-size: 12px;
   }
-
-  .wrapperMoocParent {
-    max-width: 100%;
-    box-sizing: border-box;
-  }
-
-  .wrapperMooc {
-    max-width: 100%;
-    box-sizing: border-box;
-  }
 }

package/es/molecule/card/customer.css

@@ -47,9 +47,6 @@
     rgba(0, 0, 0, 0) 20%
   );
 }
-.chapterCustomer {
-  padding-top: 10px;
-}
 
 .coorpmanager.customer.chapterCustomer {
   padding-top: 0px;

package/es/molecule/card/favorite.css

@@ -8,8 +8,8 @@
 @value black from colors;
 
 .favorite {
-  width: 24px;
-  height: 24px;
+  width: 36px;
+  height: 36px;
   position: absolute;
   right: 8px;
   top: 8px;
@@ -19,7 +19,7 @@
   line-height: 0px;
   box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.11);
   background-color: #ffffff;
-  border-radius: 100%;
+  border-radius: 8px;
   border: none;
   padding: 0;
 }

package/es/molecule/card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/card/index.js"],"names":[],"mappings":";;;;;AA2PA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BE;;;AAlKF,uDA8HG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/card/index.js"],"names":[],"mappings":";;;;;AA4QA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BE;;;AAjKF,uDA6HG"}

package/es/molecule/card/index.js

@@ -8,9 +8,11 @@ import React, { useMemo, memo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { NovaCompositionCoorpacademyPadlock as LockIcon, NovaCompositionCoorpacademyPictures as PicturesIcon } from '@coorpacademy/nova-icons';
-import { isExternalContent, EXTERNAL_CONTENT_ICONS } from '../../util/external-content';
+import { isExternalContent, ICONS_TYPES, EXTERNAL_CONTENT_ICONS } from '../../util/external-content';
 import Provider from '../../atom/provider';
 import CardContentInfo, { MODES } from '../card-content';
+import FaIcon from '../../atom/icon';
+import { COLORS } from '../../variables/colors';
 import Customer from './customer';
 import Favorite from './favorite';
 import Selectable from './selectable';
@@ -20,6 +22,7 @@ export const THEMES = {
   default: null,
   coorpmanager: style.coorpmanager
 };
+const ICON_SIZE = '28px';
 const CardBackground = ({
   type,
   image,
@@ -31,22 +34,35 @@ const CardBackground = ({
   const externalContent = isExternalContent(type);
   const primaryColor = _get('common.primary', skin);
   const whiteColor = _get('common.white', skin);
-  if (externalContent && EXTERNAL_CONTENT_ICONS[type]) {
-    const IconType = EXTERNAL_CONTENT_ICONS[type].icon;
-    const iconColor = EXTERNAL_CONTENT_ICONS[type].color;
+  if (externalContent && EXTERNAL_CONTENT_ICONS[type] || type === 'chapter') {
+    const {
+      iconName,
+      iconColor
+    } = ICONS_TYPES[type];
     const backgroundIcon = /*#__PURE__*/React.createElement("div", {
-      className: style.externalIconCircleWrapper
-    }, /*#__PURE__*/React.createElement(IconType, {
-      className: style.externalIcon
+      className: classnames(style.externalIconCircleWrapper, style.externalIconCircleWithImageWrapper)
+    }, /*#__PURE__*/React.createElement(FaIcon, {
+      iconName: iconName,
+      customStyle: {
+        color: COLORS.white,
+        height: ICON_SIZE,
+        width: ICON_SIZE
+      }
     }));
     if (image) {
       const _backgroundIcon = /*#__PURE__*/React.createElement("div", {
         className: classnames(style.externalIconCircleWrapper, style.externalIconCircleWithImageWrapper),
         style: {
           backgroundColor: iconColor
+        },
+        "data-testid": "card-background-image"
+      }, /*#__PURE__*/React.createElement(FaIcon, {
+        iconName: iconName,
+        customStyle: {
+          color: COLORS.white,
+          height: ICON_SIZE,
+          width: ICON_SIZE
         }
-      }, /*#__PURE__*/React.createElement(IconType, {
-        className: style.externalIconWithImage
       }));
       return /*#__PURE__*/React.createElement("div", {
         className: style.imageWrapper
@@ -78,7 +94,7 @@ const CardBackground = ({
     }
   }) : null;
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames(style.imageWrapper, type === 'chapter' ? style.chapterImageWrapper : null)
+    className: style.imageWrapper
   }, /*#__PURE__*/React.createElement("div", {
     "data-name": "cover",
     "aria-label": ariaLabel,
@@ -135,7 +151,7 @@ const Card = /*#__PURE__*/memo(function Card(props, context) {
   } = props;
   const empty = _isEmpty(_pick(['title', 'type', 'author', 'image'], props));
   const primaryColor = _get('common.primary', skin);
-  const cardStyle = classnames(THEMES[theme], type === 'chapter' ? style.chapter : style.course, title ? null : style.lazy, style.grid, empty ? style.empty : null);
+  const cardStyle = classnames(THEMES[theme], style.course, title ? null : style.lazy, style.grid, empty ? style.empty : null);
   const disabled = hidden && (!isSelected || _isUndefined(isSelected));
   const handleClick = useMemo(() => e => onClick(e), [onClick]);
   const lock = disabled ? /*#__PURE__*/React.createElement("div", {

package/es/molecule/card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","memo","PropTypes","classnames","NovaCompositionCoorpacademyPadlock","LockIcon","NovaCompositionCoorpacademyPictures","PicturesIcon","isExternalContent","EXTERNAL_CONTENT_ICONS","Provider","CardContentInfo","MODES","Customer","Favorite","Selectable","Notification","style","THEMES","default","coorpmanager","CardBackground","type","image","empty","ariaLabel","skin","externalContent","primaryColor","_get","whiteColor","IconType","icon","iconColor","color","backgroundIcon","createElement","className","externalIconCircleWrapper","externalIcon","_backgroundIcon","externalIconCircleWithImageWrapper","backgroundColor","externalIconWithImage","imageWrapper","backgroundImage","externalContentHeader","externalBackground","emptyIcon","chapterImageWrapper","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","bool","Card","props","context","badge","adaptiv","disabled","hidden","title","author","customer","certifiedAuthor","progress","favorite","addFavoriteToolTip","removeFavoriteToolTip","onClick","onFavoriteClick","isSelected","notification","badgeCategory","badgeLabel","theme","disabledContent","cardArialabel","backgroundAriaLabel","favoriteAriaLabel","selectableAriaLabel","customerAriaLabel","badgeAriaLabel","disabledArialabel","cardContentLabelAriaLabel","_isEmpty","_pick","cardStyle","chapter","course","lazy","grid","_isUndefined","handleClick","e","lock","lockContent","lockIcon","height","dangerouslySetInnerHTML","__html","inlineBadgeStyle","getType","contentType","_extends","mode","CARD","lockWrapper","cardPropTypes","shape","number","func","oneOf","_keys"],"sources":["../../../src/molecule/card/index.js"],"sourcesContent":["import React, {useMemo, memo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {get, isEmpty, isUndefined, pick, keys} from 'lodash/fp';\nimport {\n  NovaCompositionCoorpacademyPadlock as LockIcon,\n  NovaCompositionCoorpacademyPictures as PicturesIcon\n} from '@coorpacademy/nova-icons';\nimport {isExternalContent, EXTERNAL_CONTENT_ICONS} from '../../util/external-content';\nimport Provider from '../../atom/provider';\nimport CardContentInfo, {MODES} from '../card-content';\nimport Customer from './customer';\nimport Favorite from './favorite';\nimport Selectable from './selectable';\nimport Notification from './notification';\nimport style from './style.css';\n\nexport const THEMES = {\n  default: null,\n  coorpmanager: style.coorpmanager\n};\n\nconst CardBackground = ({type, image, empty, 'aria-label': ariaLabel}, {skin}) => {\n  const externalContent = isExternalContent(type);\n  const primaryColor = get('common.primary', skin);\n  const whiteColor = get('common.white', skin);\n\n  if (externalContent && EXTERNAL_CONTENT_ICONS[type]) {\n    const IconType = EXTERNAL_CONTENT_ICONS[type].icon;\n    const iconColor = EXTERNAL_CONTENT_ICONS[type].color;\n    const backgroundIcon = (\n      <div className={style.externalIconCircleWrapper}>\n        <IconType className={style.externalIcon} />\n      </div>\n    );\n\n    if (image) {\n      const _backgroundIcon = (\n        <div\n          className={classnames(\n            style.externalIconCircleWrapper,\n            style.externalIconCircleWithImageWrapper\n          )}\n          style={{\n            backgroundColor: iconColor\n          }}\n        >\n          <IconType className={style.externalIconWithImage} />\n        </div>\n      );\n\n      return (\n        <div className={style.imageWrapper}>\n          <div\n            data-name=\"cover\"\n            aria-label={ariaLabel}\n            style={{\n              backgroundColor: iconColor,\n              backgroundImage: `url('${image}')`\n            }}\n            className={classnames(style.externalContentHeader, style.externalBackground)}\n          >\n            {_backgroundIcon}\n          </div>\n        </div>\n      );\n    }\n    return (\n      <div className={style.imageWrapper}>\n        <div\n          data-name=\"cover\"\n          aria-label={ariaLabel}\n          style={{\n            backgroundColor: iconColor\n          }}\n          className={style.externalContentHeader}\n        >\n          {backgroundIcon}\n        </div>\n      </div>\n    );\n  }\n\n  const emptyIcon = empty ? (\n    <PicturesIcon className={style.emptyIcon} style={{color: whiteColor}} />\n  ) : null;\n  return (\n    <div\n      className={classnames(\n        style.imageWrapper,\n        type === 'chapter' ? style.chapterImageWrapper : null\n      )}\n    >\n      <div\n        data-name=\"cover\"\n        aria-label={ariaLabel}\n        className={style.image}\n        style={{\n          backgroundColor: primaryColor,\n          backgroundImage: image ? `url('${image}')` : 'none'\n        }}\n      >\n        {emptyIcon}\n      </div>\n    </div>\n  );\n};\n\nCardBackground.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nCardBackground.propTypes = {\n  type: PropTypes.string,\n  image: PropTypes.string,\n  empty: PropTypes.bool,\n  'aria-label': PropTypes.string\n};\n\nconst Card = memo(function Card(props, context) {\n  const {skin} = context;\n  const {\n    image,\n    badge,\n    adaptiv,\n    disabled: hidden = false,\n    type = 'course',\n    title,\n    author,\n    customer,\n    certifiedAuthor,\n    progress,\n    favorite,\n    addFavoriteToolTip,\n    removeFavoriteToolTip,\n    onClick,\n    onFavoriteClick,\n    isSelected,\n    notification,\n    badgeCategory,\n    badgeLabel,\n    theme = 'default',\n    disabledContent,\n    'aria-label': cardArialabel,\n    'background-aria-label': backgroundAriaLabel,\n    'favorite-aria-label': favoriteAriaLabel,\n    'selectable-aria-label': selectableAriaLabel,\n    'customer-aria-label': customerAriaLabel,\n    'badge-aria-label': badgeAriaLabel,\n    'disabled-aria-label': disabledArialabel,\n    'card-content-aria-label': cardContentLabelAriaLabel\n  } = props;\n  const empty = isEmpty(pick(['title', 'type', 'author', 'image'], props));\n  const primaryColor = get('common.primary', skin);\n  const cardStyle = classnames(\n    THEMES[theme],\n    type === 'chapter' ? style.chapter : style.course,\n    title ? null : style.lazy,\n    style.grid,\n    empty ? style.empty : null\n  );\n  const disabled = hidden && (!isSelected || isUndefined(isSelected));\n  const handleClick = useMemo(() => e => onClick(e), [onClick]);\n  const lock = disabled ? (\n    <div className={style.lockContent}>\n      <LockIcon className={style.lockIcon} height={48} />\n      <span\n        aria-label={disabledArialabel}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: disabledContent}}\n      />\n    </div>\n  ) : null;\n  const inlineBadgeStyle = {color: primaryColor};\n  const getType = contentType => {\n    switch (contentType) {\n      case 'chapter':\n        return 'microlearning';\n      case 'course':\n        return 'learner';\n      default:\n        return contentType;\n    }\n  };\n\n  return (\n    <div\n      className={cardStyle}\n      data-name=\"card\"\n      data-lock={disabled}\n      data-type={getType(type)}\n      disabled={disabled}\n      onClick={handleClick}\n      aria-label={cardArialabel}\n    >\n      <CardBackground type={type} image={image} empty={empty} aria-label={backgroundAriaLabel} />\n      {isUndefined(isSelected) && !isUndefined(favorite) ? (\n        <Favorite\n          className={style.favorite}\n          favorite={favorite}\n          disabled={disabled}\n          onFavoriteClick={onFavoriteClick}\n          addFavoriteToolTip={addFavoriteToolTip}\n          removeFavoriteToolTip={removeFavoriteToolTip}\n          aria-label={favoriteAriaLabel}\n        />\n      ) : null}\n      <Selectable isSelected={isSelected} hidden={hidden} aria-label={selectableAriaLabel} />\n      {notification ? <Notification {...notification} /> : null}\n      {customer ? (\n        <Customer\n          {...customer}\n          theme={theme}\n          type={type}\n          disabled={disabled}\n          aria-label={customerAriaLabel}\n        />\n      ) : null}\n      <CardContentInfo\n        mode={MODES.CARD}\n        adaptiv={adaptiv}\n        author={author}\n        certifiedAuthor={certifiedAuthor}\n        disabled={disabled}\n        empty={empty}\n        progress={progress}\n        title={title}\n        type={type}\n        badgeCategory={badgeCategory}\n        badgeLabel={badgeLabel}\n        theme={theme}\n        aria-label={cardContentLabelAriaLabel}\n      />\n      {badge ? (\n        <div className={style.badge} style={inlineBadgeStyle} aria-label={badgeAriaLabel}>\n          {badge}\n        </div>\n      ) : null}\n      {disabled ? (\n        <div className={style.lockWrapper} aria-label={disabledArialabel}>\n          {lock}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n\nCard.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport const cardPropTypes = {\n  badge: PropTypes.string,\n  image: PropTypes.string,\n  disabled: PropTypes.bool,\n  adaptiv: PropTypes.bool,\n  type: PropTypes.string,\n  title: PropTypes.string,\n  author: PropTypes.string,\n  certifiedAuthor: PropTypes.bool,\n  customer: PropTypes.shape(Customer.propTypes),\n  progress: PropTypes.number,\n  favorite: PropTypes.bool,\n  addFavoriteToolTip: PropTypes.string,\n  removeFavoriteToolTip: PropTypes.string,\n  onClick: PropTypes.func,\n  onFavoriteClick: PropTypes.func,\n  isSelected: PropTypes.bool,\n  notification: PropTypes.shape(Notification.propTypes),\n  badgeCategory: CardContentInfo.propTypes.badgeCategory,\n  badgeLabel: CardContentInfo.propTypes.badgeLabel,\n  theme: PropTypes.oneOf(keys(THEMES)),\n  disabledContent: PropTypes.string,\n  'aria-label': PropTypes.string,\n  'background-aria-label': PropTypes.string,\n  'favorite-aria-label': Favorite.propTypes['aria-label'],\n  'selectable-aria-label': Selectable.propTypes['aria-label'],\n  'customer-aria-label': Customer.propTypes['aria-label'],\n  'badge-aria-label': PropTypes.string,\n  'disabled-aria-label': PropTypes.string,\n  'card-content-aria-label': CardContentInfo.propTypes['aria-label']\n};\n\nCard.propTypes = cardPropTypes;\n\nexport default Card;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","memo","PropTypes","classnames","NovaCompositionCoorpacademyPadlock","LockIcon","NovaCompositionCoorpacademyPictures","PicturesIcon","isExternalContent","ICONS_TYPES","EXTERNAL_CONTENT_ICONS","Provider","CardContentInfo","MODES","FaIcon","COLORS","Customer","Favorite","Selectable","Notification","style","THEMES","default","coorpmanager","ICON_SIZE","CardBackground","type","image","empty","ariaLabel","skin","externalContent","primaryColor","_get","whiteColor","iconName","iconColor","backgroundIcon","createElement","className","externalIconCircleWrapper","externalIconCircleWithImageWrapper","customStyle","color","white","height","width","_backgroundIcon","backgroundColor","imageWrapper","backgroundImage","externalContentHeader","externalBackground","emptyIcon","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","bool","Card","props","context","badge","adaptiv","disabled","hidden","title","author","customer","certifiedAuthor","progress","favorite","addFavoriteToolTip","removeFavoriteToolTip","onClick","onFavoriteClick","isSelected","notification","badgeCategory","badgeLabel","theme","disabledContent","cardArialabel","backgroundAriaLabel","favoriteAriaLabel","selectableAriaLabel","customerAriaLabel","badgeAriaLabel","disabledArialabel","cardContentLabelAriaLabel","_isEmpty","_pick","cardStyle","course","lazy","grid","_isUndefined","handleClick","e","lock","lockContent","lockIcon","dangerouslySetInnerHTML","__html","inlineBadgeStyle","getType","contentType","_extends","mode","CARD","lockWrapper","cardPropTypes","shape","number","func","oneOf","_keys"],"sources":["../../../src/molecule/card/index.js"],"sourcesContent":["import React, {useMemo, memo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {get, isEmpty, isUndefined, pick, keys} from 'lodash/fp';\nimport {\n  NovaCompositionCoorpacademyPadlock as LockIcon,\n  NovaCompositionCoorpacademyPictures as PicturesIcon\n} from '@coorpacademy/nova-icons';\nimport {isExternalContent, ICONS_TYPES, EXTERNAL_CONTENT_ICONS} from '../../util/external-content';\nimport Provider from '../../atom/provider';\nimport CardContentInfo, {MODES} from '../card-content';\nimport FaIcon from '../../atom/icon';\nimport {COLORS} from '../../variables/colors';\nimport Customer from './customer';\nimport Favorite from './favorite';\nimport Selectable from './selectable';\nimport Notification from './notification';\nimport style from './style.css';\n\nexport const THEMES = {\n  default: null,\n  coorpmanager: style.coorpmanager\n};\n\nconst ICON_SIZE = '28px';\n\nconst CardBackground = ({type, image, empty, 'aria-label': ariaLabel}, {skin}) => {\n  const externalContent = isExternalContent(type);\n  const primaryColor = get('common.primary', skin);\n  const whiteColor = get('common.white', skin);\n\n  if ((externalContent && EXTERNAL_CONTENT_ICONS[type]) || type === 'chapter') {\n    const {iconName, iconColor} = ICONS_TYPES[type];\n    const backgroundIcon = (\n      <div\n        className={classnames(\n          style.externalIconCircleWrapper,\n          style.externalIconCircleWithImageWrapper\n        )}\n      >\n        <FaIcon\n          iconName={iconName}\n          customStyle={{\n            color: COLORS.white,\n            height: ICON_SIZE,\n            width: ICON_SIZE\n          }}\n        />\n      </div>\n    );\n\n    if (image) {\n      const _backgroundIcon = (\n        <div\n          className={classnames(\n            style.externalIconCircleWrapper,\n            style.externalIconCircleWithImageWrapper\n          )}\n          style={{\n            backgroundColor: iconColor\n          }}\n          data-testid=\"card-background-image\"\n        >\n          <FaIcon\n            iconName={iconName}\n            customStyle={{\n              color: COLORS.white,\n              height: ICON_SIZE,\n              width: ICON_SIZE\n            }}\n          />\n        </div>\n      );\n\n      return (\n        <div className={style.imageWrapper}>\n          <div\n            data-name=\"cover\"\n            aria-label={ariaLabel}\n            style={{\n              backgroundColor: iconColor,\n              backgroundImage: `url('${image}')`\n            }}\n            className={classnames(style.externalContentHeader, style.externalBackground)}\n          >\n            {_backgroundIcon}\n          </div>\n        </div>\n      );\n    }\n    return (\n      <div className={style.imageWrapper}>\n        <div\n          data-name=\"cover\"\n          aria-label={ariaLabel}\n          style={{\n            backgroundColor: iconColor\n          }}\n          className={style.externalContentHeader}\n        >\n          {backgroundIcon}\n        </div>\n      </div>\n    );\n  }\n\n  const emptyIcon = empty ? (\n    <PicturesIcon className={style.emptyIcon} style={{color: whiteColor}} />\n  ) : null;\n  return (\n    <div className={style.imageWrapper}>\n      <div\n        data-name=\"cover\"\n        aria-label={ariaLabel}\n        className={style.image}\n        style={{\n          backgroundColor: primaryColor,\n          backgroundImage: image ? `url('${image}')` : 'none'\n        }}\n      >\n        {emptyIcon}\n      </div>\n    </div>\n  );\n};\n\nCardBackground.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nCardBackground.propTypes = {\n  type: PropTypes.string,\n  image: PropTypes.string,\n  empty: PropTypes.bool,\n  'aria-label': PropTypes.string\n};\n\nconst Card = memo(function Card(props, context) {\n  const {skin} = context;\n  const {\n    image,\n    badge,\n    adaptiv,\n    disabled: hidden = false,\n    type = 'course',\n    title,\n    author,\n    customer,\n    certifiedAuthor,\n    progress,\n    favorite,\n    addFavoriteToolTip,\n    removeFavoriteToolTip,\n    onClick,\n    onFavoriteClick,\n    isSelected,\n    notification,\n    badgeCategory,\n    badgeLabel,\n    theme = 'default',\n    disabledContent,\n    'aria-label': cardArialabel,\n    'background-aria-label': backgroundAriaLabel,\n    'favorite-aria-label': favoriteAriaLabel,\n    'selectable-aria-label': selectableAriaLabel,\n    'customer-aria-label': customerAriaLabel,\n    'badge-aria-label': badgeAriaLabel,\n    'disabled-aria-label': disabledArialabel,\n    'card-content-aria-label': cardContentLabelAriaLabel\n  } = props;\n  const empty = isEmpty(pick(['title', 'type', 'author', 'image'], props));\n  const primaryColor = get('common.primary', skin);\n  const cardStyle = classnames(\n    THEMES[theme],\n    style.course,\n    title ? null : style.lazy,\n    style.grid,\n    empty ? style.empty : null\n  );\n  const disabled = hidden && (!isSelected || isUndefined(isSelected));\n  const handleClick = useMemo(() => e => onClick(e), [onClick]);\n  const lock = disabled ? (\n    <div className={style.lockContent}>\n      <LockIcon className={style.lockIcon} height={48} />\n      <span\n        aria-label={disabledArialabel}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: disabledContent}}\n      />\n    </div>\n  ) : null;\n  const inlineBadgeStyle = {color: primaryColor};\n  const getType = contentType => {\n    switch (contentType) {\n      case 'chapter':\n        return 'microlearning';\n      case 'course':\n        return 'learner';\n      default:\n        return contentType;\n    }\n  };\n  return (\n    <div\n      className={cardStyle}\n      data-name=\"card\"\n      data-lock={disabled}\n      data-type={getType(type)}\n      disabled={disabled}\n      onClick={handleClick}\n      aria-label={cardArialabel}\n    >\n      <CardBackground type={type} image={image} empty={empty} aria-label={backgroundAriaLabel} />\n      {isUndefined(isSelected) && !isUndefined(favorite) ? (\n        <Favorite\n          className={style.favorite}\n          favorite={favorite}\n          disabled={disabled}\n          onFavoriteClick={onFavoriteClick}\n          addFavoriteToolTip={addFavoriteToolTip}\n          removeFavoriteToolTip={removeFavoriteToolTip}\n          aria-label={favoriteAriaLabel}\n        />\n      ) : null}\n      <Selectable isSelected={isSelected} hidden={hidden} aria-label={selectableAriaLabel} />\n      {notification ? <Notification {...notification} /> : null}\n      {customer ? (\n        <Customer\n          {...customer}\n          theme={theme}\n          type={type}\n          disabled={disabled}\n          aria-label={customerAriaLabel}\n        />\n      ) : null}\n      <CardContentInfo\n        mode={MODES.CARD}\n        adaptiv={adaptiv}\n        author={author}\n        certifiedAuthor={certifiedAuthor}\n        disabled={disabled}\n        empty={empty}\n        progress={progress}\n        title={title}\n        type={type}\n        badgeCategory={badgeCategory}\n        badgeLabel={badgeLabel}\n        theme={theme}\n        aria-label={cardContentLabelAriaLabel}\n      />\n      {badge ? (\n        <div className={style.badge} style={inlineBadgeStyle} aria-label={badgeAriaLabel}>\n          {badge}\n        </div>\n      ) : null}\n      {disabled ? (\n        <div className={style.lockWrapper} aria-label={disabledArialabel}>\n          {lock}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n\nCard.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport const cardPropTypes = {\n  badge: PropTypes.string,\n  image: PropTypes.string,\n  disabled: PropTypes.bool,\n  adaptiv: PropTypes.bool,\n  type: PropTypes.string,\n  title: PropTypes.string,\n  author: PropTypes.string,\n  certifiedAuthor: PropTypes.bool,\n  customer: PropTypes.shape(Customer.propTypes),\n  progress: PropTypes.number,\n  favorite: PropTypes.bool,\n  addFavoriteToolTip: PropTypes.string,\n  removeFavoriteToolTip: PropTypes.string,\n  onClick: PropTypes.func,\n  onFavoriteClick: PropTypes.func,\n  isSelected: PropTypes.bool,\n  notification: PropTypes.shape(Notification.propTypes),\n  badgeCategory: CardContentInfo.propTypes.badgeCategory,\n  badgeLabel: CardContentInfo.propTypes.badgeLabel,\n  theme: PropTypes.oneOf(keys(THEMES)),\n  disabledContent: PropTypes.string,\n  'aria-label': PropTypes.string,\n  'background-aria-label': PropTypes.string,\n  'favorite-aria-label': Favorite.propTypes['aria-label'],\n  'selectable-aria-label': Selectable.propTypes['aria-label'],\n  'customer-aria-label': Customer.propTypes['aria-label'],\n  'badge-aria-label': PropTypes.string,\n  'disabled-aria-label': PropTypes.string,\n  'card-content-aria-label': CardContentInfo.propTypes['aria-label']\n};\n\nCard.propTypes = cardPropTypes;\n\nexport default Card;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/card/notification.css

@@ -5,13 +5,16 @@
 @value grey from colors;
 @value dark from colors;
 @value white from colors;
+@value cm_blue_700 from colors;
+@value primary_100 from colors;
+@value cm_grey_75 from colors;
 
 .notificationWrapper {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
-  background: color(dark a(75%));
+  background: rgba(29, 29, 43, 0.5);
   position: absolute;
   z-index: 0;
   opacity: 0;
@@ -19,17 +22,22 @@
 }
 
 .notification {
-  width: 100px;
-  height: 100px;
+  width: 156px;
   background: light;
   position: absolute;
   top: 50%;
   left: 50%;
-  margin: -50px 0 0 -50px;
-  border-radius: 7px;
-  padding: 12px 7px 7px;
+  margin: -78px 0 0 -78px;
+  border-radius: 12px;
+  padding: 16px;
   box-sizing: border-box;
   color: grey;
+  background: cm_grey_75;
+  align-items: center;
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  flex-direction: column;
 }
 
 .showOverlay .notification {
@@ -42,21 +50,29 @@
 
 .notification .icon {
   font-size: 30px;
-  height: 30px;
-  width: 100%;
+  height: 20px;
+  width: 15px;
+}
+
+.iconWrapper {
+  width: 32px;
+  height: 32px;
+  padding: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 12px;
 }
 
 .message {
-  width: 100%;
-  height: 50px;
-  line-height: 50px;
+  line-height: 20px;
 }
 
 .message span {
   display: inline-block;
   vertical-align: middle;
   user-select: none;
-  line-height: 16px;
+  line-height: 20px;
   font-size: 14px;
   font-family: 'Gilroy';
   text-align: center;

package/es/molecule/card/notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../src/molecule/card/notification.js"],"names":[],"mappings":";AAyBA,uDAmBC"}
+{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../src/molecule/card/notification.js"],"names":[],"mappings":";AA+BA,uDAqBC"}

package/es/molecule/card/notification.js

@@ -3,14 +3,25 @@ import _get from "lodash/fp/get";
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { NovaCompositionNavigationMore as MoreIcon, NovaSolidLoginLocked as LockIcon, NovaSolidLocksLockUnlock1 as UnlockIcon, NovaCompositionCoorpacademyCheck as CheckIcon } from '@coorpacademy/nova-icons';
+import { NovaSolidLoginLocked as LockIcon, NovaSolidLocksLockUnlock1 as UnlockIcon, NovaCompositionCoorpacademyCheck as CheckIcon, NovaSolidStatusClose as CloseIcon } from '@coorpacademy/nova-icons';
+import { COLORS } from '../../variables/colors';
 import style from './notification.css';
 const NOTIFICATION_ICON = {
   addFavorite: CheckIcon,
-  removeFavorite: MoreIcon,
+  removeFavorite: CloseIcon,
   lock: LockIcon,
   unlock: UnlockIcon
 };
+const NOTIFICATIONS_COLORS = {
+  addFavorite: {
+    color: COLORS.cm_blue_700,
+    backgroundColor: COLORS.primary_100
+  },
+  removeFavorite: {
+    color: COLORS.neutral_500,
+    backgroundColor: COLORS.cm_grey_100
+  }
+};
 const handleOverlayClick = e => {
   e.stopPropagation();
   e.preventDefault();
@@ -22,6 +33,10 @@ const Notification = props => {
     icon
   } = props;
   const IconType = _get(icon, NOTIFICATION_ICON);
+  const {
+    color,
+    backgroundColor
+  } = _get(icon, NOTIFICATIONS_COLORS);
   return /*#__PURE__*/React.createElement("div", {
     "data-name": "notification",
     "data-type": icon,
@@ -29,13 +44,18 @@ const Notification = props => {
     className: classnames(style.showOverlay, style.notificationWrapper)
   }, /*#__PURE__*/React.createElement("div", {
     className: style.notification
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.iconWrapper,
+    style: {
+      backgroundColor
+    }
   }, /*#__PURE__*/React.createElement(IconType, {
     className: style.icon,
     style: {
-      color: null
+      color
     },
     stroke: null
-  }), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: style.message
   }, /*#__PURE__*/React.createElement("span", {
     role: "status"