npm - @coorpacademy/components - Versions diffs - 11.40.11 → 11.40.12 - Mend

@coorpacademy/components 11.40.11 → 11.40.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/es/atom/input-search/index.d.ts +1 -1
package/es/atom/input-search/index.d.ts.map +1 -1
package/es/atom/input-search/index.js +45 -4
package/es/atom/input-search/index.js.map +1 -1
package/es/atom/input-search/style.css +0 -6
package/es/atom/input-select/index.d.ts +44 -2
package/es/atom/input-select/index.d.ts.map +1 -1
package/es/atom/input-select/index.js +32 -15
package/es/atom/input-select/index.js.map +1 -1
package/es/atom/input-select/style.css +22 -12
package/es/organism/mooc-header/index.d.ts.map +1 -1
package/es/organism/mooc-header/index.js +8 -2
package/es/organism/mooc-header/index.js.map +1 -1
package/es/organism/mooc-header/style.css +18 -9
package/lib/atom/input-search/index.d.ts +1 -1
package/lib/atom/input-search/index.d.ts.map +1 -1
package/lib/atom/input-search/index.js +44 -3
package/lib/atom/input-search/index.js.map +1 -1
package/lib/atom/input-search/style.css +0 -6
package/lib/atom/input-select/index.d.ts +44 -2
package/lib/atom/input-select/index.d.ts.map +1 -1
package/lib/atom/input-select/index.js +33 -16
package/lib/atom/input-select/index.js.map +1 -1
package/lib/atom/input-select/style.css +22 -12
package/lib/organism/mooc-header/index.d.ts.map +1 -1
package/lib/organism/mooc-header/index.js +8 -2
package/lib/organism/mooc-header/index.js.map +1 -1
package/lib/organism/mooc-header/style.css +18 -9
package/package.json +2 -2

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

@@ -1,5 +1,5 @@
 export default Search;
-declare function Search(props: any): JSX.Element;
+declare function Search(props: any, context: any): JSX.Element;
 declare namespace Search {
     namespace contextTypes {
         const skin: PropTypes.Requireable<PropTypes.InferProps<{

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

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

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

@@ -1,6 +1,7 @@
+import _get from "lodash/fp/get";
 import _isEmpty from "lodash/fp/isEmpty";
 import _noop from "lodash/fp/noop";
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { NovaCompositionCoorpacademySearchThin as CMSearchIcon, NovaCompositionCoorpacademySearch as SearchIcon, NovaSolidStatusClose as CloseIcon } from '@coorpacademy/nova-icons';
@@ -10,7 +11,25 @@ const handleMouseDown = e => {
   e.preventDefault();
   e.stopPropagation();
 };
-const Search = props => {
+function useHoverAndFocusWithin() {
+  const [isFocusWithin, setIsFocusWithin] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const ref = useRef(null);
+  return {
+    ref,
+    isFocusWithin,
+    hovered,
+    onMouseEnter: () => setHovered(true),
+    onMouseLeave: () => setHovered(false),
+    onFocus: () => setIsFocusWithin(true),
+    onBlur: e => {
+      if (ref.current && !ref.current.contains(e.relatedTarget)) {
+        setIsFocusWithin(false);
+      }
+    }
+  };
+}
+const Search = (props, context) => {
   const {
     value,
     placeholder,
@@ -24,7 +43,20 @@ const Search = props => {
     dataTestId,
     searchIconAriaLabel
   } = props;
+  const {
+    skin
+  } = context;
+  const primaryColor = _get('common.primary', skin);
   const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);
+  const {
+    ref,
+    isFocusWithin,
+    onFocus: onSearchFocus,
+    onBlur: onSearchBlur,
+    hovered,
+    onMouseEnter,
+    onMouseLeave
+  } = useHoverAndFocusWithin();
   const handleKeyDown = useMemo(() => e => {
     if (onKeyDown) {
       onKeyDown(e);
@@ -50,9 +82,18 @@ const Search = props => {
   const showTitle = isCoorpManager;
   const showClearIcon = value && isCoorpManager;
   return /*#__PURE__*/React.createElement("div", {
-    className: wrapperParentClass
+    className: wrapperParentClass,
+    ref: ref,
+    onFocus: onSearchFocus,
+    onBlur: onSearchBlur,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
   }, /*#__PURE__*/React.createElement("div", {
-    className: wrapperClass
+    className: wrapperClass,
+    style: isMooc ? {
+      boxShadow: isFocusWithin || hovered ? `0 0 0 2px ${primaryColor}` : `0 0 0 2px white, 0 0 0 2px ${primaryColor}`,
+      transition: 'box-shadow 0.3s ease-in-out'
+    } : undefined
   }, /*#__PURE__*/React.createElement("label", {
     htmlFor: "search",
     title: placeholder

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

	@@ -1 +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","searchIconAriaLabel","handleChange","target","handleKeyDown","isCoorpManager","isMooc","isDefault","wrapperClass","wrapperSearch","coorpmanager","wrapperMooc","wrapperParentClass","wrapperMoocParent","wrapperCoorpManagerParent","searchClass","search","moocSearch","SearchIconComponent","showTitle","showClearIcon","createElement","className","htmlFor","title","searchIcon","onMouseDown","role","_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 searchIconAriaLabel\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 [style.wrapperCoorpManagerParent]: isCoorpManager\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 aria-label={searchIconAriaLabel}\n role=\"img\"\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 searchIconAriaLabel: PropTypes.string\n};\n\nexport default Search;\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAGC,OAAO,QAAO,OAAO;AACpC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,qCAAqC,IAAIC,YAAY,EACrDC,iCAAiC,IAAIC,UAAU,EAC/CC,oBAAoB,IAAIC,SAAS,QAC5B,0BAA0B;AAEjC,OAAOC,QAAQ,MAAM,aAAa;AAClC,OAAOC,KAAK,MAAM,aAAa;AAE/B,MAAMC,eAAe,GAAGC,CAAC,IAAI;EAC3BA,CAAC,CAACC,cAAc,CAAC,CAAC;EAClBD,CAAC,CAACE,eAAe,CAAC,CAAC;AACrB,CAAC;AAED,MAAMC,MAAM,GAAGC,KAAK,IAAI;EACtB,MAAM;IACJC,KAAK;IACLC,WAAW;IACXC,QAAQ,GAAAC,KAAO;IACfC,OAAO,GAAAD,KAAO;IACdE,OAAO;IACPC,MAAM;IACNC,SAAS;IACTC,QAAQ;IACRC,KAAK,GAAG,SAAS;IACjBC,UAAU;IACVC;EACF,CAAC,GAAGZ,KAAK;EACT,MAAMa,YAAY,GAAG7B,OAAO,CAAC,MAAMY,CAAC,IAAIO,QAAQ,CAACP,CAAC,CAACkB,MAAM,CAACb,KAAK,CAAC,EAAE,CAACE,QAAQ,CAAC,CAAC;EAE7E,MAAMY,aAAa,GAAG/B,OAAO,CAC3B,MAAMY,CAAC,IAAI;IACT,IAAIY,SAAS,EAAE;MACbA,SAAS,CAACZ,CAAC,CAAC;IACd;EACF,CAAC,EACD,CAACY,SAAS,CACZ,CAAC;EAED,MAAMQ,cAAc,GAAGN,KAAK,KAAK,cAAc;EAC/C,MAAMO,MAAM,GAAGP,KAAK,KAAK,MAAM;EAC/B,MAAMQ,SAAS,GAAGR,KAAK,KAAK,SAAS;EAErC,MAAMS,YAAY,GAAGjC,UAAU,CAAC;IAC9B,CAACQ,KAAK,CAAC0B,aAAa,GAAGF,SAAS;IAChC,CAACxB,KAAK,CAAC2B,YAAY,GAAGL,cAAc;IACpC,CAACtB,KAAK,CAAC4B,WAAW,GAAGL;EACvB,CAAC,CAAC;EAEF,MAAMM,kBAAkB,GAAGrC,UAAU,CAAC;IACpC,CAACQ,KAAK,CAAC8B,iBAAiB,GAAGP,MAAM;IACjC,CAACvB,KAAK,CAAC+B,yBAAyB,GAAGT;EACrC,CAAC,CAAC;EAEF,MAAMU,WAAW,GAAGxC,UAAU,CAAC;IAC7B,CAACQ,KAAK,CAACiC,MAAM,GAAG,IAAI;IACpB,CAACjC,KAAK,CAACkC,UAAU,GAAGX;EACtB,CAAC,CAAC;EAEF,MAAMY,mBAAmB,GAAGb,cAAc,GAAG5B,YAAY,GAAGE,UAAU;EACtE,MAAMwC,SAAS,GAAGd,cAAc;EAChC,MAAMe,aAAa,GAAG9B,KAAK,IAAIe,cAAc;EAE7C,oBACEjC,KAAA,CAAAiD,aAAA;IAAKC,SAAS,EAAEV;EAAmB,gBACjCxC,KAAA,CAAAiD,aAAA;IAAKC,SAAS,EAAEd;EAAa,gBAC3BpC,KAAA,CAAAiD,aAAA;IAAOE,OAAO,EAAC,QAAQ;IAACC,KAAK,EAAEjC;EAAY,gBACzCnB,KAAA,CAAAiD,aAAA,CAACH,mBAAmB;IAClBI,SAAS,EAAEvC,KAAK,CAAC0C,UAAW;IAC5B,aAAU,aAAa;IACvBC,WAAW,EAAE1C,eAAgB;IAC7B,cAAYiB,mBAAoB;IAChC0B,IAAI,EAAC;EAAK,CACX,CAAC,EACDR,SAAS,gBACR/C,KAAA,CAAAiD,aAAA;IAAMC,SAAS,EAAE/C,UAAU,CAACQ,KAAK,CAACyC,KAAK,EAAEI,QAAA,CAAQtC,KAAK,CAAC,IAAIP,KAAK,CAAC8C,OAAO;EAAE,GACvEtC,WACG,CAAC,GACL,IACC,CAAC,eACRnB,KAAA,CAAAiD,aAAA;IACES,GAAG,EAAEhC,QAAS;IACd,aAAU,cAAc;IACxB,eAAaE,UAAW;IACxBsB,SAAS,EAAEP,WAAY;IACvB,cAAYxB,WAAY;IACxBwC,IAAI,EAAC,MAAM;IACXC,IAAI,EAAC,QAAQ;IACbC,EAAE,EAAC,QAAQ;IACX1C,WAAW,EAAEA,WAAY;IACzBiC,KAAK,EAAEjC,WAAY;IACnBD,KAAK,EAAEA,KAAM;IACb4C,OAAO,EAAEhC,YAAa;IACtBP,OAAO,EAAEA,OAAQ;IACjBH,QAAQ,EAAAC,KAAO;IACfG,MAAM,EAAEA,MAAO;IACfC,SAAS,EAAEO;EAAc,CAC1B,CAAC,EACDgB,aAAa,gBAAGhD,KAAA,CAAAiD,aAAA,CAACxC,SAAS;IAACsD,OAAO,EAAEzC,OAAQ;IAAC4B,SAAS,EAAEvC,KAAK,CAACqD;EAAU,CAAE,CAAC,GAAG,IAC5E,CACF,CAAC;AAEV,CAAC;AAEDhD,MAAM,CAACiD,YAAY,GAAG;EACpBC,IAAI,EAAExD,QAAQ,CAACyD,iBAAiB,CAACD;AACnC,CAAC;AAEDlD,MAAM,CAACoD,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EACjBrD,KAAK,EAAEhB,SAAS,CAACsE,MAAM;EACvBrD,WAAW,EAAEjB,SAAS,CAACsE,MAAM,CAACC,UAAU;EACxCrD,QAAQ,EAAElB,SAAS,CAACwE,IAAI;EACxBpD,OAAO,EAAEpB,SAAS,CAACwE,IAAI;EACvBnD,OAAO,EAAErB,SAAS,CAACwE,IAAI;EACvBlD,MAAM,EAAEtB,SAAS,CAACwE,IAAI;EACtBjD,SAAS,EAAEvB,SAAS,CAACwE,IAAI;EACzBhD,QAAQ,EAAExB,SAAS,CAACwE,IAAI;EACxB/C,KAAK,EAAEzB,SAAS,CAACyE,KAAK,CAAC,CAAC,SAAS,EAAE,cAAc,EAAE,MAAM,CAAC,CAAC;EAC3D/C,UAAU,EAAE1B,SAAS,CAACsE,MAAM;EAC5B3C,mBAAmB,EAAE3B,SAAS,CAACsE;AACjC,CAAC;AAED,eAAexD,MAAM","ignoreList":[]}
1	+ {"version":3,"file":"index.js","names":["React","useMemo","useState","useRef","PropTypes","classnames","NovaCompositionCoorpacademySearchThin","CMSearchIcon","NovaCompositionCoorpacademySearch","SearchIcon","NovaSolidStatusClose","CloseIcon","Provider","style","handleMouseDown","e","preventDefault","stopPropagation","useHoverAndFocusWithin","isFocusWithin","setIsFocusWithin","hovered","setHovered","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","current","contains","relatedTarget","Search","props","context","value","placeholder","onChange","_noop","onClear","onKeyDown","inputRef","theme","dataTestId","searchIconAriaLabel","skin","primaryColor","_get","handleChange","target","onSearchFocus","onSearchBlur","handleKeyDown","isCoorpManager","isMooc","isDefault","wrapperClass","wrapperSearch","coorpmanager","wrapperMooc","wrapperParentClass","wrapperMoocParent","wrapperCoorpManagerParent","searchClass","search","moocSearch","SearchIconComponent","showTitle","showClearIcon","createElement","className","boxShadow","transition","undefined","htmlFor","title","searchIcon","onMouseDown","role","_isEmpty","noValue","type","name","id","onInput","onClick","clearIcon","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","isRequired","func","oneOf"],"sources":["../../../src/atom/input-search/index.js"],"sourcesContent":["import React, {useMemo, useState, useRef} 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, get} from 'lodash/fp';\nimport Provider from '../provider';\nimport style from './style.css';\n\nconst handleMouseDown = e => {\n e.preventDefault();\n e.stopPropagation();\n};\n\nfunction useHoverAndFocusWithin() {\n const [isFocusWithin, setIsFocusWithin] = useState(false);\n const [hovered, setHovered] = useState(false);\n\n const ref = useRef(null);\n\n return {\n ref,\n isFocusWithin,\n hovered,\n onMouseEnter: () => setHovered(true),\n onMouseLeave: () => setHovered(false),\n onFocus: () => setIsFocusWithin(true),\n onBlur: e => {\n if (ref.current && !ref.current.contains(e.relatedTarget)) {\n setIsFocusWithin(false);\n }\n }\n };\n}\n\nconst Search = (props, context) => {\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 searchIconAriaLabel\n } = props;\n const {skin} = context;\n const primaryColor = get('common.primary', skin);\n const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n const {\n ref,\n isFocusWithin,\n onFocus: onSearchFocus,\n onBlur: onSearchBlur,\n hovered,\n onMouseEnter,\n onMouseLeave\n } = useHoverAndFocusWithin();\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 [style.wrapperCoorpManagerParent]: isCoorpManager\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\n className={wrapperParentClass}\n ref={ref}\n onFocus={onSearchFocus}\n onBlur={onSearchBlur}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n >\n <div\n className={wrapperClass}\n style={\n isMooc\n ? {\n boxShadow:\n isFocusWithin \|\| hovered\n ? `0 0 0 2px ${primaryColor}`\n : `0 0 0 2px white, 0 0 0 2px ${primaryColor}`,\n transition: 'box-shadow 0.3s ease-in-out'\n }\n : undefined\n }\n >\n <label htmlFor=\"search\" title={placeholder}>\n <SearchIconComponent\n className={style.searchIcon}\n data-name=\"search-icon\"\n onMouseDown={handleMouseDown}\n aria-label={searchIconAriaLabel}\n role=\"img\"\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 searchIconAriaLabel: PropTypes.string\n};\n\nexport default Search;\n"],"mappings":"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","ignoreList":[]}

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

@@ -14,7 +14,6 @@
 @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;
@@ -188,7 +187,6 @@
   align-items: center;
   overflow: hidden;
   border-radius: 12px;
-  transition: box-shadow 0.3s ease-in-out;
   background: cm_grey_100;
   padding: 2px;
   width: 100%;
@@ -227,12 +225,8 @@
 .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;

package/es/atom/input-select/index.d.ts CHANGED Viewed

@@ -1,5 +1,47 @@
-import React from 'react';
+/// <reference types="react" />
+import { WebContextValues } from '../provider/web-context';
 import type { InputSelectProps } from './types';
-declare const InputSelect: React.FC<InputSelectProps>;
+declare const InputSelect: {
+    (props: InputSelectProps, context: WebContextValues): JSX.Element;
+    propTypes: {
+        options: import("prop-types").Validator<Required<import("prop-types").InferProps<{
+            value: import("prop-types").Validator<string>;
+            label: import("prop-types").Validator<string>;
+            icon: import("prop-types").Requireable<string>;
+            'data-name': import("prop-types").Requireable<string>;
+        }>>[]>;
+        value: import("prop-types").Requireable<string>;
+        onChange: import("prop-types").Validator<(...args: any[]) => any>;
+        placeholder: import("prop-types").Requireable<string>;
+        className: import("prop-types").Requireable<string>;
+        'aria-label': import("prop-types").Requireable<string>;
+        iconClosed: import("prop-types").Requireable<string>;
+        selectedIcon: import("prop-types").Requireable<string>;
+        'button-data-testid': import("prop-types").Requireable<string>;
+    };
+    contextTypes: {
+        skin: import("prop-types").Requireable<import("prop-types").InferProps<{
+            common: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            images: import("prop-types").Requireable<import("prop-types").InferProps<{
+                'logo-mobile': import("prop-types").Requireable<any>;
+                logo: import("prop-types").Requireable<any>;
+                'logo-email': import("prop-types").Requireable<any>;
+                login: import("prop-types").Requireable<any>;
+            }>>;
+            icons: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            mod: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            courses: import("prop-types").Requireable<any[]>;
+            texts: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
+    };
+};
 export default InputSelect;
 //# sourceMappingURL=index.d.ts.map

package/es/atom/input-select/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-select/index.tsx"],"names":[],"mappings":"~~AAAA~~,OAAO,~~KAAsC~~,MAAM,~~OAAO~~,CAAC;~~AAK3D~~,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAK9C,QAAA,MAAM,WAAW,~~EAAE~~,~~KAAK~~,~~CAAC,EAAE,CAAC,~~gBAAgB,~~CAiH3C,~~CAAC;~~AAIF~~,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-select/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAC,gBAAgB,EAAC,MAAM,yBAAyB,CAAC;AAGzD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAK9C,QAAA,MAAM,WAAW;YAAW,gBAAgB,WAAW,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHtE,CAAC;AAMF,eAAe,WAAW,CAAC"}

package/es/atom/input-select/index.js CHANGED Viewed

@@ -1,20 +1,25 @@
+import _get from "lodash/fp/get";
 import React, { useState, useRef, useCallback } from 'react';
 import classnames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Provider, { GetSkinFromContext } from '../provider';
 import style from './style.css';
 import propTypes from './types';
 const COMPONENT_ID = 'input-select';
-const InputSelect = ({
-  options = [],
-  value,
-  onChange,
-  placeholder,
-  className,
-  'aria-label': ariaLabel,
-  iconClosed = 'chevron-down',
-  selectedIcon = 'circle-check',
-  'button-data-testid': buttonDataTestId = 'select-input'
-}) => {
+const InputSelect = (props, context) => {
+  const {
+    options = [],
+    value,
+    onChange,
+    placeholder,
+    className,
+    'aria-label': ariaLabel,
+    iconClosed = 'chevron-down',
+    selectedIcon = 'circle-check',
+    'button-data-testid': buttonDataTestId = 'select-input'
+  } = props;
+  const skin = GetSkinFromContext(context);
+  const primaryColor = _get('common.primary', skin);
   const [open, setOpen] = useState(false);
   const wrapperRef = useRef(null);
   const componentId = `${COMPONENT_ID}-${placeholder?.toLowerCase().replace(/\s+/g, '-') || 'default'}`;
@@ -49,14 +54,20 @@ const InputSelect = ({
       onClick: handleClick,
       "data-testid": `option-${option.value}`,
       "data-name": option['data-name']
-    }, /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.backgroundOption,
+      style: {
+        backgroundColor: primaryColor
+      }
+    }), /*#__PURE__*/React.createElement("span", {
       className: style.optionIcon
     }, option.icon), /*#__PURE__*/React.createElement("span", {
       className: style.optionLabel
     }, option.label), isSelected ? /*#__PURE__*/React.createElement("span", {
       className: style.checkIcon
     }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: selectedIcon
+      icon: selectedIcon,
+      color: primaryColor
     })) : null);
   };
   const shouldBeScrollable = options.length > 6;
@@ -64,10 +75,13 @@ const InputSelect = ({
     className: style.container,
     ref: wrapperRef
   }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      boxShadow: open ? `0 0 0 2px white, 0 0 0 4px${primaryColor}` : `0 0 0 2px ${primaryColor}`
+    },
     className: classnames(style.outerWrapper, {
       [style.open]: open
     })
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: classnames(style.wrapper, className),
     "aria-label": ariaLabel
   }, /*#__PURE__*/React.createElement("button", {
@@ -94,7 +108,7 @@ const InputSelect = ({
       [style.rotated]: open
     }),
     icon: iconClosed
-  }))))), open ? /*#__PURE__*/React.createElement("div", {
+  })))), open ? /*#__PURE__*/React.createElement("div", {
     className: classnames(style.menuWrapper, {
       [style.showFade]: shouldBeScrollable
     })
@@ -105,5 +119,8 @@ const InputSelect = ({
   }, options.map(renderOption))) : null);
 };
 InputSelect.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+InputSelect.contextTypes = {
+  skin: Provider.childContextTypes.skin
+};
 export default InputSelect;
 //# sourceMappingURL=index.js.map

package/es/atom/input-select/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["React","useState","useRef","useCallback","classnames","FontAwesomeIcon","style","propTypes","COMPONENT_ID","InputSelect","options","value","onChange","placeholder","className","ariaLabel","iconClosed","selectedIcon","buttonDataTestId","open","setOpen","wrapperRef","componentId","toLowerCase","replace","handleToggle","o","handleOnOptionClick","optionValue","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","selectedOption","find","opt","renderOption","option","handleClick","isSelected","createElement","key","selected","role","onClick","optionIcon","icon","optionLabel","label","checkIcon","shouldBeScrollable","length","container","ref","outerWrapper","wrapper","type","display","undefined","id","content","iconWrapper","rotated","menuWrapper","showFade","menu","map","process","env","NODE_ENV"],"sources":["../../../src/atom/input-select/index.tsx"],"sourcesContent":["import React, {useState, useRef, useCallback} from 'react';\nimport classnames from 'classnames';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {IconName} from '@fortawesome/fontawesome-svg-core';\nimport style from './style.css';\nimport type {InputSelectProps} from './types';\nimport propTypes from './types';\n\nconst COMPONENT_ID = 'input-select';\n\nconst InputSelect: React.FC<InputSelectProps> = ({\n options = [],\n value,\n onChange,\n placeholder,\n className,\n 'aria-label': ariaLabel,\n iconClosed = 'chevron-down',\n selectedIcon = 'circle-check',\n 'button-data-testid': buttonDataTestId = 'select-input'\n}) => {\n const [open, setOpen] = useState(false);\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n const componentId = `${COMPONENT_ID}-${\n placeholder?.toLowerCase().replace(/\\s+/g, '-') \|\| 'default'\n }`;\n\n const handleToggle = useCallback(() => {\n setOpen(o => !o);\n }, []);\n\n const handleOnOptionClick = useCallback(\n (optionValue: string) => {\n onChange(optionValue);\n setOpen(false);\n },\n [onChange]\n );\n\n React.useEffect(() => {\n if (!open) return;\n const handleClickOutside = (event: MouseEvent) => {\n if (!wrapperRef.current?.contains(event.target as Node)) {\n setOpen(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [open]);\n\n const selectedOption = options.find(opt => opt.value === value);\n\n const renderOption = (option: InputSelectProps['options'][0]) => {\n function handleClick() {\n handleOnOptionClick(option.value);\n }\n\n const isSelected = option.value === value;\n\n return (\n <li\n key={option.value}\n className={classnames(style.option, isSelected && style.selected)}\n role=\"option\"\n aria-selected={isSelected}\n onClick={handleClick}\n data-testid={`option-${option.value}`}\n data-name={option['data-name']}\n >\n <span className={style.optionIcon}>{option.icon}</span>\n <span className={style.optionLabel}>{option.label}</span>\n {isSelected ? (\n <span className={style.checkIcon}>\n <FontAwesomeIcon icon={selectedIcon as IconName} />\n </span>\n ) : null}\n </li>\n );\n };\n\n const shouldBeScrollable = options.length > 6;\n\n return (\n <div className={style.container} ref={wrapperRef}>\n <div\n className={classnames(style.outerWrapper, {\n [style.open]: open\n })}\n >\n <div className={classnames(style.wrapper, className)} aria-label={ariaLabel}>\n <button\n type=\"button\"\n className={style.display}\n onClick={handleToggle}\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-controls={open ? `${componentId}-listbox` : undefined}\n id={componentId}\n data-testid={buttonDataTestId}\n >\n <div className={style.content}>\n <span className={style.label}>{placeholder}</span>\n {selectedOption ? <span className={style.value}>{selectedOption.label}</span> : null}\n </div>\n <span className={classnames(style.iconWrapper, {[style.open]: open})}>\n <FontAwesomeIcon\n className={classnames(style.icon, {[style.rotated]: open})}\n icon={iconClosed as IconName}\n />\n </span>\n </button>\n </div>\n </div>\n {open ? (\n <div className={classnames(style.menuWrapper, {[style.showFade]: shouldBeScrollable})}>\n <ul id={`${componentId}-listbox`} className={style.menu} role=\"listbox\">\n {options.map(renderOption)}\n </ul>\n </div>\n ) : null}\n </div>\n );\n};\n\nInputSelect.propTypes = propTypes;\n\nexport default InputSelect;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"index.js","names":["React","useState","useRef","useCallback","classnames","FontAwesomeIcon","Provider","GetSkinFromContext","style","propTypes","COMPONENT_ID","InputSelect","props","context","options","value","onChange","placeholder","className","ariaLabel","iconClosed","selectedIcon","buttonDataTestId","skin","primaryColor","_get","open","setOpen","wrapperRef","componentId","toLowerCase","replace","handleToggle","o","handleOnOptionClick","optionValue","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","selectedOption","find","opt","renderOption","option","handleClick","isSelected","createElement","key","selected","role","onClick","backgroundOption","backgroundColor","optionIcon","icon","optionLabel","label","checkIcon","color","shouldBeScrollable","length","container","ref","boxShadow","outerWrapper","wrapper","type","display","undefined","id","content","iconWrapper","rotated","menuWrapper","showFade","menu","map","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/atom/input-select/index.tsx"],"sourcesContent":["import React, {useState, useRef, useCallback} from 'react';\nimport classnames from 'classnames';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {IconName} from '@fortawesome/fontawesome-svg-core';\nimport {get} from 'lodash/fp';\nimport {WebContextValues} from '../provider/web-context';\nimport Provider, {GetSkinFromContext} from '../provider';\nimport style from './style.css';\nimport type {InputSelectProps} from './types';\nimport propTypes from './types';\n\nconst COMPONENT_ID = 'input-select';\n\nconst InputSelect = (props: InputSelectProps, context: WebContextValues) => {\n const {\n options = [],\n value,\n onChange,\n placeholder,\n className,\n 'aria-label': ariaLabel,\n iconClosed = 'chevron-down',\n selectedIcon = 'circle-check',\n 'button-data-testid': buttonDataTestId = 'select-input'\n } = props;\n const skin = GetSkinFromContext(context);\n const primaryColor = get('common.primary', skin);\n const [open, setOpen] = useState(false);\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n const componentId = `${COMPONENT_ID}-${\n placeholder?.toLowerCase().replace(/\\s+/g, '-') \|\| 'default'\n }`;\n\n const handleToggle = useCallback(() => {\n setOpen(o => !o);\n }, []);\n\n const handleOnOptionClick = useCallback(\n (optionValue: string) => {\n onChange(optionValue);\n setOpen(false);\n },\n [onChange]\n );\n\n React.useEffect(() => {\n if (!open) return;\n const handleClickOutside = (event: MouseEvent) => {\n if (!wrapperRef.current?.contains(event.target as Node)) {\n setOpen(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [open]);\n\n const selectedOption = options.find(opt => opt.value === value);\n\n const renderOption = (option: InputSelectProps['options'][0]) => {\n function handleClick() {\n handleOnOptionClick(option.value);\n }\n\n const isSelected = option.value === value;\n\n return (\n <li\n key={option.value}\n className={classnames(style.option, isSelected && style.selected)}\n role=\"option\"\n aria-selected={isSelected}\n onClick={handleClick}\n data-testid={`option-${option.value}`}\n data-name={option['data-name']}\n >\n <div className={style.backgroundOption} style={{backgroundColor: primaryColor}} />\n <span className={style.optionIcon}>{option.icon}</span>\n <span className={style.optionLabel}>{option.label}</span>\n {isSelected ? (\n <span className={style.checkIcon}>\n <FontAwesomeIcon icon={selectedIcon as IconName} color={primaryColor} />\n </span>\n ) : null}\n </li>\n );\n };\n\n const shouldBeScrollable = options.length > 6;\n\n return (\n <div className={style.container} ref={wrapperRef}>\n <div\n style={{\n boxShadow: open\n ? `0 0 0 2px white, 0 0 0 4px${primaryColor}`\n : `0 0 0 2px ${primaryColor}`\n }}\n className={classnames(style.outerWrapper, {\n [style.open]: open\n })}\n />\n <div className={classnames(style.wrapper, className)} aria-label={ariaLabel}>\n <button\n type=\"button\"\n className={style.display}\n onClick={handleToggle}\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-controls={open ? `${componentId}-listbox` : undefined}\n id={componentId}\n data-testid={buttonDataTestId}\n >\n <div className={style.content}>\n <span className={style.label}>{placeholder}</span>\n {selectedOption ? <span className={style.value}>{selectedOption.label}</span> : null}\n </div>\n <span className={classnames(style.iconWrapper, {[style.open]: open})}>\n <FontAwesomeIcon\n className={classnames(style.icon, {[style.rotated]: open})}\n icon={iconClosed as IconName}\n />\n </span>\n </button>\n </div>\n {open ? (\n <div className={classnames(style.menuWrapper, {[style.showFade]: shouldBeScrollable})}>\n <ul id={`${componentId}-listbox`} className={style.menu} role=\"listbox\">\n {options.map(renderOption)}\n </ul>\n </div>\n ) : null}\n </div>\n );\n};\n\nInputSelect.propTypes = propTypes;\nInputSelect.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\nexport default InputSelect;\n"],"mappings":"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","ignoreList":[]}

package/es/atom/input-select/style.css CHANGED Viewed

@@ -6,7 +6,6 @@
 @value cm_negative_300 from colors;
 @value white from colors;
 @value cm_grey_100 from colors;
-@value brand from colors;
 @value cm_primary_blue from colors;
 @value primary_100 from colors;
 @value cm_blue_50 from colors;
@@ -23,15 +22,18 @@
 .outerWrapper {
   width: 100%;
   border-radius: 12px;
-  transition: box-shadow 0.2s;
+  transition: all 0.2s;
+  opacity: 0;
+  position: absolute;
+  height: 100%;
 }
-.outerWrapper:hover {
-  box-shadow: 0 0 0 2px brand;
+.container:hover  .outerWrapper {
+  opacity: 1;
 }
 .outerWrapper.open {
-  box-shadow: 0 0 0 2px white, 0 0 0 4px brand;
+  opacity: 1;
 }
 .wrapper {
@@ -157,17 +159,26 @@
   box-sizing: border-box;
   border-radius: 12px;
   margin-bottom: 4px;
+  position: relative;
+  overflow: hidden;
 }
-.option.selected {
-  background-color: color(brand lightness(95%));
+.option.selected .backgroundOption{
+  opacity: 0.1;
 }
-.option.selected:hover,
-.option.selected:focus {
-  background-color: color(brand lightness(90%));
+.option.selected:hover .backgroundOption,
+.option.selected:focus .backgroundOption{
+  opacity: 0.2;
+}
+.backgroundOption {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0
 }
 .option:hover:not(.selected),
 .option:focus:not(.selected) {
   background: cm_grey_100;
@@ -193,7 +204,6 @@
 }
 .checkIcon {
-  color: brand;
   display: inline-flex;
   align-items: center;
 }

package/es/organism/mooc-header/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/mooc-header/index.js"],"names":[],"mappings":";AAuBA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAyGE;IAEF;;;;;;;;;;;;;;;;;;;;;;;MAGE;IAEF,wBAiCC;IA/BC,kBAAuD;IACvD;;;;;;;MAOC;IA8FH,6BAIC;IAED,yBAGC;IAxBD,qCAQC;IAED,wBAGC;IAjBD,+BAEC;IA4BD,2BAgBC;IAED,0BAKC;IAED,sBAIC;IAED,qBAoBC;IAaD,yBAQC;IAED,0BAQC;IAED,0BAIC;IAED,2BAIC;IAED,iCAUC;IAED,sCAKC;IAzMC,kBAAwB;IACxB,oBAA0B;IA0B5B,gCAEC;IAED,kCAEC;IAED,qCAqBC;IAqFD,sCASC;IA9ID,0BAEC;IAED,2EASC;IAED,6BAEC;IAkCC,kBAAsB;IAgJxB,0DAcE;IAEF,~~6BA6iBC~~;CACF"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/mooc-header/index.js"],"names":[],"mappings":";AAuBA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAyGE;IAEF;;;;;;;;;;;;;;;;;;;;;;;MAGE;IAEF,wBAiCC;IA/BC,kBAAuD;IACvD;;;;;;;MAOC;IA8FH,6BAIC;IAED,yBAGC;IAxBD,qCAQC;IAED,wBAGC;IAjBD,+BAEC;IA4BD,2BAgBC;IAED,0BAKC;IAED,sBAIC;IAED,qBAoBC;IAaD,yBAQC;IAED,0BAQC;IAED,0BAIC;IAED,2BAIC;IAED,iCAUC;IAED,sCAKC;IAzMC,kBAAwB;IACxB,oBAA0B;IA0B5B,gCAEC;IAED,kCAEC;IAED,qCAqBC;IAqFD,sCASC;IA9ID,0BAEC;IAED,2EASC;IAED,6BAEC;IAkCC,kBAAsB;IAgJxB,0DAcE;IAEF,6BAmjBC;CACF"}

package/es/organism/mooc-header/index.js CHANGED Viewed

@@ -586,8 +586,14 @@ class MoocHeader extends React.Component {
         ref: this.setMenuSettings
       }, /*#__PURE__*/React.createElement("div", {
         "data-name": "user-avatar-wrapper",
-        className: classnames(style.userAvatarWrapper, isSettingsOpen && style.userAvatarOpen)
-      }, /*#__PURE__*/React.createElement(Link, {
+        className: style.userAvatarWrapper
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classnames(style.userAvatarBoxShadow, isSettingsOpen && style.open),
+        style: {
+          boxShadow: isSettingsOpen ? `0 0 0 1px white, 0 0 0 3px ${primaryColor}` : `0 0 0 2px ${primaryColor}`,
+          transition: 'box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1)'
+        }
+      }), /*#__PURE__*/React.createElement(Link, {
         className: classnames(style.userLinkAvatar),
         onClick: this.handleSettingsToggle,
         "aria-expanded": isSettingsOpen,