@hero-design/rn 8.25.0 → 8.25.2

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 (30) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/es/index.js +67 -61
  3. package/lib/index.js +65 -59
  4. package/package.json +5 -5
  5. package/src/components/Collapse/index.tsx +11 -10
  6. package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap +21 -15
  7. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap +7 -5
  8. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap +7 -5
  9. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +7 -5
  10. package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap +152 -180
  11. package/src/components/FAB/FAB.tsx +15 -20
  12. package/src/components/FAB/StyledFAB.tsx +5 -10
  13. package/src/components/FAB/__tests__/StyledFAB.spec.tsx +4 -4
  14. package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap +28 -13
  15. package/src/components/FAB/__tests__/__snapshots__/index.spec.tsx.snap +170 -212
  16. package/src/components/PinInput/index.tsx +119 -88
  17. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +28 -20
  18. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +28 -20
  19. package/src/components/TextInput/StyledTextInput.tsx +4 -0
  20. package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap +21 -1
  21. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +112 -78
  22. package/src/components/TextInput/index.tsx +1 -4
  23. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap +14 -10
  24. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +14 -10
  25. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +5 -1
  26. package/src/theme/components/textInput.ts +16 -2
  27. package/types/components/Collapse/index.d.ts +1 -1
  28. package/types/components/FAB/StyledFAB.d.ts +1 -5
  29. package/types/components/PinInput/index.d.ts +12 -1
  30. package/types/theme/components/textInput.d.ts +4 -0
package/src/components/FAB/StyledFAB.tsx CHANGED
@@ -1,7 +1,6 @@
1
1
  import styled from '@emotion/native';
2
2
  import type { TextProps, TouchableHighlightProps } from 'react-native';
3
3
  import { TouchableHighlight } from 'react-native';
4
- import Box from '../Box';
5
4
  import type { IconProps } from '../Icon';
6
5
  import Icon from '../Icon';
7
6
  import Typography from '../Typography';
@@ -12,12 +11,15 @@ const StyledFAB = styled(TouchableHighlight)<TouchableHighlightProps>(
12
11
  borderRadius: theme.radii.rounded,
13
12
  alignItems: 'center',
14
13
  justifyContent: 'center',
15
- overflow: 'hidden',
16
14
  alignSelf: 'flex-start',
17
15
  paddingHorizontal: theme.__hd__.fab.space.containerPaddingHorizontal,
18
16
  paddingVertical: theme.__hd__.fab.space.containerPaddingVertical,
19
17
  flexDirection: 'row',
20
18
  elevation: theme.__hd__.fab.shadows.elevation,
19
+ shadowColor: theme.__hd__.fab.colors.shadow,
20
+ shadowOffset: theme.__hd__.fab.shadows.offset,
21
+ shadowRadius: theme.__hd__.fab.shadows.radius,
22
+ shadowOpacity: theme.__hd__.fab.shadows.opacity,
21
23
  })
22
24
  );
23
25
 
@@ -38,11 +40,4 @@ const StyledFABText = styled(Typography.Text)<TextProps>(({ theme }) => ({
38
40
  marginHorizontal: theme.__hd__.fab.space.titleMarginHorizontal,
39
41
  }));
40
42
 
41
- const StyledFABContainer = styled(Box)(({ theme }) => ({
42
- shadowColor: theme.__hd__.fab.colors.shadow,
43
- shadowOffset: theme.__hd__.fab.shadows.offset,
44
- shadowRadius: theme.__hd__.fab.shadows.radius,
45
- shadowOpacity: theme.__hd__.fab.shadows.opacity,
46
- }));
47
-
48
- export { StyledFAB, StyledFABIcon, StyledFABText, StyledFABContainer };
43
+ export { StyledFAB, StyledFABIcon, StyledFABText };
package/src/components/FAB/__tests__/StyledFAB.spec.tsx CHANGED
@@ -1,14 +1,14 @@
1
1
  import React from 'react';
2
2
  import renderWithTheme from '../../../testHelpers/renderWithTheme';
3
3
  import { Typography } from '../../../index';
4
- import { StyledFABContainer, StyledFABIcon } from '../StyledFAB';
4
+ import { StyledFAB, StyledFABIcon } from '../StyledFAB';
5
5
 
6
- describe('StyledFABContainer', () => {
6
+ describe('StyledFAB', () => {
7
7
  it('renders correctly', () => {
8
8
  const { toJSON } = renderWithTheme(
9
- <StyledFABContainer>
9
+ <StyledFAB>
10
10
  <Typography.Text> button </Typography.Text>
11
- </StyledFABContainer>
11
+ </StyledFAB>
12
12
  );
13
13
 
14
14
  expect(toJSON()).toMatchSnapshot();
package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap CHANGED
@@ -1,22 +1,37 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`StyledFABContainer renders correctly 1`] = `
3
+ exports[`StyledFAB renders correctly 1`] = `
4
4
  <View
5
+ accessible={true}
6
+ focusable={false}
7
+ onClick={[Function]}
8
+ onResponderGrant={[Function]}
9
+ onResponderMove={[Function]}
10
+ onResponderRelease={[Function]}
11
+ onResponderTerminate={[Function]}
12
+ onResponderTerminationRequest={[Function]}
13
+ onStartShouldSetResponder={[Function]}
5
14
  style={
6
15
  Array [
7
- Object {},
8
- Array [
9
- Object {
10
- "shadowColor": "#001f23",
11
- "shadowOffset": Object {
12
- "height": 2,
13
- "width": 0,
14
- },
15
- "shadowOpacity": 0.12,
16
- "shadowRadius": 8,
16
+ Object {
17
+ "alignItems": "center",
18
+ "alignSelf": "flex-start",
19
+ "backgroundColor": "#401960",
20
+ "borderRadius": 999,
21
+ "elevation": 2,
22
+ "flexDirection": "row",
23
+ "justifyContent": "center",
24
+ "paddingHorizontal": 16,
25
+ "paddingVertical": 16,
26
+ "shadowColor": "#001f23",
27
+ "shadowOffset": Object {
28
+ "height": 2,
29
+ "width": 0,
17
30
  },
18
- undefined,
19
- ],
31
+ "shadowOpacity": 0.12,
32
+ "shadowRadius": 8,
33
+ },
34
+ undefined,
20
35
  ]
21
36
  }
22
37
  >
package/src/components/FAB/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -2,53 +2,115 @@
2
2
 
3
3
  exports[`FAB when animated is false renders StyledFABIcon 1`] = `
4
4
  <View
5
+ accessible={true}
6
+ focusable={false}
7
+ onClick={[Function]}
8
+ onResponderGrant={[Function]}
9
+ onResponderMove={[Function]}
10
+ onResponderRelease={[Function]}
11
+ onResponderTerminate={[Function]}
12
+ onResponderTerminationRequest={[Function]}
13
+ onStartShouldSetResponder={[Function]}
5
14
  style={
6
15
  Array [
7
- Object {},
8
- Array [
9
- Object {
10
- "shadowColor": "#001f23",
11
- "shadowOffset": Object {
12
- "height": 2,
13
- "width": 0,
14
- },
15
- "shadowOpacity": 0.12,
16
- "shadowRadius": 8,
16
+ Object {
17
+ "alignItems": "center",
18
+ "alignSelf": "flex-start",
19
+ "backgroundColor": "#401960",
20
+ "borderRadius": 999,
21
+ "elevation": 2,
22
+ "flexDirection": "row",
23
+ "justifyContent": "center",
24
+ "paddingHorizontal": 16,
25
+ "paddingVertical": 16,
26
+ "shadowColor": "#001f23",
27
+ "shadowOffset": Object {
28
+ "height": 2,
29
+ "width": 0,
17
30
  },
18
- Object {
19
- "backgroundColor": "#001f23",
20
- },
21
- ],
31
+ "shadowOpacity": 0.12,
32
+ "shadowRadius": 8,
33
+ },
34
+ Object {
35
+ "backgroundColor": "#001f23",
36
+ },
22
37
  ]
23
38
  }
24
39
  >
25
- <View
26
- accessible={true}
27
- focusable={false}
28
- onClick={[Function]}
29
- onResponderGrant={[Function]}
30
- onResponderMove={[Function]}
31
- onResponderRelease={[Function]}
32
- onResponderTerminate={[Function]}
33
- onResponderTerminationRequest={[Function]}
34
- onStartShouldSetResponder={[Function]}
40
+ <HeroIcon
41
+ name="add"
35
42
  style={
36
43
  Array [
37
44
  Object {
38
- "alignItems": "center",
39
- "alignSelf": "flex-start",
40
- "backgroundColor": "#401960",
41
- "borderRadius": 999,
42
- "elevation": 2,
43
- "flexDirection": "row",
44
- "justifyContent": "center",
45
- "overflow": "hidden",
46
- "paddingHorizontal": 16,
47
- "paddingVertical": 16,
45
+ "color": "#001f23",
46
+ "fontSize": 24,
48
47
  },
49
- undefined,
48
+ Array [
49
+ Object {
50
+ "color": "#ffffff",
51
+ "lineHeight": 24,
52
+ "textAlign": "center",
53
+ "textAlignVertical": "center",
54
+ },
55
+ undefined,
56
+ ],
50
57
  ]
51
58
  }
59
+ testID="styled-fab-icon"
60
+ themeIntent="text"
61
+ themeSize="medium"
62
+ />
63
+ </View>
64
+ `;
65
+
66
+ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
67
+ <View
68
+ accessible={true}
69
+ focusable={false}
70
+ onClick={[Function]}
71
+ onResponderGrant={[Function]}
72
+ onResponderMove={[Function]}
73
+ onResponderRelease={[Function]}
74
+ onResponderTerminate={[Function]}
75
+ onResponderTerminationRequest={[Function]}
76
+ onStartShouldSetResponder={[Function]}
77
+ style={
78
+ Array [
79
+ Object {
80
+ "alignItems": "center",
81
+ "alignSelf": "flex-start",
82
+ "backgroundColor": "#401960",
83
+ "borderRadius": 999,
84
+ "elevation": 2,
85
+ "flexDirection": "row",
86
+ "justifyContent": "center",
87
+ "paddingHorizontal": 16,
88
+ "paddingVertical": 16,
89
+ "shadowColor": "#001f23",
90
+ "shadowOffset": Object {
91
+ "height": 2,
92
+ "width": 0,
93
+ },
94
+ "shadowOpacity": 0.12,
95
+ "shadowRadius": 8,
96
+ },
97
+ Object {
98
+ "backgroundColor": "#001f23",
99
+ },
100
+ ]
101
+ }
102
+ >
103
+ <View
104
+ collapsable={false}
105
+ style={
106
+ Object {
107
+ "transform": Array [
108
+ Object {
109
+ "rotate": "0deg",
110
+ },
111
+ ],
112
+ }
113
+ }
52
114
  >
53
115
  <HeroIcon
54
116
  name="add"
@@ -65,11 +127,11 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
65
127
  "textAlign": "center",
66
128
  "textAlignVertical": "center",
67
129
  },
68
- undefined,
130
+ Object {},
69
131
  ],
70
132
  ]
71
133
  }
72
- testID="styled-fab-icon"
134
+ testID="animated-fab-icon"
73
135
  themeIntent="text"
74
136
  themeSize="medium"
75
137
  />
@@ -77,201 +139,97 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
77
139
  </View>
78
140
  `;
79
141
 
80
- exports[`FAB when animated is true renders animatedFABIcon 1`] = `
142
+ exports[`FAB when title has value renders correctly 1`] = `
81
143
  <View
144
+ accessible={true}
145
+ focusable={false}
146
+ onClick={[Function]}
147
+ onResponderGrant={[Function]}
148
+ onResponderMove={[Function]}
149
+ onResponderRelease={[Function]}
150
+ onResponderTerminate={[Function]}
151
+ onResponderTerminationRequest={[Function]}
152
+ onStartShouldSetResponder={[Function]}
82
153
  style={
83
154
  Array [
84
- Object {},
85
- Array [
86
- Object {
87
- "shadowColor": "#001f23",
88
- "shadowOffset": Object {
89
- "height": 2,
90
- "width": 0,
91
- },
92
- "shadowOpacity": 0.12,
93
- "shadowRadius": 8,
94
- },
95
- Object {
96
- "backgroundColor": "#001f23",
155
+ Object {
156
+ "alignItems": "center",
157
+ "alignSelf": "flex-start",
158
+ "backgroundColor": "#401960",
159
+ "borderRadius": 999,
160
+ "elevation": 2,
161
+ "flexDirection": "row",
162
+ "justifyContent": "center",
163
+ "paddingHorizontal": 16,
164
+ "paddingVertical": 16,
165
+ "shadowColor": "#001f23",
166
+ "shadowOffset": Object {
167
+ "height": 2,
168
+ "width": 0,
97
169
  },
98
- ],
170
+ "shadowOpacity": 0.12,
171
+ "shadowRadius": 8,
172
+ },
173
+ Object {
174
+ "backgroundColor": "#001f23",
175
+ },
99
176
  ]
100
177
  }
101
178
  >
102
- <View
103
- accessible={true}
104
- focusable={false}
105
- onClick={[Function]}
106
- onResponderGrant={[Function]}
107
- onResponderMove={[Function]}
108
- onResponderRelease={[Function]}
109
- onResponderTerminate={[Function]}
110
- onResponderTerminationRequest={[Function]}
111
- onStartShouldSetResponder={[Function]}
179
+ <HeroIcon
180
+ name="pencil"
112
181
  style={
113
182
  Array [
114
183
  Object {
115
- "alignItems": "center",
116
- "alignSelf": "flex-start",
117
- "backgroundColor": "#401960",
118
- "borderRadius": 999,
119
- "elevation": 2,
120
- "flexDirection": "row",
121
- "justifyContent": "center",
122
- "overflow": "hidden",
123
- "paddingHorizontal": 16,
124
- "paddingVertical": 16,
184
+ "color": "#001f23",
185
+ "fontSize": 16,
125
186
  },
126
- undefined,
187
+ Array [
188
+ Object {
189
+ "color": "#ffffff",
190
+ "lineHeight": 24,
191
+ "textAlign": "center",
192
+ "textAlignVertical": "center",
193
+ },
194
+ undefined,
195
+ ],
127
196
  ]
128
197
  }
129
- >
130
- <View
131
- collapsable={false}
132
- style={
133
- Object {
134
- "transform": Array [
135
- Object {
136
- "rotate": "0deg",
137
- },
138
- ],
139
- }
140
- }
141
- >
142
- <HeroIcon
143
- name="add"
144
- style={
145
- Array [
146
- Object {
147
- "color": "#001f23",
148
- "fontSize": 24,
149
- },
150
- Array [
151
- Object {
152
- "color": "#ffffff",
153
- "lineHeight": 24,
154
- "textAlign": "center",
155
- "textAlignVertical": "center",
156
- },
157
- Object {},
158
- ],
159
- ]
160
- }
161
- testID="animated-fab-icon"
162
- themeIntent="text"
163
- themeSize="medium"
164
- />
165
- </View>
166
- </View>
167
- </View>
168
- `;
169
-
170
- exports[`FAB when title has value renders correctly 1`] = `
171
- <View
172
- style={
173
- Array [
174
- Object {},
175
- Array [
176
- Object {
177
- "shadowColor": "#001f23",
178
- "shadowOffset": Object {
179
- "height": 2,
180
- "width": 0,
181
- },
182
- "shadowOpacity": 0.12,
183
- "shadowRadius": 8,
184
- },
185
- Object {
186
- "backgroundColor": "#001f23",
187
- },
188
- ],
189
- ]
190
- }
191
- >
192
- <View
193
- accessible={true}
194
- focusable={false}
195
- onClick={[Function]}
196
- onResponderGrant={[Function]}
197
- onResponderMove={[Function]}
198
- onResponderRelease={[Function]}
199
- onResponderTerminate={[Function]}
200
- onResponderTerminationRequest={[Function]}
201
- onStartShouldSetResponder={[Function]}
198
+ testID="styled-fab-icon"
199
+ themeIntent="text"
200
+ themeSize="xsmall"
201
+ />
202
+ <Text
203
+ allowFontScaling={false}
202
204
  style={
203
205
  Array [
204
206
  Object {
205
- "alignItems": "center",
206
- "alignSelf": "flex-start",
207
- "backgroundColor": "#401960",
208
- "borderRadius": 999,
209
- "elevation": 2,
210
- "flexDirection": "row",
211
- "justifyContent": "center",
212
- "overflow": "hidden",
213
- "paddingHorizontal": 16,
214
- "paddingVertical": 16,
207
+ "color": "#001f23",
208
+ "fontFamily": "BeVietnamPro-Regular",
209
+ "fontSize": 14,
210
+ "letterSpacing": 0.42,
211
+ "lineHeight": 22,
215
212
  },
216
- undefined,
217
- ]
218
- }
219
- >
220
- <HeroIcon
221
- name="pencil"
222
- style={
223
213
  Array [
224
214
  Object {
225
- "color": "#001f23",
215
+ "color": "#ffffff",
216
+ "fontFamily": "BeVietnamPro-SemiBold",
226
217
  "fontSize": 16,
218
+ "lineHeight": 24,
219
+ "marginHorizontal": 8,
220
+ "textAlign": "center",
221
+ "textAlignVertical": "center",
227
222
  },
228
- Array [
229
- Object {
230
- "color": "#ffffff",
231
- "lineHeight": 24,
232
- "textAlign": "center",
233
- "textAlignVertical": "center",
234
- },
235
- undefined,
236
- ],
237
- ]
238
- }
239
- testID="styled-fab-icon"
240
- themeIntent="text"
241
- themeSize="xsmall"
242
- />
243
- <Text
244
- allowFontScaling={false}
245
- style={
246
- Array [
247
- Object {
248
- "color": "#001f23",
249
- "fontFamily": "BeVietnamPro-Regular",
250
- "fontSize": 14,
251
- "letterSpacing": 0.42,
252
- "lineHeight": 22,
253
- },
254
- Array [
255
- Object {
256
- "color": "#ffffff",
257
- "fontFamily": "BeVietnamPro-SemiBold",
258
- "fontSize": 16,
259
- "lineHeight": 24,
260
- "marginHorizontal": 8,
261
- "textAlign": "center",
262
- "textAlignVertical": "center",
263
- },
264
- undefined,
265
- ],
266
- ]
267
- }
268
- themeFontSize="medium"
269
- themeFontWeight="regular"
270
- themeIntent="body"
271
- themeTypeface="neutral"
272
- >
273
- Shout out
274
- </Text>
275
- </View>
223
+ undefined,
224
+ ],
225
+ ]
226
+ }
227
+ themeFontSize="medium"
228
+ themeFontWeight="regular"
229
+ themeIntent="body"
230
+ themeTypeface="neutral"
231
+ >
232
+ Shout out
233
+ </Text>
276
234
  </View>
277
235
  `;