@ltht-react/banner 2.0.3 → 2.0.4

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.
Files changed (2) hide show
  1. package/package.json +8 -7
  2. package/src/index.tsx +153 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ltht-react/banner",
3
- "version": "2.0.3",
3
+ "version": "2.0.4",
4
4
  "description": "ltht-react Banner Component.",
5
5
  "author": "LTHT",
6
6
  "homepage": "",
@@ -8,7 +8,8 @@
8
8
  "main": "lib/index.js",
9
9
  "typings": "lib/index.d.ts",
10
10
  "files": [
11
- "lib"
11
+ "lib",
12
+ "src"
12
13
  ],
13
14
  "directories": {
14
15
  "lib": "lib"
@@ -27,11 +28,11 @@
27
28
  "dependencies": {
28
29
  "@emotion/react": "^11.0.0",
29
30
  "@emotion/styled": "^11.0.0",
30
- "@ltht-react/icon": "^2.0.3",
31
- "@ltht-react/styles": "^2.0.3",
32
- "@ltht-react/types": "^2.0.3",
33
- "@ltht-react/utils": "^2.0.3",
31
+ "@ltht-react/icon": "^2.0.4",
32
+ "@ltht-react/styles": "^2.0.4",
33
+ "@ltht-react/types": "^2.0.4",
34
+ "@ltht-react/utils": "^2.0.4",
34
35
  "react": "^18.2.0"
35
36
  },
36
- "gitHead": "6f18742bbf2f44123b6478257e52fbbdd291a25b"
37
+ "gitHead": "b8fe243323a0f1b9ab345475db38c73fd3b35312"
37
38
  }
package/src/index.tsx ADDED
@@ -0,0 +1,153 @@
1
+ import { FC, 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: FC<IBannerProps> = ({ type = 'info', icon, children, ...rest }) => (
94
+ <StyledBanner {...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
+ }