@coorpacademy/components 11.10.3 → 11.10.4-alpha.7

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

@@ -80,7 +80,8 @@ const InputSwitch = props => {
     "aria-labelledby": `title-view-${dataName}`
   }), /*#__PURE__*/React.createElement("label", {
     htmlFor: idSwitch,
-    "data-name": "input-switch-label"
+    "data-name": "input-switch-label",
+    tabIndex: 0
   }))), /*#__PURE__*/React.createElement("div", {
     className: !details ? style.alignedTextContainer : null
   }, titlePosition === 'right' ? /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","getClassState","style","InputSwitch","props","title","name","id","value","disabled","onChange","description","modified","theme","titlePosition","details","requiredSelection","dataName","idSwitch","isDisabled","handleChange","e","target","checked","titleView","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","partielUncheck","default","className","btnSwitchContainer","checkbox","alignedTextContainer","detailsTxt","propTypes","string","bool","func","oneOf"],"sources":["../../../src/atom/input-switch/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst InputSwitch = props => {\n  const {\n    title,\n    name,\n    id,\n    value,\n    disabled,\n    onChange = noop,\n    description,\n    modified = false,\n    theme = 'default',\n    titlePosition = 'left',\n    details = '',\n    requiredSelection = false,\n    'data-name': dataName\n  } = props;\n\n  const idSwitch = id || uniqueId('input-switch-');\n  const isDisabled = disabled ? 'disabled' : '';\n  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n  const titleView = title ? <span className={style.title}>{`${title} `}</span> : null;\n\n  const descriptionView = description ? (\n    <div className={style.description}>{description}</div>\n  ) : null;\n\n  const getClass = () => {\n    switch (theme) {\n      case 'coorpmanager':\n        return {\n          defaultClass: style.coorpmanager,\n          modifiedClass: style.coorpmanagerModified\n        };\n      case 'mooc':\n        return {\n          defaultClass: style.partielUncheck,\n          modifiedClass: style.coorpmanagerModified\n        };\n      default:\n        return {defaultClass: style.default, modifiedClass: style.modified};\n    }\n  };\n  const {defaultClass, modifiedClass} = getClass();\n  const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n  return (\n    <div className={className} data-name={`switch-input-${theme}${dataName}`}>\n      {titlePosition === 'left' ? <div id={`title-view-${dataName}`}>{titleView} </div> : null}\n      <div className={requiredSelection ? style.requiredSelection : null}>\n        <div className={style.btnSwitchContainer}>\n          <input\n            type=\"checkbox\"\n            id={idSwitch}\n            name={name}\n            onChange={handleChange}\n            checked={value}\n            disabled={isDisabled}\n            className={style.checkbox}\n            aria-labelledby={`title-view-${dataName}`}\n          />\n          <label htmlFor={idSwitch} data-name=\"input-switch-label\" />\n        </div>\n      </div>\n      <div className={!details ? style.alignedTextContainer : null}>\n        {titlePosition === 'right' ? <div id={`title-view-${dataName}`}>{titleView} </div> : null}\n        {details ? <div className={style.detailsTxt}>{details}</div> : null}\n      </div>\n      {descriptionView}\n    </div>\n  );\n};\n\nInputSwitch.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  id: PropTypes.string,\n  value: PropTypes.bool,\n  disabled: PropTypes.bool,\n  onChange: PropTypes.func,\n  description: PropTypes.string,\n  modified: PropTypes.bool,\n  titlePosition: PropTypes.oneOf(['right', 'left']),\n  theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),\n  details: PropTypes.string,\n  'data-name': PropTypes.string,\n  requiredSelection: PropTypes.bool\n};\nexport default InputSwitch;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","getClassState","style","InputSwitch","props","title","name","id","value","disabled","onChange","description","modified","theme","titlePosition","details","requiredSelection","dataName","idSwitch","isDisabled","handleChange","e","target","checked","titleView","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","partielUncheck","default","className","btnSwitchContainer","checkbox","alignedTextContainer","detailsTxt","propTypes","string","bool","func","oneOf"],"sources":["../../../src/atom/input-switch/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst InputSwitch = props => {\n  const {\n    title,\n    name,\n    id,\n    value,\n    disabled,\n    onChange = noop,\n    description,\n    modified = false,\n    theme = 'default',\n    titlePosition = 'left',\n    details = '',\n    requiredSelection = false,\n    'data-name': dataName\n  } = props;\n\n  const idSwitch = id || uniqueId('input-switch-');\n  const isDisabled = disabled ? 'disabled' : '';\n  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n  const titleView = title ? <span className={style.title}>{`${title} `}</span> : null;\n\n  const descriptionView = description ? (\n    <div className={style.description}>{description}</div>\n  ) : null;\n\n  const getClass = () => {\n    switch (theme) {\n      case 'coorpmanager':\n        return {\n          defaultClass: style.coorpmanager,\n          modifiedClass: style.coorpmanagerModified\n        };\n      case 'mooc':\n        return {\n          defaultClass: style.partielUncheck,\n          modifiedClass: style.coorpmanagerModified\n        };\n      default:\n        return {defaultClass: style.default, modifiedClass: style.modified};\n    }\n  };\n  const {defaultClass, modifiedClass} = getClass();\n  const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n  return (\n    <div className={className} data-name={`switch-input-${theme}${dataName}`}>\n      {titlePosition === 'left' ? <div id={`title-view-${dataName}`}>{titleView} </div> : null}\n      <div className={requiredSelection ? style.requiredSelection : null}>\n        <div className={style.btnSwitchContainer}>\n          <input\n            type=\"checkbox\"\n            id={idSwitch}\n            name={name}\n            onChange={handleChange}\n            checked={value}\n            disabled={isDisabled}\n            className={style.checkbox}\n            aria-labelledby={`title-view-${dataName}`}\n          />\n          <label htmlFor={idSwitch} data-name=\"input-switch-label\" tabIndex={0} />\n        </div>\n      </div>\n      <div className={!details ? style.alignedTextContainer : null}>\n        {titlePosition === 'right' ? <div id={`title-view-${dataName}`}>{titleView} </div> : null}\n        {details ? <div className={style.detailsTxt}>{details}</div> : null}\n      </div>\n      {descriptionView}\n    </div>\n  );\n};\n\nInputSwitch.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  id: PropTypes.string,\n  value: PropTypes.bool,\n  disabled: PropTypes.bool,\n  onChange: PropTypes.func,\n  description: PropTypes.string,\n  modified: PropTypes.bool,\n  titlePosition: PropTypes.oneOf(['right', 'left']),\n  theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),\n  details: PropTypes.string,\n  'data-name': PropTypes.string,\n  requiredSelection: PropTypes.bool\n};\nexport default InputSwitch;\n"],"mappings":"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"}

package/es/atom/link/index.d.ts

@@ -1,6 +1,7 @@
 export default Link;
-declare class Link extends React.Component<any, any, any> {
-    static propTypes: {
+declare function Link(props: any, legacyContext: any): JSX.Element;
+declare namespace Link {
+    const propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
         href: PropTypes.Requireable<string>;
@@ -15,8 +16,8 @@ declare class Link extends React.Component<any, any, any> {
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
         style: PropTypes.Requireable<PropTypes.InferProps<{}>>;
     };
-    static contextTypes: {
-        skin: PropTypes.Requireable<PropTypes.InferProps<{
+    namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
             common: PropTypes.Requireable<{
                 [x: string]: any;
             }>;
@@ -37,20 +38,11 @@ declare class Link extends React.Component<any, any, any> {
                 [x: string]: any;
             }>;
         }>>;
-        history: PropTypes.Requireable<PropTypes.InferProps<{
+        const history: PropTypes.Requireable<PropTypes.InferProps<{
             createHref: PropTypes.Requireable<(...args: any[]) => any>;
             push: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
-    };
-    constructor(props: any);
-    state: {
-        hovered: boolean;
-    };
-    handleMouseEnter: () => void;
-    handleMouseLeave: () => void;
-    handleOnClick: (e: any) => void;
-    render(): JSX.Element;
+    }
 }
-import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/atom/link/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/link/index.js"],"names":[],"mappings":";AAMA;IACE;;;;;;;;;;;;;;MAcE;IAEF;;;;;;;;;;;;;;;;;;;;;;;;;;MAGE;IAEF,wBAKC;IAHC;;MAEC;IAGH,6BAQE;IAEF,6BAQE;IAEF,gCASE;IAEF,sBA2CC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/link/index.js"],"names":[],"mappings":";AAMA,mEA+EC"}

package/es/atom/link/index.js

@@ -7,107 +7,77 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import React from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import Provider from '../provider';
+import Provider, { GetSkinFromContext } from '../provider';
 import pushToHistory from '../../util/navigation';
 
-class Link extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.handleMouseEnter = () => {
-      const {
-        onMouseEnter = _noop
-      } = this.props;
-      this.setState({
-        hovered: true
-      });
-      onMouseEnter();
-    };
-
-    this.handleMouseLeave = () => {
-      const {
-        onMouseLeave = _noop
-      } = this.props;
-      this.setState({
-        hovered: false
-      });
-      onMouseLeave();
-    };
-
-    this.handleOnClick = e => {
-      const {
-        onClick = _noop,
-        download
-      } = this.props;
-      onClick(e);
-
-      if (!download) {
-        const navigate = pushToHistory(this.context)(this.props);
-        navigate(e);
-      }
-    };
-
-    this.state = {
-      hovered: false
-    };
-  }
-
-  render() {
-    const {
-      skin,
-      history: {
-        createHref = _identity
-      } = {}
-    } = this.context;
-
-    const _this$props = this.props,
-          {
-      skinHover,
-      hoverColor = _getOr('#00B0FF', 'common.primary', skin),
-      'data-name': dataName = 'link',
-      'aria-label': ariaLabel
-    } = _this$props,
-          aProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
-
-    const {
-      href,
-      onClick,
-      className,
-      style: propsStyle,
-      children
-    } = this.props;
-    const {
-      hovered
-    } = this.state;
-
-    const _style = href || onClick ? null : {
-      pointerEvents: 'none'
-    };
-
-    const _hoverStyle = skinHover && hovered ? {
-      color: hoverColor
-    } : null;
-
-    return /*#__PURE__*/React.createElement("a", _extends({}, aProps, {
-      "data-name": dataName,
-      "aria-label": ariaLabel,
-      href: href ? createHref(href) : undefined,
-      onClick: this.handleOnClick,
-      onMouseEnter: this.handleMouseEnter,
-      onMouseLeave: this.handleMouseLeave,
-      className: className,
-      style: _extends({}, propsStyle, _style, _hoverStyle)
-    }), children);
-  }
-
-}
-
-Link.contextTypes = {
-  skin: Provider.childContextTypes.skin,
-  history: Provider.childContextTypes.history
+const Link = (props, legacyContext) => {
+  const skin = GetSkinFromContext(legacyContext);
+  const [hovered, setHovered] = useState(false);
+  const {
+    history: {
+      createHref = _identity
+    } = {}
+  } = legacyContext;
+
+  const {
+    skinHover,
+    hoverColor = _getOr('#00B0FF', 'common.primary', skin),
+    'data-name': dataName = 'link',
+    'aria-label': ariaLabel
+  } = props,
+        linKElementProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const {
+    href,
+    onClick = _noop,
+    className,
+    style: propsStyle,
+    children,
+    onMouseLeave = _noop,
+    onMouseEnter = _noop,
+    download
+  } = props;
+  const handleMouseEnter = useCallback(() => {
+    setHovered(true);
+    onMouseEnter();
+  }, [onMouseEnter]);
+  const handleMouseLeave = useCallback(() => {
+    setHovered(false);
+    onMouseLeave();
+  }, [onMouseLeave]);
+  const navigate = useMemo(() => pushToHistory(legacyContext)({
+    href
+  }), [href, legacyContext]);
+  const handleOnClick = useCallback(e => {
+    onClick(e);
+
+    if (!download) {
+      navigate(e);
+    }
+  }, [download, navigate, onClick]);
+
+  const _style = href || onClick ? null : {
+    pointerEvents: 'none'
+  };
+
+  const _hoverStyle = skinHover && hovered ? {
+    color: hoverColor
+  } : null;
+
+  return /*#__PURE__*/React.createElement("a", _extends({}, linKElementProps, {
+    "data-name": dataName,
+    "aria-label": ariaLabel,
+    href: href ? createHref(href) : undefined,
+    onClick: handleOnClick,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    className: className,
+    style: _extends({}, propsStyle, _style, _hoverStyle)
+  }), children);
 };
+
 Link.propTypes = process.env.NODE_ENV !== "production" ? {
   children: PropTypes.node,
   className: PropTypes.string,
@@ -123,5 +93,9 @@ Link.propTypes = process.env.NODE_ENV !== "production" ? {
   onMouseLeave: PropTypes.func,
   style: PropTypes.shape({})
 } : {};
+Link.contextTypes = {
+  skin: Provider.childContextTypes.skin,
+  history: Provider.childContextTypes.history
+};
 export default Link;
 //# sourceMappingURL=index.js.map

package/es/atom/link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","Provider","pushToHistory","Link","Component","constructor","props","handleMouseEnter","onMouseEnter","setState","hovered","handleMouseLeave","onMouseLeave","handleOnClick","e","onClick","download","navigate","context","state","render","skin","history","createHref","skinHover","hoverColor","dataName","ariaLabel","aProps","href","className","style","propsStyle","children","_style","pointerEvents","_hoverStyle","color","undefined","contextTypes","childContextTypes","propTypes","node","string","target","oneOf","bool","func","shape"],"sources":["../../../src/atom/link/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {identity, getOr, noop} from 'lodash/fp';\nimport Provider from '../provider';\nimport pushToHistory from '../../util/navigation';\n\nclass Link extends React.Component {\n  static propTypes = {\n    children: PropTypes.node,\n    className: PropTypes.string,\n    href: PropTypes.string,\n    'data-name': PropTypes.string,\n    'aria-label': PropTypes.string,\n    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n    skinHover: PropTypes.bool,\n    hoverColor: PropTypes.string,\n    download: PropTypes.bool,\n    onClick: PropTypes.func,\n    onMouseEnter: PropTypes.func,\n    onMouseLeave: PropTypes.func,\n    style: PropTypes.shape({})\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin,\n    history: Provider.childContextTypes.history\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false\n    };\n  }\n\n  handleMouseEnter = () => {\n    const {onMouseEnter = noop} = this.props;\n\n    this.setState({\n      hovered: true\n    });\n\n    onMouseEnter();\n  };\n\n  handleMouseLeave = () => {\n    const {onMouseLeave = noop} = this.props;\n\n    this.setState({\n      hovered: false\n    });\n\n    onMouseLeave();\n  };\n\n  handleOnClick = e => {\n    const {onClick = noop, download} = this.props;\n\n    onClick(e);\n\n    if (!download) {\n      const navigate = pushToHistory(this.context)(this.props);\n      navigate(e);\n    }\n  };\n\n  render() {\n    const {skin, history: {createHref = identity} = {}} = this.context;\n    const {\n      skinHover,\n      hoverColor = getOr('#00B0FF', 'common.primary', skin),\n      'data-name': dataName = 'link',\n      'aria-label': ariaLabel,\n      ...aProps\n    } = this.props;\n    const {href, onClick, className, style: propsStyle, children} = this.props;\n    const {hovered} = this.state;\n    const _style =\n      href || onClick\n        ? null\n        : {\n            pointerEvents: 'none'\n          };\n    const _hoverStyle =\n      skinHover && hovered\n        ? {\n            color: hoverColor\n          }\n        : null;\n\n    return (\n      <a\n        {...aProps}\n        data-name={dataName}\n        aria-label={ariaLabel}\n        href={href ? createHref(href) : undefined}\n        onClick={this.handleOnClick}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        className={className}\n        style={{\n          ...propsStyle,\n          ..._style,\n          ..._hoverStyle\n        }}\n      >\n        {children}\n      </a>\n    );\n  }\n}\n\nexport default Link;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","PropTypes","Provider","GetSkinFromContext","pushToHistory","Link","props","legacyContext","skin","hovered","setHovered","history","createHref","skinHover","hoverColor","dataName","ariaLabel","linKElementProps","href","onClick","className","style","propsStyle","children","onMouseLeave","onMouseEnter","download","handleMouseEnter","handleMouseLeave","navigate","handleOnClick","e","_style","pointerEvents","_hoverStyle","color","undefined","propTypes","node","string","target","oneOf","bool","func","shape","contextTypes","childContextTypes"],"sources":["../../../src/atom/link/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {identity, getOr, noop} from 'lodash/fp';\nimport Provider, {GetSkinFromContext} from '../provider';\nimport pushToHistory from '../../util/navigation';\n\nconst Link = (props, legacyContext) => {\n  const skin = GetSkinFromContext(legacyContext);\n  const [hovered, setHovered] = useState(false);\n  const {history: {createHref = identity} = {}} = legacyContext;\n  const {\n    skinHover,\n    hoverColor = getOr('#00B0FF', 'common.primary', skin),\n    'data-name': dataName = 'link',\n    'aria-label': ariaLabel,\n    ...linKElementProps\n  } = props;\n  const {\n    href,\n    onClick = noop,\n    className,\n    style: propsStyle,\n    children,\n    onMouseLeave = noop,\n    onMouseEnter = noop,\n    download\n  } = props;\n\n  const handleMouseEnter = useCallback(() => {\n    setHovered(true);\n\n    onMouseEnter();\n  }, [onMouseEnter]);\n\n  const handleMouseLeave = useCallback(() => {\n    setHovered(false);\n\n    onMouseLeave();\n  }, [onMouseLeave]);\n\n  const navigate = useMemo(() => pushToHistory(legacyContext)({href}), [href, legacyContext]);\n\n  const handleOnClick = useCallback(\n    e => {\n      onClick(e);\n\n      if (!download) {\n        navigate(e);\n      }\n    },\n    [download, navigate, onClick]\n  );\n\n  const _style =\n    href || onClick\n      ? null\n      : {\n          pointerEvents: 'none'\n        };\n  const _hoverStyle =\n    skinHover && hovered\n      ? {\n          color: hoverColor\n        }\n      : null;\n\n  return (\n    <a\n      {...linKElementProps}\n      data-name={dataName}\n      aria-label={ariaLabel}\n      href={href ? createHref(href) : undefined}\n      onClick={handleOnClick}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={className}\n      style={{\n        ...propsStyle,\n        ..._style,\n        ..._hoverStyle\n      }}\n    >\n      {children}\n    </a>\n  );\n};\n\nLink.propTypes = {\n  children: PropTypes.node,\n  className: PropTypes.string,\n  href: PropTypes.string,\n  'data-name': PropTypes.string,\n  'aria-label': PropTypes.string,\n  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n  skinHover: PropTypes.bool,\n  hoverColor: PropTypes.string,\n  download: PropTypes.bool,\n  onClick: PropTypes.func,\n  onMouseEnter: PropTypes.func,\n  onMouseLeave: PropTypes.func,\n  style: PropTypes.shape({})\n};\n\nLink.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  history: Provider.childContextTypes.history\n};\n\nexport default Link;\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,OAA5B,EAAqCC,QAArC,QAAoD,OAApD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,QAAP,IAAkBC,kBAAlB,QAA2C,aAA3C;AACA,OAAOC,aAAP,MAA0B,uBAA1B;;AAEA,MAAMC,IAAI,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;EACrC,MAAMC,IAAI,GAAGL,kBAAkB,CAACI,aAAD,CAA/B;EACA,MAAM,CAACE,OAAD,EAAUC,UAAV,IAAwBV,QAAQ,CAAC,KAAD,CAAtC;EACA,MAAM;IAACW,OAAO,EAAE;MAACC,UAAU;IAAX,IAA0B;EAApC,IAA0CL,aAAhD;;EACA,MAAM;IACJM,SADI;IAEJC,UAAU,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCN,IAAnC,CAFT;IAGJ,aAAaO,QAAQ,GAAG,MAHpB;IAIJ,cAAcC;EAJV,IAMFV,KANJ;EAAA,MAKKW,gBALL,iCAMIX,KANJ;;EAOA,MAAM;IACJY,IADI;IAEJC,OAAO,QAFH;IAGJC,SAHI;IAIJC,KAAK,EAAEC,UAJH;IAKJC,QALI;IAMJC,YAAY,QANR;IAOJC,YAAY,QAPR;IAQJC;EARI,IASFpB,KATJ;EAWA,MAAMqB,gBAAgB,GAAG7B,WAAW,CAAC,MAAM;IACzCY,UAAU,CAAC,IAAD,CAAV;IAEAe,YAAY;EACb,CAJmC,EAIjC,CAACA,YAAD,CAJiC,CAApC;EAMA,MAAMG,gBAAgB,GAAG9B,WAAW,CAAC,MAAM;IACzCY,UAAU,CAAC,KAAD,CAAV;IAEAc,YAAY;EACb,CAJmC,EAIjC,CAACA,YAAD,CAJiC,CAApC;EAMA,MAAMK,QAAQ,GAAG9B,OAAO,CAAC,MAAMK,aAAa,CAACG,aAAD,CAAb,CAA6B;IAACW;EAAD,CAA7B,CAAP,EAA6C,CAACA,IAAD,EAAOX,aAAP,CAA7C,CAAxB;EAEA,MAAMuB,aAAa,GAAGhC,WAAW,CAC/BiC,CAAC,IAAI;IACHZ,OAAO,CAACY,CAAD,CAAP;;IAEA,IAAI,CAACL,QAAL,EAAe;MACbG,QAAQ,CAACE,CAAD,CAAR;IACD;EACF,CAP8B,EAQ/B,CAACL,QAAD,EAAWG,QAAX,EAAqBV,OAArB,CAR+B,CAAjC;;EAWA,MAAMa,MAAM,GACVd,IAAI,IAAIC,OAAR,GACI,IADJ,GAEI;IACEc,aAAa,EAAE;EADjB,CAHN;;EAMA,MAAMC,WAAW,GACfrB,SAAS,IAAIJ,OAAb,GACI;IACE0B,KAAK,EAAErB;EADT,CADJ,GAII,IALN;;EAOA,oBACE,sCACMG,gBADN;IAEE,aAAWF,QAFb;IAGE,cAAYC,SAHd;IAIE,IAAI,EAAEE,IAAI,GAAGN,UAAU,CAACM,IAAD,CAAb,GAAsBkB,SAJlC;IAKE,OAAO,EAAEN,aALX;IAME,YAAY,EAAEH,gBANhB;IAOE,YAAY,EAAEC,gBAPhB;IAQE,SAAS,EAAER,SARb;IASE,KAAK,eACAE,UADA,EAEAU,MAFA,EAGAE,WAHA;EATP,IAeGX,QAfH,CADF;AAmBD,CA/ED;;AAiFAlB,IAAI,CAACgC,SAAL,2CAAiB;EACfd,QAAQ,EAAEtB,SAAS,CAACqC,IADL;EAEflB,SAAS,EAAEnB,SAAS,CAACsC,MAFN;EAGfrB,IAAI,EAAEjB,SAAS,CAACsC,MAHD;EAIf,aAAatC,SAAS,CAACsC,MAJR;EAKf,cAActC,SAAS,CAACsC,MALT;EAMfC,MAAM,EAAEvC,SAAS,CAACwC,KAAV,CAAgB,CAAC,OAAD,EAAU,QAAV,EAAoB,SAApB,EAA+B,MAA/B,CAAhB,CANO;EAOf5B,SAAS,EAAEZ,SAAS,CAACyC,IAPN;EAQf5B,UAAU,EAAEb,SAAS,CAACsC,MARP;EASfb,QAAQ,EAAEzB,SAAS,CAACyC,IATL;EAUfvB,OAAO,EAAElB,SAAS,CAAC0C,IAVJ;EAWflB,YAAY,EAAExB,SAAS,CAAC0C,IAXT;EAYfnB,YAAY,EAAEvB,SAAS,CAAC0C,IAZT;EAaftB,KAAK,EAAEpB,SAAS,CAAC2C,KAAV,CAAgB,EAAhB;AAbQ,CAAjB;AAgBAvC,IAAI,CAACwC,YAAL,GAAoB;EAClBrC,IAAI,EAAEN,QAAQ,CAAC4C,iBAAT,CAA2BtC,IADf;EAElBG,OAAO,EAAET,QAAQ,CAAC4C,iBAAT,CAA2BnC;AAFlB,CAApB;AAKA,eAAeN,IAAf"}

package/es/atom/provider/web-context.d.ts

@@ -4,9 +4,9 @@ declare type Skin = {
         primary: string;
     };
 };
-declare type WebContextValues = {
+export declare type WebContextValues = {
     skin?: Skin;
-    translate: (key: string, data?: Record<string, string>) => string;
+    translate?: (key: string, data?: Record<string, string>) => string;
 };
 declare type Props = WebContextValues & {
     children: ReactNode;

package/es/atom/provider/web-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"web-context.d.ts","sourceRoot":"","sources":["../../../src/atom/provider/web-context.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgB,SAAS,EAAa,MAAM,OAAO,CAAC;AAGlE,aAAK,IAAI,GAAG;IACV,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,MAAM,CAAC;CACnE,CAAC;AAMF,aAAK,KAAK,GAAG,gBAAgB,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,UAAU,2BAA0B,KAAK,gBAE9C,CAAC;AAEF,eAAO,MAAM,aAAa,QAAO,gBAQhC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"web-context.d.ts","sourceRoot":"","sources":["../../../src/atom/provider/web-context.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAgB,SAAS,EAAa,MAAM,OAAO,CAAC;AAElE,aAAK,IAAI,GAAG;IACV,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC7B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,MAAM,CAAC;CACpE,CAAC;AAIF,aAAK,KAAK,GAAG,gBAAgB,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,UAAU,2BAA0B,KAAK,gBAE9C,CAAC;AAEF,eAAO,MAAM,aAAa,QAAO,gBAQhC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/es/atom/provider/web-context.js

@@ -3,10 +3,7 @@ const _excluded = ["children"];
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import React, { createContext, useContext } from 'react';
-import { mockTranslate } from '@coorpacademy/translate';
-const Context = /*#__PURE__*/createContext({
-  translate: mockTranslate
-});
+const Context = /*#__PURE__*/createContext({});
 
 const WebContext = _ref => {
   let {

package/es/atom/provider/web-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"web-context.js","names":["React","createContext","useContext","mockTranslate","Context","translate","WebContext","children","value","useWebContext","context","Error"],"sources":["../../../src/atom/provider/web-context.tsx"],"sourcesContent":["import React, {createContext, ReactNode, useContext} from 'react';\nimport {mockTranslate} from '@coorpacademy/translate';\n\ntype Skin = {\n  common: {\n    primary: string;\n  };\n};\n\ntype WebContextValues = {\n  skin?: Skin;\n  translate: (key: string, data?: Record<string, string>) => string;\n};\n\nconst Context = createContext({\n  translate: mockTranslate\n});\n\ntype Props = WebContextValues & {\n  children: ReactNode;\n};\n\nconst WebContext = ({children, ...value}: Props) => {\n  return <Context.Provider value={value}>{children}</Context.Provider>;\n};\n\nexport const useWebContext = (): WebContextValues => {\n  const context = useContext(Context);\n\n  if (!context) {\n    throw new Error('❌ [WebContext] useWebContext must be used within a provider <WebContext>');\n  }\n\n  return context;\n};\n\nexport default WebContext;\n"],"mappings":";;;;AAAA,OAAOA,KAAP,IAAeC,aAAf,EAAyCC,UAAzC,QAA0D,OAA1D;AACA,SAAQC,aAAR,QAA4B,yBAA5B;AAaA,MAAMC,OAAO,gBAAGH,aAAa,CAAC;EAC5BI,SAAS,EAAEF;AADiB,CAAD,CAA7B;;AAQA,MAAMG,UAAU,GAAG,QAAiC;EAAA,IAAhC;IAACC;EAAD,CAAgC;EAAA,IAAlBC,KAAkB;;EAClD,oBAAO,oBAAC,OAAD,CAAS,QAAT;IAAkB,KAAK,EAAEA;EAAzB,GAAiCD,QAAjC,CAAP;AACD,CAFD;;AAIA,OAAO,MAAME,aAAa,GAAG,MAAwB;EACnD,MAAMC,OAAO,GAAGR,UAAU,CAACE,OAAD,CAA1B;;EAEA,IAAI,CAACM,OAAL,EAAc;IACZ,MAAM,IAAIC,KAAJ,CAAU,0EAAV,CAAN;EACD;;EAED,OAAOD,OAAP;AACD,CARM;AAUP,eAAeJ,UAAf"}
+{"version":3,"file":"web-context.js","names":["React","createContext","useContext","Context","WebContext","children","value","useWebContext","context","Error"],"sources":["../../../src/atom/provider/web-context.tsx"],"sourcesContent":["import React, {createContext, ReactNode, useContext} from 'react';\n\ntype Skin = {\n  common: {\n    primary: string;\n  };\n};\n\nexport type WebContextValues = {\n  skin?: Skin;\n  translate?: (key: string, data?: Record<string, string>) => string;\n};\n\nconst Context = createContext({});\n\ntype Props = WebContextValues & {\n  children: ReactNode;\n};\n\nconst WebContext = ({children, ...value}: Props) => {\n  return <Context.Provider value={value}>{children}</Context.Provider>;\n};\n\nexport const useWebContext = (): WebContextValues => {\n  const context = useContext(Context);\n\n  if (!context) {\n    throw new Error('❌ [WebContext] useWebContext must be used within a provider <WebContext>');\n  }\n\n  return context;\n};\n\nexport default WebContext;\n"],"mappings":";;;;AAAA,OAAOA,KAAP,IAAeC,aAAf,EAAyCC,UAAzC,QAA0D,OAA1D;AAaA,MAAMC,OAAO,gBAAGF,aAAa,CAAC,EAAD,CAA7B;;AAMA,MAAMG,UAAU,GAAG,QAAiC;EAAA,IAAhC;IAACC;EAAD,CAAgC;EAAA,IAAlBC,KAAkB;;EAClD,oBAAO,oBAAC,OAAD,CAAS,QAAT;IAAkB,KAAK,EAAEA;EAAzB,GAAiCD,QAAjC,CAAP;AACD,CAFD;;AAIA,OAAO,MAAME,aAAa,GAAG,MAAwB;EACnD,MAAMC,OAAO,GAAGN,UAAU,CAACC,OAAD,CAA1B;;EAEA,IAAI,CAACK,OAAL,EAAc;IACZ,MAAM,IAAIC,KAAJ,CAAU,0EAAV,CAAN;EACD;;EAED,OAAOD,OAAP;AACD,CARM;AAUP,eAAeJ,UAAf"}

package/es/atom/review-header-step-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/review-header-step-item/index.tsx"],"names":[],"mappings":";AAQA,OAAkB,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAsDvD,QAAA,MAAM,oBAAoB;YAAW,mBAAmB;;;;;;CAevD,CAAC;AAIF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/review-header-step-item/index.tsx"],"names":[],"mappings":";AASA,OAAkB,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAsDvD,QAAA,MAAM,oBAAoB;YAAW,mBAAmB;;;;;;CAevD,CAAC;AAWF,eAAe,oBAAoB,CAAC"}

package/es/atom/review-header-step-item/index.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import classnames from 'classnames';
 import { NovaCompositionCoorpacademyCheck as RightIcon, NovaSolidStatusClose as WrongIcon } from '@coorpacademy/nova-icons';
-import { GetTranslateFromContext } from '../provider';
+import Provider, { GetTranslateFromContext } from '../provider';
 import style from './style.css';
 import propTypes from './types';
 
-const Content = props => {
+const Content = (props, legacyContext) => {
   const {
     icon,
     current,
     value
   } = props;
-  const translate = GetTranslateFromContext();
+  const translate = GetTranslateFromContext(legacyContext);
   let child;
   let ariaDescription;
 
@@ -67,6 +67,11 @@ const ReviewHeaderStepItem = props => {
   }, /*#__PURE__*/React.createElement(Content, props));
 };
 
+Content.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+Content.contextTypes = {
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
+};
 ReviewHeaderStepItem.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
 export default ReviewHeaderStepItem;
 //# sourceMappingURL=index.js.map

package/es/atom/review-header-step-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","classnames","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","GetTranslateFromContext","style","propTypes","Content","props","icon","current","value","translate","child","ariaDescription","headerStepValue","rightIcon","currentRightIcon","wrongIcon","currentWrongIcon","ReviewHeaderStepItem","default","right","wrong"],"sources":["../../../src/atom/review-header-step-item/index.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport {GetTranslateFromContext} from '../provider';\nimport style from './style.css';\nimport propTypes, {HeaderStepItemProps} from './types';\n\nconst Content = (props: HeaderStepItemProps) => {\n  const {icon, current, value} = props;\n  const translate = GetTranslateFromContext();\n  let child;\n  let ariaDescription;\n  switch (icon) {\n    case 'no-answer':\n      child = value;\n      ariaDescription = current\n        ? translate('review_header_step_item.current_question', {\n            headerStepValue: value\n          })\n        : translate('review_header_step_item.not_answered_question', {\n            headerStepValue: value\n          });\n      break;\n\n    case 'right':\n      child = (\n        <RightIcon className={classnames(style.rightIcon, current && style.currentRightIcon)} />\n      );\n      ariaDescription = translate('review_header_step_item.correct_question', {\n        headerStepValue: value\n      });\n      break;\n\n    case 'wrong':\n      child = (\n        <WrongIcon className={classnames(style.wrongIcon, current && style.currentWrongIcon)} />\n      );\n      ariaDescription = translate('review_header_step_item.incorrect_question', {\n        headerStepValue: value\n      });\n      break;\n\n    default:\n      return null;\n  }\n\n  return (\n    <span\n      className={style.value}\n      aria-label={translate('review_header_step_item.aria_label', {\n        headerStepValue: value\n      })}\n      aria-describedby={ariaDescription}\n    >\n      {child}\n    </span>\n  );\n};\n\nconst ReviewHeaderStepItem = (props: HeaderStepItemProps) => {\n  const {icon, current} = props;\n  return (\n    <div\n      className={classnames(\n        style.default,\n        icon === 'right' && style.right,\n        icon === 'wrong' && style.wrong,\n        current && style.current\n      )}\n      data-name=\"header-step-item\"\n    >\n      <Content {...props} />\n    </div>\n  );\n};\n\nReviewHeaderStepItem.propTypes = propTypes;\n\nexport default ReviewHeaderStepItem;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SACEC,gCAAgC,IAAIC,SADtC,EAEEC,oBAAoB,IAAIC,SAF1B,QAGO,0BAHP;AAIA,SAAQC,uBAAR,QAAsC,aAAtC;AACA,OAAOC,KAAP,MAAkB,aAAlB;AACA,OAAOC,SAAP,MAA6C,SAA7C;;AAEA,MAAMC,OAAO,GAAIC,KAAD,IAAgC;EAC9C,MAAM;IAACC,IAAD;IAAOC,OAAP;IAAgBC;EAAhB,IAAyBH,KAA/B;EACA,MAAMI,SAAS,GAAGR,uBAAuB,EAAzC;EACA,IAAIS,KAAJ;EACA,IAAIC,eAAJ;;EACA,QAAQL,IAAR;IACE,KAAK,WAAL;MACEI,KAAK,GAAGF,KAAR;MACAG,eAAe,GAAGJ,OAAO,GACrBE,SAAS,CAAC,0CAAD,EAA6C;QACpDG,eAAe,EAAEJ;MADmC,CAA7C,CADY,GAIrBC,SAAS,CAAC,+CAAD,EAAkD;QACzDG,eAAe,EAAEJ;MADwC,CAAlD,CAJb;MAOA;;IAEF,KAAK,OAAL;MACEE,KAAK,gBACH,oBAAC,SAAD;QAAW,SAAS,EAAEd,UAAU,CAACM,KAAK,CAACW,SAAP,EAAkBN,OAAO,IAAIL,KAAK,CAACY,gBAAnC;MAAhC,EADF;MAGAH,eAAe,GAAGF,SAAS,CAAC,0CAAD,EAA6C;QACtEG,eAAe,EAAEJ;MADqD,CAA7C,CAA3B;MAGA;;IAEF,KAAK,OAAL;MACEE,KAAK,gBACH,oBAAC,SAAD;QAAW,SAAS,EAAEd,UAAU,CAACM,KAAK,CAACa,SAAP,EAAkBR,OAAO,IAAIL,KAAK,CAACc,gBAAnC;MAAhC,EADF;MAGAL,eAAe,GAAGF,SAAS,CAAC,4CAAD,EAA+C;QACxEG,eAAe,EAAEJ;MADuD,CAA/C,CAA3B;MAGA;;IAEF;MACE,OAAO,IAAP;EA/BJ;;EAkCA,oBACE;IACE,SAAS,EAAEN,KAAK,CAACM,KADnB;IAEE,cAAYC,SAAS,CAAC,oCAAD,EAAuC;MAC1DG,eAAe,EAAEJ;IADyC,CAAvC,CAFvB;IAKE,oBAAkBG;EALpB,GAOGD,KAPH,CADF;AAWD,CAlDD;;AAoDA,MAAMO,oBAAoB,GAAIZ,KAAD,IAAgC;EAC3D,MAAM;IAACC,IAAD;IAAOC;EAAP,IAAkBF,KAAxB;EACA,oBACE;IACE,SAAS,EAAET,UAAU,CACnBM,KAAK,CAACgB,OADa,EAEnBZ,IAAI,KAAK,OAAT,IAAoBJ,KAAK,CAACiB,KAFP,EAGnBb,IAAI,KAAK,OAAT,IAAoBJ,KAAK,CAACkB,KAHP,EAInBb,OAAO,IAAIL,KAAK,CAACK,OAJE,CADvB;IAOE,aAAU;EAPZ,gBASE,oBAAC,OAAD,EAAaF,KAAb,CATF,CADF;AAaD,CAfD;;AAiBAY,oBAAoB,CAACd,SAArB,2CAAiCA,SAAjC;AAEA,eAAec,oBAAf"}
+{"version":3,"file":"index.js","names":["React","classnames","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","Provider","GetTranslateFromContext","style","propTypes","Content","props","legacyContext","icon","current","value","translate","child","ariaDescription","headerStepValue","rightIcon","currentRightIcon","wrongIcon","currentWrongIcon","ReviewHeaderStepItem","default","right","wrong","contextTypes","skin","childContextTypes"],"sources":["../../../src/atom/review-header-step-item/index.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetTranslateFromContext} from '../provider';\nimport {WebContextValues} from '../provider/web-context';\nimport style from './style.css';\nimport propTypes, {HeaderStepItemProps} from './types';\n\nconst Content = (props: HeaderStepItemProps, legacyContext: WebContextValues) => {\n  const {icon, current, value} = props;\n  const translate = GetTranslateFromContext(legacyContext);\n  let child;\n  let ariaDescription;\n  switch (icon) {\n    case 'no-answer':\n      child = value;\n      ariaDescription = current\n        ? translate('review_header_step_item.current_question', {\n            headerStepValue: value\n          })\n        : translate('review_header_step_item.not_answered_question', {\n            headerStepValue: value\n          });\n      break;\n\n    case 'right':\n      child = (\n        <RightIcon className={classnames(style.rightIcon, current && style.currentRightIcon)} />\n      );\n      ariaDescription = translate('review_header_step_item.correct_question', {\n        headerStepValue: value\n      });\n      break;\n\n    case 'wrong':\n      child = (\n        <WrongIcon className={classnames(style.wrongIcon, current && style.currentWrongIcon)} />\n      );\n      ariaDescription = translate('review_header_step_item.incorrect_question', {\n        headerStepValue: value\n      });\n      break;\n\n    default:\n      return null;\n  }\n\n  return (\n    <span\n      className={style.value}\n      aria-label={translate('review_header_step_item.aria_label', {\n        headerStepValue: value\n      })}\n      aria-describedby={ariaDescription}\n    >\n      {child}\n    </span>\n  );\n};\n\nconst ReviewHeaderStepItem = (props: HeaderStepItemProps) => {\n  const {icon, current} = props;\n  return (\n    <div\n      className={classnames(\n        style.default,\n        icon === 'right' && style.right,\n        icon === 'wrong' && style.wrong,\n        current && style.current\n      )}\n      data-name=\"header-step-item\"\n    >\n      <Content {...props} />\n    </div>\n  );\n};\n\nContent.propTypes = propTypes;\n\nContent.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nReviewHeaderStepItem.propTypes = propTypes;\n\nexport default ReviewHeaderStepItem;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SACEC,gCAAgC,IAAIC,SADtC,EAEEC,oBAAoB,IAAIC,SAF1B,QAGO,0BAHP;AAIA,OAAOC,QAAP,IAAkBC,uBAAlB,QAAgD,aAAhD;AAEA,OAAOC,KAAP,MAAkB,aAAlB;AACA,OAAOC,SAAP,MAA6C,SAA7C;;AAEA,MAAMC,OAAO,GAAG,CAACC,KAAD,EAA6BC,aAA7B,KAAiE;EAC/E,MAAM;IAACC,IAAD;IAAOC,OAAP;IAAgBC;EAAhB,IAAyBJ,KAA/B;EACA,MAAMK,SAAS,GAAGT,uBAAuB,CAACK,aAAD,CAAzC;EACA,IAAIK,KAAJ;EACA,IAAIC,eAAJ;;EACA,QAAQL,IAAR;IACE,KAAK,WAAL;MACEI,KAAK,GAAGF,KAAR;MACAG,eAAe,GAAGJ,OAAO,GACrBE,SAAS,CAAC,0CAAD,EAA6C;QACpDG,eAAe,EAAEJ;MADmC,CAA7C,CADY,GAIrBC,SAAS,CAAC,+CAAD,EAAkD;QACzDG,eAAe,EAAEJ;MADwC,CAAlD,CAJb;MAOA;;IAEF,KAAK,OAAL;MACEE,KAAK,gBACH,oBAAC,SAAD;QAAW,SAAS,EAAEhB,UAAU,CAACO,KAAK,CAACY,SAAP,EAAkBN,OAAO,IAAIN,KAAK,CAACa,gBAAnC;MAAhC,EADF;MAGAH,eAAe,GAAGF,SAAS,CAAC,0CAAD,EAA6C;QACtEG,eAAe,EAAEJ;MADqD,CAA7C,CAA3B;MAGA;;IAEF,KAAK,OAAL;MACEE,KAAK,gBACH,oBAAC,SAAD;QAAW,SAAS,EAAEhB,UAAU,CAACO,KAAK,CAACc,SAAP,EAAkBR,OAAO,IAAIN,KAAK,CAACe,gBAAnC;MAAhC,EADF;MAGAL,eAAe,GAAGF,SAAS,CAAC,4CAAD,EAA+C;QACxEG,eAAe,EAAEJ;MADuD,CAA/C,CAA3B;MAGA;;IAEF;MACE,OAAO,IAAP;EA/BJ;;EAkCA,oBACE;IACE,SAAS,EAAEP,KAAK,CAACO,KADnB;IAEE,cAAYC,SAAS,CAAC,oCAAD,EAAuC;MAC1DG,eAAe,EAAEJ;IADyC,CAAvC,CAFvB;IAKE,oBAAkBG;EALpB,GAOGD,KAPH,CADF;AAWD,CAlDD;;AAoDA,MAAMO,oBAAoB,GAAIb,KAAD,IAAgC;EAC3D,MAAM;IAACE,IAAD;IAAOC;EAAP,IAAkBH,KAAxB;EACA,oBACE;IACE,SAAS,EAAEV,UAAU,CACnBO,KAAK,CAACiB,OADa,EAEnBZ,IAAI,KAAK,OAAT,IAAoBL,KAAK,CAACkB,KAFP,EAGnBb,IAAI,KAAK,OAAT,IAAoBL,KAAK,CAACmB,KAHP,EAInBb,OAAO,IAAIN,KAAK,CAACM,OAJE,CADvB;IAOE,aAAU;EAPZ,gBASE,oBAAC,OAAD,EAAaH,KAAb,CATF,CADF;AAaD,CAfD;;AAiBAD,OAAO,CAACD,SAAR,2CAAoBA,SAApB;AAEAC,OAAO,CAACkB,YAAR,GAAuB;EACrBC,IAAI,EAAEvB,QAAQ,CAACwB,iBAAT,CAA2BD,IADZ;EAErBb,SAAS,EAAEV,QAAQ,CAACwB,iBAAT,CAA2Bd;AAFjB,CAAvB;AAKAQ,oBAAoB,CAACf,SAArB,2CAAiCA,SAAjC;AAEA,eAAee,oBAAf"}

package/es/atom/tooltip/index.d.ts

@@ -1,12 +1,15 @@
 export function toggleStateOnKeyPress(state: any, setState: any, ref: any): (event: any) => void;
 export default ToolTip;
-declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "data-testid": dataTestId, closeToolTipInformationTextAriaLabel, toolTipIsVisible: _toolTipIsVisible }: {
+declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "data-testid": dataTestId, closeToolTipInformationTextAriaLabel, toolTipIsVisible: _toolTipIsVisible, iconContainerClassName, delayHide, fontSize }: {
     anchorId: any;
     TooltipContent: any;
     "aria-label": any;
     "data-testid": any;
     closeToolTipInformationTextAriaLabel: any;
     toolTipIsVisible: any;
+    iconContainerClassName: any;
+    delayHide?: number | undefined;
+    fontSize?: number | undefined;
 }): JSX.Element;
 declare namespace ToolTip {
     const propTypes: {
@@ -14,6 +17,9 @@ declare namespace ToolTip {
         'data-testid': PropTypes.Requireable<string>;
         'aria-label': PropTypes.Requireable<string>;
         closeToolTipInformationTextAriaLabel: PropTypes.Validator<string>;
+        iconContainerClassName: PropTypes.Requireable<string>;
+        delayHide: PropTypes.Requireable<number>;
+        fontSize: PropTypes.Requireable<number>;
         anchorId: PropTypes.Requireable<string>;
         toolTipIsVisible: PropTypes.Requireable<boolean>;
     };

package/es/atom/tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"AA+CO,iGASN;;AAED;;;;;;;gBA2EC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"AAwDO,iGASN;;AAED;;;;;;;;;;gBAwFC"}

package/es/atom/tooltip/index.js

@@ -1,15 +1,21 @@
 import React, { isValidElement, useState, useCallback, useMemo } from 'react';
+import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';
 import isString from 'lodash/fp/isString';
 import { NovaCompositionCoorpacademyInformationIcon as InformationIcon } from '@coorpacademy/nova-icons';
 import style from './style.css';
+const FontSizes = {
+  12: style.tooltipContentFontSize12,
+  14: style.tooltipContentFontSize14
+};
 
 const ToolTipWrapper = ({
   toolTipIsVisible,
   anchorId,
   closeToolTipInformationTextAriaLabel,
-  content
+  content,
+  handleContentMouseOver
 }) => {
   if (!toolTipIsVisible) return null;
 
@@ -26,7 +32,8 @@ const ToolTipWrapper = ({
     return /*#__PURE__*/React.createElement("div", {
       className: style.toolTip,
       "data-testid": "tooltip",
-      "aria-label": closeToolTipInformationTextAriaLabel
+      "aria-label": closeToolTipInformationTextAriaLabel,
+      onMouseOver: handleContentMouseOver
     }, content);
   }
 };
@@ -35,7 +42,8 @@ ToolTipWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
   toolTipIsVisible: PropTypes.bool,
   anchorId: PropTypes.string,
   closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,
-  content: PropTypes.node
+  content: PropTypes.node,
+  handleContentMouseOver: PropTypes.func
 } : {};
 export const toggleStateOnKeyPress = (state, setState, ref) => event => {
   if (event.key === 'Enter') {
@@ -54,38 +62,49 @@ const ToolTip = ({
   'aria-label': ariaLabel,
   'data-testid': dataTestId,
   closeToolTipInformationTextAriaLabel,
-  toolTipIsVisible: _toolTipIsVisible
+  toolTipIsVisible: _toolTipIsVisible,
+  iconContainerClassName,
+  delayHide = 250,
+  fontSize = 14
 }) => {
   const isComponent = useMemo(() => !isString(TooltipContent) && /*#__PURE__*/isValidElement(TooltipContent()), [TooltipContent]);
   const [toolTipIsVisible, setToolTipIsVisible] = useState(false);
+  const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);
   const handleKeyPress = useCallback(event => {
     toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);
   }, [toolTipIsVisible]);
+  const handleContentMouseOver = useCallback(() => {
+    mouseLeaveTimer &&
+    /* istanbul ignore next */
+    clearTimeout(mouseLeaveTimer);
+  }, [mouseLeaveTimer]);
   const handleMouseOver = useCallback(() => {
+    mouseLeaveTimer && clearTimeout(mouseLeaveTimer);
     setToolTipIsVisible(true);
-  }, []);
+  }, [mouseLeaveTimer]);
   const handleMouseLeave = useCallback(() => {
-    setToolTipIsVisible(false);
-  }, []);
+    setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), delayHide));
+  }, [delayHide]);
   const content = useMemo(() => {
     return isComponent ? /*#__PURE__*/React.createElement(TooltipContent, null) : /*#__PURE__*/React.createElement("p", {
-      className: style.tooltipContent
+      className: classnames([style.tooltipContent, FontSizes[fontSize]])
     }, TooltipContent);
-  }, [TooltipContent, isComponent]);
+  }, [TooltipContent, fontSize, isComponent]);
   return anchorId ? /*#__PURE__*/React.createElement(ToolTipWrapper, {
     toolTipIsVisible: _toolTipIsVisible,
     anchorId: anchorId,
     closeToolTipInformationTextAriaLabel: closeToolTipInformationTextAriaLabel,
     content: content,
     onMouseLeave: handleMouseLeave,
-    onMouseOver: handleMouseOver
+    onMouseOver: handleMouseOver,
+    fontSize: fontSize
   }) : /*#__PURE__*/React.createElement("div", {
     className: style.tooltipContainer,
     onMouseLeave: handleMouseLeave,
     onMouseOver: handleMouseOver
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: style.tooltipIconContainer,
+    className: classnames([style.tooltipIconContainer, iconContainerClassName]),
     "data-testid": dataTestId,
     onKeyDown: handleKeyPress,
     tabIndex: 0
@@ -98,7 +117,9 @@ const ToolTip = ({
     toolTipIsVisible: toolTipIsVisible,
     anchorId: anchorId,
     closeToolTipInformationTextAriaLabel: closeToolTipInformationTextAriaLabel,
-    content: content
+    content: content,
+    handleContentMouseOver: handleContentMouseOver,
+    fontSize: fontSize
   }));
 };
 
@@ -107,8 +128,12 @@ ToolTip.propTypes = process.env.NODE_ENV !== "production" ? {
   'data-testid': PropTypes.string,
   'aria-label': PropTypes.string,
   closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,
-  // ---------- externalHandling --------------
-  // if passed down, React Tooltip is used instead, due to limitations on
+  // ---------- Regular Tooltip exclusive --------------
+  iconContainerClassName: PropTypes.string,
+  delayHide: PropTypes.number,
+  fontSize: PropTypes.oneOf([12, 14]),
+  // ----------  React Tooltip exclusive  --------------
+  // externalHandling: if passed down, React Tooltip is used instead, due to limitations on
   // parents overflow hidden controls
   anchorId: PropTypes.string,
   toolTipIsVisible: PropTypes.bool