@coorpacademy/components 10.1.6 → 10.1.10
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/button-link/index.js +7 -23
- package/es/atom/button-link/index.js.map +1 -1
- package/es/atom/button-link/style.css +4 -2
- package/es/atom/button-link/test/fixtures.js +0 -2
- package/es/atom/button-link/test/fixtures.js.map +1 -1
- package/es/atom/button-link-icon-only/index.js +76 -0
- package/es/atom/button-link-icon-only/index.js.map +1 -0
- package/es/atom/button-link-icon-only/style.css +64 -0
- package/es/atom/button-link-icon-only/test/button-link-icon-only.js +25 -0
- package/es/atom/button-link-icon-only/test/button-link-icon-only.js.map +1 -0
- package/es/atom/button-link-icon-only/test/fixtures/button-icon-bullet.js +10 -0
- package/es/atom/button-link-icon-only/test/fixtures/button-icon-bullet.js.map +1 -0
- package/es/atom/{button-link/test/fixtures/icon-button.js → button-link-icon-only/test/fixtures/default.js} +3 -6
- package/es/atom/button-link-icon-only/test/fixtures/default.js.map +1 -0
- package/es/atom/button-link-icon-only/test/fixtures/no-icon.js +7 -0
- package/es/atom/button-link-icon-only/test/fixtures/no-icon.js.map +1 -0
- package/es/atom/button-link-icon-only/test/fixtures/small-button-disabled.js +11 -0
- package/es/atom/button-link-icon-only/test/fixtures/small-button-disabled.js.map +1 -0
- package/es/atom/button-link-icon-only/test/fixtures/small-link-download.js +13 -0
- package/es/atom/button-link-icon-only/test/fixtures/small-link-download.js.map +1 -0
- package/es/atom/button-link-icon-only/test/fixtures.js +21 -0
- package/es/atom/button-link-icon-only/test/fixtures.js.map +1 -0
- package/es/atom/button-menu/index.js +66 -0
- package/es/atom/button-menu/index.js.map +1 -0
- package/es/atom/button-menu/style.css +51 -0
- package/es/atom/button-menu/test/fixtures/default.js +20 -0
- package/es/atom/button-menu/test/fixtures/default.js.map +1 -0
- package/es/atom/button-menu/test/fixtures/multiple-buttons.js +15 -0
- package/es/atom/button-menu/test/fixtures/multiple-buttons.js.map +1 -0
- package/es/atom/button-menu/test/fixtures.js +15 -0
- package/es/atom/button-menu/test/fixtures.js.map +1 -0
- package/es/atom/empty-search-result/index.js +24 -0
- package/es/atom/empty-search-result/index.js.map +1 -0
- package/es/atom/empty-search-result/style.css +25 -0
- package/es/atom/empty-search-result/test/fixtures/default.js +7 -0
- package/es/atom/empty-search-result/test/fixtures/default.js.map +1 -0
- package/es/atom/empty-search-result/test/fixtures.js +13 -0
- package/es/atom/empty-search-result/test/fixtures.js.map +1 -0
- package/es/atom/input-text/index.js +3 -2
- package/es/atom/input-text/index.js.map +1 -1
- package/es/atom/tag/index.js +3 -2
- package/es/atom/tag/index.js.map +1 -1
- package/es/atom/tag/style.css +5 -1
- package/es/atom/tag/test/fixtures/draft.js +7 -0
- package/es/atom/tag/test/fixtures/draft.js.map +1 -0
- package/es/atom/tag/test/fixtures/{revision.js → revised.js} +2 -2
- package/es/atom/tag/test/fixtures/revised.js.map +1 -0
- package/es/molecule/bullet-point-menu-button/index.js +51 -0
- package/es/molecule/bullet-point-menu-button/index.js.map +1 -0
- package/es/molecule/bullet-point-menu-button/style.css +52 -0
- package/es/molecule/bullet-point-menu-button/test/bullet-point-menu-button.js +34 -0
- package/es/molecule/bullet-point-menu-button/test/bullet-point-menu-button.js.map +1 -0
- package/es/molecule/bullet-point-menu-button/test/fixtures/default.js +11 -0
- package/es/molecule/bullet-point-menu-button/test/fixtures/default.js.map +1 -0
- package/es/molecule/bullet-point-menu-button/test/fixtures/multiple-buttons.js +13 -0
- package/es/molecule/bullet-point-menu-button/test/fixtures/multiple-buttons.js.map +1 -0
- package/es/molecule/bullet-point-menu-button/test/fixtures.js +15 -0
- package/es/molecule/bullet-point-menu-button/test/fixtures.js.map +1 -0
- package/es/molecule/cm-popin/index.js +8 -7
- package/es/molecule/cm-popin/index.js.map +1 -1
- package/es/molecule/cm-popin/style.css +0 -25
- package/es/molecule/search/test/fixtures.js +15 -0
- package/es/molecule/search/test/fixtures.js.map +1 -0
- package/es/molecule/vertical-tabs/index.js +8 -3
- package/es/molecule/vertical-tabs/index.js.map +1 -1
- package/es/molecule/vertical-tabs/test/fixtures/default.js +2 -1
- package/es/molecule/vertical-tabs/test/fixtures/default.js.map +1 -1
- package/es/molecule/vertical-tabs/test/fixtures/with-selected-item.js +2 -1
- package/es/molecule/vertical-tabs/test/fixtures/with-selected-item.js.map +1 -1
- package/es/organism/course-selection/index.js +57 -0
- package/es/organism/course-selection/index.js.map +1 -0
- package/es/organism/course-selection/style.css +23 -0
- package/es/organism/course-selection/test/fixtures/default.js +34 -0
- package/es/organism/course-selection/test/fixtures/default.js.map +1 -0
- package/es/organism/course-selection/test/fixtures/empty.js +18 -0
- package/es/organism/course-selection/test/fixtures/empty.js.map +1 -0
- package/es/organism/course-selection/test/fixtures/filtered.js +24 -0
- package/es/organism/course-selection/test/fixtures/filtered.js.map +1 -0
- package/es/organism/course-selection/test/fixtures/sorted-selected.js +31 -0
- package/es/organism/course-selection/test/fixtures/sorted-selected.js.map +1 -0
- package/es/organism/course-selection/test/fixtures/unsorted-selected.js +31 -0
- package/es/organism/course-selection/test/fixtures/unsorted-selected.js.map +1 -0
- package/es/organism/course-selection/test/fixtures.js +21 -0
- package/es/organism/course-selection/test/fixtures.js.map +1 -0
- package/es/organism/playlist-translation/index.js +63 -0
- package/es/organism/playlist-translation/index.js.map +1 -0
- package/es/organism/playlist-translation/style.css +45 -0
- package/es/organism/playlist-translation/test/fixtures/default.js +24 -0
- package/es/organism/playlist-translation/test/fixtures/default.js.map +1 -0
- package/es/organism/playlist-translation/test/fixtures/delete.js +18 -0
- package/es/organism/playlist-translation/test/fixtures/delete.js.map +1 -0
- package/es/organism/playlist-translation/test/fixtures.js +15 -0
- package/es/organism/playlist-translation/test/fixtures.js.map +1 -0
- package/es/organism/search-and-chips-results/index.js +3 -8
- package/es/organism/search-and-chips-results/index.js.map +1 -1
- package/es/organism/search-and-chips-results/style.css +0 -22
- package/es/organism/setup-header/index.js +78 -31
- package/es/organism/setup-header/index.js.map +1 -1
- package/es/organism/setup-header/style.css +27 -62
- package/es/template/teams-dashboard/index.js +4 -3
- package/es/template/teams-dashboard/index.js.map +1 -1
- package/es/util/button-icons.js +16 -0
- package/es/util/button-icons.js.map +1 -0
- package/lib/atom/button-link/index.js +9 -25
- package/lib/atom/button-link/index.js.map +1 -1
- package/lib/atom/button-link/style.css +4 -2
- package/lib/atom/button-link/test/fixtures.js +0 -3
- package/lib/atom/button-link/test/fixtures.js.map +1 -1
- package/lib/atom/button-link-icon-only/index.js +94 -0
- package/lib/atom/button-link-icon-only/index.js.map +1 -0
- package/lib/atom/button-link-icon-only/style.css +64 -0
- package/lib/atom/button-link-icon-only/test/button-link-icon-only.js +37 -0
- package/lib/atom/button-link-icon-only/test/button-link-icon-only.js.map +1 -0
- package/lib/atom/button-link-icon-only/test/fixtures/button-icon-bullet.js +15 -0
- package/lib/atom/button-link-icon-only/test/fixtures/button-icon-bullet.js.map +1 -0
- package/lib/atom/{button-link/test/fixtures/icon-button.js → button-link-icon-only/test/fixtures/default.js} +3 -6
- package/lib/atom/button-link-icon-only/test/fixtures/default.js.map +1 -0
- package/lib/atom/button-link-icon-only/test/fixtures/no-icon.js +12 -0
- package/lib/atom/button-link-icon-only/test/fixtures/no-icon.js.map +1 -0
- package/lib/atom/button-link-icon-only/test/fixtures/small-button-disabled.js +16 -0
- package/lib/atom/button-link-icon-only/test/fixtures/small-button-disabled.js.map +1 -0
- package/lib/atom/button-link-icon-only/test/fixtures/small-link-download.js +18 -0
- package/lib/atom/button-link-icon-only/test/fixtures/small-link-download.js.map +1 -0
- package/lib/atom/button-link-icon-only/test/fixtures.js +34 -0
- package/lib/atom/button-link-icon-only/test/fixtures.js.map +1 -0
- package/lib/atom/button-menu/index.js +82 -0
- package/lib/atom/button-menu/index.js.map +1 -0
- package/lib/atom/button-menu/style.css +51 -0
- package/lib/atom/button-menu/test/fixtures/default.js +27 -0
- package/lib/atom/button-menu/test/fixtures/default.js.map +1 -0
- package/lib/atom/button-menu/test/fixtures/multiple-buttons.js +23 -0
- package/lib/atom/button-menu/test/fixtures/multiple-buttons.js.map +1 -0
- package/lib/atom/button-menu/test/fixtures.js +25 -0
- package/lib/atom/button-menu/test/fixtures.js.map +1 -0
- package/lib/atom/empty-search-result/index.js +34 -0
- package/lib/atom/empty-search-result/index.js.map +1 -0
- package/lib/atom/empty-search-result/style.css +25 -0
- package/lib/atom/empty-search-result/test/fixtures/default.js +12 -0
- package/lib/atom/empty-search-result/test/fixtures/default.js.map +1 -0
- package/lib/atom/empty-search-result/test/fixtures.js +22 -0
- package/lib/atom/empty-search-result/test/fixtures.js.map +1 -0
- package/lib/atom/input-text/index.js +3 -2
- package/lib/atom/input-text/index.js.map +1 -1
- package/lib/atom/tag/index.js +3 -2
- package/lib/atom/tag/index.js.map +1 -1
- package/lib/atom/tag/style.css +5 -1
- package/lib/atom/tag/test/fixtures/draft.js +12 -0
- package/lib/atom/tag/test/fixtures/draft.js.map +1 -0
- package/lib/atom/tag/test/fixtures/{revision.js → revised.js} +2 -2
- package/lib/atom/tag/test/fixtures/revised.js.map +1 -0
- package/lib/molecule/bullet-point-menu-button/index.js +69 -0
- package/lib/molecule/bullet-point-menu-button/index.js.map +1 -0
- package/lib/molecule/bullet-point-menu-button/style.css +52 -0
- package/lib/molecule/bullet-point-menu-button/test/bullet-point-menu-button.js +46 -0
- package/lib/molecule/bullet-point-menu-button/test/bullet-point-menu-button.js.map +1 -0
- package/lib/molecule/bullet-point-menu-button/test/fixtures/default.js +18 -0
- package/lib/molecule/bullet-point-menu-button/test/fixtures/default.js.map +1 -0
- package/lib/molecule/bullet-point-menu-button/test/fixtures/multiple-buttons.js +25 -0
- package/lib/molecule/bullet-point-menu-button/test/fixtures/multiple-buttons.js.map +1 -0
- package/lib/molecule/bullet-point-menu-button/test/fixtures.js +25 -0
- package/lib/molecule/bullet-point-menu-button/test/fixtures.js.map +1 -0
- package/lib/molecule/cm-popin/index.js +8 -6
- package/lib/molecule/cm-popin/index.js.map +1 -1
- package/lib/molecule/cm-popin/style.css +0 -25
- package/lib/molecule/search/test/fixtures.js +25 -0
- package/lib/molecule/search/test/fixtures.js.map +1 -0
- package/lib/molecule/vertical-tabs/index.js +8 -3
- package/lib/molecule/vertical-tabs/index.js.map +1 -1
- package/lib/molecule/vertical-tabs/test/fixtures/default.js +2 -1
- package/lib/molecule/vertical-tabs/test/fixtures/default.js.map +1 -1
- package/lib/molecule/vertical-tabs/test/fixtures/with-selected-item.js +2 -1
- package/lib/molecule/vertical-tabs/test/fixtures/with-selected-item.js.map +1 -1
- package/lib/organism/course-selection/index.js +70 -0
- package/lib/organism/course-selection/index.js.map +1 -0
- package/lib/organism/course-selection/style.css +23 -0
- package/lib/organism/course-selection/test/fixtures/default.js +47 -0
- package/lib/organism/course-selection/test/fixtures/default.js.map +1 -0
- package/lib/organism/course-selection/test/fixtures/empty.js +23 -0
- package/lib/organism/course-selection/test/fixtures/empty.js.map +1 -0
- package/lib/organism/course-selection/test/fixtures/filtered.js +36 -0
- package/lib/organism/course-selection/test/fixtures/filtered.js.map +1 -0
- package/lib/organism/course-selection/test/fixtures/sorted-selected.js +44 -0
- package/lib/organism/course-selection/test/fixtures/sorted-selected.js.map +1 -0
- package/lib/organism/course-selection/test/fixtures/unsorted-selected.js +44 -0
- package/lib/organism/course-selection/test/fixtures/unsorted-selected.js.map +1 -0
- package/lib/organism/course-selection/test/fixtures.js +34 -0
- package/lib/organism/course-selection/test/fixtures.js.map +1 -0
- package/lib/organism/playlist-translation/index.js +78 -0
- package/lib/organism/playlist-translation/index.js.map +1 -0
- package/lib/organism/playlist-translation/style.css +45 -0
- package/lib/organism/playlist-translation/test/fixtures/default.js +35 -0
- package/lib/organism/playlist-translation/test/fixtures/default.js.map +1 -0
- package/lib/organism/playlist-translation/test/fixtures/delete.js +29 -0
- package/lib/organism/playlist-translation/test/fixtures/delete.js.map +1 -0
- package/lib/organism/playlist-translation/test/fixtures.js +25 -0
- package/lib/organism/playlist-translation/test/fixtures.js.map +1 -0
- package/lib/organism/search-and-chips-results/index.js +4 -8
- package/lib/organism/search-and-chips-results/index.js.map +1 -1
- package/lib/organism/search-and-chips-results/style.css +0 -22
- package/lib/organism/setup-header/index.js +80 -32
- package/lib/organism/setup-header/index.js.map +1 -1
- package/lib/organism/setup-header/style.css +27 -62
- package/lib/template/teams-dashboard/index.js +3 -1
- package/lib/template/teams-dashboard/index.js.map +1 -1
- package/lib/util/button-icons.js +23 -0
- package/lib/util/button-icons.js.map +1 -0
- package/package.json +3 -3
- package/es/atom/button-link/test/fixtures/icon-button.js.map +0 -1
- package/es/atom/tag/test/fixtures/revision.js.map +0 -1
- package/lib/atom/button-link/test/fixtures/icon-button.js.map +0 -1
- package/lib/atom/tag/test/fixtures/revision.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/atom/button-link/index.js"],"names":["
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/button-link/index.js"],"names":["getButtonContent","icon","label","type","position","Icon","ICONS","style","buttonContent","ButtonLink","props","disabled","dataName","ariaLabel","link","onClick","contentView","styleButton","button","primary","secondary","tertiary","text","dangerous","handleOnClick","propTypes","PropTypes","oneOf","string","shape","func","href","download","bool","target"],"mappings":"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","sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, keys} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport {ICONS} from '../../util/button-icons';\nimport style from './style.css';\n\nconst getButtonContent = (icon, label) => {\n const {type, position} = icon;\n const Icon = getOr(null, type, ICONS);\n\n if (!Icon) {\n return (\n <div className={style.buttonContent}>\n <span className={style.label}>{label}</span>\n </div>\n );\n }\n\n return (\n <div className={style.buttonContent}>\n {position === 'left' ? <Icon className={style.icon} /> : null}\n <span className={style.label}>{label}</span>\n {position === 'right' ? <Icon className={style.icon} /> : null}\n </div>\n );\n};\n\nconst ButtonLink = props => {\n const {\n type,\n label,\n disabled,\n icon = {},\n 'data-name': dataName,\n 'aria-label': ariaLabel,\n link,\n onClick\n } = props;\n const contentView = getButtonContent(icon, label);\n const styleButton = classnames(\n style.button,\n type === 'primary' && style.primary,\n type === 'secondary' && style.secondary,\n type === 'tertiary' && style.tertiary,\n type === 'text' && style.text,\n type === 'dangerous' && style.dangerous,\n link && style.link,\n disabled && style.disabled\n );\n\n if (link) {\n return (\n <Link\n {...link}\n className={styleButton}\n data-name={dataName}\n aria-label={ariaLabel || label}\n title={ariaLabel || label}\n >\n {contentView}\n </Link>\n );\n }\n\n const handleOnClick = useCallback(() => onClick(), [onClick]);\n return (\n <button\n type=\"button\"\n aria-label={ariaLabel || label}\n title={ariaLabel || label}\n data-name={dataName}\n className={styleButton}\n onClick={handleOnClick}\n >\n {contentView}\n </button>\n );\n};\n\nButtonLink.propTypes = {\n type: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'text', 'dangerous']),\n label: PropTypes.string,\n 'aria-label': PropTypes.string,\n 'data-name': PropTypes.string,\n icon: PropTypes.shape({\n position: PropTypes.oneOf(['right', 'left']),\n type: PropTypes.oneOf(keys(ICONS))\n }),\n onClick: PropTypes.func,\n link: PropTypes.shape({\n href: PropTypes.string,\n download: PropTypes.bool,\n target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n }),\n disabled: PropTypes.bool\n};\n\nexport default ButtonLink;\n"],"file":"index.js"}
|
|
@@ -21,6 +21,9 @@
|
|
|
21
21
|
align-items: center;
|
|
22
22
|
cursor: pointer;
|
|
23
23
|
border: none;
|
|
24
|
+
/* prevents text selection when dragging
|
|
25
|
+
the mouse over the button */
|
|
26
|
+
user-select: none;
|
|
24
27
|
}
|
|
25
28
|
|
|
26
29
|
.disabled {
|
|
@@ -70,7 +73,6 @@
|
|
|
70
73
|
.tertiary {
|
|
71
74
|
background-color: cm_grey_50;
|
|
72
75
|
color: cm_grey_900;
|
|
73
|
-
border-radius: 0px;
|
|
74
76
|
}
|
|
75
77
|
|
|
76
78
|
.tertiary:hover {
|
|
@@ -90,4 +92,4 @@
|
|
|
90
92
|
color: inherit;
|
|
91
93
|
border-radius: 0px;
|
|
92
94
|
height: auto;
|
|
93
|
-
}
|
|
95
|
+
}
|
|
@@ -18,8 +18,6 @@ var _buttonSecondaryNoIconDisabled = _interopRequireDefault(require("./fixtures/
|
|
|
18
18
|
|
|
19
19
|
var _buttonTertiaryIconLeft = _interopRequireDefault(require("./fixtures/button-tertiary-icon-left"));
|
|
20
20
|
|
|
21
|
-
var _iconButton = _interopRequireDefault(require("./fixtures/icon-button"));
|
|
22
|
-
|
|
23
21
|
var _linkPrimaryDisabledIconRight = _interopRequireDefault(require("./fixtures/link-primary-disabled-icon-right"));
|
|
24
22
|
|
|
25
23
|
var _linkSecondaryIconRight = _interopRequireDefault(require("./fixtures/link-secondary-icon-right"));
|
|
@@ -43,7 +41,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
43
41
|
(0, _ava.default)('Atom › AtomButtonLink › ButtonPrimaryNoIcon › should be rendered', _renderComponent.default, _.default, _buttonPrimaryNoIcon.default);
|
|
44
42
|
(0, _ava.default)('Atom › AtomButtonLink › ButtonSecondaryNoIconDisabled › should be rendered', _renderComponent.default, _.default, _buttonSecondaryNoIconDisabled.default);
|
|
45
43
|
(0, _ava.default)('Atom › AtomButtonLink › ButtonTertiaryIconLeft › should be rendered', _renderComponent.default, _.default, _buttonTertiaryIconLeft.default);
|
|
46
|
-
(0, _ava.default)('Atom › AtomButtonLink › IconButton › should be rendered', _renderComponent.default, _.default, _iconButton.default);
|
|
47
44
|
(0, _ava.default)('Atom › AtomButtonLink › LinkPrimaryDisabledIconRight › should be rendered', _renderComponent.default, _.default, _linkPrimaryDisabledIconRight.default);
|
|
48
45
|
(0, _ava.default)('Atom › AtomButtonLink › LinkSecondaryIconRight › should be rendered', _renderComponent.default, _.default, _linkSecondaryIconRight.default);
|
|
49
46
|
(0, _ava.default)('Atom › AtomButtonLink › LinkTertiaryNoIcon › should be rendered', _renderComponent.default, _.default, _linkTertiaryNoIcon.default);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/atom/button-link/test/fixtures.js"],"names":["t","pass","AtomButtonLink","propTypes","value","key","not","undefined","renderComponentMacro","fixtureButtonDangerousNoIcon","fixtureButtonPrimaryIconLeft","fixtureButtonPrimaryNoIcon","fixtureButtonSecondaryNoIconDisabled","fixtureButtonTertiaryIconLeft","
|
|
1
|
+
{"version":3,"sources":["../../../../src/atom/button-link/test/fixtures.js"],"names":["t","pass","AtomButtonLink","propTypes","value","key","not","undefined","renderComponentMacro","fixtureButtonDangerousNoIcon","fixtureButtonPrimaryIconLeft","fixtureButtonPrimaryNoIcon","fixtureButtonSecondaryNoIconDisabled","fixtureButtonTertiaryIconLeft","fixtureLinkPrimaryDisabledIconRight","fixtureLinkSecondaryIconRight","fixtureLinkTertiaryNoIcon","fixtureLinkTextIconRightTargetBlank","fixtureLinkTextNoIconDownload"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,qDAAL,EAA4DA,CAAC,IAAI;AAC/DA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAeC,SAAvB,EAAkC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAChDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,+CAA8CF,GAAI,mEAA3E;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,oEAAL,EAA2EG,wBAA3E,EAAiGN,SAAjG,EAAiHO,8BAAjH;AACA,kBAAK,oEAAL,EAA2ED,wBAA3E,EAAiGN,SAAjG,EAAiHQ,8BAAjH;AACA,kBAAK,kEAAL,EAAyEF,wBAAzE,EAA+FN,SAA/F,EAA+GS,4BAA/G;AACA,kBAAK,4EAAL,EAAmFH,wBAAnF,EAAyGN,SAAzG,EAAyHU,sCAAzH;AACA,kBAAK,qEAAL,EAA4EJ,wBAA5E,EAAkGN,SAAlG,EAAkHW,+BAAlH;AACA,kBAAK,2EAAL,EAAkFL,wBAAlF,EAAwGN,SAAxG,EAAwHY,qCAAxH;AACA,kBAAK,qEAAL,EAA4EN,wBAA5E,EAAkGN,SAAlG,EAAkHa,+BAAlH;AACA,kBAAK,iEAAL,EAAwEP,wBAAxE,EAA8FN,SAA9F,EAA8Gc,2BAA9G;AACA,kBAAK,2EAAL,EAAkFR,wBAAlF,EAAwGN,SAAxG,EAAwHe,qCAAxH;AACA,kBAAK,qEAAL,EAA4ET,wBAA5E,EAAkGN,SAAlG,EAAkHgB,+BAAlH","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport AtomButtonLink from '..';\nimport fixtureButtonDangerousNoIcon from './fixtures/button-dangerous-no-icon';\nimport fixtureButtonPrimaryIconLeft from './fixtures/button-primary-icon-left';\nimport fixtureButtonPrimaryNoIcon from './fixtures/button-primary-no-icon';\nimport fixtureButtonSecondaryNoIconDisabled from './fixtures/button-secondary-no-icon-disabled';\nimport fixtureButtonTertiaryIconLeft from './fixtures/button-tertiary-icon-left';\nimport fixtureLinkPrimaryDisabledIconRight from './fixtures/link-primary-disabled-icon-right';\nimport fixtureLinkSecondaryIconRight from './fixtures/link-secondary-icon-right';\nimport fixtureLinkTertiaryNoIcon from './fixtures/link-tertiary-no-icon';\nimport fixtureLinkTextIconRightTargetBlank from './fixtures/link-text-icon-right-target-blank';\nimport fixtureLinkTextNoIconDownload from './fixtures/link-text-no-icon-download';\n\ntest('Atom › AtomButtonLink > should have valid propTypes', t => {\n t.pass();\n forEach(AtomButtonLink.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Atom.AtomButtonLink.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Atom › AtomButtonLink › ButtonDangerousNoIcon › should be rendered', renderComponentMacro, AtomButtonLink, fixtureButtonDangerousNoIcon);\ntest('Atom › AtomButtonLink › ButtonPrimaryIconLeft › should be rendered', renderComponentMacro, AtomButtonLink, fixtureButtonPrimaryIconLeft);\ntest('Atom › AtomButtonLink › ButtonPrimaryNoIcon › should be rendered', renderComponentMacro, AtomButtonLink, fixtureButtonPrimaryNoIcon);\ntest('Atom › AtomButtonLink › ButtonSecondaryNoIconDisabled › should be rendered', renderComponentMacro, AtomButtonLink, fixtureButtonSecondaryNoIconDisabled);\ntest('Atom › AtomButtonLink › ButtonTertiaryIconLeft › should be rendered', renderComponentMacro, AtomButtonLink, fixtureButtonTertiaryIconLeft);\ntest('Atom › AtomButtonLink › LinkPrimaryDisabledIconRight › should be rendered', renderComponentMacro, AtomButtonLink, fixtureLinkPrimaryDisabledIconRight);\ntest('Atom › AtomButtonLink › LinkSecondaryIconRight › should be rendered', renderComponentMacro, AtomButtonLink, fixtureLinkSecondaryIconRight);\ntest('Atom › AtomButtonLink › LinkTertiaryNoIcon › should be rendered', renderComponentMacro, AtomButtonLink, fixtureLinkTertiaryNoIcon);\ntest('Atom › AtomButtonLink › LinkTextIconRightTargetBlank › should be rendered', renderComponentMacro, AtomButtonLink, fixtureLinkTextIconRightTargetBlank);\ntest('Atom › AtomButtonLink › LinkTextNoIconDownload › should be rendered', renderComponentMacro, AtomButtonLink, fixtureLinkTextNoIconDownload);\n"],"file":"fixtures.js"}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
|
|
6
|
+
var _keys2 = _interopRequireDefault(require("lodash/fp/keys"));
|
|
7
|
+
|
|
8
|
+
var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
|
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
|
|
14
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
|
+
|
|
16
|
+
var _buttonIcons = require("../../util/button-icons");
|
|
17
|
+
|
|
18
|
+
var _link = _interopRequireDefault(require("../link"));
|
|
19
|
+
|
|
20
|
+
var _style = _interopRequireDefault(require("./style.css"));
|
|
21
|
+
|
|
22
|
+
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
|
|
23
|
+
|
|
24
|
+
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
|
+
|
|
26
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
|
+
|
|
28
|
+
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); }
|
|
29
|
+
|
|
30
|
+
const getButtonContent = icon => {
|
|
31
|
+
const Icon = (0, _getOr2.default)(null, icon, _buttonIcons.ICONS);
|
|
32
|
+
|
|
33
|
+
if (!Icon) {
|
|
34
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
35
|
+
className: _style.default.buttonContent
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
40
|
+
className: _style.default.buttonContent
|
|
41
|
+
}, /*#__PURE__*/_react.default.createElement(Icon, {
|
|
42
|
+
className: _style.default.icon
|
|
43
|
+
}));
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
const ButtonLinkIconOnly = props => {
|
|
47
|
+
const {
|
|
48
|
+
size = 'default',
|
|
49
|
+
disabled,
|
|
50
|
+
icon,
|
|
51
|
+
'data-name': dataName,
|
|
52
|
+
'aria-label': ariaLabel,
|
|
53
|
+
link,
|
|
54
|
+
onClick
|
|
55
|
+
} = props;
|
|
56
|
+
const contentView = getButtonContent(icon);
|
|
57
|
+
const styleButton = (0, _classnames.default)(size === 'default' ? _style.default.default : _style.default.small, link && _style.default.link, disabled && _style.default.disabled);
|
|
58
|
+
|
|
59
|
+
if (link) {
|
|
60
|
+
return /*#__PURE__*/_react.default.createElement(_link.default, _extends({}, link, {
|
|
61
|
+
className: styleButton,
|
|
62
|
+
"data-name": dataName,
|
|
63
|
+
"aria-label": ariaLabel,
|
|
64
|
+
title: ariaLabel
|
|
65
|
+
}), contentView);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
const handleOnClick = (0, _react.useMemo)(() => () => onClick(), [onClick]);
|
|
69
|
+
return /*#__PURE__*/_react.default.createElement("button", {
|
|
70
|
+
type: "button",
|
|
71
|
+
"aria-label": ariaLabel,
|
|
72
|
+
"data-name": dataName,
|
|
73
|
+
title: ariaLabel,
|
|
74
|
+
className: styleButton,
|
|
75
|
+
onClick: handleOnClick
|
|
76
|
+
}, contentView);
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
ButtonLinkIconOnly.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
80
|
+
size: _propTypes.default.oneOf(['default', 'small']),
|
|
81
|
+
'aria-label': _propTypes.default.string,
|
|
82
|
+
'data-name': _propTypes.default.string,
|
|
83
|
+
icon: _propTypes.default.oneOf((0, _keys2.default)(_buttonIcons.ICONS)),
|
|
84
|
+
onClick: _propTypes.default.func,
|
|
85
|
+
link: _propTypes.default.shape({
|
|
86
|
+
href: _propTypes.default.string,
|
|
87
|
+
download: _propTypes.default.bool,
|
|
88
|
+
target: _propTypes.default.oneOf(['_self', '_blank', '_parent', '_top'])
|
|
89
|
+
}),
|
|
90
|
+
disabled: _propTypes.default.bool
|
|
91
|
+
} : {};
|
|
92
|
+
var _default = ButtonLinkIconOnly;
|
|
93
|
+
exports.default = _default;
|
|
94
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/button-link-icon-only/index.js"],"names":["getButtonContent","icon","Icon","ICONS","style","buttonContent","ButtonLinkIconOnly","props","size","disabled","dataName","ariaLabel","link","onClick","contentView","styleButton","default","small","handleOnClick","propTypes","PropTypes","oneOf","string","func","shape","href","download","bool","target"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,gBAAgB,GAAGC,IAAI,IAAI;AAC/B,QAAMC,IAAI,GAAG,qBAAM,IAAN,EAAYD,IAAZ,EAAkBE,kBAAlB,CAAb;;AAEA,MAAI,CAACD,IAAL,EAAW;AACT,wBAAO;AAAK,MAAA,SAAS,EAAEE,eAAMC;AAAtB,MAAP;AACD;;AAED,sBACE;AAAK,IAAA,SAAS,EAAED,eAAMC;AAAtB,kBACE,6BAAC,IAAD;AAAM,IAAA,SAAS,EAAED,eAAMH;AAAvB,IADF,CADF;AAKD,CAZD;;AAcA,MAAMK,kBAAkB,GAAGC,KAAK,IAAI;AAClC,QAAM;AACJC,IAAAA,IAAI,GAAG,SADH;AAEJC,IAAAA,QAFI;AAGJR,IAAAA,IAHI;AAIJ,iBAAaS,QAJT;AAKJ,kBAAcC,SALV;AAMJC,IAAAA,IANI;AAOJC,IAAAA;AAPI,MAQFN,KARJ;AASA,QAAMO,WAAW,GAAGd,gBAAgB,CAACC,IAAD,CAApC;AACA,QAAMc,WAAW,GAAG,yBAClBP,IAAI,KAAK,SAAT,GAAqBJ,eAAMY,OAA3B,GAAqCZ,eAAMa,KADzB,EAElBL,IAAI,IAAIR,eAAMQ,IAFI,EAGlBH,QAAQ,IAAIL,eAAMK,QAHA,CAApB;;AAMA,MAAIG,IAAJ,EAAU;AACR,wBACE,6BAAC,aAAD,eACMA,IADN;AAEE,MAAA,SAAS,EAAEG,WAFb;AAGE,mBAAWL,QAHb;AAIE,oBAAYC,SAJd;AAKE,MAAA,KAAK,EAAEA;AALT,QAOGG,WAPH,CADF;AAWD;;AAED,QAAMI,aAAa,GAAG,oBAAQ,MAAM,MAAML,OAAO,EAA3B,EAA+B,CAACA,OAAD,CAA/B,CAAtB;AACA,sBACE;AACE,IAAA,IAAI,EAAC,QADP;AAEE,kBAAYF,SAFd;AAGE,iBAAWD,QAHb;AAIE,IAAA,KAAK,EAAEC,SAJT;AAKE,IAAA,SAAS,EAAEI,WALb;AAME,IAAA,OAAO,EAAEG;AANX,KAQGJ,WARH,CADF;AAYD,CA5CD;;AA8CAR,kBAAkB,CAACa,SAAnB,2CAA+B;AAC7BX,EAAAA,IAAI,EAAEY,mBAAUC,KAAV,CAAgB,CAAC,SAAD,EAAY,OAAZ,CAAhB,CADuB;AAE7B,gBAAcD,mBAAUE,MAFK;AAG7B,eAAaF,mBAAUE,MAHM;AAI7BrB,EAAAA,IAAI,EAAEmB,mBAAUC,KAAV,CAAgB,oBAAKlB,kBAAL,CAAhB,CAJuB;AAK7BU,EAAAA,OAAO,EAAEO,mBAAUG,IALU;AAM7BX,EAAAA,IAAI,EAAEQ,mBAAUI,KAAV,CAAgB;AACpBC,IAAAA,IAAI,EAAEL,mBAAUE,MADI;AAEpBI,IAAAA,QAAQ,EAAEN,mBAAUO,IAFA;AAGpBC,IAAAA,MAAM,EAAER,mBAAUC,KAAV,CAAgB,CAAC,OAAD,EAAU,QAAV,EAAoB,SAApB,EAA+B,MAA/B,CAAhB;AAHY,GAAhB,CANuB;AAW7BZ,EAAAA,QAAQ,EAAEW,mBAAUO;AAXS,CAA/B;eAcerB,kB","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, keys} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {ICONS} from '../../util/button-icons';\nimport Link from '../link';\nimport style from './style.css';\n\nconst getButtonContent = icon => {\n const Icon = getOr(null, icon, ICONS);\n\n if (!Icon) {\n return <div className={style.buttonContent} />;\n }\n\n return (\n <div className={style.buttonContent}>\n <Icon className={style.icon} />\n </div>\n );\n};\n\nconst ButtonLinkIconOnly = props => {\n const {\n size = 'default',\n disabled,\n icon,\n 'data-name': dataName,\n 'aria-label': ariaLabel,\n link,\n onClick\n } = props;\n const contentView = getButtonContent(icon);\n const styleButton = classnames(\n size === 'default' ? style.default : style.small,\n link && style.link,\n disabled && style.disabled\n );\n\n if (link) {\n return (\n <Link\n {...link}\n className={styleButton}\n data-name={dataName}\n aria-label={ariaLabel}\n title={ariaLabel}\n >\n {contentView}\n </Link>\n );\n }\n\n const handleOnClick = useMemo(() => () => onClick(), [onClick]);\n return (\n <button\n type=\"button\"\n aria-label={ariaLabel}\n data-name={dataName}\n title={ariaLabel}\n className={styleButton}\n onClick={handleOnClick}\n >\n {contentView}\n </button>\n );\n};\n\nButtonLinkIconOnly.propTypes = {\n size: PropTypes.oneOf(['default', 'small']),\n 'aria-label': PropTypes.string,\n 'data-name': PropTypes.string,\n icon: PropTypes.oneOf(keys(ICONS)),\n onClick: PropTypes.func,\n link: PropTypes.shape({\n href: PropTypes.string,\n download: PropTypes.bool,\n target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n }),\n disabled: PropTypes.bool\n};\n\nexport default ButtonLinkIconOnly;\n"],"file":"index.js"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
@value colors: "../../variables/colors.css";
|
|
2
|
+
@value cm_grey_100 from colors;
|
|
3
|
+
@value cm_grey_200 from colors;
|
|
4
|
+
|
|
5
|
+
.button {
|
|
6
|
+
font-family: Gilroy;
|
|
7
|
+
font-size: 14px;
|
|
8
|
+
font-weight: bold;
|
|
9
|
+
display: flex;
|
|
10
|
+
justify-content: center;
|
|
11
|
+
align-items: center;
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
border: none;
|
|
14
|
+
background-color: cm_grey_100;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.button:hover {
|
|
18
|
+
background-color: cm_grey_200;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.disabled {
|
|
22
|
+
opacity: 0.3;
|
|
23
|
+
cursor: default;
|
|
24
|
+
pointer-events: none;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.disabled:hover {
|
|
28
|
+
background-color: cm_grey_100;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.buttonContent {
|
|
32
|
+
display: flex;
|
|
33
|
+
justify-content: center;
|
|
34
|
+
align-items: center;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.link {
|
|
38
|
+
color: inherit;
|
|
39
|
+
text-decoration: none;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.default {
|
|
43
|
+
composes: button;
|
|
44
|
+
width: 44px;
|
|
45
|
+
height: 44px;
|
|
46
|
+
border-radius: 7px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.small {
|
|
50
|
+
composes: button;
|
|
51
|
+
width: 32px;
|
|
52
|
+
height: 32px;
|
|
53
|
+
border-radius: 5px;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.default .icon {
|
|
57
|
+
width: 14px;
|
|
58
|
+
height: 14px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.small .icon {
|
|
62
|
+
width: 12px;
|
|
63
|
+
height: 12px;
|
|
64
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _identity2 = _interopRequireDefault(require("lodash/fp/identity"));
|
|
4
|
+
|
|
5
|
+
var _browserEnv = _interopRequireDefault(require("browser-env"));
|
|
6
|
+
|
|
7
|
+
var _ava = _interopRequireDefault(require("ava"));
|
|
8
|
+
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
|
|
11
|
+
var _enzyme = require("enzyme");
|
|
12
|
+
|
|
13
|
+
var _enzymeAdapterReact = _interopRequireDefault(require("enzyme-adapter-react-16"));
|
|
14
|
+
|
|
15
|
+
var _ = _interopRequireDefault(require(".."));
|
|
16
|
+
|
|
17
|
+
var _buttonIconBullet = _interopRequireDefault(require("./fixtures/button-icon-bullet"));
|
|
18
|
+
|
|
19
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
20
|
+
|
|
21
|
+
(0, _browserEnv.default)();
|
|
22
|
+
(0, _enzyme.configure)({
|
|
23
|
+
adapter: new _enzymeAdapterReact.default()
|
|
24
|
+
});
|
|
25
|
+
const translate = _identity2.default;
|
|
26
|
+
(0, _ava.default)('should launch onClick on click event for ButtonLinkIconOnly', t => {
|
|
27
|
+
const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_.default, _buttonIconBullet.default.props), {
|
|
28
|
+
context: {
|
|
29
|
+
translate
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
const button = wrapper.find('[data-name="bullet-button"]');
|
|
33
|
+
t.true(button.exists());
|
|
34
|
+
button.first().simulate('click', {});
|
|
35
|
+
t.pass();
|
|
36
|
+
});
|
|
37
|
+
//# sourceMappingURL=button-link-icon-only.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/atom/button-link-icon-only/test/button-link-icon-only.js"],"names":["adapter","Adapter","translate","t","wrapper","defaultFixture","props","context","button","find","true","exists","first","simulate","pass"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;AAEA;AACA,uBAAU;AAACA,EAAAA,OAAO,EAAE,IAAIC,2BAAJ;AAAV,CAAV;AACA,MAAMC,SAAS,qBAAf;AAEA,kBAAK,6DAAL,EAAoEC,CAAC,IAAI;AACvE,QAAMC,OAAO,GAAG,mCAAQ,6BAAC,SAAD,EAAwBC,0BAAeC,KAAvC,CAAR,EAA0D;AACxEC,IAAAA,OAAO,EAAE;AAACL,MAAAA;AAAD;AAD+D,GAA1D,CAAhB;AAGA,QAAMM,MAAM,GAAGJ,OAAO,CAACK,IAAR,CAAa,6BAAb,CAAf;AACAN,EAAAA,CAAC,CAACO,IAAF,CAAOF,MAAM,CAACG,MAAP,EAAP;AACAH,EAAAA,MAAM,CAACI,KAAP,GAAeC,QAAf,CAAwB,OAAxB,EAAiC,EAAjC;AACAV,EAAAA,CAAC,CAACW,IAAF;AACD,CARD","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {shallow, configure} from 'enzyme';\nimport {identity} from 'lodash/fp';\nimport Adapter from 'enzyme-adapter-react-16';\nimport ButtonLinkIconOnly from '..';\nimport defaultFixture from './fixtures/button-icon-bullet';\n\nbrowserEnv();\nconfigure({adapter: new Adapter()});\nconst translate = identity;\n\ntest('should launch onClick on click event for ButtonLinkIconOnly', t => {\n const wrapper = shallow(<ButtonLinkIconOnly {...defaultFixture.props} />, {\n context: {translate}\n });\n const button = wrapper.find('[data-name=\"bullet-button\"]');\n t.true(button.exists());\n button.first().simulate('click', {});\n t.pass();\n});\n"],"file":"button-link-icon-only.js"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
var _default = {
|
|
6
|
+
props: {
|
|
7
|
+
size: 'default',
|
|
8
|
+
'aria-label': 'aria button',
|
|
9
|
+
'data-name': 'bullet-button',
|
|
10
|
+
icon: 'bullet-point',
|
|
11
|
+
onClick: () => console.log('click')
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
exports.default = _default;
|
|
15
|
+
//# sourceMappingURL=button-icon-bullet.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/atom/button-link-icon-only/test/fixtures/button-icon-bullet.js"],"names":["props","size","icon","onClick","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,SADD;AAEL,kBAAc,aAFT;AAGL,iBAAa,eAHR;AAILC,IAAAA,IAAI,EAAE,cAJD;AAKLC,IAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AALV;AADM,C","sourcesContent":["export default {\n props: {\n size: 'default',\n 'aria-label': 'aria button',\n 'data-name': 'bullet-button',\n icon: 'bullet-point',\n onClick: () => console.log('click')\n }\n};\n"],"file":"button-icon-bullet.js"}
|
|
@@ -4,15 +4,12 @@ exports.__esModule = true;
|
|
|
4
4
|
exports.default = void 0;
|
|
5
5
|
var _default = {
|
|
6
6
|
props: {
|
|
7
|
-
|
|
7
|
+
size: 'default',
|
|
8
8
|
'data-name': 'default-button',
|
|
9
9
|
'aria-label': 'aria button',
|
|
10
|
-
icon:
|
|
11
|
-
position: 'center',
|
|
12
|
-
type: 'close'
|
|
13
|
-
},
|
|
10
|
+
icon: 'close',
|
|
14
11
|
onClick: () => console.log('click')
|
|
15
12
|
}
|
|
16
13
|
};
|
|
17
14
|
exports.default = _default;
|
|
18
|
-
//# sourceMappingURL=
|
|
15
|
+
//# sourceMappingURL=default.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/atom/button-link-icon-only/test/fixtures/default.js"],"names":["props","size","icon","onClick","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,SADD;AAEL,iBAAa,gBAFR;AAGL,kBAAc,aAHT;AAILC,IAAAA,IAAI,EAAE,OAJD;AAKLC,IAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AALV;AADM,C","sourcesContent":["export default {\n props: {\n size: 'default',\n 'data-name': 'default-button',\n 'aria-label': 'aria button',\n icon: 'close',\n onClick: () => console.log('click')\n }\n};\n"],"file":"default.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/atom/button-link-icon-only/test/fixtures/no-icon.js"],"names":["props","onClick","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACL,iBAAa,gBADR;AAELC,IAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AAFV;AADM,C","sourcesContent":["export default {\n props: {\n 'data-name': 'default-button',\n onClick: () => console.log('click')\n }\n};\n"],"file":"no-icon.js"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
var _default = {
|
|
6
|
+
props: {
|
|
7
|
+
size: 'small',
|
|
8
|
+
'data-name': 'default-button',
|
|
9
|
+
'aria-label': 'aria button',
|
|
10
|
+
icon: 'close',
|
|
11
|
+
disabled: true,
|
|
12
|
+
onClick: () => console.log('click')
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
exports.default = _default;
|
|
16
|
+
//# sourceMappingURL=small-button-disabled.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/atom/button-link-icon-only/test/fixtures/small-button-disabled.js"],"names":["props","size","icon","disabled","onClick","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,OADD;AAEL,iBAAa,gBAFR;AAGL,kBAAc,aAHT;AAILC,IAAAA,IAAI,EAAE,OAJD;AAKLC,IAAAA,QAAQ,EAAE,IALL;AAMLC,IAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AANV;AADM,C","sourcesContent":["export default {\n props: {\n size: 'small',\n 'data-name': 'default-button',\n 'aria-label': 'aria button',\n icon: 'close',\n disabled: true,\n onClick: () => console.log('click')\n }\n};\n"],"file":"small-button-disabled.js"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
var _default = {
|
|
6
|
+
props: {
|
|
7
|
+
size: 'small',
|
|
8
|
+
icon: 'see',
|
|
9
|
+
'data-name': 'default-button',
|
|
10
|
+
'aria-label': 'aria button',
|
|
11
|
+
link: {
|
|
12
|
+
href: 'https://setup.coorpacademy.com/assets/templates/import-users-template.xlsx',
|
|
13
|
+
download: true
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
exports.default = _default;
|
|
18
|
+
//# sourceMappingURL=small-link-download.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/atom/button-link-icon-only/test/fixtures/small-link-download.js"],"names":["props","size","icon","link","href","download"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,OADD;AAELC,IAAAA,IAAI,EAAE,KAFD;AAGL,iBAAa,gBAHR;AAIL,kBAAc,aAJT;AAKLC,IAAAA,IAAI,EAAE;AACJC,MAAAA,IAAI,EAAE,4EADF;AAEJC,MAAAA,QAAQ,EAAE;AAFN;AALD;AADM,C","sourcesContent":["export default {\n props: {\n size: 'small',\n icon: 'see',\n 'data-name': 'default-button',\n 'aria-label': 'aria button',\n link: {\n href: 'https://setup.coorpacademy.com/assets/templates/import-users-template.xlsx',\n download: true\n }\n }\n};\n"],"file":"small-link-download.js"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _ava = _interopRequireDefault(require("ava"));
|
|
4
|
+
|
|
5
|
+
var _forEach = _interopRequireDefault(require("lodash/forEach"));
|
|
6
|
+
|
|
7
|
+
var _renderComponent = _interopRequireDefault(require("../../../test/helpers/render-component"));
|
|
8
|
+
|
|
9
|
+
var _ = _interopRequireDefault(require(".."));
|
|
10
|
+
|
|
11
|
+
var _buttonIconBullet = _interopRequireDefault(require("./fixtures/button-icon-bullet"));
|
|
12
|
+
|
|
13
|
+
var _default = _interopRequireDefault(require("./fixtures/default"));
|
|
14
|
+
|
|
15
|
+
var _noIcon = _interopRequireDefault(require("./fixtures/no-icon"));
|
|
16
|
+
|
|
17
|
+
var _smallButtonDisabled = _interopRequireDefault(require("./fixtures/small-button-disabled"));
|
|
18
|
+
|
|
19
|
+
var _smallLinkDownload = _interopRequireDefault(require("./fixtures/small-link-download"));
|
|
20
|
+
|
|
21
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
22
|
+
|
|
23
|
+
(0, _ava.default)('Atom › AtomButtonLinkIconOnly > should have valid propTypes', t => {
|
|
24
|
+
t.pass();
|
|
25
|
+
(0, _forEach.default)(_.default.propTypes, (value, key) => {
|
|
26
|
+
t.not(value, undefined, `PropType for "Atom.AtomButtonLinkIconOnly.propTypes.${key}" may not be undefined. Did you mistype the propTypes definition?`);
|
|
27
|
+
});
|
|
28
|
+
});
|
|
29
|
+
(0, _ava.default)('Atom › AtomButtonLinkIconOnly › ButtonIconBullet › should be rendered', _renderComponent.default, _.default, _buttonIconBullet.default);
|
|
30
|
+
(0, _ava.default)('Atom › AtomButtonLinkIconOnly › Default › should be rendered', _renderComponent.default, _.default, _default.default);
|
|
31
|
+
(0, _ava.default)('Atom › AtomButtonLinkIconOnly › NoIcon › should be rendered', _renderComponent.default, _.default, _noIcon.default);
|
|
32
|
+
(0, _ava.default)('Atom › AtomButtonLinkIconOnly › SmallButtonDisabled › should be rendered', _renderComponent.default, _.default, _smallButtonDisabled.default);
|
|
33
|
+
(0, _ava.default)('Atom › AtomButtonLinkIconOnly › SmallLinkDownload › should be rendered', _renderComponent.default, _.default, _smallLinkDownload.default);
|
|
34
|
+
//# sourceMappingURL=fixtures.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/atom/button-link-icon-only/test/fixtures.js"],"names":["t","pass","AtomButtonLinkIconOnly","propTypes","value","key","not","undefined","renderComponentMacro","fixtureButtonIconBullet","fixtureDefault","fixtureNoIcon","fixtureSmallButtonDisabled","fixtureSmallLinkDownload"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,6DAAL,EAAoEA,CAAC,IAAI;AACvEA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAuBC,SAA/B,EAA0C,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACxDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,uDAAsDF,GAAI,mEAAnF;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,uEAAL,EAA8EG,wBAA9E,EAAoGN,SAApG,EAA4HO,yBAA5H;AACA,kBAAK,8DAAL,EAAqED,wBAArE,EAA2FN,SAA3F,EAAmHQ,gBAAnH;AACA,kBAAK,6DAAL,EAAoEF,wBAApE,EAA0FN,SAA1F,EAAkHS,eAAlH;AACA,kBAAK,0EAAL,EAAiFH,wBAAjF,EAAuGN,SAAvG,EAA+HU,4BAA/H;AACA,kBAAK,wEAAL,EAA+EJ,wBAA/E,EAAqGN,SAArG,EAA6HW,0BAA7H","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport AtomButtonLinkIconOnly from '..';\nimport fixtureButtonIconBullet from './fixtures/button-icon-bullet';\nimport fixtureDefault from './fixtures/default';\nimport fixtureNoIcon from './fixtures/no-icon';\nimport fixtureSmallButtonDisabled from './fixtures/small-button-disabled';\nimport fixtureSmallLinkDownload from './fixtures/small-link-download';\n\ntest('Atom › AtomButtonLinkIconOnly > should have valid propTypes', t => {\n t.pass();\n forEach(AtomButtonLinkIconOnly.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Atom.AtomButtonLinkIconOnly.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Atom › AtomButtonLinkIconOnly › ButtonIconBullet › should be rendered', renderComponentMacro, AtomButtonLinkIconOnly, fixtureButtonIconBullet);\ntest('Atom › AtomButtonLinkIconOnly › Default › should be rendered', renderComponentMacro, AtomButtonLinkIconOnly, fixtureDefault);\ntest('Atom › AtomButtonLinkIconOnly › NoIcon › should be rendered', renderComponentMacro, AtomButtonLinkIconOnly, fixtureNoIcon);\ntest('Atom › AtomButtonLinkIconOnly › SmallButtonDisabled › should be rendered', renderComponentMacro, AtomButtonLinkIconOnly, fixtureSmallButtonDisabled);\ntest('Atom › AtomButtonLinkIconOnly › SmallLinkDownload › should be rendered', renderComponentMacro, AtomButtonLinkIconOnly, fixtureSmallLinkDownload);\n"],"file":"fixtures.js"}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
|
|
6
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
7
|
+
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
|
|
10
|
+
var _map = _interopRequireDefault(require("lodash/fp/map"));
|
|
11
|
+
|
|
12
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
|
+
|
|
14
|
+
var _style = _interopRequireDefault(require("./style.css"));
|
|
15
|
+
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
|
|
18
|
+
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
|
|
19
|
+
|
|
20
|
+
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
|
+
|
|
22
|
+
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); }
|
|
23
|
+
|
|
24
|
+
const Button = props => {
|
|
25
|
+
const {
|
|
26
|
+
'data-name': dataName,
|
|
27
|
+
disabled,
|
|
28
|
+
label,
|
|
29
|
+
onClick,
|
|
30
|
+
type = 'default'
|
|
31
|
+
} = props;
|
|
32
|
+
const styleButton = (0, _classnames.default)(_style.default.button, type === 'default' && _style.default.default, type === 'dangerous' && _style.default.dangerous, disabled && _style.default.disabled);
|
|
33
|
+
const handleOnClick = (0, _react.useCallback)(() => onClick(), [onClick]);
|
|
34
|
+
return /*#__PURE__*/_react.default.createElement("button", {
|
|
35
|
+
type: "button",
|
|
36
|
+
"aria-label": label,
|
|
37
|
+
title: label,
|
|
38
|
+
"data-name": dataName,
|
|
39
|
+
className: styleButton,
|
|
40
|
+
onClick: handleOnClick
|
|
41
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
42
|
+
className: _style.default.buttonContent
|
|
43
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
44
|
+
className: _style.default.label
|
|
45
|
+
}, label)));
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
Button.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
49
|
+
'data-name': _propTypes.default.string,
|
|
50
|
+
disabled: _propTypes.default.bool,
|
|
51
|
+
label: _propTypes.default.string.isRequired,
|
|
52
|
+
onClick: _propTypes.default.func.isRequired,
|
|
53
|
+
type: _propTypes.default.oneOf(['default', 'dangerous'])
|
|
54
|
+
} : {};
|
|
55
|
+
|
|
56
|
+
const ButtonMenu = props => {
|
|
57
|
+
const {
|
|
58
|
+
buttons,
|
|
59
|
+
'data-name': dataName
|
|
60
|
+
} = props;
|
|
61
|
+
|
|
62
|
+
const buildButton = (button, index) => {
|
|
63
|
+
return /*#__PURE__*/_react.default.createElement(Button, _extends({}, button, {
|
|
64
|
+
key: button.label + index
|
|
65
|
+
}));
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
const buttonList = (0, _react.useMemo)(() => _map.default.convert({
|
|
69
|
+
cap: false
|
|
70
|
+
})(buildButton, buttons), [buttons, buildButton]);
|
|
71
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
72
|
+
"data-name": dataName
|
|
73
|
+
}, buttonList);
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
ButtonMenu.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
77
|
+
buttons: _propTypes.default.arrayOf(_propTypes.default.shape(Button.propTypes)).isRequired,
|
|
78
|
+
'data-name': _propTypes.default.string
|
|
79
|
+
} : {};
|
|
80
|
+
var _default = ButtonMenu;
|
|
81
|
+
exports.default = _default;
|
|
82
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/button-menu/index.js"],"names":["Button","props","dataName","disabled","label","onClick","type","styleButton","style","button","default","dangerous","handleOnClick","buttonContent","propTypes","PropTypes","string","bool","isRequired","func","oneOf","ButtonMenu","buttons","buildButton","index","buttonList","map","convert","cap","arrayOf","shape"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,MAAM,GAAGC,KAAK,IAAI;AACtB,QAAM;AAAC,iBAAaC,QAAd;AAAwBC,IAAAA,QAAxB;AAAkCC,IAAAA,KAAlC;AAAyCC,IAAAA,OAAzC;AAAkDC,IAAAA,IAAI,GAAG;AAAzD,MAAsEL,KAA5E;AACA,QAAMM,WAAW,GAAG,yBAClBC,eAAMC,MADY,EAElBH,IAAI,KAAK,SAAT,IAAsBE,eAAME,OAFV,EAGlBJ,IAAI,KAAK,WAAT,IAAwBE,eAAMG,SAHZ,EAIlBR,QAAQ,IAAIK,eAAML,QAJA,CAApB;AAOA,QAAMS,aAAa,GAAG,wBAAY,MAAMP,OAAO,EAAzB,EAA6B,CAACA,OAAD,CAA7B,CAAtB;AACA,sBACE;AACE,IAAA,IAAI,EAAC,QADP;AAEE,kBAAYD,KAFd;AAGE,IAAA,KAAK,EAAEA,KAHT;AAIE,iBAAWF,QAJb;AAKE,IAAA,SAAS,EAAEK,WALb;AAME,IAAA,OAAO,EAAEK;AANX,kBAQE;AAAK,IAAA,SAAS,EAAEJ,eAAMK;AAAtB,kBACE;AAAM,IAAA,SAAS,EAAEL,eAAMJ;AAAvB,KAA+BA,KAA/B,CADF,CARF,CADF;AAcD,CAxBD;;AA0BAJ,MAAM,CAACc,SAAP,2CAAmB;AACjB,eAAaC,mBAAUC,MADN;AAEjBb,EAAAA,QAAQ,EAAEY,mBAAUE,IAFH;AAGjBb,EAAAA,KAAK,EAAEW,mBAAUC,MAAV,CAAiBE,UAHP;AAIjBb,EAAAA,OAAO,EAAEU,mBAAUI,IAAV,CAAeD,UAJP;AAKjBZ,EAAAA,IAAI,EAAES,mBAAUK,KAAV,CAAgB,CAAC,SAAD,EAAY,WAAZ,CAAhB;AALW,CAAnB;;AAQA,MAAMC,UAAU,GAAGpB,KAAK,IAAI;AAC1B,QAAM;AAACqB,IAAAA,OAAD;AAAU,iBAAapB;AAAvB,MAAmCD,KAAzC;;AACA,QAAMsB,WAAW,GAAG,CAACd,MAAD,EAASe,KAAT,KAAmB;AACrC,wBAAO,6BAAC,MAAD,eAAYf,MAAZ;AAAoB,MAAA,GAAG,EAAEA,MAAM,CAACL,KAAP,GAAeoB;AAAxC,OAAP;AACD,GAFD;;AAGA,QAAMC,UAAU,GAAG,oBAAQ,MAAMC,aAAIC,OAAJ,CAAY;AAACC,IAAAA,GAAG,EAAE;AAAN,GAAZ,EAA0BL,WAA1B,EAAuCD,OAAvC,CAAd,EAA+D,CAChFA,OADgF,EAEhFC,WAFgF,CAA/D,CAAnB;AAIA,sBAAO;AAAK,iBAAWrB;AAAhB,KAA2BuB,UAA3B,CAAP;AACD,CAVD;;AAYAJ,UAAU,CAACP,SAAX,2CAAuB;AACrBQ,EAAAA,OAAO,EAAEP,mBAAUc,OAAV,CAAkBd,mBAAUe,KAAV,CAAgB9B,MAAM,CAACc,SAAvB,CAAlB,EAAqDI,UADzC;AAErB,eAAaH,mBAAUC;AAFF,CAAvB;eAKeK,U","sourcesContent":["import React, {useMemo, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport map from 'lodash/fp/map';\nimport classnames from 'classnames';\nimport style from './style.css';\n\nconst Button = props => {\n const {'data-name': dataName, disabled, label, onClick, type = 'default'} = props;\n const styleButton = classnames(\n style.button,\n type === 'default' && style.default,\n type === 'dangerous' && style.dangerous,\n disabled && style.disabled\n );\n\n const handleOnClick = useCallback(() => onClick(), [onClick]);\n return (\n <button\n type=\"button\"\n aria-label={label}\n title={label}\n data-name={dataName}\n className={styleButton}\n onClick={handleOnClick}\n >\n <div className={style.buttonContent}>\n <span className={style.label}>{label}</span>\n </div>\n </button>\n );\n};\n\nButton.propTypes = {\n 'data-name': PropTypes.string,\n disabled: PropTypes.bool,\n label: PropTypes.string.isRequired,\n onClick: PropTypes.func.isRequired,\n type: PropTypes.oneOf(['default', 'dangerous'])\n};\n\nconst ButtonMenu = props => {\n const {buttons, 'data-name': dataName} = props;\n const buildButton = (button, index) => {\n return <Button {...button} key={button.label + index} />;\n };\n const buttonList = useMemo(() => map.convert({cap: false})(buildButton, buttons), [\n buttons,\n buildButton\n ]);\n return <div data-name={dataName}>{buttonList}</div>;\n};\n\nButtonMenu.propTypes = {\n buttons: PropTypes.arrayOf(PropTypes.shape(Button.propTypes)).isRequired,\n 'data-name': PropTypes.string\n};\n\nexport default ButtonMenu;\n"],"file":"index.js"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
@value colors: "../../variables/colors.css";
|
|
2
|
+
@value cm_grey_100 from colors;
|
|
3
|
+
@value cm_grey_200 from colors;
|
|
4
|
+
@value cm_grey_900 from colors;
|
|
5
|
+
@value cm_negative_100 from colors;
|
|
6
|
+
|
|
7
|
+
.button {
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 40px;
|
|
10
|
+
font-family: Gilroy;
|
|
11
|
+
font-size: 14px;
|
|
12
|
+
display: flex;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
align-items: center;
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
border: none;
|
|
17
|
+
pointer-events: auto;
|
|
18
|
+
/* prevents text selection when dragging
|
|
19
|
+
the mouse over the button */
|
|
20
|
+
user-select: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.disabled {
|
|
24
|
+
opacity: 0.1;
|
|
25
|
+
pointer-events: none;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.buttonContent {
|
|
29
|
+
display: flex;
|
|
30
|
+
justify-content: center;
|
|
31
|
+
align-items: center;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.label {
|
|
35
|
+
margin: 0 8px 0 8px;
|
|
36
|
+
display: block;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.default {
|
|
40
|
+
background-color: cm_grey_100;
|
|
41
|
+
color: cm_grey_900;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.default:hover {
|
|
45
|
+
background-color: cm_grey_200;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.dangerous {
|
|
49
|
+
composes: default;
|
|
50
|
+
color: cm_negative_100;
|
|
51
|
+
}
|