@coorpacademy/components 11.10.3 → 11.10.4-alpha.1
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/input-switch/index.js +2 -1
- package/es/atom/input-switch/index.js.map +1 -1
- package/es/atom/link/index.d.ts +7 -15
- package/es/atom/link/index.d.ts.map +1 -1
- package/es/atom/link/index.js +71 -97
- package/es/atom/link/index.js.map +1 -1
- package/es/atom/tooltip/index.d.ts +7 -1
- package/es/atom/tooltip/index.d.ts.map +1 -1
- package/es/atom/tooltip/index.js +39 -14
- package/es/atom/tooltip/index.js.map +1 -1
- package/es/atom/tooltip/style.css +9 -0
- package/es/organism/user-preferences/index.d.ts.map +1 -1
- package/es/organism/user-preferences/index.js +20 -19
- package/es/organism/user-preferences/index.js.map +1 -1
- package/es/organism/user-preferences/style.css +5 -56
- package/es/organism/wizard-contents/index.d.ts +2 -2
- package/es/organism/wizard-contents/index.d.ts.map +1 -1
- package/es/organism/wizard-contents/index.js +32 -13
- package/es/organism/wizard-contents/index.js.map +1 -1
- package/es/organism/wizard-contents/style.css +46 -6
- package/es/template/activity/progression-item.d.ts +1 -1
- package/es/template/activity/progression-item.d.ts.map +1 -1
- package/es/template/activity/progression-item.js +3 -5
- package/es/template/activity/progression-item.js.map +1 -1
- package/es/template/back-office/brand-update/index.d.ts +2 -2
- package/lib/atom/input-switch/index.js +2 -1
- package/lib/atom/input-switch/index.js.map +1 -1
- package/lib/atom/link/index.d.ts +7 -15
- package/lib/atom/link/index.d.ts.map +1 -1
- package/lib/atom/link/index.js +75 -97
- package/lib/atom/link/index.js.map +1 -1
- package/lib/atom/tooltip/index.d.ts +7 -1
- package/lib/atom/tooltip/index.d.ts.map +1 -1
- package/lib/atom/tooltip/index.js +41 -14
- package/lib/atom/tooltip/index.js.map +1 -1
- package/lib/atom/tooltip/style.css +9 -0
- package/lib/organism/user-preferences/index.d.ts.map +1 -1
- package/lib/organism/user-preferences/index.js +23 -21
- package/lib/organism/user-preferences/index.js.map +1 -1
- package/lib/organism/user-preferences/style.css +5 -56
- package/lib/organism/wizard-contents/index.d.ts +2 -2
- package/lib/organism/wizard-contents/index.d.ts.map +1 -1
- package/lib/organism/wizard-contents/index.js +34 -13
- package/lib/organism/wizard-contents/index.js.map +1 -1
- package/lib/organism/wizard-contents/style.css +46 -6
- package/lib/template/activity/progression-item.d.ts +1 -1
- package/lib/template/activity/progression-item.d.ts.map +1 -1
- package/lib/template/activity/progression-item.js +3 -5
- package/lib/template/activity/progression-item.js.map +1 -1
- package/lib/template/back-office/brand-update/index.d.ts +2 -2
- package/package.json +2 -2
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@value colors: "../../variables/colors.css";
|
|
2
2
|
@value dark from colors;
|
|
3
3
|
@value light from colors;
|
|
4
|
+
@value transparent from colors;
|
|
4
5
|
|
|
5
6
|
.preferences {
|
|
6
7
|
display: flex;
|
|
@@ -25,64 +26,12 @@
|
|
|
25
26
|
|
|
26
27
|
.label {
|
|
27
28
|
composes: fontBase;
|
|
29
|
+
position: relative;
|
|
30
|
+
top: 1px;
|
|
28
31
|
margin-left: 15px;
|
|
29
32
|
min-height: 18px;
|
|
30
33
|
}
|
|
31
34
|
|
|
32
|
-
.
|
|
33
|
-
|
|
34
|
-
align-items: center;
|
|
35
|
-
overflow: visible;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.showToolTip {
|
|
39
|
-
margin-top: 5px;
|
|
40
|
-
text-align: center;
|
|
41
|
-
visibility: hidden;
|
|
42
|
-
opacity: 0;
|
|
43
|
-
transition: opacity 0.8s;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.infoIcon {
|
|
47
|
-
cursor: pointer;
|
|
48
|
-
padding-left: 10px;
|
|
49
|
-
padding-right: 4px;
|
|
50
|
-
color: dark;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.showToolTip::before {
|
|
54
|
-
content: '';
|
|
55
|
-
display: inline-block;
|
|
56
|
-
visibility: hidden;
|
|
57
|
-
opacity: 0;
|
|
58
|
-
width: 7px;
|
|
59
|
-
height: 8px;
|
|
60
|
-
margin: 7.5px -4px 7.5px 0;
|
|
61
|
-
transform: rotate(-45deg);
|
|
62
|
-
transition: opacity 0.8s;
|
|
63
|
-
background-color: light;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.infoIcon:hover ~ .showToolTip {
|
|
67
|
-
visibility: visible;
|
|
68
|
-
opacity: 1;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.infoIcon:hover ~ .showToolTip::before {
|
|
72
|
-
visibility: visible;
|
|
73
|
-
opacity: 1;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.descriptionLabel {
|
|
77
|
-
composes: fontBase;
|
|
78
|
-
display: inline-block;
|
|
79
|
-
background-color: light;
|
|
80
|
-
padding: 4px 8px;
|
|
81
|
-
border-radius: 3px;
|
|
82
|
-
word-wrap: break-word;
|
|
83
|
-
color: dark;
|
|
84
|
-
max-width: 220px;
|
|
85
|
-
overflow: hidden;
|
|
86
|
-
text-align: left;
|
|
87
|
-
position: absolute;
|
|
35
|
+
.infoIconTooltip {
|
|
36
|
+
background: transparent;
|
|
88
37
|
}
|
|
@@ -12,7 +12,7 @@ declare namespace WizardContents {
|
|
|
12
12
|
done: PropTypes.Requireable<boolean>;
|
|
13
13
|
current: PropTypes.Requireable<boolean>;
|
|
14
14
|
}> | null | undefined)[]>;
|
|
15
|
-
const summary: PropTypes.
|
|
15
|
+
const summary: PropTypes.Requireable<PropTypes.InferProps<{
|
|
16
16
|
title: PropTypes.Requireable<string>;
|
|
17
17
|
side: PropTypes.Requireable<string>;
|
|
18
18
|
sections: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
@@ -45,7 +45,7 @@ declare namespace WizardContents {
|
|
|
45
45
|
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
46
46
|
'aria-label': PropTypes.Requireable<string>;
|
|
47
47
|
}>>;
|
|
48
|
-
}
|
|
48
|
+
}>>;
|
|
49
49
|
const content: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
|
|
50
50
|
type: PropTypes.Requireable<string>;
|
|
51
51
|
groups: PropTypes.Validator<(PropTypes.InferProps<{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/wizard-contents/index.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/wizard-contents/index.js"],"names":[],"mappings":";AAmHA,yDAoCC"}
|
|
@@ -126,6 +126,23 @@ const buildActionZone = (previousStep, nextStep, side) => {
|
|
|
126
126
|
}, nextButton));
|
|
127
127
|
};
|
|
128
128
|
|
|
129
|
+
const THEMES = {
|
|
130
|
+
'no-summary': {
|
|
131
|
+
container: _style.default.containerWithoutSummary,
|
|
132
|
+
footer: _style.default.footerWithoutSummary,
|
|
133
|
+
actionFooter: _style.default.actionFooterWithoutSummary,
|
|
134
|
+
leftSection: _style.default.leftSectionWithoutSummary
|
|
135
|
+
},
|
|
136
|
+
summary: {
|
|
137
|
+
container: _style.default.container,
|
|
138
|
+
footer: _style.default.footer,
|
|
139
|
+
actionFooter: _style.default.actionFooter,
|
|
140
|
+
leftSection: _style.default.leftSection
|
|
141
|
+
}
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
const getTheme = summary => summary ? 'summary' : 'no-summary';
|
|
145
|
+
|
|
129
146
|
const WizardContents = props => {
|
|
130
147
|
const {
|
|
131
148
|
isLoading,
|
|
@@ -142,14 +159,9 @@ const WizardContents = props => {
|
|
|
142
159
|
}));
|
|
143
160
|
const rightActionView = buildActionZone(previousStep, nextStep, 'right');
|
|
144
161
|
const footerActionView = buildActionZone(previousStep, nextStep, 'footer');
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
149
|
-
className: _style.default.leftSection
|
|
150
|
-
}, headerView, /*#__PURE__*/_react.default.createElement("div", {
|
|
151
|
-
className: _style.default.form
|
|
152
|
-
}, formView)), /*#__PURE__*/_react.default.createElement("div", {
|
|
162
|
+
const currentStyle = THEMES[getTheme(summary)];
|
|
163
|
+
|
|
164
|
+
const summaryWrapper = /*#__PURE__*/_react.default.createElement("div", {
|
|
153
165
|
className: _style.default.rightSection,
|
|
154
166
|
"data-name": "summary-right-section"
|
|
155
167
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -159,14 +171,23 @@ const WizardContents = props => {
|
|
|
159
171
|
"data-name": "summary-zone"
|
|
160
172
|
}, /*#__PURE__*/_react.default.createElement(_wizardSummary.default, _extends({}, summary, {
|
|
161
173
|
side: 'right'
|
|
162
|
-
}))), rightActionView))
|
|
163
|
-
|
|
164
|
-
|
|
174
|
+
}))), rightActionView));
|
|
175
|
+
|
|
176
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
177
|
+
className: currentStyle.container,
|
|
178
|
+
"data-name": "content-summary"
|
|
165
179
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
180
|
+
className: currentStyle.leftSection
|
|
181
|
+
}, headerView, /*#__PURE__*/_react.default.createElement("div", {
|
|
182
|
+
className: _style.default.form
|
|
183
|
+
}, formView)), summary ? summaryWrapper : null, /*#__PURE__*/_react.default.createElement("div", {
|
|
184
|
+
className: currentStyle.footer,
|
|
185
|
+
"data-name": "footer-section"
|
|
186
|
+
}, summary ? /*#__PURE__*/_react.default.createElement("div", {
|
|
166
187
|
className: _style.default.summaryFooter
|
|
167
188
|
}, /*#__PURE__*/_react.default.createElement(_wizardSummary.default, _extends({}, summary, {
|
|
168
189
|
side: 'footer'
|
|
169
|
-
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
190
|
+
}))) : null, /*#__PURE__*/_react.default.createElement("div", {
|
|
170
191
|
className: _style.default.actionFooter
|
|
171
192
|
}, footerActionView)));
|
|
172
193
|
};
|
|
@@ -178,7 +199,7 @@ WizardContents.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
178
199
|
onClick: _propTypes.default.func
|
|
179
200
|
}).isRequired,
|
|
180
201
|
steps: _wizardSteps.default.propTypes.steps,
|
|
181
|
-
summary: _propTypes.default.shape(_extends({}, _wizardSummary.default.propTypes))
|
|
202
|
+
summary: _propTypes.default.shape(_extends({}, _wizardSummary.default.propTypes)),
|
|
182
203
|
content: _propTypes.default.oneOfType([_propTypes.default.shape(_extends({}, _brandForm.default.propTypes, {
|
|
183
204
|
type: _propTypes.default.oneOf(['form'])
|
|
184
205
|
})), _propTypes.default.shape(_extends({}, _contentTranslation.default.propTypes, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["buildHeader","wizardHeader","steps","title","onClick","buttonCloseIcon","size","icon","style","header","headerTitle","buildForm","content","type","buildButton","step","side","ICONS","previous","position","next","publish","label","buttonProps","buildActionZone","previousStep","nextStep","previousButton","nextStepType","getOr","nextButton","actionZone","button","WizardContents","props","isLoading","summary","headerView","formView","rightActionView","footerActionView","container","leftSection","form","rightSection","stickySection","summaryZone","footer","summaryFooter","actionFooter","propTypes","PropTypes","bool","shape","string","func","isRequired","WizardSteps","WizardSummary","oneOfType","BrandForm","oneOf","ContentTranslate","OrganismSearchAndChipsResults","CourseSelection","CourseSections","RewardsForm"],"sources":["../../../src/organism/wizard-contents/index.js"],"sourcesContent":["import React from 'react';\nimport getOr from 'lodash/fp/getOr';\nimport PropTypes from 'prop-types';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport WizardSteps from '../../atom/wizard-steps';\nimport WizardSummary from '../../molecule/wizard-summary';\nimport BrandForm from '../brand-form';\nimport ContentTranslate from '../content-translation';\nimport OrganismSearchAndChipsResults from '../search-and-chips-results';\nimport CourseSelection from '../course-selection';\nimport CourseSections from '../../molecule/course-sections';\nimport RewardsForm from '../rewards-form';\nimport style from './style.css';\n\nconst buildHeader = (wizardHeader, steps) => {\n const {title, onClick} = wizardHeader;\n\n const buttonCloseIcon = {\n size: 'small',\n 'data-name': 'close-button',\n 'aria-label': 'close button',\n icon: 'close',\n onClick\n };\n\n return (\n <div>\n <div className={style.header}>\n <ButtonLinkIconOnly {...buttonCloseIcon} />\n <div className={style.headerTitle} data-name={'content-title'}>\n {title}\n </div>\n </div>\n <WizardSteps steps={steps} />\n </div>\n );\n};\n\nconst buildForm = content => {\n const {type} = content;\n switch (type) {\n case 'form':\n return <BrandForm {...content} />;\n case 'translate':\n return <ContentTranslate {...content} />;\n case 'populations':\n return <OrganismSearchAndChipsResults {...content} />;\n case 'courses':\n return <CourseSelection {...content} />;\n case 'organize-courses':\n return <CourseSections {...content} />;\n case 'rewards':\n return <RewardsForm {...content} />;\n }\n};\n\nconst buildButton = (type, step, side) => {\n const ICONS = {\n previous: {\n position: 'left',\n type: 'chevron-left'\n },\n next: {\n position: 'right',\n type: 'chevron-right'\n },\n publish: {\n position: 'left',\n type: 'publish'\n }\n };\n\n const {label, onClick} = step;\n const buttonProps = {\n type: type === 'previous' ? 'secondary' : 'primary',\n 'aria-label': `${type} step button`,\n 'data-name': `${type}-step-button-${side}`,\n icon: ICONS[type],\n label,\n onClick\n };\n\n return <ButtonLink {...buttonProps} />;\n};\n\nconst buildActionZone = (previousStep, nextStep, side) => {\n const previousButton = previousStep ? buildButton('previous', previousStep, side) : null;\n const nextStepType = getOr('next', 'type', nextStep);\n const nextButton = nextStep ? buildButton(nextStepType, nextStep, side) : null;\n return (\n <div className={style.actionZone}>\n <div className={style.button}>{previousButton}</div>\n <div className={style.button}>{nextButton}</div>\n </div>\n );\n};\n\nconst WizardContents = props => {\n const {isLoading, wizardHeader, steps, summary, content, nextStep, previousStep} = props;\n const headerView = buildHeader(wizardHeader, steps);\n const formView = buildForm({...content, isLoading});\n const rightActionView = buildActionZone(previousStep, nextStep, 'right');\n const footerActionView = buildActionZone(previousStep, nextStep, 'footer');\n\n return (\n <div className={style.container} data-name=\"content-summary\">\n <div className={style.leftSection}>\n {headerView}\n <div className={style.form}>{formView}</div>\n </div>\n <div className={style.rightSection} data-name=\"summary-right-section\">\n <div className={style.stickySection}>\n <div className={style.summaryZone} data-name=\"summary-zone\">\n <WizardSummary {...summary} side={'right'} />\n </div>\n {rightActionView}\n </div>\n </div>\n <div className={style.footer} data-name=\"summary-footer-section\">\n <div className={style.summaryFooter}>\n <WizardSummary {...summary} side={'footer'} />\n </div>\n <div className={style.actionFooter}>{footerActionView}</div>\n </div>\n </div>\n );\n};\n\nWizardContents.propTypes = {\n isLoading: PropTypes.bool,\n wizardHeader: PropTypes.shape({\n title: PropTypes.string,\n onClick: PropTypes.func\n }).isRequired,\n steps: WizardSteps.propTypes.steps,\n summary: PropTypes.shape({\n ...WizardSummary.propTypes\n }).isRequired,\n content: PropTypes.oneOfType([\n PropTypes.shape({\n ...BrandForm.propTypes,\n type: PropTypes.oneOf(['form'])\n }),\n PropTypes.shape({\n ...ContentTranslate.propTypes,\n type: PropTypes.oneOf(['translate'])\n }),\n PropTypes.shape({\n ...OrganismSearchAndChipsResults.propTypes,\n type: PropTypes.oneOf(['populations'])\n }),\n PropTypes.shape({\n ...CourseSelection.propTypes,\n type: PropTypes.oneOf(['courses'])\n }),\n PropTypes.shape({\n ...CourseSections.propTypes,\n type: PropTypes.oneOf(['organize-courses'])\n }),\n PropTypes.shape({\n ...RewardsForm.propTypes,\n type: PropTypes.oneOf(['rewards'])\n })\n ]),\n previousStep: PropTypes.shape({\n label: PropTypes.string,\n onClick: PropTypes.func\n }),\n nextStep: PropTypes.shape({\n type: PropTypes.oneOf(['next', 'publish']),\n label: PropTypes.string,\n onClick: PropTypes.func\n })\n};\n\nexport default WizardContents;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["buildHeader","wizardHeader","steps","title","onClick","buttonCloseIcon","size","icon","style","header","headerTitle","buildForm","content","type","buildButton","step","side","ICONS","previous","position","next","publish","label","buttonProps","buildActionZone","previousStep","nextStep","previousButton","nextStepType","getOr","nextButton","actionZone","button","THEMES","container","containerWithoutSummary","footer","footerWithoutSummary","actionFooter","actionFooterWithoutSummary","leftSection","leftSectionWithoutSummary","summary","getTheme","WizardContents","props","isLoading","headerView","formView","rightActionView","footerActionView","currentStyle","summaryWrapper","rightSection","stickySection","summaryZone","form","summaryFooter","propTypes","PropTypes","bool","shape","string","func","isRequired","WizardSteps","WizardSummary","oneOfType","BrandForm","oneOf","ContentTranslate","OrganismSearchAndChipsResults","CourseSelection","CourseSections","RewardsForm"],"sources":["../../../src/organism/wizard-contents/index.js"],"sourcesContent":["import React from 'react';\nimport getOr from 'lodash/fp/getOr';\nimport PropTypes from 'prop-types';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport WizardSteps from '../../atom/wizard-steps';\nimport WizardSummary from '../../molecule/wizard-summary';\nimport BrandForm from '../brand-form';\nimport ContentTranslate from '../content-translation';\nimport OrganismSearchAndChipsResults from '../search-and-chips-results';\nimport CourseSelection from '../course-selection';\nimport CourseSections from '../../molecule/course-sections';\nimport RewardsForm from '../rewards-form';\nimport style from './style.css';\n\nconst buildHeader = (wizardHeader, steps) => {\n const {title, onClick} = wizardHeader;\n\n const buttonCloseIcon = {\n size: 'small',\n 'data-name': 'close-button',\n 'aria-label': 'close button',\n icon: 'close',\n onClick\n };\n\n return (\n <div>\n <div className={style.header}>\n <ButtonLinkIconOnly {...buttonCloseIcon} />\n <div className={style.headerTitle} data-name={'content-title'}>\n {title}\n </div>\n </div>\n <WizardSteps steps={steps} />\n </div>\n );\n};\n\nconst buildForm = content => {\n const {type} = content;\n switch (type) {\n case 'form':\n return <BrandForm {...content} />;\n case 'translate':\n return <ContentTranslate {...content} />;\n case 'populations':\n return <OrganismSearchAndChipsResults {...content} />;\n case 'courses':\n return <CourseSelection {...content} />;\n case 'organize-courses':\n return <CourseSections {...content} />;\n case 'rewards':\n return <RewardsForm {...content} />;\n }\n};\n\nconst buildButton = (type, step, side) => {\n const ICONS = {\n previous: {\n position: 'left',\n type: 'chevron-left'\n },\n next: {\n position: 'right',\n type: 'chevron-right'\n },\n publish: {\n position: 'left',\n type: 'publish'\n }\n };\n\n const {label, onClick} = step;\n const buttonProps = {\n type: type === 'previous' ? 'secondary' : 'primary',\n 'aria-label': `${type} step button`,\n 'data-name': `${type}-step-button-${side}`,\n icon: ICONS[type],\n label,\n onClick\n };\n\n return <ButtonLink {...buttonProps} />;\n};\n\nconst buildActionZone = (previousStep, nextStep, side) => {\n const previousButton = previousStep ? buildButton('previous', previousStep, side) : null;\n const nextStepType = getOr('next', 'type', nextStep);\n const nextButton = nextStep ? buildButton(nextStepType, nextStep, side) : null;\n return (\n <div className={style.actionZone}>\n <div className={style.button}>{previousButton}</div>\n <div className={style.button}>{nextButton}</div>\n </div>\n );\n};\n\nconst THEMES = {\n 'no-summary': {\n container: style.containerWithoutSummary,\n footer: style.footerWithoutSummary,\n actionFooter: style.actionFooterWithoutSummary,\n leftSection: style.leftSectionWithoutSummary\n },\n summary: {\n container: style.container,\n footer: style.footer,\n actionFooter: style.actionFooter,\n leftSection: style.leftSection\n }\n};\n\nconst getTheme = summary => (summary ? 'summary' : 'no-summary');\n\nconst WizardContents = props => {\n const {isLoading, wizardHeader, steps, summary, content, nextStep, previousStep} = props;\n const headerView = buildHeader(wizardHeader, steps);\n const formView = buildForm({...content, isLoading});\n const rightActionView = buildActionZone(previousStep, nextStep, 'right');\n const footerActionView = buildActionZone(previousStep, nextStep, 'footer');\n const currentStyle = THEMES[getTheme(summary)];\n\n const summaryWrapper = (\n <div className={style.rightSection} data-name=\"summary-right-section\">\n <div className={style.stickySection}>\n <div className={style.summaryZone} data-name=\"summary-zone\">\n <WizardSummary {...summary} side={'right'} />\n </div>\n {rightActionView}\n </div>\n </div>\n );\n\n return (\n <div className={currentStyle.container} data-name=\"content-summary\">\n <div className={currentStyle.leftSection}>\n {headerView}\n <div className={style.form}>{formView}</div>\n </div>\n {summary ? summaryWrapper : null}\n <div className={currentStyle.footer} data-name=\"footer-section\">\n {summary ? (\n <div className={style.summaryFooter}>\n <WizardSummary {...summary} side={'footer'} />\n </div>\n ) : null}\n <div className={style.actionFooter}>{footerActionView}</div>\n </div>\n </div>\n );\n};\n\nWizardContents.propTypes = {\n isLoading: PropTypes.bool,\n wizardHeader: PropTypes.shape({\n title: PropTypes.string,\n onClick: PropTypes.func\n }).isRequired,\n steps: WizardSteps.propTypes.steps,\n summary: PropTypes.shape({\n ...WizardSummary.propTypes\n }),\n content: PropTypes.oneOfType([\n PropTypes.shape({\n ...BrandForm.propTypes,\n type: PropTypes.oneOf(['form'])\n }),\n PropTypes.shape({\n ...ContentTranslate.propTypes,\n type: PropTypes.oneOf(['translate'])\n }),\n PropTypes.shape({\n ...OrganismSearchAndChipsResults.propTypes,\n type: PropTypes.oneOf(['populations'])\n }),\n PropTypes.shape({\n ...CourseSelection.propTypes,\n type: PropTypes.oneOf(['courses'])\n }),\n PropTypes.shape({\n ...CourseSections.propTypes,\n type: PropTypes.oneOf(['organize-courses'])\n }),\n PropTypes.shape({\n ...RewardsForm.propTypes,\n type: PropTypes.oneOf(['rewards'])\n })\n ]),\n previousStep: PropTypes.shape({\n label: PropTypes.string,\n onClick: PropTypes.func\n }),\n nextStep: PropTypes.shape({\n type: PropTypes.oneOf(['next', 'publish']),\n label: PropTypes.string,\n onClick: PropTypes.func\n })\n};\n\nexport default WizardContents;\n"],"mappings":"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"}
|
|
@@ -7,17 +7,31 @@
|
|
|
7
7
|
display: flex;
|
|
8
8
|
align-items: stretch;
|
|
9
9
|
justify-content: flex-start;
|
|
10
|
-
flex-wrap: wrap;
|
|
11
10
|
overflow: auto;
|
|
12
11
|
height: calc(100vh - 124px);
|
|
13
12
|
width: 100%;
|
|
14
13
|
}
|
|
15
14
|
|
|
15
|
+
.containerWithoutSummary {
|
|
16
|
+
composes: container;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
}
|
|
19
|
+
|
|
16
20
|
.leftSection {
|
|
17
|
-
display:
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: column;
|
|
18
23
|
overflow: auto;
|
|
19
24
|
box-sizing: border-box;
|
|
20
25
|
width: calc(100% - 320px);
|
|
26
|
+
position: relative;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.leftSectionWithoutSummary {
|
|
30
|
+
display: flex;
|
|
31
|
+
flex-direction: column;
|
|
32
|
+
overflow: auto;
|
|
33
|
+
box-sizing: border-box;
|
|
34
|
+
width: 100%;
|
|
21
35
|
height: 100%;
|
|
22
36
|
position: relative;
|
|
23
37
|
}
|
|
@@ -69,12 +83,23 @@
|
|
|
69
83
|
.actionZone {
|
|
70
84
|
width: 100%;
|
|
71
85
|
display: flex;
|
|
72
|
-
|
|
86
|
+
flex-direction: row;
|
|
87
|
+
justify-content: flex-end;
|
|
73
88
|
margin: 16px 0;
|
|
74
89
|
}
|
|
75
90
|
|
|
76
91
|
.button {
|
|
77
|
-
width:
|
|
92
|
+
width: 100%;
|
|
93
|
+
max-width: 184px;
|
|
94
|
+
margin: 10px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.footerWithoutSummary {
|
|
98
|
+
width: 100%;
|
|
99
|
+
bottom: 0px;
|
|
100
|
+
position: inherit;
|
|
101
|
+
display: flex;
|
|
102
|
+
justify-content: flex-end;
|
|
78
103
|
}
|
|
79
104
|
|
|
80
105
|
.footer {
|
|
@@ -84,23 +109,37 @@
|
|
|
84
109
|
position: inherit;
|
|
85
110
|
}
|
|
86
111
|
|
|
112
|
+
.actionFooterWithoutSummary {
|
|
113
|
+
width: 100%;
|
|
114
|
+
display: flex;
|
|
115
|
+
right: 0;
|
|
116
|
+
bottom: -10px;
|
|
117
|
+
position: sticky;
|
|
118
|
+
}
|
|
119
|
+
|
|
87
120
|
@media desktop, tablet {
|
|
88
121
|
.leftSection {
|
|
89
122
|
width: 100%;
|
|
90
123
|
min-height: 500px;
|
|
91
124
|
}
|
|
92
125
|
|
|
126
|
+
.container {
|
|
127
|
+
display: flex;
|
|
128
|
+
flex-direction: column;
|
|
129
|
+
}
|
|
130
|
+
|
|
93
131
|
.rightSection {
|
|
94
132
|
display: none;
|
|
95
133
|
}
|
|
96
134
|
|
|
97
|
-
.footer
|
|
135
|
+
.footer {
|
|
98
136
|
display: flex;
|
|
99
137
|
align-items: flex-end;
|
|
100
138
|
bottom: 10px;
|
|
101
139
|
position: sticky;
|
|
102
140
|
z-index: 1;
|
|
103
141
|
}
|
|
142
|
+
|
|
104
143
|
.footer::before {
|
|
105
144
|
content: '';
|
|
106
145
|
background: linear-gradient(to top,white 64px, #ffffff00 );
|
|
@@ -118,8 +157,9 @@
|
|
|
118
157
|
}
|
|
119
158
|
|
|
120
159
|
.actionFooter {
|
|
121
|
-
width:
|
|
160
|
+
width: 100%;
|
|
122
161
|
}
|
|
162
|
+
|
|
123
163
|
.actionZone {
|
|
124
164
|
margin: 0;
|
|
125
165
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export default ProgressionItem;
|
|
2
|
-
declare function ProgressionItem(props: any,
|
|
2
|
+
declare function ProgressionItem(props: any, legacyContext: any): JSX.Element;
|
|
3
3
|
declare namespace ProgressionItem {
|
|
4
4
|
namespace propTypes {
|
|
5
5
|
const completion: PropTypes.Validator<number>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progression-item.d.ts","sourceRoot":"","sources":["../../../src/template/activity/progression-item.js"],"names":[],"mappings":";AAmCA,
|
|
1
|
+
{"version":3,"file":"progression-item.d.ts","sourceRoot":"","sources":["../../../src/template/activity/progression-item.js"],"names":[],"mappings":";AAmCA,8EAyFC"}
|
|
@@ -15,7 +15,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
15
15
|
|
|
16
16
|
var _novaIcons = require("@coorpacademy/nova-icons");
|
|
17
17
|
|
|
18
|
-
var _provider =
|
|
18
|
+
var _provider = _interopRequireWildcard(require("../../atom/provider"));
|
|
19
19
|
|
|
20
20
|
var _progressBar = _interopRequireDefault(require("../../molecule/progress-bar"));
|
|
21
21
|
|
|
@@ -41,10 +41,8 @@ const ICONS = {
|
|
|
41
41
|
review: _novaIcons.NovaCompositionCoorpacademyRevision
|
|
42
42
|
};
|
|
43
43
|
|
|
44
|
-
const ProgressionItem = (props,
|
|
45
|
-
const
|
|
46
|
-
skin
|
|
47
|
-
} = context;
|
|
44
|
+
const ProgressionItem = (props, legacyContext) => {
|
|
45
|
+
const skin = (0, _provider.GetSkinFromContext)(legacyContext);
|
|
48
46
|
const {
|
|
49
47
|
disabled = false,
|
|
50
48
|
adaptive,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progression-item.js","names":["ICONS","chapter","TimerIcon","course","LearnerIcon","battle","BoltIcon","certification","CertificationIcon","article","ArticleIcon","scorm","ScormIcon","video","VideoIcon","podcast","PodcastIcon","review","RevisionIcon","ProgressionItem","props","
|
|
1
|
+
{"version":3,"file":"progression-item.js","names":["ICONS","chapter","TimerIcon","course","LearnerIcon","battle","BoltIcon","certification","CertificationIcon","article","ArticleIcon","scorm","ScormIcon","video","VideoIcon","podcast","PodcastIcon","review","RevisionIcon","ProgressionItem","props","legacyContext","skin","GetSkinFromContext","disabled","adaptive","completion","label","level","onClick","stars","maxStars","state","type","steps","adaptiveAriaLabel","dark","primary","white","IconType","adaptiveIcon","style","backgroundColor","color","handleCTAClick","useMemo","e","stopPropagation","preventDefault","link","cta","classnames","progressionItem","wrapperTitle","iconType","innerHTML","__html","smallStars","iconStar","borderRadius","propTypes","PropTypes","number","isRequired","bool","string","func","contextTypes","Provider","childContextTypes"],"sources":["../../../src/template/activity/progression-item.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {get, noop} from 'lodash/fp';\nimport {\n NovaCompositionNavigationArrowRight as ArrowRightIcon,\n NovaCompositionCoorpacademyStar as StarIcon,\n NovaCompositionCoorpacademyTimer as TimerIcon,\n NovaCompositionCoorpacademyBolt as BoltIcon,\n NovaSolidSchoolScienceGraduationHat as CertificationIcon,\n NovaCompositionCoorpacademyAdaptive as AdaptiveIcon,\n NovaSolidContentContentBook1 as LearnerIcon,\n NovaCompositionCoorpacademyScorm as ScormIcon,\n NovaCompositionCoorpacademyArticle as ArticleIcon,\n NovaCompositionCoorpacademyVideo as VideoIcon,\n NovaCompositionCoorpacademyMicrophone as PodcastIcon,\n NovaCompositionCoorpacademyRevision as RevisionIcon\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport ProgressBar from '../../molecule/progress-bar';\nimport Link from '../../atom/link';\nimport style from './progression-item.css';\n\nconst ICONS = {\n chapter: TimerIcon,\n course: LearnerIcon,\n battle: BoltIcon,\n certification: CertificationIcon,\n article: ArticleIcon,\n scorm: ScormIcon,\n video: VideoIcon,\n podcast: PodcastIcon,\n review: RevisionIcon\n};\n\nconst ProgressionItem = (props, legacyContext) => {\n const skin = GetSkinFromContext(legacyContext);\n const {\n disabled = false,\n adaptive,\n completion,\n label,\n level,\n onClick = noop,\n stars,\n maxStars,\n state,\n type,\n steps = 0,\n adaptiveAriaLabel\n } = props;\n\n const dark = get('common.dark', skin);\n const primary = get('common.primary', skin);\n const white = get('common.white', skin);\n const IconType = ICONS[type];\n\n const adaptiveIcon = adaptive ? (\n <div\n className={style.adaptiveIcon}\n style={{\n backgroundColor: primary\n }}\n >\n <AdaptiveIcon style={{color: white}} height={14} aria-label={adaptiveAriaLabel} />\n </div>\n ) : null;\n\n const handleCTAClick = useMemo(\n () => e => {\n e.stopPropagation();\n e.preventDefault();\n onClick(e);\n },\n [onClick]\n );\n\n const link = disabled ? null : (\n <Link style={{color: primary}} onClick={handleCTAClick} data-progression-state={state}>\n <span className={style.cta}>\n {state} <ArrowRightIcon style={{color: primary}} height={12} width={20} />\n </span>\n </Link>\n );\n\n return (\n <div className={classnames(style.progressionItem, disabled ? style.disabled : '')}>\n <div className={style.wrapperTitle}>\n <IconType className={style.iconType} style={{color: dark}} />\n <div data-name=\"activityLabel\" className={style.label} title={label}>\n <div\n className={style.innerHTML}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: label}}\n />\n {adaptiveIcon}\n </div>\n\n <div\n data-name=\"activityStars\"\n className={style.stars}\n style={{\n color: primary\n }}\n >\n {stars}\n {maxStars ? ' /' : null}\n {maxStars ? <span className={style.smallStars}>{maxStars}</span> : null}{' '}\n <StarIcon className={style.iconStar} style={{color: primary}} />\n </div>\n </div>\n <ProgressBar\n className={style.completion}\n value={completion * 100}\n max={100}\n steps={steps}\n style={{backgroundColor: primary, borderRadius: 0}}\n />\n <div className={style.state}>\n {link}\n <span className={style.level}>{level}</span>\n </div>\n </div>\n );\n};\n\nProgressionItem.propTypes = {\n completion: PropTypes.number.isRequired,\n stars: PropTypes.number.isRequired,\n maxStars: PropTypes.number,\n steps: PropTypes.number,\n disabled: PropTypes.bool,\n label: PropTypes.string.isRequired,\n level: PropTypes.string.isRequired,\n state: PropTypes.string.isRequired,\n adaptiveAriaLabel: PropTypes.string,\n type: PropTypes.string.isRequired,\n adaptive: PropTypes.bool.isRequired,\n onClick: PropTypes.func\n};\n\nProgressionItem.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nexport default ProgressionItem;\n"],"mappings":"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"}
|
|
@@ -743,7 +743,7 @@ declare namespace BrandUpdate {
|
|
|
743
743
|
done: PropTypes.Requireable<boolean>;
|
|
744
744
|
current: PropTypes.Requireable<boolean>;
|
|
745
745
|
}> | null | undefined)[]>;
|
|
746
|
-
summary: PropTypes.
|
|
746
|
+
summary: PropTypes.Requireable<PropTypes.InferProps<{
|
|
747
747
|
title: PropTypes.Requireable<string>;
|
|
748
748
|
side: PropTypes.Requireable<string>;
|
|
749
749
|
sections: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
@@ -776,7 +776,7 @@ declare namespace BrandUpdate {
|
|
|
776
776
|
onClick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
777
777
|
'aria-label': PropTypes.Requireable<string>;
|
|
778
778
|
}>>;
|
|
779
|
-
}
|
|
779
|
+
}>>;
|
|
780
780
|
content: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
|
|
781
781
|
type: PropTypes.Requireable<string>;
|
|
782
782
|
groups: PropTypes.Validator<(PropTypes.InferProps<{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coorpacademy/components",
|
|
3
|
-
"version": "11.10.
|
|
3
|
+
"version": "11.10.4-alpha.1+b32e2af6e",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -162,5 +162,5 @@
|
|
|
162
162
|
"last 2 versions",
|
|
163
163
|
"IE 11"
|
|
164
164
|
],
|
|
165
|
-
"gitHead": "
|
|
165
|
+
"gitHead": "b32e2af6e4906fac7f51757dc805f1ac502e6e4b"
|
|
166
166
|
}
|