colibri-ui 0.7.67 → 0.7.68
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/Chip/Chip.module.css +78 -0
- package/Chip/index.d.ts +14 -0
- package/Chip/index.js +47 -0
- package/Chip/package.json +6 -0
- package/Icons/index.d.ts +0 -1
- package/Icons/index.js +0 -2
- package/Menu/components/MenuItem/MenuItem.module.css +16 -18
- package/Menu/components/MenuItem/index.js +4 -4
- package/Menu/index.js +3 -2
- package/Modal/index.js +7 -7
- package/Theme/global.css +6 -0
- package/esm/Chip/Chip.module.css +78 -0
- package/esm/Chip/index.d.ts +14 -0
- package/esm/Chip/index.js +37 -0
- package/esm/Icons/index.d.ts +0 -1
- package/esm/Icons/index.js +0 -1
- package/esm/Menu/components/MenuItem/MenuItem.module.css +16 -18
- package/esm/Menu/components/MenuItem/index.js +4 -4
- package/esm/Menu/index.js +3 -2
- package/esm/Modal/index.js +7 -7
- package/esm/Theme/global.css +6 -0
- package/esm/index.d.ts +1 -0
- package/esm/index.js +1 -1
- package/index.d.ts +1 -0
- package/index.js +49 -49
- package/package.json +1 -1
- package/Icons/Document.d.ts +0 -4
- package/Icons/Document.js +0 -35
- package/esm/Icons/Document.d.ts +0 -4
- package/esm/Icons/Document.js +0 -27
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
.root {
|
|
2
|
+
cursor: pointer;
|
|
3
|
+
display: inline-block;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.inner {
|
|
7
|
+
place-items: stretch flex-start;
|
|
8
|
+
box-sizing: border-box;
|
|
9
|
+
display: flex;
|
|
10
|
+
font-family: Roboto, Arial, sans-serif;
|
|
11
|
+
-webkit-font-smoothing: antialiased;
|
|
12
|
+
-moz-osx-font-smoothing: grayscale;
|
|
13
|
+
min-width: 0;
|
|
14
|
+
transition-duration: 0.3s;
|
|
15
|
+
transition-property: background, box-shadow, transform;
|
|
16
|
+
transition-timing-function: ease;
|
|
17
|
+
}
|
|
18
|
+
.inner_active {
|
|
19
|
+
background: rgb(237, 237, 237);
|
|
20
|
+
}
|
|
21
|
+
.inner_inactive {
|
|
22
|
+
background: var(--palette-white);
|
|
23
|
+
box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
|
|
24
|
+
}
|
|
25
|
+
.inner_inactive:hover {
|
|
26
|
+
box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
|
|
27
|
+
transform: translateY(-2px);
|
|
28
|
+
}
|
|
29
|
+
.inner_inactive:active {
|
|
30
|
+
background: rgba(0, 0, 0, 0.02);
|
|
31
|
+
box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
|
|
32
|
+
outline: 0;
|
|
33
|
+
transition-duration: 0.15s;
|
|
34
|
+
}
|
|
35
|
+
@media (hover: none) {
|
|
36
|
+
.inner_inactive:hover {
|
|
37
|
+
box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
|
|
38
|
+
transform: translateY(0);
|
|
39
|
+
}
|
|
40
|
+
.inner_inactive:active {
|
|
41
|
+
box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
.inner[data-size=s] {
|
|
45
|
+
border-radius: 32px;
|
|
46
|
+
height: 32px;
|
|
47
|
+
}
|
|
48
|
+
.inner[data-size=m] {
|
|
49
|
+
border-radius: 36px;
|
|
50
|
+
height: 36px;
|
|
51
|
+
}
|
|
52
|
+
.inner[data-size=l] {
|
|
53
|
+
border-radius: 44px;
|
|
54
|
+
height: 44px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.content {
|
|
58
|
+
align-items: center;
|
|
59
|
+
display: flex;
|
|
60
|
+
justify-content: flex-start;
|
|
61
|
+
max-width: 200px;
|
|
62
|
+
padding: 0 20px;
|
|
63
|
+
user-select: none;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.content-inner {
|
|
67
|
+
display: block;
|
|
68
|
+
overflow: hidden;
|
|
69
|
+
text-overflow: ellipsis;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.icon-right {
|
|
73
|
+
align-items: center;
|
|
74
|
+
display: flex;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
margin-left: -11px;
|
|
77
|
+
padding-right: 18px;
|
|
78
|
+
}
|
package/Chip/index.d.ts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { FC, ReactNode } from "react";
|
|
3
|
+
type Size = "s" | "m" | "l";
|
|
4
|
+
type Props = {
|
|
5
|
+
size?: Size;
|
|
6
|
+
testID?: string;
|
|
7
|
+
isActive?: boolean;
|
|
8
|
+
iconOnRight?: React.ReactNode;
|
|
9
|
+
onClick?: () => void;
|
|
10
|
+
onIconOnRightClick?: () => void;
|
|
11
|
+
children?: ReactNode;
|
|
12
|
+
};
|
|
13
|
+
declare const Chip: FC<Props>;
|
|
14
|
+
export default Chip;
|
package/Chip/index.js
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var classNames = require('classnames/bind');
|
|
7
|
+
var styles = require('./Chip.module.css');
|
|
8
|
+
|
|
9
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
|
|
11
|
+
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
12
|
+
var classNames__default = /*#__PURE__*/_interopDefault(classNames);
|
|
13
|
+
var styles__default = /*#__PURE__*/_interopDefault(styles);
|
|
14
|
+
|
|
15
|
+
var clx = classNames__default.default.bind(styles__default.default);
|
|
16
|
+
var Chip = function Chip(props) {
|
|
17
|
+
var children = props.children,
|
|
18
|
+
iconOnRight = props.iconOnRight,
|
|
19
|
+
isActive = props.isActive,
|
|
20
|
+
onClick = props.onClick,
|
|
21
|
+
onIconOnRightClick = props.onIconOnRightClick,
|
|
22
|
+
_a = props.size,
|
|
23
|
+
size = _a === void 0 ? "m" : _a,
|
|
24
|
+
_b = props.testID,
|
|
25
|
+
testID = _b === void 0 ? "chip" : _b;
|
|
26
|
+
return /*#__PURE__*/React__default.default.createElement("span", {
|
|
27
|
+
className: clx("root"),
|
|
28
|
+
"data-component": "Chip",
|
|
29
|
+
"data-testid": testID
|
|
30
|
+
}, /*#__PURE__*/React__default.default.createElement("span", {
|
|
31
|
+
className: clx("inner", {
|
|
32
|
+
inner_active: isActive,
|
|
33
|
+
inner_inactive: !isActive
|
|
34
|
+
}),
|
|
35
|
+
"data-size": size
|
|
36
|
+
}, /*#__PURE__*/React__default.default.createElement("span", {
|
|
37
|
+
className: clx("content"),
|
|
38
|
+
onClick: onClick
|
|
39
|
+
}, /*#__PURE__*/React__default.default.createElement("span", {
|
|
40
|
+
className: clx("content-inner")
|
|
41
|
+
}, children)), iconOnRight && ( /*#__PURE__*/React__default.default.createElement("span", {
|
|
42
|
+
className: clx("icon-right"),
|
|
43
|
+
onClick: onIconOnRightClick || onClick
|
|
44
|
+
}, iconOnRight))));
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
exports.default = Chip;
|
package/Icons/index.d.ts
CHANGED
|
@@ -2,7 +2,6 @@ export { default as ArrowNext } from "./ArrowNext";
|
|
|
2
2
|
export { default as Cart } from "./Cart";
|
|
3
3
|
export { default as Chevron } from "./Chevron";
|
|
4
4
|
export { default as Close } from "./Close";
|
|
5
|
-
export { default as Docunebt } from "./Document";
|
|
6
5
|
export { default as Exit } from "./Exit";
|
|
7
6
|
export { default as EyeOpen } from "./EyeOpen";
|
|
8
7
|
export { default as EyeClosed } from "./EyeClosed";
|
package/Icons/index.js
CHANGED
|
@@ -4,7 +4,6 @@ var ArrowNext = require('./ArrowNext.js');
|
|
|
4
4
|
var Cart = require('./Cart.js');
|
|
5
5
|
var Chevron = require('./Chevron.js');
|
|
6
6
|
var Close = require('./Close.js');
|
|
7
|
-
var Document = require('./Document.js');
|
|
8
7
|
var Exit = require('./Exit.js');
|
|
9
8
|
var EyeOpen = require('./EyeOpen.js');
|
|
10
9
|
var EyeClosed = require('./EyeClosed.js');
|
|
@@ -23,7 +22,6 @@ exports.ArrowNext = ArrowNext.default;
|
|
|
23
22
|
exports.Cart = Cart.default;
|
|
24
23
|
exports.Chevron = Chevron.default;
|
|
25
24
|
exports.Close = Close.default;
|
|
26
|
-
exports.Docunebt = Document.default;
|
|
27
25
|
exports.Exit = Exit.default;
|
|
28
26
|
exports.EyeOpen = EyeOpen.default;
|
|
29
27
|
exports.EyeClosed = EyeClosed.default;
|
|
@@ -10,28 +10,26 @@
|
|
|
10
10
|
list-style: none;
|
|
11
11
|
padding: 8px 6px;
|
|
12
12
|
}
|
|
13
|
-
.
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
.item_disabled {
|
|
14
|
+
background-color: var(--palette-white);
|
|
15
|
+
color: var(--palette-bg-2);
|
|
16
|
+
cursor: not-allowed;
|
|
17
|
+
pointer-events: none;
|
|
17
18
|
}
|
|
18
|
-
|
|
19
|
-
.variant_primary {
|
|
19
|
+
.item_variant_primary {
|
|
20
20
|
background-color: var(--palette-white);
|
|
21
21
|
}
|
|
22
|
-
.
|
|
23
|
-
background-color: var(--palette-primary-
|
|
22
|
+
.item_variant_primary:hover {
|
|
23
|
+
background-color: var(--palette-primary-1);
|
|
24
24
|
}
|
|
25
|
-
.
|
|
26
|
-
background-color: var(--palette-primary-
|
|
25
|
+
.item_variant_primary:active {
|
|
26
|
+
background-color: var(--palette-primary-1);
|
|
27
27
|
}
|
|
28
|
-
.
|
|
29
|
-
background-color: var(--palette-primary-
|
|
28
|
+
.item_variant_primary:focus, .item_variant_primary:focus-within {
|
|
29
|
+
background-color: var(--palette-primary-1);
|
|
30
30
|
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
cursor: not-allowed;
|
|
36
|
-
pointer-events: none;
|
|
31
|
+
.item > * {
|
|
32
|
+
overflow: hidden;
|
|
33
|
+
text-overflow: ellipsis;
|
|
34
|
+
white-space: nowrap;
|
|
37
35
|
}
|
|
@@ -26,11 +26,11 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
26
26
|
ref: ref,
|
|
27
27
|
"data-component": "menu-item",
|
|
28
28
|
style: {
|
|
29
|
-
backgroundColor: isSelected ? "var(--palette-primary-1)" : "
|
|
29
|
+
backgroundColor: isSelected ? "var(--palette-primary-1)" : ""
|
|
30
30
|
},
|
|
31
|
-
className: clx(
|
|
32
|
-
|
|
33
|
-
}, _b["
|
|
31
|
+
className: clx("item", (_b = {
|
|
32
|
+
item_disabled: !!disabled
|
|
33
|
+
}, _b["item_variant_".concat(variant)] = !!variant, _b), className),
|
|
34
34
|
onClick: onClick
|
|
35
35
|
}, children);
|
|
36
36
|
});
|
package/Menu/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var classNames = require('classnames');
|
|
6
|
+
var classNames = require('classnames/bind');
|
|
7
7
|
var styles = require('./Menu.module.css');
|
|
8
8
|
|
|
9
9
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -12,6 +12,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
|
|
|
12
12
|
var classNames__default = /*#__PURE__*/_interopDefault(classNames);
|
|
13
13
|
var styles__default = /*#__PURE__*/_interopDefault(styles);
|
|
14
14
|
|
|
15
|
+
var clx = classNames__default.default.bind(styles__default.default);
|
|
15
16
|
var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
16
17
|
var selected = _a.selected,
|
|
17
18
|
variant = _a.variant,
|
|
@@ -37,7 +38,7 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
37
38
|
}, [children, selected, onClick]);
|
|
38
39
|
return /*#__PURE__*/React__default.default.createElement("ul", {
|
|
39
40
|
ref: ref,
|
|
40
|
-
className:
|
|
41
|
+
className: clx("menu", className)
|
|
41
42
|
}, renderChild);
|
|
42
43
|
});
|
|
43
44
|
|
package/Modal/index.js
CHANGED
|
@@ -47,22 +47,22 @@ var Modal = function Modal(_a) {
|
|
|
47
47
|
};
|
|
48
48
|
}, [onCloseHandler]);
|
|
49
49
|
return /*#__PURE__*/React__default.default.createElement(index$3.default, null, /*#__PURE__*/React__default.default.createElement("div", {
|
|
50
|
-
className: clx(
|
|
50
|
+
className: clx("root")
|
|
51
51
|
}, /*#__PURE__*/React__default.default.createElement("div", {
|
|
52
|
-
className: clx(
|
|
52
|
+
className: clx("modal-overlay"),
|
|
53
53
|
onClick: onCloseHandler
|
|
54
54
|
}), /*#__PURE__*/React__default.default.createElement("div", {
|
|
55
|
-
className: clx(
|
|
56
|
-
|
|
57
|
-
|
|
55
|
+
className: clx("modal-wrapper", {
|
|
56
|
+
"modal-wrapper_desktop": isDesktop ? 1 : 0,
|
|
57
|
+
"modal-wrapper_mobile": !isDesktop ? 1 : 0
|
|
58
58
|
}, className),
|
|
59
59
|
ref: modalRef
|
|
60
60
|
}, title ? ( /*#__PURE__*/React__default.default.createElement("div", {
|
|
61
|
-
className: clx(
|
|
61
|
+
className: clx("title-wrapper")
|
|
62
62
|
}, /*#__PURE__*/React__default.default.createElement(index$4.default, null, title), /*#__PURE__*/React__default.default.createElement(index$5.default, {
|
|
63
63
|
onClick: onCloseHandler
|
|
64
64
|
}))) : ( /*#__PURE__*/React__default.default.createElement("div", {
|
|
65
|
-
className: clx(
|
|
65
|
+
className: clx("close-wrapper")
|
|
66
66
|
}, /*#__PURE__*/React__default.default.createElement(index$5.default, {
|
|
67
67
|
onClick: onCloseHandler
|
|
68
68
|
}))), /*#__PURE__*/React__default.default.createElement(index$6.default, null, children))));
|
package/Theme/global.css
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
margin: 0;
|
|
3
3
|
padding: 0;
|
|
4
4
|
}
|
|
5
|
+
[data-page=colibri-ui] html,
|
|
6
|
+
[data-page=colibri-ui] body {
|
|
7
|
+
font-family: Roboto, Arial, sans-serif;
|
|
8
|
+
font-style: normal;
|
|
9
|
+
font-weight: 400;
|
|
10
|
+
}
|
|
5
11
|
[data-page=colibri-ui] input,
|
|
6
12
|
[data-page=colibri-ui] label,
|
|
7
13
|
[data-page=colibri-ui] textarea,
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
.root {
|
|
2
|
+
cursor: pointer;
|
|
3
|
+
display: inline-block;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.inner {
|
|
7
|
+
place-items: stretch flex-start;
|
|
8
|
+
box-sizing: border-box;
|
|
9
|
+
display: flex;
|
|
10
|
+
font-family: Roboto, Arial, sans-serif;
|
|
11
|
+
-webkit-font-smoothing: antialiased;
|
|
12
|
+
-moz-osx-font-smoothing: grayscale;
|
|
13
|
+
min-width: 0;
|
|
14
|
+
transition-duration: 0.3s;
|
|
15
|
+
transition-property: background, box-shadow, transform;
|
|
16
|
+
transition-timing-function: ease;
|
|
17
|
+
}
|
|
18
|
+
.inner_active {
|
|
19
|
+
background: rgb(237, 237, 237);
|
|
20
|
+
}
|
|
21
|
+
.inner_inactive {
|
|
22
|
+
background: var(--palette-white);
|
|
23
|
+
box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
|
|
24
|
+
}
|
|
25
|
+
.inner_inactive:hover {
|
|
26
|
+
box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
|
|
27
|
+
transform: translateY(-2px);
|
|
28
|
+
}
|
|
29
|
+
.inner_inactive:active {
|
|
30
|
+
background: rgba(0, 0, 0, 0.02);
|
|
31
|
+
box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
|
|
32
|
+
outline: 0;
|
|
33
|
+
transition-duration: 0.15s;
|
|
34
|
+
}
|
|
35
|
+
@media (hover: none) {
|
|
36
|
+
.inner_inactive:hover {
|
|
37
|
+
box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
|
|
38
|
+
transform: translateY(0);
|
|
39
|
+
}
|
|
40
|
+
.inner_inactive:active {
|
|
41
|
+
box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
.inner[data-size=s] {
|
|
45
|
+
border-radius: 32px;
|
|
46
|
+
height: 32px;
|
|
47
|
+
}
|
|
48
|
+
.inner[data-size=m] {
|
|
49
|
+
border-radius: 36px;
|
|
50
|
+
height: 36px;
|
|
51
|
+
}
|
|
52
|
+
.inner[data-size=l] {
|
|
53
|
+
border-radius: 44px;
|
|
54
|
+
height: 44px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.content {
|
|
58
|
+
align-items: center;
|
|
59
|
+
display: flex;
|
|
60
|
+
justify-content: flex-start;
|
|
61
|
+
max-width: 200px;
|
|
62
|
+
padding: 0 20px;
|
|
63
|
+
user-select: none;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.content-inner {
|
|
67
|
+
display: block;
|
|
68
|
+
overflow: hidden;
|
|
69
|
+
text-overflow: ellipsis;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.icon-right {
|
|
73
|
+
align-items: center;
|
|
74
|
+
display: flex;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
margin-left: -11px;
|
|
77
|
+
padding-right: 18px;
|
|
78
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { FC, ReactNode } from "react";
|
|
3
|
+
type Size = "s" | "m" | "l";
|
|
4
|
+
type Props = {
|
|
5
|
+
size?: Size;
|
|
6
|
+
testID?: string;
|
|
7
|
+
isActive?: boolean;
|
|
8
|
+
iconOnRight?: React.ReactNode;
|
|
9
|
+
onClick?: () => void;
|
|
10
|
+
onIconOnRightClick?: () => void;
|
|
11
|
+
children?: ReactNode;
|
|
12
|
+
};
|
|
13
|
+
declare const Chip: FC<Props>;
|
|
14
|
+
export default Chip;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import classNames from 'classnames/bind';
|
|
3
|
+
import styles from './Chip.module.css';
|
|
4
|
+
|
|
5
|
+
var clx = classNames.bind(styles);
|
|
6
|
+
var Chip = function Chip(props) {
|
|
7
|
+
var children = props.children,
|
|
8
|
+
iconOnRight = props.iconOnRight,
|
|
9
|
+
isActive = props.isActive,
|
|
10
|
+
onClick = props.onClick,
|
|
11
|
+
onIconOnRightClick = props.onIconOnRightClick,
|
|
12
|
+
_a = props.size,
|
|
13
|
+
size = _a === void 0 ? "m" : _a,
|
|
14
|
+
_b = props.testID,
|
|
15
|
+
testID = _b === void 0 ? "chip" : _b;
|
|
16
|
+
return /*#__PURE__*/React__default.createElement("span", {
|
|
17
|
+
className: clx("root"),
|
|
18
|
+
"data-component": "Chip",
|
|
19
|
+
"data-testid": testID
|
|
20
|
+
}, /*#__PURE__*/React__default.createElement("span", {
|
|
21
|
+
className: clx("inner", {
|
|
22
|
+
inner_active: isActive,
|
|
23
|
+
inner_inactive: !isActive
|
|
24
|
+
}),
|
|
25
|
+
"data-size": size
|
|
26
|
+
}, /*#__PURE__*/React__default.createElement("span", {
|
|
27
|
+
className: clx("content"),
|
|
28
|
+
onClick: onClick
|
|
29
|
+
}, /*#__PURE__*/React__default.createElement("span", {
|
|
30
|
+
className: clx("content-inner")
|
|
31
|
+
}, children)), iconOnRight && ( /*#__PURE__*/React__default.createElement("span", {
|
|
32
|
+
className: clx("icon-right"),
|
|
33
|
+
onClick: onIconOnRightClick || onClick
|
|
34
|
+
}, iconOnRight))));
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export { Chip as default };
|
package/esm/Icons/index.d.ts
CHANGED
|
@@ -2,7 +2,6 @@ export { default as ArrowNext } from "./ArrowNext";
|
|
|
2
2
|
export { default as Cart } from "./Cart";
|
|
3
3
|
export { default as Chevron } from "./Chevron";
|
|
4
4
|
export { default as Close } from "./Close";
|
|
5
|
-
export { default as Docunebt } from "./Document";
|
|
6
5
|
export { default as Exit } from "./Exit";
|
|
7
6
|
export { default as EyeOpen } from "./EyeOpen";
|
|
8
7
|
export { default as EyeClosed } from "./EyeClosed";
|
package/esm/Icons/index.js
CHANGED
|
@@ -2,7 +2,6 @@ export { default as ArrowNext } from './ArrowNext.js';
|
|
|
2
2
|
export { default as Cart } from './Cart.js';
|
|
3
3
|
export { default as Chevron } from './Chevron.js';
|
|
4
4
|
export { default as Close } from './Close.js';
|
|
5
|
-
export { default as Docunebt } from './Document.js';
|
|
6
5
|
export { default as Exit } from './Exit.js';
|
|
7
6
|
export { default as EyeOpen } from './EyeOpen.js';
|
|
8
7
|
export { default as EyeClosed } from './EyeClosed.js';
|
|
@@ -10,28 +10,26 @@
|
|
|
10
10
|
list-style: none;
|
|
11
11
|
padding: 8px 6px;
|
|
12
12
|
}
|
|
13
|
-
.
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
.item_disabled {
|
|
14
|
+
background-color: var(--palette-white);
|
|
15
|
+
color: var(--palette-bg-2);
|
|
16
|
+
cursor: not-allowed;
|
|
17
|
+
pointer-events: none;
|
|
17
18
|
}
|
|
18
|
-
|
|
19
|
-
.variant_primary {
|
|
19
|
+
.item_variant_primary {
|
|
20
20
|
background-color: var(--palette-white);
|
|
21
21
|
}
|
|
22
|
-
.
|
|
23
|
-
background-color: var(--palette-primary-
|
|
22
|
+
.item_variant_primary:hover {
|
|
23
|
+
background-color: var(--palette-primary-1);
|
|
24
24
|
}
|
|
25
|
-
.
|
|
26
|
-
background-color: var(--palette-primary-
|
|
25
|
+
.item_variant_primary:active {
|
|
26
|
+
background-color: var(--palette-primary-1);
|
|
27
27
|
}
|
|
28
|
-
.
|
|
29
|
-
background-color: var(--palette-primary-
|
|
28
|
+
.item_variant_primary:focus, .item_variant_primary:focus-within {
|
|
29
|
+
background-color: var(--palette-primary-1);
|
|
30
30
|
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
cursor: not-allowed;
|
|
36
|
-
pointer-events: none;
|
|
31
|
+
.item > * {
|
|
32
|
+
overflow: hidden;
|
|
33
|
+
text-overflow: ellipsis;
|
|
34
|
+
white-space: nowrap;
|
|
37
35
|
}
|
|
@@ -16,11 +16,11 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
16
16
|
ref: ref,
|
|
17
17
|
"data-component": "menu-item",
|
|
18
18
|
style: {
|
|
19
|
-
backgroundColor: isSelected ? "var(--palette-primary-1)" : "
|
|
19
|
+
backgroundColor: isSelected ? "var(--palette-primary-1)" : ""
|
|
20
20
|
},
|
|
21
|
-
className: clx(
|
|
22
|
-
|
|
23
|
-
}, _b["
|
|
21
|
+
className: clx("item", (_b = {
|
|
22
|
+
item_disabled: !!disabled
|
|
23
|
+
}, _b["item_variant_".concat(variant)] = !!variant, _b), className),
|
|
24
24
|
onClick: onClick
|
|
25
25
|
}, children);
|
|
26
26
|
});
|
package/esm/Menu/index.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React__default, { forwardRef, useMemo, Children, isValidElement, cloneElement } from 'react';
|
|
2
|
-
import classNames from 'classnames';
|
|
2
|
+
import classNames from 'classnames/bind';
|
|
3
3
|
import styles from './Menu.module.css';
|
|
4
4
|
|
|
5
|
+
var clx = classNames.bind(styles);
|
|
5
6
|
var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
6
7
|
var selected = _a.selected,
|
|
7
8
|
variant = _a.variant,
|
|
@@ -27,7 +28,7 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
27
28
|
}, [children, selected, onClick]);
|
|
28
29
|
return /*#__PURE__*/React__default.createElement("ul", {
|
|
29
30
|
ref: ref,
|
|
30
|
-
className:
|
|
31
|
+
className: clx("menu", className)
|
|
31
32
|
}, renderChild);
|
|
32
33
|
});
|
|
33
34
|
|
package/esm/Modal/index.js
CHANGED
|
@@ -37,22 +37,22 @@ var Modal = function Modal(_a) {
|
|
|
37
37
|
};
|
|
38
38
|
}, [onCloseHandler]);
|
|
39
39
|
return /*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement("div", {
|
|
40
|
-
className: clx(
|
|
40
|
+
className: clx("root")
|
|
41
41
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
42
|
-
className: clx(
|
|
42
|
+
className: clx("modal-overlay"),
|
|
43
43
|
onClick: onCloseHandler
|
|
44
44
|
}), /*#__PURE__*/React__default.createElement("div", {
|
|
45
|
-
className: clx(
|
|
46
|
-
|
|
47
|
-
|
|
45
|
+
className: clx("modal-wrapper", {
|
|
46
|
+
"modal-wrapper_desktop": isDesktop ? 1 : 0,
|
|
47
|
+
"modal-wrapper_mobile": !isDesktop ? 1 : 0
|
|
48
48
|
}, className),
|
|
49
49
|
ref: modalRef
|
|
50
50
|
}, title ? ( /*#__PURE__*/React__default.createElement("div", {
|
|
51
|
-
className: clx(
|
|
51
|
+
className: clx("title-wrapper")
|
|
52
52
|
}, /*#__PURE__*/React__default.createElement(Title, null, title), /*#__PURE__*/React__default.createElement(Close, {
|
|
53
53
|
onClick: onCloseHandler
|
|
54
54
|
}))) : ( /*#__PURE__*/React__default.createElement("div", {
|
|
55
|
-
className: clx(
|
|
55
|
+
className: clx("close-wrapper")
|
|
56
56
|
}, /*#__PURE__*/React__default.createElement(Close, {
|
|
57
57
|
onClick: onCloseHandler
|
|
58
58
|
}))), /*#__PURE__*/React__default.createElement(Content, null, children))));
|
package/esm/Theme/global.css
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
margin: 0;
|
|
3
3
|
padding: 0;
|
|
4
4
|
}
|
|
5
|
+
[data-page=colibri-ui] html,
|
|
6
|
+
[data-page=colibri-ui] body {
|
|
7
|
+
font-family: Roboto, Arial, sans-serif;
|
|
8
|
+
font-style: normal;
|
|
9
|
+
font-weight: 400;
|
|
10
|
+
}
|
|
5
11
|
[data-page=colibri-ui] input,
|
|
6
12
|
[data-page=colibri-ui] label,
|
|
7
13
|
[data-page=colibri-ui] textarea,
|
package/esm/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export { default as Badge } from "./Badge";
|
|
|
2
2
|
export { default as Button } from "./Button";
|
|
3
3
|
export { default as Calendar } from "./Calendar";
|
|
4
4
|
export { default as Checkbox } from "./Checkbox";
|
|
5
|
+
export { default as Chip } from "./Chip";
|
|
5
6
|
export { default as Counter } from "./Counter";
|
|
6
7
|
export { default as DotsLoader } from "./DotsLoader";
|
|
7
8
|
export { default as Dropdown } from "./Dropdown";
|
package/esm/index.js
CHANGED
|
@@ -2,6 +2,7 @@ export { default as Badge } from './Badge/index.js';
|
|
|
2
2
|
export { default as Button } from './Button/index.js';
|
|
3
3
|
export { default as Calendar } from './Calendar/index.js';
|
|
4
4
|
export { default as Checkbox } from './Checkbox/index.js';
|
|
5
|
+
export { default as Chip } from './Chip/index.js';
|
|
5
6
|
export { default as Counter } from './Counter/index.js';
|
|
6
7
|
export { default as DotsLoader } from './DotsLoader/index.js';
|
|
7
8
|
export { default as Dropdown } from './Dropdown/index.js';
|
|
@@ -30,7 +31,6 @@ export { default as ArrowNext } from './Icons/ArrowNext.js';
|
|
|
30
31
|
export { default as Cart } from './Icons/Cart.js';
|
|
31
32
|
export { default as Chevron } from './Icons/Chevron.js';
|
|
32
33
|
export { default as Close } from './Icons/Close.js';
|
|
33
|
-
export { default as Docunebt } from './Icons/Document.js';
|
|
34
34
|
export { default as Exit } from './Icons/Exit.js';
|
|
35
35
|
export { default as EyeOpen } from './Icons/EyeOpen.js';
|
|
36
36
|
export { default as EyeClosed } from './Icons/EyeClosed.js';
|
package/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export { default as Badge } from "./Badge";
|
|
|
2
2
|
export { default as Button } from "./Button";
|
|
3
3
|
export { default as Calendar } from "./Calendar";
|
|
4
4
|
export { default as Checkbox } from "./Checkbox";
|
|
5
|
+
export { default as Chip } from "./Chip";
|
|
5
6
|
export { default as Counter } from "./Counter";
|
|
6
7
|
export { default as DotsLoader } from "./DotsLoader";
|
|
7
8
|
export { default as Dropdown } from "./Dropdown";
|
package/index.js
CHANGED
|
@@ -4,35 +4,35 @@ var index = require('./Badge/index.js');
|
|
|
4
4
|
var index$1 = require('./Button/index.js');
|
|
5
5
|
var index$2 = require('./Calendar/index.js');
|
|
6
6
|
var index$3 = require('./Checkbox/index.js');
|
|
7
|
-
var index$4 = require('./
|
|
8
|
-
var index$5 = require('./
|
|
9
|
-
var index$6 = require('./
|
|
10
|
-
var index$7 = require('./
|
|
11
|
-
var index$8 = require('./Grid/
|
|
12
|
-
var index$9 = require('./
|
|
13
|
-
var index$a = require('./
|
|
14
|
-
var index$b = require('./
|
|
15
|
-
var index$c = require('./Menu/
|
|
16
|
-
var index$d = require('./
|
|
17
|
-
var index$e = require('./
|
|
18
|
-
var index$f = require('./
|
|
19
|
-
var index$g = require('./
|
|
20
|
-
var index$h = require('./
|
|
21
|
-
var index$i = require('./
|
|
22
|
-
var index$j = require('./
|
|
23
|
-
var index$k = require('./
|
|
24
|
-
var index$l = require('./
|
|
25
|
-
var index$m = require('./
|
|
26
|
-
var index$n = require('./
|
|
27
|
-
var index$o = require('./
|
|
28
|
-
var index$p = require('./hooks/
|
|
29
|
-
var index$q = require('./hooks/
|
|
7
|
+
var index$4 = require('./Chip/index.js');
|
|
8
|
+
var index$5 = require('./Counter/index.js');
|
|
9
|
+
var index$6 = require('./DotsLoader/index.js');
|
|
10
|
+
var index$7 = require('./Dropdown/index.js');
|
|
11
|
+
var index$8 = require('./Grid/index.js');
|
|
12
|
+
var index$9 = require('./Grid/Item/index.js');
|
|
13
|
+
var index$a = require('./Image/index.js');
|
|
14
|
+
var index$b = require('./Input/index.js');
|
|
15
|
+
var index$c = require('./Menu/index.js');
|
|
16
|
+
var index$d = require('./Menu/components/MenuItem/index.js');
|
|
17
|
+
var index$e = require('./Modal/index.js');
|
|
18
|
+
var index$f = require('./Portal/index.js');
|
|
19
|
+
var index$g = require('./RadioGroup/index.js');
|
|
20
|
+
var index$h = require('./Select/index.js');
|
|
21
|
+
var index$i = require('./Separator/index.js');
|
|
22
|
+
var index$j = require('./Skeleton/index.js');
|
|
23
|
+
var index$k = require('./Switch/index.js');
|
|
24
|
+
var index$l = require('./Theme/index.js');
|
|
25
|
+
var index$m = require('./Tooltip/index.js');
|
|
26
|
+
var index$n = require('./TimeSelect/index.js');
|
|
27
|
+
var index$o = require('./Typography/index.js');
|
|
28
|
+
var index$p = require('./hooks/useMediaSizes/index.js');
|
|
29
|
+
var index$q = require('./hooks/useOnClickOutside/index.js');
|
|
30
|
+
var index$r = require('./hooks/useScrollLock/index.js');
|
|
30
31
|
require('./Icons/index.js');
|
|
31
32
|
var ArrowNext = require('./Icons/ArrowNext.js');
|
|
32
33
|
var Cart = require('./Icons/Cart.js');
|
|
33
34
|
var Chevron = require('./Icons/Chevron.js');
|
|
34
35
|
var Close = require('./Icons/Close.js');
|
|
35
|
-
var Document = require('./Icons/Document.js');
|
|
36
36
|
var Exit = require('./Icons/Exit.js');
|
|
37
37
|
var EyeOpen = require('./Icons/EyeOpen.js');
|
|
38
38
|
var EyeClosed = require('./Icons/EyeClosed.js');
|
|
@@ -51,35 +51,35 @@ exports.Badge = index.default;
|
|
|
51
51
|
exports.Button = index$1.default;
|
|
52
52
|
exports.Calendar = index$2.default;
|
|
53
53
|
exports.Checkbox = index$3.default;
|
|
54
|
-
exports.
|
|
55
|
-
exports.
|
|
56
|
-
exports.
|
|
57
|
-
exports.
|
|
58
|
-
exports.
|
|
59
|
-
exports.
|
|
60
|
-
exports.
|
|
61
|
-
exports.
|
|
62
|
-
exports.
|
|
63
|
-
exports.
|
|
64
|
-
exports.
|
|
65
|
-
exports.
|
|
66
|
-
exports.
|
|
67
|
-
exports.
|
|
68
|
-
exports.
|
|
69
|
-
exports.
|
|
70
|
-
exports.
|
|
71
|
-
exports.
|
|
72
|
-
exports.
|
|
73
|
-
exports.
|
|
74
|
-
exports.
|
|
75
|
-
exports.
|
|
76
|
-
exports.
|
|
77
|
-
exports.
|
|
54
|
+
exports.Chip = index$4.default;
|
|
55
|
+
exports.Counter = index$5.default;
|
|
56
|
+
exports.DotsLoader = index$6.default;
|
|
57
|
+
exports.Dropdown = index$7.default;
|
|
58
|
+
exports.Grid = index$8.default;
|
|
59
|
+
exports.GridItem = index$9.default;
|
|
60
|
+
exports.Image = index$a.default;
|
|
61
|
+
exports.Input = index$b.default;
|
|
62
|
+
exports.Menu = index$c.default;
|
|
63
|
+
exports.MenuItem = index$d.default;
|
|
64
|
+
exports.Modal = index$e.default;
|
|
65
|
+
exports.Portal = index$f.default;
|
|
66
|
+
exports.RadioGroup = index$g.default;
|
|
67
|
+
exports.Select = index$h.default;
|
|
68
|
+
exports.Separator = index$i.default;
|
|
69
|
+
exports.SkeletonRect = index$j.SkeletonRect;
|
|
70
|
+
exports.SkeletonText = index$j.SkeletonText;
|
|
71
|
+
exports.Switch = index$k.default;
|
|
72
|
+
exports.THEMES = index$l.THEMES;
|
|
73
|
+
exports.Tooltip = index$m.default;
|
|
74
|
+
exports.TimeSelect = index$n.default;
|
|
75
|
+
exports.Typography = index$o.default;
|
|
76
|
+
exports.useMediaSizes = index$p.default;
|
|
77
|
+
exports.useOnClickOutside = index$q.default;
|
|
78
|
+
exports.useScrollLock = index$r.default;
|
|
78
79
|
exports.ArrowNext = ArrowNext.default;
|
|
79
80
|
exports.Cart = Cart.default;
|
|
80
81
|
exports.Chevron = Chevron.default;
|
|
81
82
|
exports.Close = Close.default;
|
|
82
|
-
exports.Docunebt = Document.default;
|
|
83
83
|
exports.Exit = Exit.default;
|
|
84
84
|
exports.EyeOpen = EyeOpen.default;
|
|
85
85
|
exports.EyeClosed = EyeClosed.default;
|
package/package.json
CHANGED
package/Icons/Document.d.ts
DELETED
package/Icons/Document.js
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var tslib = require('tslib');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
|
|
8
|
-
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
-
|
|
10
|
-
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
11
|
-
|
|
12
|
-
var Document = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
13
|
-
var _b = _a.fill,
|
|
14
|
-
fill = _b === void 0 ? "currentColor" : _b,
|
|
15
|
-
_c = _a.width,
|
|
16
|
-
width = _c === void 0 ? 24 : _c,
|
|
17
|
-
_d = _a.height,
|
|
18
|
-
height = _d === void 0 ? 24 : _d,
|
|
19
|
-
props = tslib.__rest(_a, ["fill", "width", "height"]);
|
|
20
|
-
return /*#__PURE__*/React__default.default.createElement("svg", tslib.__assign({
|
|
21
|
-
focusable: "false",
|
|
22
|
-
width: width,
|
|
23
|
-
height: height,
|
|
24
|
-
viewBox: "0 0 24 24"
|
|
25
|
-
}, props, {
|
|
26
|
-
ref: ref,
|
|
27
|
-
fill: "none",
|
|
28
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
29
|
-
}), /*#__PURE__*/React__default.default.createElement("path", {
|
|
30
|
-
d: "M18.745 3H4.934C3.848 3 2.96 3.9 2.96 5v14c0 1.1.888 2 1.973 2h13.813c1.085 0 1.973-.9 1.973-2V5c0-1.1-.888-2-1.974-2zm-4.933 14H6.907v-2h6.907v2zm2.96-4H6.906v-2h9.866v2zm0-4H6.906V7h9.866v2z",
|
|
31
|
-
fill: fill
|
|
32
|
-
}));
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
exports.default = Document;
|
package/esm/Icons/Document.d.ts
DELETED
package/esm/Icons/Document.js
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { __rest, __assign } from 'tslib';
|
|
2
|
-
import React__default, { forwardRef } from 'react';
|
|
3
|
-
|
|
4
|
-
var Document = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
5
|
-
var _b = _a.fill,
|
|
6
|
-
fill = _b === void 0 ? "currentColor" : _b,
|
|
7
|
-
_c = _a.width,
|
|
8
|
-
width = _c === void 0 ? 24 : _c,
|
|
9
|
-
_d = _a.height,
|
|
10
|
-
height = _d === void 0 ? 24 : _d,
|
|
11
|
-
props = __rest(_a, ["fill", "width", "height"]);
|
|
12
|
-
return /*#__PURE__*/React__default.createElement("svg", __assign({
|
|
13
|
-
focusable: "false",
|
|
14
|
-
width: width,
|
|
15
|
-
height: height,
|
|
16
|
-
viewBox: "0 0 24 24"
|
|
17
|
-
}, props, {
|
|
18
|
-
ref: ref,
|
|
19
|
-
fill: "none",
|
|
20
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
21
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
22
|
-
d: "M18.745 3H4.934C3.848 3 2.96 3.9 2.96 5v14c0 1.1.888 2 1.973 2h13.813c1.085 0 1.973-.9 1.973-2V5c0-1.1-.888-2-1.974-2zm-4.933 14H6.907v-2h6.907v2zm2.96-4H6.906v-2h9.866v2zm0-4H6.906V7h9.866v2z",
|
|
23
|
-
fill: fill
|
|
24
|
-
}));
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
export { Document as default };
|