@coorpacademy/components 10.23.2 → 10.23.4
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/brand-logo/index.native.js +31 -0
- package/es/molecule/brand-logo/index.native.js.map +1 -0
- package/es/molecule/cm-popin/index.js +13 -7
- package/es/molecule/cm-popin/index.js.map +1 -1
- package/es/molecule/cm-popin/style.css +67 -5
- package/es/molecule/feedback/style.css +1 -1
- package/es/organism/header-v2/index.native.js +104 -0
- package/es/organism/header-v2/index.native.js.map +1 -0
- package/es/organism/review-slide/style.css +11 -1
- package/es/template/app-player/player/slides/header/index.js +6 -3
- package/es/template/app-player/player/slides/header/index.js.map +1 -1
- package/es/template/app-player/player/slides/header/learner.css +10 -0
- package/es/template/app-player/player/slides/header/learner.js +44 -12
- package/es/template/app-player/player/slides/header/learner.js.map +1 -1
- package/es/template/app-player/popin-end/summary.css +28 -8
- package/es/template/app-player/popin-end/summary.js +11 -7
- package/es/template/app-player/popin-end/summary.js.map +1 -1
- package/es/template/app-player/popin-header/index.js +12 -9
- package/es/template/app-player/popin-header/index.js.map +1 -1
- package/es/template/app-player/popin-header/style.css +10 -2
- package/es/variables/brand.native.js +2 -0
- package/es/variables/brand.native.js.map +1 -0
- package/lib/molecule/brand-logo/index.native.js +43 -0
- package/lib/molecule/brand-logo/index.native.js.map +1 -0
- package/lib/molecule/cm-popin/index.js +12 -6
- package/lib/molecule/cm-popin/index.js.map +1 -1
- package/lib/molecule/cm-popin/style.css +67 -5
- package/lib/molecule/feedback/style.css +1 -1
- package/lib/organism/header-v2/index.native.js +124 -0
- package/lib/organism/header-v2/index.native.js.map +1 -0
- package/lib/organism/review-slide/style.css +11 -1
- package/lib/template/app-player/player/slides/header/index.js +6 -3
- package/lib/template/app-player/player/slides/header/index.js.map +1 -1
- package/lib/template/app-player/player/slides/header/learner.css +10 -0
- package/lib/template/app-player/player/slides/header/learner.js +43 -12
- package/lib/template/app-player/player/slides/header/learner.js.map +1 -1
- package/lib/template/app-player/popin-end/summary.css +28 -8
- package/lib/template/app-player/popin-end/summary.js +11 -7
- package/lib/template/app-player/popin-end/summary.js.map +1 -1
- package/lib/template/app-player/popin-header/index.js +12 -9
- package/lib/template/app-player/popin-header/index.js.map +1 -1
- package/lib/template/app-player/popin-header/style.css +10 -2
- package/lib/variables/brand.native.js +2 -0
- package/lib/variables/brand.native.js.map +1 -0
- package/package.json +3 -3
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StyleSheet } from 'react-native';
|
|
3
|
+
import ImageBackground from '../../atom/image-background/index.native';
|
|
4
|
+
import { useTemplateContext } from '../../template/app-review/template-context';
|
|
5
|
+
const styles = StyleSheet.create({
|
|
6
|
+
logo: {
|
|
7
|
+
width: '100%'
|
|
8
|
+
}
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
const BrandLogo = ({
|
|
12
|
+
height
|
|
13
|
+
}) => {
|
|
14
|
+
const templateContext = useTemplateContext();
|
|
15
|
+
const {
|
|
16
|
+
brandTheme
|
|
17
|
+
} = templateContext;
|
|
18
|
+
return /*#__PURE__*/React.createElement(ImageBackground, {
|
|
19
|
+
style: [styles.logo, {
|
|
20
|
+
height
|
|
21
|
+
}],
|
|
22
|
+
testID: "brand-logo",
|
|
23
|
+
source: {
|
|
24
|
+
uri: brandTheme.images['logo-mobile']
|
|
25
|
+
},
|
|
26
|
+
resizeMode: "contain"
|
|
27
|
+
});
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export default BrandLogo;
|
|
31
|
+
//# sourceMappingURL=index.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/brand-logo/index.native.tsx"],"names":["React","StyleSheet","ImageBackground","useTemplateContext","styles","create","logo","width","BrandLogo","height","templateContext","brandTheme","uri","images"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,UAAR,QAAyB,cAAzB;AACA,OAAOC,eAAP,MAA4B,0CAA5B;AACA,SAAQC,kBAAR,QAAiC,4CAAjC;AAYA,MAAMC,MAAsB,GAAGH,UAAU,CAACI,MAAX,CAAkB;AAC/CC,EAAAA,IAAI,EAAE;AACJC,IAAAA,KAAK,EAAE;AADH;AADyC,CAAlB,CAA/B;;AAMA,MAAMC,SAAS,GAAG,CAAC;AAACC,EAAAA;AAAD,CAAD,KAAqB;AACrC,QAAMC,eAAe,GAAGP,kBAAkB,EAA1C;AACA,QAAM;AAACQ,IAAAA;AAAD,MAAeD,eAArB;AAEA,sBACE,oBAAC,eAAD;AACE,IAAA,KAAK,EAAE,CAACN,MAAM,CAACE,IAAR,EAAc;AAACG,MAAAA;AAAD,KAAd,CADT;AAEE,IAAA,MAAM,EAAC,YAFT;AAGE,IAAA,MAAM,EAAE;AACNG,MAAAA,GAAG,EAAED,UAAU,CAACE,MAAX,CAAkB,aAAlB;AADC,KAHV;AAME,IAAA,UAAU,EAAC;AANb,IADF;AAUD,CAdD;;AAgBA,eAAeL,SAAf","sourcesContent":["import React from 'react';\nimport {StyleSheet} from 'react-native';\nimport ImageBackground from '../../atom/image-background/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\n\nexport interface Props {\n height: number;\n}\n\ntype StyleSheetType = {\n logo: {\n width: string;\n };\n};\n\nconst styles: StyleSheetType = StyleSheet.create({\n logo: {\n width: '100%'\n }\n});\n\nconst BrandLogo = ({height}: Props) => {\n const templateContext = useTemplateContext();\n const {brandTheme} = templateContext;\n\n return (\n <ImageBackground\n style={[styles.logo, {height}]}\n testID=\"brand-logo\"\n source={{\n uri: brandTheme.images['logo-mobile']\n }}\n resizeMode=\"contain\"\n />\n );\n};\n\nexport default BrandLogo;\n"],"file":"index.native.js"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
|
-
import { NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond, NovaSolidApplicationsWindowUpload3 as WindowUpload, NovaLineSettingsCookie as Cookie } from '@coorpacademy/nova-icons';
|
|
3
|
+
import { NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond, NovaSolidApplicationsWindowUpload3 as WindowUpload, NovaLineSettingsCookie as Cookie, NovaSolidSpaceMoonRocket as MoonRocket } from '@coorpacademy/nova-icons';
|
|
4
4
|
import map from 'lodash/fp/map';
|
|
5
5
|
import Cta from '../../atom/button-link';
|
|
6
6
|
import ButtonLinkIconOnly from '../../atom/button-link-icon-only';
|
|
@@ -25,7 +25,8 @@ const CMPopin = props => {
|
|
|
25
25
|
} = props;
|
|
26
26
|
const logo = {
|
|
27
27
|
AlertDiamond,
|
|
28
|
-
WindowUpload
|
|
28
|
+
WindowUpload,
|
|
29
|
+
MoonRocket
|
|
29
30
|
};
|
|
30
31
|
const LogoComponent = logo[icon];
|
|
31
32
|
const backgroundImageStyle = backgroundImageUrl ? {
|
|
@@ -143,7 +144,8 @@ const CMPopin = props => {
|
|
|
143
144
|
onClick: firstButton.handleOnclick,
|
|
144
145
|
"data-name": 'cm-popin-cta',
|
|
145
146
|
"aria-label": firstButton['aria-label'],
|
|
146
|
-
type: firstButton.type
|
|
147
|
+
type: firstButton.type,
|
|
148
|
+
customStyle: firstButton.customStyle
|
|
147
149
|
})) : null, secondButton ? /*#__PURE__*/React.createElement("div", {
|
|
148
150
|
className: secondButton.largeButton ? style.largeButton : style.button
|
|
149
151
|
}, /*#__PURE__*/React.createElement(Cta, {
|
|
@@ -159,7 +161,8 @@ const CMPopin = props => {
|
|
|
159
161
|
onClick: thirdButton.handleOnclick,
|
|
160
162
|
"data-name": `cm-popin-cta-${thirdButton.type}`,
|
|
161
163
|
"aria-label": thirdButton['aria-label'],
|
|
162
|
-
type: thirdButton.type
|
|
164
|
+
type: thirdButton.type,
|
|
165
|
+
customStyle: thirdButton.customStyle
|
|
163
166
|
})) : null)));
|
|
164
167
|
};
|
|
165
168
|
|
|
@@ -172,21 +175,24 @@ CMPopin.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
172
175
|
handleOnclick: PropTypes.func,
|
|
173
176
|
'aria-label': PropTypes.string,
|
|
174
177
|
largeButton: PropTypes.bool,
|
|
175
|
-
type: PropTypes.oneOf(['dangerous', 'primary', 'secondary'])
|
|
178
|
+
type: PropTypes.oneOf(['dangerous', 'primary', 'secondary', 'tertiary']),
|
|
179
|
+
customStyle: PropTypes.object
|
|
176
180
|
}),
|
|
177
181
|
secondButton: PropTypes.shape({
|
|
178
182
|
label: PropTypes.string,
|
|
179
183
|
handleOnclick: PropTypes.func,
|
|
180
184
|
type: PropTypes.oneOf(['dangerous', 'primary', 'secondary']),
|
|
181
185
|
'aria-label': PropTypes.string,
|
|
182
|
-
largeButton: PropTypes.boolean
|
|
186
|
+
largeButton: PropTypes.boolean,
|
|
187
|
+
customStyle: PropTypes.object
|
|
183
188
|
}),
|
|
184
189
|
thirdButton: PropTypes.shape({
|
|
185
190
|
label: PropTypes.string,
|
|
186
191
|
handleOnclick: PropTypes.func,
|
|
187
192
|
type: PropTypes.oneOf(['dangerous', 'primary', 'secondary']),
|
|
188
193
|
'aria-label': PropTypes.string,
|
|
189
|
-
largeButton: PropTypes.boolean
|
|
194
|
+
largeButton: PropTypes.boolean,
|
|
195
|
+
customStyle: PropTypes.object
|
|
190
196
|
}),
|
|
191
197
|
onClose: PropTypes.func,
|
|
192
198
|
icon: PropTypes.string,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecule/cm-popin/index.js"],"names":["React","PropTypes","NovaSolidInterfaceFeedbackInterfaceAlertDiamond","AlertDiamond","NovaSolidApplicationsWindowUpload3","WindowUpload","NovaLineSettingsCookie","Cookie","map","Cta","ButtonLinkIconOnly","InputSwitch","style","CMPopin","props","content","mode","firstButton","secondButton","onClose","header","icon","backgroundImageUrl","descriptionText","thirdButton","cookieTitle","descriptionBtnTxt","listBtnSwicth","logo","LogoComponent","backgroundImageStyle","backgroundImage","backgroundSize","renderHeader","headerBackground","cookieHeader","cookieIconContainer","cookieIcon","getClassBtnSwitch","index","btnList","firstBtnSwitchContainer","length","lastBtnSwitchContainer","singleSwitchContainer","renderBtnSwitch","convert","cap","el","type","title","value","onChange","titlePosition","theme","details","requiredSelection","disabled","id","dataName","background","popinCookie","popin","popinHeader","titleContainer","contentSection","message","__html","descriptionBtn","buttonContainer","largeButton","button","label","handleOnclick","propTypes","string","oneOf","shape","func","bool","boolean","arrayOf"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond,\n NovaSolidApplicationsWindowUpload3 as WindowUpload,\n NovaLineSettingsCookie as Cookie\n} from '@coorpacademy/nova-icons';\nimport map from 'lodash/fp/map';\nimport Cta from '../../atom/button-link';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './style.css';\n\nconst CMPopin = props => {\n const {\n content,\n mode = 'alert',\n firstButton,\n secondButton,\n onClose,\n header,\n icon,\n backgroundImageUrl,\n descriptionText,\n thirdButton,\n cookieTitle,\n descriptionBtnTxt,\n listBtnSwicth\n } = props;\n\n const logo = {\n AlertDiamond,\n WindowUpload\n };\n const LogoComponent = logo[icon];\n\n const backgroundImageStyle = backgroundImageUrl\n ? {\n backgroundImage: `url(${backgroundImageUrl})`,\n backgroundSize: 'cover'\n }\n : null;\n const renderHeader = () => {\n if (header) return <img className={style.headerBackground} src={header} />;\n if (mode === 'cookie')\n return (\n <div className={style.cookieHeader}>\n <div className={style.cookieIconContainer}>\n <Cookie className={style.cookieIcon} />\n </div>\n <div className={style.cookieTitle}>{cookieTitle}</div>\n </div>\n );\n return null;\n };\n const getClassBtnSwitch = (index, btnList) => {\n switch (index) {\n case 0:\n return style.firstBtnSwitchContainer;\n case btnList.length - 1:\n return style.lastBtnSwitchContainer;\n default:\n return style.singleSwitchContainer;\n }\n };\n const renderBtnSwitch = () => {\n return map.convert({cap: false})((el, index) => {\n const {\n type,\n title,\n value,\n onChange,\n titlePosition,\n theme,\n details,\n requiredSelection,\n disabled,\n id,\n 'data-name': dataName\n } = el;\n return (\n <div key={index} className={getClassBtnSwitch(index, listBtnSwicth)}>\n <InputSwitch\n {...{\n type,\n title,\n value,\n onChange,\n titlePosition,\n theme,\n details,\n requiredSelection,\n disabled,\n id,\n 'data-name': dataName\n }}\n />\n </div>\n );\n })(listBtnSwicth);\n };\n return (\n <div\n className={mode !== 'cookie' ? style.background : null}\n style={backgroundImageStyle}\n data-name={'cm-popin-container'}\n >\n <div className={mode === 'cookie' ? style.popinCookie : style.popin}>\n <header className={style.popinHeader}>\n {renderHeader()}\n {onClose ? (\n <ButtonLinkIconOnly\n onClick={onClose}\n data-name={'close-icon'}\n aria-label={'close-icon'}\n size=\"small\"\n icon=\"close\"\n />\n ) : null}\n </header>\n <div className={style.titleContainer}>\n <div className={style.contentSection}>\n {LogoComponent ? <LogoComponent className={style.icon} /> : null}\n {content ? (\n <p\n className={mode === 'alert' ? style.content : style.message}\n data-name={'cm-popin-content'}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: content}}\n />\n ) : null}\n </div>\n {descriptionText ? (\n <p\n className={style.descriptionText}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: descriptionText}}\n />\n ) : null}\n </div>\n {descriptionBtnTxt ? <div className={style.descriptionBtn}>{descriptionBtnTxt}</div> : null}\n {renderBtnSwitch()}\n <div className={style.buttonContainer}>\n {firstButton ? (\n <div className={firstButton.largeButton ? style.largeButton : style.button}>\n <Cta\n label={firstButton.label}\n onClick={firstButton.handleOnclick}\n data-name={'cm-popin-cta'}\n aria-label={firstButton['aria-label']}\n type={firstButton.type}\n />\n </div>\n ) : null}\n {secondButton ? (\n <div className={secondButton.largeButton ? style.largeButton : style.button}>\n <Cta\n label={secondButton.label}\n onClick={secondButton.handleOnclick}\n data-name={`cm-popin-cta-${secondButton.type}`}\n aria-label={secondButton['aria-label']}\n type={secondButton.type}\n />\n </div>\n ) : null}\n {thirdButton ? (\n <div className={thirdButton.largeButton ? style.largeButton : style.button}>\n <Cta\n label={thirdButton.label}\n onClick={thirdButton.handleOnclick}\n data-name={`cm-popin-cta-${thirdButton.type}`}\n aria-label={thirdButton['aria-label']}\n type={thirdButton.type}\n />\n </div>\n ) : null}\n </div>\n </div>\n </div>\n );\n};\n\nCMPopin.propTypes = {\n content: PropTypes.string,\n mode: PropTypes.oneOf(['alert', 'information', 'cookie']),\n header: PropTypes.string,\n firstButton: PropTypes.shape({\n label: PropTypes.string,\n handleOnclick: PropTypes.func,\n 'aria-label': PropTypes.string,\n largeButton: PropTypes.bool,\n type: PropTypes.oneOf(['dangerous', 'primary', 'secondary'])\n }),\n secondButton: PropTypes.shape({\n label: PropTypes.string,\n handleOnclick: PropTypes.func,\n type: PropTypes.oneOf(['dangerous', 'primary', 'secondary']),\n 'aria-label': PropTypes.string,\n largeButton: PropTypes.boolean\n }),\n thirdButton: PropTypes.shape({\n label: PropTypes.string,\n handleOnclick: PropTypes.func,\n type: PropTypes.oneOf(['dangerous', 'primary', 'secondary']),\n 'aria-label': PropTypes.string,\n largeButton: PropTypes.boolean\n }),\n onClose: PropTypes.func,\n icon: PropTypes.string,\n backgroundImageUrl: PropTypes.string,\n descriptionText: PropTypes.string,\n cookieTitle: PropTypes.string,\n descriptionBtnTxt: PropTypes.string,\n listBtnSwicth: PropTypes.arrayOf(PropTypes.shape(InputSwitch.propTypes))\n};\n\nexport default CMPopin;\n"],"file":"index.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/cm-popin/index.js"],"names":["React","PropTypes","NovaSolidInterfaceFeedbackInterfaceAlertDiamond","AlertDiamond","NovaSolidApplicationsWindowUpload3","WindowUpload","NovaLineSettingsCookie","Cookie","NovaSolidSpaceMoonRocket","MoonRocket","map","Cta","ButtonLinkIconOnly","InputSwitch","style","CMPopin","props","content","mode","firstButton","secondButton","onClose","header","icon","backgroundImageUrl","descriptionText","thirdButton","cookieTitle","descriptionBtnTxt","listBtnSwicth","logo","LogoComponent","backgroundImageStyle","backgroundImage","backgroundSize","renderHeader","headerBackground","cookieHeader","cookieIconContainer","cookieIcon","getClassBtnSwitch","index","btnList","firstBtnSwitchContainer","length","lastBtnSwitchContainer","singleSwitchContainer","renderBtnSwitch","convert","cap","el","type","title","value","onChange","titlePosition","theme","details","requiredSelection","disabled","id","dataName","background","popinCookie","popin","popinHeader","titleContainer","contentSection","message","__html","descriptionBtn","buttonContainer","largeButton","button","label","handleOnclick","customStyle","propTypes","string","oneOf","shape","func","bool","object","boolean","arrayOf"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond,\n NovaSolidApplicationsWindowUpload3 as WindowUpload,\n NovaLineSettingsCookie as Cookie,\n NovaSolidSpaceMoonRocket as MoonRocket\n} from '@coorpacademy/nova-icons';\nimport map from 'lodash/fp/map';\nimport Cta from '../../atom/button-link';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './style.css';\n\nconst CMPopin = props => {\n const {\n content,\n mode = 'alert',\n firstButton,\n secondButton,\n onClose,\n header,\n icon,\n backgroundImageUrl,\n descriptionText,\n thirdButton,\n cookieTitle,\n descriptionBtnTxt,\n listBtnSwicth\n } = props;\n\n const logo = {\n AlertDiamond,\n WindowUpload,\n MoonRocket\n };\n const LogoComponent = logo[icon];\n\n const backgroundImageStyle = backgroundImageUrl\n ? {\n backgroundImage: `url(${backgroundImageUrl})`,\n backgroundSize: 'cover'\n }\n : null;\n const renderHeader = () => {\n if (header) return <img className={style.headerBackground} src={header} />;\n if (mode === 'cookie')\n return (\n <div className={style.cookieHeader}>\n <div className={style.cookieIconContainer}>\n <Cookie className={style.cookieIcon} />\n </div>\n <div className={style.cookieTitle}>{cookieTitle}</div>\n </div>\n );\n return null;\n };\n const getClassBtnSwitch = (index, btnList) => {\n switch (index) {\n case 0:\n return style.firstBtnSwitchContainer;\n case btnList.length - 1:\n return style.lastBtnSwitchContainer;\n default:\n return style.singleSwitchContainer;\n }\n };\n const renderBtnSwitch = () => {\n return map.convert({cap: false})((el, index) => {\n const {\n type,\n title,\n value,\n onChange,\n titlePosition,\n theme,\n details,\n requiredSelection,\n disabled,\n id,\n 'data-name': dataName\n } = el;\n return (\n <div key={index} className={getClassBtnSwitch(index, listBtnSwicth)}>\n <InputSwitch\n {...{\n type,\n title,\n value,\n onChange,\n titlePosition,\n theme,\n details,\n requiredSelection,\n disabled,\n id,\n 'data-name': dataName\n }}\n />\n </div>\n );\n })(listBtnSwicth);\n };\n return (\n <div\n className={mode !== 'cookie' ? style.background : null}\n style={backgroundImageStyle}\n data-name={'cm-popin-container'}\n >\n <div className={mode === 'cookie' ? style.popinCookie : style.popin}>\n <header className={style.popinHeader}>\n {renderHeader()}\n {onClose ? (\n <ButtonLinkIconOnly\n onClick={onClose}\n data-name={'close-icon'}\n aria-label={'close-icon'}\n size=\"small\"\n icon=\"close\"\n />\n ) : null}\n </header>\n <div className={style.titleContainer}>\n <div className={style.contentSection}>\n {LogoComponent ? <LogoComponent className={style.icon} /> : null}\n {content ? (\n <p\n className={mode === 'alert' ? style.content : style.message}\n data-name={'cm-popin-content'}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: content}}\n />\n ) : null}\n </div>\n {descriptionText ? (\n <p\n className={style.descriptionText}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: descriptionText}}\n />\n ) : null}\n </div>\n {descriptionBtnTxt ? <div className={style.descriptionBtn}>{descriptionBtnTxt}</div> : null}\n {renderBtnSwitch()}\n <div className={style.buttonContainer}>\n {firstButton ? (\n <div className={firstButton.largeButton ? style.largeButton : style.button}>\n <Cta\n label={firstButton.label}\n onClick={firstButton.handleOnclick}\n data-name={'cm-popin-cta'}\n aria-label={firstButton['aria-label']}\n type={firstButton.type}\n customStyle={firstButton.customStyle}\n />\n </div>\n ) : null}\n {secondButton ? (\n <div className={secondButton.largeButton ? style.largeButton : style.button}>\n <Cta\n label={secondButton.label}\n onClick={secondButton.handleOnclick}\n data-name={`cm-popin-cta-${secondButton.type}`}\n aria-label={secondButton['aria-label']}\n type={secondButton.type}\n />\n </div>\n ) : null}\n {thirdButton ? (\n <div className={thirdButton.largeButton ? style.largeButton : style.button}>\n <Cta\n label={thirdButton.label}\n onClick={thirdButton.handleOnclick}\n data-name={`cm-popin-cta-${thirdButton.type}`}\n aria-label={thirdButton['aria-label']}\n type={thirdButton.type}\n customStyle={thirdButton.customStyle}\n />\n </div>\n ) : null}\n </div>\n </div>\n </div>\n );\n};\n\nCMPopin.propTypes = {\n content: PropTypes.string,\n mode: PropTypes.oneOf(['alert', 'information', 'cookie']),\n header: PropTypes.string,\n firstButton: PropTypes.shape({\n label: PropTypes.string,\n handleOnclick: PropTypes.func,\n 'aria-label': PropTypes.string,\n largeButton: PropTypes.bool,\n type: PropTypes.oneOf(['dangerous', 'primary', 'secondary', 'tertiary']),\n customStyle: PropTypes.object\n }),\n secondButton: PropTypes.shape({\n label: PropTypes.string,\n handleOnclick: PropTypes.func,\n type: PropTypes.oneOf(['dangerous', 'primary', 'secondary']),\n 'aria-label': PropTypes.string,\n largeButton: PropTypes.boolean,\n customStyle: PropTypes.object\n }),\n thirdButton: PropTypes.shape({\n label: PropTypes.string,\n handleOnclick: PropTypes.func,\n type: PropTypes.oneOf(['dangerous', 'primary', 'secondary']),\n 'aria-label': PropTypes.string,\n largeButton: PropTypes.boolean,\n customStyle: PropTypes.object\n }),\n onClose: PropTypes.func,\n icon: PropTypes.string,\n backgroundImageUrl: PropTypes.string,\n descriptionText: PropTypes.string,\n cookieTitle: PropTypes.string,\n descriptionBtnTxt: PropTypes.string,\n listBtnSwicth: PropTypes.arrayOf(PropTypes.shape(InputSwitch.propTypes))\n};\n\nexport default CMPopin;\n"],"file":"index.js"}
|
|
@@ -114,6 +114,7 @@
|
|
|
114
114
|
}
|
|
115
115
|
|
|
116
116
|
.button {
|
|
117
|
+
min-width: max-content;
|
|
117
118
|
width: 160px;
|
|
118
119
|
padding: 8px;
|
|
119
120
|
}
|
|
@@ -267,7 +268,31 @@ a {
|
|
|
267
268
|
.popinCookie .largeButton {
|
|
268
269
|
padding: 0px 8px 0px 0px
|
|
269
270
|
}
|
|
271
|
+
|
|
270
272
|
@media tablet {
|
|
273
|
+
.popin {
|
|
274
|
+
position: fixed;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.popin {
|
|
278
|
+
width: 80%;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.buttonContainer {
|
|
282
|
+
display: flex;
|
|
283
|
+
flex-wrap: wrap-reverse;
|
|
284
|
+
margin: 48px 24px 32px 24px;
|
|
285
|
+
width: 85%;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.button {
|
|
289
|
+
width: 100%;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.titleContainer {
|
|
293
|
+
width: 85%;
|
|
294
|
+
}
|
|
295
|
+
|
|
271
296
|
.popinCookie {
|
|
272
297
|
position: fixed;
|
|
273
298
|
bottom: 10px;
|
|
@@ -281,15 +306,52 @@ a {
|
|
|
281
306
|
width: 100%;
|
|
282
307
|
padding: 0px 0px 8px 0px
|
|
283
308
|
}
|
|
284
|
-
|
|
285
|
-
flex-wrap: wrap;
|
|
286
|
-
margin-top: 40px;
|
|
287
|
-
}
|
|
309
|
+
|
|
288
310
|
.popinCookie .largeButton {
|
|
289
311
|
padding: 8px 0px 0px 0px
|
|
290
312
|
}
|
|
291
313
|
.popinCookie .message {
|
|
292
314
|
padding: 24px 24px 0px 24px
|
|
293
315
|
}
|
|
294
|
-
|
|
316
|
+
|
|
317
|
+
@media mobile {
|
|
318
|
+
.popin {
|
|
319
|
+
position: fixed;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.popin {
|
|
323
|
+
width: 80%;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.buttonContainer {
|
|
327
|
+
display: flex;
|
|
328
|
+
margin: 48px 24px 32px 24px;
|
|
329
|
+
width: 85%;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.button {
|
|
333
|
+
width: 100%;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.titleContainer {
|
|
337
|
+
width: 85%;
|
|
338
|
+
}
|
|
339
|
+
}
|
|
295
340
|
}
|
|
341
|
+
|
|
342
|
+
/* ie11 style */
|
|
343
|
+
_:-ms-fullscreen,
|
|
344
|
+
.popinHeader
|
|
345
|
+
button {
|
|
346
|
+
position: relative;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
_:-ms-fullscreen,
|
|
350
|
+
.descriptionText {
|
|
351
|
+
width: 85%;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
_:-ms-fullscreen,
|
|
355
|
+
.button {
|
|
356
|
+
width: 40%;
|
|
357
|
+
}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
|
2
|
+
import { View, StyleSheet } from 'react-native';
|
|
3
|
+
import { NovaCompositionCoorpacademySearch as SearchIcon, NovaCompositionCoorpacademyCog as SettingsIcon } from '@coorpacademy/nova-icons';
|
|
4
|
+
import { useTemplateContext } from '../../template/app-review/template-context';
|
|
5
|
+
import BrandLogo from '../../molecule/brand-logo/index.native';
|
|
6
|
+
import Gradient from '../../atom/gradient/index.native';
|
|
7
|
+
import Touchable from '../../hoc/touchable/index.native';
|
|
8
|
+
export const HEADER_HEIGHT = 67;
|
|
9
|
+
const ICON_WIDTH = 20;
|
|
10
|
+
|
|
11
|
+
const createStyleSheet = theme => StyleSheet.create({
|
|
12
|
+
container: {
|
|
13
|
+
position: 'absolute',
|
|
14
|
+
backgroundColor: theme.colors.white,
|
|
15
|
+
flexDirection: 'row',
|
|
16
|
+
alignItems: 'center',
|
|
17
|
+
justifyContent: 'space-between',
|
|
18
|
+
height: HEADER_HEIGHT,
|
|
19
|
+
top: 0,
|
|
20
|
+
width: '100%'
|
|
21
|
+
},
|
|
22
|
+
icons: {
|
|
23
|
+
flexDirection: 'row'
|
|
24
|
+
},
|
|
25
|
+
icon: {
|
|
26
|
+
marginRight: 16
|
|
27
|
+
},
|
|
28
|
+
logo: {
|
|
29
|
+
width: 80,
|
|
30
|
+
marginLeft: 16
|
|
31
|
+
},
|
|
32
|
+
gradient: {
|
|
33
|
+
position: 'absolute',
|
|
34
|
+
left: 0,
|
|
35
|
+
top: HEADER_HEIGHT,
|
|
36
|
+
right: 0,
|
|
37
|
+
opacity: 0.3
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
const Header = props => {
|
|
42
|
+
const templateContext = useTemplateContext();
|
|
43
|
+
const [styleSheet, setStylesheet] = useState(null);
|
|
44
|
+
const {
|
|
45
|
+
theme
|
|
46
|
+
} = templateContext;
|
|
47
|
+
const {
|
|
48
|
+
onSearchPress,
|
|
49
|
+
onSettingsPress,
|
|
50
|
+
onLogoLongPress
|
|
51
|
+
} = props;
|
|
52
|
+
const logoHeight = HEADER_HEIGHT - theme.spacing.small * 2;
|
|
53
|
+
useEffect(() => {
|
|
54
|
+
const _stylesheet = createStyleSheet(theme);
|
|
55
|
+
|
|
56
|
+
setStylesheet(_stylesheet);
|
|
57
|
+
}, [theme]); // ------------------------------------
|
|
58
|
+
|
|
59
|
+
if (!styleSheet) {
|
|
60
|
+
return null;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
64
|
+
style: [styleSheet.container],
|
|
65
|
+
testID: "header"
|
|
66
|
+
}, /*#__PURE__*/React.createElement(Gradient, {
|
|
67
|
+
height: theme.spacing.tiny,
|
|
68
|
+
colors: [theme.colors.gray.medium, theme.colors.gray.light],
|
|
69
|
+
transparencyPosition: "bottom",
|
|
70
|
+
style: styleSheet.gradient
|
|
71
|
+
}), /*#__PURE__*/React.createElement(View, {
|
|
72
|
+
style: styleSheet.logo
|
|
73
|
+
}, /*#__PURE__*/React.createElement(Touchable, {
|
|
74
|
+
testID: "header-logo",
|
|
75
|
+
onLongPress: onLogoLongPress,
|
|
76
|
+
analyticsID: "sign-out",
|
|
77
|
+
isWithoutFeedback: true
|
|
78
|
+
}, /*#__PURE__*/React.createElement(BrandLogo, {
|
|
79
|
+
height: logoHeight
|
|
80
|
+
}))), /*#__PURE__*/React.createElement(View, {
|
|
81
|
+
style: [styleSheet.icons]
|
|
82
|
+
}, /*#__PURE__*/React.createElement(Touchable, {
|
|
83
|
+
testID: "search-icon",
|
|
84
|
+
onPress: onSearchPress,
|
|
85
|
+
analyticsID: "search-icon"
|
|
86
|
+
}, /*#__PURE__*/React.createElement(SearchIcon, {
|
|
87
|
+
height: ICON_WIDTH,
|
|
88
|
+
width: ICON_WIDTH,
|
|
89
|
+
color: theme.colors.gray.dark,
|
|
90
|
+
style: styleSheet.icon
|
|
91
|
+
})), /*#__PURE__*/React.createElement(Touchable, {
|
|
92
|
+
testID: "settings-icon",
|
|
93
|
+
onPress: onSettingsPress,
|
|
94
|
+
analyticsID: "settings-icon"
|
|
95
|
+
}, /*#__PURE__*/React.createElement(SettingsIcon, {
|
|
96
|
+
height: ICON_WIDTH,
|
|
97
|
+
width: ICON_WIDTH,
|
|
98
|
+
color: theme.colors.gray.dark,
|
|
99
|
+
style: styleSheet.icon
|
|
100
|
+
}))));
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
export default Header;
|
|
104
|
+
//# sourceMappingURL=index.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/organism/header-v2/index.native.tsx"],"names":["React","useState","useEffect","View","StyleSheet","NovaCompositionCoorpacademySearch","SearchIcon","NovaCompositionCoorpacademyCog","SettingsIcon","useTemplateContext","BrandLogo","Gradient","Touchable","HEADER_HEIGHT","ICON_WIDTH","createStyleSheet","theme","create","container","position","backgroundColor","colors","white","flexDirection","alignItems","justifyContent","height","top","width","icons","icon","marginRight","logo","marginLeft","gradient","left","right","opacity","Header","props","templateContext","styleSheet","setStylesheet","onSearchPress","onSettingsPress","onLogoLongPress","logoHeight","spacing","small","_stylesheet","tiny","gray","medium","light","dark"],"mappings":"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","sourcesContent":["import React, {useState, useEffect} from 'react';\nimport type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';\n\nimport {View, StyleSheet} from 'react-native';\nimport {\n NovaCompositionCoorpacademySearch as SearchIcon,\n NovaCompositionCoorpacademyCog as SettingsIcon\n} from '@coorpacademy/nova-icons';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport BrandLogo from '../../molecule/brand-logo/index.native';\nimport Gradient from '../../atom/gradient/index.native';\nimport Touchable from '../../hoc/touchable/index.native';\nimport {FlexAlignType, FlexDirection, JustifyContent, Position} from '../../types/styles';\nimport {Theme} from '../../variables/theme.native';\n\nexport interface Props {\n onSearchPress: (event: PressEvent) => any;\n onSettingsPress: (event: PressEvent) => any;\n onLogoLongPress: (event: PressEvent) => any;\n}\n\nexport const HEADER_HEIGHT = 67;\nconst ICON_WIDTH = 20;\n\ntype StyleSheetType = {\n container: {\n position: Position;\n backgroundColor: string;\n flexDirection: FlexDirection;\n alignItems: FlexAlignType;\n justifyContent: JustifyContent;\n height: string | number;\n top: number;\n width: string | number;\n };\n icons: {\n flexDirection: FlexDirection;\n };\n icon: {\n marginRight: number;\n };\n logo: {\n width: number;\n marginLeft: number;\n };\n gradient: {\n position: Position;\n left: number;\n top: number;\n right: number;\n opacity: number;\n };\n};\n\nconst createStyleSheet = (theme: Theme) =>\n StyleSheet.create({\n container: {\n position: 'absolute',\n backgroundColor: theme.colors.white,\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n height: HEADER_HEIGHT,\n top: 0,\n width: '100%'\n },\n icons: {\n flexDirection: 'row'\n },\n icon: {\n marginRight: 16\n },\n logo: {\n width: 80,\n marginLeft: 16\n },\n gradient: {\n position: 'absolute',\n left: 0,\n top: HEADER_HEIGHT,\n right: 0,\n opacity: 0.3\n }\n });\n\nconst Header = (props: Props) => {\n const templateContext = useTemplateContext();\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n const {theme} = templateContext;\n\n const {onSearchPress, onSettingsPress, onLogoLongPress} = props;\n const logoHeight = HEADER_HEIGHT - theme.spacing.small * 2;\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n // ------------------------------------\n\n if (!styleSheet) {\n return null;\n }\n\n return (\n <View style={[styleSheet.container]} testID=\"header\">\n <Gradient\n height={theme.spacing.tiny}\n colors={[theme.colors.gray.medium, theme.colors.gray.light]}\n transparencyPosition=\"bottom\"\n style={styleSheet.gradient}\n />\n <View style={styleSheet.logo}>\n <Touchable\n testID=\"header-logo\"\n onLongPress={onLogoLongPress}\n analyticsID=\"sign-out\"\n isWithoutFeedback\n >\n <BrandLogo height={logoHeight} />\n </Touchable>\n </View>\n <View style={[styleSheet.icons]}>\n <Touchable testID=\"search-icon\" onPress={onSearchPress} analyticsID=\"search-icon\">\n <SearchIcon\n height={ICON_WIDTH}\n width={ICON_WIDTH}\n color={theme.colors.gray.dark}\n style={styleSheet.icon}\n />\n </Touchable>\n <Touchable testID=\"settings-icon\" onPress={onSettingsPress} analyticsID=\"settings-icon\">\n <SettingsIcon\n height={ICON_WIDTH}\n width={ICON_WIDTH}\n color={theme.colors.gray.dark}\n style={styleSheet.icon}\n />\n </Touchable>\n </View>\n </View>\n );\n};\n\nexport default Header;\n"],"file":"index.native.js"}
|
|
@@ -139,7 +139,17 @@ _:-ms-fullscreen, :root .correctionPopinWrapper {
|
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
.disabledSlideContent {
|
|
142
|
-
|
|
142
|
+
position: inherit;
|
|
143
|
+
}
|
|
144
|
+
.disabledSlideContent::after {
|
|
145
|
+
content: '';
|
|
146
|
+
top: 0px;
|
|
147
|
+
left: 0px;
|
|
148
|
+
bottom: 0px;
|
|
149
|
+
right: 0px;
|
|
150
|
+
position:absolute;
|
|
151
|
+
opacity: 0;
|
|
152
|
+
pointer-events: fill;
|
|
143
153
|
}
|
|
144
154
|
|
|
145
155
|
@media tablet {
|
|
@@ -16,14 +16,16 @@ const SlidesHeader = (props = {}, context = undefined) => {
|
|
|
16
16
|
type,
|
|
17
17
|
content,
|
|
18
18
|
subcontent,
|
|
19
|
-
lives
|
|
19
|
+
lives,
|
|
20
|
+
mode
|
|
20
21
|
} = props;
|
|
21
22
|
return /*#__PURE__*/React.createElement("div", {
|
|
22
23
|
"data-name": "slidesHeader",
|
|
23
24
|
className: style.wrapper
|
|
24
25
|
}, type === HEADER_TYPE.LEARNER ? /*#__PURE__*/React.createElement(Learner, {
|
|
25
26
|
content: content,
|
|
26
|
-
subcontent: subcontent
|
|
27
|
+
subcontent: subcontent,
|
|
28
|
+
mode: mode
|
|
27
29
|
}) : null, type === HEADER_TYPE.MICROLEARNING ? /*#__PURE__*/React.createElement(Microlearning, {
|
|
28
30
|
content: content
|
|
29
31
|
}) : null, lives ? /*#__PURE__*/React.createElement(Lives, {
|
|
@@ -42,7 +44,8 @@ SlidesHeader.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
42
44
|
title: PropTypes.string,
|
|
43
45
|
details: PropTypes.string
|
|
44
46
|
}),
|
|
45
|
-
lives: PropTypes.shape(Lives.propTypes)
|
|
47
|
+
lives: PropTypes.shape(Lives.propTypes),
|
|
48
|
+
mode: PropTypes.string
|
|
46
49
|
} : {};
|
|
47
50
|
export default SlidesHeader;
|
|
48
51
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/template/app-player/player/slides/header/index.js"],"names":["React","PropTypes","Link","Learner","Microlearning","Lives","style","HEADER_TYPE","LEARNER","MICROLEARNING","SlidesHeader","props","context","undefined","type","content","subcontent","lives","wrapper","count","propTypes","oneOf","shape","href","title","string","isRequired","details"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,0BAAjB;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,KAAP,MAAkB,SAAlB;AACA,OAAOC,KAAP,MAAkB,aAAlB,C,CAAiC;;AAEjC,MAAMC,WAAW,GAAG;AAClBC,EAAAA,OAAO,EAAE,SADS;AAElBC,EAAAA,aAAa,EAAE;AAFG,CAApB;;AAKA,MAAMC,YAAY,GAAG,CAACC,KAAK,GAAG,EAAT,EAAaC,OAAO,GAAGC,SAAvB,KAAqC;AACxD,QAAM;AAACC,IAAAA,IAAD;AAAOC,IAAAA,OAAP;AAAgBC,IAAAA,UAAhB;AAA4BC,IAAAA;
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/template/app-player/player/slides/header/index.js"],"names":["React","PropTypes","Link","Learner","Microlearning","Lives","style","HEADER_TYPE","LEARNER","MICROLEARNING","SlidesHeader","props","context","undefined","type","content","subcontent","lives","mode","wrapper","count","propTypes","oneOf","shape","href","title","string","isRequired","details"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,0BAAjB;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,KAAP,MAAkB,SAAlB;AACA,OAAOC,KAAP,MAAkB,aAAlB,C,CAAiC;;AAEjC,MAAMC,WAAW,GAAG;AAClBC,EAAAA,OAAO,EAAE,SADS;AAElBC,EAAAA,aAAa,EAAE;AAFG,CAApB;;AAKA,MAAMC,YAAY,GAAG,CAACC,KAAK,GAAG,EAAT,EAAaC,OAAO,GAAGC,SAAvB,KAAqC;AACxD,QAAM;AAACC,IAAAA,IAAD;AAAOC,IAAAA,OAAP;AAAgBC,IAAAA,UAAhB;AAA4BC,IAAAA,KAA5B;AAAmCC,IAAAA;AAAnC,MAA2CP,KAAjD;AAEA,sBACE;AAAK,iBAAU,cAAf;AAA8B,IAAA,SAAS,EAAEL,KAAK,CAACa;AAA/C,KACGL,IAAI,KAAKP,WAAW,CAACC,OAArB,gBACC,oBAAC,OAAD;AAAS,IAAA,OAAO,EAAEO,OAAlB;AAA2B,IAAA,UAAU,EAAEC,UAAvC;AAAmD,IAAA,IAAI,EAAEE;AAAzD,IADD,GAEG,IAHN,EAIGJ,IAAI,KAAKP,WAAW,CAACE,aAArB,gBAAqC,oBAAC,aAAD;AAAe,IAAA,OAAO,EAAEM;AAAxB,IAArC,GAA2E,IAJ9E,EAKGE,KAAK,gBAAG,oBAAC,KAAD;AAAO,IAAA,KAAK,EAAEA,KAAK,CAACG;AAApB,IAAH,GAAmC,IAL3C,CADF;AASD,CAZD;;AAcAV,YAAY,CAACW,SAAb,2CAAyB;AACvBP,EAAAA,IAAI,EAAEb,SAAS,CAACqB,KAAV,CAAgB,CAACf,WAAW,CAACC,OAAb,EAAsBD,WAAW,CAACE,aAAlC,CAAhB,CADiB;AAEvBM,EAAAA,OAAO,EAAEd,SAAS,CAACsB,KAAV,CAAgB;AACvBC,IAAAA,IAAI,EAAEtB,IAAI,CAACmB,SAAL,CAAeG,IADE;AAEvBC,IAAAA,KAAK,EAAExB,SAAS,CAACyB,MAAV,CAAiBC,UAFD;AAGvBC,IAAAA,OAAO,EAAE3B,SAAS,CAACyB;AAHI,GAAhB,CAFc;AAOvBV,EAAAA,UAAU,EAAEf,SAAS,CAACsB,KAAV,CAAgB;AAC1BE,IAAAA,KAAK,EAAExB,SAAS,CAACyB,MADS;AAE1BE,IAAAA,OAAO,EAAE3B,SAAS,CAACyB;AAFO,GAAhB,CAPW;AAWvBT,EAAAA,KAAK,EAAEhB,SAAS,CAACsB,KAAV,CAAgBlB,KAAK,CAACgB,SAAtB,CAXgB;AAYvBH,EAAAA,IAAI,EAAEjB,SAAS,CAACyB;AAZO,CAAzB;AAeA,eAAehB,YAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Link from '../../../../../atom/link';\nimport Learner from './learner';\nimport Microlearning from './microlearning';\nimport Lives from './lives';\nimport style from './style.css'; // eslint-disable-line css-modules/no-unused-class\n\nconst HEADER_TYPE = {\n LEARNER: 'learner',\n MICROLEARNING: 'microlearning'\n};\n\nconst SlidesHeader = (props = {}, context = undefined) => {\n const {type, content, subcontent, lives, mode} = props;\n\n return (\n <div data-name=\"slidesHeader\" className={style.wrapper}>\n {type === HEADER_TYPE.LEARNER ? (\n <Learner content={content} subcontent={subcontent} mode={mode} />\n ) : null}\n {type === HEADER_TYPE.MICROLEARNING ? <Microlearning content={content} /> : null}\n {lives ? <Lives count={lives.count} /> : null}\n </div>\n );\n};\n\nSlidesHeader.propTypes = {\n type: PropTypes.oneOf([HEADER_TYPE.LEARNER, HEADER_TYPE.MICROLEARNING]),\n content: PropTypes.shape({\n href: Link.propTypes.href,\n title: PropTypes.string.isRequired,\n details: PropTypes.string\n }),\n subcontent: PropTypes.shape({\n title: PropTypes.string,\n details: PropTypes.string\n }),\n lives: PropTypes.shape(Lives.propTypes),\n mode: PropTypes.string\n};\n\nexport default SlidesHeader;\n"],"file":"index.js"}
|
|
@@ -92,6 +92,16 @@
|
|
|
92
92
|
composes: innerHTML from '../../../../../atom/label/style.css';
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
+
.contentWrapperScorm {
|
|
96
|
+
composes: contentWrapper;
|
|
97
|
+
cursor: default;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.contentWrapperScorm:hover {
|
|
101
|
+
color: dark;
|
|
102
|
+
stroke: dark;
|
|
103
|
+
}
|
|
104
|
+
|
|
95
105
|
@media mobile {
|
|
96
106
|
.contentWrapper {
|
|
97
107
|
max-width: 90%;
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import _get from "lodash/fp/get";
|
|
2
|
+
|
|
3
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
|
+
|
|
2
5
|
import React from 'react';
|
|
3
6
|
import PropTypes from 'prop-types';
|
|
4
7
|
import classnames from 'classnames';
|
|
@@ -7,10 +10,37 @@ import Link from '../../../../../atom/link';
|
|
|
7
10
|
import Provider from '../../../../../atom/provider';
|
|
8
11
|
import style from './learner.css';
|
|
9
12
|
|
|
13
|
+
const LearnerHeaderWrapper = props => {
|
|
14
|
+
const {
|
|
15
|
+
children,
|
|
16
|
+
mode,
|
|
17
|
+
onClick
|
|
18
|
+
} = props;
|
|
19
|
+
if (mode === 'scorm') return /*#__PURE__*/React.createElement("div", {
|
|
20
|
+
className: style.contentWrapperScorm
|
|
21
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
22
|
+
className: style.backIcon
|
|
23
|
+
}), children);
|
|
24
|
+
return /*#__PURE__*/React.createElement(Link, {
|
|
25
|
+
onClick: onClick,
|
|
26
|
+
className: style.contentWrapper
|
|
27
|
+
}, /*#__PURE__*/React.createElement(BackIcon, {
|
|
28
|
+
className: style.backIcon,
|
|
29
|
+
color: "inherit"
|
|
30
|
+
}), children);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
LearnerHeaderWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
34
|
+
onClick: Link.propTypes.onClick,
|
|
35
|
+
mode: PropTypes.string,
|
|
36
|
+
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
|
|
37
|
+
} : {};
|
|
38
|
+
|
|
10
39
|
const Content = ({
|
|
11
40
|
onClick,
|
|
12
41
|
title,
|
|
13
|
-
details
|
|
42
|
+
details,
|
|
43
|
+
mode
|
|
14
44
|
}, context) => {
|
|
15
45
|
const {
|
|
16
46
|
skin
|
|
@@ -18,13 +48,10 @@ const Content = ({
|
|
|
18
48
|
|
|
19
49
|
const primarySkinColor = _get('common.primary', skin);
|
|
20
50
|
|
|
21
|
-
return /*#__PURE__*/React.createElement(
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}, /*#__PURE__*/React.createElement(
|
|
25
|
-
className: style.backIcon,
|
|
26
|
-
color: "inherit"
|
|
27
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
51
|
+
return /*#__PURE__*/React.createElement(LearnerHeaderWrapper, {
|
|
52
|
+
mode: mode,
|
|
53
|
+
onClick: onClick
|
|
54
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
28
55
|
className: style.content
|
|
29
56
|
}, /*#__PURE__*/React.createElement("div", {
|
|
30
57
|
className: style.contentDetails,
|
|
@@ -47,7 +74,8 @@ Content.contextTypes = {
|
|
|
47
74
|
Content.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
48
75
|
onClick: Link.propTypes.onClick,
|
|
49
76
|
title: PropTypes.string.isRequired,
|
|
50
|
-
details: PropTypes.string
|
|
77
|
+
details: PropTypes.string,
|
|
78
|
+
mode: PropTypes.string
|
|
51
79
|
} : {};
|
|
52
80
|
|
|
53
81
|
const Subcontent = ({
|
|
@@ -73,16 +101,20 @@ Subcontent.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
73
101
|
const LearnerHeader = (props, context) => {
|
|
74
102
|
const {
|
|
75
103
|
content,
|
|
76
|
-
subcontent
|
|
104
|
+
subcontent,
|
|
105
|
+
mode
|
|
77
106
|
} = props;
|
|
78
107
|
return /*#__PURE__*/React.createElement("div", {
|
|
79
108
|
className: style.wrapper
|
|
80
|
-
}, /*#__PURE__*/React.createElement(Content,
|
|
109
|
+
}, /*#__PURE__*/React.createElement(Content, _extends({}, content, {
|
|
110
|
+
mode: mode
|
|
111
|
+
})), /*#__PURE__*/React.createElement(Subcontent, subcontent));
|
|
81
112
|
};
|
|
82
113
|
|
|
83
114
|
LearnerHeader.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
84
115
|
content: PropTypes.shape(Content.propTypes).isRequired,
|
|
85
|
-
subcontent: PropTypes.shape(Subcontent.propTypes).isRequired
|
|
116
|
+
subcontent: PropTypes.shape(Subcontent.propTypes).isRequired,
|
|
117
|
+
mode: PropTypes.string
|
|
86
118
|
} : {};
|
|
87
119
|
export default LearnerHeader;
|
|
88
120
|
//# sourceMappingURL=learner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/template/app-player/player/slides/header/learner.js"],"names":["React","PropTypes","classnames","NovaCompositionNavigationArrowLeft","BackIcon","Link","Provider","style","
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/template/app-player/player/slides/header/learner.js"],"names":["React","PropTypes","classnames","NovaCompositionNavigationArrowLeft","BackIcon","Link","Provider","style","LearnerHeaderWrapper","props","children","mode","onClick","contentWrapperScorm","backIcon","contentWrapper","propTypes","string","oneOfType","arrayOf","node","isRequired","Content","title","details","context","skin","primarySkinColor","content","contentDetails","color","contentTitle","innerHTML","__html","contextTypes","childContextTypes","Subcontent","subcontent","subcontentDetails","subcontentTitle","LearnerHeader","wrapper","shape"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAAQC,kCAAkC,IAAIC,QAA9C,QAA6D,0BAA7D;AACA,OAAOC,IAAP,MAAiB,0BAAjB;AACA,OAAOC,QAAP,MAAqB,8BAArB;AACA,OAAOC,KAAP,MAAkB,eAAlB;;AAEA,MAAMC,oBAAoB,GAAGC,KAAK,IAAI;AACpC,QAAM;AAACC,IAAAA,QAAD;AAAWC,IAAAA,IAAX;AAAiBC,IAAAA;AAAjB,MAA4BH,KAAlC;AACA,MAAIE,IAAI,KAAK,OAAb,EACE,oBACE;AAAK,IAAA,SAAS,EAAEJ,KAAK,CAACM;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEN,KAAK,CAACO;AAAtB,IADF,EAEGJ,QAFH,CADF;AAMF,sBACE,oBAAC,IAAD;AAAM,IAAA,OAAO,EAAEE,OAAf;AAAwB,IAAA,SAAS,EAAEL,KAAK,CAACQ;AAAzC,kBACE,oBAAC,QAAD;AAAU,IAAA,SAAS,EAAER,KAAK,CAACO,QAA3B;AAAqC,IAAA,KAAK,EAAC;AAA3C,IADF,EAEGJ,QAFH,CADF;AAMD,CAfD;;AAiBAF,oBAAoB,CAACQ,SAArB,2CAAiC;AAC/BJ,EAAAA,OAAO,EAAEP,IAAI,CAACW,SAAL,CAAeJ,OADO;AAE/BD,EAAAA,IAAI,EAAEV,SAAS,CAACgB,MAFe;AAG/BP,EAAAA,QAAQ,EAAET,SAAS,CAACiB,SAAV,CAAoB,CAACjB,SAAS,CAACkB,OAAV,CAAkBlB,SAAS,CAACmB,IAA5B,CAAD,EAAoCnB,SAAS,CAACmB,IAA9C,CAApB,EAAyEC;AAHpD,CAAjC;;AAMA,MAAMC,OAAO,GAAG,CAAC;AAACV,EAAAA,OAAD;AAAUW,EAAAA,KAAV;AAAiBC,EAAAA,OAAjB;AAA0Bb,EAAAA;AAA1B,CAAD,EAAkCc,OAAlC,KAA8C;AAC5D,QAAM;AAACC,IAAAA;AAAD,MAASD,OAAf;;AACA,QAAME,gBAAgB,GAAG,KAAI,gBAAJ,EAAsBD,IAAtB,CAAzB;;AAEA,sBACE,oBAAC,oBAAD;AAAsB,IAAA,IAAI,EAAEf,IAA5B;AAAkC,IAAA,OAAO,EAAEC;AAA3C,kBACE;AAAK,IAAA,SAAS,EAAEL,KAAK,CAACqB;AAAtB,kBACE;AACE,IAAA,SAAS,EAAErB,KAAK,CAACsB,cADnB;AAEE,IAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAEH;AADF;AAFT,KAMGH,OANH,CADF,eAUE;AACE,iBAAU,cADZ;AAEE,IAAA,SAAS,EAAEtB,UAAU,CAACK,KAAK,CAACwB,YAAP,EAAqBxB,KAAK,CAACyB,SAA3B,CAFvB,CAGE;AAHF;AAIE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEV;AAAT;AAJ3B,IAVF,CADF,CADF;AAqBD,CAzBD;;AA2BAD,OAAO,CAACY,YAAR,GAAuB;AACrBR,EAAAA,IAAI,EAAEpB,QAAQ,CAAC6B,iBAAT,CAA2BT;AADZ,CAAvB;AAIAJ,OAAO,CAACN,SAAR,2CAAoB;AAClBJ,EAAAA,OAAO,EAAEP,IAAI,CAACW,SAAL,CAAeJ,OADN;AAElBW,EAAAA,KAAK,EAAEtB,SAAS,CAACgB,MAAV,CAAiBI,UAFN;AAGlBG,EAAAA,OAAO,EAAEvB,SAAS,CAACgB,MAHD;AAIlBN,EAAAA,IAAI,EAAEV,SAAS,CAACgB;AAJE,CAApB;;AAOA,MAAMmB,UAAU,GAAG,CAAC;AAACb,EAAAA,KAAD;AAAQC,EAAAA;AAAR,CAAD,EAAmBC,OAAnB,kBACjB;AAAK,EAAA,SAAS,EAAElB,KAAK,CAAC8B;AAAtB,gBACE;AAAK,EAAA,SAAS,EAAE9B,KAAK,CAAC+B;AAAtB,GAA0Cd,OAA1C,CADF,eAEE;AACE,EAAA,SAAS,EAAEtB,UAAU,CAACK,KAAK,CAACgC,eAAP,EAAwBhC,KAAK,CAACyB,SAA9B,CADvB,CAEE;AAFF;AAGE,EAAA,uBAAuB,EAAE;AAACC,IAAAA,MAAM,EAAEV;AAAT;AAH3B,EAFF,CADF;;AAWAa,UAAU,CAACpB,SAAX,2CAAuB;AACrBO,EAAAA,KAAK,EAAEtB,SAAS,CAACgB,MAAV,CAAiBI,UADH;AAErBG,EAAAA,OAAO,EAAEvB,SAAS,CAACgB;AAFE,CAAvB;;AAKA,MAAMuB,aAAa,GAAG,CAAC/B,KAAD,EAAQgB,OAAR,KAAoB;AACxC,QAAM;AAACG,IAAAA,OAAD;AAAUS,IAAAA,UAAV;AAAsB1B,IAAAA;AAAtB,MAA8BF,KAApC;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEF,KAAK,CAACkC;AAAtB,kBACE,oBAAC,OAAD,eAAab,OAAb;AAAsB,IAAA,IAAI,EAAEjB;AAA5B,KADF,eAEE,oBAAC,UAAD,EAAgB0B,UAAhB,CAFF,CADF;AAMD,CATD;;AAWAG,aAAa,CAACxB,SAAd,2CAA0B;AACxBY,EAAAA,OAAO,EAAE3B,SAAS,CAACyC,KAAV,CAAgBpB,OAAO,CAACN,SAAxB,EAAmCK,UADpB;AAExBgB,EAAAA,UAAU,EAAEpC,SAAS,CAACyC,KAAV,CAAgBN,UAAU,CAACpB,SAA3B,EAAsCK,UAF1B;AAGxBV,EAAAA,IAAI,EAAEV,SAAS,CAACgB;AAHQ,CAA1B;AAMA,eAAeuB,aAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {NovaCompositionNavigationArrowLeft as BackIcon} from '@coorpacademy/nova-icons';\nimport Link from '../../../../../atom/link';\nimport Provider from '../../../../../atom/provider';\nimport style from './learner.css';\n\nconst LearnerHeaderWrapper = props => {\n const {children, mode, onClick} = props;\n if (mode === 'scorm')\n return (\n <div className={style.contentWrapperScorm}>\n <div className={style.backIcon} />\n {children}\n </div>\n );\n return (\n <Link onClick={onClick} className={style.contentWrapper}>\n <BackIcon className={style.backIcon} color=\"inherit\" />\n {children}\n </Link>\n );\n};\n\nLearnerHeaderWrapper.propTypes = {\n onClick: Link.propTypes.onClick,\n mode: PropTypes.string,\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired\n};\n\nconst Content = ({onClick, title, details, mode}, context) => {\n const {skin} = context;\n const primarySkinColor = get('common.primary', skin);\n\n return (\n <LearnerHeaderWrapper mode={mode} onClick={onClick}>\n <div className={style.content}>\n <div\n className={style.contentDetails}\n style={{\n color: primarySkinColor\n }}\n >\n {details}\n </div>\n\n <span\n data-name=\"contentTitle\"\n className={classnames(style.contentTitle, style.innerHTML)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n </div>\n </LearnerHeaderWrapper>\n );\n};\n\nContent.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nContent.propTypes = {\n onClick: Link.propTypes.onClick,\n title: PropTypes.string.isRequired,\n details: PropTypes.string,\n mode: PropTypes.string\n};\n\nconst Subcontent = ({title, details}, context) => (\n <div className={style.subcontent}>\n <div className={style.subcontentDetails}>{details}</div>\n <div\n className={classnames(style.subcontentTitle, style.innerHTML)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n </div>\n);\n\nSubcontent.propTypes = {\n title: PropTypes.string.isRequired,\n details: PropTypes.string\n};\n\nconst LearnerHeader = (props, context) => {\n const {content, subcontent, mode} = props;\n\n return (\n <div className={style.wrapper}>\n <Content {...content} mode={mode} />\n <Subcontent {...subcontent} />\n </div>\n );\n};\n\nLearnerHeader.propTypes = {\n content: PropTypes.shape(Content.propTypes).isRequired,\n subcontent: PropTypes.shape(Subcontent.propTypes).isRequired,\n mode: PropTypes.string\n};\n\nexport default LearnerHeader;\n"],"file":"learner.js"}
|