@coorpacademy/components 10.17.3 → 10.19.1-alpha.0
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/checkbox-with-title/index.js +4 -3
- package/es/atom/checkbox-with-title/index.js.map +1 -1
- package/es/atom/lottie-wrapper/index.js +2 -2
- package/es/atom/lottie-wrapper/index.js.map +1 -1
- package/es/molecule/brand-create-form/index.js +1 -0
- package/es/molecule/brand-create-form/index.js.map +1 -1
- package/es/molecule/review-card-congrats/index.js +99 -0
- package/es/molecule/review-card-congrats/index.js.map +1 -0
- package/es/molecule/review-card-congrats/style.css +139 -0
- package/es/molecule/review-card-congrats/test/card-congrats.js +47 -0
- package/es/molecule/review-card-congrats/test/card-congrats.js.map +1 -0
- package/es/molecule/review-card-congrats/test/fixtures/rank.js +22 -0
- package/es/molecule/review-card-congrats/test/fixtures/rank.js.map +1 -0
- package/es/molecule/review-card-congrats/test/fixtures/star.js +21 -0
- package/es/molecule/review-card-congrats/test/fixtures/star.js.map +1 -0
- package/es/molecule/review-card-congrats/test/fixtures.js +15 -0
- package/es/molecule/review-card-congrats/test/fixtures.js.map +1 -0
- package/es/organism/review-congrats/index.js +72 -0
- package/es/organism/review-congrats/index.js.map +1 -0
- package/es/organism/review-congrats/style.css +225 -0
- package/es/organism/review-congrats/test/fixtures/default.js +25 -0
- package/es/organism/review-congrats/test/fixtures/default.js.map +1 -0
- package/es/organism/review-congrats/test/fixtures.js +13 -0
- package/es/organism/review-congrats/test/fixtures.js.map +1 -0
- package/es/organism/review-congrats/test/review-congrats.js +37 -0
- package/es/organism/review-congrats/test/review-congrats.js.map +1 -0
- package/es/organism/review-header/index.js +7 -3
- package/es/organism/review-header/index.js.map +1 -1
- package/es/organism/review-header/style.css +13 -0
- package/es/organism/review-header/test/fixtures/steps-animation.js +11 -0
- package/es/organism/review-header/test/fixtures/steps-animation.js.map +1 -0
- package/es/organism/review-header/test/fixtures.js +2 -0
- package/es/organism/review-header/test/fixtures.js.map +1 -1
- package/es/variables/colors.css +1 -0
- package/lib/atom/checkbox-with-title/index.js +4 -3
- package/lib/atom/checkbox-with-title/index.js.map +1 -1
- package/lib/atom/lottie-wrapper/index.js +2 -2
- package/lib/atom/lottie-wrapper/index.js.map +1 -1
- package/lib/molecule/brand-create-form/index.js +1 -0
- package/lib/molecule/brand-create-form/index.js.map +1 -1
- package/lib/molecule/review-card-congrats/index.js +124 -0
- package/lib/molecule/review-card-congrats/index.js.map +1 -0
- package/lib/molecule/review-card-congrats/style.css +139 -0
- package/lib/molecule/review-card-congrats/test/card-congrats.js +63 -0
- package/lib/molecule/review-card-congrats/test/card-congrats.js.map +1 -0
- package/lib/molecule/review-card-congrats/test/fixtures/rank.js +32 -0
- package/lib/molecule/review-card-congrats/test/fixtures/rank.js.map +1 -0
- package/lib/molecule/review-card-congrats/test/fixtures/star.js +31 -0
- package/lib/molecule/review-card-congrats/test/fixtures/star.js.map +1 -0
- package/lib/molecule/review-card-congrats/test/fixtures.js +25 -0
- package/lib/molecule/review-card-congrats/test/fixtures.js.map +1 -0
- package/lib/organism/review-congrats/index.js +91 -0
- package/lib/organism/review-congrats/index.js.map +1 -0
- package/lib/organism/review-congrats/style.css +225 -0
- package/lib/organism/review-congrats/test/fixtures/default.js +36 -0
- package/lib/organism/review-congrats/test/fixtures/default.js.map +1 -0
- package/lib/organism/review-congrats/test/fixtures.js +22 -0
- package/lib/organism/review-congrats/test/fixtures.js.map +1 -0
- package/lib/organism/review-congrats/test/review-congrats.js +53 -0
- package/lib/organism/review-congrats/test/review-congrats.js.map +1 -0
- package/lib/organism/review-header/index.js +8 -3
- package/lib/organism/review-header/index.js.map +1 -1
- package/lib/organism/review-header/style.css +13 -0
- package/lib/organism/review-header/test/fixtures/steps-animation.js +21 -0
- package/lib/organism/review-header/test/fixtures/steps-animation.js.map +1 -0
- package/lib/organism/review-header/test/fixtures.js +3 -0
- package/lib/organism/review-header/test/fixtures.js.map +1 -1
- package/lib/variables/colors.css +1 -0
- package/package.json +3 -3
|
@@ -18,8 +18,9 @@ const CheckboxWithTitle = props => {
|
|
|
18
18
|
const idCheckbox = _uniqueId('input-checkbox-');
|
|
19
19
|
|
|
20
20
|
const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);
|
|
21
|
-
return /*#__PURE__*/React.createElement("
|
|
22
|
-
className: style.container
|
|
21
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
22
|
+
className: style.container
|
|
23
|
+
}, /*#__PURE__*/React.createElement("label", {
|
|
23
24
|
htmlFor: idCheckbox
|
|
24
25
|
}, /*#__PURE__*/React.createElement("input", {
|
|
25
26
|
type: "checkbox",
|
|
@@ -34,7 +35,7 @@ const CheckboxWithTitle = props => {
|
|
|
34
35
|
className: style.label
|
|
35
36
|
}, /*#__PURE__*/React.createElement(CheckIcon, {
|
|
36
37
|
className: style.icon
|
|
37
|
-
})), /*#__PURE__*/React.createElement("span", {
|
|
38
|
+
}))), /*#__PURE__*/React.createElement("span", {
|
|
38
39
|
className: style.title
|
|
39
40
|
}, title));
|
|
40
41
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/atom/checkbox-with-title/index.js"],"names":["React","useMemo","PropTypes","NovaSolidStatusValidate","CheckIcon","style","CheckboxWithTitle","props","title","name","checked","onChange","dataName","ariaLabel","idCheckbox","handleChange","e","target","container","checkbox","label","icon","propTypes","string","bool","func"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SAAQC,uBAAuB,IAAIC,SAAnC,QAAmD,0BAAnD;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,iBAAiB,GAAGC,KAAK,IAAI;AACjC,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,IAFI;AAGJC,IAAAA,OAHI;AAIJC,IAAAA,QAAQ,QAJJ;AAKJ,iBAAaC,QALT;AAMJ,kBAAcC;AANV,MAOFN,KAPJ;;AASA,QAAMO,UAAU,GAAG,UAAS,iBAAT,CAAnB;;AACA,QAAMC,YAAY,GAAGd,OAAO,CAAC,MAAMe,CAAC,IAAIL,QAAQ,CAACK,CAAC,CAACC,MAAF,CAASP,OAAV,CAApB,EAAwC,CAACC,QAAD,CAAxC,CAA5B;AAEA,sBACE;
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/checkbox-with-title/index.js"],"names":["React","useMemo","PropTypes","NovaSolidStatusValidate","CheckIcon","style","CheckboxWithTitle","props","title","name","checked","onChange","dataName","ariaLabel","idCheckbox","handleChange","e","target","container","checkbox","label","icon","propTypes","string","bool","func"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SAAQC,uBAAuB,IAAIC,SAAnC,QAAmD,0BAAnD;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,iBAAiB,GAAGC,KAAK,IAAI;AACjC,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,IAFI;AAGJC,IAAAA,OAHI;AAIJC,IAAAA,QAAQ,QAJJ;AAKJ,iBAAaC,QALT;AAMJ,kBAAcC;AANV,MAOFN,KAPJ;;AASA,QAAMO,UAAU,GAAG,UAAS,iBAAT,CAAnB;;AACA,QAAMC,YAAY,GAAGd,OAAO,CAAC,MAAMe,CAAC,IAAIL,QAAQ,CAACK,CAAC,CAACC,MAAF,CAASP,OAAV,CAApB,EAAwC,CAACC,QAAD,CAAxC,CAA5B;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEN,KAAK,CAACa;AAAtB,kBACE;AAAO,IAAA,OAAO,EAAEJ;AAAhB,kBACE;AACE,IAAA,IAAI,EAAC,UADP;AAEE,IAAA,EAAE,EAAEA,UAFN;AAGE,IAAA,IAAI,EAAEL,IAHR;AAIE,IAAA,QAAQ,EAAEM,YAJZ;AAKE,IAAA,OAAO,EAAEL,OALX;AAME,IAAA,SAAS,EAAEL,KAAK,CAACc,QANnB;AAOE,iBAAWP,QAPb;AAQE,kBAAYC;AARd,IADF,eAWE;AAAK,IAAA,SAAS,EAAER,KAAK,CAACe;AAAtB,kBACE,oBAAC,SAAD;AAAW,IAAA,SAAS,EAAEf,KAAK,CAACgB;AAA5B,IADF,CAXF,CADF,eAgBE;AAAM,IAAA,SAAS,EAAEhB,KAAK,CAACG;AAAvB,KAA+BA,KAA/B,CAhBF,CADF;AAoBD,CAjCD;;AAmCAF,iBAAiB,CAACgB,SAAlB,2CAA8B;AAC5Bd,EAAAA,KAAK,EAAEN,SAAS,CAACqB,MADW;AAE5Bd,EAAAA,IAAI,EAAEP,SAAS,CAACqB,MAFY;AAG5Bb,EAAAA,OAAO,EAAER,SAAS,CAACsB,IAHS;AAI5Bb,EAAAA,QAAQ,EAAET,SAAS,CAACuB,IAJQ;AAK5B,gBAAcvB,SAAS,CAACqB,MALI;AAM5B,eAAarB,SAAS,CAACqB;AANK,CAA9B;AAQA,eAAejB,iBAAf","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport {NovaSolidStatusValidate as CheckIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst CheckboxWithTitle = props => {\n const {\n title,\n name,\n checked,\n onChange = noop,\n 'data-name': dataName,\n 'aria-label': ariaLabel\n } = props;\n\n const idCheckbox = uniqueId('input-checkbox-');\n const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n return (\n <div className={style.container}>\n <label htmlFor={idCheckbox}>\n <input\n type=\"checkbox\"\n id={idCheckbox}\n name={name}\n onChange={handleChange}\n checked={checked}\n className={style.checkbox}\n data-name={dataName}\n aria-label={ariaLabel}\n />\n <div className={style.label}>\n <CheckIcon className={style.icon} />\n </div>\n </label>\n <span className={style.title}>{title}</span>\n </div>\n );\n};\n\nCheckboxWithTitle.propTypes = {\n title: PropTypes.string,\n name: PropTypes.string,\n checked: PropTypes.bool,\n onChange: PropTypes.func,\n 'aria-label': PropTypes.string,\n 'data-name': PropTypes.string\n};\nexport default CheckboxWithTitle;\n"],"file":"index.js"}
|
|
@@ -89,9 +89,9 @@ const LottieWrapper = props => {
|
|
|
89
89
|
// to remove when the migration towards @testing-library/react is done
|
|
90
90
|
|
|
91
91
|
/* istanbul ignore next */
|
|
92
|
-
if (
|
|
92
|
+
if (includes(animationControl, keys(omit('loading', ANIMATION_CONTROL))) && !autoplay) {
|
|
93
93
|
setIsAnimationVisible(true);
|
|
94
|
-
animationItem[animationControl]();
|
|
94
|
+
if (animationItem) animationItem[animationControl]();
|
|
95
95
|
if (animationControl === ANIMATION_CONTROL.stop) setIsAnimationVisible(false);
|
|
96
96
|
}
|
|
97
97
|
}, [animationControl, animationItem, autoplay]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/atom/lottie-wrapper/index.js"],"names":["React","useMemo","useRef","useEffect","useState","PropTypes","classnames","lottie","get","has","includes","keys","omit","unfetch","style","ANIMATION_CONTROL","play","pause","stop","loading","isIE11","window","userAgent","hasMsCrypto","hasRevision","hasTrident","fetchAndLoadAnimation","_lottie","_fetch","animationSrc","containerRef","loop","animationClassnames","hideOnTransparent","autoplay","animationUrl","URL","toString","fetchResult","headers","animationData","json","animation","loadAnimation","container","current","renderer","rendererSettings","className","preserveAspectRatio","LottieWrapper","props","dataName","ariaLabel","width","height","ie11ImageBackup","backupImageClassName","animationControl","animationClassName","animationItem","setAnimationItem","isAnimationVisible","setIsAnimationVisible","_isIE11","wrapperClassName","lottieContainer","lottieAnimationClassName","ie11BackupImageClassName","backupImage","destroy","name","maxWidth","maxHeight","opacity","transition","propTypes","string","isRequired","bool","shape","number","oneOf"],"mappings":"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","sourcesContent":["import React, {useMemo, useRef, useEffect, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport lottie from 'lottie-web';\nimport get from 'lodash/fp/get';\nimport has from 'lodash/fp/has';\nimport includes from 'lodash/fp/includes';\nimport keys from 'lodash/fp/keys';\nimport omit from 'lodash/fp/omit';\nimport unfetch from 'isomorphic-unfetch';\nimport style from './style.css';\n\nexport const ANIMATION_CONTROL = {\n play: 'play',\n pause: 'pause',\n stop: 'stop',\n loading: 'loading'\n};\n\nconst isIE11 = () => {\n if (typeof window === 'undefined') return;\n const userAgent = get('navigator.userAgent', window);\n const hasMsCrypto = has('msCrypto', window);\n const hasRevision = includes('rv:', userAgent);\n const hasTrident = includes('Trident/', userAgent);\n\n return hasMsCrypto || (hasRevision && hasTrident);\n};\n\nexport const fetchAndLoadAnimation = async (\n _lottie,\n _fetch,\n animationSrc,\n containerRef,\n loop,\n animationClassnames,\n hideOnTransparent,\n autoplay\n) => {\n const animationUrl = new URL(animationSrc).toString();\n const fetchResult = await _fetch(animationUrl, {\n headers: {\n 'X-Requested-With': 'XMLHttpRequest',\n 'Content-Type': 'application/json'\n }\n });\n\n const animationData = await fetchResult.json();\n\n const animation = _lottie.loadAnimation({\n container: containerRef.current, // the dom element that will contain the animation\n renderer: 'svg',\n autoplay,\n loop,\n animationData,\n rendererSettings: {\n className: animationClassnames,\n hideOnTransparent,\n preserveAspectRatio: 'xMidYMid meet' // same options as a preserveAspectRatio prop\n }\n });\n return animation;\n};\n\nconst LottieWrapper = props => {\n const {\n className,\n 'data-name': dataName,\n 'aria-label': ariaLabel,\n animationSrc,\n loop = false,\n rendererSettings = {},\n width,\n height,\n ie11ImageBackup,\n backupImageClassName,\n autoplay = true,\n animationControl\n } = props;\n\n const {className: animationClassName, hideOnTransparent = true} = rendererSettings;\n\n const containerRef = useRef(null);\n\n // lottie's animation instance\n const [animationItem, setAnimationItem] = useState(null);\n\n const [isAnimationVisible, setIsAnimationVisible] = useState(autoplay);\n\n const _isIE11 = useMemo(() => isIE11(), []);\n\n const wrapperClassName = useMemo(() => classnames(className, style.lottieContainer), [className]);\n\n const lottieAnimationClassName = useMemo(() => classnames(animationClassName, style.animation), [\n animationClassName\n ]);\n\n const ie11BackupImageClassName = useMemo(\n () => classnames(backupImageClassName, style.backupImage),\n [backupImageClassName]\n );\n\n useEffect(() => {\n // enzyme does not handle well the state update after an async useEffect in tests\n // to remove when the migration towards @testing-library/react is done\n /* istanbul ignore next */\n if (\n animationItem &&\n includes(animationControl, keys(omit('loading', ANIMATION_CONTROL))) &&\n !autoplay\n ) {\n setIsAnimationVisible(true);\n animationItem[animationControl]();\n if (animationControl === ANIMATION_CONTROL.stop) setIsAnimationVisible(false);\n }\n }, [animationControl, animationItem, autoplay]);\n\n useEffect(() => {\n const loadAnimation = async () => {\n if (!_isIE11 && !animationItem) {\n /* istanbul ignore else */\n if (typeof window !== 'undefined') {\n window.lottie = lottie;\n }\n const animation = await fetchAndLoadAnimation(\n lottie,\n unfetch,\n animationSrc,\n containerRef,\n loop,\n lottieAnimationClassName,\n hideOnTransparent,\n autoplay\n );\n\n /* istanbul ignore next */\n setAnimationItem(animation);\n }\n };\n\n loadAnimation();\n return () => animationItem && /* istanbul ignore next */ lottie.destroy(animationItem.name);\n }, [\n lottieAnimationClassName,\n containerRef,\n hideOnTransparent,\n loop,\n animationSrc,\n _isIE11,\n animationItem,\n autoplay\n ]);\n\n return (\n <div\n ref={containerRef}\n aria-label={ariaLabel}\n data-name={dataName}\n className={wrapperClassName}\n style={{\n ...(width && {\n width: `${width}px`,\n maxWidth: `${width}px`\n }),\n ...(height && {\n height: `${height}px`,\n maxHeight: `${height}px`\n }),\n opacity: isAnimationVisible ? 1 : 0,\n transition: 'opacity 0.25s ease-in'\n }}\n >\n {_isIE11 ? (\n <img\n src={ie11ImageBackup}\n className={ie11BackupImageClassName}\n data-name=\"ie11-backup-image\"\n />\n ) : null}\n </div>\n );\n};\n\nLottieWrapper.propTypes = {\n 'aria-label': PropTypes.string.isRequired,\n 'data-name': PropTypes.string,\n animationSrc: PropTypes.string.isRequired,\n loop: PropTypes.bool,\n rendererSettings: PropTypes.shape({\n hideOnTransparent: PropTypes.bool,\n className: PropTypes.string\n }),\n height: PropTypes.number,\n width: PropTypes.number,\n className: PropTypes.string,\n ie11ImageBackup: PropTypes.string.isRequired,\n backupImageClassName: PropTypes.string,\n autoplay: PropTypes.bool,\n animationControl: PropTypes.oneOf(keys(ANIMATION_CONTROL))\n};\n\nexport default LottieWrapper;\n"],"file":"index.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/lottie-wrapper/index.js"],"names":["React","useMemo","useRef","useEffect","useState","PropTypes","classnames","lottie","get","has","includes","keys","omit","unfetch","style","ANIMATION_CONTROL","play","pause","stop","loading","isIE11","window","userAgent","hasMsCrypto","hasRevision","hasTrident","fetchAndLoadAnimation","_lottie","_fetch","animationSrc","containerRef","loop","animationClassnames","hideOnTransparent","autoplay","animationUrl","URL","toString","fetchResult","headers","animationData","json","animation","loadAnimation","container","current","renderer","rendererSettings","className","preserveAspectRatio","LottieWrapper","props","dataName","ariaLabel","width","height","ie11ImageBackup","backupImageClassName","animationControl","animationClassName","animationItem","setAnimationItem","isAnimationVisible","setIsAnimationVisible","_isIE11","wrapperClassName","lottieContainer","lottieAnimationClassName","ie11BackupImageClassName","backupImage","destroy","name","maxWidth","maxHeight","opacity","transition","propTypes","string","isRequired","bool","shape","number","oneOf"],"mappings":"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","sourcesContent":["import React, {useMemo, useRef, useEffect, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport lottie from 'lottie-web';\nimport get from 'lodash/fp/get';\nimport has from 'lodash/fp/has';\nimport includes from 'lodash/fp/includes';\nimport keys from 'lodash/fp/keys';\nimport omit from 'lodash/fp/omit';\nimport unfetch from 'isomorphic-unfetch';\nimport style from './style.css';\n\nexport const ANIMATION_CONTROL = {\n play: 'play',\n pause: 'pause',\n stop: 'stop',\n loading: 'loading'\n};\n\nconst isIE11 = () => {\n if (typeof window === 'undefined') return;\n const userAgent = get('navigator.userAgent', window);\n const hasMsCrypto = has('msCrypto', window);\n const hasRevision = includes('rv:', userAgent);\n const hasTrident = includes('Trident/', userAgent);\n\n return hasMsCrypto || (hasRevision && hasTrident);\n};\n\nexport const fetchAndLoadAnimation = async (\n _lottie,\n _fetch,\n animationSrc,\n containerRef,\n loop,\n animationClassnames,\n hideOnTransparent,\n autoplay\n) => {\n const animationUrl = new URL(animationSrc).toString();\n const fetchResult = await _fetch(animationUrl, {\n headers: {\n 'X-Requested-With': 'XMLHttpRequest',\n 'Content-Type': 'application/json'\n }\n });\n\n const animationData = await fetchResult.json();\n\n const animation = _lottie.loadAnimation({\n container: containerRef.current, // the dom element that will contain the animation\n renderer: 'svg',\n autoplay,\n loop,\n animationData,\n rendererSettings: {\n className: animationClassnames,\n hideOnTransparent,\n preserveAspectRatio: 'xMidYMid meet' // same options as a preserveAspectRatio prop\n }\n });\n return animation;\n};\n\nconst LottieWrapper = props => {\n const {\n className,\n 'data-name': dataName,\n 'aria-label': ariaLabel,\n animationSrc,\n loop = false,\n rendererSettings = {},\n width,\n height,\n ie11ImageBackup,\n backupImageClassName,\n autoplay = true,\n animationControl\n } = props;\n\n const {className: animationClassName, hideOnTransparent = true} = rendererSettings;\n\n const containerRef = useRef(null);\n\n // lottie's animation instance\n const [animationItem, setAnimationItem] = useState(null);\n\n const [isAnimationVisible, setIsAnimationVisible] = useState(autoplay);\n\n const _isIE11 = useMemo(() => isIE11(), []);\n\n const wrapperClassName = useMemo(() => classnames(className, style.lottieContainer), [className]);\n\n const lottieAnimationClassName = useMemo(() => classnames(animationClassName, style.animation), [\n animationClassName\n ]);\n\n const ie11BackupImageClassName = useMemo(\n () => classnames(backupImageClassName, style.backupImage),\n [backupImageClassName]\n );\n\n useEffect(() => {\n // enzyme does not handle well the state update after an async useEffect in tests\n // to remove when the migration towards @testing-library/react is done\n /* istanbul ignore next */\n if (includes(animationControl, keys(omit('loading', ANIMATION_CONTROL))) && !autoplay) {\n setIsAnimationVisible(true);\n if (animationItem) animationItem[animationControl]();\n if (animationControl === ANIMATION_CONTROL.stop) setIsAnimationVisible(false);\n }\n }, [animationControl, animationItem, autoplay]);\n\n useEffect(() => {\n const loadAnimation = async () => {\n if (!_isIE11 && !animationItem) {\n /* istanbul ignore else */\n if (typeof window !== 'undefined') {\n window.lottie = lottie;\n }\n const animation = await fetchAndLoadAnimation(\n lottie,\n unfetch,\n animationSrc,\n containerRef,\n loop,\n lottieAnimationClassName,\n hideOnTransparent,\n autoplay\n );\n\n /* istanbul ignore next */\n setAnimationItem(animation);\n }\n };\n\n loadAnimation();\n return () => animationItem && /* istanbul ignore next */ lottie.destroy(animationItem.name);\n }, [\n lottieAnimationClassName,\n containerRef,\n hideOnTransparent,\n loop,\n animationSrc,\n _isIE11,\n animationItem,\n autoplay\n ]);\n\n return (\n <div\n ref={containerRef}\n aria-label={ariaLabel}\n data-name={dataName}\n className={wrapperClassName}\n style={{\n ...(width && {\n width: `${width}px`,\n maxWidth: `${width}px`\n }),\n ...(height && {\n height: `${height}px`,\n maxHeight: `${height}px`\n }),\n opacity: isAnimationVisible ? 1 : 0,\n transition: 'opacity 0.25s ease-in'\n }}\n >\n {_isIE11 ? (\n <img\n src={ie11ImageBackup}\n className={ie11BackupImageClassName}\n data-name=\"ie11-backup-image\"\n />\n ) : null}\n </div>\n );\n};\n\nLottieWrapper.propTypes = {\n 'aria-label': PropTypes.string.isRequired,\n 'data-name': PropTypes.string,\n animationSrc: PropTypes.string.isRequired,\n loop: PropTypes.bool,\n rendererSettings: PropTypes.shape({\n hideOnTransparent: PropTypes.bool,\n className: PropTypes.string\n }),\n height: PropTypes.number,\n width: PropTypes.number,\n className: PropTypes.string,\n ie11ImageBackup: PropTypes.string.isRequired,\n backupImageClassName: PropTypes.string,\n autoplay: PropTypes.bool,\n animationControl: PropTypes.oneOf(keys(ANIMATION_CONTROL))\n};\n\nexport default LottieWrapper;\n"],"file":"index.js"}
|
|
@@ -50,6 +50,7 @@ const BrandCreateForm = (props, context) => {
|
|
|
50
50
|
className: fieldClass
|
|
51
51
|
}, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
|
|
52
52
|
type: "text",
|
|
53
|
+
maxLength: "40",
|
|
53
54
|
"data-name": "brand_create_text_input",
|
|
54
55
|
placeholder: field.placeholder,
|
|
55
56
|
defaultValue: field.value,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecule/brand-create-form/index.js"],"names":["React","useMemo","PropTypes","Button","Loader","Provider","style","BrandCreateForm","props","context","title","subtitle","description","field","onSubmit","submitValue","isPending","isModified","translate","waitMessage","wrapperClass","error","modifiedWrapper","wrapper","fieldClass","default","disabled","onChange","handleChange","e","target","value","actionView","wait","loading","header","content","placeholder","label","contextTypes","childContextTypes","propTypes","string","isRequired","shape","func","bool"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,eAAe,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AAC1C,QAAM;AAACC,IAAAA,KAAD;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA,WAAlB;AAA+BC,IAAAA,KAA/B;AAAsCC,IAAAA,QAAtC;AAAgDC,IAAAA,WAAhD;AAA6DC,IAAAA,SAA7D;AAAwEC,IAAAA;AAAxE,MAAsFT,KAA5F;AACA,QAAM;AAACU,IAAAA;AAAD,MAAcT,OAApB;AACA,QAAMU,WAAW,GAAGD,SAAS,CAAC,eAAD,CAA7B;AAEA,QAAME,YAAY,GAChBH,UAAU,IAAID,SAAd,IAA2BH,KAAK,CAACQ,KAAjC,GAAyCf,KAAK,CAACgB,eAA/C,GAAiEhB,KAAK,CAACiB,OADzE;AAEA,QAAMC,UAAU,GAAGX,KAAK,CAACQ,KAAN,GAAcf,KAAK,CAACe,KAApB,GAA4Bf,KAAK,CAACmB,OAArD;AACA,QAAMC,QAAQ,GAAGV,SAAS,IAAI,CAACC,UAA/B;AACA,QAAM;AAACU,IAAAA;AAAD,MAAad,KAAnB;AACA,QAAMe,YAAY,GAAG3B,OAAO,CAAC,MAAM4B,CAAC,IAAIF,QAAQ,CAACE,CAAC,CAACC,MAAF,CAASC,KAAV,CAApB,EAAsC,CAACJ,QAAD,CAAtC,CAA5B;AAEA,QAAMK,UAAU,GAAGhB,SAAS,gBAC1B,8CACE;AAAK,IAAA,SAAS,EAAEV,KAAK,CAAC2B;AAAtB,KAA6Bd,WAA7B,CADF,eAEE;AAAK,IAAA,SAAS,EAAEb,KAAK,CAAC4B;AAAtB,kBACE,oBAAC,MAAD,OADF,CAFF,CAD0B,gBAQ1B,8CACE,oBAAC,MAAD;AACE,iBAAU,4BADZ;AAEE,IAAA,IAAI,EAAC,QAFP;AAGE,IAAA,QAAQ,EAAER,QAHZ;AAIE,IAAA,WAAW,EAAEX;AAJf,IADF,CARF;AAkBA,sBACE;AAAK,IAAA,SAAS,EAAEK;AAAhB,kBACE;AAAK,IAAA,SAAS,EAAEd,KAAK,CAAC6B;AAAtB,kBACE,gCAAKzB,KAAL,CADF,CADF,eAIE;AAAM,IAAA,SAAS,EAAEJ,KAAK,CAAC8B,OAAvB;AAAgC,IAAA,QAAQ,EAAEtB;AAA1C,kBACE,gCAAKH,QAAL,CADF,eAEE;AAAK,IAAA,SAAS,EAAEL,KAAK,CAACM;AAAtB,KAAoCA,WAApC,CAFF,eAGE;AAAK,IAAA,SAAS,EAAEY;AAAhB,kBACE,gDACE;AACE,IAAA,IAAI,EAAC,MADP;AAEE,
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/brand-create-form/index.js"],"names":["React","useMemo","PropTypes","Button","Loader","Provider","style","BrandCreateForm","props","context","title","subtitle","description","field","onSubmit","submitValue","isPending","isModified","translate","waitMessage","wrapperClass","error","modifiedWrapper","wrapper","fieldClass","default","disabled","onChange","handleChange","e","target","value","actionView","wait","loading","header","content","placeholder","label","contextTypes","childContextTypes","propTypes","string","isRequired","shape","func","bool"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '../../atom/button';\nimport Loader from '../../atom/loader';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst BrandCreateForm = (props, context) => {\n const {title, subtitle, description, field, onSubmit, submitValue, isPending, isModified} = props;\n const {translate} = context;\n const waitMessage = translate('Wait_creation');\n\n const wrapperClass =\n isModified || isPending || field.error ? style.modifiedWrapper : style.wrapper;\n const fieldClass = field.error ? style.error : style.default;\n const disabled = isPending || !isModified;\n const {onChange} = field;\n const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n\n const actionView = isPending ? (\n <div>\n <div className={style.wait}>{waitMessage}</div>\n <div className={style.loading}>\n <Loader />\n </div>\n </div>\n ) : (\n <div>\n <Button\n data-name=\"brand_create_submit_button\"\n type=\"submit\"\n disabled={disabled}\n submitValue={submitValue}\n />\n </div>\n );\n\n return (\n <div className={wrapperClass}>\n <div className={style.header}>\n <h1>{title}</h1>\n </div>\n <form className={style.content} onSubmit={onSubmit}>\n <h2>{subtitle}</h2>\n <div className={style.description}>{description}</div>\n <div className={fieldClass}>\n <label>\n <input\n type=\"text\"\n maxLength=\"40\"\n data-name=\"brand_create_text_input\"\n placeholder={field.placeholder}\n defaultValue={field.value}\n onInput={handleChange}\n />\n {field.label}\n </label>\n </div>\n {actionView}\n </form>\n </div>\n );\n};\n\nBrandCreateForm.contextTypes = {\n translate: Provider.childContextTypes.translate\n};\n\nBrandCreateForm.propTypes = {\n title: PropTypes.string.isRequired,\n subtitle: PropTypes.string.isRequired,\n description: PropTypes.string.isRequired,\n field: PropTypes.shape({\n placeholder: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n error: PropTypes.string,\n value: PropTypes.string\n }).isRequired,\n onSubmit: PropTypes.func.isRequired,\n submitValue: PropTypes.string.isRequired,\n isPending: PropTypes.bool,\n isModified: PropTypes.bool\n};\n\nexport default BrandCreateForm;\n"],"file":"index.js"}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import _multiply from "lodash/fp/multiply";
|
|
2
|
+
import _parseInt2 from "lodash/fp/parseInt";
|
|
3
|
+
import _round from "lodash/fp/round";
|
|
4
|
+
import _pipe from "lodash/fp/pipe";
|
|
5
|
+
|
|
6
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
7
|
+
|
|
8
|
+
import React, { useEffect, useState } from 'react';
|
|
9
|
+
import PropTypes from 'prop-types';
|
|
10
|
+
import classnames from 'classnames';
|
|
11
|
+
import { NovaCompositionCoorpacademyStar as StarIcon, NovaSolidVoteRewardsRewardsBadge5 as RankIcon } from '@coorpacademy/nova-icons';
|
|
12
|
+
import AtomLottieWrapper from '../../atom/lottie-wrapper';
|
|
13
|
+
import Animation, { EASE_OUT_CUBIC } from '../../hoc/animation';
|
|
14
|
+
import AnimationScheduler from '../../hoc/animation-scheduler';
|
|
15
|
+
import style from './style.css';
|
|
16
|
+
export const setAnimations = (setIsAnimationVisible, setIsAnimated) => () => {
|
|
17
|
+
setIsAnimationVisible('play');
|
|
18
|
+
setIsAnimated(true);
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const ReviewCardCongrats = props => {
|
|
22
|
+
const {
|
|
23
|
+
'aria-label': ariaLabel,
|
|
24
|
+
'data-name': dataName,
|
|
25
|
+
animationLottie,
|
|
26
|
+
cardType,
|
|
27
|
+
iconAriaLabel,
|
|
28
|
+
className,
|
|
29
|
+
reviewCardTitle,
|
|
30
|
+
reviewCardValue,
|
|
31
|
+
rankSuffix,
|
|
32
|
+
timerAnimation
|
|
33
|
+
} = props;
|
|
34
|
+
const [isAnimationVisible, setIsAnimationVisible] = useState('loading');
|
|
35
|
+
const [isAnimated, setIsAnimated] = useState(false);
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
let timer; // istanbul ignore else
|
|
38
|
+
|
|
39
|
+
if (!isAnimationVisible || !isAnimated) {
|
|
40
|
+
timer = setTimeout(setAnimations(setIsAnimationVisible, setIsAnimated), timerAnimation);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
return () => timer && clearTimeout(timer);
|
|
44
|
+
}, [timerAnimation]);
|
|
45
|
+
const wrapperClassName = classnames(className, style.cardContainer, cardType === 'card-star' ? style.cardStar : style.cardRank);
|
|
46
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
47
|
+
className: wrapperClassName,
|
|
48
|
+
"aria-label": ariaLabel,
|
|
49
|
+
"data-name": dataName
|
|
50
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
51
|
+
className: style.mainIcon
|
|
52
|
+
}, /*#__PURE__*/React.createElement(AtomLottieWrapper, _extends({}, animationLottie, {
|
|
53
|
+
loop: false,
|
|
54
|
+
animationControl: isAnimationVisible,
|
|
55
|
+
autoplay: false,
|
|
56
|
+
"data-name": "lottie-wrapper",
|
|
57
|
+
className: style.wrapperLottie,
|
|
58
|
+
backupImageClassName: style.ie11Backup
|
|
59
|
+
}))), /*#__PURE__*/React.createElement("div", {
|
|
60
|
+
className: style.title
|
|
61
|
+
}, reviewCardTitle), /*#__PURE__*/React.createElement("div", {
|
|
62
|
+
className: cardType === 'card-star' ? style.textContainerStar : style.textContainerRank
|
|
63
|
+
}, cardType === 'card-rank' ? /*#__PURE__*/React.createElement(RankIcon, {
|
|
64
|
+
className: style.iconRank,
|
|
65
|
+
width: 40,
|
|
66
|
+
height: 40,
|
|
67
|
+
"aria-label": iconAriaLabel
|
|
68
|
+
}) : null, /*#__PURE__*/React.createElement(AnimationScheduler, {
|
|
69
|
+
animated: isAnimated
|
|
70
|
+
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
|
|
71
|
+
className: cardType === 'card-star' ? style.textStar : style.textRank
|
|
72
|
+
}, /*#__PURE__*/React.createElement(Animation, {
|
|
73
|
+
name: "counter",
|
|
74
|
+
bezier: EASE_OUT_CUBIC,
|
|
75
|
+
duration: 2000
|
|
76
|
+
}, progress => _pipe(_parseInt2(10), _multiply(progress), _round)(reviewCardValue))))), cardType === 'card-star' ? /*#__PURE__*/React.createElement(StarIcon, {
|
|
77
|
+
className: style.iconStar,
|
|
78
|
+
width: 53,
|
|
79
|
+
height: 53,
|
|
80
|
+
"aria-label": iconAriaLabel
|
|
81
|
+
}) : /*#__PURE__*/React.createElement("div", {
|
|
82
|
+
className: style.rankSuffix
|
|
83
|
+
}, rankSuffix)));
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
ReviewCardCongrats.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
87
|
+
'aria-label': PropTypes.string,
|
|
88
|
+
'data-name': PropTypes.string,
|
|
89
|
+
animationLottie: PropTypes.shape(AtomLottieWrapper.propTypes),
|
|
90
|
+
cardType: PropTypes.string,
|
|
91
|
+
iconAriaLabel: PropTypes.string,
|
|
92
|
+
className: PropTypes.string,
|
|
93
|
+
reviewCardTitle: PropTypes.string,
|
|
94
|
+
reviewCardValue: PropTypes.string,
|
|
95
|
+
rankSuffix: PropTypes.string,
|
|
96
|
+
timerAnimation: PropTypes.number
|
|
97
|
+
} : {};
|
|
98
|
+
export default ReviewCardCongrats;
|
|
99
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/review-card-congrats/index.js"],"names":["React","useEffect","useState","PropTypes","classnames","NovaCompositionCoorpacademyStar","StarIcon","NovaSolidVoteRewardsRewardsBadge5","RankIcon","AtomLottieWrapper","Animation","EASE_OUT_CUBIC","AnimationScheduler","style","setAnimations","setIsAnimationVisible","setIsAnimated","ReviewCardCongrats","props","ariaLabel","dataName","animationLottie","cardType","iconAriaLabel","className","reviewCardTitle","reviewCardValue","rankSuffix","timerAnimation","isAnimationVisible","isAnimated","timer","setTimeout","clearTimeout","wrapperClassName","cardContainer","cardStar","cardRank","mainIcon","wrapperLottie","ie11Backup","title","textContainerStar","textContainerRank","iconRank","textStar","textRank","progress","iconStar","propTypes","string","shape","number"],"mappings":"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","sourcesContent":["import React, {useEffect, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {pipe, round, parseInt as _parseInt, multiply} from 'lodash/fp';\nimport {\n NovaCompositionCoorpacademyStar as StarIcon,\n NovaSolidVoteRewardsRewardsBadge5 as RankIcon\n} from '@coorpacademy/nova-icons';\nimport AtomLottieWrapper from '../../atom/lottie-wrapper';\nimport Animation, {EASE_OUT_CUBIC} from '../../hoc/animation';\nimport AnimationScheduler from '../../hoc/animation-scheduler';\nimport style from './style.css';\n\nexport const setAnimations = (setIsAnimationVisible, setIsAnimated) => () => {\n setIsAnimationVisible('play');\n setIsAnimated(true);\n};\n\nconst ReviewCardCongrats = props => {\n const {\n 'aria-label': ariaLabel,\n 'data-name': dataName,\n animationLottie,\n cardType,\n iconAriaLabel,\n className,\n reviewCardTitle,\n reviewCardValue,\n rankSuffix,\n timerAnimation\n } = props;\n\n const [isAnimationVisible, setIsAnimationVisible] = useState('loading');\n const [isAnimated, setIsAnimated] = useState(false);\n\n useEffect(() => {\n let timer;\n // istanbul ignore else\n if (!isAnimationVisible || !isAnimated) {\n timer = setTimeout(setAnimations(setIsAnimationVisible, setIsAnimated), timerAnimation);\n }\n return () => timer && clearTimeout(timer);\n }, [timerAnimation]);\n\n const wrapperClassName = classnames(\n className,\n style.cardContainer,\n cardType === 'card-star' ? style.cardStar : style.cardRank\n );\n\n return (\n <div className={wrapperClassName} aria-label={ariaLabel} data-name={dataName}>\n <div className={style.mainIcon}>\n <AtomLottieWrapper\n {...animationLottie}\n loop={false}\n animationControl={isAnimationVisible}\n autoplay={false}\n data-name=\"lottie-wrapper\"\n className={style.wrapperLottie}\n backupImageClassName={style.ie11Backup}\n />\n </div>\n <div className={style.title}>{reviewCardTitle}</div>\n <div className={cardType === 'card-star' ? style.textContainerStar : style.textContainerRank}>\n {cardType === 'card-rank' ? (\n <RankIcon className={style.iconRank} width={40} height={40} aria-label={iconAriaLabel} />\n ) : null}\n <AnimationScheduler animated={isAnimated}>\n <div>\n <span className={cardType === 'card-star' ? style.textStar : style.textRank}>\n <Animation name=\"counter\" bezier={EASE_OUT_CUBIC} duration={2000}>\n {progress => pipe(_parseInt(10), multiply(progress), round)(reviewCardValue)}\n </Animation>\n </span>\n </div>\n </AnimationScheduler>\n {cardType === 'card-star' ? (\n <StarIcon className={style.iconStar} width={53} height={53} aria-label={iconAriaLabel} />\n ) : (\n <div className={style.rankSuffix}>{rankSuffix}</div>\n )}\n </div>\n </div>\n );\n};\n\nReviewCardCongrats.propTypes = {\n 'aria-label': PropTypes.string,\n 'data-name': PropTypes.string,\n animationLottie: PropTypes.shape(AtomLottieWrapper.propTypes),\n cardType: PropTypes.string,\n iconAriaLabel: PropTypes.string,\n className: PropTypes.string,\n reviewCardTitle: PropTypes.string,\n reviewCardValue: PropTypes.string,\n rankSuffix: PropTypes.string,\n timerAnimation: PropTypes.number\n};\n\nexport default ReviewCardCongrats;\n"],"file":"index.js"}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
@value breakpoints: "../../variables/breakpoints.css";
|
|
2
|
+
@value mobile from breakpoints;
|
|
3
|
+
@value colors: "../../variables/colors.css";
|
|
4
|
+
@value cm_blue_900 from colors;
|
|
5
|
+
@value cm_positive_100 from colors;
|
|
6
|
+
@value cm_yellow_secondary_200 from colors;
|
|
7
|
+
|
|
8
|
+
@keyframes fadeIn {
|
|
9
|
+
0% {
|
|
10
|
+
opacity: 0;
|
|
11
|
+
}
|
|
12
|
+
100% {
|
|
13
|
+
opacity: 1;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.textBase {
|
|
18
|
+
font-family: 'Gilroy';
|
|
19
|
+
font-style: normal;
|
|
20
|
+
user-select: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.textContainerBase {
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
margin-bottom: 40px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.textIconBase {
|
|
30
|
+
composes: textBase;
|
|
31
|
+
font-weight: 700;
|
|
32
|
+
font-size: 64px;
|
|
33
|
+
line-height: 77px;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.cardContainer {
|
|
37
|
+
animation: fadeIn 2s ease-in-out forwards;
|
|
38
|
+
backdrop-filter: blur(36px);
|
|
39
|
+
border-radius: 24px;
|
|
40
|
+
display: flex;
|
|
41
|
+
flex-direction: column;
|
|
42
|
+
justify-content: center;
|
|
43
|
+
width: 280px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.cardStar {
|
|
47
|
+
box-shadow: 0px 0px 45px 6px rgba(255, 206, 10, 0.1);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.cardRank {
|
|
51
|
+
box-shadow: 0px 0px 45px 6px rgba(24, 187, 152, 0.1);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.mainIcon {
|
|
55
|
+
display: flex;
|
|
56
|
+
justify-content: center;
|
|
57
|
+
margin: 20px 0px 12px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.wrapperLottie {
|
|
61
|
+
width: 165px;
|
|
62
|
+
height: 165px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.ie11Backup {
|
|
66
|
+
composes: wrapperLottie;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.title {
|
|
70
|
+
composes: textBase;
|
|
71
|
+
color: cm_blue_900;
|
|
72
|
+
font-weight: 400;
|
|
73
|
+
font-size: 28px;
|
|
74
|
+
line-height: 36px;
|
|
75
|
+
text-align: center;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.textContainerStar {
|
|
79
|
+
composes: textContainerBase;
|
|
80
|
+
justify-content: flex-end;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.textContainerRank {
|
|
84
|
+
composes: textContainerBase;
|
|
85
|
+
justify-content: space-between;
|
|
86
|
+
padding: 0 45px;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.textStar {
|
|
90
|
+
composes: textIconBase;
|
|
91
|
+
color: cm_yellow_secondary_200;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.textRank {
|
|
95
|
+
composes: textIconBase;
|
|
96
|
+
color: cm_blue_900;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.iconStar {
|
|
100
|
+
color: cm_yellow_secondary_200;
|
|
101
|
+
padding: 0 55px 0 10px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.iconRank {
|
|
105
|
+
color: cm_positive_100;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.rankSuffix {
|
|
109
|
+
composes: textIconBase;
|
|
110
|
+
color: cm_blue_900;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@media mobile {
|
|
114
|
+
.cardContainer {
|
|
115
|
+
width: 240px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.mainIcon {
|
|
119
|
+
margin: 14px 0px 6px;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.textContainerBase {
|
|
123
|
+
margin-bottom: 20px;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.iconStar {
|
|
127
|
+
color: cm_yellow_secondary_200;
|
|
128
|
+
padding: 0 35px 0 10px;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.wrapperLottie {
|
|
132
|
+
width: 140px;
|
|
133
|
+
height: 140px;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.textStar, .textRank, .rankSuffix {
|
|
137
|
+
font-size: 54px;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
import browserEnv from 'browser-env';
|
|
4
|
+
import test from 'ava';
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import { render, cleanup, waitFor } from '@testing-library/react';
|
|
7
|
+
import ReviewCardCongrats, { setAnimations } from '..';
|
|
8
|
+
import starFixture from './fixtures/star';
|
|
9
|
+
browserEnv({
|
|
10
|
+
pretendToBeVisual: true
|
|
11
|
+
});
|
|
12
|
+
test.afterEach(cleanup);
|
|
13
|
+
test('should trigger lottie animation', async t => {
|
|
14
|
+
const props = _extends(_extends({}, starFixture.props), {}, {
|
|
15
|
+
timerAnimation: 0
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
const {
|
|
19
|
+
container,
|
|
20
|
+
rerender
|
|
21
|
+
} = render( /*#__PURE__*/React.createElement(ReviewCardCongrats, props));
|
|
22
|
+
await waitFor(async () => {
|
|
23
|
+
const result = await t.try(tt => {
|
|
24
|
+
rerender( /*#__PURE__*/React.createElement(ReviewCardCongrats, props));
|
|
25
|
+
const lottieWrapper = container.querySelectorAll('[data-name="lottie-wrapper"]');
|
|
26
|
+
tt.truthy(lottieWrapper);
|
|
27
|
+
});
|
|
28
|
+
if (result.passed) return result.commit();
|
|
29
|
+
result.discard();
|
|
30
|
+
throw result.errors;
|
|
31
|
+
});
|
|
32
|
+
t.pass();
|
|
33
|
+
});
|
|
34
|
+
test('setAnimations', t => {
|
|
35
|
+
t.plan(2);
|
|
36
|
+
|
|
37
|
+
const _setIsAnimationVisible = () => {
|
|
38
|
+
t.pass();
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
const _setIsAnimated = () => {
|
|
42
|
+
t.pass();
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
setAnimations(_setIsAnimationVisible, _setIsAnimated)();
|
|
46
|
+
});
|
|
47
|
+
//# sourceMappingURL=card-congrats.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/molecule/review-card-congrats/test/card-congrats.js"],"names":["browserEnv","test","React","render","cleanup","waitFor","ReviewCardCongrats","setAnimations","starFixture","pretendToBeVisual","afterEach","t","props","timerAnimation","container","rerender","result","try","tt","lottieWrapper","querySelectorAll","truthy","passed","commit","discard","errors","pass","plan","_setIsAnimationVisible","_setIsAnimated"],"mappings":";;AAAA,OAAOA,UAAP,MAAuB,aAAvB;AACA,OAAOC,IAAP,MAAiB,KAAjB;AACA,OAAOC,KAAP,MAAkB,OAAlB;AACA,SAAQC,MAAR,EAAgBC,OAAhB,EAAyBC,OAAzB,QAAuC,wBAAvC;AACA,OAAOC,kBAAP,IAA4BC,aAA5B,QAAgD,IAAhD;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AAEAR,UAAU,CAAC;AAACS,EAAAA,iBAAiB,EAAE;AAApB,CAAD,CAAV;AAEAR,IAAI,CAACS,SAAL,CAAeN,OAAf;AAEAH,IAAI,CAAC,iCAAD,EAAoC,MAAMU,CAAN,IAAW;AACjD,QAAMC,KAAK,yBAAOJ,WAAW,CAACI,KAAnB;AAA0BC,IAAAA,cAAc,EAAE;AAA1C,IAAX;;AACA,QAAM;AAACC,IAAAA,SAAD;AAAYC,IAAAA;AAAZ,MAAwBZ,MAAM,eAAC,oBAAC,kBAAD,EAAwBS,KAAxB,CAAD,CAApC;AAEA,QAAMP,OAAO,CAAC,YAAY;AACxB,UAAMW,MAAM,GAAG,MAAML,CAAC,CAACM,GAAF,CAAMC,EAAE,IAAI;AAC/BH,MAAAA,QAAQ,eAAC,oBAAC,kBAAD,EAAwBH,KAAxB,CAAD,CAAR;AACA,YAAMO,aAAa,GAAGL,SAAS,CAACM,gBAAV,CAA2B,8BAA3B,CAAtB;AACAF,MAAAA,EAAE,CAACG,MAAH,CAAUF,aAAV;AACD,KAJoB,CAArB;AAKA,QAAIH,MAAM,CAACM,MAAX,EAAmB,OAAON,MAAM,CAACO,MAAP,EAAP;AACnBP,IAAAA,MAAM,CAACQ,OAAP;AACA,UAAMR,MAAM,CAACS,MAAb;AACD,GATY,CAAb;AAUAd,EAAAA,CAAC,CAACe,IAAF;AACD,CAfG,CAAJ;AAiBAzB,IAAI,CAAC,eAAD,EAAkBU,CAAC,IAAI;AACzBA,EAAAA,CAAC,CAACgB,IAAF,CAAO,CAAP;;AACA,QAAMC,sBAAsB,GAAG,MAAM;AACnCjB,IAAAA,CAAC,CAACe,IAAF;AACD,GAFD;;AAGA,QAAMG,cAAc,GAAG,MAAM;AAC3BlB,IAAAA,CAAC,CAACe,IAAF;AACD,GAFD;;AAIAnB,EAAAA,aAAa,CAACqB,sBAAD,EAAyBC,cAAzB,CAAb;AACD,CAVG,CAAJ","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {render, cleanup, waitFor} from '@testing-library/react';\nimport ReviewCardCongrats, {setAnimations} from '..';\nimport starFixture from './fixtures/star';\n\nbrowserEnv({pretendToBeVisual: true});\n\ntest.afterEach(cleanup);\n\ntest('should trigger lottie animation', async t => {\n const props = {...starFixture.props, timerAnimation: 0};\n const {container, rerender} = render(<ReviewCardCongrats {...props} />);\n\n await waitFor(async () => {\n const result = await t.try(tt => {\n rerender(<ReviewCardCongrats {...props} />);\n const lottieWrapper = container.querySelectorAll('[data-name=\"lottie-wrapper\"]');\n tt.truthy(lottieWrapper);\n });\n if (result.passed) return result.commit();\n result.discard();\n throw result.errors;\n });\n t.pass();\n});\n\ntest('setAnimations', t => {\n t.plan(2);\n const _setIsAnimationVisible = () => {\n t.pass();\n };\n const _setIsAnimated = () => {\n t.pass();\n };\n\n setAnimations(_setIsAnimationVisible, _setIsAnimated)();\n});\n"],"file":"card-congrats.js"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
import animationLottie from '../../../../atom/lottie-wrapper/test/fixtures/rank';
|
|
4
|
+
export const defaultProps = {
|
|
5
|
+
'aria-label': 'Review Card Congrats Container',
|
|
6
|
+
'data-name': 'card-rank',
|
|
7
|
+
animationLottie: _extends(_extends({}, animationLottie.props), {}, {
|
|
8
|
+
height: undefined,
|
|
9
|
+
width: undefined
|
|
10
|
+
}),
|
|
11
|
+
cardType: 'card-rank',
|
|
12
|
+
iconAriaLabel: 'Image without information',
|
|
13
|
+
className: undefined,
|
|
14
|
+
reviewCardTitle: 'You are now',
|
|
15
|
+
reviewCardValue: '14',
|
|
16
|
+
rankSuffix: 'th',
|
|
17
|
+
timerAnimation: 200
|
|
18
|
+
};
|
|
19
|
+
export default {
|
|
20
|
+
props: defaultProps
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=rank.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/review-card-congrats/test/fixtures/rank.js"],"names":["animationLottie","defaultProps","props","height","undefined","width","cardType","iconAriaLabel","className","reviewCardTitle","reviewCardValue","rankSuffix","timerAnimation"],"mappings":";;AAAA,OAAOA,eAAP,MAA4B,oDAA5B;AAEA,OAAO,MAAMC,YAAY,GAAG;AAC1B,gBAAc,gCADY;AAE1B,eAAa,WAFa;AAG1BD,EAAAA,eAAe,wBAAMA,eAAe,CAACE,KAAtB;AAA6BC,IAAAA,MAAM,EAAEC,SAArC;AAAgDC,IAAAA,KAAK,EAAED;AAAvD,IAHW;AAI1BE,EAAAA,QAAQ,EAAE,WAJgB;AAK1BC,EAAAA,aAAa,EAAE,2BALW;AAM1BC,EAAAA,SAAS,EAAEJ,SANe;AAO1BK,EAAAA,eAAe,EAAE,aAPS;AAQ1BC,EAAAA,eAAe,EAAE,IARS;AAS1BC,EAAAA,UAAU,EAAE,IATc;AAU1BC,EAAAA,cAAc,EAAE;AAVU,CAArB;AAaP,eAAe;AAACV,EAAAA,KAAK,EAAED;AAAR,CAAf","sourcesContent":["import animationLottie from '../../../../atom/lottie-wrapper/test/fixtures/rank';\n\nexport const defaultProps = {\n 'aria-label': 'Review Card Congrats Container',\n 'data-name': 'card-rank',\n animationLottie: {...animationLottie.props, height: undefined, width: undefined},\n cardType: 'card-rank',\n iconAriaLabel: 'Image without information',\n className: undefined,\n reviewCardTitle: 'You are now',\n reviewCardValue: '14',\n rankSuffix: 'th',\n timerAnimation: 200\n};\n\nexport default {props: defaultProps};\n"],"file":"rank.js"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
import animationLottie from '../../../../atom/lottie-wrapper/test/fixtures/default';
|
|
4
|
+
export const defaultProps = {
|
|
5
|
+
'aria-label': 'Review Card Congrats Container',
|
|
6
|
+
'data-name': 'card-star',
|
|
7
|
+
animationLottie: _extends(_extends({}, animationLottie.props), {}, {
|
|
8
|
+
height: undefined,
|
|
9
|
+
width: undefined
|
|
10
|
+
}),
|
|
11
|
+
iconAriaLabel: 'Image without information',
|
|
12
|
+
className: undefined,
|
|
13
|
+
cardType: 'card-star',
|
|
14
|
+
reviewCardTitle: 'You have won',
|
|
15
|
+
reviewCardValue: '100',
|
|
16
|
+
timerAnimation: 200
|
|
17
|
+
};
|
|
18
|
+
export default {
|
|
19
|
+
props: defaultProps
|
|
20
|
+
};
|
|
21
|
+
//# sourceMappingURL=star.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/review-card-congrats/test/fixtures/star.js"],"names":["animationLottie","defaultProps","props","height","undefined","width","iconAriaLabel","className","cardType","reviewCardTitle","reviewCardValue","timerAnimation"],"mappings":";;AAAA,OAAOA,eAAP,MAA4B,uDAA5B;AAEA,OAAO,MAAMC,YAAY,GAAG;AAC1B,gBAAc,gCADY;AAE1B,eAAa,WAFa;AAG1BD,EAAAA,eAAe,wBAAMA,eAAe,CAACE,KAAtB;AAA6BC,IAAAA,MAAM,EAAEC,SAArC;AAAgDC,IAAAA,KAAK,EAAED;AAAvD,IAHW;AAI1BE,EAAAA,aAAa,EAAE,2BAJW;AAK1BC,EAAAA,SAAS,EAAEH,SALe;AAM1BI,EAAAA,QAAQ,EAAE,WANgB;AAO1BC,EAAAA,eAAe,EAAE,cAPS;AAQ1BC,EAAAA,eAAe,EAAE,KARS;AAS1BC,EAAAA,cAAc,EAAE;AATU,CAArB;AAYP,eAAe;AAACT,EAAAA,KAAK,EAAED;AAAR,CAAf","sourcesContent":["import animationLottie from '../../../../atom/lottie-wrapper/test/fixtures/default';\n\nexport const defaultProps = {\n 'aria-label': 'Review Card Congrats Container',\n 'data-name': 'card-star',\n animationLottie: {...animationLottie.props, height: undefined, width: undefined},\n iconAriaLabel: 'Image without information',\n className: undefined,\n cardType: 'card-star',\n reviewCardTitle: 'You have won',\n reviewCardValue: '100',\n timerAnimation: 200\n};\n\nexport default {props: defaultProps};\n"],"file":"star.js"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import test from 'ava';
|
|
2
|
+
import forEach from 'lodash/forEach';
|
|
3
|
+
import renderComponentMacro from '../../../test/helpers/render-component';
|
|
4
|
+
import MoleculeReviewCardCongrats from '..';
|
|
5
|
+
import fixtureRank from './fixtures/rank';
|
|
6
|
+
import fixtureStar from './fixtures/star';
|
|
7
|
+
test('Molecule › MoleculeReviewCardCongrats > should have valid propTypes', t => {
|
|
8
|
+
t.pass();
|
|
9
|
+
forEach(MoleculeReviewCardCongrats.propTypes, (value, key) => {
|
|
10
|
+
t.not(value, undefined, `PropType for "Molecule.MoleculeReviewCardCongrats.propTypes.${key}" may not be undefined. Did you mistype the propTypes definition?`);
|
|
11
|
+
});
|
|
12
|
+
});
|
|
13
|
+
test('Molecule › MoleculeReviewCardCongrats › Rank › should be rendered', renderComponentMacro, MoleculeReviewCardCongrats, fixtureRank);
|
|
14
|
+
test('Molecule › MoleculeReviewCardCongrats › Star › should be rendered', renderComponentMacro, MoleculeReviewCardCongrats, fixtureStar);
|
|
15
|
+
//# sourceMappingURL=fixtures.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/molecule/review-card-congrats/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","MoleculeReviewCardCongrats","fixtureRank","fixtureStar","t","pass","propTypes","value","key","not","undefined"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,KAAjB;AACA,OAAOC,OAAP,MAAoB,gBAApB;AACA,OAAOC,oBAAP,MAAiC,wCAAjC;AACA,OAAOC,0BAAP,MAAuC,IAAvC;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AAEAL,IAAI,CAAC,qEAAD,EAAwEM,CAAC,IAAI;AAC/EA,EAAAA,CAAC,CAACC,IAAF;AACAN,EAAAA,OAAO,CAACE,0BAA0B,CAACK,SAA5B,EAAuC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAC5DJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,+DAA8DF,GAAI,mEAA3F;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAV,IAAI,CAAC,mEAAD,EAAsEE,oBAAtE,EAA4FC,0BAA5F,EAAwHC,WAAxH,CAAJ;AACAJ,IAAI,CAAC,mEAAD,EAAsEE,oBAAtE,EAA4FC,0BAA5F,EAAwHE,WAAxH,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeReviewCardCongrats from '..';\nimport fixtureRank from './fixtures/rank';\nimport fixtureStar from './fixtures/star';\n\ntest('Molecule › MoleculeReviewCardCongrats > should have valid propTypes', t => {\n t.pass();\n forEach(MoleculeReviewCardCongrats.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Molecule.MoleculeReviewCardCongrats.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Molecule › MoleculeReviewCardCongrats › Rank › should be rendered', renderComponentMacro, MoleculeReviewCardCongrats, fixtureRank);\ntest('Molecule › MoleculeReviewCardCongrats › Star › should be rendered', renderComponentMacro, MoleculeReviewCardCongrats, fixtureStar);\n"],"file":"fixtures.js"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
import React, { useEffect, useRef } from 'react';
|
|
4
|
+
import PropTypes from 'prop-types';
|
|
5
|
+
import ButtonLink from '../../atom/button-link';
|
|
6
|
+
import MoleculeReviewCardCongrats from '../../molecule/review-card-congrats';
|
|
7
|
+
import style from './style.css';
|
|
8
|
+
export const setScroll = container => () => {
|
|
9
|
+
container.current.scrollTo({
|
|
10
|
+
left: 1000,
|
|
11
|
+
behavior: 'smooth'
|
|
12
|
+
});
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
const ReviewCongrats = props => {
|
|
16
|
+
const {
|
|
17
|
+
'aria-label': ariaLabel,
|
|
18
|
+
'data-name': dataName,
|
|
19
|
+
title,
|
|
20
|
+
cardCongratsStar,
|
|
21
|
+
cardCongratsRank,
|
|
22
|
+
buttonRevising,
|
|
23
|
+
buttonRevisingSkill
|
|
24
|
+
} = props;
|
|
25
|
+
const container = useRef(null);
|
|
26
|
+
useEffect(() => {
|
|
27
|
+
const timer = setTimeout(setScroll(container), 2000);
|
|
28
|
+
return () => timer && clearTimeout(timer);
|
|
29
|
+
}, []);
|
|
30
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
31
|
+
className: style.containerCongrats,
|
|
32
|
+
"aria-label": ariaLabel,
|
|
33
|
+
"data-name": dataName
|
|
34
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
35
|
+
className: style.title
|
|
36
|
+
}, title), /*#__PURE__*/React.createElement("div", {
|
|
37
|
+
ref: container,
|
|
38
|
+
className: style.containerCards
|
|
39
|
+
}, /*#__PURE__*/React.createElement(MoleculeReviewCardCongrats, _extends({}, cardCongratsStar, {
|
|
40
|
+
className: style.cardStar
|
|
41
|
+
})), /*#__PURE__*/React.createElement(MoleculeReviewCardCongrats, _extends({}, cardCongratsRank, {
|
|
42
|
+
timerAnimation: 1800,
|
|
43
|
+
className: style.cardRank
|
|
44
|
+
}))), /*#__PURE__*/React.createElement("div", {
|
|
45
|
+
className: style.buttonContainer
|
|
46
|
+
}, /*#__PURE__*/React.createElement(ButtonLink, _extends({}, buttonRevising, {
|
|
47
|
+
className: style.buttonRevise,
|
|
48
|
+
"data-name": "revise-skill-link"
|
|
49
|
+
})), /*#__PURE__*/React.createElement(ButtonLink, _extends({}, buttonRevisingSkill, {
|
|
50
|
+
className: style.buttonRevise
|
|
51
|
+
}))));
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
ReviewCongrats.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
55
|
+
'aria-label': PropTypes.string,
|
|
56
|
+
'data-name': PropTypes.string,
|
|
57
|
+
title: PropTypes.string,
|
|
58
|
+
cardCongratsStar: PropTypes.shape(MoleculeReviewCardCongrats.propTypes),
|
|
59
|
+
cardCongratsRank: PropTypes.shape(MoleculeReviewCardCongrats.propTypes),
|
|
60
|
+
buttonRevising: PropTypes.shape({
|
|
61
|
+
label: PropTypes.string,
|
|
62
|
+
onClick: PropTypes.func,
|
|
63
|
+
type: PropTypes.string
|
|
64
|
+
}),
|
|
65
|
+
buttonRevisingSkill: PropTypes.shape({
|
|
66
|
+
label: PropTypes.string,
|
|
67
|
+
onClick: PropTypes.func,
|
|
68
|
+
type: PropTypes.string
|
|
69
|
+
})
|
|
70
|
+
} : {};
|
|
71
|
+
export default ReviewCongrats;
|
|
72
|
+
//# sourceMappingURL=index.js.map
|