@coorpacademy/components 11.10.3 → 11.10.4-alpha.1

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":"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"}

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","isValidElement","useState","useCallback","useMemo","PropTypes","ReactTooltip","isString","NovaCompositionCoorpacademyInformationIcon","InformationIcon","style","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","toolTipReact","toolTip","propTypes","bool","string","isRequired","node","toggleStateOnKeyPress","state","setState","ref","event","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","isComponent","setToolTipIsVisible","handleKeyPress","handleMouseOver","handleMouseLeave","tooltipContent","tooltipContainer","tooltipIconContainer","informationIcon","oneOfType","func"],"sources":["../../../src/atom/tooltip/index.js"],"sourcesContent":["import React, {isValidElement, useState, useCallback, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport ReactTooltip from 'react-tooltip';\nimport isString from 'lodash/fp/isString';\nimport {NovaCompositionCoorpacademyInformationIcon as InformationIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst ToolTipWrapper = ({\n  toolTipIsVisible,\n  anchorId,\n  closeToolTipInformationTextAriaLabel,\n  content\n}) => {\n  if (!toolTipIsVisible) return null;\n  if (anchorId) {\n    return (\n      <ReactTooltip\n        id={anchorId}\n        className={style.toolTipReact}\n        data-event-off=\"click\"\n        place=\"left\"\n        effect=\"solid\"\n        aria-label={closeToolTipInformationTextAriaLabel}\n      >\n        {content}\n      </ReactTooltip>\n    );\n  } else {\n    return (\n      <div\n        className={style.toolTip}\n        data-testid=\"tooltip\"\n        aria-label={closeToolTipInformationTextAriaLabel}\n      >\n        {content}\n      </div>\n    );\n  }\n};\n\nToolTipWrapper.propTypes = {\n  toolTipIsVisible: PropTypes.bool,\n  anchorId: PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n  content: PropTypes.node\n};\n\nexport const toggleStateOnKeyPress = (state, setState, ref) => event => {\n  if (event.key === 'Enter') {\n    if (ref) ref.current.focus();\n    event.stopPropagation();\n    event.preventDefault();\n    setState(!state);\n  } else if (event.key === 'Tab' || event.key === 'Escape') {\n    setState(false);\n  }\n};\n\nconst ToolTip = ({\n  anchorId,\n  TooltipContent,\n  'aria-label': ariaLabel,\n  'data-testid': dataTestId,\n  closeToolTipInformationTextAriaLabel,\n  toolTipIsVisible: _toolTipIsVisible\n}) => {\n  const isComponent = useMemo(\n    () => !isString(TooltipContent) && isValidElement(TooltipContent()),\n    [TooltipContent]\n  );\n\n  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n  const handleKeyPress = useCallback(\n    event => {\n      toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);\n    },\n    [toolTipIsVisible]\n  );\n\n  const handleMouseOver = useCallback(() => {\n    setToolTipIsVisible(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setToolTipIsVisible(false);\n  }, []);\n\n  const content = useMemo(() => {\n    return isComponent ? (\n      <TooltipContent />\n    ) : (\n      <p className={style.tooltipContent}>{TooltipContent}</p>\n    );\n  }, [TooltipContent, isComponent]);\n\n  return anchorId ? (\n    <ToolTipWrapper\n      toolTipIsVisible={_toolTipIsVisible}\n      anchorId={anchorId}\n      closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n      content={content}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n    />\n  ) : (\n    <div\n      className={style.tooltipContainer}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n    >\n      <button\n        type=\"button\"\n        className={style.tooltipIconContainer}\n        data-testid={dataTestId}\n        onKeyDown={handleKeyPress}\n        tabIndex={0}\n      >\n        <InformationIcon\n          className={style.informationIcon}\n          width={12}\n          height={12}\n          aria-label={ariaLabel}\n        />\n      </button>\n      <ToolTipWrapper\n        toolTipIsVisible={toolTipIsVisible}\n        anchorId={anchorId}\n        closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n        content={content}\n      />\n    </div>\n  );\n};\n\nToolTip.propTypes = {\n  TooltipContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.string]),\n  'data-testid': PropTypes.string,\n  'aria-label': PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n  // ---------- externalHandling --------------\n  // if passed down, React Tooltip is used instead, due to limitations on\n  // parents overflow hidden controls\n  anchorId: PropTypes.string,\n  toolTipIsVisible: PropTypes.bool\n};\n\nexport default ToolTip;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","isValidElement","useState","useCallback","useMemo","classnames","PropTypes","ReactTooltip","isString","NovaCompositionCoorpacademyInformationIcon","InformationIcon","style","FontSizes","tooltipContentFontSize12","tooltipContentFontSize14","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","handleContentMouseOver","toolTipReact","toolTip","propTypes","bool","string","isRequired","node","func","toggleStateOnKeyPress","state","setState","ref","event","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","iconContainerClassName","delayHide","fontSize","isComponent","setToolTipIsVisible","mouseLeaveTimer","setMouseLeaveTimer","undefined","handleKeyPress","clearTimeout","handleMouseOver","handleMouseLeave","setTimeout","tooltipContent","tooltipContainer","tooltipIconContainer","informationIcon","oneOfType","number","oneOf"],"sources":["../../../src/atom/tooltip/index.js"],"sourcesContent":["import React, {isValidElement, useState, useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport ReactTooltip from 'react-tooltip';\nimport isString from 'lodash/fp/isString';\nimport {NovaCompositionCoorpacademyInformationIcon as InformationIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst FontSizes = {\n  12: style.tooltipContentFontSize12,\n  14: style.tooltipContentFontSize14\n};\n\nconst ToolTipWrapper = ({\n  toolTipIsVisible,\n  anchorId,\n  closeToolTipInformationTextAriaLabel,\n  content,\n  handleContentMouseOver\n}) => {\n  if (!toolTipIsVisible) return null;\n  if (anchorId) {\n    return (\n      <ReactTooltip\n        id={anchorId}\n        className={style.toolTipReact}\n        data-event-off=\"click\"\n        place=\"left\"\n        effect=\"solid\"\n        aria-label={closeToolTipInformationTextAriaLabel}\n      >\n        {content}\n      </ReactTooltip>\n    );\n  } else {\n    return (\n      <div\n        className={style.toolTip}\n        data-testid=\"tooltip\"\n        aria-label={closeToolTipInformationTextAriaLabel}\n        onMouseOver={handleContentMouseOver}\n      >\n        {content}\n      </div>\n    );\n  }\n};\n\nToolTipWrapper.propTypes = {\n  toolTipIsVisible: PropTypes.bool,\n  anchorId: PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n  content: PropTypes.node,\n  handleContentMouseOver: PropTypes.func\n};\n\nexport const toggleStateOnKeyPress = (state, setState, ref) => event => {\n  if (event.key === 'Enter') {\n    if (ref) ref.current.focus();\n    event.stopPropagation();\n    event.preventDefault();\n    setState(!state);\n  } else if (event.key === 'Tab' || event.key === 'Escape') {\n    setState(false);\n  }\n};\n\nconst ToolTip = ({\n  anchorId,\n  TooltipContent,\n  'aria-label': ariaLabel,\n  'data-testid': dataTestId,\n  closeToolTipInformationTextAriaLabel,\n  toolTipIsVisible: _toolTipIsVisible,\n  iconContainerClassName,\n  delayHide = 250,\n  fontSize = 14\n}) => {\n  const isComponent = useMemo(\n    () => !isString(TooltipContent) && isValidElement(TooltipContent()),\n    [TooltipContent]\n  );\n\n  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n  const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n\n  const handleKeyPress = useCallback(\n    event => {\n      toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);\n    },\n    [toolTipIsVisible]\n  );\n\n  const handleContentMouseOver = useCallback(() => {\n    mouseLeaveTimer && /* istanbul ignore next */ clearTimeout(mouseLeaveTimer);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseOver = useCallback(() => {\n    mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n    setToolTipIsVisible(true);\n  }, [mouseLeaveTimer]);\n\n  const handleMouseLeave = useCallback(() => {\n    setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), delayHide));\n  }, [delayHide]);\n\n  const content = useMemo(() => {\n    return isComponent ? (\n      <TooltipContent />\n    ) : (\n      <p className={classnames([style.tooltipContent, FontSizes[fontSize]])}>{TooltipContent}</p>\n    );\n  }, [TooltipContent, fontSize, isComponent]);\n\n  return anchorId ? (\n    <ToolTipWrapper\n      toolTipIsVisible={_toolTipIsVisible}\n      anchorId={anchorId}\n      closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n      content={content}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n      fontSize={fontSize}\n    />\n  ) : (\n    <div\n      className={style.tooltipContainer}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n    >\n      <button\n        type=\"button\"\n        className={classnames([style.tooltipIconContainer, iconContainerClassName])}\n        data-testid={dataTestId}\n        onKeyDown={handleKeyPress}\n        tabIndex={0}\n      >\n        <InformationIcon\n          className={style.informationIcon}\n          width={12}\n          height={12}\n          aria-label={ariaLabel}\n        />\n      </button>\n      <ToolTipWrapper\n        toolTipIsVisible={toolTipIsVisible}\n        anchorId={anchorId}\n        closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n        content={content}\n        handleContentMouseOver={handleContentMouseOver}\n        fontSize={fontSize}\n      />\n    </div>\n  );\n};\n\nToolTip.propTypes = {\n  TooltipContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.string]),\n  'data-testid': PropTypes.string,\n  'aria-label': PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n  // ---------- Regular Tooltip exclusive --------------\n  iconContainerClassName: PropTypes.string,\n  delayHide: PropTypes.number,\n  fontSize: PropTypes.oneOf([12, 14]),\n  // ----------  React Tooltip exclusive  --------------\n  // externalHandling: if passed down, React Tooltip is used instead, due to limitations on\n  // parents overflow hidden controls\n  anchorId: PropTypes.string,\n  toolTipIsVisible: PropTypes.bool\n};\n\nexport default ToolTip;\n"],"mappings":"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"}

package/es/atom/tooltip/style.css

@@ -67,6 +67,15 @@
   text-align: center;
 }
 
+.tooltipContentFontSize14 {
+  font-size: 14px;
+}
+
+.tooltipContentFontSize12 {
+  font-size: 12px;
+}
+
+
 .informationIcon {
   color: cm_grey_500;
 }

package/es/organism/user-preferences/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/user-preferences/index.js"],"names":[],"mappings":";AAoCA,0DAeC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/user-preferences/index.js"],"names":[],"mappings":";AAwCA,0DAeC"}

package/es/organism/user-preferences/index.js

@@ -1,5 +1,3 @@
-import _isEmpty from "lodash/fp/isEmpty";
-import _map from "lodash/fp/map";
 const _excluded = ["label", "description", "moreInfoAriaLabel"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -8,11 +6,16 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { NovaCompositionCoorpacademyInformationIcon as InfoIcon } from '@coorpacademy/nova-icons';
+import isEmpty from 'lodash/fp/isEmpty';
+import map from 'lodash/fp/map';
+import { GetTranslateFromContext } from '../../atom/provider';
+import ToolTip from '../../atom/tooltip';
 import InputSwitch from '../../atom/input-switch';
 import style from './style.css';
 
 const Settings = props => {
+  const translate = GetTranslateFromContext();
+
   const {
     label,
     description,
@@ -23,19 +26,16 @@ const Settings = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: style.settings
   }, /*#__PURE__*/React.createElement(InputSwitch, settings), /*#__PURE__*/React.createElement("span", {
-    className: style.label
-  }, label), _isEmpty(description) ? null : /*#__PURE__*/React.createElement("div", {
-    className: style.infoIconWrapper
-  }, /*#__PURE__*/React.createElement(InfoIcon, {
-    height: 16,
-    width: 16,
-    className: style.infoIcon,
-    "aria-label": moreInfoAriaLabel
-  }), /*#__PURE__*/React.createElement("div", {
-    className: style.showToolTip
-  }, /*#__PURE__*/React.createElement("div", {
-    className: style.descriptionLabel
-  }, description))));
+    className: style.label,
+    tabIndex: 0
+  }, label), isEmpty(description) ? null : /*#__PURE__*/React.createElement(ToolTip, {
+    TooltipContent: description,
+    closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text'),
+    "data-testid": "user-preferences-tooltip",
+    "aria-label": moreInfoAriaLabel,
+    iconContainerClassName: style.infoIconTooltip,
+    fontSize: 12
+  }));
 };
 
 Settings.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, InputSwitch.propTypes, {
@@ -45,15 +45,16 @@ Settings.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, InputS
 
 const UserPreferences = props => {
   const {
-    preferences = [],
+    preferences,
     moreInfoAriaLabel,
     groupAriaLabel
   } = props;
   return /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement("div", {
     className: style.preferences,
     role: "group",
-    "aria-label": groupAriaLabel
-  }, _map(settings => /*#__PURE__*/React.createElement(Settings, _extends({}, settings, {
+    "aria-label": groupAriaLabel,
+    tabIndex: 0
+  }, map(settings => /*#__PURE__*/React.createElement(Settings, _extends({}, settings, {
     key: settings.label,
     moreInfoAriaLabel: moreInfoAriaLabel
   })), preferences)));