@coorpacademy/components 10.1.11 → 10.1.14

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.
Files changed (153) hide show
  1. package/es/atom/input-checkbox/index.js +9 -3
  2. package/es/atom/input-checkbox/index.js.map +1 -1
  3. package/es/atom/input-checkbox/style.css +15 -0
  4. package/es/atom/tag/test/fixtures.js +4 -2
  5. package/es/atom/tag/test/fixtures.js.map +1 -1
  6. package/es/molecule/banner/index.js +16 -7
  7. package/es/molecule/banner/index.js.map +1 -1
  8. package/es/molecule/banner/style.css +47 -0
  9. package/es/molecule/banner/test/fixtures/default.js +1 -1
  10. package/es/molecule/banner/test/fixtures/default.js.map +1 -1
  11. package/es/molecule/banner/test/fixtures/error-temporary-banner.js +8 -0
  12. package/es/molecule/banner/test/fixtures/error-temporary-banner.js.map +1 -0
  13. package/es/molecule/banner/test/fixtures/success-banner.js +7 -0
  14. package/es/molecule/banner/test/fixtures/success-banner.js.map +1 -0
  15. package/es/molecule/banner/test/fixtures/success-temporary-banner.js +8 -0
  16. package/es/molecule/banner/test/fixtures/success-temporary-banner.js.map +1 -0
  17. package/es/molecule/banner/test/fixtures/warning-temporary-banner.js +8 -0
  18. package/es/molecule/banner/test/fixtures/warning-temporary-banner.js.map +1 -0
  19. package/es/molecule/banner/test/fixtures.js +8 -0
  20. package/es/molecule/banner/test/fixtures.js.map +1 -1
  21. package/es/molecule/brand-form-group/style.css +5 -0
  22. package/es/molecule/brand-tabs/style.css +0 -1
  23. package/es/molecule/bullet-point-menu-button/index.js +1 -5
  24. package/es/molecule/bullet-point-menu-button/index.js.map +1 -1
  25. package/es/molecule/bullet-point-menu-button/style.css +11 -7
  26. package/es/molecule/select-multiple/index.js +101 -16
  27. package/es/molecule/select-multiple/index.js.map +1 -1
  28. package/es/molecule/select-multiple/style.css +292 -11
  29. package/es/molecule/select-multiple/test/fixtures/checked-cm-theme-multiple.js +32 -0
  30. package/es/molecule/select-multiple/test/fixtures/checked-cm-theme-multiple.js.map +1 -0
  31. package/es/molecule/select-multiple/test/fixtures/checked-cm-theme.js +32 -0
  32. package/es/molecule/select-multiple/test/fixtures/checked-cm-theme.js.map +1 -0
  33. package/es/molecule/select-multiple/test/fixtures/setup-theme-error.js +1 -1
  34. package/es/molecule/select-multiple/test/fixtures/setup-theme-error.js.map +1 -1
  35. package/es/molecule/select-multiple/test/fixtures.js +4 -0
  36. package/es/molecule/select-multiple/test/fixtures.js.map +1 -1
  37. package/es/organism/accordion/coorp-manager/index.js +5 -2
  38. package/es/organism/accordion/coorp-manager/index.js.map +1 -1
  39. package/es/organism/brand-dashboard/index.js +1 -3
  40. package/es/organism/brand-dashboard/index.js.map +1 -1
  41. package/es/organism/brand-dashboard/style.css +0 -10
  42. package/es/organism/list-item/index.js +68 -0
  43. package/es/organism/list-item/index.js.map +1 -0
  44. package/es/organism/list-item/style.css +53 -0
  45. package/es/organism/list-item/test/fixtures/archived.js +39 -0
  46. package/es/organism/list-item/test/fixtures/archived.js.map +1 -0
  47. package/es/organism/list-item/test/fixtures/draft.js +39 -0
  48. package/es/organism/list-item/test/fixtures/draft.js.map +1 -0
  49. package/es/organism/list-item/test/fixtures/published.js +39 -0
  50. package/es/organism/list-item/test/fixtures/published.js.map +1 -0
  51. package/es/organism/list-item/test/fixtures/revised.js +41 -0
  52. package/es/organism/list-item/test/fixtures/revised.js.map +1 -0
  53. package/es/organism/list-item/test/fixtures.js +19 -0
  54. package/es/organism/list-item/test/fixtures.js.map +1 -0
  55. package/es/organism/setup-header/style.css +16 -7
  56. package/es/template/back-office/brand-update/index.js +106 -92
  57. package/es/template/back-office/brand-update/index.js.map +1 -1
  58. package/es/template/back-office/brand-update/style.css +22 -66
  59. package/es/template/back-office/brand-update/test/fixtures/default.js +1 -58
  60. package/es/template/back-office/brand-update/test/fixtures/default.js.map +1 -1
  61. package/es/template/back-office/brand-update/test/fixtures/general-settings.js +77 -3
  62. package/es/template/back-office/brand-update/test/fixtures/general-settings.js.map +1 -1
  63. package/es/template/back-office/brand-update/test/fixtures/loader.js +1 -1
  64. package/es/template/back-office/brand-update/test/fixtures/loader.js.map +1 -1
  65. package/es/template/back-office/brand-update/test/fixtures/manageusers-edit.js +1 -1
  66. package/es/template/back-office/brand-update/test/fixtures/manageusers-edit.js.map +1 -1
  67. package/es/template/back-office/brand-update/test/fixtures/manageusers-list.js +1 -1
  68. package/es/template/back-office/brand-update/test/fixtures/manageusers-list.js.map +1 -1
  69. package/es/template/back-office/brand-update/test/fixtures/uploadusers.js +1 -1
  70. package/es/template/back-office/brand-update/test/fixtures/uploadusers.js.map +1 -1
  71. package/es/template/back-office/brand-update/test/fixtures.js +0 -2
  72. package/es/template/back-office/brand-update/test/fixtures.js.map +1 -1
  73. package/lib/atom/input-checkbox/index.js +10 -3
  74. package/lib/atom/input-checkbox/index.js.map +1 -1
  75. package/lib/atom/input-checkbox/style.css +15 -0
  76. package/lib/atom/tag/test/fixtures.js +5 -2
  77. package/lib/atom/tag/test/fixtures.js.map +1 -1
  78. package/lib/molecule/banner/index.js +17 -6
  79. package/lib/molecule/banner/index.js.map +1 -1
  80. package/lib/molecule/banner/style.css +47 -0
  81. package/lib/molecule/banner/test/fixtures/default.js +1 -1
  82. package/lib/molecule/banner/test/fixtures/default.js.map +1 -1
  83. package/lib/molecule/banner/test/fixtures/error-temporary-banner.js +13 -0
  84. package/lib/molecule/banner/test/fixtures/error-temporary-banner.js.map +1 -0
  85. package/lib/molecule/banner/test/fixtures/success-banner.js +12 -0
  86. package/lib/molecule/banner/test/fixtures/success-banner.js.map +1 -0
  87. package/lib/molecule/banner/test/fixtures/success-temporary-banner.js +13 -0
  88. package/lib/molecule/banner/test/fixtures/success-temporary-banner.js.map +1 -0
  89. package/lib/molecule/banner/test/fixtures/warning-temporary-banner.js +13 -0
  90. package/lib/molecule/banner/test/fixtures/warning-temporary-banner.js.map +1 -0
  91. package/lib/molecule/banner/test/fixtures.js +12 -0
  92. package/lib/molecule/banner/test/fixtures.js.map +1 -1
  93. package/lib/molecule/brand-form-group/style.css +5 -0
  94. package/lib/molecule/brand-tabs/style.css +0 -1
  95. package/lib/molecule/bullet-point-menu-button/index.js +1 -5
  96. package/lib/molecule/bullet-point-menu-button/index.js.map +1 -1
  97. package/lib/molecule/bullet-point-menu-button/style.css +11 -7
  98. package/lib/molecule/select-multiple/index.js +103 -15
  99. package/lib/molecule/select-multiple/index.js.map +1 -1
  100. package/lib/molecule/select-multiple/style.css +292 -11
  101. package/lib/molecule/select-multiple/test/fixtures/checked-cm-theme-multiple.js +37 -0
  102. package/lib/molecule/select-multiple/test/fixtures/checked-cm-theme-multiple.js.map +1 -0
  103. package/lib/molecule/select-multiple/test/fixtures/checked-cm-theme.js +37 -0
  104. package/lib/molecule/select-multiple/test/fixtures/checked-cm-theme.js.map +1 -0
  105. package/lib/molecule/select-multiple/test/fixtures/setup-theme-error.js +1 -1
  106. package/lib/molecule/select-multiple/test/fixtures/setup-theme-error.js.map +1 -1
  107. package/lib/molecule/select-multiple/test/fixtures.js +6 -0
  108. package/lib/molecule/select-multiple/test/fixtures.js.map +1 -1
  109. package/lib/organism/accordion/coorp-manager/index.js +4 -2
  110. package/lib/organism/accordion/coorp-manager/index.js.map +1 -1
  111. package/lib/organism/brand-dashboard/index.js +1 -3
  112. package/lib/organism/brand-dashboard/index.js.map +1 -1
  113. package/lib/organism/brand-dashboard/style.css +0 -10
  114. package/lib/organism/list-item/index.js +82 -0
  115. package/lib/organism/list-item/index.js.map +1 -0
  116. package/lib/organism/list-item/style.css +53 -0
  117. package/lib/organism/list-item/test/fixtures/archived.js +44 -0
  118. package/lib/organism/list-item/test/fixtures/archived.js.map +1 -0
  119. package/lib/organism/list-item/test/fixtures/draft.js +44 -0
  120. package/lib/organism/list-item/test/fixtures/draft.js.map +1 -0
  121. package/lib/organism/list-item/test/fixtures/published.js +44 -0
  122. package/lib/organism/list-item/test/fixtures/published.js.map +1 -0
  123. package/lib/organism/list-item/test/fixtures/revised.js +46 -0
  124. package/lib/organism/list-item/test/fixtures/revised.js.map +1 -0
  125. package/lib/organism/list-item/test/fixtures.js +31 -0
  126. package/lib/organism/list-item/test/fixtures.js.map +1 -0
  127. package/lib/organism/setup-header/style.css +16 -7
  128. package/lib/template/back-office/brand-update/index.js +106 -93
  129. package/lib/template/back-office/brand-update/index.js.map +1 -1
  130. package/lib/template/back-office/brand-update/style.css +22 -66
  131. package/lib/template/back-office/brand-update/test/fixtures/default.js +1 -58
  132. package/lib/template/back-office/brand-update/test/fixtures/default.js.map +1 -1
  133. package/lib/template/back-office/brand-update/test/fixtures/general-settings.js +76 -3
  134. package/lib/template/back-office/brand-update/test/fixtures/general-settings.js.map +1 -1
  135. package/lib/template/back-office/brand-update/test/fixtures/loader.js +2 -2
  136. package/lib/template/back-office/brand-update/test/fixtures/loader.js.map +1 -1
  137. package/lib/template/back-office/brand-update/test/fixtures/manageusers-edit.js +2 -2
  138. package/lib/template/back-office/brand-update/test/fixtures/manageusers-edit.js.map +1 -1
  139. package/lib/template/back-office/brand-update/test/fixtures/manageusers-list.js +2 -2
  140. package/lib/template/back-office/brand-update/test/fixtures/manageusers-list.js.map +1 -1
  141. package/lib/template/back-office/brand-update/test/fixtures/uploadusers.js +2 -2
  142. package/lib/template/back-office/brand-update/test/fixtures/uploadusers.js.map +1 -1
  143. package/lib/template/back-office/brand-update/test/fixtures.js +0 -3
  144. package/lib/template/back-office/brand-update/test/fixtures.js.map +1 -1
  145. package/package.json +2 -2
  146. package/es/molecule/search/test/fixtures.js +0 -15
  147. package/es/molecule/search/test/fixtures.js.map +0 -1
  148. package/es/template/back-office/brand-update/test/fixtures/manageusers.js +0 -11
  149. package/es/template/back-office/brand-update/test/fixtures/manageusers.js.map +0 -1
  150. package/lib/molecule/search/test/fixtures.js +0 -25
  151. package/lib/molecule/search/test/fixtures.js.map +0 -1
  152. package/lib/template/back-office/brand-update/test/fixtures/manageusers.js +0 -25
  153. 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(['primary', 'secondary', 'tertiary'])
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":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {NovaSolidStatusValidate as CheckIcon} from '@coorpacademy/nova-icons';\nimport {noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst titleStylesClassNames = {\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 } = 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 htmlFor={idCheckbox}>\n <CheckIcon className={style.icon} />\n </label>\n <span className={titleStyleClassName}>{title}</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 theme: PropTypes.oneOf(['coorpmanager', 'default']),\n titleStyle: PropTypes.oneOf(['primary', 'secondary', 'tertiary'])\n};\n\nexport default InputCheckbox;\n"],"file":"index.js"}
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 fixtureRevision from './fixtures/revision';
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 › Revision › should be rendered', renderComponentMacro, AtomTag, fixtureRevision);
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","fixtureRevision","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,gBAAP,MAA6B,sBAA7B;AACA,OAAOC,eAAP,MAA4B,qBAA5B;AAEAP,IAAI,CAAC,8CAAD,EAAiDQ,CAAC,IAAI;AACxDA,EAAAA,CAAC,CAACC,IAAF;AACAR,EAAAA,OAAO,CAACE,OAAO,CAACO,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;AAOAZ,IAAI,CAAC,gDAAD,EAAmDE,oBAAnD,EAAyEC,OAAzE,EAAkFC,eAAlF,CAAJ;AACAJ,IAAI,CAAC,+CAAD,EAAkDE,oBAAlD,EAAwEC,OAAxE,EAAiFE,cAAjF,CAAJ;AACAL,IAAI,CAAC,iDAAD,EAAoDE,oBAApD,EAA0EC,OAA1E,EAAmFG,gBAAnF,CAAJ;AACAN,IAAI,CAAC,gDAAD,EAAmDE,oBAAnD,EAAyEC,OAAzE,EAAkFI,eAAlF,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 fixturePublished from './fixtures/published';\nimport fixtureRevision from './fixtures/revision';\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 › Published › should be rendered', renderComponentMacro, AtomTag, fixturePublished);\ntest('Atom › AtomTag › Revision › should be rendered', renderComponentMacro, AtomTag, fixtureRevision);\n"],"file":"fixtures.js"}
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(QuestionIcon, {
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(['information', 'error']),
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;AACA,SAAQC,+CAA+C,IAAIC,YAA3D,QAA8E,0BAA9E;AACA,OAAOC,IAAP,MAAiB,wBAAjB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,MAAM,GAAGC,KAAK,IAAI;AACtB,QAAM;AAACC,IAAAA,IAAD;AAAOC,IAAAA,OAAP;AAAgBC,IAAAA,QAAhB;AAA0BC,IAAAA,aAA1B;AAAyCC,IAAAA,cAAzC;AAAyDC,IAAAA;AAAzD,MAAsEN,KAA5E;AACA,sBACE;AACE,IAAA,SAAS,EAAEN,UAAU,CAACI,KAAK,CAACS,MAAP,EAAeN,IAAI,KAAK,OAAT,IAAoBH,KAAK,CAACU,WAAzC,CADvB;AAEE,IAAA,KAAK,EAAEN;AAFT,kBAIE;AAAK,iBAAY,GAAED,IAAK,iBAAxB;AAA0C,IAAA,SAAS,EAAEH,KAAK,CAACI;AAA3D,kBACE,oBAAC,YAAD;AAAc,IAAA,SAAS,EAAEJ,KAAK,CAACW;AAA/B,IADF,EAEGP,OAFH,CAJF,EAQGE,aAAa,gBACZ;AAAK,IAAA,SAAS,EAAEN,KAAK,CAACY;AAAtB,kBACE,oBAAC,IAAD;AACE,iBAAU,kBADZ;AAEE,kBAAYN,aAFd;AAGE,IAAA,KAAK,EAAEA,aAHT;AAIE,IAAA,OAAO,EAAED,QAJX;AAKE,IAAA,IAAI,EAAC;AALP,IADF,CADY,GAUV,IAlBN,EAmBGC,aAAa,IAAIC,cAAjB,gBAAkC;AAAK,IAAA,SAAS,EAAEP,KAAK,CAACa;AAAtB,IAAlC,GAAyE,IAnB5E,EAoBGN,cAAc,gBACb;AAAK,IAAA,SAAS,EAAEP,KAAK,CAACY;AAAtB,kBACE,oBAAC,IAAD;AACE,iBAAU,mBADZ;AAEE,IAAA,OAAO,EAAEJ,SAFX;AAGE,kBAAYD,cAHd;AAIE,IAAA,KAAK,EAAEA,cAJT;AAKE,IAAA,IAAI,EAAC;AALP,IADF,CADa,GAUX,IA9BN,CADF;AAkCD,CApCD;;AAsCAN,MAAM,CAACa,SAAP,2CAAmB;AACjBX,EAAAA,IAAI,EAAER,SAAS,CAACoB,KAAV,CAAgB,CAAC,aAAD,EAAgB,OAAhB,CAAhB,CADW;AAEjBX,EAAAA,OAAO,EAAET,SAAS,CAACqB,MAAV,CAAiBC,UAFT;AAGjBZ,EAAAA,QAAQ,EAAEV,SAAS,CAACuB,IAHH;AAIjBZ,EAAAA,aAAa,EAAEX,SAAS,CAACqB,MAJR;AAKjBT,EAAAA,cAAc,EAAEZ,SAAS,CAACqB,MALT;AAMjBR,EAAAA,SAAS,EAAEb,SAAS,CAACuB;AANJ,CAAnB;AASA,eAAejB,MAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {NovaSolidInterfaceFeedbackInterfaceAlertDiamond as QuestionIcon} from '@coorpacademy/nova-icons';\nimport Link from '../../atom/button-link';\nimport style from './style.css';\n\nconst Banner = props => {\n const {type, message, firstCTA, firstCTALabel, secondCTALabel, secondCTA} = props;\n return (\n <div\n className={classnames(style.banner, type === 'error' && style.errorBanner)}\n title={message}\n >\n <div data-name={`${type}-banner-message`} className={style.message}>\n <QuestionIcon className={style.icon} />\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(['information', 'error']),\n message: PropTypes.string.isRequired,\n firstCTA: PropTypes.func,\n firstCTALabel: PropTypes.string,\n secondCTALabel: PropTypes.string,\n secondCTA: PropTypes.func\n};\n\nexport default Banner;\n"],"file":"index.js"}
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,6 +1,6 @@
1
1
  export default {
2
2
  props: {
3
- type: 'information',
3
+ type: 'warning',
4
4
  message: 'Changes saved but not published. Do you want to update this custom playlist now? ',
5
5
  firstCTALabel: 'Undo',
6
6
  firstCTA: () => console.log('first cta'),
@@ -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,aADD;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: 'information',\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"}
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,8 @@
1
+ export default {
2
+ props: {
3
+ type: 'error',
4
+ message: 'There was an error while publishing the custom playlist. Please Try again. ',
5
+ temporary: true
6
+ }
7
+ };
8
+ //# sourceMappingURL=error-temporary-banner.js.map
@@ -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,7 @@
1
+ export default {
2
+ props: {
3
+ type: 'success',
4
+ message: 'Custom playlist successfully published '
5
+ }
6
+ };
7
+ //# sourceMappingURL=success-banner.js.map
@@ -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,8 @@
1
+ export default {
2
+ props: {
3
+ type: 'success',
4
+ message: 'Custom playlist successfully published ',
5
+ temporary: true
6
+ }
7
+ };
8
+ //# sourceMappingURL=success-temporary-banner.js.map
@@ -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,8 @@
1
+ export default {
2
+ props: {
3
+ type: 'warning',
4
+ message: 'Custom playlist successfully published ',
5
+ temporary: true
6
+ }
7
+ };
8
+ //# sourceMappingURL=warning-temporary-banner.js.map
@@ -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"}
@@ -4,6 +4,10 @@ import renderComponentMacro from '../../../test/helpers/render-component';
4
4
  import MoleculeBanner from '..';
5
5
  import fixtureDefault from './fixtures/default';
6
6
  import fixtureErrorBanner from './fixtures/error-banner';
7
+ import fixtureErrorTemporaryBanner from './fixtures/error-temporary-banner';
8
+ import fixtureSuccessBanner from './fixtures/success-banner';
9
+ import fixtureSuccessTemporaryBanner from './fixtures/success-temporary-banner';
10
+ import fixtureWarningTemporaryBanner from './fixtures/warning-temporary-banner';
7
11
  test('Molecule › MoleculeBanner > should have valid propTypes', t => {
8
12
  t.pass();
9
13
  forEach(MoleculeBanner.propTypes, (value, key) => {
@@ -12,4 +16,8 @@ test('Molecule › MoleculeBanner > should have valid propTypes', t => {
12
16
  });
13
17
  test('Molecule › MoleculeBanner › Default › should be rendered', renderComponentMacro, MoleculeBanner, fixtureDefault);
14
18
  test('Molecule › MoleculeBanner › ErrorBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureErrorBanner);
19
+ test('Molecule › MoleculeBanner › ErrorTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureErrorTemporaryBanner);
20
+ test('Molecule › MoleculeBanner › SuccessBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureSuccessBanner);
21
+ test('Molecule › MoleculeBanner › SuccessTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureSuccessTemporaryBanner);
22
+ test('Molecule › MoleculeBanner › WarningTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureWarningTemporaryBanner);
15
23
  //# sourceMappingURL=fixtures.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/molecule/banner/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","MoleculeBanner","fixtureDefault","fixtureErrorBanner","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,cAAP,MAA2B,IAA3B;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,kBAAP,MAA+B,yBAA/B;AAEAL,IAAI,CAAC,yDAAD,EAA4DM,CAAC,IAAI;AACnEA,EAAAA,CAAC,CAACC,IAAF;AACAN,EAAAA,OAAO,CAACE,cAAc,CAACK,SAAhB,EAA2B,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAChDJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,mDAAkDF,GAAI,mEAA/E;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAV,IAAI,CAAC,0DAAD,EAA6DE,oBAA7D,EAAmFC,cAAnF,EAAmGC,cAAnG,CAAJ;AACAJ,IAAI,CAAC,8DAAD,EAAiEE,oBAAjE,EAAuFC,cAAvF,EAAuGE,kBAAvG,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeBanner from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureErrorBanner from './fixtures/error-banner';\n\ntest('Molecule › MoleculeBanner > should have valid propTypes', t => {\n t.pass();\n forEach(MoleculeBanner.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Molecule.MoleculeBanner.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Molecule › MoleculeBanner › Default › should be rendered', renderComponentMacro, MoleculeBanner, fixtureDefault);\ntest('Molecule › MoleculeBanner › ErrorBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureErrorBanner);\n"],"file":"fixtures.js"}
1
+ {"version":3,"sources":["../../../../src/molecule/banner/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","MoleculeBanner","fixtureDefault","fixtureErrorBanner","fixtureErrorTemporaryBanner","fixtureSuccessBanner","fixtureSuccessTemporaryBanner","fixtureWarningTemporaryBanner","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,cAAP,MAA2B,IAA3B;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,kBAAP,MAA+B,yBAA/B;AACA,OAAOC,2BAAP,MAAwC,mCAAxC;AACA,OAAOC,oBAAP,MAAiC,2BAAjC;AACA,OAAOC,6BAAP,MAA0C,qCAA1C;AACA,OAAOC,6BAAP,MAA0C,qCAA1C;AAEAT,IAAI,CAAC,yDAAD,EAA4DU,CAAC,IAAI;AACnEA,EAAAA,CAAC,CAACC,IAAF;AACAV,EAAAA,OAAO,CAACE,cAAc,CAACS,SAAhB,EAA2B,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAChDJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,mDAAkDF,GAAI,mEAA/E;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAd,IAAI,CAAC,0DAAD,EAA6DE,oBAA7D,EAAmFC,cAAnF,EAAmGC,cAAnG,CAAJ;AACAJ,IAAI,CAAC,8DAAD,EAAiEE,oBAAjE,EAAuFC,cAAvF,EAAuGE,kBAAvG,CAAJ;AACAL,IAAI,CAAC,uEAAD,EAA0EE,oBAA1E,EAAgGC,cAAhG,EAAgHG,2BAAhH,CAAJ;AACAN,IAAI,CAAC,gEAAD,EAAmEE,oBAAnE,EAAyFC,cAAzF,EAAyGI,oBAAzG,CAAJ;AACAP,IAAI,CAAC,yEAAD,EAA4EE,oBAA5E,EAAkGC,cAAlG,EAAkHK,6BAAlH,CAAJ;AACAR,IAAI,CAAC,yEAAD,EAA4EE,oBAA5E,EAAkGC,cAAlG,EAAkHM,6BAAlH,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeBanner from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureErrorBanner from './fixtures/error-banner';\nimport fixtureErrorTemporaryBanner from './fixtures/error-temporary-banner';\nimport fixtureSuccessBanner from './fixtures/success-banner';\nimport fixtureSuccessTemporaryBanner from './fixtures/success-temporary-banner';\nimport fixtureWarningTemporaryBanner from './fixtures/warning-temporary-banner';\n\ntest('Molecule › MoleculeBanner > should have valid propTypes', t => {\n t.pass();\n forEach(MoleculeBanner.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Molecule.MoleculeBanner.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Molecule › MoleculeBanner › Default › should be rendered', renderComponentMacro, MoleculeBanner, fixtureDefault);\ntest('Molecule › MoleculeBanner › ErrorBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureErrorBanner);\ntest('Molecule › MoleculeBanner › ErrorTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureErrorTemporaryBanner);\ntest('Molecule › MoleculeBanner › SuccessBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureSuccessBanner);\ntest('Molecule › MoleculeBanner › SuccessTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureSuccessTemporaryBanner);\ntest('Molecule › MoleculeBanner › WarningTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureWarningTemporaryBanner);\n"],"file":"fixtures.js"}
@@ -11,6 +11,11 @@
11
11
  margin-bottom: 20px;
12
12
  }
13
13
 
14
+ .titleWrapper:first-child {
15
+ margin-top: 0;
16
+ margin-bottom: 20px;
17
+ }
18
+
14
19
  .grid {
15
20
  display: flex;
16
21
  flex-wrap: wrap;
@@ -8,7 +8,6 @@
8
8
 
9
9
  .wrapper {
10
10
  width: 100%;
11
- height: 72px;
12
11
  background-color: white;
13
12
  display: flex;
14
13
  }
@@ -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, _extends({}, bulletPointButtonProps, {
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","bulletPointButton","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;AAAgD,IAAA,SAAS,EAAEZ,KAAK,CAACgB;AAAjE,KADF,EAEGN,IAFH,CADF;AAMD,CA7BD;;AA+BAT,qBAAqB,CAACgB,SAAtB,2CAAkC;AAChCd,EAAAA,QAAQ,EAAEN,SAAS,CAACqB,IADY;AAEhCd,EAAAA,eAAe,EAAEP,SAAS,CAACsB,MAFK;AAGhCd,EAAAA,aAAa,EAAER,SAAS,CAACsB,MAHO;AAIhCZ,EAAAA,OAAO,EAAER,UAAU,CAACkB,SAAX,CAAqBV,OAJE;AAKhCD,EAAAA,OAAO,EAAET,SAAS,CAACuB;AALa,CAAlC;AAQA,eAAenB,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} className={style.bulletPointButton} />\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"}
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
- .bulletPointButton {
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
- .bulletPointButton,button + .bulletPointMenu {
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
- .bulletPointButton,button:focus + .bulletPointMenu {
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
- /* Recover - unset pointer-events */
51
- .bulletPointButton,button:focus { pointer-events: none; }
52
- .bulletPointButton,button:not(:focus) { pointer-events: auto; }
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; }