@coorpacademy/components 11.2.12 → 11.2.13-alpha.2
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/lottie-wrapper/index.d.ts.map +1 -1
- package/es/atom/lottie-wrapper/index.js +12 -32
- package/es/atom/lottie-wrapper/index.js.map +1 -1
- package/es/atom/lottie-wrapper/prop-types.d.ts +0 -4
- package/es/atom/lottie-wrapper/prop-types.d.ts.map +1 -1
- package/es/atom/lottie-wrapper/prop-types.js +0 -2
- package/es/atom/lottie-wrapper/prop-types.js.map +1 -1
- package/es/atom/lottie-wrapper/style.css +0 -5
- package/es/molecule/questions/drop-down/index.js +2 -1
- package/es/molecule/questions/drop-down/index.js.map +1 -1
- package/es/molecule/questions/free-text/index.d.ts.map +1 -1
- package/es/molecule/questions/free-text/index.js +2 -1
- package/es/molecule/questions/free-text/index.js.map +1 -1
- package/es/molecule/questions/qcm/index.js +2 -1
- package/es/molecule/questions/qcm/index.js.map +1 -1
- package/es/molecule/questions/qcm-drag/index.js +2 -1
- package/es/molecule/questions/qcm-drag/index.js.map +1 -1
- package/es/molecule/questions/qcm-graphic/index.js +2 -1
- package/es/molecule/questions/qcm-graphic/index.js.map +1 -1
- package/es/molecule/questions/question-range/index.js +2 -1
- package/es/molecule/questions/question-range/index.js.map +1 -1
- package/es/molecule/questions/template/index.js +2 -1
- package/es/molecule/questions/template/index.js.map +1 -1
- package/es/molecule/review-card-congrats/prop-types.d.ts +0 -2
- package/es/molecule/review-card-congrats/prop-types.d.ts.map +1 -1
- package/es/organism/review-congrats/prop-types.d.ts +0 -6
- package/es/organism/review-congrats/prop-types.d.ts.map +1 -1
- package/es/template/app-player/popin-end/summary.js +0 -1
- package/es/template/app-player/popin-end/summary.js.map +1 -1
- package/es/template/app-review/index.d.ts +0 -6
- package/es/template/app-review/index.d.ts.map +1 -1
- package/es/template/app-review/player/prop-types.d.ts +0 -6
- package/es/template/app-review/player/prop-types.d.ts.map +1 -1
- package/es/template/app-review/prop-types.d.ts +0 -6
- package/es/template/app-review/prop-types.d.ts.map +1 -1
- package/lib/atom/lottie-wrapper/index.d.ts.map +1 -1
- package/lib/atom/lottie-wrapper/index.js +12 -33
- package/lib/atom/lottie-wrapper/index.js.map +1 -1
- package/lib/atom/lottie-wrapper/prop-types.d.ts +0 -4
- package/lib/atom/lottie-wrapper/prop-types.d.ts.map +1 -1
- package/lib/atom/lottie-wrapper/prop-types.js +0 -2
- package/lib/atom/lottie-wrapper/prop-types.js.map +1 -1
- package/lib/atom/lottie-wrapper/style.css +0 -5
- package/lib/molecule/questions/drop-down/index.js +2 -1
- package/lib/molecule/questions/drop-down/index.js.map +1 -1
- package/lib/molecule/questions/free-text/index.d.ts.map +1 -1
- package/lib/molecule/questions/free-text/index.js +2 -1
- package/lib/molecule/questions/free-text/index.js.map +1 -1
- package/lib/molecule/questions/qcm/index.js +2 -1
- package/lib/molecule/questions/qcm/index.js.map +1 -1
- package/lib/molecule/questions/qcm-drag/index.js +2 -1
- package/lib/molecule/questions/qcm-drag/index.js.map +1 -1
- package/lib/molecule/questions/qcm-graphic/index.js +2 -1
- package/lib/molecule/questions/qcm-graphic/index.js.map +1 -1
- package/lib/molecule/questions/question-range/index.js +2 -1
- package/lib/molecule/questions/question-range/index.js.map +1 -1
- package/lib/molecule/questions/template/index.js +2 -1
- package/lib/molecule/questions/template/index.js.map +1 -1
- package/lib/molecule/review-card-congrats/prop-types.d.ts +0 -2
- package/lib/molecule/review-card-congrats/prop-types.d.ts.map +1 -1
- package/lib/organism/review-congrats/prop-types.d.ts +0 -6
- package/lib/organism/review-congrats/prop-types.d.ts.map +1 -1
- package/lib/template/app-player/popin-end/summary.js +0 -1
- package/lib/template/app-player/popin-end/summary.js.map +1 -1
- package/lib/template/app-review/index.d.ts +0 -6
- package/lib/template/app-review/index.d.ts.map +1 -1
- package/lib/template/app-review/player/prop-types.d.ts +0 -6
- package/lib/template/app-review/player/prop-types.d.ts.map +1 -1
- package/lib/template/app-review/prop-types.d.ts +0 -6
- package/lib/template/app-review/prop-types.d.ts.map +1 -1
- package/package.json +3 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/lottie-wrapper/index.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/lottie-wrapper/index.js"],"names":[],"mappings":"AAUO,iMAmCN;;AAED,wDAiHC"}
|
|
@@ -3,24 +3,12 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
|
3
3
|
import React, { useMemo, useRef, useEffect, useState } from 'react';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import lottie from 'lottie-web';
|
|
6
|
-
import get from 'lodash/fp/get';
|
|
7
|
-
import has from 'lodash/fp/has';
|
|
8
6
|
import includes from 'lodash/fp/includes';
|
|
9
7
|
import keys from 'lodash/fp/keys';
|
|
10
8
|
import omit from 'lodash/fp/omit';
|
|
11
9
|
import unfetch from 'isomorphic-unfetch';
|
|
12
10
|
import style from './style.css';
|
|
13
11
|
import propTypes, { ANIMATION_CONTROL } from './prop-types';
|
|
14
|
-
|
|
15
|
-
const isIE11 = () => {
|
|
16
|
-
if (typeof window === 'undefined') return;
|
|
17
|
-
const userAgent = get('navigator.userAgent', window);
|
|
18
|
-
const hasMsCrypto = has('msCrypto', window);
|
|
19
|
-
const hasRevision = includes('rv:', userAgent);
|
|
20
|
-
const hasTrident = includes('Trident/', userAgent);
|
|
21
|
-
return hasMsCrypto || hasRevision && hasTrident;
|
|
22
|
-
};
|
|
23
|
-
|
|
24
12
|
export const fetchAndLoadAnimation = async (_lottie, _fetch, animationSrc, containerRef, loop, animationClassnames, hideOnTransparent, autoplay) => {
|
|
25
13
|
const animationUrl = new URL(animationSrc).toString();
|
|
26
14
|
const fetchResult = await _fetch(animationUrl, {
|
|
@@ -59,8 +47,6 @@ const LottieWrapper = props => {
|
|
|
59
47
|
rendererSettings = {},
|
|
60
48
|
width,
|
|
61
49
|
height,
|
|
62
|
-
ie11ImageBackup,
|
|
63
|
-
backupImageClassName,
|
|
64
50
|
autoplay = true,
|
|
65
51
|
animationControl
|
|
66
52
|
} = props;
|
|
@@ -72,18 +58,14 @@ const LottieWrapper = props => {
|
|
|
72
58
|
|
|
73
59
|
const [animationItem, setAnimationItem] = useState(null);
|
|
74
60
|
const [isAnimationVisible, setIsAnimationVisible] = useState(autoplay);
|
|
75
|
-
|
|
76
|
-
const _isIE11 = useMemo(() => isIE11(), []);
|
|
77
|
-
|
|
78
61
|
const wrapperClassName = useMemo(() => classnames(className, style.lottieContainer), [className]);
|
|
79
62
|
const lottieAnimationClassName = useMemo(() => classnames(animationClassName, style.animation), [animationClassName]);
|
|
80
|
-
const ie11BackupImageClassName = useMemo(() => classnames(backupImageClassName, style.backupImage), [backupImageClassName]);
|
|
81
63
|
useEffect(() => {
|
|
82
64
|
// enzyme does not handle well the state update after an async useEffect in tests
|
|
83
65
|
// to remove when the migration towards @testing-library/react is done
|
|
84
66
|
|
|
85
67
|
/* istanbul ignore next */
|
|
86
|
-
if (includes(animationControl, keys(omit('loading', ANIMATION_CONTROL))) && !autoplay) {
|
|
68
|
+
if (containerRef.current && includes(animationControl, keys(omit('loading', ANIMATION_CONTROL))) && !autoplay) {
|
|
87
69
|
setIsAnimationVisible(true);
|
|
88
70
|
if (animationItem) animationItem[animationControl]();
|
|
89
71
|
if (animationControl === ANIMATION_CONTROL.stop) setIsAnimationVisible(false);
|
|
@@ -91,24 +73,26 @@ const LottieWrapper = props => {
|
|
|
91
73
|
}, [animationControl, animationItem, autoplay]);
|
|
92
74
|
useEffect(() => {
|
|
93
75
|
const loadAnimation = async () => {
|
|
94
|
-
|
|
76
|
+
/* istanbul ignore else */
|
|
77
|
+
if (!animationItem) {
|
|
95
78
|
/* istanbul ignore else */
|
|
96
79
|
if (typeof window !== 'undefined') {
|
|
97
80
|
window.lottie = lottie;
|
|
98
81
|
}
|
|
99
82
|
|
|
100
83
|
const animation = await fetchAndLoadAnimation(lottie, unfetch, animationSrc, containerRef, loop, lottieAnimationClassName, hideOnTransparent, autoplay);
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
setAnimationItem(animation);
|
|
84
|
+
containerRef.current && setAnimationItem(animation);
|
|
104
85
|
}
|
|
105
86
|
};
|
|
106
87
|
|
|
107
88
|
loadAnimation();
|
|
108
|
-
return () =>
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
89
|
+
return () => {
|
|
90
|
+
containerRef.current = false;
|
|
91
|
+
return animationItem &&
|
|
92
|
+
/* istanbul ignore next */
|
|
93
|
+
lottie.destroy(animationItem.name);
|
|
94
|
+
};
|
|
95
|
+
}, [lottieAnimationClassName, containerRef, hideOnTransparent, loop, animationSrc, animationItem, autoplay]);
|
|
112
96
|
const accessibilityProps = ariaLabel ? {
|
|
113
97
|
'aria-label': ariaLabel,
|
|
114
98
|
role: 'img'
|
|
@@ -130,11 +114,7 @@ const LottieWrapper = props => {
|
|
|
130
114
|
opacity: isAnimationVisible ? 1 : 0,
|
|
131
115
|
transition: 'opacity 0.25s ease-in'
|
|
132
116
|
})
|
|
133
|
-
})
|
|
134
|
-
src: ie11ImageBackup,
|
|
135
|
-
className: ie11BackupImageClassName,
|
|
136
|
-
"data-name": "ie11-backup-image"
|
|
137
|
-
}) : null);
|
|
117
|
+
}));
|
|
138
118
|
};
|
|
139
119
|
|
|
140
120
|
LottieWrapper.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","useRef","useEffect","useState","classnames","lottie","get","has","includes","keys","omit","unfetch","style","propTypes","ANIMATION_CONTROL","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","stop","destroy","name","accessibilityProps","role","maxWidth","maxHeight","opacity","transition"],"sources":["../../../src/atom/lottie-wrapper/index.js"],"sourcesContent":["import React, {useMemo, useRef, useEffect, useState} from 'react';\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';\nimport propTypes, {ANIMATION_CONTROL} from './prop-types';\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 =\n _lottie.loadAnimation &&\n _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(\n () => 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 const accessibilityProps = ariaLabel\n ? {\n 'aria-label': ariaLabel,\n role: 'img'\n }\n : {\n 'aria-hidden': 'true',\n role: 'presentation'\n };\n\n return (\n <div\n {...accessibilityProps}\n ref={containerRef}\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 = propTypes;\n\nexport default LottieWrapper;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,EAAwBC,MAAxB,EAAgCC,SAAhC,EAA2CC,QAA3C,QAA0D,OAA1D;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,MAAP,MAAmB,YAAnB;AACA,OAAOC,GAAP,MAAgB,eAAhB;AACA,OAAOC,GAAP,MAAgB,eAAhB;AACA,OAAOC,QAAP,MAAqB,oBAArB;AACA,OAAOC,IAAP,MAAiB,gBAAjB;AACA,OAAOC,IAAP,MAAiB,gBAAjB;AACA,OAAOC,OAAP,MAAoB,oBAApB;AACA,OAAOC,KAAP,MAAkB,aAAlB;AACA,OAAOC,SAAP,IAAmBC,iBAAnB,QAA2C,cAA3C;;AAEA,MAAMC,MAAM,GAAG,MAAM;EACnB,IAAI,OAAOC,MAAP,KAAkB,WAAtB,EAAmC;EACnC,MAAMC,SAAS,GAAGX,GAAG,CAAC,qBAAD,EAAwBU,MAAxB,CAArB;EACA,MAAME,WAAW,GAAGX,GAAG,CAAC,UAAD,EAAaS,MAAb,CAAvB;EACA,MAAMG,WAAW,GAAGX,QAAQ,CAAC,KAAD,EAAQS,SAAR,CAA5B;EACA,MAAMG,UAAU,GAAGZ,QAAQ,CAAC,UAAD,EAAaS,SAAb,CAA3B;EAEA,OAAOC,WAAW,IAAKC,WAAW,IAAIC,UAAtC;AACD,CARD;;AAUA,OAAO,MAAMC,qBAAqB,GAAG,OACnCC,OADmC,EAEnCC,MAFmC,EAGnCC,YAHmC,EAInCC,YAJmC,EAKnCC,IALmC,EAMnCC,mBANmC,EAOnCC,iBAPmC,EAQnCC,QARmC,KAShC;EACH,MAAMC,YAAY,GAAG,IAAIC,GAAJ,CAAQP,YAAR,EAAsBQ,QAAtB,EAArB;EACA,MAAMC,WAAW,GAAG,MAAMV,MAAM,CAACO,YAAD,EAAe;IAC7CI,OAAO,EAAE;MACP,oBAAoB,gBADb;MAEP,gBAAgB;IAFT;EADoC,CAAf,CAAhC;EAOA,MAAMC,aAAa,GAAG,MAAMF,WAAW,CAACG,IAAZ,EAA5B;;EAEA,MAAMC,SAAS,GACbf,OAAO,CAACgB,aAAR,IACAhB,OAAO,CAACgB,aAAR,CAAsB;IACpBC,SAAS,EAAEd,YAAY,CAACe,OADJ;IACa;IACjCC,QAAQ,EAAE,KAFU;IAGpBZ,QAHoB;IAIpBH,IAJoB;IAKpBS,aALoB;IAMpBO,gBAAgB,EAAE;MAChBC,SAAS,EAAEhB,mBADK;MAEhBC,iBAFgB;MAGhBgB,mBAAmB,EAAE,eAHL,CAGqB;;IAHrB;EANE,CAAtB,CAFF;;EAcA,OAAOP,SAAP;AACD,CAnCM;;AAqCP,MAAMQ,aAAa,GAAGC,KAAK,IAAI;EAC7B,MAAM;IACJH,SADI;IAEJ,aAAaI,QAFT;IAGJ,cAAcC,SAHV;IAIJxB,YAJI;IAKJE,IAAI,GAAG,KALH;IAMJgB,gBAAgB,GAAG,EANf;IAOJO,KAPI;IAQJC,MARI;IASJC,eATI;IAUJC,oBAVI;IAWJvB,QAAQ,GAAG,IAXP;IAYJwB;EAZI,IAaFP,KAbJ;EAeA,MAAM;IAACH,SAAS,EAAEW,kBAAZ;IAAgC1B,iBAAiB,GAAG;EAApD,IAA4Dc,gBAAlE;EAEA,MAAMjB,YAAY,GAAGxB,MAAM,CAAC,IAAD,CAA3B,CAlB6B,CAoB7B;;EACA,MAAM,CAACsD,aAAD,EAAgBC,gBAAhB,IAAoCrD,QAAQ,CAAC,IAAD,CAAlD;EAEA,MAAM,CAACsD,kBAAD,EAAqBC,qBAArB,IAA8CvD,QAAQ,CAAC0B,QAAD,CAA5D;;EAEA,MAAM8B,OAAO,GAAG3D,OAAO,CAAC,MAAMe,MAAM,EAAb,EAAiB,EAAjB,CAAvB;;EAEA,MAAM6C,gBAAgB,GAAG5D,OAAO,CAAC,MAAMI,UAAU,CAACuC,SAAD,EAAY/B,KAAK,CAACiD,eAAlB,CAAjB,EAAqD,CAAClB,SAAD,CAArD,CAAhC;EAEA,MAAMmB,wBAAwB,GAAG9D,OAAO,CACtC,MAAMI,UAAU,CAACkD,kBAAD,EAAqB1C,KAAK,CAACyB,SAA3B,CADsB,EAEtC,CAACiB,kBAAD,CAFsC,CAAxC;EAKA,MAAMS,wBAAwB,GAAG/D,OAAO,CACtC,MAAMI,UAAU,CAACgD,oBAAD,EAAuBxC,KAAK,CAACoD,WAA7B,CADsB,EAEtC,CAACZ,oBAAD,CAFsC,CAAxC;EAKAlD,SAAS,CAAC,MAAM;IACd;IACA;;IACA;IACA,IAAIM,QAAQ,CAAC6C,gBAAD,EAAmB5C,IAAI,CAACC,IAAI,CAAC,SAAD,EAAYI,iBAAZ,CAAL,CAAvB,CAAR,IAAwE,CAACe,QAA7E,EAAuF;MACrF6B,qBAAqB,CAAC,IAAD,CAArB;MACA,IAAIH,aAAJ,EAAmBA,aAAa,CAACF,gBAAD,CAAb;MACnB,IAAIA,gBAAgB,KAAKvC,iBAAiB,CAACmD,IAA3C,EAAiDP,qBAAqB,CAAC,KAAD,CAArB;IAClD;EACF,CATQ,EASN,CAACL,gBAAD,EAAmBE,aAAnB,EAAkC1B,QAAlC,CATM,CAAT;EAWA3B,SAAS,CAAC,MAAM;IACd,MAAMoC,aAAa,GAAG,YAAY;MAChC,IAAI,CAACqB,OAAD,IAAY,CAACJ,aAAjB,EAAgC;QAC9B;QACA,IAAI,OAAOvC,MAAP,KAAkB,WAAtB,EAAmC;UACjCA,MAAM,CAACX,MAAP,GAAgBA,MAAhB;QACD;;QACD,MAAMgC,SAAS,GAAG,MAAMhB,qBAAqB,CAC3ChB,MAD2C,EAE3CM,OAF2C,EAG3Ca,YAH2C,EAI3CC,YAJ2C,EAK3CC,IAL2C,EAM3CoC,wBAN2C,EAO3ClC,iBAP2C,EAQ3CC,QAR2C,CAA7C;QAWA;;QACA2B,gBAAgB,CAACnB,SAAD,CAAhB;MACD;IACF,CApBD;;IAsBAC,aAAa;IACb,OAAO,MAAMiB,aAAa;IAAI;IAA2BlD,MAAM,CAAC6D,OAAP,CAAeX,aAAa,CAACY,IAA7B,CAAzD;EACD,CAzBQ,EAyBN,CACDL,wBADC,EAEDrC,YAFC,EAGDG,iBAHC,EAIDF,IAJC,EAKDF,YALC,EAMDmC,OANC,EAODJ,aAPC,EAQD1B,QARC,CAzBM,CAAT;EAoCA,MAAMuC,kBAAkB,GAAGpB,SAAS,GAChC;IACE,cAAcA,SADhB;IAEEqB,IAAI,EAAE;EAFR,CADgC,GAKhC;IACE,eAAe,MADjB;IAEEA,IAAI,EAAE;EAFR,CALJ;EAUA,oBACE,wCACMD,kBADN;IAEE,GAAG,EAAE3C,YAFP;IAGE,aAAWsB,QAHb;IAIE,SAAS,EAAEa,gBAJb;IAKE,KAAK,eACCX,KAAK,IAAI;MACXA,KAAK,EAAG,GAAEA,KAAM,IADL;MAEXqB,QAAQ,EAAG,GAAErB,KAAM;IAFR,CADV,EAKCC,MAAM,IAAI;MACZA,MAAM,EAAG,GAAEA,MAAO,IADN;MAEZqB,SAAS,EAAG,GAAErB,MAAO;IAFT,CALX;MASHsB,OAAO,EAAEf,kBAAkB,GAAG,CAAH,GAAO,CAT/B;MAUHgB,UAAU,EAAE;IAVT;EALP,IAkBGd,OAAO,gBACN;IACE,GAAG,EAAER,eADP;IAEE,SAAS,EAAEY,wBAFb;IAGE,aAAU;EAHZ,EADM,GAMJ,IAxBN,CADF;AA4BD,CA5HD;;AA8HAlB,aAAa,CAAChC,SAAd,2CAA0BA,SAA1B;AAEA,eAAegC,aAAf"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useMemo","useRef","useEffect","useState","classnames","lottie","includes","keys","omit","unfetch","style","propTypes","ANIMATION_CONTROL","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","animationControl","animationClassName","animationItem","setAnimationItem","isAnimationVisible","setIsAnimationVisible","wrapperClassName","lottieContainer","lottieAnimationClassName","stop","window","destroy","name","accessibilityProps","role","maxWidth","maxHeight","opacity","transition"],"sources":["../../../src/atom/lottie-wrapper/index.js"],"sourcesContent":["import React, {useMemo, useRef, useEffect, useState} from 'react';\nimport classnames from 'classnames';\nimport lottie from 'lottie-web';\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';\nimport propTypes, {ANIMATION_CONTROL} from './prop-types';\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 =\n _lottie.loadAnimation &&\n _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 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 wrapperClassName = useMemo(() => classnames(className, style.lottieContainer), [className]);\n\n const lottieAnimationClassName = useMemo(\n () => classnames(animationClassName, style.animation),\n [animationClassName]\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 containerRef.current &&\n includes(animationControl, keys(omit('loading', ANIMATION_CONTROL))) &&\n !autoplay\n ) {\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 /* istanbul ignore else */\n if (!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 containerRef.current && setAnimationItem(animation);\n }\n };\n\n loadAnimation();\n return () => {\n containerRef.current = false;\n return animationItem && /* istanbul ignore next */ lottie.destroy(animationItem.name);\n };\n }, [\n lottieAnimationClassName,\n containerRef,\n hideOnTransparent,\n loop,\n animationSrc,\n animationItem,\n autoplay\n ]);\n\n const accessibilityProps = ariaLabel\n ? {\n 'aria-label': ariaLabel,\n role: 'img'\n }\n : {\n 'aria-hidden': 'true',\n role: 'presentation'\n };\n\n return (\n <div\n {...accessibilityProps}\n ref={containerRef}\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 );\n};\n\nLottieWrapper.propTypes = propTypes;\n\nexport default LottieWrapper;\n"],"mappings":"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"}
|
|
@@ -11,8 +11,6 @@ export declare type LottieAnimationProps = {
|
|
|
11
11
|
height?: number;
|
|
12
12
|
width?: number;
|
|
13
13
|
className?: string;
|
|
14
|
-
ie11ImageBackup: string;
|
|
15
|
-
backupImageClassName?: string;
|
|
16
14
|
autoplay?: boolean;
|
|
17
15
|
animationControl?: 'play' | 'pause' | 'stop' | 'loading';
|
|
18
16
|
};
|
|
@@ -34,8 +32,6 @@ declare const propTypes: {
|
|
|
34
32
|
height: PropTypes.Requireable<number>;
|
|
35
33
|
width: PropTypes.Requireable<number>;
|
|
36
34
|
className: PropTypes.Requireable<string>;
|
|
37
|
-
ie11ImageBackup: PropTypes.Validator<string>;
|
|
38
|
-
backupImageClassName: PropTypes.Requireable<string>;
|
|
39
35
|
autoplay: PropTypes.Requireable<boolean>;
|
|
40
36
|
animationControl: PropTypes.Requireable<string>;
|
|
41
37
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/atom/lottie-wrapper/prop-types.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,oBAAY,oBAAoB,GAAG;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB,CAAC,EAAE;QACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;QAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,
|
|
1
|
+
{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/atom/lottie-wrapper/prop-types.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,oBAAY,oBAAoB,GAAG;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB,CAAC,EAAE;QACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;QAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;CAC1D,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;CAK7B,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAcd,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -18,8 +18,6 @@ const propTypes = {
|
|
|
18
18
|
height: PropTypes.number,
|
|
19
19
|
width: PropTypes.number,
|
|
20
20
|
className: PropTypes.string,
|
|
21
|
-
ie11ImageBackup: PropTypes.string.isRequired,
|
|
22
|
-
backupImageClassName: PropTypes.string,
|
|
23
21
|
autoplay: PropTypes.bool,
|
|
24
22
|
animationControl: PropTypes.oneOf(keys(ANIMATION_CONTROL))
|
|
25
23
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prop-types.js","names":["keys","PropTypes","ANIMATION_CONTROL","play","pause","stop","loading","propTypes","string","animationSrc","isRequired","loop","bool","rendererSettings","shape","hideOnTransparent","className","height","number","width","
|
|
1
|
+
{"version":3,"file":"prop-types.js","names":["keys","PropTypes","ANIMATION_CONTROL","play","pause","stop","loading","propTypes","string","animationSrc","isRequired","loop","bool","rendererSettings","shape","hideOnTransparent","className","height","number","width","autoplay","animationControl","oneOf"],"sources":["../../../src/atom/lottie-wrapper/prop-types.ts"],"sourcesContent":["import keys from 'lodash/fp/keys';\nimport PropTypes from 'prop-types';\n\nexport type LottieAnimationProps = {\n 'aria-label'?: string;\n 'data-name'?: string;\n animationSrc: string;\n loop?: boolean;\n rendererSettings?: {\n hideOnTransparent?: boolean;\n className?: string;\n };\n height?: number;\n width?: number;\n className?: string;\n autoplay?: boolean;\n animationControl?: 'play' | 'pause' | 'stop' | 'loading';\n};\n\nexport const ANIMATION_CONTROL = {\n play: 'play',\n pause: 'pause',\n stop: 'stop',\n loading: 'loading'\n};\n\nconst propTypes = {\n 'aria-label': PropTypes.string,\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 autoplay: PropTypes.bool,\n animationControl: PropTypes.oneOf(keys(ANIMATION_CONTROL))\n};\n\nexport default propTypes;\n"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,gBAAjB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAkBA,OAAO,MAAMC,iBAAiB,GAAG;EAC/BC,IAAI,EAAE,MADyB;EAE/BC,KAAK,EAAE,OAFwB;EAG/BC,IAAI,EAAE,MAHyB;EAI/BC,OAAO,EAAE;AAJsB,CAA1B;AAOP,MAAMC,SAAS,GAAG;EAChB,cAAcN,SAAS,CAACO,MADR;EAEhB,aAAaP,SAAS,CAACO,MAFP;EAGhBC,YAAY,EAAER,SAAS,CAACO,MAAV,CAAiBE,UAHf;EAIhBC,IAAI,EAAEV,SAAS,CAACW,IAJA;EAKhBC,gBAAgB,EAAEZ,SAAS,CAACa,KAAV,CAAgB;IAChCC,iBAAiB,EAAEd,SAAS,CAACW,IADG;IAEhCI,SAAS,EAAEf,SAAS,CAACO;EAFW,CAAhB,CALF;EAShBS,MAAM,EAAEhB,SAAS,CAACiB,MATF;EAUhBC,KAAK,EAAElB,SAAS,CAACiB,MAVD;EAWhBF,SAAS,EAAEf,SAAS,CAACO,MAXL;EAYhBY,QAAQ,EAAEnB,SAAS,CAACW,IAZJ;EAahBS,gBAAgB,EAAEpB,SAAS,CAACqB,KAAV,CAAgBtB,IAAI,CAACE,iBAAD,CAApB;AAbF,CAAlB;AAgBA,eAAeK,SAAf"}
|
|
@@ -17,7 +17,8 @@ const DropDown = props => {
|
|
|
17
17
|
const defaultTheme = !currentSelection || currentSelection.validOption === false ? 'invalid' : 'question';
|
|
18
18
|
const theme = propsTheme || defaultTheme;
|
|
19
19
|
return /*#__PURE__*/React.createElement("div", {
|
|
20
|
-
className: style.wrapper
|
|
20
|
+
className: style.wrapper,
|
|
21
|
+
role: "group"
|
|
21
22
|
}, /*#__PURE__*/React.createElement(Select, {
|
|
22
23
|
"aria-label": ariaLabel,
|
|
23
24
|
theme: theme,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","PropTypes","Select","SelectOptionPropTypes","style","DropDown","props","options","onChange","theme","propsTheme","ariaLabel","currentSelection","defaultTheme","validOption","wrapper","propTypes","arrayOf","shape","string"],"sources":["../../../../src/molecule/questions/drop-down/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {find} from 'lodash/fp';\nimport Select, {SelectOptionPropTypes} from '../../../atom/select';\nimport style from './style.css';\n\nconst DropDown = props => {\n const {options, onChange, theme: propsTheme, 'aria-label': ariaLabel} = props;\n\n const currentSelection = find('selected', options);\n const defaultTheme =\n !currentSelection || currentSelection.validOption === false ? 'invalid' : 'question';\n\n const theme = propsTheme || defaultTheme;\n\n return (\n <div className={style.wrapper}>\n <Select aria-label={ariaLabel} theme={theme} options={options} onChange={onChange} />\n </div>\n );\n};\n\nDropDown.propTypes = {\n onChange: Select.propTypes.onChange,\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),\n theme: Select.propTypes.theme,\n 'aria-label': PropTypes.string\n};\n\nexport default DropDown;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,MAAP,IAAgBC,qBAAhB,QAA4C,sBAA5C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAGC,KAAK,IAAI;EACxB,MAAM;IAACC,OAAD;IAAUC,QAAV;IAAoBC,KAAK,EAAEC,UAA3B;IAAuC,cAAcC;EAArD,IAAkEL,KAAxE;;EAEA,MAAMM,gBAAgB,GAAG,MAAK,UAAL,EAAiBL,OAAjB,CAAzB;;EACA,MAAMM,YAAY,GAChB,CAACD,gBAAD,IAAqBA,gBAAgB,CAACE,WAAjB,KAAiC,KAAtD,GAA8D,SAA9D,GAA0E,UAD5E;EAGA,MAAML,KAAK,GAAGC,UAAU,IAAIG,YAA5B;EAEA,oBACE;IAAK,SAAS,EAAET,KAAK,CAACW;
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","PropTypes","Select","SelectOptionPropTypes","style","DropDown","props","options","onChange","theme","propsTheme","ariaLabel","currentSelection","defaultTheme","validOption","wrapper","propTypes","arrayOf","shape","string"],"sources":["../../../../src/molecule/questions/drop-down/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {find} from 'lodash/fp';\nimport Select, {SelectOptionPropTypes} from '../../../atom/select';\nimport style from './style.css';\n\nconst DropDown = props => {\n const {options, onChange, theme: propsTheme, 'aria-label': ariaLabel} = props;\n\n const currentSelection = find('selected', options);\n const defaultTheme =\n !currentSelection || currentSelection.validOption === false ? 'invalid' : 'question';\n\n const theme = propsTheme || defaultTheme;\n\n return (\n <div className={style.wrapper} role=\"group\">\n <Select aria-label={ariaLabel} theme={theme} options={options} onChange={onChange} />\n </div>\n );\n};\n\nDropDown.propTypes = {\n onChange: Select.propTypes.onChange,\n options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),\n theme: Select.propTypes.theme,\n 'aria-label': PropTypes.string\n};\n\nexport default DropDown;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,MAAP,IAAgBC,qBAAhB,QAA4C,sBAA5C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAGC,KAAK,IAAI;EACxB,MAAM;IAACC,OAAD;IAAUC,QAAV;IAAoBC,KAAK,EAAEC,UAA3B;IAAuC,cAAcC;EAArD,IAAkEL,KAAxE;;EAEA,MAAMM,gBAAgB,GAAG,MAAK,UAAL,EAAiBL,OAAjB,CAAzB;;EACA,MAAMM,YAAY,GAChB,CAACD,gBAAD,IAAqBA,gBAAgB,CAACE,WAAjB,KAAiC,KAAtD,GAA8D,SAA9D,GAA0E,UAD5E;EAGA,MAAML,KAAK,GAAGC,UAAU,IAAIG,YAA5B;EAEA,oBACE;IAAK,SAAS,EAAET,KAAK,CAACW,OAAtB;IAA+B,IAAI,EAAC;EAApC,gBACE,oBAAC,MAAD;IAAQ,cAAYJ,SAApB;IAA+B,KAAK,EAAEF,KAAtC;IAA6C,OAAO,EAAEF,OAAtD;IAA+D,QAAQ,EAAEC;EAAzE,EADF,CADF;AAKD,CAdD;;AAgBAH,QAAQ,CAACW,SAAT,2CAAqB;EACnBR,QAAQ,EAAEN,MAAM,CAACc,SAAP,CAAiBR,QADR;EAEnBD,OAAO,EAAEN,SAAS,CAACgB,OAAV,CAAkBhB,SAAS,CAACiB,KAAV,CAAgBf,qBAAhB,CAAlB,CAFU;EAGnBM,KAAK,EAAEP,MAAM,CAACc,SAAP,CAAiBP,KAHL;EAInB,cAAcR,SAAS,CAACkB;AAJL,CAArB;AAOA,eAAed,QAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/free-text/index.js"],"names":[],"mappings":";AAOA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/free-text/index.js"],"names":[],"mappings":";AAOA,uEAmDC"}
|
|
@@ -32,7 +32,8 @@ const FreeText = (props, legacyContext) => {
|
|
|
32
32
|
onMouseLeave: handleMouseLeave,
|
|
33
33
|
style: _extends({}, value && {
|
|
34
34
|
boxShadow: hovered ? 'none' : `0 4px 16px ${shadowBoxPrimaryColor}`
|
|
35
|
-
})
|
|
35
|
+
}),
|
|
36
|
+
role: "group"
|
|
36
37
|
}, /*#__PURE__*/React.createElement("input", {
|
|
37
38
|
"data-name": "free-text-input",
|
|
38
39
|
type: "text",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","PropTypes","convert","Provider","GetSkinFromContext","style","FreeText","props","legacyContext","skin","placeholder","value","onChange","ariaLabel","hovered","setHovered","handleChange","e","target","primarySkinColor","handleMouseOver","handleMouseLeave","shadowBoxPrimaryColor","wrapper","boxShadow","freeText","color","contextTypes","childContextTypes","propTypes","string","func"],"sources":["../../../../src/molecule/questions/free-text/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, getOr} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport style from './style.css';\n\nconst FreeText = (props, legacyContext) => {\n const skin = GetSkinFromContext(legacyContext);\n const {placeholder = '', value = '', onChange = noop, 'aria-label': ariaLabel} = props;\n const [hovered, setHovered] = useState(false);\n\n const handleChange = useCallback(e => onChange(e.target.value), [onChange]);\n const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n const shadowBoxPrimaryColor = useMemo(\n () => convert(`color(${primarySkinColor} a(12%))`),\n [primarySkinColor]\n );\n\n return (\n <div\n data-name=\"freeText\"\n className={style.wrapper}\n onMouseOver={handleMouseOver}\n onMouseLeave={handleMouseLeave}\n style={{\n ...(value && {\n boxShadow: hovered ? 'none' : `0 4px 16px ${shadowBoxPrimaryColor}`\n })\n }}\n >\n <input\n data-name=\"free-text-input\"\n type=\"text\"\n aria-label={ariaLabel || value || placeholder}\n className={style.freeText}\n placeholder={placeholder}\n value={value}\n onInput={handleChange}\n onChange={noop}\n style={{\n boxShadow: `0 4px 16px ${shadowBoxPrimaryColor}`,\n ...(value && {\n boxShadow: `0 4px 16px ${\n hovered ? convert(`color(${primarySkinColor} a(20%))`) : shadowBoxPrimaryColor\n }`\n }),\n color: primarySkinColor\n }}\n />\n </div>\n );\n};\n\nFreeText.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nFreeText.propTypes = {\n placeholder: PropTypes.string,\n value: PropTypes.string,\n onChange: PropTypes.func,\n 'aria-label': PropTypes.string\n};\n\nexport default FreeText;\n"],"mappings":";;;;;AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,OAA5B,EAAqCC,QAArC,QAAoD,OAApD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SAAQC,OAAR,QAAsB,oBAAtB;AACA,OAAOC,QAAP,IAAkBC,kBAAlB,QAA2C,wBAA3C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;EACzC,MAAMC,IAAI,GAAGL,kBAAkB,CAACI,aAAD,CAA/B;EACA,MAAM;IAACE,WAAW,GAAG,EAAf;IAAmBC,KAAK,GAAG,EAA3B;IAA+BC,QAAQ,QAAvC;IAAgD,cAAcC;EAA9D,IAA2EN,KAAjF;EACA,MAAM,CAACO,OAAD,EAAUC,UAAV,IAAwBf,QAAQ,CAAC,KAAD,CAAtC;EAEA,MAAMgB,YAAY,GAAGlB,WAAW,CAACmB,CAAC,IAAIL,QAAQ,CAACK,CAAC,CAACC,MAAF,CAASP,KAAV,CAAd,EAAgC,CAACC,QAAD,CAAhC,CAAhC;;EACA,MAAMO,gBAAgB,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCV,IAAnC,CAAzB;;EAEA,MAAMW,eAAe,GAAGtB,WAAW,CAAC,MAAMiB,UAAU,CAAC,IAAD,CAAjB,EAAyB,CAACA,UAAD,CAAzB,CAAnC;EAEA,MAAMM,gBAAgB,GAAGvB,WAAW,CAAC,MAAMiB,UAAU,CAAC,KAAD,CAAjB,EAA0B,CAACA,UAAD,CAA1B,CAApC;EAEA,MAAMO,qBAAqB,GAAGvB,OAAO,CACnC,MAAMG,OAAO,CAAE,SAAQiB,gBAAiB,UAA3B,CADsB,EAEnC,CAACA,gBAAD,CAFmC,CAArC;EAKA,oBACE;IACE,aAAU,UADZ;IAEE,SAAS,EAAEd,KAAK,CAACkB,OAFnB;IAGE,WAAW,EAAEH,eAHf;IAIE,YAAY,EAAEC,gBAJhB;IAKE,KAAK,eACCV,KAAK,IAAI;MACXa,SAAS,EAAEV,OAAO,GAAG,MAAH,GAAa,cAAaQ,qBAAsB;IADvD,CADV;
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","PropTypes","convert","Provider","GetSkinFromContext","style","FreeText","props","legacyContext","skin","placeholder","value","onChange","ariaLabel","hovered","setHovered","handleChange","e","target","primarySkinColor","handleMouseOver","handleMouseLeave","shadowBoxPrimaryColor","wrapper","boxShadow","freeText","color","contextTypes","childContextTypes","propTypes","string","func"],"sources":["../../../../src/molecule/questions/free-text/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, getOr} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport style from './style.css';\n\nconst FreeText = (props, legacyContext) => {\n const skin = GetSkinFromContext(legacyContext);\n const {placeholder = '', value = '', onChange = noop, 'aria-label': ariaLabel} = props;\n const [hovered, setHovered] = useState(false);\n\n const handleChange = useCallback(e => onChange(e.target.value), [onChange]);\n const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n const shadowBoxPrimaryColor = useMemo(\n () => convert(`color(${primarySkinColor} a(12%))`),\n [primarySkinColor]\n );\n\n return (\n <div\n data-name=\"freeText\"\n className={style.wrapper}\n onMouseOver={handleMouseOver}\n onMouseLeave={handleMouseLeave}\n style={{\n ...(value && {\n boxShadow: hovered ? 'none' : `0 4px 16px ${shadowBoxPrimaryColor}`\n })\n }}\n role=\"group\"\n >\n <input\n data-name=\"free-text-input\"\n type=\"text\"\n aria-label={ariaLabel || value || placeholder}\n className={style.freeText}\n placeholder={placeholder}\n value={value}\n onInput={handleChange}\n onChange={noop}\n style={{\n boxShadow: `0 4px 16px ${shadowBoxPrimaryColor}`,\n ...(value && {\n boxShadow: `0 4px 16px ${\n hovered ? convert(`color(${primarySkinColor} a(20%))`) : shadowBoxPrimaryColor\n }`\n }),\n color: primarySkinColor\n }}\n />\n </div>\n );\n};\n\nFreeText.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nFreeText.propTypes = {\n placeholder: PropTypes.string,\n value: PropTypes.string,\n onChange: PropTypes.func,\n 'aria-label': PropTypes.string\n};\n\nexport default FreeText;\n"],"mappings":";;;;;AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,OAA5B,EAAqCC,QAArC,QAAoD,OAApD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SAAQC,OAAR,QAAsB,oBAAtB;AACA,OAAOC,QAAP,IAAkBC,kBAAlB,QAA2C,wBAA3C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;EACzC,MAAMC,IAAI,GAAGL,kBAAkB,CAACI,aAAD,CAA/B;EACA,MAAM;IAACE,WAAW,GAAG,EAAf;IAAmBC,KAAK,GAAG,EAA3B;IAA+BC,QAAQ,QAAvC;IAAgD,cAAcC;EAA9D,IAA2EN,KAAjF;EACA,MAAM,CAACO,OAAD,EAAUC,UAAV,IAAwBf,QAAQ,CAAC,KAAD,CAAtC;EAEA,MAAMgB,YAAY,GAAGlB,WAAW,CAACmB,CAAC,IAAIL,QAAQ,CAACK,CAAC,CAACC,MAAF,CAASP,KAAV,CAAd,EAAgC,CAACC,QAAD,CAAhC,CAAhC;;EACA,MAAMO,gBAAgB,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCV,IAAnC,CAAzB;;EAEA,MAAMW,eAAe,GAAGtB,WAAW,CAAC,MAAMiB,UAAU,CAAC,IAAD,CAAjB,EAAyB,CAACA,UAAD,CAAzB,CAAnC;EAEA,MAAMM,gBAAgB,GAAGvB,WAAW,CAAC,MAAMiB,UAAU,CAAC,KAAD,CAAjB,EAA0B,CAACA,UAAD,CAA1B,CAApC;EAEA,MAAMO,qBAAqB,GAAGvB,OAAO,CACnC,MAAMG,OAAO,CAAE,SAAQiB,gBAAiB,UAA3B,CADsB,EAEnC,CAACA,gBAAD,CAFmC,CAArC;EAKA,oBACE;IACE,aAAU,UADZ;IAEE,SAAS,EAAEd,KAAK,CAACkB,OAFnB;IAGE,WAAW,EAAEH,eAHf;IAIE,YAAY,EAAEC,gBAJhB;IAKE,KAAK,eACCV,KAAK,IAAI;MACXa,SAAS,EAAEV,OAAO,GAAG,MAAH,GAAa,cAAaQ,qBAAsB;IADvD,CADV,CALP;IAUE,IAAI,EAAC;EAVP,gBAYE;IACE,aAAU,iBADZ;IAEE,IAAI,EAAC,MAFP;IAGE,cAAYT,SAAS,IAAIF,KAAb,IAAsBD,WAHpC;IAIE,SAAS,EAAEL,KAAK,CAACoB,QAJnB;IAKE,WAAW,EAAEf,WALf;IAME,KAAK,EAAEC,KANT;IAOE,OAAO,EAAEK,YAPX;IAQE,QAAQ,OARV;IASE,KAAK;MACHQ,SAAS,EAAG,cAAaF,qBAAsB;IAD5C,GAECX,KAAK,IAAI;MACXa,SAAS,EAAG,cACVV,OAAO,GAAGZ,OAAO,CAAE,SAAQiB,gBAAiB,UAA3B,CAAV,GAAkDG,qBAC1D;IAHU,CAFV;MAOHI,KAAK,EAAEP;IAPJ;EATP,EAZF,CADF;AAkCD,CAnDD;;AAqDAb,QAAQ,CAACqB,YAAT,GAAwB;EACtBlB,IAAI,EAAEN,QAAQ,CAACyB,iBAAT,CAA2BnB;AADX,CAAxB;AAIAH,QAAQ,CAACuB,SAAT,2CAAqB;EACnBnB,WAAW,EAAET,SAAS,CAAC6B,MADJ;EAEnBnB,KAAK,EAAEV,SAAS,CAAC6B,MAFE;EAGnBlB,QAAQ,EAAEX,SAAS,CAAC8B,IAHD;EAInB,cAAc9B,SAAS,CAAC6B;AAJL,CAArB;AAOA,eAAexB,QAAf"}
|
|
@@ -56,7 +56,8 @@ const QCM = (props, legacyContext) => {
|
|
|
56
56
|
}), [answers, longestAnswer, primarySkinColor]);
|
|
57
57
|
return /*#__PURE__*/React.createElement("div", {
|
|
58
58
|
"data-name": "qcm",
|
|
59
|
-
className: style.wrapper
|
|
59
|
+
className: style.wrapper,
|
|
60
|
+
role: "group"
|
|
60
61
|
}, answersViews);
|
|
61
62
|
};
|
|
62
63
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","classnames","PropTypes","getOr","maxBy","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCM","props","legacyContext","answers","longestAnswer","title","length","skin","primarySkinColor","answersViews","map","answer","key","onClick","selected","ariaLabel","longAnswerClass","selectedAnswerClass","selectedAnswer","unselectedAnswer","innerHTML","boxShadow","backgroundColor","background","answerText","__html","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport maxBy from 'lodash/fp/maxBy';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCM = (props, legacyContext) => {\n const {answers} = props;\n const longestAnswer = maxBy(({title}) => title.length, answers);\n const skin = GetSkinFromContext(legacyContext);\n const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n const answersViews = useMemo(\n () =>\n answers.map((answer, key) => {\n const {onClick, title, selected, 'aria-label': ariaLabel} = answer;\n const longAnswerClass = longestAnswer.title === title ? style.longestAnswer : style.answer;\n const selectedAnswerClass = selected ? style.selectedAnswer : style.unselectedAnswer;\n\n return (\n <div\n data-name=\"answer\"\n aria-label={ariaLabel || title}\n className={classnames(longAnswerClass, style.innerHTML, selectedAnswerClass)}\n onClick={onClick}\n style={{\n ...(selected && {\n boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n })\n }}\n data-selected={selected}\n key={key}\n >\n <div\n data-name=\"answer-background\"\n style={{backgroundColor: selected ? primarySkinColor : '#F4F4F5' /* cm_grey_75 */}}\n className={style.background}\n />\n <span\n data-name=\"answer-label\"\n className={style.answerText}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n </div>\n );\n }),\n [answers, longestAnswer, primarySkinColor]\n );\n\n return (\n <div data-name=\"qcm\" className={style.wrapper}>\n {answersViews}\n </div>\n );\n};\n\nQCM.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nQCM.propTypes = {\n answers: PropTypes.arrayOf(\n PropTypes.shape({\n title: PropTypes.string,\n selected: PropTypes.bool,\n onClick: PropTypes.func,\n 'aria-label': PropTypes.string\n })\n )\n};\n\nexport default QCM;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,QAAP,IAAkBC,kBAAlB,QAA2C,wBAA3C;AACA,SAAQC,4BAAR,QAA2C,iDAA3C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,GAAG,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;EACpC,MAAM;IAACC;EAAD,IAAYF,KAAlB;EACA,MAAMG,aAAa,GAAGT,KAAK,CAAC,CAAC;IAACU;EAAD,CAAD,KAAaA,KAAK,CAACC,MAApB,EAA4BH,OAA5B,CAA3B;EACA,MAAMI,IAAI,GAAGV,kBAAkB,CAACK,aAAD,CAA/B;EACA,MAAMM,gBAAgB,GAAGd,KAAK,CAAC,SAAD,EAAY,gBAAZ,EAA8Ba,IAA9B,CAA9B;EAEA,MAAME,YAAY,GAAGlB,OAAO,CAC1B,MACEY,OAAO,CAACO,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;IAC3B,MAAM;MAACC,OAAD;MAAUR,KAAV;MAAiBS,QAAjB;MAA2B,cAAcC;IAAzC,IAAsDJ,MAA5D;IACA,MAAMK,eAAe,GAAGZ,aAAa,CAACC,KAAd,KAAwBA,KAAxB,GAAgCN,KAAK,CAACK,aAAtC,GAAsDL,KAAK,CAACY,MAApF;IACA,MAAMM,mBAAmB,GAAGH,QAAQ,GAAGf,KAAK,CAACmB,cAAT,GAA0BnB,KAAK,CAACoB,gBAApE;IAEA,oBACE;MACE,aAAU,QADZ;MAEE,cAAYJ,SAAS,IAAIV,KAF3B;MAGE,SAAS,EAAEb,UAAU,CAACwB,eAAD,EAAkBjB,KAAK,CAACqB,SAAxB,EAAmCH,mBAAnC,CAHvB;MAIE,OAAO,EAAEJ,OAJX;MAKE,KAAK,eACCC,QAAQ,IAAI;QACdO,SAAS,EAAG,cAAavB,4BAA4B,CAACU,gBAAD,CAAmB;MAD1D,CADb,CALP;MAUE,iBAAeM,QAVjB;MAWE,GAAG,EAAEF;IAXP,gBAaE;MACE,aAAU,mBADZ;MAEE,KAAK,EAAE;QAACU,eAAe,EAAER,QAAQ,GAAGN,gBAAH,GAAsB;QAAU;;MAA1D,CAFT;MAGE,SAAS,EAAET,KAAK,CAACwB;IAHnB,EAbF,eAkBE;MACE,aAAU,cADZ;MAEE,SAAS,EAAExB,KAAK,CAACyB,UAFnB,CAGE;MAHF;MAIE,uBAAuB,EAAE;QAACC,MAAM,EAAEpB;MAAT;IAJ3B,EAlBF,CADF;EA2BD,CAhCD,CAFwB,EAmC1B,CAACF,OAAD,EAAUC,aAAV,EAAyBI,gBAAzB,CAnC0B,CAA5B;EAsCA,oBACE;IAAK,aAAU,KAAf;IAAqB,SAAS,EAAET,KAAK,CAAC2B;
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useMemo","classnames","PropTypes","getOr","maxBy","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCM","props","legacyContext","answers","longestAnswer","title","length","skin","primarySkinColor","answersViews","map","answer","key","onClick","selected","ariaLabel","longAnswerClass","selectedAnswerClass","selectedAnswer","unselectedAnswer","innerHTML","boxShadow","backgroundColor","background","answerText","__html","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport maxBy from 'lodash/fp/maxBy';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCM = (props, legacyContext) => {\n const {answers} = props;\n const longestAnswer = maxBy(({title}) => title.length, answers);\n const skin = GetSkinFromContext(legacyContext);\n const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n const answersViews = useMemo(\n () =>\n answers.map((answer, key) => {\n const {onClick, title, selected, 'aria-label': ariaLabel} = answer;\n const longAnswerClass = longestAnswer.title === title ? style.longestAnswer : style.answer;\n const selectedAnswerClass = selected ? style.selectedAnswer : style.unselectedAnswer;\n\n return (\n <div\n data-name=\"answer\"\n aria-label={ariaLabel || title}\n className={classnames(longAnswerClass, style.innerHTML, selectedAnswerClass)}\n onClick={onClick}\n style={{\n ...(selected && {\n boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n })\n }}\n data-selected={selected}\n key={key}\n >\n <div\n data-name=\"answer-background\"\n style={{backgroundColor: selected ? primarySkinColor : '#F4F4F5' /* cm_grey_75 */}}\n className={style.background}\n />\n <span\n data-name=\"answer-label\"\n className={style.answerText}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n </div>\n );\n }),\n [answers, longestAnswer, primarySkinColor]\n );\n\n return (\n <div data-name=\"qcm\" className={style.wrapper} role=\"group\">\n {answersViews}\n </div>\n );\n};\n\nQCM.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nQCM.propTypes = {\n answers: PropTypes.arrayOf(\n PropTypes.shape({\n title: PropTypes.string,\n selected: PropTypes.bool,\n onClick: PropTypes.func,\n 'aria-label': PropTypes.string\n })\n )\n};\n\nexport default QCM;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,QAAP,IAAkBC,kBAAlB,QAA2C,wBAA3C;AACA,SAAQC,4BAAR,QAA2C,iDAA3C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,GAAG,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;EACpC,MAAM;IAACC;EAAD,IAAYF,KAAlB;EACA,MAAMG,aAAa,GAAGT,KAAK,CAAC,CAAC;IAACU;EAAD,CAAD,KAAaA,KAAK,CAACC,MAApB,EAA4BH,OAA5B,CAA3B;EACA,MAAMI,IAAI,GAAGV,kBAAkB,CAACK,aAAD,CAA/B;EACA,MAAMM,gBAAgB,GAAGd,KAAK,CAAC,SAAD,EAAY,gBAAZ,EAA8Ba,IAA9B,CAA9B;EAEA,MAAME,YAAY,GAAGlB,OAAO,CAC1B,MACEY,OAAO,CAACO,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;IAC3B,MAAM;MAACC,OAAD;MAAUR,KAAV;MAAiBS,QAAjB;MAA2B,cAAcC;IAAzC,IAAsDJ,MAA5D;IACA,MAAMK,eAAe,GAAGZ,aAAa,CAACC,KAAd,KAAwBA,KAAxB,GAAgCN,KAAK,CAACK,aAAtC,GAAsDL,KAAK,CAACY,MAApF;IACA,MAAMM,mBAAmB,GAAGH,QAAQ,GAAGf,KAAK,CAACmB,cAAT,GAA0BnB,KAAK,CAACoB,gBAApE;IAEA,oBACE;MACE,aAAU,QADZ;MAEE,cAAYJ,SAAS,IAAIV,KAF3B;MAGE,SAAS,EAAEb,UAAU,CAACwB,eAAD,EAAkBjB,KAAK,CAACqB,SAAxB,EAAmCH,mBAAnC,CAHvB;MAIE,OAAO,EAAEJ,OAJX;MAKE,KAAK,eACCC,QAAQ,IAAI;QACdO,SAAS,EAAG,cAAavB,4BAA4B,CAACU,gBAAD,CAAmB;MAD1D,CADb,CALP;MAUE,iBAAeM,QAVjB;MAWE,GAAG,EAAEF;IAXP,gBAaE;MACE,aAAU,mBADZ;MAEE,KAAK,EAAE;QAACU,eAAe,EAAER,QAAQ,GAAGN,gBAAH,GAAsB;QAAU;;MAA1D,CAFT;MAGE,SAAS,EAAET,KAAK,CAACwB;IAHnB,EAbF,eAkBE;MACE,aAAU,cADZ;MAEE,SAAS,EAAExB,KAAK,CAACyB,UAFnB,CAGE;MAHF;MAIE,uBAAuB,EAAE;QAACC,MAAM,EAAEpB;MAAT;IAJ3B,EAlBF,CADF;EA2BD,CAhCD,CAFwB,EAmC1B,CAACF,OAAD,EAAUC,aAAV,EAAyBI,gBAAzB,CAnC0B,CAA5B;EAsCA,oBACE;IAAK,aAAU,KAAf;IAAqB,SAAS,EAAET,KAAK,CAAC2B,OAAtC;IAA+C,IAAI,EAAC;EAApD,GACGjB,YADH,CADF;AAKD,CAjDD;;AAmDAT,GAAG,CAAC2B,YAAJ,GAAmB;EACjBpB,IAAI,EAAEX,QAAQ,CAACgC,iBAAT,CAA2BrB;AADhB,CAAnB;AAIAP,GAAG,CAAC6B,SAAJ,2CAAgB;EACd1B,OAAO,EAAEV,SAAS,CAACqC,OAAV,CACPrC,SAAS,CAACsC,KAAV,CAAgB;IACd1B,KAAK,EAAEZ,SAAS,CAACuC,MADH;IAEdlB,QAAQ,EAAErB,SAAS,CAACwC,IAFN;IAGdpB,OAAO,EAAEpB,SAAS,CAACyC,IAHL;IAId,cAAczC,SAAS,CAACuC;EAJV,CAAhB,CADO;AADK,CAAhB;AAWA,eAAehC,GAAf"}
|
|
@@ -123,7 +123,8 @@ const QcmDrag = ({
|
|
|
123
123
|
const primarySkinColor = _getOr('#00B0FF', 'common.primary', skin);
|
|
124
124
|
|
|
125
125
|
return /*#__PURE__*/React.createElement("div", {
|
|
126
|
-
className: style.wrapper
|
|
126
|
+
className: style.wrapper,
|
|
127
|
+
role: "group"
|
|
127
128
|
}, /*#__PURE__*/React.createElement(SelectedAnswerSections, {
|
|
128
129
|
answers: answers,
|
|
129
130
|
help: help,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","AnswersPropTypes","arrayOf","shape","onClick","func","order","number","selected","bool","title","string","help","EmptyView","emptySpan","propTypes","Choices","answers","answersViews","map","answer","key","invisibleAnswer","unselected","innerHTML","__html","choices","SelectedAnswerSections","backgroundColor","selectedAnswers","selectedAnswersViews","boxShadow","background","content","selectedAnswerText","length","emptyAnswers","QcmDrag","legacyContext","skin","primarySkinColor","wrapper","contextTypes","childContextTypes"],"sources":["../../../../src/molecule/questions/qcm-drag/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {pipe, filter, orderBy, getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst AnswersPropTypes = PropTypes.arrayOf(\n PropTypes.shape({\n onClick: PropTypes.func,\n order: PropTypes.number,\n selected: PropTypes.bool,\n title: PropTypes.string,\n help: PropTypes.string\n })\n);\n\nconst EmptyView = ({help}) => <span className={style.emptySpan}>{help}</span>;\n\nEmptyView.propTypes = {\n help: PropTypes.string\n};\n\nconst Choices = ({answers}) => {\n const answersViews = answers.map((answer, key) => {\n const {onClick, title, selected} = answer;\n return (\n <div\n className={classnames(selected ? style.invisibleAnswer : style.unselected, style.innerHTML)}\n data-name=\"answer\"\n onClick={onClick}\n key={key}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n );\n });\n\n return <div className={style.choices}>{answersViews}</div>;\n};\n\nChoices.propTypes = {\n answers: AnswersPropTypes\n};\n\nconst SelectedAnswerSections = ({answers, help, backgroundColor}) => {\n const selectedAnswers = pipe(filter('selected'), orderBy('order', 'asc'))(answers);\n const selectedAnswersViews = selectedAnswers.map((answer, key) => {\n const {onClick, title} = answer;\n return (\n <div\n data-selected=\"true\"\n onClick={onClick}\n key={key}\n data-name=\"selectedAnswer\"\n className={style.selected}\n style={{\n boxShadow: `0px 4px 16px ${getShadowBoxColorFromPrimary(backgroundColor)}`\n }}\n >\n <div\n data-name=\"answerBackground\"\n style={{\n backgroundColor\n }}\n className={style.background}\n />\n <div className={style.content}>\n <span\n data-name=\"answerContent\"\n className={classnames(style.selectedAnswerText, style.innerHTML)}\n title={title}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n </div>\n </div>\n );\n });\n\n if (selectedAnswersViews.length > 0) {\n return <div className={style.selectedAnswers}>{selectedAnswersViews}</div>;\n } else {\n return (\n <div className={style.emptyAnswers}>\n <EmptyView help={help} />\n </div>\n );\n }\n};\n\nSelectedAnswerSections.propTypes = {\n answers: AnswersPropTypes,\n help: EmptyView.propTypes.help,\n backgroundColor: PropTypes.string\n};\n\nconst QcmDrag = ({answers, help}, legacyContext) => {\n const skin = GetSkinFromContext(legacyContext);\n const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n return (\n <div className={style.wrapper}>\n <SelectedAnswerSections answers={answers} help={help} backgroundColor={primarySkinColor} />\n <div data-name=\"qcm-drag-answers\" className={style.answers}>\n <Choices answers={answers} />\n </div>\n </div>\n );\n};\n\nQcmDrag.propTypes = {\n answers: AnswersPropTypes,\n help: SelectedAnswerSections.propTypes.help\n};\n\nQcmDrag.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nexport default QcmDrag;\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","AnswersPropTypes","arrayOf","shape","onClick","func","order","number","selected","bool","title","string","help","EmptyView","emptySpan","propTypes","Choices","answers","answersViews","map","answer","key","invisibleAnswer","unselected","innerHTML","__html","choices","SelectedAnswerSections","backgroundColor","selectedAnswers","selectedAnswersViews","boxShadow","background","content","selectedAnswerText","length","emptyAnswers","QcmDrag","legacyContext","skin","primarySkinColor","wrapper","contextTypes","childContextTypes"],"sources":["../../../../src/molecule/questions/qcm-drag/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {pipe, filter, orderBy, getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst AnswersPropTypes = PropTypes.arrayOf(\n PropTypes.shape({\n onClick: PropTypes.func,\n order: PropTypes.number,\n selected: PropTypes.bool,\n title: PropTypes.string,\n help: PropTypes.string\n })\n);\n\nconst EmptyView = ({help}) => <span className={style.emptySpan}>{help}</span>;\n\nEmptyView.propTypes = {\n help: PropTypes.string\n};\n\nconst Choices = ({answers}) => {\n const answersViews = answers.map((answer, key) => {\n const {onClick, title, selected} = answer;\n return (\n <div\n className={classnames(selected ? style.invisibleAnswer : style.unselected, style.innerHTML)}\n data-name=\"answer\"\n onClick={onClick}\n key={key}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n );\n });\n\n return <div className={style.choices}>{answersViews}</div>;\n};\n\nChoices.propTypes = {\n answers: AnswersPropTypes\n};\n\nconst SelectedAnswerSections = ({answers, help, backgroundColor}) => {\n const selectedAnswers = pipe(filter('selected'), orderBy('order', 'asc'))(answers);\n const selectedAnswersViews = selectedAnswers.map((answer, key) => {\n const {onClick, title} = answer;\n return (\n <div\n data-selected=\"true\"\n onClick={onClick}\n key={key}\n data-name=\"selectedAnswer\"\n className={style.selected}\n style={{\n boxShadow: `0px 4px 16px ${getShadowBoxColorFromPrimary(backgroundColor)}`\n }}\n >\n <div\n data-name=\"answerBackground\"\n style={{\n backgroundColor\n }}\n className={style.background}\n />\n <div className={style.content}>\n <span\n data-name=\"answerContent\"\n className={classnames(style.selectedAnswerText, style.innerHTML)}\n title={title}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n </div>\n </div>\n );\n });\n\n if (selectedAnswersViews.length > 0) {\n return <div className={style.selectedAnswers}>{selectedAnswersViews}</div>;\n } else {\n return (\n <div className={style.emptyAnswers}>\n <EmptyView help={help} />\n </div>\n );\n }\n};\n\nSelectedAnswerSections.propTypes = {\n answers: AnswersPropTypes,\n help: EmptyView.propTypes.help,\n backgroundColor: PropTypes.string\n};\n\nconst QcmDrag = ({answers, help}, legacyContext) => {\n const skin = GetSkinFromContext(legacyContext);\n const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n return (\n <div className={style.wrapper} role=\"group\">\n <SelectedAnswerSections answers={answers} help={help} backgroundColor={primarySkinColor} />\n <div data-name=\"qcm-drag-answers\" className={style.answers}>\n <Choices answers={answers} />\n </div>\n </div>\n );\n};\n\nQcmDrag.propTypes = {\n answers: AnswersPropTypes,\n help: SelectedAnswerSections.propTypes.help\n};\n\nQcmDrag.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nexport default QcmDrag;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCMImage","props","legacyContext","answers","skin","primarySkinColor","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","boxShadow","backgroundColor","background","content","imageWrapper","backgroundImage","titleWrapper","innerHTML","__html","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCMImage = (props, legacyContext) => {\n const {answers} = props;\n const skin = GetSkinFromContext(legacyContext);\n const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n const answersViews = answers.map((answer, key) => {\n const {onClick, title, selected, image, ariaLabel} = answer;\n\n return (\n <div\n onClick={onClick}\n data-selected={selected}\n data-name=\"answerGraphic\"\n style={{\n ...(selected && {\n boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n })\n }}\n className={selected ? style.selected : style.answer}\n key={key}\n >\n <div\n data-name=\"answerBackground\"\n style={{\n backgroundColor: selected ? primarySkinColor : '#F4F4F5'\n }}\n className={style.background}\n />\n <div data-name=\"answerContent\" className={style.content}>\n <div\n className={style.imageWrapper}\n data-name=\"answerImage\"\n aria-label={ariaLabel || title}\n style={{\n backgroundImage: `url(${image})`\n }}\n />\n <div data-name=\"answerText\" className={style.titleWrapper}>\n <div\n title={title}\n className={classnames(style.title, style.innerHTML)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n </div>\n </div>\n </div>\n );\n });\n\n return (\n <div data-name=\"qcm-graphic-wrapper\" className={style.wrapper}>\n {answersViews}\n </div>\n );\n};\n\nQCMImage.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nQCMImage.propTypes = {\n answers: PropTypes.arrayOf(\n PropTypes.shape({\n title: PropTypes.string,\n selected: PropTypes.bool,\n onClick: PropTypes.func,\n image: PropTypes.string,\n ariaLabel: PropTypes.string\n })\n )\n};\n\nexport default QCMImage;\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,QAAP,IAAkBC,kBAAlB,QAA2C,wBAA3C;AACA,SAAQC,4BAAR,QAA2C,iDAA3C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;EACzC,MAAM;IAACC;EAAD,IAAYF,KAAlB;EACA,MAAMG,IAAI,GAAGP,kBAAkB,CAACK,aAAD,CAA/B;;EACA,MAAMG,gBAAgB,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAAzB;;EAEA,MAAME,YAAY,GAAGH,OAAO,CAACI,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;IAChD,MAAM;MAACC,OAAD;MAAUC,KAAV;MAAiBC,QAAjB;MAA2BC,KAA3B;MAAkCC;IAAlC,IAA+CN,MAArD;IAEA,oBACE;MACE,OAAO,EAAEE,OADX;MAEE,iBAAeE,QAFjB;MAGE,aAAU,eAHZ;MAIE,KAAK,eACCA,QAAQ,IAAI;QACdG,SAAS,EAAG,cAAajB,4BAA4B,CAACO,gBAAD,CAAmB;MAD1D,CADb,CAJP;MASE,SAAS,EAAEO,QAAQ,GAAGb,KAAK,CAACa,QAAT,GAAoBb,KAAK,CAACS,MAT/C;MAUE,GAAG,EAAEC;IAVP,gBAYE;MACE,aAAU,kBADZ;MAEE,KAAK,EAAE;QACLO,eAAe,EAAEJ,QAAQ,GAAGP,gBAAH,GAAsB;MAD1C,CAFT;MAKE,SAAS,EAAEN,KAAK,CAACkB;IALnB,EAZF,eAmBE;MAAK,aAAU,eAAf;MAA+B,SAAS,EAAElB,KAAK,CAACmB;IAAhD,gBACE;MACE,SAAS,EAAEnB,KAAK,CAACoB,YADnB;MAEE,aAAU,aAFZ;MAGE,cAAYL,SAAS,IAAIH,KAH3B;MAIE,KAAK,EAAE;QACLS,eAAe,EAAG,OAAMP,KAAM;MADzB;IAJT,EADF,eASE;MAAK,aAAU,YAAf;MAA4B,SAAS,EAAEd,KAAK,CAACsB;IAA7C,gBACE;MACE,KAAK,EAAEV,KADT;MAEE,SAAS,EAAEhB,UAAU,CAACI,KAAK,CAACY,KAAP,EAAcZ,KAAK,CAACuB,SAApB,CAFvB,CAGE;MAHF;MAIE,uBAAuB,EAAE;QAACC,MAAM,EAAEZ;MAAT;IAJ3B,EADF,CATF,CAnBF,CADF;EAwCD,CA3CoB,CAArB;EA6CA,oBACE;IAAK,aAAU,qBAAf;IAAqC,SAAS,EAAEZ,KAAK,CAACyB;
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCMImage","props","legacyContext","answers","skin","primarySkinColor","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","boxShadow","backgroundColor","background","content","imageWrapper","backgroundImage","titleWrapper","innerHTML","__html","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCMImage = (props, legacyContext) => {\n const {answers} = props;\n const skin = GetSkinFromContext(legacyContext);\n const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n const answersViews = answers.map((answer, key) => {\n const {onClick, title, selected, image, ariaLabel} = answer;\n\n return (\n <div\n onClick={onClick}\n data-selected={selected}\n data-name=\"answerGraphic\"\n style={{\n ...(selected && {\n boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n })\n }}\n className={selected ? style.selected : style.answer}\n key={key}\n >\n <div\n data-name=\"answerBackground\"\n style={{\n backgroundColor: selected ? primarySkinColor : '#F4F4F5'\n }}\n className={style.background}\n />\n <div data-name=\"answerContent\" className={style.content}>\n <div\n className={style.imageWrapper}\n data-name=\"answerImage\"\n aria-label={ariaLabel || title}\n style={{\n backgroundImage: `url(${image})`\n }}\n />\n <div data-name=\"answerText\" className={style.titleWrapper}>\n <div\n title={title}\n className={classnames(style.title, style.innerHTML)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n </div>\n </div>\n </div>\n );\n });\n\n return (\n <div data-name=\"qcm-graphic-wrapper\" className={style.wrapper} role=\"group\">\n {answersViews}\n </div>\n );\n};\n\nQCMImage.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nQCMImage.propTypes = {\n answers: PropTypes.arrayOf(\n PropTypes.shape({\n title: PropTypes.string,\n selected: PropTypes.bool,\n onClick: PropTypes.func,\n image: PropTypes.string,\n ariaLabel: PropTypes.string\n })\n )\n};\n\nexport default QCMImage;\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,QAAP,IAAkBC,kBAAlB,QAA2C,wBAA3C;AACA,SAAQC,4BAAR,QAA2C,iDAA3C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;EACzC,MAAM;IAACC;EAAD,IAAYF,KAAlB;EACA,MAAMG,IAAI,GAAGP,kBAAkB,CAACK,aAAD,CAA/B;;EACA,MAAMG,gBAAgB,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAAzB;;EAEA,MAAME,YAAY,GAAGH,OAAO,CAACI,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;IAChD,MAAM;MAACC,OAAD;MAAUC,KAAV;MAAiBC,QAAjB;MAA2BC,KAA3B;MAAkCC;IAAlC,IAA+CN,MAArD;IAEA,oBACE;MACE,OAAO,EAAEE,OADX;MAEE,iBAAeE,QAFjB;MAGE,aAAU,eAHZ;MAIE,KAAK,eACCA,QAAQ,IAAI;QACdG,SAAS,EAAG,cAAajB,4BAA4B,CAACO,gBAAD,CAAmB;MAD1D,CADb,CAJP;MASE,SAAS,EAAEO,QAAQ,GAAGb,KAAK,CAACa,QAAT,GAAoBb,KAAK,CAACS,MAT/C;MAUE,GAAG,EAAEC;IAVP,gBAYE;MACE,aAAU,kBADZ;MAEE,KAAK,EAAE;QACLO,eAAe,EAAEJ,QAAQ,GAAGP,gBAAH,GAAsB;MAD1C,CAFT;MAKE,SAAS,EAAEN,KAAK,CAACkB;IALnB,EAZF,eAmBE;MAAK,aAAU,eAAf;MAA+B,SAAS,EAAElB,KAAK,CAACmB;IAAhD,gBACE;MACE,SAAS,EAAEnB,KAAK,CAACoB,YADnB;MAEE,aAAU,aAFZ;MAGE,cAAYL,SAAS,IAAIH,KAH3B;MAIE,KAAK,EAAE;QACLS,eAAe,EAAG,OAAMP,KAAM;MADzB;IAJT,EADF,eASE;MAAK,aAAU,YAAf;MAA4B,SAAS,EAAEd,KAAK,CAACsB;IAA7C,gBACE;MACE,KAAK,EAAEV,KADT;MAEE,SAAS,EAAEhB,UAAU,CAACI,KAAK,CAACY,KAAP,EAAcZ,KAAK,CAACuB,SAApB,CAFvB,CAGE;MAHF;MAIE,uBAAuB,EAAE;QAACC,MAAM,EAAEZ;MAAT;IAJ3B,EADF,CATF,CAnBF,CADF;EAwCD,CA3CoB,CAArB;EA6CA,oBACE;IAAK,aAAU,qBAAf;IAAqC,SAAS,EAAEZ,KAAK,CAACyB,OAAtD;IAA+D,IAAI,EAAC;EAApE,GACGlB,YADH,CADF;AAKD,CAvDD;;AAyDAN,QAAQ,CAACyB,YAAT,GAAwB;EACtBrB,IAAI,EAAER,QAAQ,CAAC8B,iBAAT,CAA2BtB;AADX,CAAxB;AAIAJ,QAAQ,CAAC2B,SAAT,2CAAqB;EACnBxB,OAAO,EAAET,SAAS,CAACkC,OAAV,CACPlC,SAAS,CAACmC,KAAV,CAAgB;IACdlB,KAAK,EAAEjB,SAAS,CAACoC,MADH;IAEdlB,QAAQ,EAAElB,SAAS,CAACqC,IAFN;IAGdrB,OAAO,EAAEhB,SAAS,CAACsC,IAHL;IAIdnB,KAAK,EAAEnB,SAAS,CAACoC,MAJH;IAKdhB,SAAS,EAAEpB,SAAS,CAACoC;EALP,CAAhB,CADO;AADU,CAArB;AAYA,eAAe9B,QAAf"}
|
|
@@ -28,7 +28,8 @@ const QuestionRange = (props, legacyContext) => {
|
|
|
28
28
|
color: defaultColor
|
|
29
29
|
};
|
|
30
30
|
return /*#__PURE__*/React.createElement("div", {
|
|
31
|
-
className: style.wrapper
|
|
31
|
+
className: style.wrapper,
|
|
32
|
+
role: "group"
|
|
32
33
|
}, /*#__PURE__*/React.createElement("span", {
|
|
33
34
|
style: titleStyle,
|
|
34
35
|
className: classnames(style.title, style.innerHTML) // eslint-disable-next-line react/no-danger
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","Range","style","QuestionRange","props","legacyContext","title","minLabel","maxLabel","rangeProps","skin","defaultColor","titleStyle","color","wrapper","innerHTML","__html","labelWrapper","label","contextTypes","childContextTypes","propTypes","string"],"sources":["../../../../src/molecule/questions/question-range/index.js"],"sourcesContent":["import React from 'react';\nimport {getOr} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport Range from '../../../atom/range';\nimport style from './style.css';\n\nconst QuestionRange = (props, legacyContext) => {\n const {title, minLabel, maxLabel, ...rangeProps} = props;\n\n const skin = GetSkinFromContext(legacyContext);\n const defaultColor = getOr('#00B0FF', 'common.primary', skin);\n\n const titleStyle = {\n color: defaultColor\n };\n\n return (\n <div className={style.wrapper}>\n <span\n style={titleStyle}\n className={classnames(style.title, style.innerHTML)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n <Range {...rangeProps} />\n <div className={style.labelWrapper}>\n <span\n className={classnames(style.label, style.innerHTML)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: minLabel}}\n />\n <span\n className={classnames(style.label, style.innerHTML)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: maxLabel}}\n />\n </div>\n </div>\n );\n};\n\nQuestionRange.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nQuestionRange.propTypes = {\n ...Range.propTypes,\n title: PropTypes.string,\n minLabel: PropTypes.string,\n maxLabel: PropTypes.string\n};\n\nexport default QuestionRange;\n"],"mappings":";;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,QAAP,IAAkBC,kBAAlB,QAA2C,wBAA3C;AACA,OAAOC,KAAP,MAAkB,qBAAlB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,aAAa,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;EAC9C,MAAM;IAACC,KAAD;IAAQC,QAAR;IAAkBC;EAAlB,IAA6CJ,KAAnD;EAAA,MAAqCK,UAArC,iCAAmDL,KAAnD;;EAEA,MAAMM,IAAI,GAAGV,kBAAkB,CAACK,aAAD,CAA/B;;EACA,MAAMM,YAAY,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;;EAEA,MAAME,UAAU,GAAG;IACjBC,KAAK,EAAEF;EADU,CAAnB;EAIA,oBACE;IAAK,SAAS,EAAET,KAAK,CAACY;
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","Range","style","QuestionRange","props","legacyContext","title","minLabel","maxLabel","rangeProps","skin","defaultColor","titleStyle","color","wrapper","innerHTML","__html","labelWrapper","label","contextTypes","childContextTypes","propTypes","string"],"sources":["../../../../src/molecule/questions/question-range/index.js"],"sourcesContent":["import React from 'react';\nimport {getOr} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport Range from '../../../atom/range';\nimport style from './style.css';\n\nconst QuestionRange = (props, legacyContext) => {\n const {title, minLabel, maxLabel, ...rangeProps} = props;\n\n const skin = GetSkinFromContext(legacyContext);\n const defaultColor = getOr('#00B0FF', 'common.primary', skin);\n\n const titleStyle = {\n color: defaultColor\n };\n\n return (\n <div className={style.wrapper} role=\"group\">\n <span\n style={titleStyle}\n className={classnames(style.title, style.innerHTML)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n <Range {...rangeProps} />\n <div className={style.labelWrapper}>\n <span\n className={classnames(style.label, style.innerHTML)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: minLabel}}\n />\n <span\n className={classnames(style.label, style.innerHTML)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: maxLabel}}\n />\n </div>\n </div>\n );\n};\n\nQuestionRange.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nQuestionRange.propTypes = {\n ...Range.propTypes,\n title: PropTypes.string,\n minLabel: PropTypes.string,\n maxLabel: PropTypes.string\n};\n\nexport default QuestionRange;\n"],"mappings":";;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,QAAP,IAAkBC,kBAAlB,QAA2C,wBAA3C;AACA,OAAOC,KAAP,MAAkB,qBAAlB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,aAAa,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;EAC9C,MAAM;IAACC,KAAD;IAAQC,QAAR;IAAkBC;EAAlB,IAA6CJ,KAAnD;EAAA,MAAqCK,UAArC,iCAAmDL,KAAnD;;EAEA,MAAMM,IAAI,GAAGV,kBAAkB,CAACK,aAAD,CAA/B;;EACA,MAAMM,YAAY,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;;EAEA,MAAME,UAAU,GAAG;IACjBC,KAAK,EAAEF;EADU,CAAnB;EAIA,oBACE;IAAK,SAAS,EAAET,KAAK,CAACY,OAAtB;IAA+B,IAAI,EAAC;EAApC,gBACE;IACE,KAAK,EAAEF,UADT;IAEE,SAAS,EAAEd,UAAU,CAACI,KAAK,CAACI,KAAP,EAAcJ,KAAK,CAACa,SAApB,CAFvB,CAGE;IAHF;IAIE,uBAAuB,EAAE;MAACC,MAAM,EAAEV;IAAT;EAJ3B,EADF,eAOE,oBAAC,KAAD,EAAWG,UAAX,CAPF,eAQE;IAAK,SAAS,EAAEP,KAAK,CAACe;EAAtB,gBACE;IACE,SAAS,EAAEnB,UAAU,CAACI,KAAK,CAACgB,KAAP,EAAchB,KAAK,CAACa,SAApB,CADvB,CAEE;IAFF;IAGE,uBAAuB,EAAE;MAACC,MAAM,EAAET;IAAT;EAH3B,EADF,eAME;IACE,SAAS,EAAET,UAAU,CAACI,KAAK,CAACgB,KAAP,EAAchB,KAAK,CAACa,SAApB,CADvB,CAEE;IAFF;IAGE,uBAAuB,EAAE;MAACC,MAAM,EAAER;IAAT;EAH3B,EANF,CARF,CADF;AAuBD,CAjCD;;AAmCAL,aAAa,CAACgB,YAAd,GAA6B;EAC3BT,IAAI,EAAEX,QAAQ,CAACqB,iBAAT,CAA2BV;AADN,CAA7B;AAIAP,aAAa,CAACkB,SAAd,wDACKpB,KAAK,CAACoB,SADX;EAEEf,KAAK,EAAET,SAAS,CAACyB,MAFnB;EAGEf,QAAQ,EAAEV,SAAS,CAACyB,MAHtB;EAIEd,QAAQ,EAAEX,SAAS,CAACyB;AAJtB;AAOA,eAAenB,aAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","PropTypes","parseTemplateString","DropDown","FreeText","style","Template","template","answers","totalTemplate","templateCompose","convert","cap","part","key","type","textPart","__html","value","field","name","fieldType","fieldProps","fieldView","text","answerType","wrapper","TextPropTypes","propTypes","string","arrayOf","oneOfType","shape"],"sources":["../../../../src/molecule/questions/template/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map, find} from 'lodash/fp';\nimport parseTemplateString from '../../../util/parse-template-string';\nimport DropDown from '../drop-down';\nimport FreeText from '../free-text';\nimport style from './style.css';\n\nconst Template = ({template, answers}) => {\n const totalTemplate = parseTemplateString(template);\n const templateCompose = map.convert({cap: false})((part, key) => {\n const type = part.type;\n if (type === 'string') {\n return (\n <span\n key={key}\n className={style.textPart}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: part.value}}\n />\n );\n }\n if (type === 'answerField') {\n const field = find({name: part.value}, answers);\n if (!field) return null;\n const {type: fieldType, ...fieldProps} = field;\n const fieldView =\n fieldType === 'text' ? (\n <FreeText {...fieldProps} className={style.text} />\n ) : (\n <DropDown {...fieldProps} theme=\"player\" />\n );\n\n return (\n <div className={style.answerType} key={part.value}>\n {fieldView}\n </div>\n );\n }\n }, totalTemplate);\n\n return (\n <div data-name=\"template-wrapper\" className={style.wrapper}>\n {templateCompose}\n </div>\n );\n};\n\nconst TextPropTypes = {\n ...DropDown.propTypes,\n type: PropTypes.string\n};\n\nTemplate.propTypes = {\n template: PropTypes.string,\n answers: PropTypes.arrayOf(\n PropTypes.oneOfType([PropTypes.shape(DropDown.propTypes), PropTypes.shape(TextPropTypes)])\n )\n};\n\nexport default Template;\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,mBAAP,MAAgC,qCAAhC;AACA,OAAOC,QAAP,MAAqB,cAArB;AACA,OAAOC,QAAP,MAAqB,cAArB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAG,CAAC;EAACC,QAAD;EAAWC;AAAX,CAAD,KAAyB;EACxC,MAAMC,aAAa,GAAGP,mBAAmB,CAACK,QAAD,CAAzC;;EACA,MAAMG,eAAe,GAAG,KAAIC,OAAJ,CAAY;IAACC,GAAG,EAAE;EAAN,CAAZ,EAA0B,CAACC,IAAD,EAAOC,GAAP,KAAe;IAC/D,MAAMC,IAAI,GAAGF,IAAI,CAACE,IAAlB;;IACA,IAAIA,IAAI,KAAK,QAAb,EAAuB;MACrB,oBACE;QACE,GAAG,EAAED,GADP;QAEE,SAAS,EAAET,KAAK,CAACW,QAFnB,CAGE;QAHF;QAIE,uBAAuB,EAAE;UAACC,MAAM,EAAEJ,IAAI,CAACK;QAAd;MAJ3B,EADF;IAQD;;IACD,IAAIH,IAAI,KAAK,aAAb,EAA4B;MAC1B,MAAMI,KAAK,GAAG,MAAK;QAACC,IAAI,EAAEP,IAAI,CAACK;MAAZ,CAAL,EAAyBV,OAAzB,CAAd;;MACA,IAAI,CAACW,KAAL,EAAY,OAAO,IAAP;;MACZ,MAAM;QAACJ,IAAI,EAAEM;MAAP,IAAmCF,KAAzC;MAAA,MAA2BG,UAA3B,iCAAyCH,KAAzC;;MACA,MAAMI,SAAS,GACbF,SAAS,KAAK,MAAd,gBACE,oBAAC,QAAD,eAAcC,UAAd;QAA0B,SAAS,EAAEjB,KAAK,CAACmB;MAA3C,GADF,gBAGE,oBAAC,QAAD,eAAcF,UAAd;QAA0B,KAAK,EAAC;MAAhC,GAJJ;MAOA,oBACE;QAAK,SAAS,EAAEjB,KAAK,CAACoB,UAAtB;QAAkC,GAAG,EAAEZ,IAAI,CAACK;MAA5C,GACGK,SADH,CADF;IAKD;EACF,CA7BuB,EA6BrBd,aA7BqB,CAAxB;;EA+BA,oBACE;IAAK,aAAU,kBAAf;IAAkC,SAAS,EAAEJ,KAAK,CAACqB;
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","PropTypes","parseTemplateString","DropDown","FreeText","style","Template","template","answers","totalTemplate","templateCompose","convert","cap","part","key","type","textPart","__html","value","field","name","fieldType","fieldProps","fieldView","text","answerType","wrapper","TextPropTypes","propTypes","string","arrayOf","oneOfType","shape"],"sources":["../../../../src/molecule/questions/template/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map, find} from 'lodash/fp';\nimport parseTemplateString from '../../../util/parse-template-string';\nimport DropDown from '../drop-down';\nimport FreeText from '../free-text';\nimport style from './style.css';\n\nconst Template = ({template, answers}) => {\n const totalTemplate = parseTemplateString(template);\n const templateCompose = map.convert({cap: false})((part, key) => {\n const type = part.type;\n if (type === 'string') {\n return (\n <span\n key={key}\n className={style.textPart}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: part.value}}\n />\n );\n }\n if (type === 'answerField') {\n const field = find({name: part.value}, answers);\n if (!field) return null;\n const {type: fieldType, ...fieldProps} = field;\n const fieldView =\n fieldType === 'text' ? (\n <FreeText {...fieldProps} className={style.text} />\n ) : (\n <DropDown {...fieldProps} theme=\"player\" />\n );\n\n return (\n <div className={style.answerType} key={part.value}>\n {fieldView}\n </div>\n );\n }\n }, totalTemplate);\n\n return (\n <div data-name=\"template-wrapper\" className={style.wrapper} role=\"group\">\n {templateCompose}\n </div>\n );\n};\n\nconst TextPropTypes = {\n ...DropDown.propTypes,\n type: PropTypes.string\n};\n\nTemplate.propTypes = {\n template: PropTypes.string,\n answers: PropTypes.arrayOf(\n PropTypes.oneOfType([PropTypes.shape(DropDown.propTypes), PropTypes.shape(TextPropTypes)])\n )\n};\n\nexport default Template;\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,mBAAP,MAAgC,qCAAhC;AACA,OAAOC,QAAP,MAAqB,cAArB;AACA,OAAOC,QAAP,MAAqB,cAArB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAG,CAAC;EAACC,QAAD;EAAWC;AAAX,CAAD,KAAyB;EACxC,MAAMC,aAAa,GAAGP,mBAAmB,CAACK,QAAD,CAAzC;;EACA,MAAMG,eAAe,GAAG,KAAIC,OAAJ,CAAY;IAACC,GAAG,EAAE;EAAN,CAAZ,EAA0B,CAACC,IAAD,EAAOC,GAAP,KAAe;IAC/D,MAAMC,IAAI,GAAGF,IAAI,CAACE,IAAlB;;IACA,IAAIA,IAAI,KAAK,QAAb,EAAuB;MACrB,oBACE;QACE,GAAG,EAAED,GADP;QAEE,SAAS,EAAET,KAAK,CAACW,QAFnB,CAGE;QAHF;QAIE,uBAAuB,EAAE;UAACC,MAAM,EAAEJ,IAAI,CAACK;QAAd;MAJ3B,EADF;IAQD;;IACD,IAAIH,IAAI,KAAK,aAAb,EAA4B;MAC1B,MAAMI,KAAK,GAAG,MAAK;QAACC,IAAI,EAAEP,IAAI,CAACK;MAAZ,CAAL,EAAyBV,OAAzB,CAAd;;MACA,IAAI,CAACW,KAAL,EAAY,OAAO,IAAP;;MACZ,MAAM;QAACJ,IAAI,EAAEM;MAAP,IAAmCF,KAAzC;MAAA,MAA2BG,UAA3B,iCAAyCH,KAAzC;;MACA,MAAMI,SAAS,GACbF,SAAS,KAAK,MAAd,gBACE,oBAAC,QAAD,eAAcC,UAAd;QAA0B,SAAS,EAAEjB,KAAK,CAACmB;MAA3C,GADF,gBAGE,oBAAC,QAAD,eAAcF,UAAd;QAA0B,KAAK,EAAC;MAAhC,GAJJ;MAOA,oBACE;QAAK,SAAS,EAAEjB,KAAK,CAACoB,UAAtB;QAAkC,GAAG,EAAEZ,IAAI,CAACK;MAA5C,GACGK,SADH,CADF;IAKD;EACF,CA7BuB,EA6BrBd,aA7BqB,CAAxB;;EA+BA,oBACE;IAAK,aAAU,kBAAf;IAAkC,SAAS,EAAEJ,KAAK,CAACqB,OAAnD;IAA4D,IAAI,EAAC;EAAjE,GACGhB,eADH,CADF;AAKD,CAtCD;;AAwCA,MAAMiB,aAAN,wDACKxB,QAAQ,CAACyB,SADd;EAEEb,IAAI,EAAEd,SAAS,CAAC4B;AAFlB;AAKAvB,QAAQ,CAACsB,SAAT,2CAAqB;EACnBrB,QAAQ,EAAEN,SAAS,CAAC4B,MADD;EAEnBrB,OAAO,EAAEP,SAAS,CAAC6B,OAAV,CACP7B,SAAS,CAAC8B,SAAV,CAAoB,CAAC9B,SAAS,CAAC+B,KAAV,CAAgB7B,QAAQ,CAACyB,SAAzB,CAAD,EAAsC3B,SAAS,CAAC+B,KAAV,CAAgBL,aAAhB,CAAtC,CAApB,CADO;AAFU,CAArB;AAOA,eAAerB,QAAf"}
|
|
@@ -27,8 +27,6 @@ declare const _default: {
|
|
|
27
27
|
height: PropTypes.Requireable<number>;
|
|
28
28
|
width: PropTypes.Requireable<number>;
|
|
29
29
|
className: PropTypes.Requireable<string>;
|
|
30
|
-
ie11ImageBackup: PropTypes.Validator<string>;
|
|
31
|
-
backupImageClassName: PropTypes.Requireable<string>;
|
|
32
30
|
autoplay: PropTypes.Requireable<boolean>;
|
|
33
31
|
animationControl: PropTypes.Requireable<string>;
|
|
34
32
|
}>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/molecule/review-card-congrats/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAmC,EACjC,oBAAoB,EACrB,MAAM,sCAAsC,CAAC;AAE9C,oBAAY,iBAAiB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,oBAAoB,CAAC;IACtC,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC
|
|
1
|
+
{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/molecule/review-card-congrats/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAmC,EACjC,oBAAoB,EACrB,MAAM,sCAAsC,CAAC;AAE9C,oBAAY,iBAAiB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,oBAAoB,CAAC;IACtC,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEF,wBAWE"}
|
|
@@ -16,8 +16,6 @@ declare const propTypes: {
|
|
|
16
16
|
height: PropTypes.Requireable<number>;
|
|
17
17
|
width: PropTypes.Requireable<number>;
|
|
18
18
|
className: PropTypes.Requireable<string>;
|
|
19
|
-
ie11ImageBackup: PropTypes.Validator<string>;
|
|
20
|
-
backupImageClassName: PropTypes.Requireable<string>;
|
|
21
19
|
autoplay: PropTypes.Requireable<boolean>;
|
|
22
20
|
animationControl: PropTypes.Requireable<string>;
|
|
23
21
|
}>>;
|
|
@@ -37,8 +35,6 @@ declare const propTypes: {
|
|
|
37
35
|
height: PropTypes.Requireable<number>;
|
|
38
36
|
width: PropTypes.Requireable<number>;
|
|
39
37
|
className: PropTypes.Requireable<string>;
|
|
40
|
-
ie11ImageBackup: PropTypes.Validator<string>;
|
|
41
|
-
backupImageClassName: PropTypes.Requireable<string>;
|
|
42
38
|
autoplay: PropTypes.Requireable<boolean>;
|
|
43
39
|
animationControl: PropTypes.Requireable<string>;
|
|
44
40
|
}>>;
|
|
@@ -65,8 +61,6 @@ declare const propTypes: {
|
|
|
65
61
|
height: PropTypes.Requireable<number>;
|
|
66
62
|
width: PropTypes.Requireable<number>;
|
|
67
63
|
className: PropTypes.Requireable<string>;
|
|
68
|
-
ie11ImageBackup: PropTypes.Validator<string>;
|
|
69
|
-
backupImageClassName: PropTypes.Requireable<string>;
|
|
70
64
|
autoplay: PropTypes.Requireable<boolean>;
|
|
71
65
|
animationControl: PropTypes.Requireable<string>;
|
|
72
66
|
}>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/organism/review-congrats/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAmC,EACjC,oBAAoB,EACrB,MAAM,sCAAsC,CAAC;AAC9C,OAA4C,EAC1C,iBAAiB,EAClB,MAAM,gDAAgD,CAAC;AAExD,QAAA,MAAM,SAAS
|
|
1
|
+
{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/organism/review-congrats/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAmC,EACjC,oBAAoB,EACrB,MAAM,sCAAsC,CAAC;AAC9C,OAA4C,EAC1C,iBAAiB,EAClB,MAAM,gDAAgD,CAAC;AAExD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBd,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,oBAAY,mBAAmB,GAAG;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,iBAAiB,CAAC;IAC/B,eAAe,EAAE,oBAAoB,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,gBAAgB,CAAC,EAAE,iBAAiB,CAAC;IACrC,cAAc,CAAC,EAAE;QACf,YAAY,EAAE,MAAM,CAAC;QACrB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,mBAAmB,CAAC,EAAE;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,YAAY,EAAE,MAAM,CAAC;QACrB,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;CACH,CAAC"}
|
|
@@ -322,7 +322,6 @@ const BackgroundScorm = props => {
|
|
|
322
322
|
hideOnTransparent: false,
|
|
323
323
|
animationClassName: ''
|
|
324
324
|
},
|
|
325
|
-
ie11ImageBackup: 'https://static-staging.coorpacademy.com/animations/review/conffeti_congrats.svg',
|
|
326
325
|
animationControl: undefined,
|
|
327
326
|
loop: false,
|
|
328
327
|
animationControl: 'play',
|