@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.
- package/es/atom/button-link/index.d.ts.map +1 -1
- package/es/atom/button-link/index.js +1 -0
- package/es/atom/button-link/index.js.map +1 -1
- package/es/atom/input-select/index.d.ts +5 -0
- package/es/atom/input-select/index.d.ts.map +1 -0
- package/es/atom/input-select/index.js +98 -0
- package/es/atom/input-select/index.js.map +1 -0
- package/es/atom/input-select/style.css +169 -0
- package/es/atom/input-select/types.d.ts +31 -0
- package/es/atom/input-select/types.d.ts.map +1 -0
- package/es/atom/input-select/types.js +17 -0
- package/es/atom/input-select/types.js.map +1 -0
- package/es/atom/input-switch/index.d.ts +1 -0
- package/es/atom/input-switch/index.d.ts.map +1 -1
- package/es/atom/input-switch/index.js +18 -5
- package/es/atom/input-switch/index.js.map +1 -1
- package/es/atom/input-switch/style.css +75 -0
- package/es/atom/link/index.d.ts.map +1 -1
- package/es/atom/link/index.js +3 -0
- package/es/atom/link/index.js.map +1 -1
- package/es/molecule/button-menu-action/index.d.ts +1 -0
- package/es/molecule/button-menu-action/index.d.ts.map +1 -1
- package/es/molecule/button-menu-action/index.js +11 -2
- package/es/molecule/button-menu-action/index.js.map +1 -1
- package/es/molecule/button-menu-action/types.d.ts +2 -0
- package/es/molecule/button-menu-action/types.d.ts.map +1 -1
- package/es/molecule/button-menu-action/types.js +2 -1
- package/es/molecule/button-menu-action/types.js.map +1 -1
- package/es/molecule/cm-popin/types.d.ts +3 -0
- package/es/molecule/cm-popin/types.d.ts.map +1 -1
- package/es/molecule/draggable-list/index.d.ts +1 -0
- package/es/molecule/setup-section/index.d.ts +1 -0
- package/es/molecule/setup-section/index.d.ts.map +1 -1
- package/es/molecule/setup-sections/index.d.ts +1 -0
- package/es/organism/brand-learning-priorities/index.d.ts +1 -0
- package/es/organism/content-skill-modal/index.d.ts +2 -0
- package/es/organism/content-skill-modal/index.d.ts.map +1 -1
- package/es/organism/content-skill-modal/types.d.ts +2 -0
- package/es/organism/content-skill-modal/types.d.ts.map +1 -1
- package/es/organism/list-items/index.d.ts +2 -0
- package/es/organism/mooc-header/index.d.ts +1 -0
- package/es/organism/mooc-header/index.d.ts.map +1 -1
- package/es/organism/mooc-header/index.js +53 -55
- package/es/organism/mooc-header/index.js.map +1 -1
- package/es/organism/mooc-header/style.css +118 -110
- package/es/organism/user-preferences/index.d.ts +1 -0
- package/es/template/app-player/loading/index.d.ts +3 -0
- package/es/template/app-player/player/index.d.ts +6 -0
- package/es/template/app-player/player/slides/index.d.ts +3 -0
- package/es/template/app-player/player/slides/index.d.ts.map +1 -1
- package/es/template/app-player/popin-correction/index.d.ts +3 -0
- package/es/template/app-player/popin-correction/index.d.ts.map +1 -1
- package/es/template/app-player/popin-end/index.d.ts +3 -0
- package/es/template/app-review/index.d.ts +3 -0
- package/es/template/app-review/index.d.ts.map +1 -1
- package/es/template/app-review/player/prop-types.d.ts +3 -0
- package/es/template/app-review/player/prop-types.d.ts.map +1 -1
- package/es/template/app-review/prop-types.d.ts +3 -0
- package/es/template/app-review/prop-types.d.ts.map +1 -1
- package/es/template/back-office/brand-update/index.d.ts +8 -0
- package/es/template/common/dashboard/index.d.ts +6 -0
- package/es/template/common/search-page/index.d.ts +3 -0
- package/es/template/external-course/index.d.ts +3 -0
- package/es/variables/colors.css +8 -6
- package/lib/atom/button-link/index.d.ts.map +1 -1
- package/lib/atom/button-link/index.js +1 -0
- package/lib/atom/button-link/index.js.map +1 -1
- package/lib/atom/input-select/index.d.ts +5 -0
- package/lib/atom/input-select/index.d.ts.map +1 -0
- package/lib/atom/input-select/index.js +105 -0
- package/lib/atom/input-select/index.js.map +1 -0
- package/lib/atom/input-select/style.css +169 -0
- package/lib/atom/input-select/types.d.ts +31 -0
- package/lib/atom/input-select/types.d.ts.map +1 -0
- package/lib/atom/input-select/types.js +22 -0
- package/lib/atom/input-select/types.js.map +1 -0
- package/lib/atom/input-switch/index.d.ts +1 -0
- package/lib/atom/input-switch/index.d.ts.map +1 -1
- package/lib/atom/input-switch/index.js +18 -5
- package/lib/atom/input-switch/index.js.map +1 -1
- package/lib/atom/input-switch/style.css +75 -0
- package/lib/atom/link/index.d.ts.map +1 -1
- package/lib/atom/link/index.js +3 -0
- package/lib/atom/link/index.js.map +1 -1
- package/lib/molecule/button-menu-action/index.d.ts +1 -0
- package/lib/molecule/button-menu-action/index.d.ts.map +1 -1
- package/lib/molecule/button-menu-action/index.js +11 -2
- package/lib/molecule/button-menu-action/index.js.map +1 -1
- package/lib/molecule/button-menu-action/types.d.ts +2 -0
- package/lib/molecule/button-menu-action/types.d.ts.map +1 -1
- package/lib/molecule/button-menu-action/types.js +2 -1
- package/lib/molecule/button-menu-action/types.js.map +1 -1
- package/lib/molecule/cm-popin/types.d.ts +3 -0
- package/lib/molecule/cm-popin/types.d.ts.map +1 -1
- package/lib/molecule/draggable-list/index.d.ts +1 -0
- package/lib/molecule/setup-section/index.d.ts +1 -0
- package/lib/molecule/setup-section/index.d.ts.map +1 -1
- package/lib/molecule/setup-sections/index.d.ts +1 -0
- package/lib/organism/brand-learning-priorities/index.d.ts +1 -0
- package/lib/organism/content-skill-modal/index.d.ts +2 -0
- package/lib/organism/content-skill-modal/index.d.ts.map +1 -1
- package/lib/organism/content-skill-modal/types.d.ts +2 -0
- package/lib/organism/content-skill-modal/types.d.ts.map +1 -1
- package/lib/organism/list-items/index.d.ts +2 -0
- package/lib/organism/mooc-header/index.d.ts +1 -0
- package/lib/organism/mooc-header/index.d.ts.map +1 -1
- package/lib/organism/mooc-header/index.js +52 -54
- package/lib/organism/mooc-header/index.js.map +1 -1
- package/lib/organism/mooc-header/style.css +118 -110
- package/lib/organism/user-preferences/index.d.ts +1 -0
- package/lib/template/app-player/loading/index.d.ts +3 -0
- package/lib/template/app-player/player/index.d.ts +6 -0
- package/lib/template/app-player/player/slides/index.d.ts +3 -0
- package/lib/template/app-player/player/slides/index.d.ts.map +1 -1
- package/lib/template/app-player/popin-correction/index.d.ts +3 -0
- package/lib/template/app-player/popin-correction/index.d.ts.map +1 -1
- package/lib/template/app-player/popin-end/index.d.ts +3 -0
- package/lib/template/app-review/index.d.ts +3 -0
- package/lib/template/app-review/index.d.ts.map +1 -1
- package/lib/template/app-review/player/prop-types.d.ts +3 -0
- package/lib/template/app-review/player/prop-types.d.ts.map +1 -1
- package/lib/template/app-review/prop-types.d.ts +3 -0
- package/lib/template/app-review/prop-types.d.ts.map +1 -1
- package/lib/template/back-office/brand-update/index.d.ts +8 -0
- package/lib/template/common/dashboard/index.d.ts +6 -0
- package/lib/template/common/search-page/index.d.ts +3 -0
- package/lib/template/external-course/index.d.ts +3 -0
- package/lib/variables/colors.css +8 -6
- 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
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"}
|
|
@@ -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 @@
|
|
|
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":";
|
|
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("
|
|
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
|
-
},
|
|
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
|
|
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":"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","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,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/link/index.js"],"names":[],"mappings":";AAMA,mEA2EC"}
|