@ltht-react/banner 1.0.96 → 1.0.98
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/README.md +28 -28
- package/lib/index.d.ts +9 -2
- package/lib/index.js +27 -4
- package/lib/index.js.map +1 -1
- 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,15 @@
|
|
|
1
1
|
import { FC, HTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import { StatusTypes } from '@ltht-react/types';
|
|
3
|
-
declare const Banner: FC<
|
|
3
|
+
declare const Banner: FC<IBannerProps>;
|
|
4
|
+
export declare const ButtonBanner: FC<IButtonBannerProps>;
|
|
4
5
|
export default Banner;
|
|
5
|
-
interface
|
|
6
|
+
interface IBannerProps extends HTMLAttributes<HTMLDivElement> {
|
|
6
7
|
type?: StatusTypes;
|
|
7
8
|
icon?: ReactNode;
|
|
8
9
|
}
|
|
10
|
+
interface IButtonBannerProps extends HTMLAttributes<HTMLButtonElement> {
|
|
11
|
+
type?: StatusTypes;
|
|
12
|
+
icon?: ReactNode;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
showChevron?: boolean;
|
|
15
|
+
}
|
package/lib/index.js
CHANGED
|
@@ -29,10 +29,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
29
29
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
30
30
|
};
|
|
31
31
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
32
|
+
exports.ButtonBanner = void 0;
|
|
32
33
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
33
34
|
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
34
|
-
var icon_1 = require("@ltht-react/icon");
|
|
35
35
|
var styles_1 = require("@ltht-react/styles");
|
|
36
|
+
var icon_1 = require("@ltht-react/icon");
|
|
36
37
|
var generateStyles = function (type) {
|
|
37
38
|
switch (type) {
|
|
38
39
|
case 'info':
|
|
@@ -83,8 +84,21 @@ var StyledBanner = styled_1.default.div(templateObject_1 || (templateObject_1 =
|
|
|
83
84
|
var canClick = _a.canClick;
|
|
84
85
|
return (canClick ? 'pointer' : 'default');
|
|
85
86
|
});
|
|
86
|
-
var
|
|
87
|
-
var
|
|
87
|
+
var StyledButtonBanner = styled_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", ";\n\n display: flex;\n align-items: center;\n padding: 0.75rem;\n background: ", ";\n color: ", ";\n border: 1px solid ", ";\n\n width: 100%;\n justify-content: center;\n white-space: nowrap;\n\n &:hover:not([disabled]) {\n background: ", ";\n cursor: pointer;\n }\n\n &:disabled {\n opacity: 0.65;\n cursor: not-allowed;\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 width: 100%;\n justify-content: center;\n white-space: nowrap;\n\n &:hover:not([disabled]) {\n background: ", ";\n cursor: pointer;\n }\n\n &:disabled {\n opacity: 0.65;\n cursor: not-allowed;\n }\n"])), styles_1.CSS_RESET, function (_a) {
|
|
88
|
+
var buttonBannerType = _a.buttonBannerType;
|
|
89
|
+
return generateStyles(buttonBannerType).background;
|
|
90
|
+
}, function (_a) {
|
|
91
|
+
var buttonBannerType = _a.buttonBannerType;
|
|
92
|
+
return generateStyles(buttonBannerType).color;
|
|
93
|
+
}, function (_a) {
|
|
94
|
+
var buttonBannerType = _a.buttonBannerType;
|
|
95
|
+
return generateStyles(buttonBannerType).borderColor;
|
|
96
|
+
}, function (_a) {
|
|
97
|
+
var buttonBannerType = _a.buttonBannerType;
|
|
98
|
+
return generateStyles(buttonBannerType).hover;
|
|
99
|
+
});
|
|
100
|
+
var BannerContent = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
101
|
+
var StyledIcon = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
88
102
|
var canClick = function (props) { return props.onClick !== undefined; };
|
|
89
103
|
var Banner = function (_a) {
|
|
90
104
|
var _b = _a.type, type = _b === void 0 ? 'info' : _b, icon = _a.icon, children = _a.children, rest = __rest(_a, ["type", "icon", "children"]);
|
|
@@ -94,6 +108,15 @@ var Banner = function (_a) {
|
|
|
94
108
|
jsx_runtime_1.jsx(BannerContent, { children: children }, void 0),
|
|
95
109
|
canClick(rest) && jsx_runtime_1.jsx(icon_1.ChevronIcon, { size: "medium", direction: "right" }, void 0)] }), void 0));
|
|
96
110
|
};
|
|
111
|
+
var ButtonBanner = function (_a) {
|
|
112
|
+
var _b = _a.type, type = _b === void 0 ? 'info' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, icon = _a.icon, children = _a.children, showChevron = _a.showChevron, rest = __rest(_a, ["type", "disabled", "icon", "children", "showChevron"]);
|
|
113
|
+
return (jsx_runtime_1.jsxs(StyledButtonBanner, __assign({}, rest, { buttonBannerType: type, disabled: disabled }, { 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),
|
|
114
|
+
type === 'warning' && jsx_runtime_1.jsx(icon_1.ExclamationIcon, { status: "amber", size: "medium" }, void 0),
|
|
115
|
+
type === 'danger' && jsx_runtime_1.jsx(icon_1.ExclamationIcon, { status: "red", size: "medium" }, void 0)] }, void 0)),
|
|
116
|
+
jsx_runtime_1.jsx(BannerContent, { children: children }, void 0),
|
|
117
|
+
showChevron === true && jsx_runtime_1.jsx(icon_1.ChevronIcon, { size: "medium", direction: "right" }, void 0)] }), void 0));
|
|
118
|
+
};
|
|
119
|
+
exports.ButtonBanner = ButtonBanner;
|
|
97
120
|
exports.default = Banner;
|
|
98
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
121
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
99
122
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ltht-react/banner",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.98",
|
|
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.125",
|
|
31
|
+
"@ltht-react/styles": "^1.3.117",
|
|
32
|
+
"@ltht-react/types": "^1.0.121",
|
|
33
|
+
"@ltht-react/utils": "^1.1.123",
|
|
34
34
|
"react": "^17.0.0"
|
|
35
35
|
},
|
|
36
|
-
"gitHead": "
|
|
36
|
+
"gitHead": "b6eb4196b0bf955269b80520b9c5f978e6d0bf04"
|
|
37
37
|
}
|