@utilitywarehouse/hearth-react-native 0.28.4 → 0.28.5
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/.turbo/turbo-build.log +1 -1
- package/.turbo/turbo-lint.log +13 -13
- package/CHANGELOG.md +6 -0
- package/build/components/Banner/Banner.js +3 -1
- package/build/components/Banner/BannerIllustration.js +4 -9
- package/package.json +1 -1
- package/src/components/Banner/Banner.stories.tsx +2 -6
- package/src/components/Banner/Banner.tsx +3 -1
- package/src/components/Banner/BannerIllustration.tsx +4 -9
- package/src/components/Icon/Icon.docs.mdx +13 -10
package/.turbo/turbo-build.log
CHANGED
package/.turbo/turbo-lint.log
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @utilitywarehouse/hearth-react-native@0.28.
|
|
2
|
+
> @utilitywarehouse/hearth-react-native@0.28.5 lint /home/runner/work/hearth/hearth/packages/react-native
|
|
3
3
|
> TIMING=1 eslint .
|
|
4
4
|
|
|
5
5
|
|
|
@@ -54,15 +54,15 @@
|
|
|
54
54
|
|
|
55
55
|
✖ 23 problems (0 errors, 23 warnings)
|
|
56
56
|
|
|
57
|
-
Rule
|
|
58
|
-
|
|
59
|
-
@typescript-eslint/no-unused-vars
|
|
60
|
-
react-hooks/exhaustive-deps
|
|
61
|
-
no-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
no-
|
|
65
|
-
@typescript-eslint/ban-ts-comment
|
|
66
|
-
@typescript-eslint/
|
|
67
|
-
no-
|
|
68
|
-
no-
|
|
57
|
+
Rule | Time (ms) | Relative
|
|
58
|
+
:-----------------------------------------|----------:|--------:
|
|
59
|
+
@typescript-eslint/no-unused-vars | 1665.555 | 62.9%
|
|
60
|
+
react-hooks/exhaustive-deps | 114.741 | 4.3%
|
|
61
|
+
no-misleading-character-class | 86.661 | 3.3%
|
|
62
|
+
no-global-assign | 82.213 | 3.1%
|
|
63
|
+
react-hooks/rules-of-hooks | 71.322 | 2.7%
|
|
64
|
+
no-unexpected-multiline | 47.421 | 1.8%
|
|
65
|
+
@typescript-eslint/ban-ts-comment | 37.884 | 1.4%
|
|
66
|
+
@typescript-eslint/triple-slash-reference | 36.368 | 1.4%
|
|
67
|
+
no-loss-of-precision | 33.743 | 1.3%
|
|
68
|
+
no-regex-spaces | 23.584 | 0.9%
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @utilitywarehouse/hearth-react-native
|
|
2
2
|
|
|
3
|
+
## 0.28.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1045](https://github.com/utilitywarehouse/hearth/pull/1045) [`3778061`](https://github.com/utilitywarehouse/hearth/commit/37780613890221368edb74c0ce83b8bf3d03e5b3) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: The `BannerIllustration` now stays centered in vertical banners and no longer inherits image border styling or horizontal stretching.
|
|
8
|
+
|
|
3
9
|
## 0.28.4
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -12,14 +12,14 @@ const BannerIllustration = (props) => {
|
|
|
12
12
|
}
|
|
13
13
|
return (_jsx(View, { style: [styles.media, styles.imageWrapper], children: _jsx(Image, { ...props, style: [styles.image, props.style] }) }));
|
|
14
14
|
};
|
|
15
|
-
const styles = StyleSheet.create(
|
|
15
|
+
const styles = StyleSheet.create({
|
|
16
16
|
media: {
|
|
17
17
|
flexShrink: 0,
|
|
18
18
|
variants: {
|
|
19
19
|
direction: {
|
|
20
20
|
horizontal: {},
|
|
21
21
|
vertical: {
|
|
22
|
-
alignSelf: '
|
|
22
|
+
alignSelf: 'center',
|
|
23
23
|
},
|
|
24
24
|
},
|
|
25
25
|
},
|
|
@@ -29,16 +29,11 @@ const styles = StyleSheet.create(theme => ({
|
|
|
29
29
|
variants: {
|
|
30
30
|
direction: {
|
|
31
31
|
horizontal: {},
|
|
32
|
-
vertical: {
|
|
33
|
-
width: '100%',
|
|
34
|
-
},
|
|
32
|
+
vertical: {},
|
|
35
33
|
},
|
|
36
34
|
},
|
|
37
35
|
},
|
|
38
36
|
image: {
|
|
39
|
-
borderRadius: theme.borderRadius.md,
|
|
40
|
-
borderColor: theme.color.border.strong,
|
|
41
|
-
borderWidth: theme.borderWidth[1],
|
|
42
37
|
variants: {
|
|
43
38
|
direction: {
|
|
44
39
|
horizontal: { width: 160, height: 95 },
|
|
@@ -49,5 +44,5 @@ const styles = StyleSheet.create(theme => ({
|
|
|
49
44
|
},
|
|
50
45
|
},
|
|
51
46
|
},
|
|
52
|
-
})
|
|
47
|
+
});
|
|
53
48
|
export default BannerIllustration;
|
package/package.json
CHANGED
|
@@ -96,11 +96,7 @@ type Story = StoryObj<typeof meta>;
|
|
|
96
96
|
|
|
97
97
|
export const Playground: Story = {
|
|
98
98
|
render: (args: any) => {
|
|
99
|
-
return
|
|
100
|
-
<View style={{ width: 400 }}>
|
|
101
|
-
<Banner {...args} icon={ElectricityMediumIcon} />
|
|
102
|
-
</View>
|
|
103
|
-
);
|
|
99
|
+
return <Banner {...args} icon={ElectricityMediumIcon} />;
|
|
104
100
|
},
|
|
105
101
|
};
|
|
106
102
|
|
|
@@ -138,7 +134,7 @@ export const WithIcon: Story = {
|
|
|
138
134
|
export const WithIllustration: Story = {
|
|
139
135
|
render: () => {
|
|
140
136
|
return (
|
|
141
|
-
<View
|
|
137
|
+
<View>
|
|
142
138
|
<Flex spacing="lg" direction="column">
|
|
143
139
|
<Banner
|
|
144
140
|
illustration={
|
|
@@ -21,14 +21,14 @@ const BannerIllustration = (props: ImageProps | ThemedImageProps) => {
|
|
|
21
21
|
);
|
|
22
22
|
};
|
|
23
23
|
|
|
24
|
-
const styles = StyleSheet.create(
|
|
24
|
+
const styles = StyleSheet.create({
|
|
25
25
|
media: {
|
|
26
26
|
flexShrink: 0,
|
|
27
27
|
variants: {
|
|
28
28
|
direction: {
|
|
29
29
|
horizontal: {},
|
|
30
30
|
vertical: {
|
|
31
|
-
alignSelf: '
|
|
31
|
+
alignSelf: 'center',
|
|
32
32
|
},
|
|
33
33
|
},
|
|
34
34
|
},
|
|
@@ -38,16 +38,11 @@ const styles = StyleSheet.create(theme => ({
|
|
|
38
38
|
variants: {
|
|
39
39
|
direction: {
|
|
40
40
|
horizontal: {},
|
|
41
|
-
vertical: {
|
|
42
|
-
width: '100%',
|
|
43
|
-
},
|
|
41
|
+
vertical: {},
|
|
44
42
|
},
|
|
45
43
|
},
|
|
46
44
|
},
|
|
47
45
|
image: {
|
|
48
|
-
borderRadius: theme.borderRadius.md,
|
|
49
|
-
borderColor: theme.color.border.strong,
|
|
50
|
-
borderWidth: theme.borderWidth[1],
|
|
51
46
|
variants: {
|
|
52
47
|
direction: {
|
|
53
48
|
horizontal: { width: 160, height: 95 },
|
|
@@ -58,6 +53,6 @@ const styles = StyleSheet.create(theme => ({
|
|
|
58
53
|
},
|
|
59
54
|
},
|
|
60
55
|
},
|
|
61
|
-
})
|
|
56
|
+
});
|
|
62
57
|
|
|
63
58
|
export default BannerIllustration;
|
|
@@ -34,7 +34,9 @@ Icons are often used to enhance the usability and accessibility of digital produ
|
|
|
34
34
|
You can either use the React Native components directy from our `@utilitywarehouse/hearth-react-native-icons` package or use the `Icon`
|
|
35
35
|
component from our `@utilitywarehouse/hearth-react-native` package to render the icons with utility props such as `color`.
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
We reccomend that you use the `Icon` component to ensure that the icons are styled correctly and consistently across your application.
|
|
38
|
+
The `Icon` component also provides additional functionality such as handling different color modes and sizes as well as automatically applying
|
|
39
|
+
light and dark mode colors from the theme.
|
|
38
40
|
|
|
39
41
|
<UsageWrap>
|
|
40
42
|
<Center>
|
|
@@ -60,16 +62,16 @@ const MyComponent = () => {
|
|
|
60
62
|
const { color } = useTheme();
|
|
61
63
|
return (
|
|
62
64
|
<Flex spacing="lg" direction="row" alignItems="center">
|
|
63
|
-
<ElectricityMediumIcon color={color.energyBlue['700']} />
|
|
64
|
-
<MobileMediumIcon color={color.mobileRose['700']} />
|
|
65
|
-
<BroadbandMediumIcon color={color.broadbandGreen['700']} />
|
|
66
|
-
<InsuranceMediumIcon color={color.insuranceOrange['700']} />
|
|
65
|
+
<Icon as={ElectricityMediumIcon} color={color.energyBlue['700']} />
|
|
66
|
+
<Icon as={MobileMediumIcon} color={color.mobileRose['700']} />
|
|
67
|
+
<Icon as={BroadbandMediumIcon} color={color.broadbandGreen['700']} />
|
|
68
|
+
<Icon as={InsuranceMediumIcon} color={color.insuranceOrange['700']} />
|
|
67
69
|
</Flex>
|
|
68
70
|
);
|
|
69
71
|
};
|
|
70
72
|
```
|
|
71
73
|
|
|
72
|
-
Or you can use the `
|
|
74
|
+
Or you can use the icons directly from the `@utilitywarehouse/hearth-react-native-icons` package. Make sure you handle the color prop correctly, including light and dark modes.
|
|
73
75
|
|
|
74
76
|
```jsx
|
|
75
77
|
import { Flex, Icon, color } from '@utilitywarehouse/hearth-react-native';
|
|
@@ -81,12 +83,13 @@ import {
|
|
|
81
83
|
} from '@utilitywarehouse/hearth-react-native-icons';
|
|
82
84
|
|
|
83
85
|
const MyComponent = () => {
|
|
86
|
+
const { color } = useTheme();
|
|
84
87
|
return (
|
|
85
88
|
<Flex spacing="lg" direction="row" alignItems="center">
|
|
86
|
-
<
|
|
87
|
-
<
|
|
88
|
-
<
|
|
89
|
-
<
|
|
89
|
+
<ElectricityMediumIcon color={color.energyBlue['700']} />
|
|
90
|
+
<MobileMediumIcon color={color.mobileRose['700']} />
|
|
91
|
+
<BroadbandMediumIcon color={color.broadbandGreen['700']} />
|
|
92
|
+
<InsuranceMediumIcon color={color.insuranceOrange['700']} />
|
|
90
93
|
</Flex>
|
|
91
94
|
);
|
|
92
95
|
};
|