@ltht-react/banner 1.0.77 → 1.0.81
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/CHANGELOG.md +648 -616
- package/README.md +28 -28
- package/lib/index.d.ts +8 -8
- package/lib/index.js +98 -98
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
# Banner
|
|
2
|
-
|
|
3
|
-
### Import
|
|
4
|
-
|
|
5
|
-
```js
|
|
6
|
-
import Banner from '@ltht-react/banner'
|
|
7
|
-
```
|
|
8
|
-
|
|
9
|
-
### Usage
|
|
10
|
-
|
|
11
|
-
```jsx
|
|
12
|
-
<Banner type="info">
|
|
13
|
-
This is an info alert with{' '}
|
|
14
|
-
<a href="#" class="alert-link">
|
|
15
|
-
an example link
|
|
16
|
-
</a>
|
|
17
|
-
.
|
|
18
|
-
</Banner>
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
### Properties
|
|
22
|
-
|
|
23
|
-
| Prop | Required | Default | Type | Description |
|
|
24
|
-
| :--------- | :------- | :------ | :----------------------------- | :---------------------------------------------------- |
|
|
25
|
-
| `type` | No | 'info' | 'info', 'danger', 'warning' | Type of styling for the banner |
|
|
26
|
-
| `icon` | No | None | ReactNode | Custom <Icon /> to render |
|
|
27
|
-
| `children` | No | None | Element | Child elements to render within the banner |
|
|
28
|
-
| `...rest` | No | None | HTMLAttributes<HTMLDivElement> | Any additional props supported by an HTML Div Element |
|
|
1
|
+
# Banner
|
|
2
|
+
|
|
3
|
+
### Import
|
|
4
|
+
|
|
5
|
+
```js
|
|
6
|
+
import Banner from '@ltht-react/banner'
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
### Usage
|
|
10
|
+
|
|
11
|
+
```jsx
|
|
12
|
+
<Banner type="info">
|
|
13
|
+
This is an info alert with{' '}
|
|
14
|
+
<a href="#" class="alert-link">
|
|
15
|
+
an example link
|
|
16
|
+
</a>
|
|
17
|
+
.
|
|
18
|
+
</Banner>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### Properties
|
|
22
|
+
|
|
23
|
+
| Prop | Required | Default | Type | Description |
|
|
24
|
+
| :--------- | :------- | :------ | :----------------------------- | :---------------------------------------------------- |
|
|
25
|
+
| `type` | No | 'info' | 'info', 'danger', 'warning' | Type of styling for the banner |
|
|
26
|
+
| `icon` | No | None | ReactNode | Custom <Icon /> to render |
|
|
27
|
+
| `children` | No | None | Element | Child elements to render within the banner |
|
|
28
|
+
| `...rest` | No | None | HTMLAttributes<HTMLDivElement> | Any additional props supported by an HTML Div Element |
|
package/lib/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { FC, HTMLAttributes, ReactNode } from 'react';
|
|
2
|
-
import { StatusTypes } from '@ltht-react/types';
|
|
3
|
-
declare const Banner: FC<IProps>;
|
|
4
|
-
export default Banner;
|
|
5
|
-
interface IProps extends HTMLAttributes<HTMLDivElement> {
|
|
6
|
-
type?: StatusTypes;
|
|
7
|
-
icon?: ReactNode;
|
|
8
|
-
}
|
|
1
|
+
import { FC, HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { StatusTypes } from '@ltht-react/types';
|
|
3
|
+
declare const Banner: FC<IProps>;
|
|
4
|
+
export default Banner;
|
|
5
|
+
interface IProps extends HTMLAttributes<HTMLDivElement> {
|
|
6
|
+
type?: StatusTypes;
|
|
7
|
+
icon?: ReactNode;
|
|
8
|
+
}
|
package/lib/index.js
CHANGED
|
@@ -1,99 +1,99 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
-
return cooked;
|
|
5
|
-
};
|
|
6
|
-
var __assign = (this && this.__assign) || function () {
|
|
7
|
-
__assign = Object.assign || function(t) {
|
|
8
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
-
s = arguments[i];
|
|
10
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
-
t[p] = s[p];
|
|
12
|
-
}
|
|
13
|
-
return t;
|
|
14
|
-
};
|
|
15
|
-
return __assign.apply(this, arguments);
|
|
16
|
-
};
|
|
17
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
18
|
-
var t = {};
|
|
19
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
20
|
-
t[p] = s[p];
|
|
21
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
22
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
23
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
24
|
-
t[p[i]] = s[p[i]];
|
|
25
|
-
}
|
|
26
|
-
return t;
|
|
27
|
-
};
|
|
28
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
29
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
30
|
-
};
|
|
31
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
32
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
33
|
-
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
34
|
-
var icon_1 = require("@ltht-react/icon");
|
|
35
|
-
var styles_1 = require("@ltht-react/styles");
|
|
36
|
-
var generateStyles = function (type) {
|
|
37
|
-
switch (type) {
|
|
38
|
-
case 'info':
|
|
39
|
-
return {
|
|
40
|
-
background: styles_1.BANNER_COLOURS.INFO.BACKGROUND,
|
|
41
|
-
borderColor: styles_1.BANNER_COLOURS.INFO.BORDER,
|
|
42
|
-
color: styles_1.BANNER_COLOURS.INFO.TEXT,
|
|
43
|
-
hover: styles_1.BANNER_COLOURS.INFO.HOVER,
|
|
44
|
-
};
|
|
45
|
-
case 'warning':
|
|
46
|
-
return {
|
|
47
|
-
background: styles_1.BANNER_COLOURS.WARNING.BACKGROUND,
|
|
48
|
-
borderColor: styles_1.BANNER_COLOURS.WARNING.BORDER,
|
|
49
|
-
color: styles_1.BANNER_COLOURS.WARNING.TEXT,
|
|
50
|
-
hover: styles_1.BANNER_COLOURS.WARNING.HOVER,
|
|
51
|
-
};
|
|
52
|
-
case 'danger':
|
|
53
|
-
return {
|
|
54
|
-
background: styles_1.BANNER_COLOURS.DANGER.BACKGROUND,
|
|
55
|
-
borderColor: styles_1.BANNER_COLOURS.DANGER.BORDER,
|
|
56
|
-
color: styles_1.BANNER_COLOURS.DANGER.TEXT,
|
|
57
|
-
hover: styles_1.BANNER_COLOURS.DANGER.HOVER,
|
|
58
|
-
};
|
|
59
|
-
case 'highlight':
|
|
60
|
-
return {
|
|
61
|
-
background: styles_1.BANNER_COLOURS.HIGHLIGHT.BACKGROUND,
|
|
62
|
-
borderColor: styles_1.BANNER_COLOURS.HIGHLIGHT.BORDER,
|
|
63
|
-
color: styles_1.BANNER_COLOURS.HIGHLIGHT.TEXT,
|
|
64
|
-
hover: styles_1.BANNER_COLOURS.HIGHLIGHT.HOVER,
|
|
65
|
-
};
|
|
66
|
-
default:
|
|
67
|
-
return {};
|
|
68
|
-
}
|
|
69
|
-
};
|
|
70
|
-
var StyledBanner = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n\n display: flex;\n align-items: center;\n padding: 0.75rem;\n background: ", ";\n color: ", ";\n border: 1px solid ", ";\n\n &:hover {\n background: ", ";\n cursor: ", ";\n }\n"], ["\n ", ";\n\n display: flex;\n align-items: center;\n padding: 0.75rem;\n background: ", ";\n color: ", ";\n border: 1px solid ", ";\n\n &:hover {\n background: ", ";\n cursor: ", ";\n }\n"])), styles_1.CSS_RESET, function (_a) {
|
|
71
|
-
var type = _a.type;
|
|
72
|
-
return generateStyles(type).background;
|
|
73
|
-
}, function (_a) {
|
|
74
|
-
var type = _a.type;
|
|
75
|
-
return generateStyles(type).color;
|
|
76
|
-
}, function (_a) {
|
|
77
|
-
var type = _a.type;
|
|
78
|
-
return generateStyles(type).borderColor;
|
|
79
|
-
}, function (_a) {
|
|
80
|
-
var type = _a.type, canClick = _a.canClick;
|
|
81
|
-
return (canClick ? generateStyles(type).hover : generateStyles(type).background);
|
|
82
|
-
}, function (_a) {
|
|
83
|
-
var canClick = _a.canClick;
|
|
84
|
-
return (canClick ? 'pointer' : 'default');
|
|
85
|
-
});
|
|
86
|
-
var BannerContent = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
87
|
-
var StyledIcon = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
88
|
-
var canClick = function (props) { return props.onClick !== undefined; };
|
|
89
|
-
var Banner = function (_a) {
|
|
90
|
-
var _b = _a.type, type = _b === void 0 ? 'info' : _b, icon = _a.icon, children = _a.children, rest = __rest(_a, ["type", "icon", "children"]);
|
|
91
|
-
return (jsx_runtime_1.jsxs(StyledBanner, __assign({}, rest, { type: type, canClick: canClick(rest) }, { children: [icon ? (jsx_runtime_1.jsx(StyledIcon, { children: icon }, void 0)) : (jsx_runtime_1.jsxs(StyledIcon, { children: [type === 'info' && jsx_runtime_1.jsx(icon_1.InfoCircleIcon, { status: "info", size: "medium" }, void 0),
|
|
92
|
-
type === 'warning' && jsx_runtime_1.jsx(icon_1.ExclamationIcon, { status: "amber", size: "medium" }, void 0),
|
|
93
|
-
type === 'danger' && jsx_runtime_1.jsx(icon_1.ExclamationIcon, { status: "red", size: "medium" }, void 0)] }, void 0)),
|
|
94
|
-
jsx_runtime_1.jsx(BannerContent, { children: children }, void 0),
|
|
95
|
-
canClick(rest) && jsx_runtime_1.jsx(icon_1.ChevronIcon, { size: "medium", direction: "right" }, void 0)] }), void 0));
|
|
96
|
-
};
|
|
97
|
-
exports.default = Banner;
|
|
98
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __assign = (this && this.__assign) || function () {
|
|
7
|
+
__assign = Object.assign || function(t) {
|
|
8
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
+
s = arguments[i];
|
|
10
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
+
t[p] = s[p];
|
|
12
|
+
}
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
return __assign.apply(this, arguments);
|
|
16
|
+
};
|
|
17
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
18
|
+
var t = {};
|
|
19
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
20
|
+
t[p] = s[p];
|
|
21
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
22
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
23
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
24
|
+
t[p[i]] = s[p[i]];
|
|
25
|
+
}
|
|
26
|
+
return t;
|
|
27
|
+
};
|
|
28
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
29
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
30
|
+
};
|
|
31
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
32
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
33
|
+
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
34
|
+
var icon_1 = require("@ltht-react/icon");
|
|
35
|
+
var styles_1 = require("@ltht-react/styles");
|
|
36
|
+
var generateStyles = function (type) {
|
|
37
|
+
switch (type) {
|
|
38
|
+
case 'info':
|
|
39
|
+
return {
|
|
40
|
+
background: styles_1.BANNER_COLOURS.INFO.BACKGROUND,
|
|
41
|
+
borderColor: styles_1.BANNER_COLOURS.INFO.BORDER,
|
|
42
|
+
color: styles_1.BANNER_COLOURS.INFO.TEXT,
|
|
43
|
+
hover: styles_1.BANNER_COLOURS.INFO.HOVER,
|
|
44
|
+
};
|
|
45
|
+
case 'warning':
|
|
46
|
+
return {
|
|
47
|
+
background: styles_1.BANNER_COLOURS.WARNING.BACKGROUND,
|
|
48
|
+
borderColor: styles_1.BANNER_COLOURS.WARNING.BORDER,
|
|
49
|
+
color: styles_1.BANNER_COLOURS.WARNING.TEXT,
|
|
50
|
+
hover: styles_1.BANNER_COLOURS.WARNING.HOVER,
|
|
51
|
+
};
|
|
52
|
+
case 'danger':
|
|
53
|
+
return {
|
|
54
|
+
background: styles_1.BANNER_COLOURS.DANGER.BACKGROUND,
|
|
55
|
+
borderColor: styles_1.BANNER_COLOURS.DANGER.BORDER,
|
|
56
|
+
color: styles_1.BANNER_COLOURS.DANGER.TEXT,
|
|
57
|
+
hover: styles_1.BANNER_COLOURS.DANGER.HOVER,
|
|
58
|
+
};
|
|
59
|
+
case 'highlight':
|
|
60
|
+
return {
|
|
61
|
+
background: styles_1.BANNER_COLOURS.HIGHLIGHT.BACKGROUND,
|
|
62
|
+
borderColor: styles_1.BANNER_COLOURS.HIGHLIGHT.BORDER,
|
|
63
|
+
color: styles_1.BANNER_COLOURS.HIGHLIGHT.TEXT,
|
|
64
|
+
hover: styles_1.BANNER_COLOURS.HIGHLIGHT.HOVER,
|
|
65
|
+
};
|
|
66
|
+
default:
|
|
67
|
+
return {};
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
var StyledBanner = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n\n display: flex;\n align-items: center;\n padding: 0.75rem;\n background: ", ";\n color: ", ";\n border: 1px solid ", ";\n\n &:hover {\n background: ", ";\n cursor: ", ";\n }\n"], ["\n ", ";\n\n display: flex;\n align-items: center;\n padding: 0.75rem;\n background: ", ";\n color: ", ";\n border: 1px solid ", ";\n\n &:hover {\n background: ", ";\n cursor: ", ";\n }\n"])), styles_1.CSS_RESET, function (_a) {
|
|
71
|
+
var type = _a.type;
|
|
72
|
+
return generateStyles(type).background;
|
|
73
|
+
}, function (_a) {
|
|
74
|
+
var type = _a.type;
|
|
75
|
+
return generateStyles(type).color;
|
|
76
|
+
}, function (_a) {
|
|
77
|
+
var type = _a.type;
|
|
78
|
+
return generateStyles(type).borderColor;
|
|
79
|
+
}, function (_a) {
|
|
80
|
+
var type = _a.type, canClick = _a.canClick;
|
|
81
|
+
return (canClick ? generateStyles(type).hover : generateStyles(type).background);
|
|
82
|
+
}, function (_a) {
|
|
83
|
+
var canClick = _a.canClick;
|
|
84
|
+
return (canClick ? 'pointer' : 'default');
|
|
85
|
+
});
|
|
86
|
+
var BannerContent = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
87
|
+
var StyledIcon = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
88
|
+
var canClick = function (props) { return props.onClick !== undefined; };
|
|
89
|
+
var Banner = function (_a) {
|
|
90
|
+
var _b = _a.type, type = _b === void 0 ? 'info' : _b, icon = _a.icon, children = _a.children, rest = __rest(_a, ["type", "icon", "children"]);
|
|
91
|
+
return (jsx_runtime_1.jsxs(StyledBanner, __assign({}, rest, { type: type, canClick: canClick(rest) }, { children: [icon ? (jsx_runtime_1.jsx(StyledIcon, { children: icon }, void 0)) : (jsx_runtime_1.jsxs(StyledIcon, { children: [type === 'info' && jsx_runtime_1.jsx(icon_1.InfoCircleIcon, { status: "info", size: "medium" }, void 0),
|
|
92
|
+
type === 'warning' && jsx_runtime_1.jsx(icon_1.ExclamationIcon, { status: "amber", size: "medium" }, void 0),
|
|
93
|
+
type === 'danger' && jsx_runtime_1.jsx(icon_1.ExclamationIcon, { status: "red", size: "medium" }, void 0)] }, void 0)),
|
|
94
|
+
jsx_runtime_1.jsx(BannerContent, { children: children }, void 0),
|
|
95
|
+
canClick(rest) && jsx_runtime_1.jsx(icon_1.ChevronIcon, { size: "medium", direction: "right" }, void 0)] }), void 0));
|
|
96
|
+
};
|
|
97
|
+
exports.default = Banner;
|
|
98
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
99
99
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ltht-react/banner",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.81",
|
|
4
4
|
"description": "ltht-react Banner Component.",
|
|
5
5
|
"author": "LTHT",
|
|
6
6
|
"homepage": "",
|
|
@@ -27,11 +27,11 @@
|
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@emotion/react": "^11.0.0",
|
|
29
29
|
"@emotion/styled": "^11.0.0",
|
|
30
|
-
"@ltht-react/icon": "^1.3.
|
|
31
|
-
"@ltht-react/styles": "^1.3.
|
|
32
|
-
"@ltht-react/types": "^1.0.
|
|
33
|
-
"@ltht-react/utils": "^1.1.
|
|
30
|
+
"@ltht-react/icon": "^1.3.108",
|
|
31
|
+
"@ltht-react/styles": "^1.3.100",
|
|
32
|
+
"@ltht-react/types": "^1.0.104",
|
|
33
|
+
"@ltht-react/utils": "^1.1.106",
|
|
34
34
|
"react": "^17.0.0"
|
|
35
35
|
},
|
|
36
|
-
"gitHead": "
|
|
36
|
+
"gitHead": "559acec5022aff2bd99ac42d0e0f4ca59eb6723b"
|
|
37
37
|
}
|