diff --git a/packages/@coorpacademy-app-player/src/store/actions/api/location.js b/packages/@coorpacademy-app-player/src/store/actions/ui/location.js similarity index 62% rename from packages/@coorpacademy-app-player/src/store/actions/api/location.js rename to packages/@coorpacademy-app-player/src/store/actions/ui/location.js index caacd790d0..29a6b19d06 100644 --- a/packages/@coorpacademy-app-player/src/store/actions/api/location.js +++ b/packages/@coorpacademy-app-player/src/store/actions/ui/location.js @@ -1,6 +1,5 @@ -import constant from 'lodash/fp/constant'; import buildTask from '../../utils/redux-task'; -import {getProgressionContent} from '../../utils/state-extract'; +import {getProgressionContent, getCurrentContent} from '../../utils/state-extract'; export const LOCATION_RETRY_REQUEST = '@@location/RETRY_REQUEST'; export const LOCATION_RETRY_SUCCESS = '@@location/RETRY_SUCCESS'; @@ -14,7 +13,6 @@ export const retry = (dispatch, getState, {services}) => { const action = buildTask({ types: [LOCATION_RETRY_REQUEST, LOCATION_RETRY_SUCCESS, LOCATION_RETRY_FAILURE], task: () => Location.retry(contentRef), - bailout: constant(false), meta: {contentRef} }); @@ -30,8 +28,23 @@ export const exit = (dispatch, getState, {services}) => { const action = buildTask({ types: [LOCATION_EXIT_REQUEST, LOCATION_EXIT_SUCCESS, LOCATION_EXIT_FAILURE], - task: () => Location.exit(), - bailout: constant(false) + task: () => Location.exit() + }); + + return dispatch(action); +}; + +export const LOCATION_BACK_REQUEST = '@@location/BACK_REQUEST'; +export const LOCATION_BACK_SUCCESS = '@@location/BACK_SUCCESS'; +export const LOCATION_BACK_FAILURE = '@@location/BACK_FAILURE'; + +export const back = (dispatch, getState, {services}) => { + const {Location} = services; // eslint-disable-line no-shadow + const content = getCurrentContent(getState()); + + const action = buildTask({ + types: [LOCATION_BACK_REQUEST, LOCATION_BACK_SUCCESS, LOCATION_BACK_FAILURE], + task: () => Location.back(content) }); return dispatch(action); diff --git a/packages/@coorpacademy-app-player/src/store/actions/ui/progressions.js b/packages/@coorpacademy-app-player/src/store/actions/ui/progressions.js index ca3c81496e..b009ffcbdc 100644 --- a/packages/@coorpacademy-app-player/src/store/actions/ui/progressions.js +++ b/packages/@coorpacademy-app-player/src/store/actions/ui/progressions.js @@ -7,6 +7,7 @@ import {fetchContent, fetchContentInfo} from '../api/contents'; import {fetchRecommendations} from '../api/recommendations'; import {fetchAnswer} from '../api/answers'; import { + getCurrentChapterId, getEngine, getProgressionContent, getCurrentProgressionId, @@ -43,8 +44,11 @@ export const selectProgression = id => async (dispatch, getState) => { switch (type) { case 'slide': { const slideResult = await dispatch(fetchContent('slide', ref)); + const chapterId = getCurrentChapterId(getState()); + const chapterResult = await dispatch(fetchContent('chapter', chapterId)); + if (isNil(get('payload.context.title', slideResult))) { - return slideResult; + return chapterResult; } return dispatch(selectRoute('context')); } diff --git a/packages/@coorpacademy-app-player/src/store/actions/api/test/location.js b/packages/@coorpacademy-app-player/src/store/actions/ui/test/location.js similarity index 64% rename from packages/@coorpacademy-app-player/src/store/actions/api/test/location.js rename to packages/@coorpacademy-app-player/src/store/actions/ui/test/location.js index 58d47d061b..4ed6b55eeb 100644 --- a/packages/@coorpacademy-app-player/src/store/actions/api/test/location.js +++ b/packages/@coorpacademy-app-player/src/store/actions/ui/test/location.js @@ -10,7 +10,11 @@ import { exit, LOCATION_EXIT_REQUEST, LOCATION_EXIT_SUCCESS, - LOCATION_EXIT_FAILURE + LOCATION_EXIT_FAILURE, + back, + LOCATION_BACK_REQUEST, + LOCATION_BACK_SUCCESS, + LOCATION_BACK_FAILURE } from '../location'; test( @@ -118,3 +122,57 @@ test( } ] ); +test( + 'should call back location service and dispatch SUCCESS action', + macro, + pipe( + set('ui.current.progressionId', '0'), + set('data.contents.level.entities.foo', {}), + set('data.progressions.entities.0.content', {type: 'level', ref: 'foo'}) + )({}), + t => ({ + Location: { + back: () => { + return 'foo'; + } + } + }), + back, + [ + { + type: LOCATION_BACK_REQUEST + }, + { + type: LOCATION_BACK_SUCCESS, + payload: 'foo' + } + ] +); + +test( + 'should call back location service and dispatch FAILURE action on error', + macro, + pipe( + set('ui.current.progressionId', '0'), + set('data.contents.level.entities.foo', {}), + set('data.progressions.entities.0.content', {type: 'level', ref: 'foo'}) + )({}), + t => ({ + Location: { + back: () => { + throw new Error(); + } + } + }), + back, + [ + { + type: LOCATION_BACK_REQUEST + }, + { + type: LOCATION_BACK_FAILURE, + error: true, + payload: new Error() + } + ] +); diff --git a/packages/@coorpacademy-app-player/src/store/actions/ui/test/progressions.js b/packages/@coorpacademy-app-player/src/store/actions/ui/test/progressions.js index 4e9634f96f..f95f16264a 100644 --- a/packages/@coorpacademy-app-player/src/store/actions/ui/test/progressions.js +++ b/packages/@coorpacademy-app-player/src/store/actions/ui/test/progressions.js @@ -28,9 +28,10 @@ import { import {RECO_FETCH_REQUEST, RECO_FETCH_SUCCESS} from '../../api/recommendations'; import {UI_SELECT_ROUTE} from '../route'; -const slide = {ref: 'bar'}; +const slide = {ref: 'bar', chapter_id: 'baz'}; const slideWithContext = { ref: 'bar', + chapter_id: 'baz', context: {title: 'some-title', description: 'some-description'} }; @@ -214,10 +215,17 @@ test( }, set('data.contents.slide.entities.bar', null, {}) ], + [ + { + type: CONTENT_FETCH_SUCCESS, + meta: {type: 'slide', ref: 'bar'}, + payload: slide + }, + set('data.contents.slide.entities.bar', slide, {}) + ], { - type: CONTENT_FETCH_SUCCESS, - meta: {type: 'slide', ref: 'bar'}, - payload: slide + type: CONTENT_FETCH_REQUEST, + meta: {type: 'chapter', ref: 'baz'} } ] ); @@ -342,10 +350,17 @@ test( }, set('data.contents.slide.entities.bar', null, {}) ], + [ + { + type: CONTENT_FETCH_SUCCESS, + meta: {type: 'slide', ref: 'bar'}, + payload: slideWithContext + }, + set('data.contents.slide.entities.bar', slideWithContext, {}) + ], { - type: CONTENT_FETCH_SUCCESS, - meta: {type: 'slide', ref: 'bar'}, - payload: slideWithContext + type: CONTENT_FETCH_REQUEST, + meta: {type: 'chapter', ref: 'baz'} }, { type: UI_SELECT_ROUTE, diff --git a/packages/@coorpacademy-app-player/src/store/services/levels.data.json b/packages/@coorpacademy-app-player/src/store/services/levels.data.json index 2708ec1951..db0b1b83d5 100644 --- a/packages/@coorpacademy-app-player/src/store/services/levels.data.json +++ b/packages/@coorpacademy-app-player/src/store/services/levels.data.json @@ -2,6 +2,7 @@ { "_id": "1.A", "name": "Level1", + "level": "base", "meta": { "updatedAt": "2017-01-26T09:19:06.874Z", "createdAt": "2017-01-26T09:19:05.667Z" diff --git a/packages/@coorpacademy-app-player/src/store/services/location.js b/packages/@coorpacademy-app-player/src/store/services/location.js index 661b66e180..ff4a53dd04 100644 --- a/packages/@coorpacademy-app-player/src/store/services/location.js +++ b/packages/@coorpacademy-app-player/src/store/services/location.js @@ -5,3 +5,7 @@ export const exit = () => { export const retry = () => { window.location.reload(); }; + +export const back = content => { + window.location.reload(); +}; diff --git a/packages/@coorpacademy-app-player/src/store/services/test/location.js b/packages/@coorpacademy-app-player/src/store/services/test/location.js index 1e459d70b0..0ee4fa3f7b 100644 --- a/packages/@coorpacademy-app-player/src/store/services/test/location.js +++ b/packages/@coorpacademy-app-player/src/store/services/test/location.js @@ -20,3 +20,13 @@ test('should reload page on exit', t => { }; Location.exit(); }); + +test('should reload page on back', t => { + t.plan(1); + global.window = { + location: { + reload: () => t.pass() + } + }; + Location.back(); +}); diff --git a/packages/@coorpacademy-app-player/src/store/utils/state-extract.js b/packages/@coorpacademy-app-player/src/store/utils/state-extract.js index 02c84d5beb..f4a229e8ac 100644 --- a/packages/@coorpacademy-app-player/src/store/utils/state-extract.js +++ b/packages/@coorpacademy-app-player/src/store/utils/state-extract.js @@ -5,6 +5,7 @@ import toString from 'lodash/fp/toString'; // eslint-disable-line no-shadow const getId = get('_id'); +export const getChapterId = get('chapter_id'); export const getChoices = get('question.content.choices'); export const getCurrentProgressionId = get('ui.current.progressionId'); export const getQuestionType = get('question.type'); @@ -54,6 +55,7 @@ export const getContentInfo = pipe(getCurrentContent, get('info')); export const getNbSlides = pipe(getContentInfo, get('nbSlides')); export const getStepContent = pipe(getCurrentProgression, get('state.nextContent')); export const getPrevStepContent = pipe(getCurrentProgression, get('state.content')); +export const getCurrentChapterId = pipe(getCurrentSlide, getChapterId); export const getEngine = state => { return get('engine')(getCurrentProgression(state)); diff --git a/packages/@coorpacademy-app-player/src/store/view/state-to-props/header.js b/packages/@coorpacademy-app-player/src/store/view/state-to-props/header.js index 01fa073fcd..e90906e1df 100644 --- a/packages/@coorpacademy-app-player/src/store/view/state-to-props/header.js +++ b/packages/@coorpacademy-app-player/src/store/view/state-to-props/header.js @@ -1,13 +1,64 @@ +import get from 'lodash/fp/get'; import getOr from 'lodash/fp/getOr'; -import {getLives, getCurrentContent} from '../../utils/state-extract'; +import indexOf from 'lodash/fp/indexOf'; +import { + getContent, + getCurrentChapterId, + getEngine, + getLives, + getCurrentContent +} from '../../utils/state-extract'; +import {back} from '../../actions/ui/location'; -const headerProps = (options, store) => state => { +const headerContent = (engineRef, state) => { const content = getCurrentContent(state); + + switch (engineRef) { + case 'learner': + return { + title: getOr('', 'name')(content), + details: get('level')(content) + }; + case 'microlearning': + default: + return { + title: getOr('', 'name')(content) + }; + } +}; + +const headerSubcontent = (engineRef, state) => { + switch (engineRef) { + case 'learner': { + const chapterId = getCurrentChapterId(state); + const chapter = getContent('chapter', chapterId)(state); + const level = getCurrentContent(state); + const chapterIds = get('chapterIds', level); + const details = chapterId && chapterIds + ? `${1 + indexOf(chapterId, chapterIds)}/${chapterIds.length}` + : null; + + return { + title: getOr('', 'name', chapter), + details + }; + } + case 'microlearning': + default: + return null; + } +}; + +const headerProps = (options, {dispatch}) => state => { + const engine = getEngine(state); + const {ref: engineRef} = engine; return { - backHref: '/', - primary: { - title: getOr('', 'name', content) + type: engineRef, + content: { + onClick: () => dispatch(back), + ...headerContent(engineRef, state) }, + subcontent: headerSubcontent(engineRef, state), lives: { count: getLives(state) } diff --git a/packages/@coorpacademy-app-player/src/store/view/state-to-props/popin-end.js b/packages/@coorpacademy-app-player/src/store/view/state-to-props/popin-end.js index b023f53463..f710ae2ea5 100644 --- a/packages/@coorpacademy-app-player/src/store/view/state-to-props/popin-end.js +++ b/packages/@coorpacademy-app-player/src/store/view/state-to-props/popin-end.js @@ -4,7 +4,7 @@ import get from 'lodash/fp/get'; import getOr from 'lodash/fp/getOr'; import isEqual from 'lodash/fp/isEqual'; import pipe from 'lodash/fp/pipe'; -import {retry, exit} from '../../actions/api/location'; +import {retry, exit} from '../../actions/ui/location'; import { getCurrentContent, getCurrentExitNode, diff --git a/packages/@coorpacademy-app-player/src/store/view/state-to-props/test/header.js b/packages/@coorpacademy-app-player/src/store/view/state-to-props/test/header.js index 39c407a8e5..59ba05f6b9 100644 --- a/packages/@coorpacademy-app-player/src/store/view/state-to-props/test/header.js +++ b/packages/@coorpacademy-app-player/src/store/view/state-to-props/test/header.js @@ -1,6 +1,7 @@ import test from 'ava'; import set from 'lodash/fp/set'; import identity from 'lodash/fp/identity'; +import omit from 'lodash/fp/omit'; import {mockTranslate} from '@coorpacademy/translate'; import createHeader from '../header'; import basicSlide from './fixtures/slides/basic'; @@ -53,15 +54,8 @@ test('should create header with the number of lives in the state', t => { const ui = {current: {progressionId: 'basic'}}; const state = {data, ui}; const props = headerProps(state); - - t.deepEqual(props, { - backHref: '/', - primary: { - title: '' - }, - lives: { - count: 100 - } + t.deepEqual(props.lives, { + count: 100 }); }); @@ -70,14 +64,8 @@ test('should read title from the content when available', t => { const state = {data: set('progressions.entities.basic.content.ref', '1.B2', data), ui}; const props = headerProps(state); - t.deepEqual(props, { - backHref: '/', - primary: { - title: 'some-title' - }, - lives: { - count: 100 - } + t.deepEqual(omit('onClick', props.content), { + title: 'some-title' }); }); @@ -86,13 +74,7 @@ test('should set lives to null if lives are disabled in the progression', t => { const state = {data: set('progressions.entities.basic.state.livesDisabled', true, data), ui}; const props = headerProps(state); - t.deepEqual(props, { - backHref: '/', - primary: { - title: '' - }, - lives: { - count: null - } + t.deepEqual(props.lives, { + count: null }); }); diff --git a/packages/@coorpacademy-app-player/src/store/view/state-to-props/test/popin-correction.create-header-cta.js b/packages/@coorpacademy-app-player/src/store/view/state-to-props/test/popin-correction.create-header-cta.js index 0c6a10579d..86037d66b5 100644 --- a/packages/@coorpacademy-app-player/src/store/view/state-to-props/test/popin-correction.create-header-cta.js +++ b/packages/@coorpacademy-app-player/src/store/view/state-to-props/test/popin-correction.create-header-cta.js @@ -105,6 +105,8 @@ test('should create a "Next" CTA when entering a success popin', async t => { ENGINE_CONFIG_FETCH_SUCCESS, CONTENT_INFO_FETCH_REQUEST, CONTENT_FETCH_REQUEST, + CONTENT_FETCH_SUCCESS, + CONTENT_FETCH_REQUEST, CONTENT_FETCH_SUCCESS ]); diff --git a/packages/@coorpacademy-app-player/src/store/view/test/fixtures/progression-learner.json b/packages/@coorpacademy-app-player/src/store/view/test/fixtures/progression-learner.json new file mode 100644 index 0000000000..d0ff743323 --- /dev/null +++ b/packages/@coorpacademy-app-player/src/store/view/test/fixtures/progression-learner.json @@ -0,0 +1,59 @@ +{ + "data": { + "contents": { + "slide": { + "entities": { + "0": { + "chapter_id": "chapter2" + } + } + }, + "chapter": { + "entities": { + "chapter2": { + "name": "chapter2!" + } + } + }, + "level": { + "entities": { + "1": { + "name": "level1", + "level": "base", + "chapterIds": ["chapter1", "chapter2"] + } + } + } + }, + "progressions": { + "entities": { + "0": { + "engine": { + "ref": "learner", + "version": "1" + }, + "state": { + "nextContent": { + "ref": "0", + "type": "slide" + }, + "lives": 3, + "step": { + "current": 0, + "total": 4 + } + }, + "content": { + "ref": "1", + "type": "level" + } + } + } + } + }, + "ui": { + "current": { + "progressionId": "0" + } + } +} diff --git a/packages/@coorpacademy-app-player/src/web/views/test/slide.js b/packages/@coorpacademy-app-player/src/web/views/test/slide.js index eb8ea9e7d5..a7599d0842 100644 --- a/packages/@coorpacademy-app-player/src/web/views/test/slide.js +++ b/packages/@coorpacademy-app-player/src/web/views/test/slide.js @@ -2,8 +2,10 @@ import test from 'ava'; import identity from 'lodash/fp/identity'; import map from 'lodash/fp/map'; import omit from 'lodash/fp/omit'; +import isFunction from 'lodash/fp/isFunction'; import {mockTranslate} from '@coorpacademy/translate'; -import stateHeader from '../../../store/view/test/fixtures/progression-state'; +import microlearningHeader from '../../../store/view/test/fixtures/progression-state'; +import learnerHeader from '../../../store/view/test/fixtures/progression-learner'; import stateSlide from '../../../store/view/test/fixtures/player/slide'; import stateClue from '../../../store/view/test/fixtures/player/clue'; import stateLoadingClue from '../../../store/view/test/fixtures/player/loading-clue'; @@ -14,13 +16,57 @@ const options = {translate: mockTranslate}; const store = {dispatch: identity}; const mapStateToVNode = stateToVNode(options, store); -test('should display header', t => { - const vNode = mapStateToVNode(stateHeader); +test('should display microlearning header', t => { + const vNode = mapStateToVNode(microlearningHeader); testRendering(vNode); const {props: {header: headerProps}} = vNode; - t.deepEqual(headerProps.primary, {title: 'Les réseaux sociaux au service du crowdfunding'}); + t.is(headerProps.type, 'microlearning'); + t.is(headerProps.content.title, 'Les réseaux sociaux au service du crowdfunding'); + t.is(headerProps.subcontent, null); t.deepEqual(headerProps.lives, {count: 3}); + + const onClick = headerProps.content.onClick; + t.true(isFunction(onClick)); + const actionOnClick = onClick(); + t.true(isFunction(actionOnClick)); +}); + +test('should display learner header with chapter num', t => { + const vNode = mapStateToVNode(learnerHeader); + testRendering(vNode); + const {props: {header: headerProps}} = vNode; + + t.is(headerProps.type, 'learner'); + t.is(headerProps.content.title, 'level1'); + t.is(headerProps.content.details, 'base'); + t.is(headerProps.subcontent.title, 'chapter2!'); + t.is(headerProps.subcontent.details, '2/2'); + t.deepEqual(headerProps.lives, {count: 3}); + + const onClick = headerProps.content.onClick; + t.true(isFunction(onClick)); + const actionOnClick = onClick(); + t.true(isFunction(actionOnClick)); +}); + +test('should display learner header with no chapter nums', t => { + const state = omit('data.contents.level.entities.1.chapterIds', learnerHeader); + const vNode = mapStateToVNode(state); + testRendering(vNode); + const {props: {header: headerProps}} = vNode; + + t.is(headerProps.type, 'learner'); + t.is(headerProps.content.title, 'level1'); + t.is(headerProps.content.details, 'base'); + t.is(headerProps.subcontent.title, 'chapter2!'); + t.is(headerProps.subcontent.details, null); + t.deepEqual(headerProps.lives, {count: 3}); + + const onClick = headerProps.content.onClick; + t.true(isFunction(onClick)); + const actionOnClick = onClick(); + t.true(isFunction(actionOnClick)); }); test('should display slide', async t => { diff --git a/packages/@coorpacademy-components/src/index.js b/packages/@coorpacademy-components/src/index.js index 4acdd67f6f..9b22b6bd68 100644 --- a/packages/@coorpacademy-components/src/index.js +++ b/packages/@coorpacademy-components/src/index.js @@ -73,6 +73,7 @@ export Pdf from './molecule/pdf'; export Picture from './atom/picture'; export PictureBackground from './atom/picture-background'; export Player from './template/app-player/player'; +export PlayerHeader from './template/app-player/player/player-header'; export Popin from './organism/popin'; export PopinCorrection from './template/app-player/popin-correction'; export PopinEnd from './template/app-player/popin-end'; @@ -103,7 +104,6 @@ export Sidebar from './organism/sidebar'; export Slide from './atom/slide'; export Slider from './organism/slider'; export SlidesFooter from './molecule/slides/slides-footer'; -export SlidesHeader from './molecule/slides/slides-header'; export SlidesPlayer from './molecule/slides/slides-player'; export SocialLink from './atom/social-link'; export Spinner from './atom/spinner'; diff --git a/packages/@coorpacademy-components/src/molecule/slides/slides-header/index.js b/packages/@coorpacademy-components/src/molecule/slides/slides-header/index.js deleted file mode 100644 index f74eda7f62..0000000000 --- a/packages/@coorpacademy-components/src/molecule/slides/slides-header/index.js +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import get from 'lodash/fp/get'; -import classnames from 'classnames'; -import BackIcon from '@coorpacademy/nova-icons/composition/navigation/arrow-left'; -import Link from '../../../atom/link'; -import Provider from '../../../atom/provider'; -import Life from '../../../atom/life'; -import style from './style.css'; - -const SlidesHeader = (props, context) => { - const {backHref, primary, secondary, lives, className} = props; - const {skin} = context; - - const primarySkinColor = get('common.primary', skin); - - const primarySubtitleView = primary && primary.subtitle - ?
- {primary.subtitle} -
- : null; - - const secondarySubtitleView = secondary && secondary.subtitle - ?
- {secondary.subtitle} -
- : null; - - const secondaryTitleView = secondary && secondary.title - ?
- {secondary.title} -
- : null; - - return ( -
- - -
- {primarySubtitleView} -
- {primary.title} -
-
- -
- {secondarySubtitleView} - {secondaryTitleView} -
-
- -
-
- ); -}; - -SlidesHeader.contextTypes = { - skin: Provider.childContextTypes.skin -}; - -SlidesHeader.propTypes = { - backHref: Link.propTypes.href, - primary: PropTypes.shape({ - title: PropTypes.string.isRequired, - subtitle: PropTypes.string - }), - secondary: PropTypes.shape({ - title: PropTypes.string, - subtitle: PropTypes.string - }), - lives: PropTypes.shape({ - count: PropTypes.number.isRequired - }) -}; - -export default SlidesHeader; diff --git a/packages/@coorpacademy-components/src/molecule/slides/slides-header/test/fixtures/no-secondary.js b/packages/@coorpacademy-components/src/molecule/slides/slides-header/test/fixtures/no-secondary.js deleted file mode 100644 index 4580304999..0000000000 --- a/packages/@coorpacademy-components/src/molecule/slides/slides-header/test/fixtures/no-secondary.js +++ /dev/null @@ -1,12 +0,0 @@ -export default { - props: { - backHref: '#', - primary: { - title: 'Du management classique au nouveau blablabla', - subtitle: 'Basic' - }, - lives: { - count: 3 - } - } -}; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/index.js b/packages/@coorpacademy-components/src/template/app-player/player/index.js index 3e6d05abb9..58c9c851b6 100644 --- a/packages/@coorpacademy-components/src/template/app-player/player/index.js +++ b/packages/@coorpacademy-components/src/template/app-player/player/index.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import SlidesHeader from '../../../molecule/slides/slides-header'; import SlidesPlayer from '../../../molecule/slides/slides-player'; +import Header from './player-header'; import style from './style.css'; const SlidePlayer = props => { @@ -9,7 +9,7 @@ const SlidePlayer = props => { return (
- +
@@ -18,7 +18,7 @@ const SlidePlayer = props => { }; SlidePlayer.propTypes = { - header: PropTypes.shape(SlidesHeader.propTypes), + header: PropTypes.shape(Header.propTypes), player: PropTypes.shape(SlidesPlayer.propTypes) }; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/player-header/index.js b/packages/@coorpacademy-components/src/template/app-player/player/player-header/index.js new file mode 100644 index 0000000000..48864a09a9 --- /dev/null +++ b/packages/@coorpacademy-components/src/template/app-player/player/player-header/index.js @@ -0,0 +1,59 @@ +import isNil from 'lodash/fp/isNil'; +import React from 'react'; +import PropTypes from 'prop-types'; +import Link from '../../../../atom/link'; +import Life from '../../../../atom/life'; +import Learner from './learner'; +import Microlearning from './microlearning'; +import style from './style.css'; // eslint-disable-line css-modules/no-unused-class + +const PlayerHeaders = { + learner: Learner, + microlearning: Microlearning +}; + +const Lives = ({lives}, context) => { + if (isNil(lives)) { + return null; + } + + return ( +
+ +
+ ); +}; + +Lives.propTypes = { + lives: PropTypes.shape({ + count: PropTypes.number.isRequired + }) +}; + +const PlayerHeader = (props, context) => { + const {type} = props; + const Header = PlayerHeaders[type]; + + return ( +
+
+ +
+ ); +}; + +PlayerHeader.propTypes = { + type: PropTypes.oneOf(['learner', 'microlearning']), + content: PropTypes.shape({ + href: Link.propTypes.href, + title: PropTypes.string.isRequired, + subtitle: PropTypes.string + }), + subcontent: PropTypes.shape({ + title: PropTypes.string, + subtitle: PropTypes.string + }), + lives: Lives.propTypes.lives +}; + +export default PlayerHeader; diff --git a/packages/@coorpacademy-components/src/molecule/slides/slides-header/style.css b/packages/@coorpacademy-components/src/template/app-player/player/player-header/learner.css similarity index 59% rename from packages/@coorpacademy-components/src/molecule/slides/slides-header/style.css rename to packages/@coorpacademy-components/src/template/app-player/player/player-header/learner.css index 8ae0be4fa6..dd067213c5 100644 --- a/packages/@coorpacademy-components/src/molecule/slides/slides-header/style.css +++ b/packages/@coorpacademy-components/src/template/app-player/player/player-header/learner.css @@ -1,56 +1,49 @@ -@value breakpoints: "../../../variables/breakpoints.css"; +@value breakpoints: "../../../../variables/breakpoints.css"; @value mobile from breakpoints; -@value colors: "../../../variables/colors.css"; +@value colors: "../../../../variables/colors.css"; @value xtraLightGrey from colors; @value dark from colors; -@value medium from colors; -@value white from colors; @value light from colors; -@value negative from colors; @value black from colors; +@value medium from colors; .wrapper { - width: 100%; - height: 60px; + min-width: 0; + height: 100%; display: flex; - justify-content: space-between; background-color: xtraLightGrey; } -.backLink { - color: medium; - display: flex; - height: 100%; - align-items: center; - justify-content: center; - text-decoration: none; - max-width: calc(100% - 65px); +.backIcon { + composes: backIcon from './style.css'; } -.backLink:hover { +.contentWrapper { + padding-right: 16px; color: dark; + stroke: dark; + display: flex; + align-items: center; + text-decoration: none; + cursor: pointer; + max-width: 100%; } -.backIcon { - width: 32px; - height: 16px; - margin-left: 8px; - transition: color 0.3s; +.contentWrapper:hover { + color: medium; + stroke: medium; } -.primary { +.content { min-width: 0; - background-color: xtraLightGrey; - padding-right: 16px; - box-sizing: border-box; display: flex; align-items: flex-start; flex-direction: column; } -.primaryTitle { +.contentTitle { font-family: 'Open Sans'; - font-size: 15px; + font-size: 16px; color: inherit; font-weight: 700; white-space: nowrap; @@ -60,26 +53,25 @@ max-width: 100%; } -.primarySubtitle { +.contentDetails { font-family: 'Open Sans'; font-size: 10px; font-weight: 700; } -.secondary { +.subcontent { min-width: 0; flex-grow: 2; height: 100%; background-color: light; display: flex; padding: 0 16px; - justify-content: flex-start; align-items: center; } -.secondaryTitle { +.subcontentTitle { font-family: 'Open Sans'; - font-size: 15px; + font-size: 13px; font-weight: 500; color: black; white-space: nowrap; @@ -87,7 +79,7 @@ text-overflow: ellipsis; } -.secondarySubtitle { +.subcontentDetails { font-family: 'Open Sans'; font-size: 15px; font-weight: 700; @@ -95,25 +87,13 @@ margin-right: 10px; } -.livesWrapper { - background-color: light; - display: flex; - align-items: center; - justify-content: center; - position: relative; -} - -.life { - margin-right: 16px; -} - @media mobile { - .primary { + .content { max-width: none; width: 100%; } - .secondary { + .subcontent { display: none; } } diff --git a/packages/@coorpacademy-components/src/template/app-player/player/player-header/learner.js b/packages/@coorpacademy-components/src/template/app-player/player/player-header/learner.js new file mode 100644 index 0000000000..e2329d388a --- /dev/null +++ b/packages/@coorpacademy-components/src/template/app-player/player/player-header/learner.js @@ -0,0 +1,67 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import get from 'lodash/fp/get'; +import BackIcon from '@coorpacademy/nova-icons/composition/navigation/arrow-left'; +import Link from '../../../../atom/link'; +import Provider from '../../../../atom/provider'; +import style from './learner.css'; + +const Content = ({onClick, title, details}, context) => { + const {skin} = context; + const primarySkinColor = get('common.primary', skin); + + return ( + + +
+
+ {details} +
+ + + {title} + +
+ + ); +}; + +Content.contextTypes = { + skin: Provider.childContextTypes.skin +}; + +const Subcontent = ({title, details}, context) => +
+
{details}
+
{title}
+
; + +const LearnerHeader = (props, context) => { + const {content, subcontent} = props; + + return ( +
+ + +
+ ); +}; + +LearnerHeader.propTypes = { + content: PropTypes.shape({ + onClick: Link.propTypes.onClick, + title: PropTypes.string.isRequired, + subtitle: PropTypes.string + }).isRequired, + subcontent: PropTypes.shape({ + title: PropTypes.string.isRequired, + subtitle: PropTypes.string + }).isRequired +}; + +export default LearnerHeader; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/player-header/microlearning.css b/packages/@coorpacademy-components/src/template/app-player/player/player-header/microlearning.css new file mode 100644 index 0000000000..3ee144c53e --- /dev/null +++ b/packages/@coorpacademy-components/src/template/app-player/player/player-header/microlearning.css @@ -0,0 +1,48 @@ +@value breakpoints: "../../../../variables/breakpoints.css"; +@value mobile from breakpoints; +@value colors: "../../../../variables/colors.css"; +@value xtraLightGrey from colors; +@value dark from colors; +@value light from colors; +@value medium from colors; +@value black from colors; + +.content { + min-width: 0; + padding-right: 16px; + box-sizing: border-box; + display: flex; + align-items: center; + cursor: pointer; + text-decoration: none; + color: dark; + stroke: dark; +} + +.content:hover { + color: medium; + stroke: medium; +} + +.backIcon { + composes: backIcon from './style.css'; +} + +.contentTitle { + font-family: 'Open Sans'; + font-size: 13px; + color: inherit; + font-weight: 500; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + transition: color 0.3s; + max-width: 100%; +} + +@media mobile { + .content { + max-width: none; + width: 100%; + } +} diff --git a/packages/@coorpacademy-components/src/template/app-player/player/player-header/microlearning.js b/packages/@coorpacademy-components/src/template/app-player/player/player-header/microlearning.js new file mode 100644 index 0000000000..53e827fbe5 --- /dev/null +++ b/packages/@coorpacademy-components/src/template/app-player/player/player-header/microlearning.js @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import BackIcon from '@coorpacademy/nova-icons/composition/navigation/arrow-left'; +import Link from '../../../../atom/link'; +import style from './microlearning.css'; + +const Content = ({onClick, title}, context) => + + +
{title}
+ ; + +const MicrolearningHeader = (props, context) => { + const {content} = props; + return ; +}; + +MicrolearningHeader.propTypes = { + content: PropTypes.shape({ + onClick: Link.propTypes.onClick, + title: PropTypes.string.isRequired + }) +}; + +export default MicrolearningHeader; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/player-header/style.css b/packages/@coorpacademy-components/src/template/app-player/player/player-header/style.css new file mode 100644 index 0000000000..01c3238f0a --- /dev/null +++ b/packages/@coorpacademy-components/src/template/app-player/player/player-header/style.css @@ -0,0 +1,33 @@ +@value colors: "../../../../variables/colors.css"; +@value light from colors; + +.wrapper { + width: 100%; + height: 60px; + display: flex; + justify-content: space-between; + background-color: light; +} + +.backIcon { + width: 16px; + height: 16px; + margin: 0 10px; + color: inherit; + stroke: inherit; + stroke-width: 1px; + transition: all 0.3s; + min-width: 16px; +} + +.livesWrapper { + background-color: light; + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.life { + margin-right: 16px; +} diff --git a/packages/@coorpacademy-components/src/molecule/slides/slides-header/test/fixtures/default.js b/packages/@coorpacademy-components/src/template/app-player/player/player-header/test/fixtures/learner.js similarity index 58% rename from packages/@coorpacademy-components/src/molecule/slides/slides-header/test/fixtures/default.js rename to packages/@coorpacademy-components/src/template/app-player/player/player-header/test/fixtures/learner.js index f45ac9c72f..e11aff71fb 100644 --- a/packages/@coorpacademy-components/src/molecule/slides/slides-header/test/fixtures/default.js +++ b/packages/@coorpacademy-components/src/template/app-player/player/player-header/test/fixtures/learner.js @@ -1,13 +1,14 @@ export default { props: { - backHref: '#', - primary: { + type: 'learner', + content: { + onClick: () => console.log('onClick learner'), title: 'Du management classique au nouveau blablabla', - subtitle: 'Basic' + details: 'Basic' }, - secondary: { + subcontent: { title: 'Data-driven strategies and battle tested techniques', - subtitle: '2/8' + details: '2/8' }, lives: { count: 3 diff --git a/packages/@coorpacademy-components/src/molecule/slides/slides-header/test/fixtures/freerun.js b/packages/@coorpacademy-components/src/template/app-player/player/player-header/test/fixtures/microlearning.js similarity index 51% rename from packages/@coorpacademy-components/src/molecule/slides/slides-header/test/fixtures/freerun.js rename to packages/@coorpacademy-components/src/template/app-player/player/player-header/test/fixtures/microlearning.js index 14efa989c8..1ecb62bd9a 100644 --- a/packages/@coorpacademy-components/src/molecule/slides/slides-header/test/fixtures/freerun.js +++ b/packages/@coorpacademy-components/src/template/app-player/player/player-header/test/fixtures/microlearning.js @@ -1,11 +1,12 @@ export default { props: { - backHref: '#', - primary: { + type: 'microlearning', + content: { + onClick: () => console.log('onClick microlearning'), title: 'Du management classique au nouveau blablabla' }, lives: { - count: 3 + count: 1 } } }; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/player-header/test/fixtures/no-lives.js b/packages/@coorpacademy-components/src/template/app-player/player/player-header/test/fixtures/no-lives.js new file mode 100644 index 0000000000..69adb6cc49 --- /dev/null +++ b/packages/@coorpacademy-components/src/template/app-player/player/player-header/test/fixtures/no-lives.js @@ -0,0 +1,9 @@ +export default { + props: { + type: 'microlearning', + content: { + onClick: () => console.log('onClick microlearning'), + title: 'Du management classique au nouveau blablabla' + } + } +}; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/clue.js b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/clue.js index 1df6a6e453..c644eef5a9 100644 --- a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/clue.js +++ b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/clue.js @@ -1,4 +1,4 @@ -import SlidesHeader from '../../../../../molecule/slides/slides-header/test/fixtures/default'; +import SlidesHeader from '../../player-header/test/fixtures/learner'; import Clue from '../../../../../molecule/slides/slides-player/test/fixtures/clue'; const headerProps = SlidesHeader.props; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/context-with-image.js b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/context-with-image.js index c950b15a01..5ef36cb8df 100644 --- a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/context-with-image.js +++ b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/context-with-image.js @@ -1,4 +1,4 @@ -import SlidesHeader from '../../../../../molecule/slides/slides-header/test/fixtures/default'; +import SlidesHeader from '../../player-header/test/fixtures/learner'; import Context from '../../../../../molecule/slides/slides-player/test/fixtures/context-with-image'; const headerProps = SlidesHeader.props; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/context-with-pdf.js b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/context-with-pdf.js index 7ad0262e3d..39359eaca4 100644 --- a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/context-with-pdf.js +++ b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/context-with-pdf.js @@ -1,4 +1,4 @@ -import SlidesHeader from '../../../../../molecule/slides/slides-header/test/fixtures/default'; +import SlidesHeader from '../../player-header/test/fixtures/learner'; import Context from '../../../../../molecule/slides/slides-player/test/fixtures/context-with-pdf'; const headerProps = SlidesHeader.props; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/context-with-video.js b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/context-with-video.js index 06e5801601..d8efbf74fe 100644 --- a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/context-with-video.js +++ b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/context-with-video.js @@ -1,4 +1,4 @@ -import SlidesHeader from '../../../../../molecule/slides/slides-header/test/fixtures/default'; +import SlidesHeader from '../../player-header/test/fixtures/learner'; import Context from '../../../../../molecule/slides/slides-player/test/fixtures/context-with-video'; const headerProps = SlidesHeader.props; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/context.js b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/context.js index ddc6c01b7c..d14a5d8400 100644 --- a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/context.js +++ b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/context.js @@ -1,4 +1,4 @@ -import SlidesHeader from '../../../../../molecule/slides/slides-header/test/fixtures/default'; +import SlidesHeader from '../../player-header/test/fixtures/learner'; import Context from '../../../../../molecule/slides/slides-player/test/fixtures/context'; const headerProps = SlidesHeader.props; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/drop-down.js b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/drop-down.js index dd98c84136..958009d089 100644 --- a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/drop-down.js +++ b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/drop-down.js @@ -1,4 +1,4 @@ -import SlidesHeader from '../../../../../molecule/slides/slides-header/test/fixtures/default'; +import SlidesHeader from '../../player-header/test/fixtures/learner'; import DropDown from '../../../../../molecule/slides/slides-player/test/fixtures/drop-down'; const headerProps = SlidesHeader.props; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/empty.js b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/empty.js index 68f309f732..88c69bb33c 100644 --- a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/empty.js +++ b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/empty.js @@ -1,4 +1,4 @@ -import SlidesHeader from '../../../../../molecule/slides/slides-header/test/fixtures/default'; +import SlidesHeader from '../../player-header/test/fixtures/learner'; import Load from '../../../../../molecule/slides/slides-player/test/fixtures/loading'; const headerProps = SlidesHeader.props; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/error.js b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/error.js index 445cf207bf..e9b0c1d16d 100644 --- a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/error.js +++ b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/error.js @@ -1,4 +1,4 @@ -import SlidesHeader from '../../../../../molecule/slides/slides-header/test/fixtures/default'; +import SlidesHeader from '../../player-header/test/fixtures/learner'; import SlideError from '../../../../../molecule/slides/slides-player/test/fixtures/error'; const headerProps = SlidesHeader.props; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/free-text.js b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/free-text.js index fc4332e4b8..a19943f66d 100644 --- a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/free-text.js +++ b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/free-text.js @@ -1,4 +1,4 @@ -import SlidesHeader from '../../../../../molecule/slides/slides-header/test/fixtures/default'; +import SlidesHeader from '../../player-header/test/fixtures/learner'; import FreeText from '../../../../../molecule/slides/slides-player/test/fixtures/free-text'; const headerProps = SlidesHeader.props; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/media.js b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/media.js index b9186735b2..1b73570a5b 100644 --- a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/media.js +++ b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/media.js @@ -1,4 +1,4 @@ -import SlidesHeader from '../../../../../molecule/slides/slides-header/test/fixtures/default'; +import SlidesHeader from '../../player-header/test/fixtures/learner'; import Media from '../../../../../molecule/slides/slides-player/test/fixtures/media'; const headerProps = SlidesHeader.props; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/only-clue.js b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/only-clue.js index 77b2deb96a..7ff3a37ed2 100644 --- a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/only-clue.js +++ b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/only-clue.js @@ -1,4 +1,4 @@ -import SlidesHeader from '../../../../../molecule/slides/slides-header/test/fixtures/default'; +import SlidesHeader from '../../player-header/test/fixtures/learner'; import Clue from '../../../../../molecule/slides/slides-player/test/fixtures/only-clue'; const headerProps = SlidesHeader.props; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/qcm-drag.js b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/qcm-drag.js index 8c33702d12..bd7f679e8e 100644 --- a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/qcm-drag.js +++ b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/qcm-drag.js @@ -1,4 +1,4 @@ -import SlidesHeader from '../../../../../molecule/slides/slides-header/test/fixtures/default'; +import SlidesHeader from '../../player-header/test/fixtures/learner'; import QcmDrag from '../../../../../molecule/slides/slides-player/test/fixtures/qcm-drag'; const headerProps = SlidesHeader.props; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/qcm-graphic.js b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/qcm-graphic.js index 3033dbb31e..b046c5497f 100644 --- a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/qcm-graphic.js +++ b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/qcm-graphic.js @@ -1,4 +1,4 @@ -import SlidesHeader from '../../../../../molecule/slides/slides-header/test/fixtures/default'; +import SlidesHeader from '../../player-header/test/fixtures/learner'; import QcmGraphic from '../../../../../molecule/slides/slides-player/test/fixtures/qcm-graphic'; const headerProps = SlidesHeader.props; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/qcm-short.js b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/qcm-short.js index c38b7a95ad..ad50153f31 100644 --- a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/qcm-short.js +++ b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/qcm-short.js @@ -1,4 +1,4 @@ -import SlidesHeader from '../../../../../molecule/slides/slides-header/test/fixtures/default'; +import SlidesHeader from '../../player-header/test/fixtures/learner'; import Qcm from '../../../../../molecule/slides/slides-player/test/fixtures/qcm-short'; const headerProps = SlidesHeader.props; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/qcm.js b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/qcm.js index 0b5089fb78..2530854382 100644 --- a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/qcm.js +++ b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/qcm.js @@ -1,4 +1,4 @@ -import SlidesHeader from '../../../../../molecule/slides/slides-header/test/fixtures/default'; +import SlidesHeader from '../../player-header/test/fixtures/learner'; import Qcm from '../../../../../molecule/slides/slides-player/test/fixtures/qcm'; const headerProps = SlidesHeader.props; diff --git a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/range.js b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/range.js index b16f0c64cc..bff75670dd 100644 --- a/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/range.js +++ b/packages/@coorpacademy-components/src/template/app-player/player/test/fixtures/range.js @@ -1,4 +1,4 @@ -import SlidesHeader from '../../../../../molecule/slides/slides-header/test/fixtures/default'; +import SlidesHeader from '../../player-header/test/fixtures/learner'; import QuestionRange from '../../../../../molecule/slides/slides-player/test/fixtures/range'; const headerProps = SlidesHeader.props; diff --git a/packages/@coorpacademy-components/src/template/app-player/popin-end/index.js b/packages/@coorpacademy-components/src/template/app-player/popin-end/index.js index 7b5a9c2b21..464af8d1e8 100644 --- a/packages/@coorpacademy-components/src/template/app-player/popin-end/index.js +++ b/packages/@coorpacademy-components/src/template/app-player/popin-end/index.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import SlidesHeader from '../../../molecule/slides/slides-header'; +import Header from '../player/player-header'; import Summary from './summary'; import style from './style.css'; @@ -13,14 +13,16 @@ const PopinEnd = props => { const {header, summary} = props; return (
- +
+
+
); }; PopinEnd.propTypes = { - header: PropTypes.shape(SlidesHeader.propTypes), + header: PropTypes.shape(Header.propTypes), summary: PropTypes.shape(Summary.propTypes) }; diff --git a/packages/@coorpacademy-components/src/template/app-player/popin-end/test/fixtures/default.js b/packages/@coorpacademy-components/src/template/app-player/popin-end/test/fixtures/default.js index fa2178a144..34af460e91 100644 --- a/packages/@coorpacademy-components/src/template/app-player/popin-end/test/fixtures/default.js +++ b/packages/@coorpacademy-components/src/template/app-player/popin-end/test/fixtures/default.js @@ -1,4 +1,4 @@ -import SlidesHeader from '../../../../../molecule/slides/slides-header/test/fixtures/default'; +import SlidesHeader from '../../../player/player-header/test/fixtures/learner'; const headerProps = SlidesHeader.props; diff --git a/packages/@coorpacademy-components/storybook/components.js b/packages/@coorpacademy-components/storybook/components.js index 666609a055..dae67beab3 100644 --- a/packages/@coorpacademy-components/storybook/components.js +++ b/packages/@coorpacademy-components/storybook/components.js @@ -90,7 +90,6 @@ import Qcm from '../src/molecule/questions/qcm'; import QuestionRange from '../src/molecule/questions/question-range'; import Template from '../src/molecule/questions/template'; import SlidesFooter from '../src/molecule/slides/slides-footer'; -import SlidesHeader from '../src/molecule/slides/slides-header'; import SlidesPlayer from '../src/molecule/slides/slides-player'; import Container from '../src/organism/accordion/container'; import Part from '../src/organism/accordion/part'; @@ -116,6 +115,7 @@ import Loading from '../src/template/app-player/loading'; import Player from '../src/template/app-player/player'; import PopinCorrection from '../src/template/app-player/popin-correction'; import PopinEnd from '../src/template/app-player/popin-end'; +import PlayerHeader from '../src/template/app-player/player/player-header'; import BrandCreate from '../src/template/back-office/brand-create'; import BrandList from '../src/template/back-office/brand-list'; import BrandUpdate from '../src/template/back-office/brand-update'; @@ -425,9 +425,6 @@ import SlidesFooterFixtureMediaSelected from '../src/molecule/slides/slides-foot import SlidesFooterFixtureNotify from '../src/molecule/slides/slides-footer/test/fixtures/notify'; import SlidesFooterFixtureOnlyClue from '../src/molecule/slides/slides-footer/test/fixtures/only-clue'; import SlidesFooterFixtureWithContext from '../src/molecule/slides/slides-footer/test/fixtures/with-context'; -import SlidesHeaderFixtureDefault from '../src/molecule/slides/slides-header/test/fixtures/default'; -import SlidesHeaderFixtureFreerun from '../src/molecule/slides/slides-header/test/fixtures/freerun'; -import SlidesHeaderFixtureNoSecondary from '../src/molecule/slides/slides-header/test/fixtures/no-secondary'; import SlidesPlayerFixtureClue from '../src/molecule/slides/slides-player/test/fixtures/clue'; import SlidesPlayerFixtureContextWithImage from '../src/molecule/slides/slides-player/test/fixtures/context-with-image'; import SlidesPlayerFixtureContextWithPdf from '../src/molecule/slides/slides-player/test/fixtures/context-with-pdf'; @@ -541,6 +538,9 @@ import PopinEndFixtureNextCourse from '../src/template/app-player/popin-end/test import PopinEndFixtureSimpleAction from '../src/template/app-player/popin-end/test/fixtures/simple-action'; import PopinEndFixtureSubscribe from '../src/template/app-player/popin-end/test/fixtures/subscribe'; import PopinEndFixtureWithRecommendations from '../src/template/app-player/popin-end/test/fixtures/with-recommendations'; +import PlayerHeaderFixtureLearner from '../src/template/app-player/player/player-header/test/fixtures/learner'; +import PlayerHeaderFixtureMicrolearning from '../src/template/app-player/player/player-header/test/fixtures/microlearning'; +import PlayerHeaderFixtureNoLives from '../src/template/app-player/player/player-header/test/fixtures/no-lives'; import BrandCreateFixtureDefault from '../src/template/back-office/brand-create/test/fixtures/default'; import BrandCreateFixtureError from '../src/template/back-office/brand-create/test/fixtures/error'; import BrandCreateFixtureLoading from '../src/template/back-office/brand-create/test/fixtures/loading'; @@ -684,7 +684,6 @@ export const components = { }, MoleculeSlides: { SlidesFooter, - SlidesHeader, SlidesPlayer }, OrganismAccordion: { @@ -719,6 +718,9 @@ export const components = { PopinCorrection, PopinEnd }, + TemplateAppPlayerPlayer: { + PlayerHeader + }, TemplateBackOffice: { BrandCreate, BrandList, @@ -1227,11 +1229,6 @@ export const fixtures = { OnlyClue: SlidesFooterFixtureOnlyClue, WithContext: SlidesFooterFixtureWithContext }, - SlidesHeader: { - Default: SlidesHeaderFixtureDefault, - Freerun: SlidesHeaderFixtureFreerun, - NoSecondary: SlidesHeaderFixtureNoSecondary - }, SlidesPlayer: { Clue: SlidesPlayerFixtureClue, ContextWithImage: SlidesPlayerFixtureContextWithImage, @@ -1404,6 +1401,13 @@ export const fixtures = { WithRecommendations: PopinEndFixtureWithRecommendations } }, + TemplateAppPlayerPlayer: { + PlayerHeader: { + Learner: PlayerHeaderFixtureLearner, + Microlearning: PlayerHeaderFixtureMicrolearning, + NoLives: PlayerHeaderFixtureNoLives + } + }, TemplateBackOffice: { BrandCreate: { Default: BrandCreateFixtureDefault, @@ -1565,9 +1569,7 @@ export const dependencies = { "BrandCreate": true }, "TemplateAppPlayer": { - "PopinEnd": true, - "PopinCorrection": true, - "Player": true + "PopinCorrection": true }, "Organism": { "SetupHeader": true, @@ -1580,9 +1582,6 @@ export const dependencies = { "BrandTable": true, "BrandForm": true }, - "MoleculeSlides": { - "SlidesHeader": true - }, "MoleculeDashboard": { "StartBattle": true, "NewsList": true @@ -1832,12 +1831,12 @@ export const dependencies = { }, "Life": { "parents": { + "TemplateAppPlayerPlayer": { + "PlayerHeader": true + }, "TemplateAppPlayer": { "PopinEnd": true, "Player": true - }, - "MoleculeSlides": { - "SlidesHeader": true } }, "children": {} @@ -2749,8 +2748,8 @@ export const dependencies = { } } }, - "MoleculeSlides": { - "SlidesHeader": { + "TemplateAppPlayerPlayer": { + "PlayerHeader": { "parents": { "TemplateAppPlayer": { "PopinEnd": true, @@ -2759,31 +2758,7 @@ export const dependencies = { }, "children": { "Atom": { - "Life": true, - "Link": true - } - } - }, - "SlidesFooter": { - "parents": { - "TemplateAppPlayer": { - "Player": true - }, - "MoleculeSlides": { - "SlidesPlayer": true - } - }, - "children": {} - }, - "SlidesPlayer": { - "parents": { - "TemplateAppPlayer": { - "Player": true - } - }, - "children": { - "MoleculeSlides": { - "SlidesFooter": true + "Life": true } } } @@ -2843,6 +2818,31 @@ export const dependencies = { } } }, + "MoleculeSlides": { + "SlidesFooter": { + "parents": { + "TemplateAppPlayer": { + "Player": true + }, + "MoleculeSlides": { + "SlidesPlayer": true + } + }, + "children": {} + }, + "SlidesPlayer": { + "parents": { + "TemplateAppPlayer": { + "Player": true + } + }, + "children": { + "MoleculeSlides": { + "SlidesFooter": true + } + } + } + }, "MoleculeQuestions": { "QcmDrag": { "parents": { @@ -3027,13 +3027,14 @@ export const dependencies = { "Player": { "children": { "Atom": { - "Life": true, - "Link": true + "Life": true }, "MoleculeSlides": { "SlidesFooter": true, - "SlidesHeader": true, "SlidesPlayer": true + }, + "TemplateAppPlayerPlayer": { + "PlayerHeader": true } } }, @@ -3062,11 +3063,10 @@ export const dependencies = { "PopinEnd": { "children": { "Atom": { - "Life": true, - "Link": true + "Life": true }, - "MoleculeSlides": { - "SlidesHeader": true + "TemplateAppPlayerPlayer": { + "PlayerHeader": true } } }