@ltht-react/banner 2.0.184 → 2.0.186
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/package.json +6 -6
- package/src/index.tsx +153 -153
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ltht-react/banner",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.186",
|
|
4
4
|
"description": "ltht-react Banner Component.",
|
|
5
5
|
"author": "LTHT",
|
|
6
6
|
"homepage": "",
|
|
@@ -28,11 +28,11 @@
|
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@emotion/react": "^11.0.0",
|
|
30
30
|
"@emotion/styled": "^11.0.0",
|
|
31
|
-
"@ltht-react/icon": "^2.0.
|
|
32
|
-
"@ltht-react/styles": "^2.0.
|
|
33
|
-
"@ltht-react/types": "^2.0.
|
|
34
|
-
"@ltht-react/utils": "^2.0.
|
|
31
|
+
"@ltht-react/icon": "^2.0.186",
|
|
32
|
+
"@ltht-react/styles": "^2.0.186",
|
|
33
|
+
"@ltht-react/types": "^2.0.186",
|
|
34
|
+
"@ltht-react/utils": "^2.0.186",
|
|
35
35
|
"react": "^18.2.0"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "33f7fb163c9a81d34b01d9e1bafaa8307e536a05"
|
|
38
38
|
}
|
package/src/index.tsx
CHANGED
|
@@ -1,153 +1,153 @@
|
|
|
1
|
-
import { FC, forwardRef, HTMLAttributes, ReactNode } from 'react'
|
|
2
|
-
import styled from '@emotion/styled'
|
|
3
|
-
import { BANNER_COLOURS, CSS_RESET } from '@ltht-react/styles'
|
|
4
|
-
import Icon from '@ltht-react/icon'
|
|
5
|
-
import { StatusTypes } from '@ltht-react/types'
|
|
6
|
-
|
|
7
|
-
const generateStyles = (type: StatusTypes) => {
|
|
8
|
-
switch (type) {
|
|
9
|
-
case 'info':
|
|
10
|
-
return {
|
|
11
|
-
background: BANNER_COLOURS.INFO.BACKGROUND,
|
|
12
|
-
borderColor: BANNER_COLOURS.INFO.BORDER,
|
|
13
|
-
color: BANNER_COLOURS.INFO.TEXT,
|
|
14
|
-
hover: BANNER_COLOURS.INFO.HOVER,
|
|
15
|
-
}
|
|
16
|
-
case 'warning':
|
|
17
|
-
return {
|
|
18
|
-
background: BANNER_COLOURS.WARNING.BACKGROUND,
|
|
19
|
-
borderColor: BANNER_COLOURS.WARNING.BORDER,
|
|
20
|
-
color: BANNER_COLOURS.WARNING.TEXT,
|
|
21
|
-
hover: BANNER_COLOURS.WARNING.HOVER,
|
|
22
|
-
}
|
|
23
|
-
case 'danger':
|
|
24
|
-
return {
|
|
25
|
-
background: BANNER_COLOURS.DANGER.BACKGROUND,
|
|
26
|
-
borderColor: BANNER_COLOURS.DANGER.BORDER,
|
|
27
|
-
color: BANNER_COLOURS.DANGER.TEXT,
|
|
28
|
-
hover: BANNER_COLOURS.DANGER.HOVER,
|
|
29
|
-
}
|
|
30
|
-
case 'highlight':
|
|
31
|
-
return {
|
|
32
|
-
background: BANNER_COLOURS.HIGHLIGHT.BACKGROUND,
|
|
33
|
-
borderColor: BANNER_COLOURS.HIGHLIGHT.BORDER,
|
|
34
|
-
color: BANNER_COLOURS.HIGHLIGHT.TEXT,
|
|
35
|
-
hover: BANNER_COLOURS.HIGHLIGHT.HOVER,
|
|
36
|
-
}
|
|
37
|
-
default:
|
|
38
|
-
return {}
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
const StyledBanner = styled.div<IStyledBanner>`
|
|
43
|
-
${CSS_RESET};
|
|
44
|
-
|
|
45
|
-
display: flex;
|
|
46
|
-
align-items: center;
|
|
47
|
-
padding: 0.75rem;
|
|
48
|
-
background: ${({ type }) => generateStyles(type).background};
|
|
49
|
-
color: ${({ type }) => generateStyles(type).color};
|
|
50
|
-
border: 1px solid ${({ type }) => generateStyles(type).borderColor};
|
|
51
|
-
|
|
52
|
-
&:hover {
|
|
53
|
-
background: ${({ type, canClick }) => (canClick ? generateStyles(type).hover : generateStyles(type).background)};
|
|
54
|
-
cursor: ${({ canClick }) => (canClick ? 'pointer' : 'default')};
|
|
55
|
-
}
|
|
56
|
-
`
|
|
57
|
-
|
|
58
|
-
const StyledButtonBanner = styled.button<IStyledButtonBanner>`
|
|
59
|
-
${CSS_RESET};
|
|
60
|
-
|
|
61
|
-
display: flex;
|
|
62
|
-
align-items: center;
|
|
63
|
-
padding: 0.75rem;
|
|
64
|
-
background: ${({ buttonBannerType }) => generateStyles(buttonBannerType).background};
|
|
65
|
-
color: ${({ buttonBannerType }) => generateStyles(buttonBannerType).color};
|
|
66
|
-
border: 1px solid ${({ buttonBannerType }) => generateStyles(buttonBannerType).borderColor};
|
|
67
|
-
|
|
68
|
-
width: 100%;
|
|
69
|
-
justify-content: center;
|
|
70
|
-
white-space: nowrap;
|
|
71
|
-
|
|
72
|
-
&:hover:not([disabled]) {
|
|
73
|
-
background: ${({ buttonBannerType }) => generateStyles(buttonBannerType).hover};
|
|
74
|
-
cursor: pointer;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
&:disabled {
|
|
78
|
-
opacity: 0.65;
|
|
79
|
-
cursor: not-allowed;
|
|
80
|
-
}
|
|
81
|
-
`
|
|
82
|
-
|
|
83
|
-
const BannerContent = styled.div`
|
|
84
|
-
flex: 1;
|
|
85
|
-
`
|
|
86
|
-
|
|
87
|
-
const StyledIcon = styled.div`
|
|
88
|
-
margin-right: 10px;
|
|
89
|
-
`
|
|
90
|
-
|
|
91
|
-
const canClick = (props: IBannerProps): boolean => props.onClick !== undefined
|
|
92
|
-
|
|
93
|
-
const Banner = forwardRef<HTMLDivElement, IBannerProps>(({ type = 'info', icon, children, ...rest }, ref) => (
|
|
94
|
-
<StyledBanner ref={ref} {...rest} type={type} canClick={canClick(rest)}>
|
|
95
|
-
{icon ? (
|
|
96
|
-
<StyledIcon>{icon}</StyledIcon>
|
|
97
|
-
) : (
|
|
98
|
-
<StyledIcon>
|
|
99
|
-
{type === 'info' && <Icon type="info-circle" color="info-blue" size="medium" />}
|
|
100
|
-
{type === 'warning' && <Icon type="exclamation" color="amber" size="medium" />}
|
|
101
|
-
{type === 'danger' && <Icon type="exclamation" color="red" size="medium" />}
|
|
102
|
-
</StyledIcon>
|
|
103
|
-
)}
|
|
104
|
-
<BannerContent>{children}</BannerContent>
|
|
105
|
-
{canClick(rest) && <Icon type="chevron" size="medium" direction="right" />}
|
|
106
|
-
</StyledBanner>
|
|
107
|
-
))
|
|
108
|
-
|
|
109
|
-
export const ButtonBanner: FC<IButtonBannerProps> = ({
|
|
110
|
-
type = 'info',
|
|
111
|
-
disabled = false,
|
|
112
|
-
icon,
|
|
113
|
-
children,
|
|
114
|
-
showChevron,
|
|
115
|
-
...rest
|
|
116
|
-
}) => (
|
|
117
|
-
<StyledButtonBanner {...rest} buttonBannerType={type} disabled={disabled}>
|
|
118
|
-
{icon ? (
|
|
119
|
-
<StyledIcon>{icon}</StyledIcon>
|
|
120
|
-
) : (
|
|
121
|
-
<StyledIcon>
|
|
122
|
-
{type === 'info' && <Icon type="info-circle" color="info-blue" size="medium" />}
|
|
123
|
-
{type === 'warning' && <Icon type="exclamation" color="amber" size="medium" />}
|
|
124
|
-
{type === 'danger' && <Icon type="exclamation" color="red" size="medium" />}
|
|
125
|
-
</StyledIcon>
|
|
126
|
-
)}
|
|
127
|
-
<BannerContent>{children}</BannerContent>
|
|
128
|
-
{showChevron === true && <Icon type="chevron" size="medium" direction="right" />}
|
|
129
|
-
</StyledButtonBanner>
|
|
130
|
-
)
|
|
131
|
-
|
|
132
|
-
export default Banner
|
|
133
|
-
|
|
134
|
-
interface IStyledBanner {
|
|
135
|
-
type: StatusTypes
|
|
136
|
-
canClick: boolean
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
interface IBannerProps extends HTMLAttributes<HTMLDivElement> {
|
|
140
|
-
type?: StatusTypes
|
|
141
|
-
icon?: ReactNode
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
interface IStyledButtonBanner {
|
|
145
|
-
buttonBannerType: StatusTypes
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
interface IButtonBannerProps extends HTMLAttributes<HTMLButtonElement> {
|
|
149
|
-
type?: StatusTypes
|
|
150
|
-
icon?: ReactNode
|
|
151
|
-
disabled?: boolean
|
|
152
|
-
showChevron?: boolean
|
|
153
|
-
}
|
|
1
|
+
import { FC, forwardRef, HTMLAttributes, ReactNode } from 'react'
|
|
2
|
+
import styled from '@emotion/styled'
|
|
3
|
+
import { BANNER_COLOURS, CSS_RESET } from '@ltht-react/styles'
|
|
4
|
+
import Icon from '@ltht-react/icon'
|
|
5
|
+
import { StatusTypes } from '@ltht-react/types'
|
|
6
|
+
|
|
7
|
+
const generateStyles = (type: StatusTypes) => {
|
|
8
|
+
switch (type) {
|
|
9
|
+
case 'info':
|
|
10
|
+
return {
|
|
11
|
+
background: BANNER_COLOURS.INFO.BACKGROUND,
|
|
12
|
+
borderColor: BANNER_COLOURS.INFO.BORDER,
|
|
13
|
+
color: BANNER_COLOURS.INFO.TEXT,
|
|
14
|
+
hover: BANNER_COLOURS.INFO.HOVER,
|
|
15
|
+
}
|
|
16
|
+
case 'warning':
|
|
17
|
+
return {
|
|
18
|
+
background: BANNER_COLOURS.WARNING.BACKGROUND,
|
|
19
|
+
borderColor: BANNER_COLOURS.WARNING.BORDER,
|
|
20
|
+
color: BANNER_COLOURS.WARNING.TEXT,
|
|
21
|
+
hover: BANNER_COLOURS.WARNING.HOVER,
|
|
22
|
+
}
|
|
23
|
+
case 'danger':
|
|
24
|
+
return {
|
|
25
|
+
background: BANNER_COLOURS.DANGER.BACKGROUND,
|
|
26
|
+
borderColor: BANNER_COLOURS.DANGER.BORDER,
|
|
27
|
+
color: BANNER_COLOURS.DANGER.TEXT,
|
|
28
|
+
hover: BANNER_COLOURS.DANGER.HOVER,
|
|
29
|
+
}
|
|
30
|
+
case 'highlight':
|
|
31
|
+
return {
|
|
32
|
+
background: BANNER_COLOURS.HIGHLIGHT.BACKGROUND,
|
|
33
|
+
borderColor: BANNER_COLOURS.HIGHLIGHT.BORDER,
|
|
34
|
+
color: BANNER_COLOURS.HIGHLIGHT.TEXT,
|
|
35
|
+
hover: BANNER_COLOURS.HIGHLIGHT.HOVER,
|
|
36
|
+
}
|
|
37
|
+
default:
|
|
38
|
+
return {}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const StyledBanner = styled.div<IStyledBanner>`
|
|
43
|
+
${CSS_RESET};
|
|
44
|
+
|
|
45
|
+
display: flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
padding: 0.75rem;
|
|
48
|
+
background: ${({ type }) => generateStyles(type).background};
|
|
49
|
+
color: ${({ type }) => generateStyles(type).color};
|
|
50
|
+
border: 1px solid ${({ type }) => generateStyles(type).borderColor};
|
|
51
|
+
|
|
52
|
+
&:hover {
|
|
53
|
+
background: ${({ type, canClick }) => (canClick ? generateStyles(type).hover : generateStyles(type).background)};
|
|
54
|
+
cursor: ${({ canClick }) => (canClick ? 'pointer' : 'default')};
|
|
55
|
+
}
|
|
56
|
+
`
|
|
57
|
+
|
|
58
|
+
const StyledButtonBanner = styled.button<IStyledButtonBanner>`
|
|
59
|
+
${CSS_RESET};
|
|
60
|
+
|
|
61
|
+
display: flex;
|
|
62
|
+
align-items: center;
|
|
63
|
+
padding: 0.75rem;
|
|
64
|
+
background: ${({ buttonBannerType }) => generateStyles(buttonBannerType).background};
|
|
65
|
+
color: ${({ buttonBannerType }) => generateStyles(buttonBannerType).color};
|
|
66
|
+
border: 1px solid ${({ buttonBannerType }) => generateStyles(buttonBannerType).borderColor};
|
|
67
|
+
|
|
68
|
+
width: 100%;
|
|
69
|
+
justify-content: center;
|
|
70
|
+
white-space: nowrap;
|
|
71
|
+
|
|
72
|
+
&:hover:not([disabled]) {
|
|
73
|
+
background: ${({ buttonBannerType }) => generateStyles(buttonBannerType).hover};
|
|
74
|
+
cursor: pointer;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&:disabled {
|
|
78
|
+
opacity: 0.65;
|
|
79
|
+
cursor: not-allowed;
|
|
80
|
+
}
|
|
81
|
+
`
|
|
82
|
+
|
|
83
|
+
const BannerContent = styled.div`
|
|
84
|
+
flex: 1;
|
|
85
|
+
`
|
|
86
|
+
|
|
87
|
+
const StyledIcon = styled.div`
|
|
88
|
+
margin-right: 10px;
|
|
89
|
+
`
|
|
90
|
+
|
|
91
|
+
const canClick = (props: IBannerProps): boolean => props.onClick !== undefined
|
|
92
|
+
|
|
93
|
+
const Banner = forwardRef<HTMLDivElement, IBannerProps>(({ type = 'info', icon, children, ...rest }, ref) => (
|
|
94
|
+
<StyledBanner ref={ref} {...rest} type={type} canClick={canClick(rest)}>
|
|
95
|
+
{icon ? (
|
|
96
|
+
<StyledIcon>{icon}</StyledIcon>
|
|
97
|
+
) : (
|
|
98
|
+
<StyledIcon>
|
|
99
|
+
{type === 'info' && <Icon type="info-circle" color="info-blue" size="medium" />}
|
|
100
|
+
{type === 'warning' && <Icon type="exclamation" color="amber" size="medium" />}
|
|
101
|
+
{type === 'danger' && <Icon type="exclamation" color="red" size="medium" />}
|
|
102
|
+
</StyledIcon>
|
|
103
|
+
)}
|
|
104
|
+
<BannerContent>{children}</BannerContent>
|
|
105
|
+
{canClick(rest) && <Icon type="chevron" size="medium" direction="right" />}
|
|
106
|
+
</StyledBanner>
|
|
107
|
+
))
|
|
108
|
+
|
|
109
|
+
export const ButtonBanner: FC<IButtonBannerProps> = ({
|
|
110
|
+
type = 'info',
|
|
111
|
+
disabled = false,
|
|
112
|
+
icon,
|
|
113
|
+
children,
|
|
114
|
+
showChevron,
|
|
115
|
+
...rest
|
|
116
|
+
}) => (
|
|
117
|
+
<StyledButtonBanner {...rest} buttonBannerType={type} disabled={disabled}>
|
|
118
|
+
{icon ? (
|
|
119
|
+
<StyledIcon>{icon}</StyledIcon>
|
|
120
|
+
) : (
|
|
121
|
+
<StyledIcon>
|
|
122
|
+
{type === 'info' && <Icon type="info-circle" color="info-blue" size="medium" />}
|
|
123
|
+
{type === 'warning' && <Icon type="exclamation" color="amber" size="medium" />}
|
|
124
|
+
{type === 'danger' && <Icon type="exclamation" color="red" size="medium" />}
|
|
125
|
+
</StyledIcon>
|
|
126
|
+
)}
|
|
127
|
+
<BannerContent>{children}</BannerContent>
|
|
128
|
+
{showChevron === true && <Icon type="chevron" size="medium" direction="right" />}
|
|
129
|
+
</StyledButtonBanner>
|
|
130
|
+
)
|
|
131
|
+
|
|
132
|
+
export default Banner
|
|
133
|
+
|
|
134
|
+
interface IStyledBanner {
|
|
135
|
+
type: StatusTypes
|
|
136
|
+
canClick: boolean
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
interface IBannerProps extends HTMLAttributes<HTMLDivElement> {
|
|
140
|
+
type?: StatusTypes
|
|
141
|
+
icon?: ReactNode
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
interface IStyledButtonBanner {
|
|
145
|
+
buttonBannerType: StatusTypes
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
interface IButtonBannerProps extends HTMLAttributes<HTMLButtonElement> {
|
|
149
|
+
type?: StatusTypes
|
|
150
|
+
icon?: ReactNode
|
|
151
|
+
disabled?: boolean
|
|
152
|
+
showChevron?: boolean
|
|
153
|
+
}
|