@utilitywarehouse/hearth-react-native 0.30.1 → 0.30.3

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.30.1 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.30.3 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.30.1 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.30.3 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -51,15 +51,15 @@
 
 ✖ 22 problems (0 errors, 22 warnings)
 
-Rule                              | Time (ms) | Relative
-:---------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars |  1663.735 |    62.2%
-react-hooks/exhaustive-deps       |   114.322 |     4.3%
-no-global-assign                  |   106.232 |     4.0%
-react-hooks/rules-of-hooks        |    88.095 |     3.3%
-no-misleading-character-class     |    76.056 |     2.8%
-no-unexpected-multiline           |    42.483 |     1.6%
-@typescript-eslint/ban-ts-comment |    34.247 |     1.3%
-no-loss-of-precision              |    32.608 |     1.2%
-no-useless-escape                 |    30.291 |     1.1%
-no-control-regex                  |    26.605 |     1.0%
+Rule                                              | Time (ms) | Relative
+:-------------------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars                 |  1593.466 |    60.1%
+react-hooks/rules-of-hooks                        |   130.000 |     4.9%
+react-hooks/exhaustive-deps                       |   126.596 |     4.8%
+no-global-assign                                  |   112.238 |     4.2%
+no-unexpected-multiline                           |    53.984 |     2.0%
+@typescript-eslint/ban-ts-comment                 |    41.634 |     1.6%
+no-useless-escape                                 |    37.152 |     1.4%
+no-loss-of-precision                              |    36.053 |     1.4%
+no-misleading-character-class                     |    33.418 |     1.3%
+@typescript-eslint/no-unnecessary-type-constraint |    30.353 |     1.1%

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.30.3
+
+### Patch Changes
+
+- [#1094](https://github.com/utilitywarehouse/hearth/pull/1094) [`a9d8e66`](https://github.com/utilitywarehouse/hearth/commit/a9d8e660b7efa23c7a573af2658fc10ab6c043b9) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Make horizontal pressable `Banner` content flex correctly on native and web.
+
+  This fixes horizontal pressable `Banner` layouts where the content area did not expand consistently, which could misplace the chevron and action content.
+
+  **Components affected**:
+  - `Banner`
+
+  **Developer changes**:
+
+  No changes are required.
+
+## 0.30.2
+
+### Patch Changes
+
+- [#1090](https://github.com/utilitywarehouse/hearth/pull/1090) [`1420244`](https://github.com/utilitywarehouse/hearth/commit/1420244fbc23c8a755f9249f8b39cb094a865cea) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `alignChevron` to `Banner` for horizontal pressable layouts.
+
+  `Banner` now supports an `alignChevron` prop to control the chevron alignment when `onPress` is used in the horizontal layout. Use `'start'`, `'center'`, or `'end'` to match the chevron position to the content layout.
+
+  **Components affected**:
+  - `Banner`
+
+  **Developer changes**:
+
+  No changes are required unless you want to override the default centred chevron alignment.
+
 ## 0.30.1
 
 ### Patch Changes

package/build/components/Banner/Banner.d.ts

@@ -1,6 +1,6 @@
 import type BannerProps from './Banner.props';
 declare const Banner: {
-    ({ icon, iconContainerVariant, iconContainerSize, iconContainerColor, illustration, image, heading, description, direction, link, button, onPress, onClose, variant, style, ...props }: BannerProps): import("react/jsx-runtime").JSX.Element;
+    ({ icon, iconContainerVariant, iconContainerSize, iconContainerColor, illustration, image, heading, description, direction, link, button, onPress, onClose, variant, alignChevron, style, ...props }: BannerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Banner;

package/build/components/Banner/Banner.js

@@ -9,9 +9,14 @@ import { Heading } from '../Heading';
 import { IconContainer } from '../IconContainer';
 import { UnstyledIconButton } from '../UnstyledIconButton';
 import BannerContext from './Banner.context';
-const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md', iconContainerColor = 'pig', illustration, image, heading, description, direction = 'horizontal', link, button, onPress, onClose, variant = 'subtle', style, ...props }) => {
+const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md', iconContainerColor = 'pig', illustration, image, heading, description, direction = 'horizontal', link, button, onPress, onClose, variant = 'subtle', alignChevron = 'center', style, ...props }) => {
     const hasIllustration = Boolean(illustration);
-    styles.useVariants({ direction, hasIllustration, isPressable: Boolean(onPress) });
+    styles.useVariants({
+        direction,
+        hasIllustration,
+        isPressable: Boolean(onPress),
+        alignChevron,
+    });
     const context = useMemo(() => ({
         direction,
     }), [direction]);
@@ -130,9 +135,7 @@ const styles = StyleSheet.create(theme => ({
         variants: {
             direction: {
                 horizontal: {
-                    _web: {
-                        flex: 1,
-                    },
+                    flex: 1,
                 },
                 vertical: {},
             },
@@ -187,6 +190,25 @@ const styles = StyleSheet.create(theme => ({
     },
     chevron: {
         alignSelf: 'center',
+        variants: {
+            direction: {
+                horizontal: {},
+                vertical: {
+                    display: 'none',
+                },
+            },
+            alignChevron: {
+                center: {
+                    alignSelf: 'center',
+                },
+                start: {
+                    alignSelf: 'flex-start',
+                },
+                end: {
+                    alignSelf: 'flex-end',
+                },
+            },
+        },
     },
     closeButton: {
         alignSelf: 'flex-start',

package/build/components/Banner/Banner.props.d.ts

@@ -66,5 +66,10 @@ export interface BannerProps extends Omit<CardProps, 'noPadding' | 'variant' | '
      * @default 'subtle'
      */
     variant?: 'subtle' | 'emphasis';
+    /**
+     * Chevron alignment for horizontal layout
+     * @default 'center'
+     */
+    alignChevron?: 'center' | 'start' | 'end';
 }
 export default BannerProps;

package/docs/changelog.mdx

@@ -9,6 +9,88 @@ import { BackToTopButton, NextPrevPage } from './components';
 The changelog for the Hearth React Native library. Here you can find all the changes, improvements, and bug fixes for each version.
 
 
+## 0.30.2
+
+### Patch Changes
+
+- [#1090](https://github.com/utilitywarehouse/hearth/pull/1090) [`1420244`](https://github.com/utilitywarehouse/hearth/commit/1420244fbc23c8a755f9249f8b39cb094a865cea) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `alignChevron` to `Banner` for horizontal pressable layouts.
+
+  `Banner` now supports an `alignChevron` prop to control the chevron alignment when `onPress` is used in the horizontal layout. Use `'start'`, `'center'`, or `'end'` to match the chevron position to the content layout.
+
+  **Components affected**:
+  - `Banner`
+
+  **Developer changes**:
+
+  No changes are required unless you want to override the default centred chevron alignment.
+
+## 0.30.1
+
+### Patch Changes
+
+- [#1081](https://github.com/utilitywarehouse/hearth/pull/1081) [`5db8538`](https://github.com/utilitywarehouse/hearth/commit/5db8538b69115a23289f0038f681fc8b87a310c4) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Correct `NavModal` safe area handling across sheet and full-screen presentations.
+
+  `NavModal` now applies safe area insets directly within the component layout, which fixes padding in full-screen presentations and keeps sheet-style presentations aligned with the modal footer behaviour.
+
+  **Developer changes**:
+
+  If you need to disable the inset padding, use the `useSafeAreaInsets` prop. The old `safeAreaViewProps` escape hatch is no longer available.
+
+## 0.30.0
+
+### Minor Changes
+
+- [#1072](https://github.com/utilitywarehouse/hearth/pull/1072) [`55f0095`](https://github.com/utilitywarehouse/hearth/commit/55f009576ba55081de358bccc21691861ddd7c33) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `loadingDescription` support to `Modal` and `NavModal`
+
+  `Modal` and `NavModal` now accept a `loadingDescription` prop to render supporting text beneath the spinner while `loading` is true. This makes it easier to give users more context during loading states without building custom loading content.
+
+  **Components affected**:
+  - `Modal`
+  - `NavModal`
+
+  **Developer changes**:
+
+  No changes are required for existing usage. To show supporting text in a loading state, pass `loadingDescription` alongside `loading` and, if needed, `loadingHeading`.
+
+### Patch Changes
+
+- [#1070](https://github.com/utilitywarehouse/hearth/pull/1070) [`93c042c`](https://github.com/utilitywarehouse/hearth/commit/93c042c7772ab298e2ea4888a9777e8176453098) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Standardise numeric value typography across list-based components.
+
+  Numeric values in `DescriptionListItem`, `ExpandableCard`, and `ListItem` now render with semibold `BodyText` instead of `DetailText`, aligning them with the updated content hierarchy used elsewhere in the library.
+
+  **Components affected**:
+  - `DescriptionListItem`
+  - `ExpandableCard`
+  - `ListItem`
+
+  **Developer changes**:
+
+  No changes are required.
+
+- [#1073](https://github.com/utilitywarehouse/hearth/pull/1073) [`9759622`](https://github.com/utilitywarehouse/hearth/commit/975962229137dd196e5f72a04037a8f181907818) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Announce `Heading` as a header for assistive technologies.
+
+  `Heading` now sets `accessibilityRole="header"` automatically so VoiceOver and TalkBack can identify headings as part of the screen structure.
+
+  **Components affected**:
+  - `Heading`
+
+  **Developer changes**:
+
+  No changes are required.
+
+- [#1074](https://github.com/utilitywarehouse/hearth/pull/1074) [`95fe19e`](https://github.com/utilitywarehouse/hearth/commit/95fe19e6328bf652ff3ac1b2c723e1389fc59936) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Improve accessibility roles for `List`, `ListItem`, and `ListAction`
+
+  `List` now defaults to `accessibilityRole="list"`, `ListAction` now defaults to `accessibilityRole="button"`, and `ListItem` respects an explicitly provided `accessibilityRole` instead of always forcing button semantics when `onPress` is set.
+
+  **Components affected**:
+  - `List`
+  - `ListItem`
+  - `ListAction`
+
+  **Developer changes**:
+
+  No changes are required unless you want a tappable `ListItem` to be announced as something other than a button. In that case, pass `accessibilityRole` explicitly.
+
 ## 0.29.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.30.1",
+  "version": "0.30.3",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -58,10 +58,10 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.8.0",
     "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.4",
-    "@utilitywarehouse/hearth-svg-assets": "^0.5.0"
+    "@utilitywarehouse/hearth-svg-assets": "^0.6.0",
+    "@utilitywarehouse/hearth-react-icons": "^0.8.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=5.0.0",

package/src/components/Banner/Banner.docs.mdx

@@ -81,6 +81,7 @@ const MyComponent = () => (
 | onClose              | `() => void`                                                                                       | Shows close button with handler                                         | `-`            |
 | variant              | `'subtle' \| 'emphasis'`                                                                           | Card visual style variant                                               | `'subtle'`     |
 | colorScheme          | `'pig' \| 'energy' \| 'broadband' \| 'mobile' \|` <br />`'insurance' \| 'cashback' \| 'highlight'` | Color scheme for buttons                                                | `'pig'`        |
+| alignChevron         | `'center' \| 'start' \| 'end'`                                                                     | Alignment of chevron when `onPress` is used with horizontal layout      | `'center'`     |
 
 The component also accepts all standard Card props except `noPadding`, `spacing`, `gap`, `rowGap`, `columnGap`, `flexDirection`, `flexWrap`, `alignItems`, and `justifyContent`.
 

package/src/components/Banner/Banner.props.ts

@@ -87,6 +87,11 @@ export interface BannerProps extends Omit<
    * @default 'subtle'
    */
   variant?: 'subtle' | 'emphasis';
+  /**
+   * Chevron alignment for horizontal layout
+   * @default 'center'
+   */
+  alignChevron?: 'center' | 'start' | 'end';
 }
 
 export default BannerProps;

package/src/components/Banner/Banner.stories.tsx

@@ -279,6 +279,26 @@ export const Pressable: Story = {
     return (
       <View style={{ width: 400 }}>
         <Flex spacing="lg" direction="column">
+          <Banner
+            variant="emphasis"
+            colorScheme="neutralStrong"
+            testID="next-best-action-card"
+            onPress={() => console.log('Banner pressed')}
+            heading="Add your appointment outcome"
+            description="Save the outcome of Don Instantino (Traditional Thai Cuisine)'s appointment"
+            alignChevron="start"
+            button={
+              <Button
+                variant="outline"
+                colorScheme="functional"
+                size="sm"
+                onPress={() => console.log('View to-do list pressed')}
+                testID="view-to-do-list"
+              >
+                View to-do list
+              </Button>
+            }
+          />
           <Banner
             icon={ElectricityMediumIcon}
             iconContainerColor="energy"
@@ -301,6 +321,22 @@ export const Pressable: Story = {
             description="Manage your account preferences."
             onPress={() => console.log('Banner pressed')}
           />
+          <Banner
+            direction="vertical"
+            image={
+              <BannerImage
+                light={{
+                  uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
+                }}
+                dark={{
+                  uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
+                }}
+              />
+            }
+            heading="Account Settings"
+            description="Manage your account preferences."
+            onPress={() => console.log('Banner pressed')}
+          />
         </Flex>
       </View>
     );

package/src/components/Banner/Banner.tsx

@@ -25,11 +25,17 @@ const Banner = ({
   onPress,
   onClose,
   variant = 'subtle',
+  alignChevron = 'center',
   style,
   ...props
 }: BannerProps) => {
   const hasIllustration = Boolean(illustration);
-  styles.useVariants({ direction, hasIllustration, isPressable: Boolean(onPress) });
+  styles.useVariants({
+    direction,
+    hasIllustration,
+    isPressable: Boolean(onPress),
+    alignChevron,
+  });
 
   const context = useMemo(
     () => ({
@@ -238,9 +244,7 @@ const styles = StyleSheet.create(theme => ({
     variants: {
       direction: {
         horizontal: {
-          _web: {
-            flex: 1,
-          },
+          flex: 1,
         },
         vertical: {},
       },
@@ -295,6 +299,25 @@ const styles = StyleSheet.create(theme => ({
   },
   chevron: {
     alignSelf: 'center',
+    variants: {
+      direction: {
+        horizontal: {},
+        vertical: {
+          display: 'none',
+        },
+      },
+      alignChevron: {
+        center: {
+          alignSelf: 'center',
+        },
+        start: {
+          alignSelf: 'flex-start',
+        },
+        end: {
+          alignSelf: 'flex-end',
+        },
+      },
+    },
   },
   closeButton: {
     alignSelf: 'flex-start',