@coorpacademy/components 10.21.1 → 10.21.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/atom/content-badge/index.js +15 -3
- package/es/atom/content-badge/index.js.map +1 -1
- package/es/atom/content-badge/style.css +6 -0
- package/es/atom/input-checkbox/index.js +4 -2
- package/es/atom/input-checkbox/index.js.map +1 -1
- package/es/atom/review-header-step-item/index.js +3 -2
- package/es/atom/review-header-step-item/index.js.map +1 -1
- package/es/molecule/banner/index.js +9 -4
- package/es/molecule/banner/index.js.map +1 -1
- package/es/molecule/banner/style.css +41 -6
- package/es/molecule/card/index.js +5 -1
- package/es/molecule/card/index.js.map +1 -1
- package/es/molecule/card/selectable.css +49 -2
- package/es/molecule/card/selectable.js +10 -2
- package/es/molecule/card/selectable.js.map +1 -1
- package/es/molecule/cm-popin/index.js +12 -5
- package/es/molecule/cm-popin/index.js.map +1 -1
- package/es/molecule/cm-popin/style.css +28 -0
- package/es/molecule/go1-banner/index.js +56 -0
- package/es/molecule/go1-banner/index.js.map +1 -0
- package/es/molecule/go1-banner/style.css +90 -0
- package/es/organism/brand-dashboard/index.js +6 -3
- package/es/organism/brand-dashboard/index.js.map +1 -1
- package/es/organism/mooc-header/style.css +2 -2
- package/es/template/app-review/slides/index.js +25 -26
- package/es/template/app-review/slides/index.js.map +1 -1
- package/es/template/app-review/slides/prop-types.js +4 -4
- package/es/template/app-review/slides/prop-types.js.map +1 -1
- package/es/variables/colors.css +4 -0
- package/lib/atom/content-badge/index.js +17 -4
- package/lib/atom/content-badge/index.js.map +1 -1
- package/lib/atom/content-badge/style.css +6 -0
- package/lib/atom/input-checkbox/index.js +4 -2
- package/lib/atom/input-checkbox/index.js.map +1 -1
- package/lib/atom/review-header-step-item/index.js +3 -2
- package/lib/atom/review-header-step-item/index.js.map +1 -1
- package/lib/molecule/banner/index.js +9 -4
- package/lib/molecule/banner/index.js.map +1 -1
- package/lib/molecule/banner/style.css +41 -6
- package/lib/molecule/card/index.js +3 -1
- package/lib/molecule/card/index.js.map +1 -1
- package/lib/molecule/card/selectable.css +49 -2
- package/lib/molecule/card/selectable.js +9 -1
- package/lib/molecule/card/selectable.js.map +1 -1
- package/lib/molecule/cm-popin/index.js +12 -5
- package/lib/molecule/cm-popin/index.js.map +1 -1
- package/lib/molecule/cm-popin/style.css +28 -0
- package/lib/molecule/go1-banner/index.js +67 -0
- package/lib/molecule/go1-banner/index.js.map +1 -0
- package/lib/molecule/go1-banner/style.css +90 -0
- package/lib/organism/brand-dashboard/index.js +7 -3
- package/lib/organism/brand-dashboard/index.js.map +1 -1
- package/lib/organism/mooc-header/style.css +2 -2
- package/lib/template/app-review/slides/index.js +25 -26
- package/lib/template/app-review/slides/index.js.map +1 -1
- package/lib/template/app-review/slides/prop-types.js +4 -4
- package/lib/template/app-review/slides/prop-types.js.map +1 -1
- package/lib/variables/colors.css +4 -0
- package/locales/hr/global.json +2 -2
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecule/card/index.js"],"names":["THEMES","default","coorpmanager","style","CardBackground","type","image","empty","ariaLabel","skin","externalContent","primaryColor","whiteColor","EXTERNAL_CONTENT_ICONS","IconType","icon","iconColor","color","backgroundIcon","externalIconCircleWrapper","externalIcon","_backgroundIcon","externalIconCircleWithImageWrapper","backgroundColor","externalIconWithImage","imageWrapper","backgroundImage","externalContentHeader","externalBackground","emptyIcon","chapterImageWrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","bool","Card","props","context","badge","adaptiv","disabled","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","e","lock","lockIcon","inlineBadgeStyle","getType","contentType","MODES","CARD","lockWrapper","shape","Customer","number","func","Notification","CardContentInfo","oneOf","Favorite","Selectable"],"mappings":"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","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 ? <PicturesIcon className={style.emptyIcon} color={whiteColor} /> : 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 = 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 handleClick = useMemo(() => e => !disabled && onClick(e), [disabled, onClick]);\n const lock = disabled ? (\n <LockIcon className={style.lockIcon} 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} 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"],"file":"index.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/card/index.js"],"names":["THEMES","default","coorpmanager","style","CardBackground","type","image","empty","ariaLabel","skin","externalContent","primaryColor","whiteColor","EXTERNAL_CONTENT_ICONS","IconType","icon","iconColor","color","backgroundIcon","externalIconCircleWrapper","externalIcon","_backgroundIcon","externalIconCircleWithImageWrapper","backgroundColor","externalIconWithImage","imageWrapper","backgroundImage","externalContentHeader","externalBackground","emptyIcon","chapterImageWrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","bool","Card","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","e","lock","lockIcon","inlineBadgeStyle","getType","contentType","MODES","CARD","lockWrapper","shape","Customer","number","func","Notification","CardContentInfo","oneOf","Favorite","Selectable"],"mappings":"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","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 ? <PicturesIcon className={style.emptyIcon} color={whiteColor} /> : 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} 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"],"file":"index.js"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@value colors: "../../variables/colors.css";
|
|
2
2
|
@value positive from colors;
|
|
3
3
|
@value cm_grey_400 from colors;
|
|
4
|
+
@value cm_negative_200 from colors;
|
|
4
5
|
|
|
5
6
|
.selectable {
|
|
6
7
|
width: 100%;
|
|
@@ -34,6 +35,15 @@
|
|
|
34
35
|
display: none;
|
|
35
36
|
}
|
|
36
37
|
|
|
38
|
+
.eyeIcons {
|
|
39
|
+
color: white;
|
|
40
|
+
width: 30px;
|
|
41
|
+
height: 30px;
|
|
42
|
+
padding: 4px 4px;
|
|
43
|
+
border-radius: 50%;
|
|
44
|
+
display: none;
|
|
45
|
+
}
|
|
46
|
+
|
|
37
47
|
.checkIcon {
|
|
38
48
|
color: positive;
|
|
39
49
|
composes: icons;
|
|
@@ -44,14 +54,43 @@
|
|
|
44
54
|
composes: icons;
|
|
45
55
|
}
|
|
46
56
|
|
|
57
|
+
.showIcon {
|
|
58
|
+
background: cm_grey_400;
|
|
59
|
+
composes: eyeIcons;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.hideIcon {
|
|
63
|
+
background: cm_negative_200;
|
|
64
|
+
composes: eyeIcons;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
.selectable.selected.hidden .showIcon,
|
|
69
|
+
.selectable.selected.hidden .addIcon,
|
|
70
|
+
.selectable.hidden .addIcon,
|
|
71
|
+
.selectable.hidden .checkIcon,
|
|
72
|
+
.selectable.hidden:hover .checkIcon {
|
|
73
|
+
display: none;
|
|
74
|
+
}
|
|
75
|
+
.hidden.selectable .hideIcon {
|
|
76
|
+
display: block;
|
|
77
|
+
}
|
|
78
|
+
.hidden.selectable:hover .hideIcon {
|
|
79
|
+
display: none;
|
|
80
|
+
}
|
|
81
|
+
.hidden.selectable:hover .showIcon {
|
|
82
|
+
display: block;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
|
|
47
86
|
.selectable:hover .addIcon,
|
|
48
87
|
.selectable:hover .circle {
|
|
49
88
|
display: block;
|
|
50
89
|
}
|
|
51
90
|
|
|
52
|
-
.selectable.selected .checkIcon,
|
|
91
|
+
.selectable.selected:not(.hidden) .checkIcon,
|
|
53
92
|
.selectable.selected .circle,
|
|
54
|
-
.selectable.selected:hover .checkIcon {
|
|
93
|
+
.selectable.selected:not(.hidden):hover .checkIcon {
|
|
55
94
|
display: block;
|
|
56
95
|
}
|
|
57
96
|
|
|
@@ -62,3 +101,11 @@
|
|
|
62
101
|
.selectable.selected:hover .addIcon {
|
|
63
102
|
display: none;
|
|
64
103
|
}
|
|
104
|
+
|
|
105
|
+
.selectable.selected.hidden:hover .circle {
|
|
106
|
+
display: block;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.selectable.selected.hidden:hover .addIcon {
|
|
110
|
+
display: none;
|
|
111
|
+
}
|
|
@@ -20,11 +20,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
20
20
|
const Selectable = props => {
|
|
21
21
|
const {
|
|
22
22
|
isSelected,
|
|
23
|
+
hidden = false,
|
|
23
24
|
'aria-label': ariaLabel = {}
|
|
24
25
|
} = props;
|
|
25
26
|
if ((0, _isUndefined2.default)(isSelected)) return null;
|
|
26
27
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
27
|
-
className: (0, _classnames.default)(_selectable.default.selectable, isSelected && _selectable.default.selected)
|
|
28
|
+
className: (0, _classnames.default)(_selectable.default.selectable, isSelected && _selectable.default.selected, hidden && _selectable.default.hidden)
|
|
28
29
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
29
30
|
className: _selectable.default.circle
|
|
30
31
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -35,11 +36,18 @@ const Selectable = props => {
|
|
|
35
36
|
}), /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidStatusCheckCircle2, {
|
|
36
37
|
className: _selectable.default.checkIcon,
|
|
37
38
|
"aria-label": ariaLabel.unSelect
|
|
39
|
+
}), /*#__PURE__*/_react.default.createElement(_novaIcons.NovaLineContentEditionHide, {
|
|
40
|
+
className: _selectable.default.hideIcon,
|
|
41
|
+
"aria-label": ariaLabel.hide
|
|
42
|
+
}), /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyEye, {
|
|
43
|
+
className: _selectable.default.showIcon,
|
|
44
|
+
"aria-label": ariaLabel.show
|
|
38
45
|
})));
|
|
39
46
|
};
|
|
40
47
|
|
|
41
48
|
Selectable.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
42
49
|
isSelected: _propTypes.default.bool,
|
|
50
|
+
hidden: _propTypes.default.bool,
|
|
43
51
|
'aria-label': _propTypes.default.shape({
|
|
44
52
|
select: _propTypes.default.string,
|
|
45
53
|
unSelect: _propTypes.default.string
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecule/card/selectable.js"],"names":["Selectable","props","isSelected","ariaLabel","style","selectable","selected","circle","iconWrapper","addIcon","select","checkIcon","unSelect","propTypes","PropTypes","bool","shape","string"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/card/selectable.js"],"names":["Selectable","props","isSelected","hidden","ariaLabel","style","selectable","selected","circle","iconWrapper","addIcon","select","checkIcon","unSelect","hideIcon","hide","showIcon","show","propTypes","PropTypes","bool","shape","string"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAMA;;;;AAEA,MAAMA,UAAU,GAAGC,KAAK,IAAI;AAC1B,QAAM;AAACC,IAAAA,UAAD;AAAaC,IAAAA,MAAM,GAAG,KAAtB;AAA6B,kBAAcC,SAAS,GAAG;AAAvD,MAA6DH,KAAnE;AAEA,MAAI,2BAAYC,UAAZ,CAAJ,EAA6B,OAAO,IAAP;AAE7B,sBACE;AACE,IAAA,SAAS,EAAE,yBAAWG,oBAAMC,UAAjB,EAA6BJ,UAAU,IAAIG,oBAAME,QAAjD,EAA2DJ,MAAM,IAAIE,oBAAMF,MAA3E;AADb,kBAGE;AAAK,IAAA,SAAS,EAAEE,oBAAMG;AAAtB,IAHF,eAIE;AAAK,IAAA,SAAS,EAAEH,oBAAMI;AAAtB,kBACE,6BAAC,uCAAD;AAAS,IAAA,SAAS,EAAEJ,oBAAMK,OAA1B;AAAmC,kBAAYN,SAAS,CAACO;AAAzD,IADF,eAEE,6BAAC,sCAAD;AAAW,IAAA,SAAS,EAAEN,oBAAMO,SAA5B;AAAuC,kBAAYR,SAAS,CAACS;AAA7D,IAFF,eAGE,6BAAC,qCAAD;AAAU,IAAA,SAAS,EAAER,oBAAMS,QAA3B;AAAqC,kBAAYV,SAAS,CAACW;AAA3D,IAHF,eAIE,6BAAC,yCAAD;AAAU,IAAA,SAAS,EAAEV,oBAAMW,QAA3B;AAAqC,kBAAYZ,SAAS,CAACa;AAA3D,IAJF,CAJF,CADF;AAaD,CAlBD;;AAoBAjB,UAAU,CAACkB,SAAX,2CAAuB;AACrBhB,EAAAA,UAAU,EAAEiB,mBAAUC,IADD;AAErBjB,EAAAA,MAAM,EAAEgB,mBAAUC,IAFG;AAGrB,gBAAcD,mBAAUE,KAAV,CAAgB;AAC5BV,IAAAA,MAAM,EAAEQ,mBAAUG,MADU;AAE5BT,IAAAA,QAAQ,EAAEM,mBAAUG;AAFQ,GAAhB;AAHO,CAAvB;eASetB,U","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isUndefined} from 'lodash/fp';\nimport {\n NovaSolidStatusCheckCircle2 as CheckIcon,\n NovaSolidRemoveAddAddCircle1 as AddIcon,\n NovaLineContentEditionHide as HideIcon,\n NovaCompositionCoorpacademyEye as ShowIcon\n} from '@coorpacademy/nova-icons';\nimport style from './selectable.css';\n\nconst Selectable = props => {\n const {isSelected, hidden = false, 'aria-label': ariaLabel = {}} = props;\n\n if (isUndefined(isSelected)) return null;\n\n return (\n <div\n className={classnames(style.selectable, isSelected && style.selected, hidden && style.hidden)}\n >\n <div className={style.circle} />\n <div className={style.iconWrapper}>\n <AddIcon className={style.addIcon} aria-label={ariaLabel.select} />\n <CheckIcon className={style.checkIcon} aria-label={ariaLabel.unSelect} />\n <HideIcon className={style.hideIcon} aria-label={ariaLabel.hide} />\n <ShowIcon className={style.showIcon} aria-label={ariaLabel.show} />\n </div>\n </div>\n );\n};\n\nSelectable.propTypes = {\n isSelected: PropTypes.bool,\n hidden: PropTypes.bool,\n 'aria-label': PropTypes.shape({\n select: PropTypes.string,\n unSelect: PropTypes.string\n })\n};\n\nexport default Selectable;\n"],"file":"selectable.js"}
|
|
@@ -20,9 +20,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
20
20
|
const CMPopin = props => {
|
|
21
21
|
const {
|
|
22
22
|
content,
|
|
23
|
+
mode = 'alert',
|
|
23
24
|
firstButton,
|
|
24
25
|
secondButton,
|
|
25
26
|
onClose,
|
|
27
|
+
header,
|
|
26
28
|
icon
|
|
27
29
|
} = props;
|
|
28
30
|
const logo = {
|
|
@@ -36,7 +38,10 @@ const CMPopin = props => {
|
|
|
36
38
|
className: _style.default.popin
|
|
37
39
|
}, /*#__PURE__*/_react.default.createElement("header", {
|
|
38
40
|
className: _style.default.popinHeader
|
|
39
|
-
},
|
|
41
|
+
}, header ? /*#__PURE__*/_react.default.createElement("img", {
|
|
42
|
+
className: _style.default.headerBackground,
|
|
43
|
+
src: header
|
|
44
|
+
}) : null, onClose ? /*#__PURE__*/_react.default.createElement(_buttonLinkIconOnly.default, {
|
|
40
45
|
onClick: onClose,
|
|
41
46
|
"data-name": 'close-icon',
|
|
42
47
|
"aria-label": 'close-icon',
|
|
@@ -46,14 +51,14 @@ const CMPopin = props => {
|
|
|
46
51
|
className: _style.default.contentSection
|
|
47
52
|
}, LogoComponent ? /*#__PURE__*/_react.default.createElement(LogoComponent, {
|
|
48
53
|
className: _style.default.icon
|
|
49
|
-
}) : null, /*#__PURE__*/_react.default.createElement("p", {
|
|
50
|
-
className: _style.default.content,
|
|
54
|
+
}) : null, content ? /*#__PURE__*/_react.default.createElement("p", {
|
|
55
|
+
className: mode === 'alert' ? _style.default.content : _style.default.message,
|
|
51
56
|
"data-name": `cm-popin-content` // eslint-disable-next-line react/no-danger
|
|
52
57
|
,
|
|
53
58
|
dangerouslySetInnerHTML: {
|
|
54
59
|
__html: content
|
|
55
60
|
}
|
|
56
|
-
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
61
|
+
}) : null), /*#__PURE__*/_react.default.createElement("div", {
|
|
57
62
|
className: _style.default.buttonContainer
|
|
58
63
|
}, firstButton ? /*#__PURE__*/_react.default.createElement("div", {
|
|
59
64
|
className: _style.default.button
|
|
@@ -71,11 +76,13 @@ const CMPopin = props => {
|
|
|
71
76
|
"data-name": `cm-popin-cta-${secondButton.type}`,
|
|
72
77
|
"aria-label": firstButton['aria-label'],
|
|
73
78
|
type: secondButton.type
|
|
74
|
-
})) : null))
|
|
79
|
+
})) : null)));
|
|
75
80
|
};
|
|
76
81
|
|
|
77
82
|
CMPopin.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
78
83
|
content: _propTypes.default.string,
|
|
84
|
+
mode: _propTypes.default.oneOf(['alert', 'information']),
|
|
85
|
+
header: _propTypes.default.string,
|
|
79
86
|
firstButton: _propTypes.default.shape({
|
|
80
87
|
label: _propTypes.default.string,
|
|
81
88
|
handleOnclick: _propTypes.default.func,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecule/cm-popin/index.js"],"names":["CMPopin","props","content","firstButton","secondButton","onClose","icon","logo","AlertDiamond","WindowUpload","LogoComponent","style","background","popin","popinHeader","contentSection","__html","buttonContainer","button","label","handleOnclick","type","propTypes","PropTypes","string","
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/cm-popin/index.js"],"names":["CMPopin","props","content","mode","firstButton","secondButton","onClose","header","icon","logo","AlertDiamond","WindowUpload","LogoComponent","style","background","popin","popinHeader","headerBackground","contentSection","message","__html","buttonContainer","button","label","handleOnclick","type","propTypes","PropTypes","string","oneOf","shape","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond,\n NovaSolidApplicationsWindowUpload3 as WindowUpload\n} from '@coorpacademy/nova-icons';\nimport Cta from '../../atom/button-link';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport style from './style.css';\n\nconst CMPopin = props => {\n const {content, mode = 'alert', firstButton, secondButton, onClose, header, icon} = props;\n\n const logo = {\n AlertDiamond,\n WindowUpload\n };\n const LogoComponent = logo[icon];\n\n return (\n <div className={style.background}>\n <div className={style.popin}>\n <header className={style.popinHeader}>\n {header ? <img className={style.headerBackground} src={header} /> : null}\n {onClose ? (\n <ButtonLinkIconOnly\n onClick={onClose}\n data-name={'close-icon'}\n aria-label={'close-icon'}\n size=\"small\"\n icon=\"close\"\n />\n ) : null}\n </header>\n <div className={style.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\n <div className={style.buttonContainer}>\n {firstButton ? (\n <div className={style.button}>\n <Cta\n label={firstButton.label}\n onClick={firstButton.handleOnclick}\n data-name={`cm-popin-cta`}\n aria-label={firstButton['aria-label']}\n type={firstButton.type}\n />\n </div>\n ) : null}\n {secondButton ? (\n <div className={style.button}>\n <Cta\n label={secondButton.label}\n onClick={secondButton.handleOnclick}\n data-name={`cm-popin-cta-${secondButton.type}`}\n aria-label={firstButton['aria-label']}\n type={secondButton.type}\n />\n </div>\n ) : null}\n </div>\n </div>\n </div>\n );\n};\n\nCMPopin.propTypes = {\n content: PropTypes.string,\n mode: PropTypes.oneOf(['alert', 'information']),\n header: PropTypes.string,\n firstButton: PropTypes.shape({\n label: PropTypes.string,\n handleOnclick: PropTypes.func,\n 'aria-label': PropTypes.string,\n type: PropTypes.string\n }),\n secondButton: PropTypes.shape({\n label: PropTypes.string,\n handleOnclick: PropTypes.func,\n type: PropTypes.oneOf(['dangerous', 'primary']),\n 'aria-label': PropTypes.string\n }),\n onClose: PropTypes.func,\n icon: PropTypes.string\n};\n\nexport default CMPopin;\n"],"file":"index.js"}
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
@value cm_grey_800 from colors;
|
|
7
7
|
@value negative from colors;
|
|
8
8
|
@value lightGreen from colors;
|
|
9
|
+
@value xtraLightGrey from colors;
|
|
9
10
|
@value cm_grey_50 from colors;
|
|
10
11
|
@value cm_negative_100 from colors;
|
|
11
12
|
@value cm_negative_200 from colors;
|
|
@@ -29,6 +30,12 @@
|
|
|
29
30
|
position:fixed;
|
|
30
31
|
}
|
|
31
32
|
|
|
33
|
+
.headerBackground {
|
|
34
|
+
width: calc(100% + 32px);
|
|
35
|
+
height: auto;
|
|
36
|
+
margin: -16px -16px 0px -16px;
|
|
37
|
+
}
|
|
38
|
+
|
|
32
39
|
.popin {
|
|
33
40
|
position: absolute;
|
|
34
41
|
overflow: auto;
|
|
@@ -46,6 +53,23 @@
|
|
|
46
53
|
animation: popup 0.7s;
|
|
47
54
|
}
|
|
48
55
|
|
|
56
|
+
.message {
|
|
57
|
+
display: flex;
|
|
58
|
+
flex-direction: column;
|
|
59
|
+
justify-content: center;
|
|
60
|
+
align-items: center;
|
|
61
|
+
padding: 40px 40px 0px;
|
|
62
|
+
position: absolute;
|
|
63
|
+
background: xtraLightGrey;
|
|
64
|
+
font-family: 'Gilroy';
|
|
65
|
+
font-weight: 500;
|
|
66
|
+
font-size: 14px;
|
|
67
|
+
line-height: 20px;
|
|
68
|
+
margin: 0;
|
|
69
|
+
}
|
|
70
|
+
.message p {
|
|
71
|
+
margin: 10px 0px;
|
|
72
|
+
}
|
|
49
73
|
@keyframes popup {
|
|
50
74
|
0%{
|
|
51
75
|
transform: scale(0);
|
|
@@ -98,4 +122,8 @@
|
|
|
98
122
|
width: 100%;
|
|
99
123
|
display: flex;
|
|
100
124
|
justify-content: flex-end;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.popinHeader button {
|
|
128
|
+
position: absolute;
|
|
101
129
|
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
|
|
6
|
+
var _react = _interopRequireDefault(require("react"));
|
|
7
|
+
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
|
|
10
|
+
var _button = _interopRequireDefault(require("../../atom/button"));
|
|
11
|
+
|
|
12
|
+
var _style = _interopRequireDefault(require("./style.css"));
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
16
|
+
const Go1Banner = props => {
|
|
17
|
+
const {
|
|
18
|
+
image,
|
|
19
|
+
title,
|
|
20
|
+
subTitle,
|
|
21
|
+
onClick,
|
|
22
|
+
submitValue
|
|
23
|
+
} = props;
|
|
24
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
25
|
+
className: _style.default.background,
|
|
26
|
+
"data-name": "go1-banner"
|
|
27
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
28
|
+
className: _style.default.textSection
|
|
29
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
30
|
+
className: _style.default.title // eslint-disable-next-line react/no-danger
|
|
31
|
+
,
|
|
32
|
+
dangerouslySetInnerHTML: {
|
|
33
|
+
__html: title
|
|
34
|
+
}
|
|
35
|
+
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
36
|
+
className: _style.default.subTitle // eslint-disable-next-line react/no-danger
|
|
37
|
+
,
|
|
38
|
+
dangerouslySetInnerHTML: {
|
|
39
|
+
__html: subTitle
|
|
40
|
+
}
|
|
41
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
42
|
+
className: _style.default.buttonWrapper
|
|
43
|
+
}, /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
44
|
+
type: "link",
|
|
45
|
+
"data-name": "learn-more-button",
|
|
46
|
+
onClick: onClick,
|
|
47
|
+
submitValue: submitValue,
|
|
48
|
+
className: _style.default.ctaButton,
|
|
49
|
+
style: {
|
|
50
|
+
backgroundColor: '#D5FD42'
|
|
51
|
+
}
|
|
52
|
+
}))), /*#__PURE__*/_react.default.createElement("img", {
|
|
53
|
+
className: _style.default.image,
|
|
54
|
+
src: image
|
|
55
|
+
}));
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
Go1Banner.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
59
|
+
image: _propTypes.default.string,
|
|
60
|
+
title: _propTypes.default.string,
|
|
61
|
+
subTitle: _propTypes.default.string,
|
|
62
|
+
onClick: _button.default.propTypes.onClick,
|
|
63
|
+
submitValue: _button.default.propTypes.submitValue
|
|
64
|
+
} : {};
|
|
65
|
+
var _default = Go1Banner;
|
|
66
|
+
exports.default = _default;
|
|
67
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/go1-banner/index.js"],"names":["Go1Banner","props","image","title","subTitle","onClick","submitValue","style","background","textSection","__html","buttonWrapper","ctaButton","backgroundColor","propTypes","PropTypes","string","Button"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,SAAS,GAAGC,KAAK,IAAI;AACzB,QAAM;AAACC,IAAAA,KAAD;AAAQC,IAAAA,KAAR;AAAeC,IAAAA,QAAf;AAAyBC,IAAAA,OAAzB;AAAkCC,IAAAA;AAAlC,MAAiDL,KAAvD;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEM,eAAMC,UAAtB;AAAkC,iBAAU;AAA5C,kBACE;AAAK,IAAA,SAAS,EAAED,eAAME;AAAtB,kBACE;AACE,IAAA,SAAS,EAAEF,eAAMJ,KADnB,CAEE;AAFF;AAGE,IAAA,uBAAuB,EAAE;AAACO,MAAAA,MAAM,EAAEP;AAAT;AAH3B,IADF,eAME;AACE,IAAA,SAAS,EAAEI,eAAMH,QADnB,CAEE;AAFF;AAGE,IAAA,uBAAuB,EAAE;AAACM,MAAAA,MAAM,EAAEN;AAAT;AAH3B,IANF,eAWE;AAAK,IAAA,SAAS,EAAEG,eAAMI;AAAtB,kBACE,6BAAC,eAAD;AACE,IAAA,IAAI,EAAC,MADP;AAEE,iBAAU,mBAFZ;AAGE,IAAA,OAAO,EAAEN,OAHX;AAIE,IAAA,WAAW,EAAEC,WAJf;AAKE,IAAA,SAAS,EAAEC,eAAMK,SALnB;AAME,IAAA,KAAK,EAAE;AAACC,MAAAA,eAAe,EAAE;AAAlB;AANT,IADF,CAXF,CADF,eAuBE;AAAK,IAAA,SAAS,EAAEN,eAAML,KAAtB;AAA6B,IAAA,GAAG,EAAEA;AAAlC,IAvBF,CADF;AA2BD,CA9BD;;AAgCAF,SAAS,CAACc,SAAV,2CAAsB;AACpBZ,EAAAA,KAAK,EAAEa,mBAAUC,MADG;AAEpBb,EAAAA,KAAK,EAAEY,mBAAUC,MAFG;AAGpBZ,EAAAA,QAAQ,EAAEW,mBAAUC,MAHA;AAIpBX,EAAAA,OAAO,EAAEY,gBAAOH,SAAP,CAAiBT,OAJN;AAKpBC,EAAAA,WAAW,EAAEW,gBAAOH,SAAP,CAAiBR;AALV,CAAtB;eAQeN,S","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from '../../atom/button';\nimport style from './style.css';\n\nconst Go1Banner = props => {\n const {image, title, subTitle, onClick, submitValue} = props;\n\n return (\n <div className={style.background} data-name=\"go1-banner\">\n <div className={style.textSection}>\n <span\n className={style.title}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n <span\n className={style.subTitle}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: subTitle}}\n />\n <div className={style.buttonWrapper}>\n <Button\n type=\"link\"\n data-name=\"learn-more-button\"\n onClick={onClick}\n submitValue={submitValue}\n className={style.ctaButton}\n style={{backgroundColor: '#D5FD42'}}\n />\n </div>\n </div>\n <img className={style.image} src={image} />\n </div>\n );\n};\n\nGo1Banner.propTypes = {\n image: PropTypes.string,\n title: PropTypes.string,\n subTitle: PropTypes.string,\n onClick: Button.propTypes.onClick,\n submitValue: Button.propTypes.submitValue\n};\n\nexport default Go1Banner;\n"],"file":"index.js"}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
@value breakpoints: "../../variables/breakpoints.css";
|
|
2
|
+
@value tablet from breakpoints;
|
|
3
|
+
@value mobile from breakpoints;
|
|
4
|
+
@value colors: "../../variables/colors.css";
|
|
5
|
+
@value go1_primary_hover from colors;
|
|
6
|
+
@value go1_primary from colors;
|
|
7
|
+
@value go1_backgound from colors;
|
|
8
|
+
@value white from colors;
|
|
9
|
+
|
|
10
|
+
.background {
|
|
11
|
+
background: go1_backgound;
|
|
12
|
+
border-radius: 8px;
|
|
13
|
+
width: 100%;
|
|
14
|
+
min-height: 246px;
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: row;
|
|
17
|
+
justify-content: space-between;
|
|
18
|
+
margin-top: 30px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.buttonWrapper {
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-direction: row;
|
|
24
|
+
justify-content: center;
|
|
25
|
+
align-items: center;
|
|
26
|
+
width: 122px;
|
|
27
|
+
height: 44px;
|
|
28
|
+
background: go1_primary;
|
|
29
|
+
border-radius: 7px;
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
order: 2;
|
|
32
|
+
margin: 36px 10px 10px 52px;
|
|
33
|
+
}
|
|
34
|
+
.buttonWrapper:hover {
|
|
35
|
+
background: go1_primary_hover;
|
|
36
|
+
}
|
|
37
|
+
.textSection {
|
|
38
|
+
display: flex;
|
|
39
|
+
flex-direction: column;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.ctaButton a {
|
|
43
|
+
color: go1_backgound;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.title {
|
|
47
|
+
font-family: 'Gilroy';
|
|
48
|
+
font-style: normal;
|
|
49
|
+
font-weight: 500;
|
|
50
|
+
font-size: 16px;
|
|
51
|
+
line-height: 22px;
|
|
52
|
+
display: block;
|
|
53
|
+
color: white;
|
|
54
|
+
order: 0;
|
|
55
|
+
margin: 34px 10px 8px 76px;
|
|
56
|
+
background: color(white a(13%));
|
|
57
|
+
width: fit-content;
|
|
58
|
+
border-radius: 5px;
|
|
59
|
+
padding: 7px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.subTitle {
|
|
63
|
+
font-family: 'Gilroy';
|
|
64
|
+
font-style: normal;
|
|
65
|
+
font-weight: 600;
|
|
66
|
+
font-size: 28px;
|
|
67
|
+
line-height: 36px;
|
|
68
|
+
color: white;
|
|
69
|
+
order: 1;
|
|
70
|
+
background: color(white a(13%));
|
|
71
|
+
width: fit-content;
|
|
72
|
+
border-radius: 5px;
|
|
73
|
+
padding: 6px 10px;
|
|
74
|
+
margin-left: 50px;
|
|
75
|
+
}
|
|
76
|
+
.image {
|
|
77
|
+
width: auto;
|
|
78
|
+
height: 206px;
|
|
79
|
+
padding: 20px 30px;
|
|
80
|
+
}
|
|
81
|
+
@media tablet {
|
|
82
|
+
.image {
|
|
83
|
+
display: none;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
@media mobile {
|
|
87
|
+
.image {
|
|
88
|
+
display: none;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
@@ -11,6 +11,8 @@ var _title = _interopRequireDefault(require("../../atom/title"));
|
|
|
11
11
|
|
|
12
12
|
var _quickAccessCardsGroup = _interopRequireDefault(require("../../molecule/quick-access-cards-group"));
|
|
13
13
|
|
|
14
|
+
var _go1Banner = _interopRequireDefault(require("../../molecule/go1-banner"));
|
|
15
|
+
|
|
14
16
|
var _style = _interopRequireDefault(require("./style.css"));
|
|
15
17
|
|
|
16
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -20,11 +22,12 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
20
22
|
const Dashboard = props => {
|
|
21
23
|
const {
|
|
22
24
|
header,
|
|
23
|
-
quickAccessCards
|
|
25
|
+
quickAccessCards,
|
|
26
|
+
banner
|
|
24
27
|
} = props;
|
|
25
28
|
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_title.default, _extends({}, header, {
|
|
26
29
|
type: 'page'
|
|
27
|
-
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
30
|
+
}))), banner ? /*#__PURE__*/_react.default.createElement(_go1Banner.default, banner) : null, /*#__PURE__*/_react.default.createElement("div", {
|
|
28
31
|
className: _style.default.sectionWrapper
|
|
29
32
|
}, /*#__PURE__*/_react.default.createElement(_title.default, {
|
|
30
33
|
title: quickAccessCards.title,
|
|
@@ -42,7 +45,8 @@ Dashboard.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
42
45
|
quickAccessCards: _propTypes.default.shape({
|
|
43
46
|
title: _propTypes.default.string,
|
|
44
47
|
cards: _propTypes.default.shape(_quickAccessCardsGroup.default.propTypes)
|
|
45
|
-
})
|
|
48
|
+
}),
|
|
49
|
+
banner: _propTypes.default.shape(_go1Banner.default.propTypes)
|
|
46
50
|
} : {};
|
|
47
51
|
var _default = Dashboard;
|
|
48
52
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/organism/brand-dashboard/index.js"],"names":["Dashboard","props","header","quickAccessCards","style","sectionWrapper","title","cardsWrapper","cards","propTypes","PropTypes","shape","string","subtitle","QuickAccessCardGroup"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,SAAS,GAAGC,KAAK,IAAI;AACzB,QAAM;AAACC,IAAAA,MAAD;AAASC,IAAAA;
|
|
1
|
+
{"version":3,"sources":["../../../src/organism/brand-dashboard/index.js"],"names":["Dashboard","props","header","quickAccessCards","banner","style","sectionWrapper","title","cardsWrapper","cards","propTypes","PropTypes","shape","string","subtitle","QuickAccessCardGroup","Go1Banner"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,SAAS,GAAGC,KAAK,IAAI;AACzB,QAAM;AAACC,IAAAA,MAAD;AAASC,IAAAA,gBAAT;AAA2BC,IAAAA;AAA3B,MAAqCH,KAA3C;AACA,sBACE,uDACE,uDACE,6BAAC,cAAD,eAAWC,MAAX;AAAmB,IAAA,IAAI,EAAE;AAAzB,KADF,CADF,EAIGE,MAAM,gBAAG,6BAAC,kBAAD,EAAeA,MAAf,CAAH,GAA+B,IAJxC,eAKE;AAAK,IAAA,SAAS,EAAEC,eAAMC;AAAtB,kBACE,6BAAC,cAAD;AAAO,IAAA,KAAK,EAAEH,gBAAgB,CAACI,KAA/B;AAAsC,IAAA,IAAI,EAAE;AAA5C,IADF,eAEE;AAAK,IAAA,SAAS,EAAEF,eAAMG;AAAtB,kBACE,6BAAC,8BAAD,EAA0BL,gBAAgB,CAACM,KAA3C,CADF,CAFF,CALF,CADF;AAcD,CAhBD;;AAkBAT,SAAS,CAACU,SAAV,2CAAsB;AACpBR,EAAAA,MAAM,EAAES,mBAAUC,KAAV,CAAgB;AACtBL,IAAAA,KAAK,EAAEI,mBAAUE,MADK;AAEtBC,IAAAA,QAAQ,EAAEH,mBAAUE;AAFE,GAAhB,CADY;AAKpBV,EAAAA,gBAAgB,EAAEQ,mBAAUC,KAAV,CAAgB;AAChCL,IAAAA,KAAK,EAAEI,mBAAUE,MADe;AAEhCJ,IAAAA,KAAK,EAAEE,mBAAUC,KAAV,CAAgBG,+BAAqBL,SAArC;AAFyB,GAAhB,CALE;AASpBN,EAAAA,MAAM,EAAEO,mBAAUC,KAAV,CAAgBI,mBAAUN,SAA1B;AATY,CAAtB;eAYeV,S","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Title from '../../atom/title';\nimport QuickAccessCardGroup from '../../molecule/quick-access-cards-group';\nimport Go1Banner from '../../molecule/go1-banner';\nimport style from './style.css';\n\nconst Dashboard = props => {\n const {header, quickAccessCards, banner} = props;\n return (\n <div>\n <div>\n <Title {...header} type={'page'} />\n </div>\n {banner ? <Go1Banner {...banner} /> : null}\n <div className={style.sectionWrapper}>\n <Title title={quickAccessCards.title} type={'form-group'} />\n <div className={style.cardsWrapper}>\n <QuickAccessCardGroup {...quickAccessCards.cards} />\n </div>\n </div>\n </div>\n );\n};\n\nDashboard.propTypes = {\n header: PropTypes.shape({\n title: PropTypes.string,\n subtitle: PropTypes.string\n }),\n quickAccessCards: PropTypes.shape({\n title: PropTypes.string,\n cards: PropTypes.shape(QuickAccessCardGroup.propTypes)\n }),\n banner: PropTypes.shape(Go1Banner.propTypes)\n};\n\nexport default Dashboard;\n"],"file":"index.js"}
|
|
@@ -578,14 +578,14 @@
|
|
|
578
578
|
height: auto;
|
|
579
579
|
background-color: white;
|
|
580
580
|
left: 0;
|
|
581
|
-
top: -
|
|
581
|
+
top: -100vh;
|
|
582
582
|
width: 100%;
|
|
583
583
|
transition: top 0.8s ease-out;
|
|
584
584
|
max-height: 100vh;
|
|
585
585
|
}
|
|
586
586
|
|
|
587
587
|
.menuWrapper:last-child {
|
|
588
|
-
padding-bottom:
|
|
588
|
+
padding-bottom: 60px;
|
|
589
589
|
}
|
|
590
590
|
|
|
591
591
|
.hiddenSearchBar {
|