@utilitywarehouse/hearth-react-native 0.8.0 → 0.8.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 (45) hide show
  1. package/.storybook/preview.tsx +1 -0
  2. package/.turbo/turbo-build.log +1 -1
  3. package/.turbo/turbo-lint.log +1 -1
  4. package/CHANGELOG.md +22 -0
  5. package/build/components/Banner/Banner.js +27 -7
  6. package/build/components/Banner/Banner.props.d.ts +4 -9
  7. package/build/components/Card/Card.props.d.ts +1 -0
  8. package/build/components/Card/CardRoot.d.ts +1 -1
  9. package/build/components/Card/CardRoot.js +28 -1
  10. package/build/components/HighlightBanner/HighlightBanner.js +12 -2
  11. package/build/components/HighlightBanner/HighlightBanner.props.d.ts +1 -1
  12. package/build/components/List/List.js +1 -1
  13. package/build/components/List/ListAction/ListActionTrailingIcon.js +2 -2
  14. package/build/components/RadioCard/RadioCardGroup.context.d.ts +12 -0
  15. package/build/components/RadioCard/RadioCardGroup.context.js +3 -0
  16. package/build/components/RadioCard/RadioCardGroup.js +15 -10
  17. package/build/components/RadioCard/RadioCardLabel.d.ts +1 -1
  18. package/build/components/RadioCard/RadioCardLabel.js +7 -1
  19. package/build/components/RadioCard/RadioCardRoot.js +13 -0
  20. package/build/core/themes.d.ts +40 -0
  21. package/build/core/themes.js +20 -0
  22. package/docs/adding-shadows.mdx +43 -0
  23. package/package.json +3 -3
  24. package/src/components/Banner/Banner.docs.mdx +1 -1
  25. package/src/components/Banner/Banner.props.ts +4 -9
  26. package/src/components/Banner/Banner.stories.tsx +16 -0
  27. package/src/components/Banner/Banner.tsx +46 -31
  28. package/src/components/Card/Card.docs.mdx +20 -1
  29. package/src/components/Card/Card.props.ts +9 -0
  30. package/src/components/Card/Card.stories.tsx +39 -0
  31. package/src/components/Card/CardRoot.tsx +29 -0
  32. package/src/components/Checkbox/CheckboxGroup.stories.tsx +19 -1
  33. package/src/components/HighlightBanner/HighlightBanner.docs.mdx +21 -2
  34. package/src/components/HighlightBanner/HighlightBanner.props.ts +1 -0
  35. package/src/components/HighlightBanner/HighlightBanner.stories.tsx +31 -1
  36. package/src/components/HighlightBanner/HighlightBanner.tsx +16 -4
  37. package/src/components/List/List.tsx +5 -3
  38. package/src/components/List/ListAction/ListActionTrailingIcon.tsx +2 -2
  39. package/src/components/Radio/RadioGroup.stories.tsx +18 -0
  40. package/src/components/RadioCard/RadioCardGroup.context.ts +16 -0
  41. package/src/components/RadioCard/RadioCardGroup.stories.tsx +24 -0
  42. package/src/components/RadioCard/RadioCardGroup.tsx +28 -19
  43. package/src/components/RadioCard/RadioCardLabel.tsx +12 -1
  44. package/src/components/RadioCard/RadioCardRoot.tsx +15 -0
  45. package/src/core/themes.ts +20 -0
package/src/components/RadioCard/RadioCardLabel.tsx CHANGED
@@ -1,7 +1,18 @@
1
+ import { StyleSheet } from 'react-native-unistyles';
1
2
  import { Label } from '../Label';
2
3
  import LabelProps from '../Label/Label.props';
3
4
 
4
- const RadioCardLabel = ({ children, ...props }: LabelProps) => <Label {...props}>{children}</Label>;
5
+ const RadioCardLabel = ({ children, style, ...props }: LabelProps) => (
6
+ <Label {...props} style={[styles.label, style]}>
7
+ {children}
8
+ </Label>
9
+ );
10
+
11
+ const styles = StyleSheet.create({
12
+ label: {
13
+ flexShrink: 1,
14
+ },
15
+ });
5
16
 
6
17
  RadioCardLabel.displayName = 'RadioCardLabel';
7
18
 
package/src/components/RadioCard/RadioCardRoot.tsx CHANGED
@@ -4,6 +4,7 @@ import { StyleSheet } from 'react-native-unistyles';
4
4
  import { Pressable, ViewStyle } from 'react-native';
5
5
  import { RadioCardContext } from './RadioCard.context';
6
6
  import type RadioCardProps from './RadioCard.props';
7
+ import { useRadioCardGroupContext } from './RadioCardGroup.context';
7
8
 
8
9
  const RadioCardRoot = ({
9
10
  children,
@@ -13,6 +14,8 @@ const RadioCardRoot = ({
13
14
  }: RadioCardProps & { states?: { disabled?: boolean; checked?: boolean; active?: boolean } }) => {
14
15
  const { checked, active } = states ?? {};
15
16
 
17
+ const { flexDirection } = useRadioCardGroupContext() ?? {};
18
+
16
19
  const value = useMemo(
17
20
  () => ({
18
21
  checked,
@@ -23,6 +26,7 @@ const RadioCardRoot = ({
23
26
 
24
27
  styles.useVariants({
25
28
  selected: checked,
29
+ flexDirection,
26
30
  });
27
31
 
28
32
  return (
@@ -39,6 +43,7 @@ RadioCardRoot.displayName = 'RadioCardRoot';
39
43
  const styles = StyleSheet.create(theme => ({
40
44
  container: {
41
45
  flexDirection: 'column',
46
+
42
47
  gap: theme.components.card.selectable.gap,
43
48
  borderRadius: theme.components.card.borderRadius,
44
49
  backgroundColor: theme.color.surface.neutral.strong,
@@ -58,6 +63,16 @@ const styles = StyleSheet.create(theme => ({
58
63
  margin: -theme.components.card.selectable.borderWidthSelected / 2,
59
64
  },
60
65
  },
66
+ flexDirection: {
67
+ row: {},
68
+ column: {
69
+ width: '100%',
70
+ },
71
+ 'row-reverse': {},
72
+ 'column-reverse': {
73
+ width: '100%',
74
+ },
75
+ },
61
76
  },
62
77
  _web: {
63
78
  '_focus-visible': {
package/src/core/themes.ts CHANGED
@@ -269,6 +269,16 @@ const shared = {
269
269
 
270
270
  const lightHelpers = {
271
271
  ...shared.helpers,
272
+ shadow: {
273
+ functional: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.default}`,
274
+ brand: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.brand}`,
275
+ energy: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.energy}`,
276
+ broadband: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.broadband}`,
277
+ mobile: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.mobile}`,
278
+ insurance: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.insurance}`,
279
+ cashback: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.cashback}`,
280
+ pig: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${light.shadow.pig}`,
281
+ },
272
282
  focusVisible: {
273
283
  outlineStyle: 'solid',
274
284
  outlineWidth: 2,
@@ -303,6 +313,16 @@ export const lightTheme = {
303
313
 
304
314
  const darkHelpers = {
305
315
  ...shared.helpers,
316
+ shadow: {
317
+ functional: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.default}`,
318
+ brand: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.brand}`,
319
+ energy: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.energy}`,
320
+ broadband: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.broadband}`,
321
+ mobile: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.mobile}`,
322
+ insurance: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.insurance}`,
323
+ cashback: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.cashback}`,
324
+ pig: `${shadow.mobile.md.x}px ${shadow.mobile.md.y}px ${shadow.mobile.md.spread}px ${dark.shadow.pig}`,
325
+ },
306
326
  focusVisible: {
307
327
  outlineStyle: 'solid',
308
328
  outlineWidth: 2,