@coorpacademy/components 11.18.4-alpha.4 → 11.18.5
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/picture-background/index.d.ts +1 -0
- package/es/atom/picture-background/index.js +10 -5
- package/es/atom/picture-background/index.js.map +1 -1
- package/es/molecule/answer/index.js +15 -12
- package/es/molecule/answer/index.js.map +1 -1
- package/es/molecule/answer/prop-types.d.ts +2 -0
- package/es/molecule/answer/prop-types.d.ts.map +1 -1
- package/es/molecule/answer/prop-types.js +1 -0
- package/es/molecule/answer/prop-types.js.map +1 -1
- package/es/molecule/card/index.d.ts.map +1 -1
- package/es/molecule/card/index.js +9 -10
- package/es/molecule/card/index.js.map +1 -1
- package/es/molecule/card/style.css +5 -41
- package/es/molecule/cm-popin/index.d.ts.map +1 -1
- package/es/molecule/cm-popin/index.js +9 -45
- package/es/molecule/cm-popin/index.js.map +1 -1
- package/es/molecule/cm-popin/style.css +0 -29
- package/es/molecule/cm-popin/types.d.ts +1 -31
- package/es/molecule/cm-popin/types.d.ts.map +1 -1
- package/es/molecule/cm-popin/types.js +3 -13
- package/es/molecule/cm-popin/types.js.map +1 -1
- package/es/molecule/questions/qcm-drag/index.js +1 -2
- package/es/molecule/questions/qcm-drag/index.js.map +1 -1
- package/es/organism/review-slide/index.js +1 -0
- package/es/organism/review-slide/index.js.map +1 -1
- package/es/organism/review-slide/prop-types.d.ts +2 -0
- package/es/organism/review-slide/prop-types.d.ts.map +1 -1
- package/es/organism/review-stacked-slides/prop-types.d.ts +5 -0
- package/es/organism/review-stacked-slides/prop-types.d.ts.map +1 -1
- package/es/template/app-player/loading/index.d.ts +1 -19
- package/es/template/app-player/player/index.d.ts +2 -38
- package/es/template/app-player/player/slides/index.d.ts +5 -20
- package/es/template/app-player/player/slides/index.d.ts.map +1 -1
- package/es/template/app-player/player/slides/index.js +5 -2
- package/es/template/app-player/player/slides/index.js.map +1 -1
- package/es/template/app-player/popin-correction/index.d.ts +1 -19
- package/es/template/app-player/popin-correction/index.d.ts.map +1 -1
- package/es/template/app-player/popin-end/index.d.ts +1 -19
- package/es/template/app-review/index.d.ts +6 -19
- package/es/template/app-review/index.d.ts.map +1 -1
- package/es/template/app-review/player/prop-types.d.ts +6 -19
- package/es/template/app-review/player/prop-types.d.ts.map +1 -1
- package/es/template/app-review/prop-types.d.ts +6 -19
- package/es/template/app-review/prop-types.d.ts.map +1 -1
- package/es/template/back-office/brand-update/index.d.ts +1 -19
- package/es/template/common/dashboard/index.d.ts +1 -89
- package/es/template/common/dashboard/index.d.ts.map +1 -1
- package/es/template/common/dashboard/index.js +2 -4
- package/es/template/common/dashboard/index.js.map +1 -1
- package/es/template/common/search-page/index.d.ts +0 -70
- package/es/template/common/search-page/index.d.ts.map +1 -1
- package/es/template/common/search-page/index.js +3 -8
- package/es/template/common/search-page/index.js.map +1 -1
- package/es/template/common/search-page/style.css +0 -5
- package/es/template/external-course/index.d.ts +1 -19
- package/es/variables/colors.css +1 -1
- package/lib/atom/picture-background/index.d.ts +1 -0
- package/lib/atom/picture-background/index.js +10 -5
- package/lib/atom/picture-background/index.js.map +1 -1
- package/lib/molecule/answer/index.js +15 -12
- package/lib/molecule/answer/index.js.map +1 -1
- package/lib/molecule/answer/prop-types.d.ts +2 -0
- package/lib/molecule/answer/prop-types.d.ts.map +1 -1
- package/lib/molecule/answer/prop-types.js +1 -0
- package/lib/molecule/answer/prop-types.js.map +1 -1
- package/lib/molecule/card/index.d.ts.map +1 -1
- package/lib/molecule/card/index.js +7 -9
- package/lib/molecule/card/index.js.map +1 -1
- package/lib/molecule/card/style.css +5 -41
- package/lib/molecule/cm-popin/index.d.ts.map +1 -1
- package/lib/molecule/cm-popin/index.js +8 -47
- package/lib/molecule/cm-popin/index.js.map +1 -1
- package/lib/molecule/cm-popin/style.css +0 -29
- package/lib/molecule/cm-popin/types.d.ts +1 -31
- package/lib/molecule/cm-popin/types.d.ts.map +1 -1
- package/lib/molecule/cm-popin/types.js +3 -15
- package/lib/molecule/cm-popin/types.js.map +1 -1
- package/lib/molecule/questions/qcm-drag/index.js +1 -2
- package/lib/molecule/questions/qcm-drag/index.js.map +1 -1
- package/lib/organism/review-slide/index.js +1 -0
- package/lib/organism/review-slide/index.js.map +1 -1
- package/lib/organism/review-slide/prop-types.d.ts +2 -0
- package/lib/organism/review-slide/prop-types.d.ts.map +1 -1
- package/lib/organism/review-stacked-slides/prop-types.d.ts +5 -0
- package/lib/organism/review-stacked-slides/prop-types.d.ts.map +1 -1
- package/lib/template/app-player/loading/index.d.ts +1 -19
- package/lib/template/app-player/player/index.d.ts +2 -38
- package/lib/template/app-player/player/slides/index.d.ts +5 -20
- package/lib/template/app-player/player/slides/index.d.ts.map +1 -1
- package/lib/template/app-player/player/slides/index.js +5 -2
- package/lib/template/app-player/player/slides/index.js.map +1 -1
- package/lib/template/app-player/popin-correction/index.d.ts +1 -19
- package/lib/template/app-player/popin-correction/index.d.ts.map +1 -1
- package/lib/template/app-player/popin-end/index.d.ts +1 -19
- package/lib/template/app-review/index.d.ts +6 -19
- package/lib/template/app-review/index.d.ts.map +1 -1
- package/lib/template/app-review/player/prop-types.d.ts +6 -19
- package/lib/template/app-review/player/prop-types.d.ts.map +1 -1
- package/lib/template/app-review/prop-types.d.ts +6 -19
- package/lib/template/app-review/prop-types.d.ts.map +1 -1
- package/lib/template/back-office/brand-update/index.d.ts +1 -19
- package/lib/template/common/dashboard/index.d.ts +1 -89
- package/lib/template/common/dashboard/index.d.ts.map +1 -1
- package/lib/template/common/dashboard/index.js +2 -4
- package/lib/template/common/dashboard/index.js.map +1 -1
- package/lib/template/common/search-page/index.d.ts +0 -70
- package/lib/template/common/search-page/index.d.ts.map +1 -1
- package/lib/template/common/search-page/index.js +3 -9
- package/lib/template/common/search-page/index.js.map +1 -1
- package/lib/template/common/search-page/style.css +0 -5
- package/lib/template/external-course/index.d.ts +1 -19
- package/lib/variables/colors.css +1 -1
- package/package.json +2 -2
- package/es/atom/title/types.d.ts +0 -9
- package/es/atom/title/types.d.ts.map +0 -1
- package/es/atom/title/types.js +0 -2
- package/es/atom/title/types.js.map +0 -1
- package/lib/atom/title/types.d.ts +0 -9
- package/lib/atom/title/types.d.ts.map +0 -1
- package/lib/atom/title/types.js +0 -2
- package/lib/atom/title/types.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["THEMES","default","coorpmanager","style","CardBackground","type","image","empty","ariaLabel","skin","externalContent","isExternalContent","primaryColor","whiteColor","EXTERNAL_CONTENT_ICONS","IconType","icon","iconColor","color","backgroundIcon","externalIconCircleWrapper","externalIcon","_backgroundIcon","classnames","externalIconCircleWithImageWrapper","backgroundColor","externalIconWithImage","imageWrapper","backgroundImage","externalContentHeader","externalBackground","emptyIcon","chapterImageWrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","bool","Card","memo","props","context","badge","adaptiv","disabled","hidden","title","author","customer","certifiedAuthor","progress","favorite","addFavoriteToolTip","removeFavoriteToolTip","onClick","onFavoriteClick","isSelected","notification","badgeCategory","badgeLabel","theme","disabledContent","cardArialabel","backgroundAriaLabel","favoriteAriaLabel","selectableAriaLabel","customerAriaLabel","badgeAriaLabel","disabledArialabel","cardContentLabelAriaLabel","cardStyle","chapter","course","lazy","grid","handleClick","useMemo","e","lock","lockContent","lockIcon","inlineBadgeStyle","getType","contentType","MODES","CARD","lockWrapper","shape","Customer","number","func","Notification","CardContentInfo","oneOf","Favorite","Selectable"],"sources":["../../../src/molecule/card/index.js"],"sourcesContent":["import React, {useMemo, memo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {get, isEmpty, isUndefined, pick, keys} from 'lodash/fp';\nimport {\n NovaCompositionCoorpacademyPadlock as LockIcon,\n NovaCompositionCoorpacademyPictures as PicturesIcon\n} from '@coorpacademy/nova-icons';\nimport {isExternalContent, EXTERNAL_CONTENT_ICONS} from '../../util/external-content';\nimport Provider from '../../atom/provider';\nimport CardContentInfo, {MODES} from '../card-content';\nimport Customer from './customer';\nimport Favorite from './favorite';\nimport Selectable from './selectable';\nimport Notification from './notification';\nimport style from './style.css';\n\nexport const THEMES = {\n default: null,\n coorpmanager: style.coorpmanager\n};\n\nconst CardBackground = ({type, image, empty, 'aria-label': ariaLabel}, {skin}) => {\n const externalContent = isExternalContent(type);\n const primaryColor = get('common.primary', skin);\n const whiteColor = get('common.white', skin);\n\n if (externalContent && EXTERNAL_CONTENT_ICONS[type]) {\n const IconType = EXTERNAL_CONTENT_ICONS[type].icon;\n const iconColor = EXTERNAL_CONTENT_ICONS[type].color;\n const backgroundIcon = (\n <div className={style.externalIconCircleWrapper}>\n <IconType className={style.externalIcon} />\n </div>\n );\n\n if (image) {\n const _backgroundIcon = (\n <div\n className={classnames(\n style.externalIconCircleWrapper,\n style.externalIconCircleWithImageWrapper\n )}\n style={{\n backgroundColor: iconColor\n }}\n >\n <IconType className={style.externalIconWithImage} />\n </div>\n );\n\n return (\n <div className={style.imageWrapper}>\n <div\n data-name=\"cover\"\n aria-label={ariaLabel}\n style={{\n backgroundColor: iconColor,\n backgroundImage: `url('${image}')`\n }}\n className={classnames(style.externalContentHeader, style.externalBackground)}\n >\n {_backgroundIcon}\n </div>\n </div>\n );\n }\n return (\n <div className={style.imageWrapper}>\n <div\n data-name=\"cover\"\n aria-label={ariaLabel}\n style={{\n backgroundColor: iconColor\n }}\n className={style.externalContentHeader}\n >\n {backgroundIcon}\n </div>\n </div>\n );\n }\n\n const emptyIcon = empty ? (\n <PicturesIcon className={style.emptyIcon} style={{color: whiteColor}} />\n ) : null;\n return (\n <div\n className={classnames(\n style.imageWrapper,\n type === 'chapter' ? style.chapterImageWrapper : null\n )}\n >\n <div\n data-name=\"cover\"\n aria-label={ariaLabel}\n className={style.image}\n style={{\n backgroundColor: primaryColor,\n backgroundImage: image ? `url('${image}')` : 'none'\n }}\n >\n {emptyIcon}\n </div>\n </div>\n );\n};\n\nCardBackground.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nCardBackground.propTypes = {\n type: PropTypes.string,\n image: PropTypes.string,\n empty: PropTypes.bool,\n 'aria-label': PropTypes.string\n};\n\nconst Card = memo(function Card(props, context) {\n const {skin} = context;\n const {\n image,\n badge,\n adaptiv,\n disabled: hidden = false,\n type = 'course',\n title,\n author,\n customer,\n certifiedAuthor,\n progress,\n favorite,\n addFavoriteToolTip,\n removeFavoriteToolTip,\n onClick,\n onFavoriteClick,\n isSelected,\n notification,\n badgeCategory,\n badgeLabel,\n theme = 'default',\n disabledContent,\n 'aria-label': cardArialabel,\n 'background-aria-label': backgroundAriaLabel,\n 'favorite-aria-label': favoriteAriaLabel,\n 'selectable-aria-label': selectableAriaLabel,\n 'customer-aria-label': customerAriaLabel,\n 'badge-aria-label': badgeAriaLabel,\n 'disabled-aria-label': disabledArialabel,\n 'card-content-aria-label': cardContentLabelAriaLabel\n } = props;\n const empty = isEmpty(pick(['title', 'type', 'author', 'image'], props));\n const primaryColor = get('common.primary', skin);\n const cardStyle = classnames(\n THEMES[theme],\n type === 'chapter' ? style.chapter : style.course,\n title ? null : style.lazy,\n style.grid,\n empty ? style.empty : null\n );\n const disabled = hidden && (!isSelected || isUndefined(isSelected));\n const handleClick = useMemo(() => e => !disabled && onClick(e), [disabled, onClick]);\n const lock = disabled ? (\n <div className={style.lockContent}>\n <LockIcon className={style.lockIcon} height={48} />\n <span aria-label={disabledArialabel}>{disabledContent}</span>\n </div>\n ) : null;\n const inlineBadgeStyle = {color: primaryColor};\n const getType = contentType => {\n switch (contentType) {\n case 'chapter':\n return 'microlearning';\n case 'course':\n return 'learner';\n default:\n return contentType;\n }\n };\n\n return (\n <div\n className={cardStyle}\n data-name=\"card\"\n data-lock={disabled}\n data-type={getType(type)}\n disabled={disabled}\n onClick={handleClick}\n aria-label={cardArialabel}\n >\n <CardBackground type={type} image={image} empty={empty} aria-label={backgroundAriaLabel} />\n {isUndefined(isSelected) && !isUndefined(favorite) ? (\n <Favorite\n className={style.favorite}\n favorite={favorite}\n disabled={disabled}\n onFavoriteClick={onFavoriteClick}\n addFavoriteToolTip={addFavoriteToolTip}\n removeFavoriteToolTip={removeFavoriteToolTip}\n aria-label={favoriteAriaLabel}\n />\n ) : null}\n <Selectable isSelected={isSelected} hidden={hidden} aria-label={selectableAriaLabel} />\n {notification ? <Notification {...notification} /> : null}\n {customer ? (\n <Customer\n {...customer}\n theme={theme}\n type={type}\n disabled={disabled}\n aria-label={customerAriaLabel}\n />\n ) : null}\n <CardContentInfo\n mode={MODES.CARD}\n adaptiv={adaptiv}\n author={author}\n certifiedAuthor={certifiedAuthor}\n disabled={disabled}\n empty={empty}\n progress={progress}\n title={title}\n type={type}\n badgeCategory={badgeCategory}\n badgeLabel={badgeLabel}\n theme={theme}\n aria-label={cardContentLabelAriaLabel}\n />\n {badge ? (\n <div className={style.badge} style={inlineBadgeStyle} aria-label={badgeAriaLabel}>\n {badge}\n </div>\n ) : null}\n {disabled ? (\n <div className={style.lockWrapper} aria-label={disabledArialabel}>\n {lock}\n </div>\n ) : null}\n </div>\n );\n});\n\nCard.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nCard.propTypes = {\n badge: PropTypes.string,\n image: PropTypes.string,\n disabled: PropTypes.bool,\n adaptiv: PropTypes.bool,\n type: PropTypes.string,\n title: PropTypes.string,\n author: PropTypes.string,\n certifiedAuthor: PropTypes.bool,\n customer: PropTypes.shape(Customer.propTypes),\n progress: PropTypes.number,\n favorite: PropTypes.bool,\n addFavoriteToolTip: PropTypes.string,\n removeFavoriteToolTip: PropTypes.string,\n onClick: PropTypes.func,\n onFavoriteClick: PropTypes.func,\n isSelected: PropTypes.bool,\n notification: PropTypes.shape(Notification.propTypes),\n badgeCategory: CardContentInfo.propTypes.badgeCategory,\n badgeLabel: CardContentInfo.propTypes.badgeLabel,\n theme: PropTypes.oneOf(keys(THEMES)),\n disabledContent: PropTypes.string,\n 'aria-label': PropTypes.string,\n 'background-aria-label': PropTypes.string,\n 'favorite-aria-label': Favorite.propTypes['aria-label'],\n 'selectable-aria-label': Selectable.propTypes['aria-label'],\n 'customer-aria-label': Customer.propTypes['aria-label'],\n 'badge-aria-label': PropTypes.string,\n 'disabled-aria-label': PropTypes.string,\n 'card-content-aria-label': CardContentInfo.propTypes['aria-label']\n};\nexport default Card;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["THEMES","default","coorpmanager","style","CardBackground","type","image","empty","ariaLabel","skin","externalContent","isExternalContent","primaryColor","whiteColor","EXTERNAL_CONTENT_ICONS","IconType","icon","iconColor","color","backgroundIcon","externalIconCircleWrapper","externalIcon","_backgroundIcon","classnames","externalIconCircleWithImageWrapper","backgroundColor","externalIconWithImage","imageWrapper","backgroundImage","externalContentHeader","externalBackground","emptyIcon","chapterImageWrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","bool","Card","memo","props","context","badge","adaptiv","disabled","hidden","title","author","customer","certifiedAuthor","progress","favorite","addFavoriteToolTip","removeFavoriteToolTip","onClick","onFavoriteClick","isSelected","notification","badgeCategory","badgeLabel","theme","cardArialabel","backgroundAriaLabel","favoriteAriaLabel","selectableAriaLabel","customerAriaLabel","badgeAriaLabel","disabledArialabel","cardContentLabelAriaLabel","cardStyle","chapter","course","lazy","grid","handleClick","useMemo","e","lock","lockIcon","inlineBadgeStyle","getType","contentType","MODES","CARD","lockWrapper","shape","Customer","number","func","Notification","CardContentInfo","oneOf","Favorite","Selectable"],"sources":["../../../src/molecule/card/index.js"],"sourcesContent":["import React, {useMemo, memo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {get, isEmpty, isUndefined, pick, keys} from 'lodash/fp';\nimport {\n NovaSolidLoginLocked as LockIcon,\n NovaCompositionCoorpacademyPictures as PicturesIcon\n} from '@coorpacademy/nova-icons';\nimport {isExternalContent, EXTERNAL_CONTENT_ICONS} from '../../util/external-content';\nimport Provider from '../../atom/provider';\nimport CardContentInfo, {MODES} from '../card-content';\nimport Customer from './customer';\nimport Favorite from './favorite';\nimport Selectable from './selectable';\nimport Notification from './notification';\nimport style from './style.css';\n\nexport const THEMES = {\n default: null,\n coorpmanager: style.coorpmanager\n};\n\nconst CardBackground = ({type, image, empty, 'aria-label': ariaLabel}, {skin}) => {\n const externalContent = isExternalContent(type);\n const primaryColor = get('common.primary', skin);\n const whiteColor = get('common.white', skin);\n\n if (externalContent && EXTERNAL_CONTENT_ICONS[type]) {\n const IconType = EXTERNAL_CONTENT_ICONS[type].icon;\n const iconColor = EXTERNAL_CONTENT_ICONS[type].color;\n const backgroundIcon = (\n <div className={style.externalIconCircleWrapper}>\n <IconType className={style.externalIcon} />\n </div>\n );\n\n if (image) {\n const _backgroundIcon = (\n <div\n className={classnames(\n style.externalIconCircleWrapper,\n style.externalIconCircleWithImageWrapper\n )}\n style={{\n backgroundColor: iconColor\n }}\n >\n <IconType className={style.externalIconWithImage} />\n </div>\n );\n\n return (\n <div className={style.imageWrapper}>\n <div\n data-name=\"cover\"\n aria-label={ariaLabel}\n style={{\n backgroundColor: iconColor,\n backgroundImage: `url('${image}')`\n }}\n className={classnames(style.externalContentHeader, style.externalBackground)}\n >\n {_backgroundIcon}\n </div>\n </div>\n );\n }\n return (\n <div className={style.imageWrapper}>\n <div\n data-name=\"cover\"\n aria-label={ariaLabel}\n style={{\n backgroundColor: iconColor\n }}\n className={style.externalContentHeader}\n >\n {backgroundIcon}\n </div>\n </div>\n );\n }\n\n const emptyIcon = empty ? (\n <PicturesIcon className={style.emptyIcon} style={{color: whiteColor}} />\n ) : null;\n return (\n <div\n className={classnames(\n style.imageWrapper,\n type === 'chapter' ? style.chapterImageWrapper : null\n )}\n >\n <div\n data-name=\"cover\"\n aria-label={ariaLabel}\n className={style.image}\n style={{\n backgroundColor: primaryColor,\n backgroundImage: image ? `url('${image}')` : 'none'\n }}\n >\n {emptyIcon}\n </div>\n </div>\n );\n};\n\nCardBackground.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nCardBackground.propTypes = {\n type: PropTypes.string,\n image: PropTypes.string,\n empty: PropTypes.bool,\n 'aria-label': PropTypes.string\n};\n\nconst Card = memo(function Card(props, context) {\n const {skin} = context;\n const {\n image,\n badge,\n adaptiv,\n disabled: hidden = false,\n type = 'course',\n title,\n author,\n customer,\n certifiedAuthor,\n progress,\n favorite,\n addFavoriteToolTip,\n removeFavoriteToolTip,\n onClick,\n onFavoriteClick,\n isSelected,\n notification,\n badgeCategory,\n badgeLabel,\n theme = 'default',\n 'aria-label': cardArialabel,\n 'background-aria-label': backgroundAriaLabel,\n 'favorite-aria-label': favoriteAriaLabel,\n 'selectable-aria-label': selectableAriaLabel,\n 'customer-aria-label': customerAriaLabel,\n 'badge-aria-label': badgeAriaLabel,\n 'disabled-aria-label': disabledArialabel,\n 'card-content-aria-label': cardContentLabelAriaLabel\n } = props;\n const empty = isEmpty(pick(['title', 'type', 'author', 'image'], props));\n const primaryColor = get('common.primary', skin);\n const whiteColor = get('common.white', skin);\n const cardStyle = classnames(\n THEMES[theme],\n type === 'chapter' ? style.chapter : style.course,\n title ? null : style.lazy,\n style.grid,\n empty ? style.empty : null\n );\n const disabled = hidden && (!isSelected || isUndefined(isSelected));\n const handleClick = useMemo(() => e => !disabled && onClick(e), [disabled, onClick]);\n const lock = disabled ? (\n <LockIcon className={style.lockIcon} style={{color: whiteColor}} height={40} />\n ) : null;\n const inlineBadgeStyle = {color: primaryColor};\n const getType = contentType => {\n switch (contentType) {\n case 'chapter':\n return 'microlearning';\n case 'course':\n return 'learner';\n default:\n return contentType;\n }\n };\n\n return (\n <div\n className={cardStyle}\n data-name=\"card\"\n data-lock={disabled}\n data-type={getType(type)}\n disabled={disabled}\n onClick={handleClick}\n aria-label={cardArialabel}\n >\n <CardBackground type={type} image={image} empty={empty} aria-label={backgroundAriaLabel} />\n {isUndefined(isSelected) && !isUndefined(favorite) ? (\n <Favorite\n className={style.favorite}\n favorite={favorite}\n disabled={disabled}\n onFavoriteClick={onFavoriteClick}\n addFavoriteToolTip={addFavoriteToolTip}\n removeFavoriteToolTip={removeFavoriteToolTip}\n aria-label={favoriteAriaLabel}\n />\n ) : null}\n <Selectable isSelected={isSelected} hidden={hidden} aria-label={selectableAriaLabel} />\n {notification ? <Notification {...notification} /> : null}\n {customer ? (\n <Customer\n {...customer}\n theme={theme}\n type={type}\n disabled={disabled}\n aria-label={customerAriaLabel}\n />\n ) : null}\n <CardContentInfo\n mode={MODES.CARD}\n adaptiv={adaptiv}\n author={author}\n certifiedAuthor={certifiedAuthor}\n disabled={disabled}\n empty={empty}\n progress={progress}\n title={title}\n type={type}\n badgeCategory={badgeCategory}\n badgeLabel={badgeLabel}\n theme={theme}\n aria-label={cardContentLabelAriaLabel}\n />\n {badge ? (\n <div className={style.badge} style={inlineBadgeStyle} aria-label={badgeAriaLabel}>\n {badge}\n </div>\n ) : null}\n {disabled ? (\n <div className={style.lockWrapper} aria-label={disabledArialabel}>\n {lock}\n </div>\n ) : null}\n </div>\n );\n});\n\nCard.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nCard.propTypes = {\n badge: PropTypes.string,\n image: PropTypes.string,\n disabled: PropTypes.bool,\n adaptiv: PropTypes.bool,\n type: PropTypes.string,\n title: PropTypes.string,\n author: PropTypes.string,\n certifiedAuthor: PropTypes.bool,\n customer: PropTypes.shape(Customer.propTypes),\n progress: PropTypes.number,\n favorite: PropTypes.bool,\n addFavoriteToolTip: PropTypes.string,\n removeFavoriteToolTip: PropTypes.string,\n onClick: PropTypes.func,\n onFavoriteClick: PropTypes.func,\n isSelected: PropTypes.bool,\n notification: PropTypes.shape(Notification.propTypes),\n badgeCategory: CardContentInfo.propTypes.badgeCategory,\n badgeLabel: CardContentInfo.propTypes.badgeLabel,\n theme: PropTypes.oneOf(keys(THEMES)),\n 'aria-label': PropTypes.string,\n 'background-aria-label': PropTypes.string,\n 'favorite-aria-label': Favorite.propTypes['aria-label'],\n 'selectable-aria-label': Selectable.propTypes['aria-label'],\n 'customer-aria-label': Customer.propTypes['aria-label'],\n 'badge-aria-label': PropTypes.string,\n 'disabled-aria-label': PropTypes.string,\n 'card-content-aria-label': CardContentInfo.propTypes['aria-label']\n};\nexport default Card;\n"],"mappings":"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"}
|
|
@@ -8,10 +8,9 @@
|
|
|
8
8
|
@value dark from colors;
|
|
9
9
|
@value xtraLightGrey from colors;
|
|
10
10
|
@value white from colors;
|
|
11
|
-
@value cm_negative_200 from colors;
|
|
12
|
-
@value negative_100 from colors;
|
|
13
11
|
|
|
14
12
|
.default[disabled] {
|
|
13
|
+
pointer-events: none;
|
|
15
14
|
cursor: inherit;
|
|
16
15
|
}
|
|
17
16
|
|
|
@@ -164,7 +163,7 @@
|
|
|
164
163
|
}
|
|
165
164
|
|
|
166
165
|
.default[disabled] .imageWrapper {
|
|
167
|
-
opacity: 0.
|
|
166
|
+
opacity: 0.4;
|
|
168
167
|
}
|
|
169
168
|
|
|
170
169
|
.lockWrapper {
|
|
@@ -187,47 +186,12 @@
|
|
|
187
186
|
bottom: 0;
|
|
188
187
|
content: '';
|
|
189
188
|
opacity: 0.4;
|
|
190
|
-
background:
|
|
191
|
-
to bottom,
|
|
192
|
-
black 50%
|
|
193
|
-
);
|
|
194
|
-
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.2);
|
|
195
|
-
z-index: 1;
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
.lockWrapper:hover .lockIcon {
|
|
199
|
-
background-color: cm_negative_200;
|
|
200
|
-
color: white;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
.lockWrapper:hover span {
|
|
204
|
-
font-weight: 600;
|
|
205
|
-
width: 150px;
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
.lockContent {
|
|
209
|
-
display: flex;
|
|
210
|
-
gap: 8px;
|
|
211
|
-
flex-direction: column;
|
|
212
|
-
z-index: 2;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
.lockContent span {
|
|
216
|
-
width: 134px;
|
|
217
|
-
height: 40px;
|
|
218
|
-
color: white;
|
|
219
|
-
text-align: center;
|
|
220
|
-
font-family: 'Gilroy';
|
|
221
|
-
font-size: 14px;
|
|
222
|
-
line-height: 20px;
|
|
189
|
+
background: black;
|
|
223
190
|
}
|
|
224
191
|
|
|
225
192
|
.lockIcon {
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
align-self: center;
|
|
229
|
-
border-radius: 16px;
|
|
230
|
-
color: cm_negative_200;
|
|
193
|
+
font-size: 40px;
|
|
194
|
+
z-index: 1;
|
|
231
195
|
}
|
|
232
196
|
|
|
233
197
|
.imageWrapper {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/index.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/index.js"],"names":[],"mappings":";AAeA,kDAoLC"}
|
|
@@ -15,22 +15,12 @@ var _buttonLinkIconOnly = _interopRequireDefault(require("../../atom/button-link
|
|
|
15
15
|
|
|
16
16
|
var _inputSwitch = _interopRequireDefault(require("../../atom/input-switch"));
|
|
17
17
|
|
|
18
|
-
var _title = _interopRequireDefault(require("../../atom/title"));
|
|
19
|
-
|
|
20
|
-
var _cardsGrid = _interopRequireDefault(require("../../organism/cards-grid"));
|
|
21
|
-
|
|
22
18
|
var _style = _interopRequireDefault(require("./style.css"));
|
|
23
19
|
|
|
24
20
|
var _types = _interopRequireDefault(require("./types"));
|
|
25
21
|
|
|
26
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
23
|
|
|
28
|
-
const IconType = {
|
|
29
|
-
lockedContent: /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyPadlock, {
|
|
30
|
-
className: _style.default.lockIcon
|
|
31
|
-
})
|
|
32
|
-
};
|
|
33
|
-
|
|
34
24
|
const CMPopin = props => {
|
|
35
25
|
const {
|
|
36
26
|
content,
|
|
@@ -45,8 +35,7 @@ const CMPopin = props => {
|
|
|
45
35
|
thirdButton,
|
|
46
36
|
cookieTitle,
|
|
47
37
|
descriptionBtnTxt,
|
|
48
|
-
listBtnSwicth
|
|
49
|
-
items
|
|
38
|
+
listBtnSwicth
|
|
50
39
|
} = props;
|
|
51
40
|
const logo = {
|
|
52
41
|
AlertDiamond: _novaIcons.NovaSolidInterfaceFeedbackInterfaceAlertDiamond,
|
|
@@ -61,28 +50,10 @@ const CMPopin = props => {
|
|
|
61
50
|
} : null;
|
|
62
51
|
|
|
63
52
|
const renderHeader = () => {
|
|
64
|
-
if (header) {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
backgroundImage
|
|
69
|
-
} = header;
|
|
70
|
-
const TopTitleIcon = IconType[headerIcon];
|
|
71
|
-
|
|
72
|
-
if (title) {
|
|
73
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
74
|
-
className: _style.default.headerContent
|
|
75
|
-
}, TopTitleIcon, /*#__PURE__*/_react.default.createElement("div", {
|
|
76
|
-
className: _style.default.headerTitle
|
|
77
|
-
}, /*#__PURE__*/_react.default.createElement(_title.default, title)));
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
return /*#__PURE__*/_react.default.createElement("img", {
|
|
81
|
-
className: _style.default.headerBackground,
|
|
82
|
-
src: backgroundImage
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
|
|
53
|
+
if (header) return /*#__PURE__*/_react.default.createElement("img", {
|
|
54
|
+
className: _style.default.headerBackground,
|
|
55
|
+
src: header
|
|
56
|
+
});
|
|
86
57
|
if (mode === 'cookie') return /*#__PURE__*/_react.default.createElement("div", {
|
|
87
58
|
className: _style.default.cookieHeader
|
|
88
59
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -144,14 +115,6 @@ const CMPopin = props => {
|
|
|
144
115
|
})(listBtnSwicth);
|
|
145
116
|
};
|
|
146
117
|
|
|
147
|
-
const renderItems = () => {
|
|
148
|
-
const {
|
|
149
|
-
type,
|
|
150
|
-
list
|
|
151
|
-
} = items;
|
|
152
|
-
return type === 'content' ? /*#__PURE__*/_react.default.createElement(_cardsGrid.default, list) : null;
|
|
153
|
-
};
|
|
154
|
-
|
|
155
118
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
156
119
|
className: mode !== 'cookie' ? _style.default.background : null,
|
|
157
120
|
style: backgroundImageStyle,
|
|
@@ -166,7 +129,7 @@ const CMPopin = props => {
|
|
|
166
129
|
"aria-label": 'close-icon',
|
|
167
130
|
size: "small",
|
|
168
131
|
icon: "close"
|
|
169
|
-
}) : null),
|
|
132
|
+
}) : null), /*#__PURE__*/_react.default.createElement("div", {
|
|
170
133
|
className: mode === 'cookie' || mode === 'information' ? _style.default.cookieTitleContainer : _style.default.titleContainer
|
|
171
134
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
172
135
|
className: _style.default.contentSection
|
|
@@ -185,11 +148,9 @@ const CMPopin = props => {
|
|
|
185
148
|
dangerouslySetInnerHTML: {
|
|
186
149
|
__html: descriptionText
|
|
187
150
|
}
|
|
188
|
-
}) : null)
|
|
151
|
+
}) : null), descriptionBtnTxt ? /*#__PURE__*/_react.default.createElement("div", {
|
|
189
152
|
className: _style.default.descriptionBtn
|
|
190
|
-
}, descriptionBtnTxt) : null,
|
|
191
|
-
className: _style.default.itemsContainer
|
|
192
|
-
}, renderItems()) : null, renderBtnSwitch(), firstButton || secondButton || thirdButton ? /*#__PURE__*/_react.default.createElement("div", {
|
|
153
|
+
}, descriptionBtnTxt) : null, renderBtnSwitch(), firstButton || secondButton || thirdButton ? /*#__PURE__*/_react.default.createElement("div", {
|
|
193
154
|
className: _style.default.buttonContainer
|
|
194
155
|
}, firstButton ? /*#__PURE__*/_react.default.createElement("div", {
|
|
195
156
|
className: firstButton.largeButton ? _style.default.largeButton : _style.default.button
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["IconType","lockedContent","style","lockIcon","CMPopin","props","content","mode","firstButton","secondButton","onClose","header","icon","backgroundImageUrl","descriptionText","thirdButton","cookieTitle","descriptionBtnTxt","listBtnSwicth","items","logo","AlertDiamond","WindowUpload","MoonRocket","CheckCircle1","LogoComponent","backgroundImageStyle","backgroundImage","backgroundSize","renderHeader","title","headerIcon","TopTitleIcon","headerContent","headerTitle","headerBackground","cookieHeader","cookieIconContainer","cookieIcon","getClassBtnSwitch","index","btnList","firstBtnSwitchContainer","length","lastBtnSwitchContainer","singleSwitchContainer","renderBtnSwitch","map","convert","cap","el","type","value","onChange","titlePosition","theme","details","requiredSelection","disabled","id","dataName","renderItems","list","background","popinCookie","popin","popinHeader","cookieTitleContainer","titleContainer","contentSection","message","__html","descriptionBtn","itemsContainer","buttonContainer","largeButton","button","label","handleOnclick","customStyle","propTypes"],"sources":["../../../src/molecule/cm-popin/index.js"],"sourcesContent":["import React from 'react';\nimport {\n NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond,\n NovaSolidApplicationsWindowUpload3 as WindowUpload,\n NovaLineSettingsCookie as Cookie,\n NovaSolidSpaceMoonRocket as MoonRocket,\n NovaCompositionCoorpacademyPadlock as LockIcon,\n NovaLineStatusCheckCircle1 as CheckCircle1\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 Title from '../../atom/title';\nimport CardsGrid from '../../organism/cards-grid';\nimport style from './style.css';\nimport propTypes from './types';\n\nconst IconType = {\n lockedContent: <LockIcon className={style.lockIcon} />\n};\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 items\n } = props;\n const logo = {\n AlertDiamond,\n WindowUpload,\n MoonRocket,\n CheckCircle1\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) {\n const {title, headerIcon, backgroundImage} = header;\n const TopTitleIcon = IconType[headerIcon];\n if (title) {\n return (\n <div className={style.headerContent}>\n {TopTitleIcon}\n <div className={style.headerTitle}>\n <Title {...title} />\n </div>\n </div>\n );\n }\n return <img className={style.headerBackground} src={backgroundImage} />;\n }\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 const renderItems = () => {\n const {type, list} = items;\n return type === 'content' ? <CardsGrid {...list} /> : null;\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 {mode !== 'items' ? (\n <div\n className={\n mode === 'cookie' || mode === 'information'\n ? style.cookieTitleContainer\n : style.titleContainer\n }\n >\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 ) : null}\n {descriptionBtnTxt ? <div className={style.descriptionBtn}>{descriptionBtnTxt}</div> : null}\n {items ? <div className={style.itemsContainer}>{renderItems()}</div> : null}\n {renderBtnSwitch()}\n {firstButton || secondButton || thirdButton ? (\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 customStyle={secondButton.customStyle}\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 ) : null}\n </div>\n </div>\n );\n};\n\nCMPopin.propTypes = propTypes;\n\nexport default CMPopin;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["CMPopin","props","content","mode","firstButton","secondButton","onClose","header","icon","backgroundImageUrl","descriptionText","thirdButton","cookieTitle","descriptionBtnTxt","listBtnSwicth","logo","AlertDiamond","WindowUpload","MoonRocket","CheckCircle1","LogoComponent","backgroundImageStyle","backgroundImage","backgroundSize","renderHeader","style","headerBackground","cookieHeader","cookieIconContainer","cookieIcon","getClassBtnSwitch","index","btnList","firstBtnSwitchContainer","length","lastBtnSwitchContainer","singleSwitchContainer","renderBtnSwitch","map","convert","cap","el","type","title","value","onChange","titlePosition","theme","details","requiredSelection","disabled","id","dataName","background","popinCookie","popin","popinHeader","cookieTitleContainer","titleContainer","contentSection","message","__html","descriptionBtn","buttonContainer","largeButton","button","label","handleOnclick","customStyle","propTypes"],"sources":["../../../src/molecule/cm-popin/index.js"],"sourcesContent":["import React from 'react';\nimport {\n NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond,\n NovaSolidApplicationsWindowUpload3 as WindowUpload,\n NovaLineSettingsCookie as Cookie,\n NovaSolidSpaceMoonRocket as MoonRocket,\n NovaLineStatusCheckCircle1 as CheckCircle1\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';\nimport propTypes from './types';\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 CheckCircle1\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\n className={\n mode === 'cookie' || mode === 'information'\n ? style.cookieTitleContainer\n : style.titleContainer\n }\n >\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 {firstButton || secondButton || thirdButton ? (\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 customStyle={secondButton.customStyle}\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 ) : null}\n </div>\n </div>\n );\n};\n\nCMPopin.propTypes = propTypes;\n\nexport default CMPopin;\n"],"mappings":"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"}
|
|
@@ -22,7 +22,6 @@
|
|
|
22
22
|
@value mobile from breakpoints;
|
|
23
23
|
@value tablet from breakpoints;
|
|
24
24
|
@value cm_grey_75 from colors;
|
|
25
|
-
@value negative_100 from colors;
|
|
26
25
|
|
|
27
26
|
.background {
|
|
28
27
|
top: 0px;
|
|
@@ -138,26 +137,6 @@
|
|
|
138
137
|
.popinHeader button {
|
|
139
138
|
position: absolute;
|
|
140
139
|
}
|
|
141
|
-
|
|
142
|
-
.headerContent {
|
|
143
|
-
display: flex;
|
|
144
|
-
width: 100%;
|
|
145
|
-
gap: 16px;
|
|
146
|
-
padding: 8px;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
.headerTitle {
|
|
150
|
-
margin-bottom: 16px;
|
|
151
|
-
padding: 2px 0px 2px;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
.lockIcon {
|
|
155
|
-
height: 48px;
|
|
156
|
-
background-color: negative_100;
|
|
157
|
-
border-radius: 16px;
|
|
158
|
-
color: cm_negative_200;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
140
|
.descriptionText {
|
|
162
141
|
text-align: center;
|
|
163
142
|
font-family: Gilroy;
|
|
@@ -301,14 +280,6 @@ a {
|
|
|
301
280
|
padding: 0px 8px 0px 0px
|
|
302
281
|
}
|
|
303
282
|
|
|
304
|
-
.itemsContainer {
|
|
305
|
-
height: 369px;
|
|
306
|
-
overflow-y: auto;
|
|
307
|
-
padding: inherit;
|
|
308
|
-
width: 100%;
|
|
309
|
-
border-top: 1px solid cm_grey_100;
|
|
310
|
-
}
|
|
311
|
-
|
|
312
283
|
@media tablet {
|
|
313
284
|
.popin {
|
|
314
285
|
width: 80%;
|
|
@@ -1,21 +1,8 @@
|
|
|
1
1
|
import PropTypes from 'prop-types';
|
|
2
|
-
import { TitleProps } from '../../atom/title/types';
|
|
3
|
-
import CardsGrid from '../../organism/cards-grid';
|
|
4
2
|
declare const propTypes: {
|
|
5
3
|
content: PropTypes.Requireable<string>;
|
|
6
4
|
mode: PropTypes.Requireable<string>;
|
|
7
|
-
header: PropTypes.Requireable<
|
|
8
|
-
title: PropTypes.Requireable<PropTypes.InferProps<{
|
|
9
|
-
title: PropTypes.Requireable<string>;
|
|
10
|
-
subtitle: PropTypes.Requireable<string>;
|
|
11
|
-
type: PropTypes.Requireable<string>;
|
|
12
|
-
'data-name': PropTypes.Requireable<string>;
|
|
13
|
-
titleSize: PropTypes.Requireable<string>;
|
|
14
|
-
subtitleSize: PropTypes.Requireable<string>;
|
|
15
|
-
}>>;
|
|
16
|
-
headerIcon: PropTypes.Requireable<string>;
|
|
17
|
-
backgroundImage: PropTypes.Requireable<string>;
|
|
18
|
-
}>>;
|
|
5
|
+
header: PropTypes.Requireable<string>;
|
|
19
6
|
firstButton: PropTypes.Requireable<PropTypes.InferProps<{
|
|
20
7
|
label: PropTypes.Requireable<string>;
|
|
21
8
|
handleOnclick: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -63,18 +50,6 @@ declare const propTypes: {
|
|
|
63
50
|
'data-name': PropTypes.Requireable<string>;
|
|
64
51
|
requiredSelection: PropTypes.Requireable<boolean>;
|
|
65
52
|
}> | null | undefined)[]>;
|
|
66
|
-
items: PropTypes.Requireable<PropTypes.InferProps<{
|
|
67
|
-
type: PropTypes.Requireable<string>;
|
|
68
|
-
list: PropTypes.Requireable<PropTypes.InferProps<{
|
|
69
|
-
list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
|
|
70
|
-
loading: PropTypes.Requireable<boolean>;
|
|
71
|
-
}>>;
|
|
72
|
-
}>>;
|
|
73
|
-
};
|
|
74
|
-
declare type PopinHeaderProps = {
|
|
75
|
-
title: TitleProps;
|
|
76
|
-
backgroundImage: string;
|
|
77
|
-
headerIcon: string;
|
|
78
53
|
};
|
|
79
54
|
export declare type QuitPopinButton = {
|
|
80
55
|
'aria-label'?: string;
|
|
@@ -90,14 +65,9 @@ export declare type CMPopinProps = {
|
|
|
90
65
|
content: string;
|
|
91
66
|
icon: string;
|
|
92
67
|
mode: string;
|
|
93
|
-
popinHeader?: PopinHeaderProps;
|
|
94
68
|
descriptionText: string;
|
|
95
69
|
firstButton?: QuitPopinButton;
|
|
96
70
|
secondButton?: QuitPopinButton;
|
|
97
|
-
items?: {
|
|
98
|
-
type: string;
|
|
99
|
-
list: PropTypes.InferProps<typeof CardsGrid.propTypes>;
|
|
100
|
-
};
|
|
101
71
|
};
|
|
102
72
|
export default propTypes;
|
|
103
73
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCd,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,eAAe,CAAC;CAChC,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -9,20 +9,12 @@ var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
|
|
|
9
9
|
|
|
10
10
|
var _inputSwitch = _interopRequireDefault(require("../../atom/input-switch"));
|
|
11
11
|
|
|
12
|
-
var _title = _interopRequireDefault(require("../../atom/title"));
|
|
13
|
-
|
|
14
|
-
var _cardsGrid = _interopRequireDefault(require("../../organism/cards-grid"));
|
|
15
|
-
|
|
16
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
13
|
|
|
18
14
|
const propTypes = {
|
|
19
15
|
content: _propTypes.default.string,
|
|
20
|
-
mode: _propTypes.default.oneOf(['alert', 'information', 'cookie'
|
|
21
|
-
header: _propTypes.default.
|
|
22
|
-
title: _propTypes.default.shape(_title.default.propTypes),
|
|
23
|
-
headerIcon: _propTypes.default.string,
|
|
24
|
-
backgroundImage: _propTypes.default.string
|
|
25
|
-
}),
|
|
16
|
+
mode: _propTypes.default.oneOf(['alert', 'information', 'cookie']),
|
|
17
|
+
header: _propTypes.default.string,
|
|
26
18
|
firstButton: _propTypes.default.shape({
|
|
27
19
|
label: _propTypes.default.string,
|
|
28
20
|
handleOnclick: _propTypes.default.func,
|
|
@@ -53,11 +45,7 @@ const propTypes = {
|
|
|
53
45
|
descriptionText: _propTypes.default.string,
|
|
54
46
|
cookieTitle: _propTypes.default.string,
|
|
55
47
|
descriptionBtnTxt: _propTypes.default.string,
|
|
56
|
-
listBtnSwicth: _propTypes.default.arrayOf(_propTypes.default.shape(_inputSwitch.default.propTypes))
|
|
57
|
-
items: _propTypes.default.shape({
|
|
58
|
-
type: _propTypes.default.string,
|
|
59
|
-
list: _propTypes.default.shape(_cardsGrid.default.propTypes)
|
|
60
|
-
})
|
|
48
|
+
listBtnSwicth: _propTypes.default.arrayOf(_propTypes.default.shape(_inputSwitch.default.propTypes))
|
|
61
49
|
};
|
|
62
50
|
var _default = propTypes;
|
|
63
51
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","names":["propTypes","content","PropTypes","string","mode","oneOf","header","
|
|
1
|
+
{"version":3,"file":"types.js","names":["propTypes","content","PropTypes","string","mode","oneOf","header","firstButton","shape","label","handleOnclick","func","largeButton","bool","type","customStyle","Cta","secondButton","thirdButton","onClose","icon","backgroundImageUrl","descriptionText","cookieTitle","descriptionBtnTxt","listBtnSwicth","arrayOf","InputSwitch"],"sources":["../../../src/molecule/cm-popin/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport Cta from '../../atom/button-link';\nimport InputSwitch from '../../atom/input-switch';\n\nconst 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: Cta.propTypes.customStyle\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.bool,\n customStyle: Cta.propTypes.customStyle\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.bool,\n customStyle: Cta.propTypes.customStyle\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 type QuitPopinButton = {\n 'aria-label'?: string;\n label: string;\n type: string;\n customStyle?: {\n backgroundColor?: string;\n color?: string;\n };\n handleOnclick: () => void;\n};\n\nexport type CMPopinProps = {\n content: string;\n icon: string;\n mode: string;\n descriptionText: string;\n firstButton?: QuitPopinButton;\n secondButton?: QuitPopinButton;\n};\n\nexport default propTypes;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;;;AAEA,MAAMA,SAAS,GAAG;EAChBC,OAAO,EAAEC,kBAAA,CAAUC,MADH;EAEhBC,IAAI,EAAEF,kBAAA,CAAUG,KAAV,CAAgB,CAAC,OAAD,EAAU,aAAV,EAAyB,QAAzB,CAAhB,CAFU;EAGhBC,MAAM,EAAEJ,kBAAA,CAAUC,MAHF;EAIhBI,WAAW,EAAEL,kBAAA,CAAUM,KAAV,CAAgB;IAC3BC,KAAK,EAAEP,kBAAA,CAAUC,MADU;IAE3BO,aAAa,EAAER,kBAAA,CAAUS,IAFE;IAG3B,cAAcT,kBAAA,CAAUC,MAHG;IAI3BS,WAAW,EAAEV,kBAAA,CAAUW,IAJI;IAK3BC,IAAI,EAAEZ,kBAAA,CAAUG,KAAV,CAAgB,CAAC,WAAD,EAAc,SAAd,EAAyB,WAAzB,EAAsC,UAAtC,CAAhB,CALqB;IAM3BU,WAAW,EAAEC,mBAAA,CAAIhB,SAAJ,CAAce;EANA,CAAhB,CAJG;EAYhBE,YAAY,EAAEf,kBAAA,CAAUM,KAAV,CAAgB;IAC5BC,KAAK,EAAEP,kBAAA,CAAUC,MADW;IAE5BO,aAAa,EAAER,kBAAA,CAAUS,IAFG;IAG5BG,IAAI,EAAEZ,kBAAA,CAAUG,KAAV,CAAgB,CAAC,WAAD,EAAc,SAAd,EAAyB,WAAzB,CAAhB,CAHsB;IAI5B,cAAcH,kBAAA,CAAUC,MAJI;IAK5BS,WAAW,EAAEV,kBAAA,CAAUW,IALK;IAM5BE,WAAW,EAAEC,mBAAA,CAAIhB,SAAJ,CAAce;EANC,CAAhB,CAZE;EAoBhBG,WAAW,EAAEhB,kBAAA,CAAUM,KAAV,CAAgB;IAC3BC,KAAK,EAAEP,kBAAA,CAAUC,MADU;IAE3BO,aAAa,EAAER,kBAAA,CAAUS,IAFE;IAG3BG,IAAI,EAAEZ,kBAAA,CAAUG,KAAV,CAAgB,CAAC,WAAD,EAAc,SAAd,EAAyB,WAAzB,CAAhB,CAHqB;IAI3B,cAAcH,kBAAA,CAAUC,MAJG;IAK3BS,WAAW,EAAEV,kBAAA,CAAUW,IALI;IAM3BE,WAAW,EAAEC,mBAAA,CAAIhB,SAAJ,CAAce;EANA,CAAhB,CApBG;EA4BhBI,OAAO,EAAEjB,kBAAA,CAAUS,IA5BH;EA6BhBS,IAAI,EAAElB,kBAAA,CAAUC,MA7BA;EA8BhBkB,kBAAkB,EAAEnB,kBAAA,CAAUC,MA9Bd;EA+BhBmB,eAAe,EAAEpB,kBAAA,CAAUC,MA/BX;EAgChBoB,WAAW,EAAErB,kBAAA,CAAUC,MAhCP;EAiChBqB,iBAAiB,EAAEtB,kBAAA,CAAUC,MAjCb;EAkChBsB,aAAa,EAAEvB,kBAAA,CAAUwB,OAAV,CAAkBxB,kBAAA,CAAUM,KAAV,CAAgBmB,oBAAA,CAAY3B,SAA5B,CAAlB;AAlCC,CAAlB;eAyDeA,S"}
|
|
@@ -152,8 +152,7 @@ const QcmDrag = ({
|
|
|
152
152
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
153
153
|
className: _style.default.wrapper,
|
|
154
154
|
role: "group",
|
|
155
|
-
"aria-label": groupAriaLabel
|
|
156
|
-
title: groupAriaLabel
|
|
155
|
+
"aria-label": groupAriaLabel
|
|
157
156
|
}, /*#__PURE__*/_react.default.createElement(SelectedAnswerSections, {
|
|
158
157
|
answers: answers,
|
|
159
158
|
help: help,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["AnswersPropTypes","PropTypes","arrayOf","shape","onClick","func","order","number","selected","bool","title","string","help","EmptyView","style","emptySpan","propTypes","Choices","answers","answersViews","map","answer","key","checkboxId","classnames","invisibleAnswer","unselected","innerHTML","hiddenCheckbox","choices","SelectedAnswerSections","backgroundColor","selectedAnswers","selectedAnswersViews","boxShadow","getShadowBoxColorFromPrimary","background","content","selectedAnswerText","__html","length","emptyAnswers","QcmDrag","groupAriaLabel","legacyContext","skin","GetSkinFromContext","primarySkinColor","wrapper","contextTypes","Provider","childContextTypes"],"sources":["../../../../src/molecule/questions/qcm-drag/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {pipe, filter, orderBy, getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst AnswersPropTypes = PropTypes.arrayOf(\n PropTypes.shape({\n onClick: PropTypes.func,\n order: PropTypes.number,\n selected: PropTypes.bool,\n title: PropTypes.string,\n help: PropTypes.string\n })\n);\n\nconst EmptyView = ({help}) => <span className={style.emptySpan}>{help}</span>;\n\nEmptyView.propTypes = {\n help: PropTypes.string\n};\n\nconst Choices = ({answers}) => {\n const answersViews = answers.map((answer, key) => {\n const {onClick, title, selected} = answer;\n const checkboxId = `checkbox-drag-${key}`;\n return (\n <div\n className={classnames(selected ? style.invisibleAnswer : style.unselected, style.innerHTML)}\n data-name=\"answer\"\n key={key}\n onClick={onClick}\n >\n <label htmlFor={checkboxId}>\n <input\n id={checkboxId}\n type=\"checkbox\"\n value={title}\n title={title}\n aria-label={title}\n checked={selected}\n onChange={onClick}\n className={style.hiddenCheckbox}\n />\n {title}\n </label>\n </div>\n );\n });\n\n return <div className={style.choices}>{answersViews}</div>;\n};\n\nChoices.propTypes = {\n answers: AnswersPropTypes\n};\n\nconst SelectedAnswerSections = ({answers, help, backgroundColor}) => {\n const selectedAnswers = pipe(filter('selected'), orderBy('order', 'asc'))(answers);\n const selectedAnswersViews = selectedAnswers.map((answer, key) => {\n const {onClick, title} = answer;\n return (\n <div\n data-selected=\"true\"\n onClick={onClick}\n key={key}\n data-name=\"selectedAnswer\"\n className={style.selected}\n style={{\n boxShadow: `0px 4px 16px ${getShadowBoxColorFromPrimary(backgroundColor)}`\n }}\n >\n <div\n data-name=\"answerBackground\"\n style={{\n backgroundColor\n }}\n className={style.background}\n />\n <div className={style.content}>\n <span\n data-name=\"answerContent\"\n className={classnames(style.selectedAnswerText, style.innerHTML)}\n title={title}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n </div>\n </div>\n );\n });\n\n if (selectedAnswersViews.length > 0) {\n return <div className={style.selectedAnswers}>{selectedAnswersViews}</div>;\n } else {\n return (\n <div className={style.emptyAnswers}>\n <EmptyView help={help} />\n </div>\n );\n }\n};\n\nSelectedAnswerSections.propTypes = {\n answers: AnswersPropTypes,\n help: EmptyView.propTypes.help,\n backgroundColor: PropTypes.string\n};\n\nconst QcmDrag = ({answers, help, groupAriaLabel}, legacyContext) => {\n const skin = GetSkinFromContext(legacyContext);\n const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n return (\n <div className={style.wrapper} role=\"group\" aria-label={groupAriaLabel}
|
|
1
|
+
{"version":3,"file":"index.js","names":["AnswersPropTypes","PropTypes","arrayOf","shape","onClick","func","order","number","selected","bool","title","string","help","EmptyView","style","emptySpan","propTypes","Choices","answers","answersViews","map","answer","key","checkboxId","classnames","invisibleAnswer","unselected","innerHTML","hiddenCheckbox","choices","SelectedAnswerSections","backgroundColor","selectedAnswers","selectedAnswersViews","boxShadow","getShadowBoxColorFromPrimary","background","content","selectedAnswerText","__html","length","emptyAnswers","QcmDrag","groupAriaLabel","legacyContext","skin","GetSkinFromContext","primarySkinColor","wrapper","contextTypes","Provider","childContextTypes"],"sources":["../../../../src/molecule/questions/qcm-drag/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {pipe, filter, orderBy, getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst AnswersPropTypes = PropTypes.arrayOf(\n PropTypes.shape({\n onClick: PropTypes.func,\n order: PropTypes.number,\n selected: PropTypes.bool,\n title: PropTypes.string,\n help: PropTypes.string\n })\n);\n\nconst EmptyView = ({help}) => <span className={style.emptySpan}>{help}</span>;\n\nEmptyView.propTypes = {\n help: PropTypes.string\n};\n\nconst Choices = ({answers}) => {\n const answersViews = answers.map((answer, key) => {\n const {onClick, title, selected} = answer;\n const checkboxId = `checkbox-drag-${key}`;\n return (\n <div\n className={classnames(selected ? style.invisibleAnswer : style.unselected, style.innerHTML)}\n data-name=\"answer\"\n key={key}\n onClick={onClick}\n >\n <label htmlFor={checkboxId}>\n <input\n id={checkboxId}\n type=\"checkbox\"\n value={title}\n title={title}\n aria-label={title}\n checked={selected}\n onChange={onClick}\n className={style.hiddenCheckbox}\n />\n {title}\n </label>\n </div>\n );\n });\n\n return <div className={style.choices}>{answersViews}</div>;\n};\n\nChoices.propTypes = {\n answers: AnswersPropTypes\n};\n\nconst SelectedAnswerSections = ({answers, help, backgroundColor}) => {\n const selectedAnswers = pipe(filter('selected'), orderBy('order', 'asc'))(answers);\n const selectedAnswersViews = selectedAnswers.map((answer, key) => {\n const {onClick, title} = answer;\n return (\n <div\n data-selected=\"true\"\n onClick={onClick}\n key={key}\n data-name=\"selectedAnswer\"\n className={style.selected}\n style={{\n boxShadow: `0px 4px 16px ${getShadowBoxColorFromPrimary(backgroundColor)}`\n }}\n >\n <div\n data-name=\"answerBackground\"\n style={{\n backgroundColor\n }}\n className={style.background}\n />\n <div className={style.content}>\n <span\n data-name=\"answerContent\"\n className={classnames(style.selectedAnswerText, style.innerHTML)}\n title={title}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n </div>\n </div>\n );\n });\n\n if (selectedAnswersViews.length > 0) {\n return <div className={style.selectedAnswers}>{selectedAnswersViews}</div>;\n } else {\n return (\n <div className={style.emptyAnswers}>\n <EmptyView help={help} />\n </div>\n );\n }\n};\n\nSelectedAnswerSections.propTypes = {\n answers: AnswersPropTypes,\n help: EmptyView.propTypes.help,\n backgroundColor: PropTypes.string\n};\n\nconst QcmDrag = ({answers, help, groupAriaLabel}, legacyContext) => {\n const skin = GetSkinFromContext(legacyContext);\n const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n return (\n <div className={style.wrapper} role=\"group\" aria-label={groupAriaLabel}>\n <SelectedAnswerSections answers={answers} help={help} backgroundColor={primarySkinColor} />\n <div data-name=\"qcm-drag-answers\" className={style.answers}>\n <Choices answers={answers} />\n </div>\n </div>\n );\n};\n\nQcmDrag.propTypes = {\n answers: AnswersPropTypes,\n help: SelectedAnswerSections.propTypes.help,\n groupAriaLabel: PropTypes.string\n};\n\nQcmDrag.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nexport default QcmDrag;\n"],"mappings":"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"}
|
|
@@ -157,6 +157,7 @@ const QuestionContainer = props => {
|
|
|
157
157
|
key: "answer-container",
|
|
158
158
|
className: _style.default.answerContainer
|
|
159
159
|
}, /*#__PURE__*/_react.default.createElement(_answer.default, _extends({}, answerUI, {
|
|
160
|
+
question: questionText,
|
|
160
161
|
key: "answer"
|
|
161
162
|
}))));
|
|
162
163
|
};
|