@coorpacademy/components 10.9.0 → 10.10.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/molecule/checkbox-with-title/index.js +51 -0
- package/es/molecule/checkbox-with-title/index.js.map +1 -0
- package/es/molecule/checkbox-with-title/style.css +62 -0
- package/es/molecule/checkbox-with-title/test/fixtures/checked.js +8 -0
- package/es/molecule/checkbox-with-title/test/fixtures/checked.js.map +1 -0
- package/es/molecule/checkbox-with-title/test/fixtures/unchecked.js +8 -0
- package/es/molecule/checkbox-with-title/test/fixtures/unchecked.js.map +1 -0
- package/es/molecule/review-correction-popin/index.js +3 -1
- package/es/molecule/review-correction-popin/index.js.map +1 -1
- package/es/molecule/review-correction-popin/style.css +20 -17
- package/lib/molecule/checkbox-with-title/index.js +66 -0
- package/lib/molecule/checkbox-with-title/index.js.map +1 -0
- package/lib/molecule/checkbox-with-title/style.css +62 -0
- package/lib/molecule/checkbox-with-title/test/fixtures/checked.js +13 -0
- package/lib/molecule/checkbox-with-title/test/fixtures/checked.js.map +1 -0
- package/lib/molecule/checkbox-with-title/test/fixtures/unchecked.js +13 -0
- package/lib/molecule/checkbox-with-title/test/fixtures/unchecked.js.map +1 -0
- package/lib/molecule/review-correction-popin/index.js +3 -1
- package/lib/molecule/review-correction-popin/index.js.map +1 -1
- package/lib/molecule/review-correction-popin/style.css +20 -17
- package/package.json +2 -2
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import _uniqueId from "lodash/fp/uniqueId";
|
|
2
|
+
import _noop from "lodash/fp/noop";
|
|
3
|
+
import React, { useMemo } from 'react';
|
|
4
|
+
import PropTypes from 'prop-types';
|
|
5
|
+
import { NovaSolidStatusValidate as CheckIcon } from '@coorpacademy/nova-icons';
|
|
6
|
+
import style from './style.css';
|
|
7
|
+
|
|
8
|
+
const CheckboxWithTitle = props => {
|
|
9
|
+
const {
|
|
10
|
+
title,
|
|
11
|
+
name,
|
|
12
|
+
checked,
|
|
13
|
+
onChange = _noop,
|
|
14
|
+
'data-name': dataName,
|
|
15
|
+
'aria-label': ariaLabel
|
|
16
|
+
} = props;
|
|
17
|
+
|
|
18
|
+
const idCheckbox = _uniqueId('input-checkbox-');
|
|
19
|
+
|
|
20
|
+
const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);
|
|
21
|
+
return /*#__PURE__*/React.createElement("label", {
|
|
22
|
+
className: style.container,
|
|
23
|
+
htmlFor: idCheckbox
|
|
24
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
25
|
+
type: "checkbox",
|
|
26
|
+
id: idCheckbox,
|
|
27
|
+
name: name,
|
|
28
|
+
onChange: handleChange,
|
|
29
|
+
checked: checked,
|
|
30
|
+
className: style.checkbox,
|
|
31
|
+
"data-name": dataName,
|
|
32
|
+
"aria-label": ariaLabel
|
|
33
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
34
|
+
className: style.label
|
|
35
|
+
}, /*#__PURE__*/React.createElement(CheckIcon, {
|
|
36
|
+
className: style.icon
|
|
37
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
38
|
+
className: style.title
|
|
39
|
+
}, title));
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
CheckboxWithTitle.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
43
|
+
title: PropTypes.string,
|
|
44
|
+
name: PropTypes.string,
|
|
45
|
+
checked: PropTypes.bool,
|
|
46
|
+
onChange: PropTypes.func,
|
|
47
|
+
'aria-label': PropTypes.string,
|
|
48
|
+
'data-name': PropTypes.string
|
|
49
|
+
} : {};
|
|
50
|
+
export default CheckboxWithTitle;
|
|
51
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/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;AAAO,IAAA,SAAS,EAAEN,KAAK,CAACa,SAAxB;AAAmC,IAAA,OAAO,EAAEJ;AAA5C,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,eAcE;AAAM,IAAA,SAAS,EAAEhB,KAAK,CAACG;AAAvB,KAA+BA,KAA/B,CAdF,CADF;AAkBD,CA/BD;;AAiCAF,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 <label className={style.container} 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 <span className={style.title}>{title}</span>\n </label>\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"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
@value colors: "../../variables/colors.css";
|
|
2
|
+
@value white from colors;
|
|
3
|
+
@value dark from colors;
|
|
4
|
+
@value cm_grey_200 from colors;
|
|
5
|
+
@value cm_grey_100 from colors;
|
|
6
|
+
@value black from colors;
|
|
7
|
+
@value cm_primary_blue from colors;
|
|
8
|
+
|
|
9
|
+
.container {
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
align-content: flex-start;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.container input {
|
|
16
|
+
display: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.icon {
|
|
20
|
+
display: none;
|
|
21
|
+
width: 16px;
|
|
22
|
+
height: 14px;
|
|
23
|
+
color: white;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.container .title {
|
|
27
|
+
font-family: "Gilroy";
|
|
28
|
+
font-weight: bold;
|
|
29
|
+
font-size: 20px;
|
|
30
|
+
color: dark;
|
|
31
|
+
width: 180px;
|
|
32
|
+
margin-right: 20px;
|
|
33
|
+
min-height: 50px;
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
align-content: center;
|
|
37
|
+
color: black;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.container .label {
|
|
41
|
+
border: solid 1px cm_grey_200;
|
|
42
|
+
background-color: cm_grey_100;
|
|
43
|
+
display: flex;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
align-items: center;
|
|
46
|
+
width: 23px;
|
|
47
|
+
height: 23px;
|
|
48
|
+
border-radius: 5px;
|
|
49
|
+
font-size: 14px;
|
|
50
|
+
color: dark;
|
|
51
|
+
margin-right: 8px;
|
|
52
|
+
position: relative;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.checkbox:checked + .label {
|
|
56
|
+
border: solid 1px cm_primary_blue;
|
|
57
|
+
background-color: cm_primary_blue;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.checkbox:checked + .label .icon {
|
|
61
|
+
display: flex;
|
|
62
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/checkbox-with-title/test/fixtures/checked.js"],"names":["props","title","checked","onChange","value","console","log"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,WADF;AAELC,IAAAA,OAAO,EAAE,IAFJ;AAGLC,IAAAA,QAAQ,EAAEC,KAAK,IAAIC,OAAO,CAACC,GAAR,CAAYF,KAAZ;AAHd;AADM,CAAf","sourcesContent":["export default {\n props: {\n title: 'Add stars',\n checked: true,\n onChange: value => console.log(value)\n }\n};\n"],"file":"checked.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/checkbox-with-title/test/fixtures/unchecked.js"],"names":["props","title","checked","onChange","value","console","log"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,cADF;AAELC,IAAAA,OAAO,EAAE,KAFJ;AAGLC,IAAAA,QAAQ,EAAEC,KAAK,IAAIC,OAAO,CAACC,GAAR,CAAYF,KAAZ;AAHd;AADM,CAAf","sourcesContent":["export default {\n props: {\n title: 'Create badge',\n checked: false,\n onChange: value => console.log(value)\n }\n};\n"],"file":"unchecked.js"}
|
|
@@ -68,10 +68,12 @@ const ReviewCorrectionPopin = props => {
|
|
|
68
68
|
}, /*#__PURE__*/React.createElement("div", {
|
|
69
69
|
className: style.information,
|
|
70
70
|
"aria-label": "answer-information"
|
|
71
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
72
|
+
className: style.labelContainer
|
|
71
73
|
}, /*#__PURE__*/React.createElement("span", {
|
|
72
74
|
className: style.label,
|
|
73
75
|
"aria-label": information.label
|
|
74
|
-
}, information.label), /*#__PURE__*/React.createElement("span", {
|
|
76
|
+
}, information.label)), /*#__PURE__*/React.createElement("span", {
|
|
75
77
|
className: style.message,
|
|
76
78
|
"aria-label": information.message
|
|
77
79
|
}, information.message))), /*#__PURE__*/React.createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecule/review-correction-popin/index.js"],"names":["React","classnames","PropTypes","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","ButtonLink","style","buildKlfButton","klf","klfButtonProps","icon","position","type","klfContainer","klfButtonContainer","klfButton","toolTip","tooltipText","tooltip","ReviewCorrectionPopin","props","information","resultLabel","next","nextQuestionButtonProps","cta","ICONS","right","wrong","Icon","wrapper","popin","correctionSection","iconCircle","iconRight","iconWrong","feedbackSection","label","message","actions","actionsWrong","nextQuestionContainer","nextQuestionButton","propTypes","oneOf","string","shape","onClick","func"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SACEC,gCAAgC,IAAIC,SADtC,EAEEC,oBAAoB,IAAIC,SAF1B,QAGO,0BAHP;AAIA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,cAAc,GAAGC,GAAG,IAAI;AAC5B,QAAMC,cAAc,yBACfD,GADe;AAElBE,IAAAA,IAAI,EAAE;AACJC,MAAAA,QAAQ,EAAE,MADN;AAEJC,MAAAA,IAAI,EAAE;AAFF,KAFY;AAMlBA,IAAAA,IAAI,EAAE;AANY,IAApB;;AASA,sBACE;AAAK,IAAA,SAAS,EAAEN,KAAK,CAACO;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEP,KAAK,CAACQ;AAAtB,kBACE,oBAAC,UAAD,eAAgBL,cAAhB;AAAgC,IAAA,SAAS,EAAEH,KAAK,CAACS;AAAjD,KADF,CADF,eAIE;AAAK,IAAA,SAAS,EAAET,KAAK,CAACU;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEV,KAAK,CAACW;AAAtB,KAAoCT,GAAG,CAACU,OAAxC,CADF,CAJF,CADF;AAUD,CApBD;;AAsBA,MAAMC,qBAAqB,GAAGC,KAAK,IAAI;AACrC,QAAM;AAACC,IAAAA,WAAD;AAAcC,IAAAA,WAAd;AAA2BV,IAAAA,IAA3B;AAAiCJ,IAAAA,GAAjC;AAAsCe,IAAAA;AAAtC,MAA8CH,KAApD;;AAEA,QAAMI,uBAAuB,yBACxBD,IADwB;AAE3BX,IAAAA,IAAI,EAAE;AAFqB,IAA7B;;AAKA,QAAMa,GAAG,GAAGb,IAAI,KAAK,OAAT,GAAmBL,cAAc,CAACC,GAAD,CAAjC,GAAyC,IAArD;AAEA,QAAMkB,KAAK,GAAG;AACZC,IAAAA,KAAK,EAAEzB,SADK;AAEZ0B,IAAAA,KAAK,EAAExB;AAFK,GAAd;AAIA,QAAMyB,IAAI,GAAGH,KAAK,CAACd,IAAD,CAAlB;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEN,KAAK,CAACwB;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAE/B,UAAU,CAACO,KAAK,CAACyB,KAAP,EAAcnB,IAAI,KAAK,OAAT,GAAmBN,KAAK,CAACqB,KAAzB,GAAiCrB,KAAK,CAACsB,KAArD;AAA1B,kBACE;AAAK,IAAA,SAAS,EAAEtB,KAAK,CAAC0B;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAE1B,KAAK,CAAC2B;AAAtB,kBACE,oBAAC,IAAD;AAAM,IAAA,SAAS,EAAErB,IAAI,KAAK,OAAT,GAAmBN,KAAK,CAAC4B,SAAzB,GAAqC5B,KAAK,CAAC6B;AAA5D,IADF,CADF,eAIE;AAAK,IAAA,SAAS,EAAE7B,KAAK,CAACgB,WAAtB;AAAmC,kBAAW;AAA9C,kBACE;AAAM,kBAAYA;AAAlB,KAAgCA,WAAhC,CADF,CAJF,CADF,eASE;AAAK,IAAA,SAAS,EAAEhB,KAAK,CAAC8B;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAE9B,KAAK,CAACe,WAAtB;AAAmC,kBAAW;AAA9C,kBACE;
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/review-correction-popin/index.js"],"names":["React","classnames","PropTypes","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","ButtonLink","style","buildKlfButton","klf","klfButtonProps","icon","position","type","klfContainer","klfButtonContainer","klfButton","toolTip","tooltipText","tooltip","ReviewCorrectionPopin","props","information","resultLabel","next","nextQuestionButtonProps","cta","ICONS","right","wrong","Icon","wrapper","popin","correctionSection","iconCircle","iconRight","iconWrong","feedbackSection","labelContainer","label","message","actions","actionsWrong","nextQuestionContainer","nextQuestionButton","propTypes","oneOf","string","shape","onClick","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport {\n NovaCompositionCoorpacademyCheck as RightIcon,\n NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst buildKlfButton = klf => {\n const klfButtonProps = {\n ...klf,\n icon: {\n position: 'left',\n type: 'key'\n },\n type: 'primary'\n };\n\n return (\n <div className={style.klfContainer}>\n <div className={style.klfButtonContainer}>\n <ButtonLink {...klfButtonProps} className={style.klfButton} />\n </div>\n <div className={style.toolTip}>\n <div className={style.tooltipText}>{klf.tooltip}</div>\n </div>\n </div>\n );\n};\n\nconst ReviewCorrectionPopin = props => {\n const {information, resultLabel, type, klf, next} = props;\n\n const nextQuestionButtonProps = {\n ...next,\n type: 'primary'\n };\n\n const cta = type === 'wrong' ? buildKlfButton(klf) : null;\n\n const ICONS = {\n right: RightIcon,\n wrong: WrongIcon\n };\n const Icon = ICONS[type];\n\n return (\n <div className={style.wrapper}>\n <div className={classnames(style.popin, type === 'right' ? style.right : style.wrong)}>\n <div className={style.correctionSection}>\n <div className={style.iconCircle}>\n <Icon className={type === 'right' ? style.iconRight : style.iconWrong} />\n </div>\n <div className={style.resultLabel} aria-label=\"result\">\n <span aria-label={resultLabel}>{resultLabel}</span>\n </div>\n </div>\n <div className={style.feedbackSection}>\n <div className={style.information} aria-label=\"answer-information\">\n <div className={style.labelContainer}>\n <span className={style.label} aria-label={information.label}>\n {information.label}\n </span>\n </div>\n <span className={style.message} aria-label={information.message}>\n {information.message}\n </span>\n </div>\n </div>\n <div className={type === 'right' ? style.actions : style.actionsWrong}>\n {cta}\n <div className={style.nextQuestionContainer}>\n <ButtonLink {...nextQuestionButtonProps} className={style.nextQuestionButton} />\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nReviewCorrectionPopin.propTypes = {\n type: PropTypes.oneOf(['right', 'wrong']),\n resultLabel: PropTypes.string,\n information: PropTypes.shape({\n label: PropTypes.string,\n message: PropTypes.string\n }),\n next: PropTypes.shape({\n label: PropTypes.string,\n onClick: PropTypes.func\n }),\n klf: PropTypes.shape({\n label: PropTypes.string,\n onClick: PropTypes.func\n })\n};\n\nexport default ReviewCorrectionPopin;\n"],"file":"index.js"}
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
|
|
49
49
|
.feedbackSection {
|
|
50
50
|
display: flex;
|
|
51
|
-
margin: 0 23px;
|
|
51
|
+
margin: 0 48px 0 23px;
|
|
52
52
|
flex-direction: row;
|
|
53
53
|
align-items: center;
|
|
54
54
|
justify-content: left;
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
|
|
85
85
|
.resultLabel {
|
|
86
86
|
margin-left: 12px;
|
|
87
|
-
font-weight:
|
|
87
|
+
font-weight: 600;
|
|
88
88
|
font-size: 24px;
|
|
89
89
|
line-height: 24px;
|
|
90
90
|
hyphens: auto;
|
|
@@ -95,21 +95,23 @@
|
|
|
95
95
|
.information {
|
|
96
96
|
display: block;
|
|
97
97
|
flex-direction: column;
|
|
98
|
+
width: 100%;
|
|
98
99
|
}
|
|
99
100
|
|
|
100
|
-
.
|
|
101
|
-
width:
|
|
102
|
-
height:
|
|
101
|
+
.labelContainer {
|
|
102
|
+
width: fit-content;
|
|
103
|
+
height: fit-content;
|
|
103
104
|
padding: 4px 8px;
|
|
104
105
|
background: rgba(255, 255, 255, 0.3);
|
|
105
106
|
border-radius: 56px;
|
|
107
|
+
display: table;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.label {
|
|
106
111
|
font-style: normal;
|
|
107
112
|
font-weight: 900;
|
|
108
113
|
font-size: 14px;
|
|
109
114
|
line-height: 17px;
|
|
110
|
-
display: flex;
|
|
111
|
-
align-items: center;
|
|
112
|
-
justify-content: center;
|
|
113
115
|
hyphens: auto;
|
|
114
116
|
-ms-word-break: break-word;
|
|
115
117
|
word-break: break-word;
|
|
@@ -139,11 +141,12 @@
|
|
|
139
141
|
opacity: 0;
|
|
140
142
|
transition: opacity 0.8s;
|
|
141
143
|
position: absolute;
|
|
142
|
-
width:
|
|
144
|
+
width: 142%;
|
|
143
145
|
border-radius: 15px;
|
|
144
146
|
background-color: white;
|
|
145
|
-
right:
|
|
146
|
-
|
|
147
|
+
right: 0px;
|
|
148
|
+
bottom: 55px;
|
|
149
|
+
filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.32));
|
|
147
150
|
}
|
|
148
151
|
|
|
149
152
|
.toolTip::before {
|
|
@@ -158,7 +161,7 @@
|
|
|
158
161
|
background-color: white;
|
|
159
162
|
position: inherit;
|
|
160
163
|
bottom: -7px;
|
|
161
|
-
|
|
164
|
+
right: 10%;
|
|
162
165
|
}
|
|
163
166
|
|
|
164
167
|
.tooltipText {
|
|
@@ -177,6 +180,7 @@
|
|
|
177
180
|
overflow: visible;
|
|
178
181
|
width: calc(55% - 16px);
|
|
179
182
|
margin-right: 16px;
|
|
183
|
+
position: relative;
|
|
180
184
|
}
|
|
181
185
|
|
|
182
186
|
.klfButtonContainer:hover ~ .toolTip {
|
|
@@ -236,11 +240,6 @@
|
|
|
236
240
|
.actionsWrong {
|
|
237
241
|
width: 47%;
|
|
238
242
|
}
|
|
239
|
-
|
|
240
|
-
.toolTip {
|
|
241
|
-
width: 250px;
|
|
242
|
-
right: 25%;
|
|
243
|
-
}
|
|
244
243
|
}
|
|
245
244
|
|
|
246
245
|
@media mobile {
|
|
@@ -309,6 +308,10 @@
|
|
|
309
308
|
bottom: 52px;
|
|
310
309
|
}
|
|
311
310
|
|
|
311
|
+
.toolTip::before {
|
|
312
|
+
right: 50%
|
|
313
|
+
}
|
|
314
|
+
|
|
312
315
|
.tooltipText {
|
|
313
316
|
max-width: none;
|
|
314
317
|
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
|
|
6
|
+
var _uniqueId2 = _interopRequireDefault(require("lodash/fp/uniqueId"));
|
|
7
|
+
|
|
8
|
+
var _noop2 = _interopRequireDefault(require("lodash/fp/noop"));
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
|
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
|
|
14
|
+
var _novaIcons = require("@coorpacademy/nova-icons");
|
|
15
|
+
|
|
16
|
+
var _style = _interopRequireDefault(require("./style.css"));
|
|
17
|
+
|
|
18
|
+
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
|
|
19
|
+
|
|
20
|
+
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
|
+
|
|
22
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
|
+
|
|
24
|
+
const CheckboxWithTitle = props => {
|
|
25
|
+
const {
|
|
26
|
+
title,
|
|
27
|
+
name,
|
|
28
|
+
checked,
|
|
29
|
+
onChange = _noop2.default,
|
|
30
|
+
'data-name': dataName,
|
|
31
|
+
'aria-label': ariaLabel
|
|
32
|
+
} = props;
|
|
33
|
+
const idCheckbox = (0, _uniqueId2.default)('input-checkbox-');
|
|
34
|
+
const handleChange = (0, _react.useMemo)(() => e => onChange(e.target.checked), [onChange]);
|
|
35
|
+
return /*#__PURE__*/_react.default.createElement("label", {
|
|
36
|
+
className: _style.default.container,
|
|
37
|
+
htmlFor: idCheckbox
|
|
38
|
+
}, /*#__PURE__*/_react.default.createElement("input", {
|
|
39
|
+
type: "checkbox",
|
|
40
|
+
id: idCheckbox,
|
|
41
|
+
name: name,
|
|
42
|
+
onChange: handleChange,
|
|
43
|
+
checked: checked,
|
|
44
|
+
className: _style.default.checkbox,
|
|
45
|
+
"data-name": dataName,
|
|
46
|
+
"aria-label": ariaLabel
|
|
47
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
48
|
+
className: _style.default.label
|
|
49
|
+
}, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidStatusValidate, {
|
|
50
|
+
className: _style.default.icon
|
|
51
|
+
})), /*#__PURE__*/_react.default.createElement("span", {
|
|
52
|
+
className: _style.default.title
|
|
53
|
+
}, title));
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
CheckboxWithTitle.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
57
|
+
title: _propTypes.default.string,
|
|
58
|
+
name: _propTypes.default.string,
|
|
59
|
+
checked: _propTypes.default.bool,
|
|
60
|
+
onChange: _propTypes.default.func,
|
|
61
|
+
'aria-label': _propTypes.default.string,
|
|
62
|
+
'data-name': _propTypes.default.string
|
|
63
|
+
} : {};
|
|
64
|
+
var _default = CheckboxWithTitle;
|
|
65
|
+
exports.default = _default;
|
|
66
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/checkbox-with-title/index.js"],"names":["CheckboxWithTitle","props","title","name","checked","onChange","dataName","ariaLabel","idCheckbox","handleChange","e","target","style","container","checkbox","label","icon","propTypes","PropTypes","string","bool","func"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAEA,MAAMA,iBAAiB,GAAGC,KAAK,IAAI;AACjC,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,IAFI;AAGJC,IAAAA,OAHI;AAIJC,IAAAA,QAAQ,iBAJJ;AAKJ,iBAAaC,QALT;AAMJ,kBAAcC;AANV,MAOFN,KAPJ;AASA,QAAMO,UAAU,GAAG,wBAAS,iBAAT,CAAnB;AACA,QAAMC,YAAY,GAAG,oBAAQ,MAAMC,CAAC,IAAIL,QAAQ,CAACK,CAAC,CAACC,MAAF,CAASP,OAAV,CAA3B,EAA+C,CAACC,QAAD,CAA/C,CAArB;AAEA,sBACE;AAAO,IAAA,SAAS,EAAEO,eAAMC,SAAxB;AAAmC,IAAA,OAAO,EAAEL;AAA5C,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,EAAEQ,eAAME,QANnB;AAOE,iBAAWR,QAPb;AAQE,kBAAYC;AARd,IADF,eAWE;AAAK,IAAA,SAAS,EAAEK,eAAMG;AAAtB,kBACE,6BAAC,kCAAD;AAAW,IAAA,SAAS,EAAEH,eAAMI;AAA5B,IADF,CAXF,eAcE;AAAM,IAAA,SAAS,EAAEJ,eAAMV;AAAvB,KAA+BA,KAA/B,CAdF,CADF;AAkBD,CA/BD;;AAiCAF,iBAAiB,CAACiB,SAAlB,2CAA8B;AAC5Bf,EAAAA,KAAK,EAAEgB,mBAAUC,MADW;AAE5BhB,EAAAA,IAAI,EAAEe,mBAAUC,MAFY;AAG5Bf,EAAAA,OAAO,EAAEc,mBAAUE,IAHS;AAI5Bf,EAAAA,QAAQ,EAAEa,mBAAUG,IAJQ;AAK5B,gBAAcH,mBAAUC,MALI;AAM5B,eAAaD,mBAAUC;AANK,CAA9B;eAQenB,iB","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 <label className={style.container} 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 <span className={style.title}>{title}</span>\n </label>\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"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
@value colors: "../../variables/colors.css";
|
|
2
|
+
@value white from colors;
|
|
3
|
+
@value dark from colors;
|
|
4
|
+
@value cm_grey_200 from colors;
|
|
5
|
+
@value cm_grey_100 from colors;
|
|
6
|
+
@value black from colors;
|
|
7
|
+
@value cm_primary_blue from colors;
|
|
8
|
+
|
|
9
|
+
.container {
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
align-content: flex-start;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.container input {
|
|
16
|
+
display: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.icon {
|
|
20
|
+
display: none;
|
|
21
|
+
width: 16px;
|
|
22
|
+
height: 14px;
|
|
23
|
+
color: white;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.container .title {
|
|
27
|
+
font-family: "Gilroy";
|
|
28
|
+
font-weight: bold;
|
|
29
|
+
font-size: 20px;
|
|
30
|
+
color: dark;
|
|
31
|
+
width: 180px;
|
|
32
|
+
margin-right: 20px;
|
|
33
|
+
min-height: 50px;
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
align-content: center;
|
|
37
|
+
color: black;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.container .label {
|
|
41
|
+
border: solid 1px cm_grey_200;
|
|
42
|
+
background-color: cm_grey_100;
|
|
43
|
+
display: flex;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
align-items: center;
|
|
46
|
+
width: 23px;
|
|
47
|
+
height: 23px;
|
|
48
|
+
border-radius: 5px;
|
|
49
|
+
font-size: 14px;
|
|
50
|
+
color: dark;
|
|
51
|
+
margin-right: 8px;
|
|
52
|
+
position: relative;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.checkbox:checked + .label {
|
|
56
|
+
border: solid 1px cm_primary_blue;
|
|
57
|
+
background-color: cm_primary_blue;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.checkbox:checked + .label .icon {
|
|
61
|
+
display: flex;
|
|
62
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
var _default = {
|
|
6
|
+
props: {
|
|
7
|
+
title: 'Add stars',
|
|
8
|
+
checked: true,
|
|
9
|
+
onChange: value => console.log(value)
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
exports.default = _default;
|
|
13
|
+
//# sourceMappingURL=checked.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/checkbox-with-title/test/fixtures/checked.js"],"names":["props","title","checked","onChange","value","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,WADF;AAELC,IAAAA,OAAO,EAAE,IAFJ;AAGLC,IAAAA,QAAQ,EAAEC,KAAK,IAAIC,OAAO,CAACC,GAAR,CAAYF,KAAZ;AAHd;AADM,C","sourcesContent":["export default {\n props: {\n title: 'Add stars',\n checked: true,\n onChange: value => console.log(value)\n }\n};\n"],"file":"checked.js"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
var _default = {
|
|
6
|
+
props: {
|
|
7
|
+
title: 'Create badge',
|
|
8
|
+
checked: false,
|
|
9
|
+
onChange: value => console.log(value)
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
exports.default = _default;
|
|
13
|
+
//# sourceMappingURL=unchecked.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/checkbox-with-title/test/fixtures/unchecked.js"],"names":["props","title","checked","onChange","value","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,cADF;AAELC,IAAAA,OAAO,EAAE,KAFJ;AAGLC,IAAAA,QAAQ,EAAEC,KAAK,IAAIC,OAAO,CAACC,GAAR,CAAYF,KAAZ;AAHd;AADM,C","sourcesContent":["export default {\n props: {\n title: 'Create badge',\n checked: false,\n onChange: value => console.log(value)\n }\n};\n"],"file":"unchecked.js"}
|
|
@@ -80,10 +80,12 @@ const ReviewCorrectionPopin = props => {
|
|
|
80
80
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
81
81
|
className: _style.default.information,
|
|
82
82
|
"aria-label": "answer-information"
|
|
83
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
84
|
+
className: _style.default.labelContainer
|
|
83
85
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
84
86
|
className: _style.default.label,
|
|
85
87
|
"aria-label": information.label
|
|
86
|
-
}, information.label), /*#__PURE__*/_react.default.createElement("span", {
|
|
88
|
+
}, information.label)), /*#__PURE__*/_react.default.createElement("span", {
|
|
87
89
|
className: _style.default.message,
|
|
88
90
|
"aria-label": information.message
|
|
89
91
|
}, information.message))), /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecule/review-correction-popin/index.js"],"names":["buildKlfButton","klf","klfButtonProps","icon","position","type","style","klfContainer","klfButtonContainer","klfButton","toolTip","tooltipText","tooltip","ReviewCorrectionPopin","props","information","resultLabel","next","nextQuestionButtonProps","cta","ICONS","right","RightIcon","wrong","WrongIcon","Icon","wrapper","popin","correctionSection","iconCircle","iconRight","iconWrong","feedbackSection","label","message","actions","actionsWrong","nextQuestionContainer","nextQuestionButton","propTypes","PropTypes","oneOf","string","shape","onClick","func"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AAIA;;AACA;;;;;;AAEA,MAAMA,cAAc,GAAGC,GAAG,IAAI;AAC5B,QAAMC,cAAc,yBACfD,GADe;AAElBE,IAAAA,IAAI,EAAE;AACJC,MAAAA,QAAQ,EAAE,MADN;AAEJC,MAAAA,IAAI,EAAE;AAFF,KAFY;AAMlBA,IAAAA,IAAI,EAAE;AANY,IAApB;;AASA,sBACE;AAAK,IAAA,SAAS,EAAEC,eAAMC;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAED,eAAME;AAAtB,kBACE,6BAAC,mBAAD,eAAgBN,cAAhB;AAAgC,IAAA,SAAS,EAAEI,eAAMG;AAAjD,KADF,CADF,eAIE;AAAK,IAAA,SAAS,EAAEH,eAAMI;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEJ,eAAMK;AAAtB,KAAoCV,GAAG,CAACW,OAAxC,CADF,CAJF,CADF;AAUD,CApBD;;AAsBA,MAAMC,qBAAqB,GAAGC,KAAK,IAAI;AACrC,QAAM;AAACC,IAAAA,WAAD;AAAcC,IAAAA,WAAd;AAA2BX,IAAAA,IAA3B;AAAiCJ,IAAAA,GAAjC;AAAsCgB,IAAAA;AAAtC,MAA8CH,KAApD;;AAEA,QAAMI,uBAAuB,yBACxBD,IADwB;AAE3BZ,IAAAA,IAAI,EAAE;AAFqB,IAA7B;;AAKA,QAAMc,GAAG,GAAGd,IAAI,KAAK,OAAT,GAAmBL,cAAc,CAACC,GAAD,CAAjC,GAAyC,IAArD;AAEA,QAAMmB,KAAK,GAAG;AACZC,IAAAA,KAAK,EAAEC,2CADK;AAEZC,IAAAA,KAAK,EAAEC;AAFK,GAAd;AAIA,QAAMC,IAAI,GAAGL,KAAK,CAACf,IAAD,CAAlB;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEC,eAAMoB;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAE,yBAAWpB,eAAMqB,KAAjB,EAAwBtB,IAAI,KAAK,OAAT,GAAmBC,eAAMe,KAAzB,GAAiCf,eAAMiB,KAA/D;AAAhB,kBACE;AAAK,IAAA,SAAS,EAAEjB,eAAMsB;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEtB,eAAMuB;AAAtB,kBACE,6BAAC,IAAD;AAAM,IAAA,SAAS,EAAExB,IAAI,KAAK,OAAT,GAAmBC,eAAMwB,SAAzB,GAAqCxB,eAAMyB;AAA5D,IADF,CADF,eAIE;AAAK,IAAA,SAAS,EAAEzB,eAAMU,WAAtB;AAAmC,kBAAW;AAA9C,kBACE;AAAM,kBAAYA;AAAlB,KAAgCA,WAAhC,CADF,CAJF,CADF,eASE;AAAK,IAAA,SAAS,EAAEV,eAAM0B;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAE1B,eAAMS,WAAtB;AAAmC,kBAAW;AAA9C,kBACE;
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/review-correction-popin/index.js"],"names":["buildKlfButton","klf","klfButtonProps","icon","position","type","style","klfContainer","klfButtonContainer","klfButton","toolTip","tooltipText","tooltip","ReviewCorrectionPopin","props","information","resultLabel","next","nextQuestionButtonProps","cta","ICONS","right","RightIcon","wrong","WrongIcon","Icon","wrapper","popin","correctionSection","iconCircle","iconRight","iconWrong","feedbackSection","labelContainer","label","message","actions","actionsWrong","nextQuestionContainer","nextQuestionButton","propTypes","PropTypes","oneOf","string","shape","onClick","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport {\n NovaCompositionCoorpacademyCheck as RightIcon,\n NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst buildKlfButton = klf => {\n const klfButtonProps = {\n ...klf,\n icon: {\n position: 'left',\n type: 'key'\n },\n type: 'primary'\n };\n\n return (\n <div className={style.klfContainer}>\n <div className={style.klfButtonContainer}>\n <ButtonLink {...klfButtonProps} className={style.klfButton} />\n </div>\n <div className={style.toolTip}>\n <div className={style.tooltipText}>{klf.tooltip}</div>\n </div>\n </div>\n );\n};\n\nconst ReviewCorrectionPopin = props => {\n const {information, resultLabel, type, klf, next} = props;\n\n const nextQuestionButtonProps = {\n ...next,\n type: 'primary'\n };\n\n const cta = type === 'wrong' ? buildKlfButton(klf) : null;\n\n const ICONS = {\n right: RightIcon,\n wrong: WrongIcon\n };\n const Icon = ICONS[type];\n\n return (\n <div className={style.wrapper}>\n <div className={classnames(style.popin, type === 'right' ? style.right : style.wrong)}>\n <div className={style.correctionSection}>\n <div className={style.iconCircle}>\n <Icon className={type === 'right' ? style.iconRight : style.iconWrong} />\n </div>\n <div className={style.resultLabel} aria-label=\"result\">\n <span aria-label={resultLabel}>{resultLabel}</span>\n </div>\n </div>\n <div className={style.feedbackSection}>\n <div className={style.information} aria-label=\"answer-information\">\n <div className={style.labelContainer}>\n <span className={style.label} aria-label={information.label}>\n {information.label}\n </span>\n </div>\n <span className={style.message} aria-label={information.message}>\n {information.message}\n </span>\n </div>\n </div>\n <div className={type === 'right' ? style.actions : style.actionsWrong}>\n {cta}\n <div className={style.nextQuestionContainer}>\n <ButtonLink {...nextQuestionButtonProps} className={style.nextQuestionButton} />\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nReviewCorrectionPopin.propTypes = {\n type: PropTypes.oneOf(['right', 'wrong']),\n resultLabel: PropTypes.string,\n information: PropTypes.shape({\n label: PropTypes.string,\n message: PropTypes.string\n }),\n next: PropTypes.shape({\n label: PropTypes.string,\n onClick: PropTypes.func\n }),\n klf: PropTypes.shape({\n label: PropTypes.string,\n onClick: PropTypes.func\n })\n};\n\nexport default ReviewCorrectionPopin;\n"],"file":"index.js"}
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
|
|
49
49
|
.feedbackSection {
|
|
50
50
|
display: flex;
|
|
51
|
-
margin: 0 23px;
|
|
51
|
+
margin: 0 48px 0 23px;
|
|
52
52
|
flex-direction: row;
|
|
53
53
|
align-items: center;
|
|
54
54
|
justify-content: left;
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
|
|
85
85
|
.resultLabel {
|
|
86
86
|
margin-left: 12px;
|
|
87
|
-
font-weight:
|
|
87
|
+
font-weight: 600;
|
|
88
88
|
font-size: 24px;
|
|
89
89
|
line-height: 24px;
|
|
90
90
|
hyphens: auto;
|
|
@@ -95,21 +95,23 @@
|
|
|
95
95
|
.information {
|
|
96
96
|
display: block;
|
|
97
97
|
flex-direction: column;
|
|
98
|
+
width: 100%;
|
|
98
99
|
}
|
|
99
100
|
|
|
100
|
-
.
|
|
101
|
-
width:
|
|
102
|
-
height:
|
|
101
|
+
.labelContainer {
|
|
102
|
+
width: fit-content;
|
|
103
|
+
height: fit-content;
|
|
103
104
|
padding: 4px 8px;
|
|
104
105
|
background: rgba(255, 255, 255, 0.3);
|
|
105
106
|
border-radius: 56px;
|
|
107
|
+
display: table;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.label {
|
|
106
111
|
font-style: normal;
|
|
107
112
|
font-weight: 900;
|
|
108
113
|
font-size: 14px;
|
|
109
114
|
line-height: 17px;
|
|
110
|
-
display: flex;
|
|
111
|
-
align-items: center;
|
|
112
|
-
justify-content: center;
|
|
113
115
|
hyphens: auto;
|
|
114
116
|
-ms-word-break: break-word;
|
|
115
117
|
word-break: break-word;
|
|
@@ -139,11 +141,12 @@
|
|
|
139
141
|
opacity: 0;
|
|
140
142
|
transition: opacity 0.8s;
|
|
141
143
|
position: absolute;
|
|
142
|
-
width:
|
|
144
|
+
width: 142%;
|
|
143
145
|
border-radius: 15px;
|
|
144
146
|
background-color: white;
|
|
145
|
-
right:
|
|
146
|
-
|
|
147
|
+
right: 0px;
|
|
148
|
+
bottom: 55px;
|
|
149
|
+
filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.32));
|
|
147
150
|
}
|
|
148
151
|
|
|
149
152
|
.toolTip::before {
|
|
@@ -158,7 +161,7 @@
|
|
|
158
161
|
background-color: white;
|
|
159
162
|
position: inherit;
|
|
160
163
|
bottom: -7px;
|
|
161
|
-
|
|
164
|
+
right: 10%;
|
|
162
165
|
}
|
|
163
166
|
|
|
164
167
|
.tooltipText {
|
|
@@ -177,6 +180,7 @@
|
|
|
177
180
|
overflow: visible;
|
|
178
181
|
width: calc(55% - 16px);
|
|
179
182
|
margin-right: 16px;
|
|
183
|
+
position: relative;
|
|
180
184
|
}
|
|
181
185
|
|
|
182
186
|
.klfButtonContainer:hover ~ .toolTip {
|
|
@@ -236,11 +240,6 @@
|
|
|
236
240
|
.actionsWrong {
|
|
237
241
|
width: 47%;
|
|
238
242
|
}
|
|
239
|
-
|
|
240
|
-
.toolTip {
|
|
241
|
-
width: 250px;
|
|
242
|
-
right: 25%;
|
|
243
|
-
}
|
|
244
243
|
}
|
|
245
244
|
|
|
246
245
|
@media mobile {
|
|
@@ -309,6 +308,10 @@
|
|
|
309
308
|
bottom: 52px;
|
|
310
309
|
}
|
|
311
310
|
|
|
311
|
+
.toolTip::before {
|
|
312
|
+
right: 50%
|
|
313
|
+
}
|
|
314
|
+
|
|
312
315
|
.tooltipText {
|
|
313
316
|
max-width: none;
|
|
314
317
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coorpacademy/components",
|
|
3
|
-
"version": "10.
|
|
3
|
+
"version": "10.10.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -119,5 +119,5 @@
|
|
|
119
119
|
"webpack-hot-middleware": "^2.25.0"
|
|
120
120
|
},
|
|
121
121
|
"author": "CoorpAcademy",
|
|
122
|
-
"gitHead": "
|
|
122
|
+
"gitHead": "a2c7b6945558d71b029bd2fdafa5e3d3adceee5a"
|
|
123
123
|
}
|