@coorpacademy/components 11.36.3 → 11.36.4-alpha.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (129) hide show
  1. package/es/atom/button-link/index.d.ts.map +1 -1
  2. package/es/atom/button-link/index.js +1 -0
  3. package/es/atom/button-link/index.js.map +1 -1
  4. package/es/atom/input-select/index.d.ts +5 -0
  5. package/es/atom/input-select/index.d.ts.map +1 -0
  6. package/es/atom/input-select/index.js +98 -0
  7. package/es/atom/input-select/index.js.map +1 -0
  8. package/es/atom/input-select/style.css +169 -0
  9. package/es/atom/input-select/types.d.ts +31 -0
  10. package/es/atom/input-select/types.d.ts.map +1 -0
  11. package/es/atom/input-select/types.js +17 -0
  12. package/es/atom/input-select/types.js.map +1 -0
  13. package/es/atom/input-switch/index.d.ts +1 -0
  14. package/es/atom/input-switch/index.d.ts.map +1 -1
  15. package/es/atom/input-switch/index.js +18 -5
  16. package/es/atom/input-switch/index.js.map +1 -1
  17. package/es/atom/input-switch/style.css +75 -0
  18. package/es/atom/link/index.d.ts.map +1 -1
  19. package/es/atom/link/index.js +3 -0
  20. package/es/atom/link/index.js.map +1 -1
  21. package/es/molecule/button-menu-action/index.d.ts +1 -0
  22. package/es/molecule/button-menu-action/index.d.ts.map +1 -1
  23. package/es/molecule/button-menu-action/index.js +11 -2
  24. package/es/molecule/button-menu-action/index.js.map +1 -1
  25. package/es/molecule/button-menu-action/types.d.ts +2 -0
  26. package/es/molecule/button-menu-action/types.d.ts.map +1 -1
  27. package/es/molecule/button-menu-action/types.js +2 -1
  28. package/es/molecule/button-menu-action/types.js.map +1 -1
  29. package/es/molecule/cm-popin/types.d.ts +3 -0
  30. package/es/molecule/cm-popin/types.d.ts.map +1 -1
  31. package/es/molecule/draggable-list/index.d.ts +1 -0
  32. package/es/molecule/setup-section/index.d.ts +1 -0
  33. package/es/molecule/setup-section/index.d.ts.map +1 -1
  34. package/es/molecule/setup-sections/index.d.ts +1 -0
  35. package/es/organism/brand-learning-priorities/index.d.ts +1 -0
  36. package/es/organism/content-skill-modal/index.d.ts +2 -0
  37. package/es/organism/content-skill-modal/index.d.ts.map +1 -1
  38. package/es/organism/content-skill-modal/types.d.ts +2 -0
  39. package/es/organism/content-skill-modal/types.d.ts.map +1 -1
  40. package/es/organism/list-items/index.d.ts +2 -0
  41. package/es/organism/mooc-header/index.d.ts +1 -0
  42. package/es/organism/mooc-header/index.d.ts.map +1 -1
  43. package/es/organism/mooc-header/index.js +53 -55
  44. package/es/organism/mooc-header/index.js.map +1 -1
  45. package/es/organism/mooc-header/style.css +118 -110
  46. package/es/organism/user-preferences/index.d.ts +1 -0
  47. package/es/template/app-player/loading/index.d.ts +3 -0
  48. package/es/template/app-player/player/index.d.ts +6 -0
  49. package/es/template/app-player/player/slides/index.d.ts +3 -0
  50. package/es/template/app-player/player/slides/index.d.ts.map +1 -1
  51. package/es/template/app-player/popin-correction/index.d.ts +3 -0
  52. package/es/template/app-player/popin-correction/index.d.ts.map +1 -1
  53. package/es/template/app-player/popin-end/index.d.ts +3 -0
  54. package/es/template/app-review/index.d.ts +3 -0
  55. package/es/template/app-review/index.d.ts.map +1 -1
  56. package/es/template/app-review/player/prop-types.d.ts +3 -0
  57. package/es/template/app-review/player/prop-types.d.ts.map +1 -1
  58. package/es/template/app-review/prop-types.d.ts +3 -0
  59. package/es/template/app-review/prop-types.d.ts.map +1 -1
  60. package/es/template/back-office/brand-update/index.d.ts +8 -0
  61. package/es/template/common/dashboard/index.d.ts +6 -0
  62. package/es/template/common/search-page/index.d.ts +3 -0
  63. package/es/template/external-course/index.d.ts +3 -0
  64. package/es/variables/colors.css +8 -6
  65. package/lib/atom/button-link/index.d.ts.map +1 -1
  66. package/lib/atom/button-link/index.js +1 -0
  67. package/lib/atom/button-link/index.js.map +1 -1
  68. package/lib/atom/input-select/index.d.ts +5 -0
  69. package/lib/atom/input-select/index.d.ts.map +1 -0
  70. package/lib/atom/input-select/index.js +105 -0
  71. package/lib/atom/input-select/index.js.map +1 -0
  72. package/lib/atom/input-select/style.css +169 -0
  73. package/lib/atom/input-select/types.d.ts +31 -0
  74. package/lib/atom/input-select/types.d.ts.map +1 -0
  75. package/lib/atom/input-select/types.js +22 -0
  76. package/lib/atom/input-select/types.js.map +1 -0
  77. package/lib/atom/input-switch/index.d.ts +1 -0
  78. package/lib/atom/input-switch/index.d.ts.map +1 -1
  79. package/lib/atom/input-switch/index.js +18 -5
  80. package/lib/atom/input-switch/index.js.map +1 -1
  81. package/lib/atom/input-switch/style.css +75 -0
  82. package/lib/atom/link/index.d.ts.map +1 -1
  83. package/lib/atom/link/index.js +3 -0
  84. package/lib/atom/link/index.js.map +1 -1
  85. package/lib/molecule/button-menu-action/index.d.ts +1 -0
  86. package/lib/molecule/button-menu-action/index.d.ts.map +1 -1
  87. package/lib/molecule/button-menu-action/index.js +11 -2
  88. package/lib/molecule/button-menu-action/index.js.map +1 -1
  89. package/lib/molecule/button-menu-action/types.d.ts +2 -0
  90. package/lib/molecule/button-menu-action/types.d.ts.map +1 -1
  91. package/lib/molecule/button-menu-action/types.js +2 -1
  92. package/lib/molecule/button-menu-action/types.js.map +1 -1
  93. package/lib/molecule/cm-popin/types.d.ts +3 -0
  94. package/lib/molecule/cm-popin/types.d.ts.map +1 -1
  95. package/lib/molecule/draggable-list/index.d.ts +1 -0
  96. package/lib/molecule/setup-section/index.d.ts +1 -0
  97. package/lib/molecule/setup-section/index.d.ts.map +1 -1
  98. package/lib/molecule/setup-sections/index.d.ts +1 -0
  99. package/lib/organism/brand-learning-priorities/index.d.ts +1 -0
  100. package/lib/organism/content-skill-modal/index.d.ts +2 -0
  101. package/lib/organism/content-skill-modal/index.d.ts.map +1 -1
  102. package/lib/organism/content-skill-modal/types.d.ts +2 -0
  103. package/lib/organism/content-skill-modal/types.d.ts.map +1 -1
  104. package/lib/organism/list-items/index.d.ts +2 -0
  105. package/lib/organism/mooc-header/index.d.ts +1 -0
  106. package/lib/organism/mooc-header/index.d.ts.map +1 -1
  107. package/lib/organism/mooc-header/index.js +52 -54
  108. package/lib/organism/mooc-header/index.js.map +1 -1
  109. package/lib/organism/mooc-header/style.css +118 -110
  110. package/lib/organism/user-preferences/index.d.ts +1 -0
  111. package/lib/template/app-player/loading/index.d.ts +3 -0
  112. package/lib/template/app-player/player/index.d.ts +6 -0
  113. package/lib/template/app-player/player/slides/index.d.ts +3 -0
  114. package/lib/template/app-player/player/slides/index.d.ts.map +1 -1
  115. package/lib/template/app-player/popin-correction/index.d.ts +3 -0
  116. package/lib/template/app-player/popin-correction/index.d.ts.map +1 -1
  117. package/lib/template/app-player/popin-end/index.d.ts +3 -0
  118. package/lib/template/app-review/index.d.ts +3 -0
  119. package/lib/template/app-review/index.d.ts.map +1 -1
  120. package/lib/template/app-review/player/prop-types.d.ts +3 -0
  121. package/lib/template/app-review/player/prop-types.d.ts.map +1 -1
  122. package/lib/template/app-review/prop-types.d.ts +3 -0
  123. package/lib/template/app-review/prop-types.d.ts.map +1 -1
  124. package/lib/template/back-office/brand-update/index.d.ts +8 -0
  125. package/lib/template/common/dashboard/index.d.ts +6 -0
  126. package/lib/template/common/search-page/index.d.ts +3 -0
  127. package/lib/template/external-course/index.d.ts +3 -0
  128. package/lib/variables/colors.css +8 -6
  129. package/package.json +2 -2
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/index.tsx"],"names":[],"mappings":";AAOA,OAAkB,EAAC,eAAe,EAAW,MAAM,SAAS,CAAC;AAoD7D,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmIzC,CAAC;AAIF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/index.tsx"],"names":[],"mappings":";AAOA,OAAkB,EAAC,eAAe,EAAW,MAAM,SAAS,CAAC;AAoD7D,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoIzC,CAAC;AAIF,eAAe,UAAU,CAAC"}
@@ -107,6 +107,7 @@ const ButtonLink = props => {
107
107
  style: customStyle,
108
108
  "data-name": dataName,
109
109
  "data-testid": dataTestId,
110
+ onClick: handleOnClick,
110
111
  "aria-label": ariaLabel || label,
111
112
  hoverColor: hoverColor,
112
113
  hoverBackgroundColor: hoverBackgroundColor,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","classnames","Link","FaIcon","DEFAULT_ICON_COLOR","ICONS","ToolTip","propTypes","style","getButtonContent","icon","content","hovered","hoverBackgroundColor","hoverColor","type","faIcon","position","Icon","createElement","className","buttonContent","label","iconComponent","iconName","name","iconColor","color","backgroundColor","size","faSize","wrapperSize","customStyle","theme","ButtonLink","props","usage","disabled","dataName","dataTestId","ariaLabel","tooltipText","tooltipPlacement","link","onClick","_noop","onKeyDown","useTitle","styleButton","button","iconButton","primary","secondary","tertiary","text","dangerous","setHovered","handleOnClick","event","handleOnKeyDown","handleMouseOver","handleMouseLeave","TooltipContent","tooltipContentWrapper","renderToolTip","closeToolTipInformationTextAriaLabel","fontSize","anchorId","toolTipIsVisible","placement","_customStyle","_extends","title","onMouseEnter","onMouseLeave","onMouseOver","tabIndex","process","env","NODE_ENV"],"sources":["../../../src/atom/button-link/index.tsx"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport {noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport FaIcon, {DEFAULT_ICON_COLOR, IconProps} from '../icon';\nimport {ICONS} from '../../util/button-icons';\nimport ToolTip from '../tooltip';\nimport propTypes, {ButtonLinkProps, IconType} from './types';\nimport style from './style.css';\n\nconst getButtonContent = (\n icon?: IconType,\n content?: string | React.ReactNode,\n hovered?: boolean,\n hoverBackgroundColor?: string,\n hoverColor?: string\n) => {\n const {type, faIcon, position} = icon || {type: '', position: ''};\n const Icon = type && ICONS[type];\n\n if (!Icon && !faIcon) {\n return (\n <div className={style.buttonContent}>\n <span className={style.label}>{content}</span>\n </div>\n );\n }\n\n const iconComponent = faIcon ? (\n <FaIcon\n {...({\n iconName: faIcon.name,\n iconColor: hovered && hoverColor ? hoverColor : faIcon.color ?? DEFAULT_ICON_COLOR,\n // eslint-disable-next-line no-nested-ternary\n backgroundColor: !faIcon?.backgroundColor\n ? null\n : hovered && hoverBackgroundColor\n ? hoverBackgroundColor\n : faIcon.backgroundColor,\n size: {\n faSize: faIcon.size,\n wrapperSize: faIcon.size\n },\n customStyle: faIcon.customStyle\n } as IconProps)}\n />\n ) : (\n <Icon className={style.icon} theme=\"coorpmanager\" />\n );\n\n return (\n <div className={style.buttonContent}>\n {position === 'left' ? iconComponent : null}\n {content ? <span className={style.label}>{content}</span> : null}\n {position === 'right' ? iconComponent : null}\n </div>\n );\n};\n\nconst ButtonLink = (props: ButtonLinkProps) => {\n const {\n type,\n usage = 'button',\n label,\n content,\n hoverBackgroundColor,\n hoverColor,\n disabled = false,\n icon,\n 'data-name': dataName,\n 'data-testid': dataTestId = 'button-link',\n 'aria-label': ariaLabel,\n tooltipText,\n tooltipPlacement = 'left',\n link,\n onClick = noop,\n onKeyDown = noop,\n className,\n customStyle,\n useTitle = true\n } = props;\n const styleButton = classnames(\n link && style.link,\n className,\n style.button,\n !label && style.iconButton,\n type === 'primary' && style.primary,\n type === 'secondary' && style.secondary,\n type === 'tertiary' && style.tertiary,\n type === 'text' && style.text,\n type === 'dangerous' && style.dangerous,\n disabled && style.disabled\n );\n\n const [hovered, setHovered] = useState(false);\n\n const handleOnClick = useCallback(event => onClick(event), [onClick]);\n\n const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n const handleMouseOver = useCallback(() => {\n setHovered(true);\n }, [setHovered]);\n\n const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n const TooltipContent = useCallback(\n () => <span className={style.tooltipContentWrapper}>{tooltipText || ariaLabel}</span>,\n [tooltipText, ariaLabel]\n );\n\n const renderToolTip = () => {\n const closeToolTipInformationTextAriaLabel = tooltipText || ariaLabel;\n if (!closeToolTipInformationTextAriaLabel) return null;\n return (\n <ToolTip\n fontSize={12}\n anchorId=\"button-icon\"\n toolTipIsVisible={hovered}\n placement={tooltipPlacement}\n TooltipContent={TooltipContent}\n closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n />\n );\n };\n\n const _customStyle = useMemo(() => {\n return {\n ...customStyle,\n ...((hoverBackgroundColor || hoverColor) && hovered\n ? {\n backgroundColor: hoverBackgroundColor,\n color: hoverColor\n }\n : null)\n };\n }, [hoverBackgroundColor, hoverColor, hovered, customStyle]);\n\n if (link) {\n return (\n <Link\n {...link}\n {...(useTitle && {\n title: ariaLabel || label\n })}\n className={styleButton}\n style={customStyle}\n data-name={dataName}\n data-testid={dataTestId}\n aria-label={ariaLabel || label}\n hoverColor={hoverColor}\n hoverBackgroundColor={hoverBackgroundColor}\n onMouseEnter={handleMouseOver}\n onMouseLeave={handleMouseLeave}\n >\n {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n {renderToolTip()}\n </Link>\n );\n }\n\n return (\n <button\n {...(useTitle && {\n title: ariaLabel || label\n })}\n {...(ariaLabel && !label\n ? {\n 'data-for': 'button-icon',\n 'data-tip': hovered\n }\n : {})}\n // eslint-disable-next-line react/button-has-type\n type={usage}\n aria-label={ariaLabel || label}\n data-name={dataName}\n data-testid={dataTestId}\n style={_customStyle}\n className={styleButton}\n onClick={handleOnClick}\n onKeyDown={handleOnKeyDown}\n onMouseOver={handleMouseOver}\n onMouseLeave={handleMouseLeave}\n tabIndex={0}\n disabled={disabled}\n >\n {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n {renderToolTip()}\n </button>\n );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","classnames","Link","FaIcon","DEFAULT_ICON_COLOR","ICONS","ToolTip","propTypes","style","getButtonContent","icon","content","hovered","hoverBackgroundColor","hoverColor","type","faIcon","position","Icon","createElement","className","buttonContent","label","iconComponent","iconName","name","iconColor","color","backgroundColor","size","faSize","wrapperSize","customStyle","theme","ButtonLink","props","usage","disabled","dataName","dataTestId","ariaLabel","tooltipText","tooltipPlacement","link","onClick","_noop","onKeyDown","useTitle","styleButton","button","iconButton","primary","secondary","tertiary","text","dangerous","setHovered","handleOnClick","event","handleOnKeyDown","handleMouseOver","handleMouseLeave","TooltipContent","tooltipContentWrapper","renderToolTip","closeToolTipInformationTextAriaLabel","fontSize","anchorId","toolTipIsVisible","placement","_customStyle","_extends","title","onMouseEnter","onMouseLeave","onMouseOver","tabIndex","process","env","NODE_ENV"],"sources":["../../../src/atom/button-link/index.tsx"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport {noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport FaIcon, {DEFAULT_ICON_COLOR, IconProps} from '../icon';\nimport {ICONS} from '../../util/button-icons';\nimport ToolTip from '../tooltip';\nimport propTypes, {ButtonLinkProps, IconType} from './types';\nimport style from './style.css';\n\nconst getButtonContent = (\n icon?: IconType,\n content?: string | React.ReactNode,\n hovered?: boolean,\n hoverBackgroundColor?: string,\n hoverColor?: string\n) => {\n const {type, faIcon, position} = icon || {type: '', position: ''};\n const Icon = type && ICONS[type];\n\n if (!Icon && !faIcon) {\n return (\n <div className={style.buttonContent}>\n <span className={style.label}>{content}</span>\n </div>\n );\n }\n\n const iconComponent = faIcon ? (\n <FaIcon\n {...({\n iconName: faIcon.name,\n iconColor: hovered && hoverColor ? hoverColor : faIcon.color ?? DEFAULT_ICON_COLOR,\n // eslint-disable-next-line no-nested-ternary\n backgroundColor: !faIcon?.backgroundColor\n ? null\n : hovered && hoverBackgroundColor\n ? hoverBackgroundColor\n : faIcon.backgroundColor,\n size: {\n faSize: faIcon.size,\n wrapperSize: faIcon.size\n },\n customStyle: faIcon.customStyle\n } as IconProps)}\n />\n ) : (\n <Icon className={style.icon} theme=\"coorpmanager\" />\n );\n\n return (\n <div className={style.buttonContent}>\n {position === 'left' ? iconComponent : null}\n {content ? <span className={style.label}>{content}</span> : null}\n {position === 'right' ? iconComponent : null}\n </div>\n );\n};\n\nconst ButtonLink = (props: ButtonLinkProps) => {\n const {\n type,\n usage = 'button',\n label,\n content,\n hoverBackgroundColor,\n hoverColor,\n disabled = false,\n icon,\n 'data-name': dataName,\n 'data-testid': dataTestId = 'button-link',\n 'aria-label': ariaLabel,\n tooltipText,\n tooltipPlacement = 'left',\n link,\n onClick = noop,\n onKeyDown = noop,\n className,\n customStyle,\n useTitle = true\n } = props;\n const styleButton = classnames(\n link && style.link,\n className,\n style.button,\n !label && style.iconButton,\n type === 'primary' && style.primary,\n type === 'secondary' && style.secondary,\n type === 'tertiary' && style.tertiary,\n type === 'text' && style.text,\n type === 'dangerous' && style.dangerous,\n disabled && style.disabled\n );\n\n const [hovered, setHovered] = useState(false);\n\n const handleOnClick = useCallback(event => onClick(event), [onClick]);\n\n const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n const handleMouseOver = useCallback(() => {\n setHovered(true);\n }, [setHovered]);\n\n const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n const TooltipContent = useCallback(\n () => <span className={style.tooltipContentWrapper}>{tooltipText || ariaLabel}</span>,\n [tooltipText, ariaLabel]\n );\n\n const renderToolTip = () => {\n const closeToolTipInformationTextAriaLabel = tooltipText || ariaLabel;\n if (!closeToolTipInformationTextAriaLabel) return null;\n return (\n <ToolTip\n fontSize={12}\n anchorId=\"button-icon\"\n toolTipIsVisible={hovered}\n placement={tooltipPlacement}\n TooltipContent={TooltipContent}\n closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n />\n );\n };\n\n const _customStyle = useMemo(() => {\n return {\n ...customStyle,\n ...((hoverBackgroundColor || hoverColor) && hovered\n ? {\n backgroundColor: hoverBackgroundColor,\n color: hoverColor\n }\n : null)\n };\n }, [hoverBackgroundColor, hoverColor, hovered, customStyle]);\n\n if (link) {\n return (\n <Link\n {...link}\n {...(useTitle && {\n title: ariaLabel || label\n })}\n className={styleButton}\n style={customStyle}\n data-name={dataName}\n data-testid={dataTestId}\n onClick={handleOnClick}\n aria-label={ariaLabel || label}\n hoverColor={hoverColor}\n hoverBackgroundColor={hoverBackgroundColor}\n onMouseEnter={handleMouseOver}\n onMouseLeave={handleMouseLeave}\n >\n {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n {renderToolTip()}\n </Link>\n );\n }\n\n return (\n <button\n {...(useTitle && {\n title: ariaLabel || label\n })}\n {...(ariaLabel && !label\n ? {\n 'data-for': 'button-icon',\n 'data-tip': hovered\n }\n : {})}\n // eslint-disable-next-line react/button-has-type\n type={usage}\n aria-label={ariaLabel || label}\n data-name={dataName}\n data-testid={dataTestId}\n style={_customStyle}\n className={styleButton}\n onClick={handleOnClick}\n onKeyDown={handleOnKeyDown}\n onMouseOver={handleMouseOver}\n onMouseLeave={handleMouseLeave}\n tabIndex={0}\n disabled={disabled}\n >\n {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n {renderToolTip()}\n </button>\n );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import { InputSelectProps } from './types';
3
+ declare const InputSelect: React.FC<InputSelectProps>;
4
+ export default InputSelect;
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D,OAAO,EAAC,gBAAgB,EAAoB,MAAM,SAAS,CAAC;AAI5D,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuG3C,CAAC;AAIF,eAAe,WAAW,CAAC"}
@@ -0,0 +1,98 @@
1
+ import React, { useState, useRef, useCallback } from 'react';
2
+ import classnames from 'classnames';
3
+ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4
+ import style from './style.css';
5
+ import { propTypes } from './types';
6
+ const COMPONENT_ID = 'input-select';
7
+ const InputSelect = ({
8
+ options = [],
9
+ value,
10
+ onChange,
11
+ placeholder,
12
+ className,
13
+ 'aria-label': ariaLabel,
14
+ iconClosed = 'chevron-down',
15
+ selectedIcon = 'circle-check'
16
+ }) => {
17
+ const [open, setOpen] = useState(false);
18
+ const wrapperRef = useRef(null);
19
+ const componentId = `${COMPONENT_ID}-${placeholder?.toLowerCase().replace(/\s+/g, '-') || 'default'}`;
20
+ const handleToggle = useCallback(() => {
21
+ setOpen(o => !o);
22
+ }, []);
23
+ const handleOnOptionClick = useCallback(optionValue => {
24
+ onChange(optionValue);
25
+ setOpen(false);
26
+ }, [onChange]);
27
+ React.useEffect(() => {
28
+ if (!open) return;
29
+ const handleClickOutside = event => {
30
+ if (!wrapperRef.current?.contains(event.target)) {
31
+ setOpen(false);
32
+ }
33
+ };
34
+ document.addEventListener('mousedown', handleClickOutside);
35
+ return () => document.removeEventListener('mousedown', handleClickOutside);
36
+ }, [open]);
37
+ const selectedOption = options.find(opt => opt.value === value);
38
+ const renderOption = option => {
39
+ function handleClick() {
40
+ handleOnOptionClick(option.value);
41
+ }
42
+ const isSelected = option.value === value;
43
+ return /*#__PURE__*/React.createElement("li", {
44
+ key: option.value,
45
+ className: classnames(style.option, isSelected && style.selected),
46
+ role: "option",
47
+ "aria-selected": isSelected,
48
+ onClick: handleClick
49
+ }, /*#__PURE__*/React.createElement("span", {
50
+ className: style.optionIcon
51
+ }, option.icon), /*#__PURE__*/React.createElement("span", {
52
+ className: style.optionLabel
53
+ }, option.label), isSelected ? /*#__PURE__*/React.createElement("span", {
54
+ className: style.checkIcon
55
+ }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
56
+ icon: selectedIcon
57
+ })) : null);
58
+ };
59
+ return /*#__PURE__*/React.createElement("div", {
60
+ className: classnames(style.outerWrapper, {
61
+ [style.open]: open
62
+ })
63
+ }, /*#__PURE__*/React.createElement("div", {
64
+ ref: wrapperRef,
65
+ className: classnames(style.wrapper, className),
66
+ "aria-label": ariaLabel
67
+ }, /*#__PURE__*/React.createElement("button", {
68
+ type: "button",
69
+ className: style.display,
70
+ onClick: handleToggle,
71
+ "aria-haspopup": "listbox",
72
+ "aria-expanded": open,
73
+ "aria-controls": open ? `${componentId}-listbox` : undefined,
74
+ id: componentId
75
+ }, /*#__PURE__*/React.createElement("div", {
76
+ className: style.content
77
+ }, /*#__PURE__*/React.createElement("span", {
78
+ className: style.label
79
+ }, placeholder), selectedOption ? /*#__PURE__*/React.createElement("span", {
80
+ className: style.value
81
+ }, selectedOption.label) : null), /*#__PURE__*/React.createElement("span", {
82
+ className: classnames(style.iconWrapper, {
83
+ [style.open]: open
84
+ })
85
+ }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
86
+ className: classnames(style.icon, {
87
+ [style.rotated]: open
88
+ }),
89
+ icon: iconClosed
90
+ }))), open ? /*#__PURE__*/React.createElement("ul", {
91
+ id: `${componentId}-listbox`,
92
+ className: style.menu,
93
+ role: "listbox"
94
+ }, options.map(renderOption)) : null));
95
+ };
96
+ InputSelect.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
97
+ export default InputSelect;
98
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["React","useState","useRef","useCallback","classnames","FontAwesomeIcon","style","propTypes","COMPONENT_ID","InputSelect","options","value","onChange","placeholder","className","ariaLabel","iconClosed","selectedIcon","open","setOpen","wrapperRef","componentId","toLowerCase","replace","handleToggle","o","handleOnOptionClick","optionValue","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","selectedOption","find","opt","renderOption","option","handleClick","isSelected","createElement","key","selected","role","onClick","optionIcon","icon","optionLabel","label","checkIcon","outerWrapper","ref","wrapper","type","display","undefined","id","content","iconWrapper","rotated","menu","map","process","env","NODE_ENV"],"sources":["../../../src/atom/input-select/index.tsx"],"sourcesContent":["import React, {useState, useRef, useCallback} from 'react';\nimport classnames from 'classnames';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {IconName} from '@fortawesome/fontawesome-svg-core';\nimport style from './style.css';\nimport {InputSelectProps, Option, propTypes} from './types';\n\nconst COMPONENT_ID = 'input-select';\n\nconst InputSelect: React.FC<InputSelectProps> = ({\n options = [],\n value,\n onChange,\n placeholder,\n className,\n 'aria-label': ariaLabel,\n iconClosed = 'chevron-down',\n selectedIcon = 'circle-check'\n}) => {\n const [open, setOpen] = useState(false);\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n const componentId = `${COMPONENT_ID}-${\n placeholder?.toLowerCase().replace(/\\s+/g, '-') || 'default'\n }`;\n\n const handleToggle = useCallback(() => {\n setOpen(o => !o);\n }, []);\n\n const handleOnOptionClick = useCallback(\n (optionValue: string) => {\n onChange(optionValue);\n setOpen(false);\n },\n [onChange]\n );\n\n React.useEffect(() => {\n if (!open) return;\n const handleClickOutside = (event: MouseEvent) => {\n if (!wrapperRef.current?.contains(event.target as Node)) {\n setOpen(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [open]);\n\n const selectedOption = options.find(opt => opt.value === value);\n\n const renderOption = (option: Option) => {\n function handleClick() {\n handleOnOptionClick(option.value);\n }\n\n const isSelected = option.value === value;\n\n return (\n <li\n key={option.value}\n className={classnames(style.option, isSelected && style.selected)}\n role=\"option\"\n aria-selected={isSelected}\n onClick={handleClick}\n >\n <span className={style.optionIcon}>{option.icon}</span>\n <span className={style.optionLabel}>{option.label}</span>\n {isSelected ? (\n <span className={style.checkIcon}>\n <FontAwesomeIcon icon={selectedIcon as IconName} />\n </span>\n ) : null}\n </li>\n );\n };\n\n return (\n <div\n className={classnames(style.outerWrapper, {\n [style.open]: open\n })}\n >\n <div ref={wrapperRef} className={classnames(style.wrapper, className)} aria-label={ariaLabel}>\n <button\n type=\"button\"\n className={style.display}\n onClick={handleToggle}\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-controls={open ? `${componentId}-listbox` : undefined}\n id={componentId}\n >\n <div className={style.content}>\n <span className={style.label}>{placeholder}</span>\n {selectedOption ? <span className={style.value}>{selectedOption.label}</span> : null}\n </div>\n <span className={classnames(style.iconWrapper, {[style.open]: open})}>\n <FontAwesomeIcon\n className={classnames(style.icon, {[style.rotated]: open})}\n icon={iconClosed as IconName}\n />\n </span>\n </button>\n {open ? (\n <ul id={`${componentId}-listbox`} className={style.menu} role=\"listbox\">\n {options.map(renderOption)}\n </ul>\n ) : null}\n </div>\n </div>\n );\n};\n\nInputSelect.propTypes = propTypes;\n\nexport default InputSelect;\n"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,169 @@
1
+ @value colors: "../../variables/colors.css";
2
+ @value cm_grey_700 from colors;
3
+ @value cm_grey_500 from colors;
4
+ @value cm_grey_400 from colors;
5
+ @value cm_grey_200 from colors;
6
+ @value cm_negative_300 from colors;
7
+ @value white from colors;
8
+ @value cm_grey_100 from colors;
9
+ @value brand from colors;
10
+ @value cm_primary_blue from colors;
11
+ @value primary_100 from colors;
12
+ @value cm_blue_50 from colors;
13
+ @value cm_grey_150 from colors;
14
+
15
+ .outerWrapper {
16
+ width: 100%;
17
+ border-radius: 12px;
18
+ transition: box-shadow 0.2s;
19
+ }
20
+
21
+ .outerWrapper:hover {
22
+ box-shadow: 0 0 0 2px brand;
23
+ }
24
+
25
+ .outerWrapper.open {
26
+ box-shadow: 0 0 0 2px white, 0 0 0 4px brand;
27
+ }
28
+
29
+ .wrapper {
30
+ background: white;
31
+ border-radius: 12px;
32
+ position: relative;
33
+ width: 100%;
34
+ }
35
+
36
+ .display {
37
+ width: 100%;
38
+ height: 44px;
39
+ background: cm_grey_100;
40
+ border: none;
41
+ border-radius: 12px;
42
+ display: flex;
43
+ align-items: center;
44
+ justify-content: space-between;
45
+ padding: 0 4px 0 24px;
46
+ cursor: pointer;
47
+ transition: box-shadow 0.2s;
48
+ font-family: 'Gilroy';
49
+ font-size: 14px;
50
+ font-weight: 500;
51
+ outline: none;
52
+ }
53
+
54
+ .content {
55
+ display: flex;
56
+ align-items: center;
57
+ gap: 8px;
58
+ flex: 1;
59
+ }
60
+
61
+ .label {
62
+ color: cm_grey_400;
63
+ font-weight: 400;
64
+ font-size: 14px;
65
+ }
66
+
67
+ .value {
68
+ color: cm_grey_700;
69
+ font-weight: 700;
70
+ font-size: 14px;
71
+ }
72
+ .iconWrapper{
73
+ width: 36px;
74
+ height: 36px;
75
+ display: flex;
76
+ align-items: center;
77
+ justify-content: center;
78
+ }
79
+
80
+ .iconWrapper.open{
81
+ background-color: cm_grey_150;
82
+ border-radius: 8px;
83
+ }
84
+
85
+ .icon {
86
+ color: cm_grey_500;
87
+ width: 14px;
88
+ height: 14px;
89
+ display: flex;
90
+ align-items: center;
91
+ transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
92
+ }
93
+
94
+ .rotated {
95
+ transform: rotate(180deg);
96
+ }
97
+
98
+ .menu {
99
+ position: absolute;
100
+ left: 0;
101
+ right: 0;
102
+ margin-top: 8px;
103
+ background: white;
104
+ border-radius: 12px;
105
+ box-shadow: 0 4px 8px 0px rgba(0,0,0,0.04);
106
+ z-index: 10;
107
+ padding: 12px;
108
+ list-style: none;
109
+ width: 100%;
110
+ box-sizing: border-box;
111
+ }
112
+
113
+ .option {
114
+ display: flex;
115
+ align-items: center;
116
+ justify-content: space-between;
117
+ padding: 12px 12px;
118
+ font-size: 14px;
119
+ color: cm_grey_700;
120
+ cursor: pointer;
121
+ background: white;
122
+ border: none;
123
+ text-align: left;
124
+ width: 100%;
125
+ font-family: 'Gilroy';
126
+ transition: background 0.15s, color 0.15s;
127
+ box-sizing: border-box;
128
+ border-radius: 12px;
129
+ margin-bottom: 4px;
130
+ }
131
+
132
+ .option.selected {
133
+ background-color: color(brand lightness(95%));
134
+ }
135
+
136
+ .option.selected:hover,
137
+ .option.selected:focus {
138
+ background-color: color(brand lightness(90%));
139
+ }
140
+
141
+ .option:hover:not(.selected),
142
+ .option:focus:not(.selected) {
143
+ background: cm_grey_100;
144
+ }
145
+
146
+ .wrapper:disabled::after {
147
+ border-top-color: cm_grey_500;
148
+ }
149
+
150
+ .optionIcon {
151
+ margin-right: 12px;
152
+ font-size: 20px;
153
+ display: inline-flex;
154
+ align-items: center;
155
+ }
156
+
157
+ .optionLabel {
158
+ flex: 1;
159
+ font-size: 14px;
160
+ color: cm_grey_700;
161
+ display: flex;
162
+ align-items: center;
163
+ }
164
+
165
+ .checkIcon {
166
+ color: brand;
167
+ display: inline-flex;
168
+ align-items: center;
169
+ }
@@ -0,0 +1,31 @@
1
+ import PropTypes from 'prop-types';
2
+ export interface Option {
3
+ value: string;
4
+ label: string;
5
+ icon?: string | null;
6
+ }
7
+ export interface InputSelectProps {
8
+ options: Option[];
9
+ value?: string;
10
+ onChange: (value: string) => void;
11
+ placeholder?: string;
12
+ className?: string;
13
+ 'aria-label'?: string;
14
+ iconClosed?: string;
15
+ selectedIcon?: string;
16
+ }
17
+ export declare const propTypes: {
18
+ options: PropTypes.Validator<Required<PropTypes.InferProps<{
19
+ value: PropTypes.Validator<string>;
20
+ label: PropTypes.Validator<string>;
21
+ icon: PropTypes.Requireable<string>;
22
+ }>>[]>;
23
+ value: PropTypes.Requireable<string>;
24
+ onChange: PropTypes.Validator<(...args: any[]) => any>;
25
+ placeholder: PropTypes.Requireable<string>;
26
+ className: PropTypes.Requireable<string>;
27
+ 'aria-label': PropTypes.Requireable<string>;
28
+ iconClosed: PropTypes.Requireable<string>;
29
+ selectedIcon: PropTypes.Requireable<string>;
30
+ };
31
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/input-select/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAQD,eAAO,MAAM,SAAS;;;;;;;;;;;;;CASrB,CAAC"}
@@ -0,0 +1,17 @@
1
+ import PropTypes from 'prop-types';
2
+ const optionPropTypes = {
3
+ value: PropTypes.string.isRequired,
4
+ label: PropTypes.string.isRequired,
5
+ icon: PropTypes.string
6
+ };
7
+ export const propTypes = {
8
+ options: PropTypes.arrayOf(PropTypes.exact(optionPropTypes).isRequired).isRequired,
9
+ value: PropTypes.string,
10
+ onChange: PropTypes.func.isRequired,
11
+ placeholder: PropTypes.string,
12
+ className: PropTypes.string,
13
+ 'aria-label': PropTypes.string,
14
+ iconClosed: PropTypes.string,
15
+ selectedIcon: PropTypes.string
16
+ };
17
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","names":["PropTypes","optionPropTypes","value","string","isRequired","label","icon","propTypes","options","arrayOf","exact","onChange","func","placeholder","className","iconClosed","selectedIcon"],"sources":["../../../src/atom/input-select/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nexport interface Option {\n value: string;\n label: string;\n icon?: string | null;\n}\n\nexport interface InputSelectProps {\n options: Option[];\n value?: string;\n onChange: (value: string) => void;\n placeholder?: string;\n className?: string;\n 'aria-label'?: string;\n iconClosed?: string;\n selectedIcon?: string;\n}\n\nconst optionPropTypes = {\n value: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n icon: PropTypes.string\n};\n\nexport const propTypes = {\n options: PropTypes.arrayOf(PropTypes.exact(optionPropTypes).isRequired).isRequired,\n value: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n placeholder: PropTypes.string,\n className: PropTypes.string,\n 'aria-label': PropTypes.string,\n iconClosed: PropTypes.string,\n selectedIcon: PropTypes.string\n};\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAmBlC,MAAMC,eAAe,GAAG;EACtBC,KAAK,EAAEF,SAAS,CAACG,MAAM,CAACC,UAAU;EAClCC,KAAK,EAAEL,SAAS,CAACG,MAAM,CAACC,UAAU;EAClCE,IAAI,EAAEN,SAAS,CAACG;AAClB,CAAC;AAED,OAAO,MAAMI,SAAS,GAAG;EACvBC,OAAO,EAAER,SAAS,CAACS,OAAO,CAACT,SAAS,CAACU,KAAK,CAACT,eAAe,CAAC,CAACG,UAAU,CAAC,CAACA,UAAU;EAClFF,KAAK,EAAEF,SAAS,CAACG,MAAM;EACvBQ,QAAQ,EAAEX,SAAS,CAACY,IAAI,CAACR,UAAU;EACnCS,WAAW,EAAEb,SAAS,CAACG,MAAM;EAC7BW,SAAS,EAAEd,SAAS,CAACG,MAAM;EAC3B,YAAY,EAAEH,SAAS,CAACG,MAAM;EAC9BY,UAAU,EAAEf,SAAS,CAACG,MAAM;EAC5Ba,YAAY,EAAEhB,SAAS,CAACG;AAC1B,CAAC","ignoreList":[]}
@@ -17,6 +17,7 @@ declare namespace InputSwitch {
17
17
  details: PropTypes.Requireable<string>;
18
18
  'data-name': PropTypes.Requireable<string>;
19
19
  requiredSelection: PropTypes.Requireable<boolean>;
20
+ icon: PropTypes.Requireable<string>;
20
21
  };
21
22
  }
22
23
  import PropTypes from "prop-types";
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-switch/index.js"],"names":[],"mappings":";AAMA,sDAsFC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-switch/index.js"],"names":[],"mappings":";AAOA,sDA8FC"}
@@ -3,6 +3,7 @@ import _noop from "lodash/fp/noop";
3
3
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
4
4
  import React, { useMemo } from 'react';
5
5
  import PropTypes from 'prop-types';
6
+ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
6
7
  import getClassState from '../../util/get-class-state';
7
8
  import style from './style.css';
8
9
  const InputSwitch = props => {
@@ -21,15 +22,21 @@ const InputSwitch = props => {
21
22
  requiredSelection = false,
22
23
  'data-name': dataName,
23
24
  'aria-labelledby': ariaLabelledBy,
24
- 'aria-label': ariaLabel
25
+ 'aria-label': ariaLabel,
26
+ icon
25
27
  } = props;
26
28
  const idSwitch = id || _uniqueId('input-switch-');
27
29
  const isDisabled = disabled ? 'disabled' : '';
28
30
  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);
29
- const titleView = title ? /*#__PURE__*/React.createElement("span", {
31
+ const titleView = title ? /*#__PURE__*/React.createElement("div", {
32
+ className: icon ? style.titleContainer : null
33
+ }, icon ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
34
+ icon: icon,
35
+ className: style.icon
36
+ }) : null, /*#__PURE__*/React.createElement("span", {
30
37
  id: `title-view-${dataName}`,
31
38
  className: style.title
32
- }, `${title} `, ' ') : null;
39
+ }, title)) : null;
33
40
  const descriptionView = description ? /*#__PURE__*/React.createElement("div", {
34
41
  className: style.description
35
42
  }, description) : null;
@@ -40,6 +47,11 @@ const InputSwitch = props => {
40
47
  defaultClass: style.coorpmanager,
41
48
  modifiedClass: style.coorpmanagerModified
42
49
  };
50
+ case 'newMooc':
51
+ return {
52
+ defaultClass: style.newMooc,
53
+ modifiedClass: style.newMoocModified
54
+ };
43
55
  case 'mooc':
44
56
  return {
45
57
  defaultClass: style.partielUncheck,
@@ -103,10 +115,11 @@ InputSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
103
115
  'aria-label': PropTypes.string,
104
116
  modified: PropTypes.bool,
105
117
  titlePosition: PropTypes.oneOf(['right', 'left']),
106
- theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),
118
+ theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc', 'newMooc']),
107
119
  details: PropTypes.string,
108
120
  'data-name': PropTypes.string,
109
- requiredSelection: PropTypes.bool
121
+ requiredSelection: PropTypes.bool,
122
+ icon: PropTypes.string
110
123
  } : {};
111
124
  export default InputSwitch;
112
125
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useMemo","PropTypes","getClassState","style","InputSwitch","props","title","name","id","value","disabled","onChange","_noop","description","modified","theme","titlePosition","details","requiredSelection","dataName","ariaLabelledBy","ariaLabel","idSwitch","_uniqueId","isDisabled","handleChange","e","target","checked","titleView","createElement","className","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","partielUncheck","defaultStyle","btnSwitchContainer","_extends","type","checkbox","htmlFor","tabIndex","alignedTextContainer","detailsTxt","propTypes","process","env","NODE_ENV","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 'aria-labelledby': ariaLabelledBy,\n 'aria-label': ariaLabel\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 ? (\n <span id={`title-view-${dataName}`} className={style.title}>\n {`${title} `}{' '}\n </span>\n ) : 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.defaultStyle, 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' ? titleView : null}\n <div className={requiredSelection ? style.requiredSelection : null}>\n <div className={style.btnSwitchContainer}>\n <input\n {...(ariaLabelledBy ? {'aria-labelledby': ariaLabelledBy} : {})}\n {...(title ? {'aria-labelledby': `title-view-${dataName}`} : {})}\n {...(ariaLabel && !ariaLabelledBy && !title ? {'aria-label': ariaLabel} : {})}\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={ariaLabelledBy}\n />\n <label\n htmlFor={idSwitch}\n data-name=\"input-switch-label\"\n tabIndex={0}\n aria-label={ariaLabel}\n title={ariaLabel}\n />\n </div>\n </div>\n <div className={!details ? style.alignedTextContainer : null}>\n {titlePosition === 'right' ? titleView : 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 'aria-labelledby': PropTypes.string,\n 'aria-label': 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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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["React","useMemo","PropTypes","FontAwesomeIcon","getClassState","style","InputSwitch","props","title","name","id","value","disabled","onChange","_noop","description","modified","theme","titlePosition","details","requiredSelection","dataName","ariaLabelledBy","ariaLabel","icon","idSwitch","_uniqueId","isDisabled","handleChange","e","target","checked","titleView","createElement","className","titleContainer","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","newMooc","newMoocModified","partielUncheck","defaultStyle","btnSwitchContainer","_extends","type","checkbox","htmlFor","tabIndex","alignedTextContainer","detailsTxt","propTypes","process","env","NODE_ENV","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 {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\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 'aria-labelledby': ariaLabelledBy,\n 'aria-label': ariaLabel,\n icon\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 const titleView = title ? (\n <div className={icon ? style.titleContainer : null}>\n {icon ? <FontAwesomeIcon icon={icon} className={style.icon} /> : null}\n <span id={`title-view-${dataName}`} className={style.title}>\n {title}\n </span>\n </div>\n ) : 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 'newMooc':\n return {\n defaultClass: style.newMooc,\n modifiedClass: style.newMoocModified\n };\n case 'mooc':\n return {\n defaultClass: style.partielUncheck,\n modifiedClass: style.coorpmanagerModified\n };\n default:\n return {defaultClass: style.defaultStyle, 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' ? titleView : null}\n <div className={requiredSelection ? style.requiredSelection : null}>\n <div className={style.btnSwitchContainer}>\n <input\n {...(ariaLabelledBy ? {'aria-labelledby': ariaLabelledBy} : {})}\n {...(title ? {'aria-labelledby': `title-view-${dataName}`} : {})}\n {...(ariaLabel && !ariaLabelledBy && !title ? {'aria-label': ariaLabel} : {})}\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={ariaLabelledBy}\n />\n <label\n htmlFor={idSwitch}\n data-name=\"input-switch-label\"\n tabIndex={0}\n aria-label={ariaLabel}\n title={ariaLabel}\n />\n </div>\n </div>\n <div className={!details ? style.alignedTextContainer : null}>\n {titlePosition === 'right' ? titleView : 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 'aria-labelledby': PropTypes.string,\n 'aria-label': PropTypes.string,\n modified: PropTypes.bool,\n titlePosition: PropTypes.oneOf(['right', 'left']),\n theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc', 'newMooc']),\n details: PropTypes.string,\n 'data-name': PropTypes.string,\n requiredSelection: PropTypes.bool,\n icon: PropTypes.string\n};\nexport default InputSwitch;\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAGC,OAAO,QAAO,OAAO;AACpC,OAAOC,SAAS,MAAM,YAAY;AAElC,SAAQC,eAAe,QAAO,gCAAgC;AAC9D,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,KAAK,MAAM,aAAa;AAE/B,MAAMC,WAAW,GAAGC,KAAK,IAAI;EAC3B,MAAM;IACJC,KAAK;IACLC,IAAI;IACJC,EAAE;IACFC,KAAK;IACLC,QAAQ;IACRC,QAAQ,GAAAC,KAAO;IACfC,WAAW;IACXC,QAAQ,GAAG,KAAK;IAChBC,KAAK,GAAG,SAAS;IACjBC,aAAa,GAAG,MAAM;IACtBC,OAAO,GAAG,EAAE;IACZC,iBAAiB,GAAG,KAAK;IACzB,WAAW,EAAEC,QAAQ;IACrB,iBAAiB,EAAEC,cAAc;IACjC,YAAY,EAAEC,SAAS;IACvBC;EACF,CAAC,GAAGjB,KAAK;EAET,MAAMkB,QAAQ,GAAGf,EAAE,IAAIgB,SAAA,CAAS,eAAe,CAAC;EAChD,MAAMC,UAAU,GAAGf,QAAQ,GAAG,UAAU,GAAG,EAAE;EAC7C,MAAMgB,YAAY,GAAG3B,OAAO,CAAC,MAAM4B,CAAC,IAAIhB,QAAQ,CAACgB,CAAC,CAACC,MAAM,CAACC,OAAO,CAAC,EAAE,CAAClB,QAAQ,CAAC,CAAC;EAC/E,MAAMmB,SAAS,GAAGxB,KAAK,gBACrBR,KAAA,CAAAiC,aAAA;IAAKC,SAAS,EAAEV,IAAI,GAAGnB,KAAK,CAAC8B,cAAc,GAAG;EAAK,GAChDX,IAAI,gBAAGxB,KAAA,CAAAiC,aAAA,CAAC9B,eAAe;IAACqB,IAAI,EAAEA,IAAK;IAACU,SAAS,EAAE7B,KAAK,CAACmB;EAAK,CAAE,CAAC,GAAG,IAAI,eACrExB,KAAA,CAAAiC,aAAA;IAAMvB,EAAE,EAAE,cAAcW,QAAQ,EAAG;IAACa,SAAS,EAAE7B,KAAK,CAACG;EAAM,GACxDA,KACG,CACH,CAAC,GACJ,IAAI;EAER,MAAM4B,eAAe,GAAGrB,WAAW,gBACjCf,KAAA,CAAAiC,aAAA;IAAKC,SAAS,EAAE7B,KAAK,CAACU;EAAY,GAAEA,WAAiB,CAAC,GACpD,IAAI;EAER,MAAMsB,QAAQ,GAAGA,CAAA,KAAM;IACrB,QAAQpB,KAAK;MACX,KAAK,cAAc;QACjB,OAAO;UACLqB,YAAY,EAAEjC,KAAK,CAACkC,YAAY;UAChCC,aAAa,EAAEnC,KAAK,CAACoC;QACvB,CAAC;MACH,KAAK,SAAS;QACZ,OAAO;UACLH,YAAY,EAAEjC,KAAK,CAACqC,OAAO;UAC3BF,aAAa,EAAEnC,KAAK,CAACsC;QACvB,CAAC;MACH,KAAK,MAAM;QACT,OAAO;UACLL,YAAY,EAAEjC,KAAK,CAACuC,cAAc;UAClCJ,aAAa,EAAEnC,KAAK,CAACoC;QACvB,CAAC;MACH;QACE,OAAO;UAACH,YAAY,EAAEjC,KAAK,CAACwC,YAAY;UAAEL,aAAa,EAAEnC,KAAK,CAACW;QAAQ,CAAC;IAC5E;EACF,CAAC;EACD,MAAM;IAACsB,YAAY;IAAEE;EAAa,CAAC,GAAGH,QAAQ,CAAC,CAAC;EAChD,MAAMH,SAAS,GAAG9B,aAAa,CAACkC,YAAY,EAAEE,aAAa,EAAE,IAAI,EAAExB,QAAQ,CAAC;EAE5E,oBACEhB,KAAA,CAAAiC,aAAA;IAAKC,SAAS,EAAEA,SAAU;IAAC,aAAW,gBAAgBjB,KAAK,GAAGI,QAAQ;EAAG,GACtEH,aAAa,KAAK,MAAM,GAAGc,SAAS,GAAG,IAAI,eAC5ChC,KAAA,CAAAiC,aAAA;IAAKC,SAAS,EAAEd,iBAAiB,GAAGf,KAAK,CAACe,iBAAiB,GAAG;EAAK,gBACjEpB,KAAA,CAAAiC,aAAA;IAAKC,SAAS,EAAE7B,KAAK,CAACyC;EAAmB,gBACvC9C,KAAA,CAAAiC,aAAA,UAAAc,QAAA,KACOzB,cAAc,GAAG;IAAC,iBAAiB,EAAEA;EAAc,CAAC,GAAG,CAAC,CAAC,EACzDd,KAAK,GAAG;IAAC,iBAAiB,EAAE,cAAca,QAAQ;EAAE,CAAC,GAAG,CAAC,CAAC,EAC1DE,SAAS,IAAI,CAACD,cAAc,IAAI,CAACd,KAAK,GAAG;IAAC,YAAY,EAAEe;EAAS,CAAC,GAAG,CAAC,CAAC;IAC5EyB,IAAI,EAAC,UAAU;IACftC,EAAE,EAAEe,QAAS;IACbhB,IAAI,EAAEA,IAAK;IACXI,QAAQ,EAAEe,YAAa;IACvBG,OAAO,EAAEpB,KAAM;IACfC,QAAQ,EAAEe,UAAW;IACrBO,SAAS,EAAE7B,KAAK,CAAC4C,QAAS;IAC1B,mBAAiB3B;EAAe,EACjC,CAAC,eACFtB,KAAA,CAAAiC,aAAA;IACEiB,OAAO,EAAEzB,QAAS;IAClB,aAAU,oBAAoB;IAC9B0B,QAAQ,EAAE,CAAE;IACZ,cAAY5B,SAAU;IACtBf,KAAK,EAAEe;EAAU,CAClB,CACE,CACF,CAAC,eACNvB,KAAA,CAAAiC,aAAA;IAAKC,SAAS,EAAE,CAACf,OAAO,GAAGd,KAAK,CAAC+C,oBAAoB,GAAG;EAAK,GAC1DlC,aAAa,KAAK,OAAO,GAAGc,SAAS,GAAG,IAAI,EAC5Cb,OAAO,gBAAGnB,KAAA,CAAAiC,aAAA;IAAKC,SAAS,EAAE7B,KAAK,CAACgD;EAAW,GAAElC,OAAa,CAAC,GAAG,IAC5D,CAAC,EACLiB,eACE,CAAC;AAEV,CAAC;AAED9B,WAAW,CAACgD,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EACtBjD,KAAK,EAAEN,SAAS,CAACwD,MAAM;EACvBjD,IAAI,EAAEP,SAAS,CAACwD,MAAM;EACtBhD,EAAE,EAAER,SAAS,CAACwD,MAAM;EACpB/C,KAAK,EAAET,SAAS,CAACyD,IAAI;EACrB/C,QAAQ,EAAEV,SAAS,CAACyD,IAAI;EACxB9C,QAAQ,EAAEX,SAAS,CAAC0D,IAAI;EACxB7C,WAAW,EAAEb,SAAS,CAACwD,MAAM;EAC7B,iBAAiB,EAAExD,SAAS,CAACwD,MAAM;EACnC,YAAY,EAAExD,SAAS,CAACwD,MAAM;EAC9B1C,QAAQ,EAAEd,SAAS,CAACyD,IAAI;EACxBzC,aAAa,EAAEhB,SAAS,CAAC2D,KAAK,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;EACjD5C,KAAK,EAAEf,SAAS,CAAC2D,KAAK,CAAC,CAAC,SAAS,EAAE,cAAc,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;EACtE1C,OAAO,EAAEjB,SAAS,CAACwD,MAAM;EACzB,WAAW,EAAExD,SAAS,CAACwD,MAAM;EAC7BtC,iBAAiB,EAAElB,SAAS,CAACyD,IAAI;EACjCnC,IAAI,EAAEtB,SAAS,CAACwD;AAClB,CAAC;AACD,eAAepD,WAAW","ignoreList":[]}
@@ -1,4 +1,6 @@
1
1
  @value colors: "../../variables/colors.css";
2
+ @value breakpoints: "../../variables/breakpoints.css";
3
+ @value tablet from breakpoints;
2
4
  @value orange from colors;
3
5
  @value medium from colors;
4
6
  @value white from colors;
@@ -9,6 +11,7 @@
9
11
  @value black from colors;
10
12
  @value cm_primary_blue from colors;
11
13
  @value light_blue from colors;
14
+ @value cm_grey_700 from colors;
12
15
 
13
16
  .defaultStyle {
14
17
  display: flex;
@@ -208,3 +211,75 @@
208
211
  border-color: cm_primary_blue;
209
212
  opacity: 0.4;
210
213
  }
214
+
215
+ .newMooc {
216
+ composes: defaultStyle;
217
+ width: 100%;
218
+ }
219
+
220
+ .newMoocModified {
221
+ composes: modified;
222
+ }
223
+
224
+ .newMooc label, .newMoocModified label {
225
+ height: 24px;
226
+ border: solid 2px cm_grey_200;
227
+ margin-right: 16px;
228
+ background: cm_grey_200;
229
+ }
230
+
231
+ .newMooc label::after, .newMoocModified label::after {
232
+ top: 1px;
233
+ width: 22px;
234
+ height: 22px;
235
+ }
236
+
237
+ .newMooc span, .newMoocModified span {
238
+ font-family: Gilroy;
239
+ font-weight: bold;
240
+ color: black;
241
+ font-size: 14px;
242
+ font-weight: 600;
243
+ line-height: 20px;
244
+ color: cm_grey_700;
245
+ }
246
+
247
+ .newMooc .checkbox:checked ~ label {
248
+ background: cm_primary_blue;
249
+ border-color: cm_primary_blue;
250
+ }
251
+
252
+ .newMooc .checkbox:disabled ~ label {
253
+ border-color: cm_grey_200;
254
+ pointer-events: none;
255
+ background: cm_grey_200;
256
+ opacity: 0.4;
257
+ }
258
+
259
+ .newMooc .checkbox:disabled ~ label::after {
260
+ background: white;
261
+ }
262
+
263
+ .titleContainer {
264
+ display: flex;
265
+ align-items: center;
266
+ align-content: flex-start;
267
+ justify-content: center;
268
+ gap: 8px;
269
+ flex: 1;
270
+ }
271
+
272
+ .titleContainer .title {
273
+ width: 100%;
274
+ }
275
+
276
+ .icon {
277
+ width: 14px;
278
+ height: 14px;
279
+ }
280
+
281
+ @media tablet {
282
+ .icon {
283
+ display: none;
284
+ }
285
+ }
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/link/index.js"],"names":[],"mappings":";AAMA,mEAwEC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/link/index.js"],"names":[],"mappings":";AAMA,mEA2EC"}