@utilitywarehouse/hearth-react-native 0.8.0 → 0.8.1

package/.turbo/turbo-build.log

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

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.8.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.8.1 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint --max-warnings 0
 
 Rule | Time (ms) | Relative

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.8.1
+
+### Patch Changes
+
+- [#641](https://github.com/utilitywarehouse/hearth/pull/641) [`251242e`](https://github.com/utilitywarehouse/hearth/commit/251242e218c0b24589c3fb6fb6963b53bda8a367) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `HighlightBanner` when no image is provided
+
 ## 0.8.0
 
 ### Minor Changes

package/build/components/HighlightBanner/HighlightBanner.js

@@ -4,8 +4,8 @@ import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Card } from '../Card';
 const HighlightBanner = ({ heading, headingColor, image, imageContainerHeight, description, link, button, variant = 'emphasis', style, ...props }) => {
-    styles.useVariants({ headingColor, variant });
-    return (_jsx(Card, { variant: variant, noPadding: true, style: style, ...props, children: _jsxs(View, { style: [styles.container], children: [_jsx(View, { style: [styles.header], children: _jsx(BodyText, { size: "md", textAlign: "center", weight: "semibold", children: heading }) }), _jsx(View, { style: styles.imageContainer(imageContainerHeight), children: _jsx(Image, { resizeMode: "cover", ...image, style: [styles.image, image?.style] }) }), _jsxs(View, { style: styles.footer, children: [_jsx(BodyText, { size: "md", textAlign: "center", children: description }), link && _jsx(View, { style: styles.linkContainer, children: link }), button && _jsx(View, { style: styles.buttonContainer, children: button })] })] }) }));
+    styles.useVariants({ headingColor, variant, hasImage: Boolean(image) });
+    return (_jsx(Card, { variant: variant, noPadding: true, style: style, ...props, children: _jsxs(View, { style: [styles.container], children: [_jsx(View, { style: [styles.header], children: _jsx(BodyText, { size: "md", textAlign: "center", weight: "semibold", children: heading }) }), !!image && (_jsx(View, { style: styles.imageContainer(imageContainerHeight), children: _jsx(Image, { resizeMode: "cover", ...image, style: [styles.image, image?.style] }) })), _jsxs(View, { style: styles.footer, children: [_jsx(BodyText, { size: "md", textAlign: "center", children: description }), link && _jsx(View, { style: styles.linkContainer, children: link }), button && _jsx(View, { style: styles.buttonContainer, children: button })] })] }) }));
 };
 HighlightBanner.displayName = 'HighlightBanner';
 const styles = StyleSheet.create(theme => ({
@@ -51,6 +51,11 @@ const styles = StyleSheet.create(theme => ({
                     borderColor: theme.color.border.subtle,
                 },
             },
+            hasImage: {
+                false: {
+                    borderBottomWidth: 0,
+                },
+            },
         },
     },
     imageContainer: (height = 200) => ({
@@ -74,6 +79,11 @@ const styles = StyleSheet.create(theme => ({
                     borderColor: theme.color.border.subtle,
                 },
             },
+            hasImage: {
+                true: {
+                    flex: 1,
+                },
+            },
         },
     },
     linkContainer: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -56,10 +56,10 @@
     "vite": "^7.1.3",
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
-    "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.7.2",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.7.2",
+    "@utilitywarehouse/hearth-react-icons": "^0.7.3",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.7.3",
     "@utilitywarehouse/hearth-svg-assets": "^0.2.0",
+    "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-tokens": "^0.1.3"
   },
   "peerDependencies": {

package/src/components/HighlightBanner/HighlightBanner.docs.mdx

@@ -11,7 +11,7 @@ import * as Stories from './HighlightBanner.stories';
 
 # Highlight Banner
 
-A `HighlightBanner` component is a specialised card layout designed for highlighting featured content with an image. It combines a colored heading banner, an image, and descriptive text with optional action buttons or links. Perfect for promotional content, featured articles, or important announcements.
+A `HighlightBanner` component is a specialised card layout designed for highlighting featured content with an image. It combines a colored heading banner, an optional image, and descriptive text with optional action buttons or links. Perfect for promotional content, featured articles, or important announcements.
 
 - [Playground](#playground)
 - [Usage](#usage)
@@ -20,6 +20,7 @@ A `HighlightBanner` component is a specialised card layout designed for highligh
 - [Examples](#examples)
   - [With Button](#with-button)
   - [With Link](#with-link)
+  - [Without Image](#without-image)
   - [Color Variants](#color-variants)
   - [Subtle Variant](#subtle-variant)
   - [Different Images](#different-images)
@@ -137,6 +138,24 @@ const MyComponent = () => (
 );
 ```
 
+### Without Image
+
+Display the HighlightBanner without an image by omitting the `image` prop:
+
+<Canvas of={Stories.WithoutImage} />
+
+```jsx
+import { HighlightBanner, Button } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <HighlightBanner
+    heading="Content Without Image"
+    description="This HighlightBanner does not have an image, focusing solely on the text content."
+    button={<Button onPress={() => console.log('pressed')}>Discover More</Button>}
+  />
+);
+```
+
 ### Color Variants
 
 The component supports seven semantic color schemes that automatically apply the appropriate subtle background colors:

package/src/components/HighlightBanner/HighlightBanner.stories.tsx

@@ -174,6 +174,22 @@ export const ColorVariants: Story = {
   },
 };
 
+export const WithoutImage: Story = {
+  render: args => {
+    return (
+      <View style={{ width: 400 }}>
+        <HighlightBanner
+          {...args}
+          image={undefined}
+          heading="Content Without Image"
+          description="This HighlightBanner does not have an image, focusing solely on the text content."
+          button={<Button onPress={() => console.log('pressed')}>Discover More</Button>}
+        />
+      </View>
+    );
+  },
+};
+
 export const SubtleCard: Story = {
   args: {
     variant: 'subtle',

package/src/components/HighlightBanner/HighlightBanner.tsx

@@ -16,7 +16,7 @@ const HighlightBanner = ({
   style,
   ...props
 }: HighlightBannerProps) => {
-  styles.useVariants({ headingColor, variant });
+  styles.useVariants({ headingColor, variant, hasImage: Boolean(image) });
 
   return (
     <Card variant={variant} noPadding style={style} {...props}>
@@ -26,9 +26,11 @@ const HighlightBanner = ({
             {heading}
           </BodyText>
         </View>
-        <View style={styles.imageContainer(imageContainerHeight)}>
-          <Image resizeMode="cover" {...image} style={[styles.image, image?.style]} />
-        </View>
+        {!!image && (
+          <View style={styles.imageContainer(imageContainerHeight)}>
+            <Image resizeMode="cover" {...image} style={[styles.image, image?.style]} />
+          </View>
+        )}
         <View style={styles.footer}>
           <BodyText size="md" textAlign="center">
             {description}
@@ -86,6 +88,11 @@ const styles = StyleSheet.create(theme => ({
           borderColor: theme.color.border.subtle,
         },
       },
+      hasImage: {
+        false: {
+          borderBottomWidth: 0,
+        },
+      },
     },
   },
   imageContainer: (height: number = 200) => ({
@@ -109,6 +116,11 @@ const styles = StyleSheet.create(theme => ({
           borderColor: theme.color.border.subtle,
         },
       },
+      hasImage: {
+        true: {
+          flex: 1,
+        },
+      },
     },
   },
   linkContainer: {