@coorpacademy/components 10.1.12-alpha.0 → 10.1.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/atom/input-checkbox/index.js +9 -3
- package/es/atom/input-checkbox/index.js.map +1 -1
- package/es/atom/input-checkbox/style.css +15 -0
- package/es/atom/tag/test/fixtures.js +4 -2
- package/es/atom/tag/test/fixtures.js.map +1 -1
- package/es/molecule/banner/index.js +16 -7
- package/es/molecule/banner/index.js.map +1 -1
- package/es/molecule/banner/style.css +47 -0
- package/es/molecule/banner/test/fixtures/default.js +1 -1
- package/es/molecule/banner/test/fixtures/default.js.map +1 -1
- package/es/molecule/banner/test/fixtures/error-temporary-banner.js +8 -0
- package/es/molecule/banner/test/fixtures/error-temporary-banner.js.map +1 -0
- package/es/molecule/banner/test/fixtures/success-banner.js +7 -0
- package/es/molecule/banner/test/fixtures/success-banner.js.map +1 -0
- package/es/molecule/banner/test/fixtures/success-temporary-banner.js +8 -0
- package/es/molecule/banner/test/fixtures/success-temporary-banner.js.map +1 -0
- package/es/molecule/banner/test/fixtures/warning-temporary-banner.js +8 -0
- package/es/molecule/banner/test/fixtures/warning-temporary-banner.js.map +1 -0
- package/es/molecule/brand-form-group/style.css +5 -0
- package/es/molecule/brand-tabs/style.css +0 -1
- package/es/molecule/bullet-point-menu-button/index.js +1 -5
- package/es/molecule/bullet-point-menu-button/index.js.map +1 -1
- package/es/molecule/bullet-point-menu-button/style.css +11 -7
- package/es/molecule/select-multiple/index.js +99 -16
- package/es/molecule/select-multiple/index.js.map +1 -1
- package/es/molecule/select-multiple/style.css +293 -11
- package/es/molecule/select-multiple/test/fixtures/checked-cm-theme-disabled.js +32 -0
- package/es/molecule/select-multiple/test/fixtures/checked-cm-theme-disabled.js.map +1 -0
- package/es/molecule/select-multiple/test/fixtures/checked-cm-theme-error.js +32 -0
- package/es/molecule/select-multiple/test/fixtures/checked-cm-theme-error.js.map +1 -0
- package/es/molecule/select-multiple/test/fixtures/checked-cm-theme-multiple.js +32 -0
- package/es/molecule/select-multiple/test/fixtures/checked-cm-theme-multiple.js.map +1 -0
- package/es/molecule/select-multiple/test/fixtures/checked-cm-theme.js +32 -0
- package/es/molecule/select-multiple/test/fixtures/checked-cm-theme.js.map +1 -0
- package/es/molecule/select-multiple/test/fixtures/setup-theme-error.js +1 -1
- package/es/molecule/select-multiple/test/fixtures/setup-theme-error.js.map +1 -1
- package/es/organism/accordion/coorp-manager/index.js +3 -3
- package/es/organism/accordion/coorp-manager/index.js.map +1 -1
- package/es/organism/brand-dashboard/index.js +1 -3
- package/es/organism/brand-dashboard/index.js.map +1 -1
- package/es/organism/brand-dashboard/style.css +0 -10
- package/es/organism/brand-form/test/fixtures/wizard-playlists.js +26 -0
- package/es/organism/brand-form/test/fixtures/wizard-playlists.js.map +1 -1
- package/es/organism/list-item/index.js +68 -0
- package/es/organism/list-item/index.js.map +1 -0
- package/es/organism/list-item/style.css +53 -0
- package/es/organism/list-item/test/fixtures/archived.js +39 -0
- package/es/organism/list-item/test/fixtures/archived.js.map +1 -0
- package/es/organism/list-item/test/fixtures/draft.js +39 -0
- package/es/organism/list-item/test/fixtures/draft.js.map +1 -0
- package/es/organism/list-item/test/fixtures/published.js +39 -0
- package/es/organism/list-item/test/fixtures/published.js.map +1 -0
- package/es/organism/list-item/test/fixtures/revised.js +41 -0
- package/es/organism/list-item/test/fixtures/revised.js.map +1 -0
- package/es/organism/setup-header/style.css +16 -7
- package/es/template/back-office/brand-update/index.js +106 -92
- package/es/template/back-office/brand-update/index.js.map +1 -1
- package/es/template/back-office/brand-update/style.css +22 -66
- package/es/template/back-office/brand-update/test/fixtures/default.js +1 -58
- package/es/template/back-office/brand-update/test/fixtures/default.js.map +1 -1
- package/es/template/back-office/brand-update/test/fixtures/general-settings.js +77 -3
- package/es/template/back-office/brand-update/test/fixtures/general-settings.js.map +1 -1
- package/es/template/back-office/brand-update/test/fixtures/loader.js +1 -1
- package/es/template/back-office/brand-update/test/fixtures/loader.js.map +1 -1
- package/es/template/back-office/brand-update/test/fixtures/manageusers-edit.js +1 -1
- package/es/template/back-office/brand-update/test/fixtures/manageusers-edit.js.map +1 -1
- package/es/template/back-office/brand-update/test/fixtures/manageusers-list.js +1 -1
- package/es/template/back-office/brand-update/test/fixtures/manageusers-list.js.map +1 -1
- package/es/template/back-office/brand-update/test/fixtures/uploadusers.js +1 -1
- package/es/template/back-office/brand-update/test/fixtures/uploadusers.js.map +1 -1
- package/lib/atom/input-checkbox/index.js +10 -3
- package/lib/atom/input-checkbox/index.js.map +1 -1
- package/lib/atom/input-checkbox/style.css +15 -0
- package/lib/atom/tag/test/fixtures.js +5 -2
- package/lib/atom/tag/test/fixtures.js.map +1 -1
- package/lib/molecule/banner/index.js +17 -6
- package/lib/molecule/banner/index.js.map +1 -1
- package/lib/molecule/banner/style.css +47 -0
- package/lib/molecule/banner/test/fixtures/default.js +1 -1
- package/lib/molecule/banner/test/fixtures/default.js.map +1 -1
- package/lib/molecule/banner/test/fixtures/error-temporary-banner.js +13 -0
- package/lib/molecule/banner/test/fixtures/error-temporary-banner.js.map +1 -0
- package/lib/molecule/banner/test/fixtures/success-banner.js +12 -0
- package/lib/molecule/banner/test/fixtures/success-banner.js.map +1 -0
- package/lib/molecule/banner/test/fixtures/success-temporary-banner.js +13 -0
- package/lib/molecule/banner/test/fixtures/success-temporary-banner.js.map +1 -0
- package/lib/molecule/banner/test/fixtures/warning-temporary-banner.js +13 -0
- package/lib/molecule/banner/test/fixtures/warning-temporary-banner.js.map +1 -0
- package/lib/molecule/brand-form-group/style.css +5 -0
- package/lib/molecule/brand-tabs/style.css +0 -1
- package/lib/molecule/bullet-point-menu-button/index.js +1 -5
- package/lib/molecule/bullet-point-menu-button/index.js.map +1 -1
- package/lib/molecule/bullet-point-menu-button/style.css +11 -7
- package/lib/molecule/select-multiple/index.js +101 -15
- package/lib/molecule/select-multiple/index.js.map +1 -1
- package/lib/molecule/select-multiple/style.css +293 -11
- package/lib/molecule/select-multiple/test/fixtures/checked-cm-theme-disabled.js +37 -0
- package/lib/molecule/select-multiple/test/fixtures/checked-cm-theme-disabled.js.map +1 -0
- package/lib/molecule/select-multiple/test/fixtures/checked-cm-theme-error.js +37 -0
- package/lib/molecule/select-multiple/test/fixtures/checked-cm-theme-error.js.map +1 -0
- package/lib/molecule/select-multiple/test/fixtures/checked-cm-theme-multiple.js +37 -0
- package/lib/molecule/select-multiple/test/fixtures/checked-cm-theme-multiple.js.map +1 -0
- package/lib/molecule/select-multiple/test/fixtures/checked-cm-theme.js +37 -0
- package/lib/molecule/select-multiple/test/fixtures/checked-cm-theme.js.map +1 -0
- package/lib/molecule/select-multiple/test/fixtures/setup-theme-error.js +1 -1
- package/lib/molecule/select-multiple/test/fixtures/setup-theme-error.js.map +1 -1
- package/lib/organism/accordion/coorp-manager/index.js +2 -4
- package/lib/organism/accordion/coorp-manager/index.js.map +1 -1
- package/lib/organism/brand-dashboard/index.js +1 -3
- package/lib/organism/brand-dashboard/index.js.map +1 -1
- package/lib/organism/brand-dashboard/style.css +0 -10
- package/lib/organism/brand-form/test/fixtures/wizard-playlists.js +26 -0
- package/lib/organism/brand-form/test/fixtures/wizard-playlists.js.map +1 -1
- package/lib/organism/list-item/index.js +82 -0
- package/lib/organism/list-item/index.js.map +1 -0
- package/lib/organism/list-item/style.css +53 -0
- package/lib/organism/list-item/test/fixtures/archived.js +44 -0
- package/lib/organism/list-item/test/fixtures/archived.js.map +1 -0
- package/lib/organism/list-item/test/fixtures/draft.js +44 -0
- package/lib/organism/list-item/test/fixtures/draft.js.map +1 -0
- package/lib/organism/list-item/test/fixtures/published.js +44 -0
- package/lib/organism/list-item/test/fixtures/published.js.map +1 -0
- package/lib/organism/list-item/test/fixtures/revised.js +46 -0
- package/lib/organism/list-item/test/fixtures/revised.js.map +1 -0
- package/lib/organism/setup-header/style.css +16 -7
- package/lib/template/back-office/brand-update/index.js +106 -93
- package/lib/template/back-office/brand-update/index.js.map +1 -1
- package/lib/template/back-office/brand-update/style.css +22 -66
- package/lib/template/back-office/brand-update/test/fixtures/default.js +1 -58
- package/lib/template/back-office/brand-update/test/fixtures/default.js.map +1 -1
- package/lib/template/back-office/brand-update/test/fixtures/general-settings.js +76 -3
- package/lib/template/back-office/brand-update/test/fixtures/general-settings.js.map +1 -1
- package/lib/template/back-office/brand-update/test/fixtures/loader.js +2 -2
- package/lib/template/back-office/brand-update/test/fixtures/loader.js.map +1 -1
- package/lib/template/back-office/brand-update/test/fixtures/manageusers-edit.js +2 -2
- package/lib/template/back-office/brand-update/test/fixtures/manageusers-edit.js.map +1 -1
- package/lib/template/back-office/brand-update/test/fixtures/manageusers-list.js +2 -2
- package/lib/template/back-office/brand-update/test/fixtures/manageusers-list.js.map +1 -1
- package/lib/template/back-office/brand-update/test/fixtures/uploadusers.js +2 -2
- package/lib/template/back-office/brand-update/test/fixtures/uploadusers.js.map +1 -1
- package/package.json +2 -2
- package/es/template/back-office/brand-update/test/fixtures/manageusers.js +0 -11
- package/es/template/back-office/brand-update/test/fixtures/manageusers.js.map +0 -1
- package/lib/template/back-office/brand-update/test/fixtures/manageusers.js +0 -25
- package/lib/template/back-office/brand-update/test/fixtures/manageusers.js.map +0 -1
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import _uniqueId from "lodash/fp/uniqueId";
|
|
2
2
|
import _noop from "lodash/fp/noop";
|
|
3
|
+
import _keys from "lodash/fp/keys";
|
|
3
4
|
import React, { useMemo } from 'react';
|
|
4
5
|
import PropTypes from 'prop-types';
|
|
5
6
|
import { NovaSolidStatusValidate as CheckIcon } from '@coorpacademy/nova-icons';
|
|
6
7
|
import getClassState from '../../util/get-class-state';
|
|
7
8
|
import style from './style.css';
|
|
8
9
|
const titleStylesClassNames = {
|
|
10
|
+
inherit: style.inherit,
|
|
9
11
|
primary: style.primary,
|
|
10
12
|
secondary: style.secondary,
|
|
11
13
|
tertiary: style.tertiary
|
|
@@ -21,7 +23,8 @@ const InputCheckbox = props => {
|
|
|
21
23
|
titleStyle = 'primary',
|
|
22
24
|
modified = false,
|
|
23
25
|
theme = 'default',
|
|
24
|
-
title: propsTitle
|
|
26
|
+
title: propsTitle,
|
|
27
|
+
noLabelMargins = false
|
|
25
28
|
} = props;
|
|
26
29
|
const titleStyleClassName = titleStylesClassNames[titleStyle];
|
|
27
30
|
|
|
@@ -44,11 +47,13 @@ const InputCheckbox = props => {
|
|
|
44
47
|
onChange: handleChange,
|
|
45
48
|
disabled: disabled
|
|
46
49
|
}), /*#__PURE__*/React.createElement("label", {
|
|
50
|
+
className: noLabelMargins ? style.noLabelMargins : undefined,
|
|
47
51
|
htmlFor: idCheckbox
|
|
48
52
|
}, /*#__PURE__*/React.createElement(CheckIcon, {
|
|
49
53
|
className: style.icon
|
|
50
54
|
})), /*#__PURE__*/React.createElement("span", {
|
|
51
|
-
className: titleStyleClassName
|
|
55
|
+
className: titleStyleClassName,
|
|
56
|
+
title: title
|
|
52
57
|
}, title));
|
|
53
58
|
};
|
|
54
59
|
|
|
@@ -60,8 +65,9 @@ InputCheckbox.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
60
65
|
error: PropTypes.bool,
|
|
61
66
|
onChange: PropTypes.func,
|
|
62
67
|
modified: PropTypes.bool,
|
|
68
|
+
noLabelMargins: PropTypes.bool,
|
|
63
69
|
theme: PropTypes.oneOf(['coorpmanager', 'default']),
|
|
64
|
-
titleStyle: PropTypes.oneOf(
|
|
70
|
+
titleStyle: PropTypes.oneOf(_keys(titleStylesClassNames))
|
|
65
71
|
} : {};
|
|
66
72
|
export default InputCheckbox;
|
|
67
73
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/atom/input-checkbox/index.js"],"names":["React","useMemo","PropTypes","NovaSolidStatusValidate","CheckIcon","getClassState","style","titleStylesClassNames","primary","secondary","tertiary","InputCheckbox","props","checked","onChange","error","disabled","required","titleStyle","modified","theme","title","propsTitle","titleStyleClassName","idCheckbox","handleChange","e","target","modifiedClassName","coorpManagerModified","defaultModified","errorClassName","coorpManagerError","defaultError","defaultContainerClassName","coorpManager","default","className","checkbox","icon","propTypes","string","isRequired","bool","func","oneOf"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/input-checkbox/index.js"],"names":["React","useMemo","PropTypes","NovaSolidStatusValidate","CheckIcon","getClassState","style","titleStylesClassNames","inherit","primary","secondary","tertiary","InputCheckbox","props","checked","onChange","error","disabled","required","titleStyle","modified","theme","title","propsTitle","noLabelMargins","titleStyleClassName","idCheckbox","handleChange","e","target","modifiedClassName","coorpManagerModified","defaultModified","errorClassName","coorpManagerError","defaultError","defaultContainerClassName","coorpManager","default","className","checkbox","undefined","icon","propTypes","string","isRequired","bool","func","oneOf"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {NovaSolidStatusValidate as CheckIcon} from '@coorpacademy/nova-icons';\nimport {keys, noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst titleStylesClassNames = {\n inherit: style.inherit,\n primary: style.primary,\n secondary: style.secondary,\n tertiary: style.tertiary\n};\n\nconst InputCheckbox = props => {\n const {\n checked,\n onChange = noop,\n error,\n disabled,\n required,\n titleStyle = 'primary',\n modified = false,\n theme = 'default',\n title: propsTitle,\n noLabelMargins = false\n } = props;\n\n const titleStyleClassName = titleStylesClassNames[titleStyle];\n const idCheckbox = uniqueId('input-checkbox-');\n const title = `${propsTitle}${required ? '*' : ''}`;\n const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n const modifiedClassName =\n theme === 'coorpmanager' ? style.coorpManagerModified : style.defaultModified;\n const errorClassName = theme === 'coorpmanager' ? style.coorpManagerError : style.defaultError;\n const defaultContainerClassName = theme === 'coorpmanager' ? style.coorpManager : style.default;\n\n const className = getClassState(\n defaultContainerClassName,\n modifiedClassName,\n errorClassName,\n modified,\n error\n );\n\n return (\n <div className={className}>\n <input\n type=\"checkbox\"\n className={style.checkbox}\n name={title}\n id={idCheckbox}\n checked={checked}\n onChange={handleChange}\n disabled={disabled}\n />\n <label className={noLabelMargins ? style.noLabelMargins : undefined} htmlFor={idCheckbox}>\n <CheckIcon className={style.icon} />\n </label>\n <span className={titleStyleClassName} title={title}>\n {title}\n </span>\n </div>\n );\n};\n\nInputCheckbox.propTypes = {\n title: PropTypes.string.isRequired,\n disabled: PropTypes.bool,\n required: PropTypes.bool,\n checked: PropTypes.bool,\n error: PropTypes.bool,\n onChange: PropTypes.func,\n modified: PropTypes.bool,\n noLabelMargins: PropTypes.bool,\n theme: PropTypes.oneOf(['coorpmanager', 'default']),\n titleStyle: PropTypes.oneOf(keys(titleStylesClassNames))\n};\n\nexport default InputCheckbox;\n"],"file":"index.js"}
|
|
@@ -143,3 +143,18 @@
|
|
|
143
143
|
.coorpManagerModified .checkbox:checked + label {
|
|
144
144
|
outline: 2px solid battle;
|
|
145
145
|
}
|
|
146
|
+
|
|
147
|
+
.default .inherit,
|
|
148
|
+
.coorpManager .inherit {
|
|
149
|
+
color: inherit;
|
|
150
|
+
text-overflow: ellipsis;
|
|
151
|
+
white-space: nowrap;
|
|
152
|
+
overflow: hidden;
|
|
153
|
+
width: 100%;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.coorpManager .noLabelMargins,
|
|
157
|
+
.default .noLabelMargins {
|
|
158
|
+
margin-right: 0;
|
|
159
|
+
margin-left: 0;
|
|
160
|
+
}
|
|
@@ -4,8 +4,9 @@ import renderComponentMacro from '../../../test/helpers/render-component';
|
|
|
4
4
|
import AtomTag from '..';
|
|
5
5
|
import fixtureArchived from './fixtures/archived';
|
|
6
6
|
import fixtureDefault from './fixtures/default';
|
|
7
|
+
import fixtureDraft from './fixtures/draft';
|
|
7
8
|
import fixturePublished from './fixtures/published';
|
|
8
|
-
import
|
|
9
|
+
import fixtureRevised from './fixtures/revised';
|
|
9
10
|
test('Atom › AtomTag > should have valid propTypes', t => {
|
|
10
11
|
t.pass();
|
|
11
12
|
forEach(AtomTag.propTypes, (value, key) => {
|
|
@@ -14,6 +15,7 @@ test('Atom › AtomTag > should have valid propTypes', t => {
|
|
|
14
15
|
});
|
|
15
16
|
test('Atom › AtomTag › Archived › should be rendered', renderComponentMacro, AtomTag, fixtureArchived);
|
|
16
17
|
test('Atom › AtomTag › Default › should be rendered', renderComponentMacro, AtomTag, fixtureDefault);
|
|
18
|
+
test('Atom › AtomTag › Draft › should be rendered', renderComponentMacro, AtomTag, fixtureDraft);
|
|
17
19
|
test('Atom › AtomTag › Published › should be rendered', renderComponentMacro, AtomTag, fixturePublished);
|
|
18
|
-
test('Atom › AtomTag ›
|
|
20
|
+
test('Atom › AtomTag › Revised › should be rendered', renderComponentMacro, AtomTag, fixtureRevised);
|
|
19
21
|
//# sourceMappingURL=fixtures.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/atom/tag/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","AtomTag","fixtureArchived","fixtureDefault","fixturePublished","
|
|
1
|
+
{"version":3,"sources":["../../../../src/atom/tag/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","AtomTag","fixtureArchived","fixtureDefault","fixtureDraft","fixturePublished","fixtureRevised","t","pass","propTypes","value","key","not","undefined"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,KAAjB;AACA,OAAOC,OAAP,MAAoB,gBAApB;AACA,OAAOC,oBAAP,MAAiC,wCAAjC;AACA,OAAOC,OAAP,MAAoB,IAApB;AACA,OAAOC,eAAP,MAA4B,qBAA5B;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,gBAAP,MAA6B,sBAA7B;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AAEAR,IAAI,CAAC,8CAAD,EAAiDS,CAAC,IAAI;AACxDA,EAAAA,CAAC,CAACC,IAAF;AACAT,EAAAA,OAAO,CAACE,OAAO,CAACQ,SAAT,EAAoB,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACzCJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,wCAAuCF,GAAI,mEAApE;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAb,IAAI,CAAC,gDAAD,EAAmDE,oBAAnD,EAAyEC,OAAzE,EAAkFC,eAAlF,CAAJ;AACAJ,IAAI,CAAC,+CAAD,EAAkDE,oBAAlD,EAAwEC,OAAxE,EAAiFE,cAAjF,CAAJ;AACAL,IAAI,CAAC,6CAAD,EAAgDE,oBAAhD,EAAsEC,OAAtE,EAA+EG,YAA/E,CAAJ;AACAN,IAAI,CAAC,iDAAD,EAAoDE,oBAApD,EAA0EC,OAA1E,EAAmFI,gBAAnF,CAAJ;AACAP,IAAI,CAAC,+CAAD,EAAkDE,oBAAlD,EAAwEC,OAAxE,EAAiFK,cAAjF,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport AtomTag from '..';\nimport fixtureArchived from './fixtures/archived';\nimport fixtureDefault from './fixtures/default';\nimport fixtureDraft from './fixtures/draft';\nimport fixturePublished from './fixtures/published';\nimport fixtureRevised from './fixtures/revised';\n\ntest('Atom › AtomTag > should have valid propTypes', t => {\n t.pass();\n forEach(AtomTag.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Atom.AtomTag.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Atom › AtomTag › Archived › should be rendered', renderComponentMacro, AtomTag, fixtureArchived);\ntest('Atom › AtomTag › Default › should be rendered', renderComponentMacro, AtomTag, fixtureDefault);\ntest('Atom › AtomTag › Draft › should be rendered', renderComponentMacro, AtomTag, fixtureDraft);\ntest('Atom › AtomTag › Published › should be rendered', renderComponentMacro, AtomTag, fixturePublished);\ntest('Atom › AtomTag › Revised › should be rendered', renderComponentMacro, AtomTag, fixtureRevised);\n"],"file":"fixtures.js"}
|
|
@@ -1,9 +1,15 @@
|
|
|
1
|
+
import _keys from "lodash/fp/keys";
|
|
1
2
|
import React from 'react';
|
|
2
3
|
import PropTypes from 'prop-types';
|
|
3
4
|
import classnames from 'classnames';
|
|
4
|
-
import { NovaSolidInterfaceFeedbackInterfaceAlertDiamond as QuestionIcon } from '@coorpacademy/nova-icons';
|
|
5
|
+
import { NovaSolidInterfaceFeedbackInterfaceAlertDiamond as QuestionIcon, NovaCompositionCoorpacademyValidate as ValidateIcon } from '@coorpacademy/nova-icons';
|
|
5
6
|
import Link from '../../atom/button-link';
|
|
6
7
|
import style from './style.css';
|
|
8
|
+
const ICONS = {
|
|
9
|
+
success: ValidateIcon,
|
|
10
|
+
error: QuestionIcon,
|
|
11
|
+
warning: QuestionIcon
|
|
12
|
+
};
|
|
7
13
|
|
|
8
14
|
const Banner = props => {
|
|
9
15
|
const {
|
|
@@ -12,16 +18,18 @@ const Banner = props => {
|
|
|
12
18
|
firstCTA,
|
|
13
19
|
firstCTALabel,
|
|
14
20
|
secondCTALabel,
|
|
15
|
-
secondCTA
|
|
21
|
+
secondCTA,
|
|
22
|
+
temporary
|
|
16
23
|
} = props;
|
|
24
|
+
const Icon = ICONS[type];
|
|
17
25
|
return /*#__PURE__*/React.createElement("div", {
|
|
18
|
-
className: classnames(style.banner, type === 'error' && style.errorBanner),
|
|
26
|
+
className: classnames(style.banner, type === 'error' && style.errorBanner, type === 'success' && style.successBanner, temporary && style.temporaryBanner),
|
|
19
27
|
title: message
|
|
20
28
|
}, /*#__PURE__*/React.createElement("div", {
|
|
21
29
|
"data-name": `${type}-banner-message`,
|
|
22
30
|
className: style.message
|
|
23
|
-
}, /*#__PURE__*/React.createElement(
|
|
24
|
-
className: style.icon
|
|
31
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
32
|
+
className: classnames(style.icon, temporary && style.temporaryIcon)
|
|
25
33
|
}), message), firstCTALabel ? /*#__PURE__*/React.createElement("div", {
|
|
26
34
|
className: style.button
|
|
27
35
|
}, /*#__PURE__*/React.createElement(Link, {
|
|
@@ -44,12 +52,13 @@ const Banner = props => {
|
|
|
44
52
|
};
|
|
45
53
|
|
|
46
54
|
Banner.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
47
|
-
type: PropTypes.oneOf(
|
|
55
|
+
type: PropTypes.oneOf(_keys(ICONS)),
|
|
48
56
|
message: PropTypes.string.isRequired,
|
|
49
57
|
firstCTA: PropTypes.func,
|
|
50
58
|
firstCTALabel: PropTypes.string,
|
|
51
59
|
secondCTALabel: PropTypes.string,
|
|
52
|
-
secondCTA: PropTypes.func
|
|
60
|
+
secondCTA: PropTypes.func,
|
|
61
|
+
temporary: PropTypes.bool
|
|
53
62
|
} : {};
|
|
54
63
|
export default Banner;
|
|
55
64
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecule/banner/index.js"],"names":["React","PropTypes","classnames","NovaSolidInterfaceFeedbackInterfaceAlertDiamond","QuestionIcon","Link","style","Banner","props","type","message","firstCTA","firstCTALabel","secondCTALabel","secondCTA","banner","errorBanner","icon","button","buttonsBar","propTypes","oneOf","string","isRequired","func"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/banner/index.js"],"names":["React","PropTypes","classnames","NovaSolidInterfaceFeedbackInterfaceAlertDiamond","QuestionIcon","NovaCompositionCoorpacademyValidate","ValidateIcon","Link","style","ICONS","success","error","warning","Banner","props","type","message","firstCTA","firstCTALabel","secondCTALabel","secondCTA","temporary","Icon","banner","errorBanner","successBanner","temporaryBanner","icon","temporaryIcon","button","buttonsBar","propTypes","oneOf","string","isRequired","func","bool"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,SACEC,+CAA+C,IAAIC,YADrD,EAEEC,mCAAmC,IAAIC,YAFzC,QAGO,0BAHP;AAIA,OAAOC,IAAP,MAAiB,wBAAjB;AACA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,MAAMC,KAAK,GAAG;AACZC,EAAAA,OAAO,EAAEJ,YADG;AAEZK,EAAAA,KAAK,EAAEP,YAFK;AAGZQ,EAAAA,OAAO,EAAER;AAHG,CAAd;;AAMA,MAAMS,MAAM,GAAGC,KAAK,IAAI;AACtB,QAAM;AAACC,IAAAA,IAAD;AAAOC,IAAAA,OAAP;AAAgBC,IAAAA,QAAhB;AAA0BC,IAAAA,aAA1B;AAAyCC,IAAAA,cAAzC;AAAyDC,IAAAA,SAAzD;AAAoEC,IAAAA;AAApE,MAAiFP,KAAvF;AACA,QAAMQ,IAAI,GAAGb,KAAK,CAACM,IAAD,CAAlB;AACA,sBACE;AACE,IAAA,SAAS,EAAEb,UAAU,CACnBM,KAAK,CAACe,MADa,EAEnBR,IAAI,KAAK,OAAT,IAAoBP,KAAK,CAACgB,WAFP,EAGnBT,IAAI,KAAK,SAAT,IAAsBP,KAAK,CAACiB,aAHT,EAInBJ,SAAS,IAAIb,KAAK,CAACkB,eAJA,CADvB;AAOE,IAAA,KAAK,EAAEV;AAPT,kBASE;AAAK,iBAAY,GAAED,IAAK,iBAAxB;AAA0C,IAAA,SAAS,EAAEP,KAAK,CAACQ;AAA3D,kBACE,oBAAC,IAAD;AAAM,IAAA,SAAS,EAAEd,UAAU,CAACM,KAAK,CAACmB,IAAP,EAAaN,SAAS,IAAIb,KAAK,CAACoB,aAAhC;AAA3B,IADF,EAEGZ,OAFH,CATF,EAaGE,aAAa,gBACZ;AAAK,IAAA,SAAS,EAAEV,KAAK,CAACqB;AAAtB,kBACE,oBAAC,IAAD;AACE,iBAAU,kBADZ;AAEE,kBAAYX,aAFd;AAGE,IAAA,KAAK,EAAEA,aAHT;AAIE,IAAA,OAAO,EAAED,QAJX;AAKE,IAAA,IAAI,EAAC;AALP,IADF,CADY,GAUV,IAvBN,EAwBGC,aAAa,IAAIC,cAAjB,gBAAkC;AAAK,IAAA,SAAS,EAAEX,KAAK,CAACsB;AAAtB,IAAlC,GAAyE,IAxB5E,EAyBGX,cAAc,gBACb;AAAK,IAAA,SAAS,EAAEX,KAAK,CAACqB;AAAtB,kBACE,oBAAC,IAAD;AACE,iBAAU,mBADZ;AAEE,IAAA,OAAO,EAAET,SAFX;AAGE,kBAAYD,cAHd;AAIE,IAAA,KAAK,EAAEA,cAJT;AAKE,IAAA,IAAI,EAAC;AALP,IADF,CADa,GAUX,IAnCN,CADF;AAuCD,CA1CD;;AA4CAN,MAAM,CAACkB,SAAP,2CAAmB;AACjBhB,EAAAA,IAAI,EAAEd,SAAS,CAAC+B,KAAV,CAAgB,MAAKvB,KAAL,CAAhB,CADW;AAEjBO,EAAAA,OAAO,EAAEf,SAAS,CAACgC,MAAV,CAAiBC,UAFT;AAGjBjB,EAAAA,QAAQ,EAAEhB,SAAS,CAACkC,IAHH;AAIjBjB,EAAAA,aAAa,EAAEjB,SAAS,CAACgC,MAJR;AAKjBd,EAAAA,cAAc,EAAElB,SAAS,CAACgC,MALT;AAMjBb,EAAAA,SAAS,EAAEnB,SAAS,CAACkC,IANJ;AAOjBd,EAAAA,SAAS,EAAEpB,SAAS,CAACmC;AAPJ,CAAnB;AAUA,eAAevB,MAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {keys} from 'lodash/fp';\nimport {\n NovaSolidInterfaceFeedbackInterfaceAlertDiamond as QuestionIcon,\n NovaCompositionCoorpacademyValidate as ValidateIcon\n} from '@coorpacademy/nova-icons';\nimport Link from '../../atom/button-link';\nimport style from './style.css';\n\nconst ICONS = {\n success: ValidateIcon,\n error: QuestionIcon,\n warning: QuestionIcon\n};\n\nconst Banner = props => {\n const {type, message, firstCTA, firstCTALabel, secondCTALabel, secondCTA, temporary} = props;\n const Icon = ICONS[type];\n return (\n <div\n className={classnames(\n style.banner,\n type === 'error' && style.errorBanner,\n type === 'success' && style.successBanner,\n temporary && style.temporaryBanner\n )}\n title={message}\n >\n <div data-name={`${type}-banner-message`} className={style.message}>\n <Icon className={classnames(style.icon, temporary && style.temporaryIcon)} />\n {message}\n </div>\n {firstCTALabel ? (\n <div className={style.button}>\n <Link\n data-name=\"first-banner-cta\"\n aria-label={firstCTALabel}\n label={firstCTALabel}\n onClick={firstCTA}\n type=\"text\"\n />\n </div>\n ) : null}\n {firstCTALabel && secondCTALabel ? <div className={style.buttonsBar} /> : null}\n {secondCTALabel ? (\n <div className={style.button}>\n <Link\n data-name=\"second-banner-cta\"\n onClick={secondCTA}\n aria-label={secondCTALabel}\n label={secondCTALabel}\n type=\"text\"\n />\n </div>\n ) : null}\n </div>\n );\n};\n\nBanner.propTypes = {\n type: PropTypes.oneOf(keys(ICONS)),\n message: PropTypes.string.isRequired,\n firstCTA: PropTypes.func,\n firstCTALabel: PropTypes.string,\n secondCTALabel: PropTypes.string,\n secondCTA: PropTypes.func,\n temporary: PropTypes.bool\n};\n\nexport default Banner;\n"],"file":"index.js"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
@value colors: "../../variables/colors.css";
|
|
4
4
|
@value white from colors;
|
|
5
5
|
@value medium from colors;
|
|
6
|
+
@value cm_positive_100 from colors;
|
|
6
7
|
@value cm_negative_50 from colors;
|
|
7
8
|
@value cm_negative_200 from colors;
|
|
8
9
|
@value cm_warning_50 from colors;
|
|
@@ -10,6 +11,23 @@
|
|
|
10
11
|
@value cm_yellow_200 from colors;
|
|
11
12
|
@value cm_yellow_400 from colors;
|
|
12
13
|
|
|
14
|
+
@keyframes fadeIn {
|
|
15
|
+
0% {
|
|
16
|
+
opacity: 0;
|
|
17
|
+
margin-top: -50px;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
16% {
|
|
21
|
+
margin-top: 70px;
|
|
22
|
+
opacity: 1;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
100% {
|
|
26
|
+
margin-top: 70px;
|
|
27
|
+
opacity: 1;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
13
31
|
.banner {
|
|
14
32
|
display: flex;
|
|
15
33
|
flex-direction: row;
|
|
@@ -27,6 +45,29 @@
|
|
|
27
45
|
background-color: cm_negative_50;
|
|
28
46
|
color: cm_negative_200;
|
|
29
47
|
}
|
|
48
|
+
.successBanner {
|
|
49
|
+
background-color: color(cm_positive_100 a(15%));
|
|
50
|
+
color: cm_positive_100;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.temporaryBanner {
|
|
54
|
+
display: inline-flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
padding: 16px 24px;
|
|
57
|
+
border-radius: 5px;
|
|
58
|
+
border-radius: 5px;
|
|
59
|
+
animation: fadeIn 1800ms;
|
|
60
|
+
animation-direction: alternate;
|
|
61
|
+
animation-iteration-count: 2;
|
|
62
|
+
animation-fill-mode: both;
|
|
63
|
+
animation-timing-function: ease-in;
|
|
64
|
+
z-index: 10000;
|
|
65
|
+
position: fixed;
|
|
66
|
+
top: 0;
|
|
67
|
+
left: 50%;
|
|
68
|
+
transform: translateX(-50%);
|
|
69
|
+
|
|
70
|
+
}
|
|
30
71
|
|
|
31
72
|
.button{
|
|
32
73
|
background-color: transparent;
|
|
@@ -50,6 +91,12 @@
|
|
|
50
91
|
margin-right: 16px;
|
|
51
92
|
}
|
|
52
93
|
|
|
94
|
+
.temporaryIcon {
|
|
95
|
+
width: 16px;
|
|
96
|
+
height: 16px;
|
|
97
|
+
margin-right: 8px;
|
|
98
|
+
}
|
|
99
|
+
|
|
53
100
|
.message {
|
|
54
101
|
font-family: 'Gilroy';
|
|
55
102
|
font-size: 14px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/molecule/banner/test/fixtures/default.js"],"names":["props","type","message","firstCTALabel","firstCTA","console","log","secondCTALabel","secondCTA"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/banner/test/fixtures/default.js"],"names":["props","type","message","firstCTALabel","firstCTA","console","log","secondCTALabel","secondCTA"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,SADD;AAELC,IAAAA,OAAO,EAAE,mFAFJ;AAGLC,IAAAA,aAAa,EAAE,MAHV;AAILC,IAAAA,QAAQ,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,WAAZ,CAJX;AAKLC,IAAAA,cAAc,EAAE,QALX;AAMLC,IAAAA,SAAS,EAAE,MAAMH,OAAO,CAACC,GAAR,CAAY,YAAZ;AANZ;AADM,CAAf","sourcesContent":["export default {\n props: {\n type: 'warning',\n message: 'Changes saved but not published. Do you want to update this custom playlist now? ',\n firstCTALabel: 'Undo',\n firstCTA: () => console.log('first cta'),\n secondCTALabel: 'Update',\n secondCTA: () => console.log('second cta')\n }\n};\n"],"file":"default.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/banner/test/fixtures/error-temporary-banner.js"],"names":["props","type","message","temporary"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,OADD;AAELC,IAAAA,OAAO,EAAE,6EAFJ;AAGLC,IAAAA,SAAS,EAAE;AAHN;AADM,CAAf","sourcesContent":["export default {\n props: {\n type: 'error',\n message: 'There was an error while publishing the custom playlist. Please Try again. ',\n temporary: true\n }\n};\n"],"file":"error-temporary-banner.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/banner/test/fixtures/success-banner.js"],"names":["props","type","message"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,SADD;AAELC,IAAAA,OAAO,EAAE;AAFJ;AADM,CAAf","sourcesContent":["export default {\n props: {\n type: 'success',\n message: 'Custom playlist successfully published '\n }\n};\n"],"file":"success-banner.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/banner/test/fixtures/success-temporary-banner.js"],"names":["props","type","message","temporary"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,SADD;AAELC,IAAAA,OAAO,EAAE,yCAFJ;AAGLC,IAAAA,SAAS,EAAE;AAHN;AADM,CAAf","sourcesContent":["export default {\n props: {\n type: 'success',\n message: 'Custom playlist successfully published ',\n temporary: true\n }\n};\n"],"file":"success-temporary-banner.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/banner/test/fixtures/warning-temporary-banner.js"],"names":["props","type","message","temporary"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,SADD;AAELC,IAAAA,OAAO,EAAE,yCAFJ;AAGLC,IAAAA,SAAS,EAAE;AAHN;AADM,CAAf","sourcesContent":["export default {\n props: {\n type: 'warning',\n message: 'Custom playlist successfully published ',\n temporary: true\n }\n};\n"],"file":"warning-temporary-banner.js"}
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
1
|
import React, { useCallback } from 'react';
|
|
4
2
|
import PropTypes from 'prop-types';
|
|
5
3
|
import ButtonLinkIconOnly from '../../atom/button-link-icon-only';
|
|
@@ -35,9 +33,7 @@ const BulletPointMenuButton = props => {
|
|
|
35
33
|
return /*#__PURE__*/React.createElement("div", {
|
|
36
34
|
className: style.bulletPointWrapper,
|
|
37
35
|
"data-name": "bullet-point-wrapper"
|
|
38
|
-
}, /*#__PURE__*/React.createElement(ButtonLinkIconOnly,
|
|
39
|
-
className: style.bulletPointButton
|
|
40
|
-
})), menu);
|
|
36
|
+
}, /*#__PURE__*/React.createElement(ButtonLinkIconOnly, bulletPointButtonProps), menu);
|
|
41
37
|
};
|
|
42
38
|
|
|
43
39
|
BulletPointMenuButton.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecule/bullet-point-menu-button/index.js"],"names":["React","useCallback","PropTypes","ButtonLinkIconOnly","ButtonMenu","style","BulletPointMenuButton","props","disabled","buttonAriaLabel","menuAriaLabel","onClick","buttons","handleOnClick","menuProps","menu","bulletPointMenu","bulletPointButtonProps","size","icon","bulletPointWrapper","
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/bullet-point-menu-button/index.js"],"names":["React","useCallback","PropTypes","ButtonLinkIconOnly","ButtonMenu","style","BulletPointMenuButton","props","disabled","buttonAriaLabel","menuAriaLabel","onClick","buttons","handleOnClick","menuProps","menu","bulletPointMenu","bulletPointButtonProps","size","icon","bulletPointWrapper","propTypes","bool","string","func"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,WAAf,QAAiC,OAAjC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,kBAAP,MAA+B,kCAA/B;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,qBAAqB,GAAGC,KAAK,IAAI;AACrC,QAAM;AAACC,IAAAA,QAAQ,GAAG,KAAZ;AAAmBC,IAAAA,eAAnB;AAAoCC,IAAAA,aAApC;AAAmDC,IAAAA,OAAnD;AAA4DC,IAAAA;AAA5D,MAAuEL,KAA7E;AACA,QAAMM,aAAa,GAAGZ,WAAW,CAAC,MAAMU,OAAO,EAAd,EAAkB,CAACA,OAAD,CAAlB,CAAjC;AAEA,QAAMG,SAAS,GAAG;AAChB,iBAAa,aADG;AAEhBF,IAAAA;AAFgB,GAAlB;AAKA,QAAMG,IAAI,gBACR;AAAK,IAAA,SAAS,EAAEV,KAAK,CAACW,eAAtB;AAAuC,iBAAU,cAAjD;AAAgE,kBAAYN;AAA5E,kBACE,oBAAC,UAAD,EAAgBI,SAAhB,CADF,CADF;AAKA,QAAMG,sBAAsB,GAAG;AAC7BC,IAAAA,IAAI,EAAE,SADuB;AAE7B,kBAAcT,eAFe;AAG7B,iBAAa,qBAHgB;AAI7BU,IAAAA,IAAI,EAAE,cAJuB;AAK7BR,IAAAA,OAAO,EAAEE,aALoB;AAM7BL,IAAAA;AAN6B,GAA/B;AASA,sBACE;AAAK,IAAA,SAAS,EAAEH,KAAK,CAACe,kBAAtB;AAA0C,iBAAU;AAApD,kBACE,oBAAC,kBAAD,EAAwBH,sBAAxB,CADF,EAEGF,IAFH,CADF;AAMD,CA7BD;;AA+BAT,qBAAqB,CAACe,SAAtB,2CAAkC;AAChCb,EAAAA,QAAQ,EAAEN,SAAS,CAACoB,IADY;AAEhCb,EAAAA,eAAe,EAAEP,SAAS,CAACqB,MAFK;AAGhCb,EAAAA,aAAa,EAAER,SAAS,CAACqB,MAHO;AAIhCX,EAAAA,OAAO,EAAER,UAAU,CAACiB,SAAX,CAAqBT,OAJE;AAKhCD,EAAAA,OAAO,EAAET,SAAS,CAACsB;AALa,CAAlC;AAQA,eAAelB,qBAAf","sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport ButtonMenu from '../../atom/button-menu';\nimport style from './style.css';\n\nconst BulletPointMenuButton = props => {\n const {disabled = false, buttonAriaLabel, menuAriaLabel, onClick, buttons} = props;\n const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n const menuProps = {\n 'data-name': 'button-menu',\n buttons\n };\n\n const menu = (\n <div className={style.bulletPointMenu} data-name=\"menu-wrapper\" aria-label={menuAriaLabel}>\n <ButtonMenu {...menuProps} />\n </div>\n );\n const bulletPointButtonProps = {\n size: 'default',\n 'aria-label': buttonAriaLabel,\n 'data-name': 'bullet-point-button',\n icon: 'bullet-point',\n onClick: handleOnClick,\n disabled\n };\n\n return (\n <div className={style.bulletPointWrapper} data-name=\"bullet-point-wrapper\">\n <ButtonLinkIconOnly {...bulletPointButtonProps} />\n {menu}\n </div>\n );\n};\n\nBulletPointMenuButton.propTypes = {\n disabled: PropTypes.bool,\n buttonAriaLabel: PropTypes.string,\n menuAriaLabel: PropTypes.string,\n buttons: ButtonMenu.propTypes.buttons,\n onClick: PropTypes.func\n};\n\nexport default BulletPointMenuButton;\n"],"file":"index.js"}
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
position: relative;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
.
|
|
13
|
+
.bulletPointWrapper > button {
|
|
14
14
|
position: relative;
|
|
15
15
|
cursor: pointer;
|
|
16
16
|
}
|
|
@@ -31,8 +31,8 @@
|
|
|
31
31
|
background-color: cm_grey_100;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
/* Fade-in - Fade-out */
|
|
35
|
-
|
|
34
|
+
/* Fade-in - Fade-out, does target button class but bulletPointMenu only */
|
|
35
|
+
button + .bulletPointMenu {
|
|
36
36
|
max-height: 0;
|
|
37
37
|
/* fade out combo */
|
|
38
38
|
visibility: hidden;
|
|
@@ -40,13 +40,17 @@
|
|
|
40
40
|
transition:visibility 0.5s ease,opacity 0.5s ease;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
|
|
43
|
+
/* Does target button class but bulletPointMenu only */
|
|
44
|
+
button:focus + .bulletPointMenu {
|
|
44
45
|
/* fade in combo */
|
|
45
46
|
max-height: max-content;
|
|
46
47
|
visibility:visible;
|
|
47
48
|
opacity:1;
|
|
48
49
|
}
|
|
49
50
|
|
|
50
|
-
/*
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
/*
|
|
52
|
+
Recover - unset pointer-events,
|
|
53
|
+
to be able to click on the button when the menu is open to close it
|
|
54
|
+
*/
|
|
55
|
+
.bulletPointWrapper > button:focus { pointer-events: none; }
|
|
56
|
+
.bulletPointWrapper > button:not(:focus) { pointer-events: auto; }
|