@utilitywarehouse/hearth-react-native 0.7.0 → 0.8.0

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

@@ -0,0 +1,259 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { View } from 'react-native';
+import { Button } from '../Button';
+import { Flex } from '../Flex';
+import { Link } from '../Link';
+import HighlightBanner from './HighlightBanner';
+
+const meta = {
+  title: 'Stories / HighlightBanner',
+  component: HighlightBanner,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    heading: {
+      control: 'text',
+      description: 'The heading text displayed at the top of the card',
+    },
+    headingColor: {
+      control: 'select',
+      description: 'The background color for the heading section',
+      options: ['pig', 'energy', 'broadband', 'mobile', 'insurance', 'cashback', 'highlight'],
+    },
+    description: {
+      control: 'text',
+      description: 'The description text displayed in the footer',
+    },
+    variant: {
+      control: 'select',
+      description: 'The variant style of the HighlightBanner',
+      options: ['emphasis', 'subtle'],
+    },
+  },
+  args: {
+    heading: 'Featured Content',
+    headingColor: 'highlight',
+    description: 'This is a description of the featured content that appears below the image.',
+    image: {
+      source: {
+        uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=800&q=80',
+      },
+    },
+  },
+} satisfies Meta<typeof HighlightBanner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: args => {
+    return (
+      <View style={{ width: 400 }}>
+        <HighlightBanner {...args} />
+      </View>
+    );
+  },
+};
+
+export const WithButton: Story = {
+  render: args => {
+    return (
+      <View style={{ width: 400 }}>
+        <HighlightBanner
+          {...args}
+          button={<Button onPress={() => console.log('Button pressed')}>Learn More</Button>}
+        />
+      </View>
+    );
+  },
+};
+
+export const WithLink: Story = {
+  render: args => {
+    return (
+      <View style={{ width: 400 }}>
+        <HighlightBanner
+          {...args}
+          link={<Link onPress={() => console.log('Link pressed')}>View details</Link>}
+        />
+      </View>
+    );
+  },
+};
+
+export const ColorVariants: Story = {
+  render: args => {
+    return (
+      <View style={{ width: 400 }}>
+        <Flex space="lg" direction="column" align="stretch">
+          <HighlightBanner
+            {...args}
+            heading="Energy Blue"
+            headingColor="energy"
+            image={{
+              source: {
+                uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=800&q=80',
+              },
+            }}
+            description="Featured content with energy blue heading"
+            link={<Link onPress={() => console.log('pressed')}>Learn more</Link>}
+          />
+          <HighlightBanner
+            {...args}
+            heading="Broadband Green"
+            headingColor="broadband"
+            image={{
+              source: {
+                uri: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=800&q=80',
+              },
+            }}
+            description="Featured content with broadband green heading"
+          />
+          <HighlightBanner
+            {...args}
+            heading="Insurance Orange"
+            headingColor="insurance"
+            image={{
+              source: {
+                uri: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&q=80',
+              },
+            }}
+            description="Featured content with insurance orange heading"
+            button={<Button onPress={() => console.log('pressed')}>Get Started</Button>}
+          />
+          <HighlightBanner
+            {...args}
+            heading="Cashback Lilac"
+            headingColor="cashback"
+            image={{
+              source: {
+                uri: 'https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?w=800&q=80',
+              },
+            }}
+            description="Featured content with cashback lilac heading"
+            button={<Button onPress={() => console.log('pressed')}>Get Started</Button>}
+          />
+          <HighlightBanner
+            {...args}
+            heading="Pig Pink"
+            headingColor="pig"
+            image={{
+              source: {
+                uri: 'https://images.unsplash.com/photo-1494526585095-c41746248156?w=800&q=80',
+              },
+            }}
+            description="Featured content with pig pink heading"
+            link={<Link onPress={() => console.log('pressed')}>Learn more</Link>}
+          />
+          <HighlightBanner
+            {...args}
+            heading="Mobile Rose"
+            headingColor="mobile"
+            image={{
+              source: {
+                uri: 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=800&q=80',
+              },
+            }}
+            description="Featured content with mobile rose heading"
+          />
+          <HighlightBanner
+            {...args}
+            heading="Highlight Yellow"
+            headingColor="highlight"
+            image={{
+              source: {
+                uri: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=800&q=80',
+              },
+            }}
+            description="Featured content with highlight yellow heading"
+          />
+        </Flex>
+      </View>
+    );
+  },
+};
+
+export const SubtleCard: Story = {
+  args: {
+    variant: 'subtle',
+  },
+  render: args => {
+    return (
+      <View style={{ width: 400 }}>
+        <HighlightBanner {...args} />
+      </View>
+    );
+  },
+};
+
+export const DifferentImages: Story = {
+  render: args => {
+    return (
+      <Flex space="lg" direction="column">
+        <View style={{ width: 400 }}>
+          <HighlightBanner
+            {...args}
+            heading="Nature Landscape"
+            headingColor="broadband"
+            image={{
+              source: {
+                uri: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80',
+              },
+            }}
+            description="Beautiful mountain landscape with clear blue sky"
+            link={<Link onPress={() => console.log('pressed')}>View gallery</Link>}
+          />
+        </View>
+        <View style={{ width: 400 }}>
+          <HighlightBanner
+            {...args}
+            heading="Urban Architecture"
+            headingColor="highlight"
+            image={{
+              source: {
+                uri: 'https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?w=800&q=80',
+              },
+            }}
+            description="Modern city buildings and urban design"
+            button={<Button onPress={() => console.log('pressed')}>Explore Cities</Button>}
+          />
+        </View>
+        <View style={{ width: 400 }}>
+          <HighlightBanner
+            {...args}
+            heading="Ocean Waves"
+            headingColor="energy"
+            image={{
+              source: {
+                uri: 'https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=800&q=80',
+              },
+            }}
+            description="Stunning ocean views and coastal beauty"
+          />
+        </View>
+      </Flex>
+    );
+  },
+};
+
+export const LongContent: Story = {
+  render: args => {
+    return (
+      <View style={{ width: 400 }}>
+        <HighlightBanner
+          {...args}
+          heading="Extended Information Card"
+          headingColor="energy"
+          image={{
+            source: {
+              uri: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&q=80',
+            },
+          }}
+          description="This is a much longer description that demonstrates how the component handles extended text content. It includes multiple sentences and provides more detailed information about the featured content, ensuring the layout remains clean and readable even with more text."
+          button={<Button onPress={() => console.log('pressed')}>Read Full Article</Button>}
+        />
+      </View>
+    );
+  },
+};

package/src/components/HighlightBanner/HighlightBanner.tsx

@@ -0,0 +1,122 @@
+import { Image, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Card } from '../Card';
+import type HighlightBannerProps from './HighlightBanner.props';
+
+const HighlightBanner = ({
+  heading,
+  headingColor,
+  image,
+  imageContainerHeight,
+  description,
+  link,
+  button,
+  variant = 'emphasis',
+  style,
+  ...props
+}: HighlightBannerProps) => {
+  styles.useVariants({ headingColor, variant });
+
+  return (
+    <Card variant={variant} noPadding style={style} {...props}>
+      <View style={[styles.container]}>
+        <View style={[styles.header]}>
+          <BodyText size="md" textAlign="center" weight="semibold">
+            {heading}
+          </BodyText>
+        </View>
+        <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}
+          </BodyText>
+          {link && <View style={styles.linkContainer}>{link}</View>}
+          {button && <View style={styles.buttonContainer}>{button}</View>}
+        </View>
+      </View>
+    </Card>
+  );
+};
+
+HighlightBanner.displayName = 'HighlightBanner';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    overflow: 'hidden',
+    flex: 1,
+    width: '100%',
+  },
+  header: {
+    padding: theme.components.banner.highlight.padding,
+    alignItems: 'center',
+    justifyContent: 'center',
+    variants: {
+      headingColor: {
+        highlight: {
+          backgroundColor: theme.color.surface.highlight.subtle,
+        },
+        pig: {
+          backgroundColor: theme.color.surface.pig.subtle,
+        },
+        energy: {
+          backgroundColor: theme.color.surface.energy.subtle,
+        },
+        broadband: {
+          backgroundColor: theme.color.surface.broadband.subtle,
+        },
+        mobile: {
+          backgroundColor: theme.color.surface.mobile.subtle,
+        },
+        insurance: {
+          backgroundColor: theme.color.surface.insurance.subtle,
+        },
+        cashback: {
+          backgroundColor: theme.color.surface.cashback.subtle,
+        },
+      },
+      variant: {
+        emphasis: {
+          borderColor: theme.color.border.strong,
+          borderBottomWidth: theme.borderWidth[2],
+        },
+        subtle: {
+          borderColor: theme.color.border.subtle,
+        },
+      },
+    },
+  },
+  imageContainer: (height: number = 200) => ({
+    width: '100%',
+    height,
+  }),
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  footer: {
+    padding: theme.components.banner.highlight.padding,
+    gap: theme.components.banner.highlight.content.gap,
+    variants: {
+      variant: {
+        emphasis: {
+          borderColor: theme.color.border.strong,
+          borderTopWidth: theme.borderWidth[2],
+        },
+        subtle: {
+          borderColor: theme.color.border.subtle,
+        },
+      },
+    },
+  },
+  linkContainer: {
+    alignItems: 'center',
+  },
+  buttonContainer: {
+    alignItems: 'stretch',
+  },
+}));
+
+export default HighlightBanner;

package/src/components/HighlightBanner/index.ts

@@ -0,0 +1,2 @@
+export { default as HighlightBanner } from './HighlightBanner';
+export type { default as HighlightBannerProps } from './HighlightBanner.props';

package/src/components/Spinner/Spinner.tsx

@@ -18,9 +18,7 @@ import { ColorValue } from '../../types';
 import { getFlattenedColorValue } from '../../utils';
 import type SpinnerProps from './Spinner.props';
 
-// @ts-expect-error - Animated.View type issue
 const AnimatedSvg = Animated.createAnimatedComponent(Svg as React.ComponentType<any>);
-// @ts-expect-error - Animated.View type issue
 const AnimatedCircle = Animated.createAnimatedComponent(Circle as React.ComponentType<any>);
 
 const SpinnerRoot = ({ size = 'md', color, ...props }: SpinnerProps) => {

package/src/components/Spinner/Spinner.web.tsx

@@ -18,9 +18,7 @@ import { ColorValue } from '../../types';
 import { getFlattenedColorValue } from '../../utils';
 import type SpinnerProps from './Spinner.props';
 
-// @ts-expect-error - Animated.View type issue
 const AnimatedSvg = Animated.createAnimatedComponent(Svg as React.ComponentType<any>);
-// @ts-expect-error - Animated.View type issue
 const AnimatedCircle = Animated.createAnimatedComponent(Circle as React.ComponentType<any>);
 
 const SpinnerRoot = ({ size = 'md', color, ...props }: SpinnerProps) => {

package/src/components/Switch/Switch.web.tsx

@@ -15,7 +15,6 @@ import { useTheme } from '../../hooks';
 import { Icon } from '../Icon';
 import SwitchProps from './Switch.props';
 
-// @ts-expect-error - Animated.View type issue
 const AnimatedView = Animated.createAnimatedComponent(View);
 
 const CustomSwitch = ({
@@ -115,18 +114,15 @@ const CustomSwitch = ({
       accessibilityHint={accessibilityProps.accessibilityHint}
       {...accessibilityProps}
     >
-      {/* @ts-expect-error - Animated.View type issue */}
       <AnimatedView style={[styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle]}>
-        {/* @ts-expect-error - Animated.View type issue */}
         <AnimatedView style={[styles.thumb, animatedThumbStyle]}>
-          {/* @ts-expect-error - Animated.View type issue */}
           <AnimatedView style={[styles.iconWrap, animatedTickStyle]}>
             {(() => {
               const IconAny = Icon as any;
               return <IconAny as={TickSmallIcon} style={styles.icon as any} />;
             })()}
           </AnimatedView>
-          {/* @ts-expect-error - Animated.View type issue */}
+
           <AnimatedView style={[styles.iconWrap, animatedCrossStyle]}>
             {(() => {
               const IconAny = Icon as any;

package/src/components/Tabs/TabsList.tsx

@@ -15,7 +15,6 @@ import { UnstyledIconButton } from '../UnstyledIconButton';
 import { useTabsContext } from './Tabs.context';
 import type TabsListProps from './TabsList.props';
 
-// @ts-expect-error - Animated.View type issue
 const Indicator = Animated.createAnimatedComponent(View);
 
 const SCROLL_STEP_RATIO = 0.6;
@@ -113,7 +112,6 @@ const TabsList = ({ children, style, ...rest }: TabsListProps) => {
         <View style={styles.container}>
           {children}
           <Indicator
-            // @ts-expect-error - Animated.View type issue
             accessibilityElementsHidden
             importantForAccessibility="no-hide-descendants"
             style={[styles.indicator, indicatorStyle]}

package/src/components/index.ts

@@ -2,6 +2,7 @@
 export * from './Accordion';
 export * from './Alert';
 export * from './Badge';
+export * from './Banner';
 export * from './BodyText';
 export * from './BottomSheet';
 export * from './Box';
@@ -17,11 +18,14 @@ export * from './DatePickerInput';
 export * from './DescriptionList';
 export * from './DetailText';
 export * from './Divider';
+export * from './Expandable';
+export * from './ExpandableCard';
 export * from './Flex';
 export * from './FormField';
 export * from './Grid';
 export * from './Heading';
 export * from './Helper';
+export * from './HighlightBanner';
 export * from './HTMLElements';
 export * from './Icon';
 export * from './IconButton';