@coorpacademy/components 11.32.28 → 11.32.30
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-icon/index.d.ts.map +1 -1
- package/es/atom/button-link-icon/index.js +0 -2
- package/es/atom/button-link-icon/index.js.map +1 -1
- package/es/molecule/playlist-detail-cover/index.js +3 -3
- package/es/molecule/playlist-detail-cover/index.js.map +1 -1
- package/es/template/playlist-detail/style.css +1 -0
- package/lib/atom/button-link-icon/index.d.ts.map +1 -1
- package/lib/atom/button-link-icon/index.js +0 -2
- package/lib/atom/button-link-icon/index.js.map +1 -1
- package/lib/molecule/playlist-detail-cover/index.js +3 -3
- package/lib/molecule/playlist-detail-cover/index.js.map +1 -1
- package/lib/template/playlist-detail/style.css +1 -0
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link-icon/index.js"],"names":[],"mappings":";AAoCA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link-icon/index.js"],"names":[],"mappings":";AAoCA,yDAkHC"}
|
|
@@ -83,7 +83,6 @@ const ButtonLinkIcon = props => {
|
|
|
83
83
|
className: styleButton,
|
|
84
84
|
"data-name": dataName,
|
|
85
85
|
"aria-label": ariaLabel,
|
|
86
|
-
title: ariaLabel,
|
|
87
86
|
onMouseLeave: handleMouseLeave,
|
|
88
87
|
onMouseOver: handleMouseOver
|
|
89
88
|
}), contentView) : /*#__PURE__*/React.createElement("button", _extends({}, ariaLabel ? {
|
|
@@ -94,7 +93,6 @@ const ButtonLinkIcon = props => {
|
|
|
94
93
|
"aria-label": ariaLabel,
|
|
95
94
|
"data-name": dataName,
|
|
96
95
|
"data-testid": `button-${dataName}-${className}`,
|
|
97
|
-
title: ariaLabel,
|
|
98
96
|
className: styleButton,
|
|
99
97
|
onClick: handleOnClick,
|
|
100
98
|
onMouseLeave: handleMouseLeave,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","useRef","PropTypes","classnames","ICONS","FaIcon","Link","ToolTip","style","getButtonContent","icon","faIcon","Icon","buttonContent","getSizeStyle","size","small","responsive","default","ButtonLinkIcon","props","disabled","dataName","ariaLabel","link","onClick","className","tooltipPlacement","toolTipIsVisible","setToolTipIsVisible","timer","contentView","styleButton","handleOnClick","handleMouseOver","current","clearTimeout","setTimeout","undefined","handleMouseLeave","TooltipContent","tooltipContentWrapper","Button","propTypes","oneOf","string","func","shape","href","download","bool","target"],"sources":["../../../src/atom/button-link-icon/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, keys} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {ICONS} from '../../util/button-icons';\nimport FaIcon from '../icon';\nimport Link from '../link';\nimport ToolTip from '../tooltip';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst getButtonContent = (icon, faIcon) => {\n const Icon = getOr(null, icon, ICONS);\n\n if (!Icon && !faIcon) {\n return <div className={style.buttonContent} />;\n }\n\n return (\n <div className={style.buttonContent}>\n {faIcon ? <FaIcon iconName={faIcon} /> : <Icon className={style.icon} />}\n </div>\n );\n};\n\nconst getSizeStyle = size => {\n switch (size) {\n case 'small':\n return style.small;\n case 'responsive':\n return style.responsive;\n default:\n return style.default;\n }\n};\n\nconst ButtonLinkIcon = props => {\n const {\n size = 'default',\n disabled,\n icon,\n faIcon,\n 'data-name': dataName,\n 'aria-label': ariaLabel,\n link,\n onClick,\n className,\n tooltipPlacement = 'left'\n } = props;\n const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n const timer = useRef();\n\n const contentView = getButtonContent(icon, faIcon);\n const styleButton = classnames(\n getSizeStyle(size),\n link && style.link,\n disabled && style.disabled,\n className\n );\n\n const handleOnClick = useMemo(() => () => onClick(), [onClick]);\n\n const handleMouseOver = useCallback(() => {\n timer.current && clearTimeout(timer.current);\n timer.current = setTimeout(() => {\n setToolTipIsVisible(true);\n timer.current = undefined;\n }, 300);\n }, [timer, setToolTipIsVisible]);\n\n const handleMouseLeave = useCallback(() => {\n timer.current && clearTimeout(timer.current);\n setToolTipIsVisible(false);\n }, [timer, setToolTipIsVisible]);\n\n const TooltipContent = useCallback(\n () => <span className={style.tooltipContentWrapper}>{ariaLabel}</span>,\n [ariaLabel]\n );\n\n const Button = useCallback(\n () =>\n link ? (\n <Link\n {...link}\n {...(ariaLabel\n ? {\n 'data-for': 'button-icon',\n 'data-tip': toolTipIsVisible\n }\n : {})}\n className={styleButton}\n data-name={dataName}\n aria-label={ariaLabel}\n
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","useRef","PropTypes","classnames","ICONS","FaIcon","Link","ToolTip","style","getButtonContent","icon","faIcon","Icon","buttonContent","getSizeStyle","size","small","responsive","default","ButtonLinkIcon","props","disabled","dataName","ariaLabel","link","onClick","className","tooltipPlacement","toolTipIsVisible","setToolTipIsVisible","timer","contentView","styleButton","handleOnClick","handleMouseOver","current","clearTimeout","setTimeout","undefined","handleMouseLeave","TooltipContent","tooltipContentWrapper","Button","propTypes","oneOf","string","func","shape","href","download","bool","target"],"sources":["../../../src/atom/button-link-icon/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, keys} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {ICONS} from '../../util/button-icons';\nimport FaIcon from '../icon';\nimport Link from '../link';\nimport ToolTip from '../tooltip';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst getButtonContent = (icon, faIcon) => {\n const Icon = getOr(null, icon, ICONS);\n\n if (!Icon && !faIcon) {\n return <div className={style.buttonContent} />;\n }\n\n return (\n <div className={style.buttonContent}>\n {faIcon ? <FaIcon iconName={faIcon} /> : <Icon className={style.icon} />}\n </div>\n );\n};\n\nconst getSizeStyle = size => {\n switch (size) {\n case 'small':\n return style.small;\n case 'responsive':\n return style.responsive;\n default:\n return style.default;\n }\n};\n\nconst ButtonLinkIcon = props => {\n const {\n size = 'default',\n disabled,\n icon,\n faIcon,\n 'data-name': dataName,\n 'aria-label': ariaLabel,\n link,\n onClick,\n className,\n tooltipPlacement = 'left'\n } = props;\n const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n const timer = useRef();\n\n const contentView = getButtonContent(icon, faIcon);\n const styleButton = classnames(\n getSizeStyle(size),\n link && style.link,\n disabled && style.disabled,\n className\n );\n\n const handleOnClick = useMemo(() => () => onClick(), [onClick]);\n\n const handleMouseOver = useCallback(() => {\n timer.current && clearTimeout(timer.current);\n timer.current = setTimeout(() => {\n setToolTipIsVisible(true);\n timer.current = undefined;\n }, 300);\n }, [timer, setToolTipIsVisible]);\n\n const handleMouseLeave = useCallback(() => {\n timer.current && clearTimeout(timer.current);\n setToolTipIsVisible(false);\n }, [timer, setToolTipIsVisible]);\n\n const TooltipContent = useCallback(\n () => <span className={style.tooltipContentWrapper}>{ariaLabel}</span>,\n [ariaLabel]\n );\n\n const Button = useCallback(\n () =>\n link ? (\n <Link\n {...link}\n {...(ariaLabel\n ? {\n 'data-for': 'button-icon',\n 'data-tip': toolTipIsVisible\n }\n : {})}\n className={styleButton}\n data-name={dataName}\n aria-label={ariaLabel}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n >\n {contentView}\n </Link>\n ) : (\n <button\n {...(ariaLabel\n ? {\n 'data-for': 'button-icon',\n 'data-tip': toolTipIsVisible\n }\n : {})}\n type=\"button\"\n aria-label={ariaLabel}\n data-name={dataName}\n data-testid={`button-${dataName}-${className}`}\n className={styleButton}\n onClick={handleOnClick}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n disabled={disabled}\n >\n {contentView}\n </button>\n ),\n [\n link,\n ariaLabel,\n className,\n contentView,\n dataName,\n disabled,\n handleMouseLeave,\n handleMouseOver,\n handleOnClick,\n styleButton,\n toolTipIsVisible\n ]\n );\n\n return (\n <>\n <Button />\n {ariaLabel ? (\n <ToolTip\n fontSize={12}\n anchorId=\"button-icon\"\n toolTipIsVisible={toolTipIsVisible}\n placement={tooltipPlacement}\n TooltipContent={TooltipContent}\n closeToolTipInformationTextAriaLabel={ariaLabel}\n />\n ) : null}\n </>\n );\n};\n\nButtonLinkIcon.propTypes = {\n size: PropTypes.oneOf(['default', 'small', 'responsive']),\n 'aria-label': PropTypes.string,\n 'data-name': PropTypes.string,\n icon: PropTypes.oneOf(keys(ICONS)),\n faIcon: PropTypes.string,\n onClick: PropTypes.func,\n link: PropTypes.shape({\n href: PropTypes.string,\n download: PropTypes.bool,\n target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n }),\n disabled: PropTypes.bool,\n className: PropTypes.string,\n tooltipPlacement: PropTypes.oneOf(['left', 'right', 'top', 'bottom'])\n};\n\nexport default ButtonLinkIcon;\n"],"mappings":"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"}
|
|
@@ -24,18 +24,18 @@ const PlaylistDetailCover = ({
|
|
|
24
24
|
}, []);
|
|
25
25
|
return /*#__PURE__*/React.createElement("div", {
|
|
26
26
|
className: style.container
|
|
27
|
-
}, images.length === 1 ? /*#__PURE__*/React.createElement("
|
|
27
|
+
}, images.length === 1 ? /*#__PURE__*/React.createElement("div", {
|
|
28
28
|
className: style.image,
|
|
29
29
|
style: buildImageStyle(images[0])
|
|
30
30
|
}) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
31
31
|
className: style.imagesWrapper
|
|
32
|
-
}, firstColumnImages.map((image, index) => /*#__PURE__*/React.createElement("
|
|
32
|
+
}, firstColumnImages.map((image, index) => /*#__PURE__*/React.createElement("div", {
|
|
33
33
|
key: index,
|
|
34
34
|
className: style.image,
|
|
35
35
|
style: buildImageStyle(image)
|
|
36
36
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
37
37
|
className: style.imagesWrapper
|
|
38
|
-
}, secondColumnImages.map((image, index) => /*#__PURE__*/React.createElement("
|
|
38
|
+
}, secondColumnImages.map((image, index) => /*#__PURE__*/React.createElement("div", {
|
|
39
39
|
key: index,
|
|
40
40
|
className: style.image,
|
|
41
41
|
style: buildImageStyle(image)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","useCallback","PropTypes","EXTERNAL_COURSE_TYPES","style","FALLBACK_PATH","PlaylistDetailCover","images","firstColumnImages","secondColumnImages","imagesClone","splice","length","buildImageStyle","type","image","imageUrl","replace","backgroundImage","backgroundSize","backgroundPosition","container","imagesWrapper","map","index","propTypes","arrayOf","shape","oneOf","string","isRequired"],"sources":["../../../src/molecule/playlist-detail-cover/index.js"],"sourcesContent":["import React, {useMemo, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {EXTERNAL_COURSE_TYPES} from '../../util/external-content';\nimport style from './style.css';\n\nconst FALLBACK_PATH =\n 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/cover-fallback-external-$TYPE.png';\n\nconst PlaylistDetailCover = ({images}) => {\n const [firstColumnImages, secondColumnImages] = useMemo(() => {\n const imagesClone = [...images];\n return [imagesClone.splice(0, imagesClone.length / 2), imagesClone];\n }, [images]);\n\n const buildImageStyle = useCallback(({type, image}) => {\n const imageUrl = image || FALLBACK_PATH.replace('$TYPE', type);\n\n return {\n backgroundImage: `url(${imageUrl})`,\n backgroundSize: 'cover',\n backgroundPosition: 'center'\n };\n }, []);\n\n return (\n <div className={style.container}>\n {images.length === 1 ? (\n <
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useMemo","useCallback","PropTypes","EXTERNAL_COURSE_TYPES","style","FALLBACK_PATH","PlaylistDetailCover","images","firstColumnImages","secondColumnImages","imagesClone","splice","length","buildImageStyle","type","image","imageUrl","replace","backgroundImage","backgroundSize","backgroundPosition","container","imagesWrapper","map","index","propTypes","arrayOf","shape","oneOf","string","isRequired"],"sources":["../../../src/molecule/playlist-detail-cover/index.js"],"sourcesContent":["import React, {useMemo, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {EXTERNAL_COURSE_TYPES} from '../../util/external-content';\nimport style from './style.css';\n\nconst FALLBACK_PATH =\n 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/cover-fallback-external-$TYPE.png';\n\nconst PlaylistDetailCover = ({images}) => {\n const [firstColumnImages, secondColumnImages] = useMemo(() => {\n const imagesClone = [...images];\n return [imagesClone.splice(0, imagesClone.length / 2), imagesClone];\n }, [images]);\n\n const buildImageStyle = useCallback(({type, image}) => {\n const imageUrl = image || FALLBACK_PATH.replace('$TYPE', type);\n\n return {\n backgroundImage: `url(${imageUrl})`,\n backgroundSize: 'cover',\n backgroundPosition: 'center'\n };\n }, []);\n\n return (\n <div className={style.container}>\n {images.length === 1 ? (\n <div className={style.image} style={buildImageStyle(images[0])} />\n ) : (\n <>\n <div className={style.imagesWrapper}>\n {firstColumnImages.map((image, index) => (\n <div key={index} className={style.image} style={buildImageStyle(image)} />\n ))}\n </div>\n <div className={style.imagesWrapper}>\n {secondColumnImages.map((image, index) => (\n <div key={index} className={style.image} style={buildImageStyle(image)} />\n ))}\n </div>\n </>\n )}\n </div>\n );\n};\n\nPlaylistDetailCover.propTypes = {\n images: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.oneOf(EXTERNAL_COURSE_TYPES),\n image: PropTypes.string\n })\n ).isRequired\n};\n\nexport default PlaylistDetailCover;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,OAAf,EAAwBC,WAAxB,QAA0C,OAA1C;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAAQC,qBAAR,QAAoC,6BAApC;AACA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,MAAMC,aAAa,GACjB,4GADF;;AAGA,MAAMC,mBAAmB,GAAG,CAAC;EAACC;AAAD,CAAD,KAAc;EACxC,MAAM,CAACC,iBAAD,EAAoBC,kBAApB,IAA0CT,OAAO,CAAC,MAAM;IAC5D,MAAMU,WAAW,GAAG,CAAC,GAAGH,MAAJ,CAApB;IACA,OAAO,CAACG,WAAW,CAACC,MAAZ,CAAmB,CAAnB,EAAsBD,WAAW,CAACE,MAAZ,GAAqB,CAA3C,CAAD,EAAgDF,WAAhD,CAAP;EACD,CAHsD,EAGpD,CAACH,MAAD,CAHoD,CAAvD;EAKA,MAAMM,eAAe,GAAGZ,WAAW,CAAC,CAAC;IAACa,IAAD;IAAOC;EAAP,CAAD,KAAmB;IACrD,MAAMC,QAAQ,GAAGD,KAAK,IAAIV,aAAa,CAACY,OAAd,CAAsB,OAAtB,EAA+BH,IAA/B,CAA1B;IAEA,OAAO;MACLI,eAAe,EAAG,OAAMF,QAAS,GAD5B;MAELG,cAAc,EAAE,OAFX;MAGLC,kBAAkB,EAAE;IAHf,CAAP;EAKD,CARkC,EAQhC,EARgC,CAAnC;EAUA,oBACE;IAAK,SAAS,EAAEhB,KAAK,CAACiB;EAAtB,GACGd,MAAM,CAACK,MAAP,KAAkB,CAAlB,gBACC;IAAK,SAAS,EAAER,KAAK,CAACW,KAAtB;IAA6B,KAAK,EAAEF,eAAe,CAACN,MAAM,CAAC,CAAD,CAAP;EAAnD,EADD,gBAGC,uDACE;IAAK,SAAS,EAAEH,KAAK,CAACkB;EAAtB,GACGd,iBAAiB,CAACe,GAAlB,CAAsB,CAACR,KAAD,EAAQS,KAAR,kBACrB;IAAK,GAAG,EAAEA,KAAV;IAAiB,SAAS,EAAEpB,KAAK,CAACW,KAAlC;IAAyC,KAAK,EAAEF,eAAe,CAACE,KAAD;EAA/D,EADD,CADH,CADF,eAME;IAAK,SAAS,EAAEX,KAAK,CAACkB;EAAtB,GACGb,kBAAkB,CAACc,GAAnB,CAAuB,CAACR,KAAD,EAAQS,KAAR,kBACtB;IAAK,GAAG,EAAEA,KAAV;IAAiB,SAAS,EAAEpB,KAAK,CAACW,KAAlC;IAAyC,KAAK,EAAEF,eAAe,CAACE,KAAD;EAA/D,EADD,CADH,CANF,CAJJ,CADF;AAoBD,CApCD;;AAsCAT,mBAAmB,CAACmB,SAApB,2CAAgC;EAC9BlB,MAAM,EAAEL,SAAS,CAACwB,OAAV,CACNxB,SAAS,CAACyB,KAAV,CAAgB;IACdb,IAAI,EAAEZ,SAAS,CAAC0B,KAAV,CAAgBzB,qBAAhB,CADQ;IAEdY,KAAK,EAAEb,SAAS,CAAC2B;EAFH,CAAhB,CADM,EAKNC;AAN4B,CAAhC;AASA,eAAexB,mBAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link-icon/index.js"],"names":[],"mappings":";AAoCA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link-icon/index.js"],"names":[],"mappings":";AAoCA,yDAkHC"}
|
|
@@ -101,7 +101,6 @@ const ButtonLinkIcon = props => {
|
|
|
101
101
|
className: styleButton,
|
|
102
102
|
"data-name": dataName,
|
|
103
103
|
"aria-label": ariaLabel,
|
|
104
|
-
title: ariaLabel,
|
|
105
104
|
onMouseLeave: handleMouseLeave,
|
|
106
105
|
onMouseOver: handleMouseOver
|
|
107
106
|
}), contentView) : /*#__PURE__*/_react.default.createElement("button", _extends({}, ariaLabel ? {
|
|
@@ -112,7 +111,6 @@ const ButtonLinkIcon = props => {
|
|
|
112
111
|
"aria-label": ariaLabel,
|
|
113
112
|
"data-name": dataName,
|
|
114
113
|
"data-testid": `button-${dataName}-${className}`,
|
|
115
|
-
title: ariaLabel,
|
|
116
114
|
className: styleButton,
|
|
117
115
|
onClick: handleOnClick,
|
|
118
116
|
onMouseLeave: handleMouseLeave,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["getButtonContent","icon","faIcon","Icon","ICONS","style","buttonContent","getSizeStyle","size","small","responsive","default","ButtonLinkIcon","props","disabled","dataName","ariaLabel","link","onClick","className","tooltipPlacement","toolTipIsVisible","setToolTipIsVisible","useState","timer","useRef","contentView","styleButton","classnames","handleOnClick","useMemo","handleMouseOver","useCallback","current","clearTimeout","setTimeout","undefined","handleMouseLeave","TooltipContent","tooltipContentWrapper","Button","propTypes","PropTypes","oneOf","string","func","shape","href","download","bool","target"],"sources":["../../../src/atom/button-link-icon/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, keys} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {ICONS} from '../../util/button-icons';\nimport FaIcon from '../icon';\nimport Link from '../link';\nimport ToolTip from '../tooltip';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst getButtonContent = (icon, faIcon) => {\n const Icon = getOr(null, icon, ICONS);\n\n if (!Icon && !faIcon) {\n return <div className={style.buttonContent} />;\n }\n\n return (\n <div className={style.buttonContent}>\n {faIcon ? <FaIcon iconName={faIcon} /> : <Icon className={style.icon} />}\n </div>\n );\n};\n\nconst getSizeStyle = size => {\n switch (size) {\n case 'small':\n return style.small;\n case 'responsive':\n return style.responsive;\n default:\n return style.default;\n }\n};\n\nconst ButtonLinkIcon = props => {\n const {\n size = 'default',\n disabled,\n icon,\n faIcon,\n 'data-name': dataName,\n 'aria-label': ariaLabel,\n link,\n onClick,\n className,\n tooltipPlacement = 'left'\n } = props;\n const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n const timer = useRef();\n\n const contentView = getButtonContent(icon, faIcon);\n const styleButton = classnames(\n getSizeStyle(size),\n link && style.link,\n disabled && style.disabled,\n className\n );\n\n const handleOnClick = useMemo(() => () => onClick(), [onClick]);\n\n const handleMouseOver = useCallback(() => {\n timer.current && clearTimeout(timer.current);\n timer.current = setTimeout(() => {\n setToolTipIsVisible(true);\n timer.current = undefined;\n }, 300);\n }, [timer, setToolTipIsVisible]);\n\n const handleMouseLeave = useCallback(() => {\n timer.current && clearTimeout(timer.current);\n setToolTipIsVisible(false);\n }, [timer, setToolTipIsVisible]);\n\n const TooltipContent = useCallback(\n () => <span className={style.tooltipContentWrapper}>{ariaLabel}</span>,\n [ariaLabel]\n );\n\n const Button = useCallback(\n () =>\n link ? (\n <Link\n {...link}\n {...(ariaLabel\n ? {\n 'data-for': 'button-icon',\n 'data-tip': toolTipIsVisible\n }\n : {})}\n className={styleButton}\n data-name={dataName}\n aria-label={ariaLabel}\n
|
|
1
|
+
{"version":3,"file":"index.js","names":["getButtonContent","icon","faIcon","Icon","ICONS","style","buttonContent","getSizeStyle","size","small","responsive","default","ButtonLinkIcon","props","disabled","dataName","ariaLabel","link","onClick","className","tooltipPlacement","toolTipIsVisible","setToolTipIsVisible","useState","timer","useRef","contentView","styleButton","classnames","handleOnClick","useMemo","handleMouseOver","useCallback","current","clearTimeout","setTimeout","undefined","handleMouseLeave","TooltipContent","tooltipContentWrapper","Button","propTypes","PropTypes","oneOf","string","func","shape","href","download","bool","target"],"sources":["../../../src/atom/button-link-icon/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, keys} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {ICONS} from '../../util/button-icons';\nimport FaIcon from '../icon';\nimport Link from '../link';\nimport ToolTip from '../tooltip';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst getButtonContent = (icon, faIcon) => {\n const Icon = getOr(null, icon, ICONS);\n\n if (!Icon && !faIcon) {\n return <div className={style.buttonContent} />;\n }\n\n return (\n <div className={style.buttonContent}>\n {faIcon ? <FaIcon iconName={faIcon} /> : <Icon className={style.icon} />}\n </div>\n );\n};\n\nconst getSizeStyle = size => {\n switch (size) {\n case 'small':\n return style.small;\n case 'responsive':\n return style.responsive;\n default:\n return style.default;\n }\n};\n\nconst ButtonLinkIcon = props => {\n const {\n size = 'default',\n disabled,\n icon,\n faIcon,\n 'data-name': dataName,\n 'aria-label': ariaLabel,\n link,\n onClick,\n className,\n tooltipPlacement = 'left'\n } = props;\n const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n const timer = useRef();\n\n const contentView = getButtonContent(icon, faIcon);\n const styleButton = classnames(\n getSizeStyle(size),\n link && style.link,\n disabled && style.disabled,\n className\n );\n\n const handleOnClick = useMemo(() => () => onClick(), [onClick]);\n\n const handleMouseOver = useCallback(() => {\n timer.current && clearTimeout(timer.current);\n timer.current = setTimeout(() => {\n setToolTipIsVisible(true);\n timer.current = undefined;\n }, 300);\n }, [timer, setToolTipIsVisible]);\n\n const handleMouseLeave = useCallback(() => {\n timer.current && clearTimeout(timer.current);\n setToolTipIsVisible(false);\n }, [timer, setToolTipIsVisible]);\n\n const TooltipContent = useCallback(\n () => <span className={style.tooltipContentWrapper}>{ariaLabel}</span>,\n [ariaLabel]\n );\n\n const Button = useCallback(\n () =>\n link ? (\n <Link\n {...link}\n {...(ariaLabel\n ? {\n 'data-for': 'button-icon',\n 'data-tip': toolTipIsVisible\n }\n : {})}\n className={styleButton}\n data-name={dataName}\n aria-label={ariaLabel}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n >\n {contentView}\n </Link>\n ) : (\n <button\n {...(ariaLabel\n ? {\n 'data-for': 'button-icon',\n 'data-tip': toolTipIsVisible\n }\n : {})}\n type=\"button\"\n aria-label={ariaLabel}\n data-name={dataName}\n data-testid={`button-${dataName}-${className}`}\n className={styleButton}\n onClick={handleOnClick}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n disabled={disabled}\n >\n {contentView}\n </button>\n ),\n [\n link,\n ariaLabel,\n className,\n contentView,\n dataName,\n disabled,\n handleMouseLeave,\n handleMouseOver,\n handleOnClick,\n styleButton,\n toolTipIsVisible\n ]\n );\n\n return (\n <>\n <Button />\n {ariaLabel ? (\n <ToolTip\n fontSize={12}\n anchorId=\"button-icon\"\n toolTipIsVisible={toolTipIsVisible}\n placement={tooltipPlacement}\n TooltipContent={TooltipContent}\n closeToolTipInformationTextAriaLabel={ariaLabel}\n />\n ) : null}\n </>\n );\n};\n\nButtonLinkIcon.propTypes = {\n size: PropTypes.oneOf(['default', 'small', 'responsive']),\n 'aria-label': PropTypes.string,\n 'data-name': PropTypes.string,\n icon: PropTypes.oneOf(keys(ICONS)),\n faIcon: PropTypes.string,\n onClick: PropTypes.func,\n link: PropTypes.shape({\n href: PropTypes.string,\n download: PropTypes.bool,\n target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n }),\n disabled: PropTypes.bool,\n className: PropTypes.string,\n tooltipPlacement: PropTypes.oneOf(['left', 'right', 'top', 'bottom'])\n};\n\nexport default ButtonLinkIcon;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAEA,MAAMA,gBAAgB,GAAG,CAACC,IAAD,EAAOC,MAAP,KAAkB;EACzC,MAAMC,IAAI,GAAG,qBAAM,IAAN,EAAYF,IAAZ,EAAkBG,kBAAlB,CAAb;;EAEA,IAAI,CAACD,IAAD,IAAS,CAACD,MAAd,EAAsB;IACpB,oBAAO;MAAK,SAAS,EAAEG,cAAA,CAAMC;IAAtB,EAAP;EACD;;EAED,oBACE;IAAK,SAAS,EAAED,cAAA,CAAMC;EAAtB,GACGJ,MAAM,gBAAG,6BAAC,aAAD;IAAQ,QAAQ,EAAEA;EAAlB,EAAH,gBAAkC,6BAAC,IAAD;IAAM,SAAS,EAAEG,cAAA,CAAMJ;EAAvB,EAD3C,CADF;AAKD,CAZD;;AAcA,MAAMM,YAAY,GAAGC,IAAI,IAAI;EAC3B,QAAQA,IAAR;IACE,KAAK,OAAL;MACE,OAAOH,cAAA,CAAMI,KAAb;;IACF,KAAK,YAAL;MACE,OAAOJ,cAAA,CAAMK,UAAb;;IACF;MACE,OAAOL,cAAA,CAAMM,OAAb;EANJ;AAQD,CATD;;AAWA,MAAMC,cAAc,GAAGC,KAAK,IAAI;EAC9B,MAAM;IACJL,IAAI,GAAG,SADH;IAEJM,QAFI;IAGJb,IAHI;IAIJC,MAJI;IAKJ,aAAaa,QALT;IAMJ,cAAcC,SANV;IAOJC,IAPI;IAQJC,OARI;IASJC,SATI;IAUJC,gBAAgB,GAAG;EAVf,IAWFP,KAXJ;EAYA,MAAM,CAACQ,gBAAD,EAAmBC,mBAAnB,IAA0C,IAAAC,eAAA,EAAS,KAAT,CAAhD;EACA,MAAMC,KAAK,GAAG,IAAAC,aAAA,GAAd;EAEA,MAAMC,WAAW,GAAG1B,gBAAgB,CAACC,IAAD,EAAOC,MAAP,CAApC;EACA,MAAMyB,WAAW,GAAG,IAAAC,mBAAA,EAClBrB,YAAY,CAACC,IAAD,CADM,EAElBS,IAAI,IAAIZ,cAAA,CAAMY,IAFI,EAGlBH,QAAQ,IAAIT,cAAA,CAAMS,QAHA,EAIlBK,SAJkB,CAApB;EAOA,MAAMU,aAAa,GAAG,IAAAC,cAAA,EAAQ,MAAM,MAAMZ,OAAO,EAA3B,EAA+B,CAACA,OAAD,CAA/B,CAAtB;EAEA,MAAMa,eAAe,GAAG,IAAAC,kBAAA,EAAY,MAAM;IACxCR,KAAK,CAACS,OAAN,IAAiBC,YAAY,CAACV,KAAK,CAACS,OAAP,CAA7B;IACAT,KAAK,CAACS,OAAN,GAAgBE,UAAU,CAAC,MAAM;MAC/Bb,mBAAmB,CAAC,IAAD,CAAnB;MACAE,KAAK,CAACS,OAAN,GAAgBG,SAAhB;IACD,CAHyB,EAGvB,GAHuB,CAA1B;EAID,CANuB,EAMrB,CAACZ,KAAD,EAAQF,mBAAR,CANqB,CAAxB;EAQA,MAAMe,gBAAgB,GAAG,IAAAL,kBAAA,EAAY,MAAM;IACzCR,KAAK,CAACS,OAAN,IAAiBC,YAAY,CAACV,KAAK,CAACS,OAAP,CAA7B;IACAX,mBAAmB,CAAC,KAAD,CAAnB;EACD,CAHwB,EAGtB,CAACE,KAAD,EAAQF,mBAAR,CAHsB,CAAzB;EAKA,MAAMgB,cAAc,GAAG,IAAAN,kBAAA,EACrB,mBAAM;IAAM,SAAS,EAAE3B,cAAA,CAAMkC;EAAvB,GAA+CvB,SAA/C,CADe,EAErB,CAACA,SAAD,CAFqB,CAAvB;EAKA,MAAMwB,MAAM,GAAG,IAAAR,kBAAA,EACb,MACEf,IAAI,gBACF,6BAAC,aAAD,eACMA,IADN,EAEOD,SAAS,GACV;IACE,YAAY,aADd;IAEE,YAAYK;EAFd,CADU,GAKV,EAPN;IAQE,SAAS,EAAEM,WARb;IASE,aAAWZ,QATb;IAUE,cAAYC,SAVd;IAWE,YAAY,EAAEqB,gBAXhB;IAYE,WAAW,EAAEN;EAZf,IAcGL,WAdH,CADE,gBAkBF,oDACOV,SAAS,GACV;IACE,YAAY,aADd;IAEE,YAAYK;EAFd,CADU,GAKV,EANN;IAOE,IAAI,EAAC,QAPP;IAQE,cAAYL,SARd;IASE,aAAWD,QATb;IAUE,eAAc,UAASA,QAAS,IAAGI,SAAU,EAV/C;IAWE,SAAS,EAAEQ,WAXb;IAYE,OAAO,EAAEE,aAZX;IAaE,YAAY,EAAEQ,gBAbhB;IAcE,WAAW,EAAEN,eAdf;IAeE,QAAQ,EAAEjB;EAfZ,IAiBGY,WAjBH,CApBS,EAwCb,CACET,IADF,EAEED,SAFF,EAGEG,SAHF,EAIEO,WAJF,EAKEX,QALF,EAMED,QANF,EAOEuB,gBAPF,EAQEN,eARF,EASEF,aATF,EAUEF,WAVF,EAWEN,gBAXF,CAxCa,CAAf;EAuDA,oBACE,yEACE,6BAAC,MAAD,OADF,EAEGL,SAAS,gBACR,6BAAC,gBAAD;IACE,QAAQ,EAAE,EADZ;IAEE,QAAQ,EAAC,aAFX;IAGE,gBAAgB,EAAEK,gBAHpB;IAIE,SAAS,EAAED,gBAJb;IAKE,cAAc,EAAEkB,cALlB;IAME,oCAAoC,EAAEtB;EANxC,EADQ,GASN,IAXN,CADF;AAeD,CAlHD;;AAoHAJ,cAAc,CAAC6B,SAAf,2CAA2B;EACzBjC,IAAI,EAAEkC,kBAAA,CAAUC,KAAV,CAAgB,CAAC,SAAD,EAAY,OAAZ,EAAqB,YAArB,CAAhB,CADmB;EAEzB,cAAcD,kBAAA,CAAUE,MAFC;EAGzB,aAAaF,kBAAA,CAAUE,MAHE;EAIzB3C,IAAI,EAAEyC,kBAAA,CAAUC,KAAV,CAAgB,oBAAKvC,kBAAL,CAAhB,CAJmB;EAKzBF,MAAM,EAAEwC,kBAAA,CAAUE,MALO;EAMzB1B,OAAO,EAAEwB,kBAAA,CAAUG,IANM;EAOzB5B,IAAI,EAAEyB,kBAAA,CAAUI,KAAV,CAAgB;IACpBC,IAAI,EAAEL,kBAAA,CAAUE,MADI;IAEpBI,QAAQ,EAAEN,kBAAA,CAAUO,IAFA;IAGpBC,MAAM,EAAER,kBAAA,CAAUC,KAAV,CAAgB,CAAC,OAAD,EAAU,QAAV,EAAoB,SAApB,EAA+B,MAA/B,CAAhB;EAHY,CAAhB,CAPmB;EAYzB7B,QAAQ,EAAE4B,kBAAA,CAAUO,IAZK;EAazB9B,SAAS,EAAEuB,kBAAA,CAAUE,MAbI;EAczBxB,gBAAgB,EAAEsB,kBAAA,CAAUC,KAAV,CAAgB,CAAC,MAAD,EAAS,OAAT,EAAkB,KAAlB,EAAyB,QAAzB,CAAhB;AAdO,CAA3B;eAiBe/B,c"}
|
|
@@ -39,18 +39,18 @@ const PlaylistDetailCover = ({
|
|
|
39
39
|
}, []);
|
|
40
40
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
41
41
|
className: _style.default.container
|
|
42
|
-
}, images.length === 1 ? /*#__PURE__*/_react.default.createElement("
|
|
42
|
+
}, images.length === 1 ? /*#__PURE__*/_react.default.createElement("div", {
|
|
43
43
|
className: _style.default.image,
|
|
44
44
|
style: buildImageStyle(images[0])
|
|
45
45
|
}) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
46
46
|
className: _style.default.imagesWrapper
|
|
47
|
-
}, firstColumnImages.map((image, index) => /*#__PURE__*/_react.default.createElement("
|
|
47
|
+
}, firstColumnImages.map((image, index) => /*#__PURE__*/_react.default.createElement("div", {
|
|
48
48
|
key: index,
|
|
49
49
|
className: _style.default.image,
|
|
50
50
|
style: buildImageStyle(image)
|
|
51
51
|
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
52
52
|
className: _style.default.imagesWrapper
|
|
53
|
-
}, secondColumnImages.map((image, index) => /*#__PURE__*/_react.default.createElement("
|
|
53
|
+
}, secondColumnImages.map((image, index) => /*#__PURE__*/_react.default.createElement("div", {
|
|
54
54
|
key: index,
|
|
55
55
|
className: _style.default.image,
|
|
56
56
|
style: buildImageStyle(image)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["FALLBACK_PATH","PlaylistDetailCover","images","firstColumnImages","secondColumnImages","useMemo","imagesClone","splice","length","buildImageStyle","useCallback","type","image","imageUrl","replace","backgroundImage","backgroundSize","backgroundPosition","style","container","imagesWrapper","map","index","propTypes","PropTypes","arrayOf","shape","oneOf","EXTERNAL_COURSE_TYPES","string","isRequired"],"sources":["../../../src/molecule/playlist-detail-cover/index.js"],"sourcesContent":["import React, {useMemo, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {EXTERNAL_COURSE_TYPES} from '../../util/external-content';\nimport style from './style.css';\n\nconst FALLBACK_PATH =\n 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/cover-fallback-external-$TYPE.png';\n\nconst PlaylistDetailCover = ({images}) => {\n const [firstColumnImages, secondColumnImages] = useMemo(() => {\n const imagesClone = [...images];\n return [imagesClone.splice(0, imagesClone.length / 2), imagesClone];\n }, [images]);\n\n const buildImageStyle = useCallback(({type, image}) => {\n const imageUrl = image || FALLBACK_PATH.replace('$TYPE', type);\n\n return {\n backgroundImage: `url(${imageUrl})`,\n backgroundSize: 'cover',\n backgroundPosition: 'center'\n };\n }, []);\n\n return (\n <div className={style.container}>\n {images.length === 1 ? (\n <
|
|
1
|
+
{"version":3,"file":"index.js","names":["FALLBACK_PATH","PlaylistDetailCover","images","firstColumnImages","secondColumnImages","useMemo","imagesClone","splice","length","buildImageStyle","useCallback","type","image","imageUrl","replace","backgroundImage","backgroundSize","backgroundPosition","style","container","imagesWrapper","map","index","propTypes","PropTypes","arrayOf","shape","oneOf","EXTERNAL_COURSE_TYPES","string","isRequired"],"sources":["../../../src/molecule/playlist-detail-cover/index.js"],"sourcesContent":["import React, {useMemo, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {EXTERNAL_COURSE_TYPES} from '../../util/external-content';\nimport style from './style.css';\n\nconst FALLBACK_PATH =\n 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/cover-fallback-external-$TYPE.png';\n\nconst PlaylistDetailCover = ({images}) => {\n const [firstColumnImages, secondColumnImages] = useMemo(() => {\n const imagesClone = [...images];\n return [imagesClone.splice(0, imagesClone.length / 2), imagesClone];\n }, [images]);\n\n const buildImageStyle = useCallback(({type, image}) => {\n const imageUrl = image || FALLBACK_PATH.replace('$TYPE', type);\n\n return {\n backgroundImage: `url(${imageUrl})`,\n backgroundSize: 'cover',\n backgroundPosition: 'center'\n };\n }, []);\n\n return (\n <div className={style.container}>\n {images.length === 1 ? (\n <div className={style.image} style={buildImageStyle(images[0])} />\n ) : (\n <>\n <div className={style.imagesWrapper}>\n {firstColumnImages.map((image, index) => (\n <div key={index} className={style.image} style={buildImageStyle(image)} />\n ))}\n </div>\n <div className={style.imagesWrapper}>\n {secondColumnImages.map((image, index) => (\n <div key={index} className={style.image} style={buildImageStyle(image)} />\n ))}\n </div>\n </>\n )}\n </div>\n );\n};\n\nPlaylistDetailCover.propTypes = {\n images: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.oneOf(EXTERNAL_COURSE_TYPES),\n image: PropTypes.string\n })\n ).isRequired\n};\n\nexport default PlaylistDetailCover;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,aAAa,GACjB,4GADF;;AAGA,MAAMC,mBAAmB,GAAG,CAAC;EAACC;AAAD,CAAD,KAAc;EACxC,MAAM,CAACC,iBAAD,EAAoBC,kBAApB,IAA0C,IAAAC,cAAA,EAAQ,MAAM;IAC5D,MAAMC,WAAW,GAAG,CAAC,GAAGJ,MAAJ,CAApB;IACA,OAAO,CAACI,WAAW,CAACC,MAAZ,CAAmB,CAAnB,EAAsBD,WAAW,CAACE,MAAZ,GAAqB,CAA3C,CAAD,EAAgDF,WAAhD,CAAP;EACD,CAH+C,EAG7C,CAACJ,MAAD,CAH6C,CAAhD;EAKA,MAAMO,eAAe,GAAG,IAAAC,kBAAA,EAAY,CAAC;IAACC,IAAD;IAAOC;EAAP,CAAD,KAAmB;IACrD,MAAMC,QAAQ,GAAGD,KAAK,IAAIZ,aAAa,CAACc,OAAd,CAAsB,OAAtB,EAA+BH,IAA/B,CAA1B;IAEA,OAAO;MACLI,eAAe,EAAG,OAAMF,QAAS,GAD5B;MAELG,cAAc,EAAE,OAFX;MAGLC,kBAAkB,EAAE;IAHf,CAAP;EAKD,CARuB,EAQrB,EARqB,CAAxB;EAUA,oBACE;IAAK,SAAS,EAAEC,cAAA,CAAMC;EAAtB,GACGjB,MAAM,CAACM,MAAP,KAAkB,CAAlB,gBACC;IAAK,SAAS,EAAEU,cAAA,CAAMN,KAAtB;IAA6B,KAAK,EAAEH,eAAe,CAACP,MAAM,CAAC,CAAD,CAAP;EAAnD,EADD,gBAGC,yEACE;IAAK,SAAS,EAAEgB,cAAA,CAAME;EAAtB,GACGjB,iBAAiB,CAACkB,GAAlB,CAAsB,CAACT,KAAD,EAAQU,KAAR,kBACrB;IAAK,GAAG,EAAEA,KAAV;IAAiB,SAAS,EAAEJ,cAAA,CAAMN,KAAlC;IAAyC,KAAK,EAAEH,eAAe,CAACG,KAAD;EAA/D,EADD,CADH,CADF,eAME;IAAK,SAAS,EAAEM,cAAA,CAAME;EAAtB,GACGhB,kBAAkB,CAACiB,GAAnB,CAAuB,CAACT,KAAD,EAAQU,KAAR,kBACtB;IAAK,GAAG,EAAEA,KAAV;IAAiB,SAAS,EAAEJ,cAAA,CAAMN,KAAlC;IAAyC,KAAK,EAAEH,eAAe,CAACG,KAAD;EAA/D,EADD,CADH,CANF,CAJJ,CADF;AAoBD,CApCD;;AAsCAX,mBAAmB,CAACsB,SAApB,2CAAgC;EAC9BrB,MAAM,EAAEsB,kBAAA,CAAUC,OAAV,CACND,kBAAA,CAAUE,KAAV,CAAgB;IACdf,IAAI,EAAEa,kBAAA,CAAUG,KAAV,CAAgBC,sCAAhB,CADQ;IAEdhB,KAAK,EAAEY,kBAAA,CAAUK;EAFH,CAAhB,CADM,EAKNC;AAN4B,CAAhC;eASe7B,mB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coorpacademy/components",
|
|
3
|
-
"version": "11.32.
|
|
3
|
+
"version": "11.32.30",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"typecheck": "tsc --noEmit true"
|
|
46
46
|
},
|
|
47
47
|
"engines": {
|
|
48
|
-
"node": ">=12.
|
|
48
|
+
"node": ">=18.12.0"
|
|
49
49
|
},
|
|
50
50
|
"contributors": [
|
|
51
51
|
"Arthur Weber <arthur.weber@coorpacademy.com>",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
],
|
|
60
60
|
"dependencies": {
|
|
61
61
|
"@coorpacademy/nova-icons": "4.4.2",
|
|
62
|
-
"@coorpacademy/react-native-animation": "1.0.
|
|
62
|
+
"@coorpacademy/react-native-animation": "1.0.4",
|
|
63
63
|
"@fortawesome/fontawesome-svg-core": "^6.5.1",
|
|
64
64
|
"@fortawesome/pro-solid-svg-icons": "^6.5.1",
|
|
65
65
|
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
@@ -177,5 +177,5 @@
|
|
|
177
177
|
"last 2 versions",
|
|
178
178
|
"IE 11"
|
|
179
179
|
],
|
|
180
|
-
"gitHead": "
|
|
180
|
+
"gitHead": "0cf16f47f7093251aba48dad2b106e6e66b6ad7f"
|
|
181
181
|
}
|