@hero-design/rn 7.0.2 → 7.0.3
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/package.json +2 -2
- package/playground/components/Card.tsx +223 -37
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hero-design/rn",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"publish:npm": "yarn publish --access public"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@hero-design/colors": "7.0.
|
|
20
|
+
"@hero-design/colors": "7.0.3",
|
|
21
21
|
"styled-components": "6.0.0-alpha.5"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
@@ -1,51 +1,237 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { View } from 'react-native';
|
|
3
|
-
import {
|
|
1
|
+
import React, { ComponentProps } from 'react';
|
|
2
|
+
import { View, ViewProps, StyleSheet } from 'react-native';
|
|
3
|
+
import { palette } from '@hero-design/colors';
|
|
4
|
+
import { Card, useTheme, Typography, Icon, Divider } from '../../src/index';
|
|
4
5
|
|
|
5
|
-
const
|
|
6
|
+
const TextBox = (props: ViewProps) => (
|
|
7
|
+
<View
|
|
8
|
+
style={{
|
|
9
|
+
flex: 1,
|
|
10
|
+
justifyContent: 'flex-end',
|
|
11
|
+
}}
|
|
12
|
+
{...props}
|
|
13
|
+
/>
|
|
14
|
+
);
|
|
15
|
+
|
|
16
|
+
const Screen = View;
|
|
17
|
+
type DashboardCardProps = ViewProps & {
|
|
18
|
+
icon: ComponentProps<typeof Icon>['icon'];
|
|
19
|
+
title: string;
|
|
20
|
+
subtitle: string;
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const DashboardCard = ({
|
|
24
|
+
style,
|
|
25
|
+
icon,
|
|
26
|
+
title,
|
|
27
|
+
subtitle,
|
|
28
|
+
}: DashboardCardProps) => (
|
|
29
|
+
<Card testID="inductionContent" style={style}>
|
|
30
|
+
<View style={{ flex: 1, alignItems: 'flex-end' }}>
|
|
31
|
+
<Icon icon={icon} />
|
|
32
|
+
</View>
|
|
33
|
+
<TextBox>
|
|
34
|
+
<Typography.Text fontSize="xlarge" fontWeight="semi-bold">
|
|
35
|
+
{title}
|
|
36
|
+
</Typography.Text>
|
|
37
|
+
<Typography.Text fontSize="medium">{subtitle}</Typography.Text>
|
|
38
|
+
</TextBox>
|
|
39
|
+
</Card>
|
|
40
|
+
);
|
|
41
|
+
|
|
42
|
+
const InductionCard = (props: ViewProps) => (
|
|
43
|
+
<DashboardCard
|
|
44
|
+
icon="file-verified"
|
|
45
|
+
title="Induction Content"
|
|
46
|
+
subtitle="2 files to acknowledge"
|
|
47
|
+
{...props}
|
|
48
|
+
/>
|
|
49
|
+
);
|
|
50
|
+
const PoliciesCard = (props: ViewProps) => (
|
|
51
|
+
<DashboardCard
|
|
52
|
+
icon="file-secured"
|
|
53
|
+
title="Policies"
|
|
54
|
+
subtitle="1 to acknowledge"
|
|
55
|
+
{...props}
|
|
56
|
+
/>
|
|
57
|
+
);
|
|
58
|
+
|
|
59
|
+
const CertificationsCard = (props: ViewProps) => (
|
|
60
|
+
<DashboardCard
|
|
61
|
+
icon="file-certified"
|
|
62
|
+
title="Certification"
|
|
63
|
+
subtitle="1 to update"
|
|
64
|
+
{...props}
|
|
65
|
+
/>
|
|
66
|
+
);
|
|
67
|
+
|
|
68
|
+
const Payslip = (props: ViewProps) => {
|
|
6
69
|
const theme = useTheme();
|
|
70
|
+
const { style, ...otherProps } = props;
|
|
7
71
|
return (
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
72
|
+
<Card
|
|
73
|
+
{...otherProps}
|
|
74
|
+
style={StyleSheet.flatten([
|
|
75
|
+
{
|
|
76
|
+
flexDirection: 'row',
|
|
77
|
+
alignItems: 'stretch',
|
|
78
|
+
backgroundColor: palette.greyLight75,
|
|
79
|
+
},
|
|
80
|
+
style,
|
|
81
|
+
])}
|
|
14
82
|
>
|
|
15
|
-
<
|
|
83
|
+
<View>
|
|
84
|
+
<View
|
|
85
|
+
style={{
|
|
86
|
+
padding: theme.space.small,
|
|
87
|
+
backgroundColor: '#C0ECE6',
|
|
88
|
+
borderRadius: 999,
|
|
89
|
+
alignContent: 'stretch',
|
|
90
|
+
}}
|
|
91
|
+
>
|
|
92
|
+
<Icon icon="coin" />
|
|
93
|
+
</View>
|
|
94
|
+
</View>
|
|
95
|
+
<View style={{ flex: 1, marginLeft: theme.space.small }}>
|
|
96
|
+
<Typography.Text fontSize="large" fontWeight="semi-bold">
|
|
97
|
+
Rosters
|
|
98
|
+
</Typography.Text>
|
|
99
|
+
<Typography.Text fontSize="medium">3 shifts this week</Typography.Text>
|
|
100
|
+
</View>
|
|
101
|
+
<View
|
|
16
102
|
style={{
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
103
|
+
alignItems: 'center',
|
|
104
|
+
alignContent: 'center',
|
|
105
|
+
justifyContent: 'center',
|
|
20
106
|
}}
|
|
21
107
|
>
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
108
|
+
<Icon icon="arrow-right" />
|
|
109
|
+
</View>
|
|
110
|
+
</Card>
|
|
111
|
+
);
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
const MyLeaveCard = (props: ViewProps) => {
|
|
115
|
+
const theme = useTheme();
|
|
116
|
+
const { style, ...otherProps } = props;
|
|
117
|
+
return (
|
|
118
|
+
<Card
|
|
119
|
+
{...otherProps}
|
|
120
|
+
style={StyleSheet.flatten([
|
|
121
|
+
{
|
|
122
|
+
backgroundColor: palette.greyLight90,
|
|
123
|
+
paddingBottom: 0,
|
|
124
|
+
paddingTop: 0,
|
|
125
|
+
paddingRight: 0,
|
|
126
|
+
paddingLeft: 0,
|
|
127
|
+
},
|
|
128
|
+
style,
|
|
129
|
+
])}
|
|
130
|
+
>
|
|
131
|
+
<View
|
|
132
|
+
testID="header"
|
|
32
133
|
style={{
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
134
|
+
marginHorizontal: theme.space.small,
|
|
135
|
+
marginTop: theme.space.small,
|
|
136
|
+
justifyContent: 'space-between',
|
|
36
137
|
flexDirection: 'row',
|
|
37
|
-
marginTop: theme.space.large,
|
|
38
138
|
}}
|
|
39
139
|
>
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
140
|
+
<Typography.Text fontSize="large" fontWeight="semi-bold">
|
|
141
|
+
My Leave
|
|
142
|
+
</Typography.Text>
|
|
143
|
+
|
|
144
|
+
<View style={{ flexDirection: 'row' }}>
|
|
145
|
+
<Typography.Text fontWeight="semi-bold">Add /view</Typography.Text>
|
|
146
|
+
<Icon
|
|
147
|
+
icon="circle-add-outlined"
|
|
148
|
+
size="xsmall"
|
|
149
|
+
style={{ margin: theme.space.xxsmall }}
|
|
150
|
+
/>
|
|
151
|
+
</View>
|
|
152
|
+
</View>
|
|
153
|
+
<Divider marginVertical="small" />
|
|
154
|
+
<View testID="content" style={{ margin: theme.space.small }}>
|
|
155
|
+
<Typography.Text fontSize="medium" fontWeight="semi-bold">
|
|
156
|
+
Leave Balances
|
|
157
|
+
</Typography.Text>
|
|
158
|
+
<View
|
|
159
|
+
testID="listItem1"
|
|
160
|
+
style={{ flexDirection: 'row', justifyContent: 'space-between' }}
|
|
161
|
+
>
|
|
162
|
+
<Typography.Text>Jury Duty</Typography.Text>
|
|
163
|
+
<Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
|
|
164
|
+
</View>
|
|
165
|
+
<View
|
|
166
|
+
testID="listItem1"
|
|
167
|
+
style={{ flexDirection: 'row', justifyContent: 'space-between' }}
|
|
168
|
+
>
|
|
169
|
+
<Typography.Text>Annual Leave</Typography.Text>
|
|
170
|
+
<Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
|
|
171
|
+
</View>
|
|
172
|
+
<View
|
|
173
|
+
testID="listItem1"
|
|
174
|
+
style={{ flexDirection: 'row', justifyContent: 'space-between' }}
|
|
175
|
+
>
|
|
176
|
+
<Typography.Text>Values Champion Award</Typography.Text>
|
|
177
|
+
<Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
|
|
178
|
+
</View>
|
|
179
|
+
<View
|
|
180
|
+
testID="listItem1"
|
|
181
|
+
style={{ flexDirection: 'row', justifyContent: 'space-between' }}
|
|
182
|
+
>
|
|
183
|
+
<Typography.Text>Family and Domestic</Typography.Text>
|
|
184
|
+
<Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
|
|
185
|
+
</View>
|
|
186
|
+
</View>
|
|
187
|
+
</Card>
|
|
188
|
+
);
|
|
189
|
+
};
|
|
190
|
+
|
|
191
|
+
const CardPlayground = () => {
|
|
192
|
+
const theme = useTheme();
|
|
193
|
+
return (
|
|
194
|
+
<Screen>
|
|
195
|
+
<View style={{ flexDirection: 'row', height: 250 }}>
|
|
196
|
+
<View style={{ flex: 1 }}>
|
|
197
|
+
<InductionCard
|
|
198
|
+
style={{
|
|
199
|
+
flex: 1,
|
|
200
|
+
margin: theme.space.small,
|
|
201
|
+
backgroundColor: theme.colors.primaryLight,
|
|
202
|
+
}}
|
|
203
|
+
/>
|
|
204
|
+
</View>
|
|
205
|
+
<View style={{ flex: 1 }}>
|
|
206
|
+
<PoliciesCard
|
|
207
|
+
style={{
|
|
208
|
+
flex: 1,
|
|
209
|
+
backgroundColor: palette.dodgerBlueLight75,
|
|
210
|
+
margin: theme.space.small,
|
|
211
|
+
}}
|
|
212
|
+
testID="policies"
|
|
213
|
+
/>
|
|
214
|
+
<CertificationsCard
|
|
215
|
+
style={{
|
|
216
|
+
flex: 1,
|
|
217
|
+
margin: theme.space.small,
|
|
218
|
+
backgroundColor: palette.dodgerBlueLight75,
|
|
219
|
+
}}
|
|
220
|
+
testID="certifications"
|
|
221
|
+
/>
|
|
222
|
+
</View>
|
|
223
|
+
</View>
|
|
224
|
+
<Payslip
|
|
225
|
+
style={{
|
|
226
|
+
margin: theme.space.small,
|
|
227
|
+
}}
|
|
228
|
+
/>
|
|
229
|
+
<MyLeaveCard
|
|
230
|
+
style={{
|
|
231
|
+
margin: theme.space.small,
|
|
232
|
+
}}
|
|
233
|
+
/>
|
|
234
|
+
</Screen>
|
|
49
235
|
);
|
|
50
236
|
};
|
|
51
237
|
|