@utilitywarehouse/hearth-react-native 0.7.0 → 0.8.0

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

@@ -0,0 +1,494 @@
+import { Meta, StoryObj } from '@storybook/react-native';
+import {
+  BroadbandMediumIcon,
+  CashbackCardMediumIcon,
+  ElectricityMediumIcon,
+  InsuranceMediumIcon,
+  MobileMediumIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
+import SpotBillingDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-dark.svg';
+import SpotBillingLight from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-light.svg';
+import { View } from 'react-native';
+import { Button } from '../Button';
+import { Flex } from '../Flex';
+import { Link } from '../Link';
+import Banner from './Banner';
+
+const meta = {
+  title: 'Stories / Banner',
+  component: Banner,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    heading: {
+      control: 'text',
+      description: 'The heading text',
+    },
+    description: {
+      control: 'text',
+      description: 'The description text',
+    },
+    direction: {
+      control: 'select',
+      description: 'Layout direction for icon/image and content',
+      options: ['horizontal', 'vertical'],
+    },
+    variant: {
+      control: 'select',
+      description: 'The variant style of the banner',
+      options: ['emphasis', 'subtle'],
+    },
+    colorScheme: {
+      control: 'select',
+      description: 'The color scheme for the banner',
+      options: ['pig', 'energy', 'broadband', 'mobile', 'insurance', 'cashback', 'highlight'],
+    },
+    iconContainerVariant: {
+      control: 'select',
+      description: 'Icon container variant',
+      options: ['subtle', 'emphasis'],
+    },
+    iconContainerSize: {
+      control: 'select',
+      description: 'Icon container size',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+  args: {
+    heading: 'Welcome to Banner',
+    description: 'This is a banner component that can display an icon or image with content.',
+    direction: 'horizontal',
+    variant: 'subtle',
+    colorScheme: 'pig',
+  },
+} satisfies Meta<typeof Banner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args: any) => {
+    return (
+      <View style={{ width: 400 }}>
+        <Banner {...args} icon={ElectricityMediumIcon} />
+      </View>
+    );
+  },
+};
+
+export const WithIcon: Story = {
+  render: () => {
+    return (
+      <View style={{ width: 400 }}>
+        <Flex space="lg" direction="column">
+          <Banner
+            icon={ElectricityMediumIcon}
+            iconContainerColor="energy"
+            heading="Energy Services"
+            description="Manage your energy account and view your usage."
+          />
+          <Banner
+            icon={BroadbandMediumIcon}
+            iconContainerColor="broadband"
+            iconContainerVariant="emphasis"
+            heading="Broadband Plans"
+            description="Upgrade your broadband to faster speeds."
+          />
+          <Banner
+            icon={MobileMediumIcon}
+            iconContainerColor="mobile"
+            iconContainerSize="lg"
+            heading="Mobile Deals"
+            description="Check out our latest mobile offers."
+          />
+        </Flex>
+      </View>
+    );
+  },
+};
+
+export const WithIllustration: Story = {
+  render: () => {
+    return (
+      <View style={{ width: 400 }}>
+        <Flex space="lg" direction="column">
+          <Banner
+            illustration={{
+              // @ts-ignore
+              light: <SpotBillingLight width={80} height={80} />,
+              // @ts-ignore
+              dark: <SpotBillingDark width={80} height={80} />,
+            }}
+            heading="Featured Content"
+            description="Discover amazing content curated just for you."
+          />
+          <Banner
+            direction="vertical"
+            illustration={{
+              // @ts-ignore
+              light: <SpotBillingLight width={120} height={120} />,
+              // @ts-ignore
+              dark: <SpotBillingDark width={120} height={120} />,
+            }}
+            heading="Special Offer"
+            description="Limited time offer on selected services."
+          />
+        </Flex>
+      </View>
+    );
+  },
+};
+
+export const WithImage: Story = {
+  render: () => {
+    return (
+      <View style={{ width: 400 }}>
+        <Flex space="lg" direction="column">
+          <Banner
+            image={{
+              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="Featured Content"
+            description="Discover amazing content curated just for you."
+          />
+          <Banner
+            direction="vertical"
+            image={{
+              light: {
+                uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=200&q=80',
+              },
+              dark: {
+                uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=200&q=80',
+              },
+            }}
+            heading="Special Offer"
+            description="Limited time offer on selected services."
+          />
+        </Flex>
+      </View>
+    );
+  },
+};
+
+export const WithButton: Story = {
+  render: () => {
+    return (
+      <View style={{ width: 400 }}>
+        <Flex space="lg" direction="column">
+          <Banner
+            icon={InsuranceMediumIcon}
+            iconContainerColor="insurance"
+            heading="Home Insurance"
+            description="Protect your home with our comprehensive insurance."
+            button={
+              <Button size="sm" onPress={() => console.log('Get Quote pressed')}>
+                Get Quote
+              </Button>
+            }
+          />
+          <Banner
+            icon={CashbackCardMediumIcon}
+            iconContainerColor="cashback"
+            heading="Cashback Rewards"
+            description="Earn cashback on every purchase."
+            colorScheme="cashback"
+            button={
+              <Button size="sm" onPress={() => console.log('Learn More pressed')}>
+                Learn More
+              </Button>
+            }
+          />
+        </Flex>
+      </View>
+    );
+  },
+};
+
+export const WithLink: Story = {
+  render: () => {
+    return (
+      <View style={{ width: 400 }}>
+        <Flex space="lg" direction="column">
+          <Banner
+            icon={ElectricityMediumIcon}
+            iconContainerColor="energy"
+            heading="Energy Saving Tips"
+            description="Learn how to reduce your energy consumption."
+            link={<Link href="#">View tips</Link>}
+          />
+          <Banner
+            icon={BroadbandMediumIcon}
+            iconContainerColor="broadband"
+            heading="Network Status"
+            description="Check the status of your broadband connection."
+            link={<Link href="#">Check status</Link>}
+          />
+        </Flex>
+      </View>
+    );
+  },
+};
+
+export const Pressable: Story = {
+  render: () => {
+    return (
+      <View style={{ width: 400 }}>
+        <Flex space="lg" direction="column">
+          <Banner
+            icon={ElectricityMediumIcon}
+            iconContainerColor="energy"
+            heading="Energy Dashboard"
+            description="View your energy usage and bills."
+            onPress={() => console.log('Banner pressed')}
+          />
+          <Banner
+            image={{
+              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>
+    );
+  },
+};
+
+export const WithClose: Story = {
+  render: () => {
+    return (
+      <View style={{ width: 400 }}>
+        <Flex space="lg" direction="column">
+          <Banner
+            icon={ElectricityMediumIcon}
+            iconContainerColor="energy"
+            heading="Special Announcement"
+            description="We have some exciting news to share with you."
+            onClose={() => console.log('Close pressed')}
+          />
+          <Banner
+            icon={MobileMediumIcon}
+            iconContainerColor="mobile"
+            direction="vertical"
+            heading="New Feature"
+            description="Check out our latest feature update."
+            button={
+              <Button size="sm" onPress={() => console.log('Explore pressed')}>
+                Explore
+              </Button>
+            }
+            onClose={() => console.log('Close pressed')}
+          />
+        </Flex>
+      </View>
+    );
+  },
+};
+
+export const VerticalLayout: Story = {
+  render: () => {
+    return (
+      <View style={{ width: 400 }}>
+        <Flex space="lg" direction="column">
+          <Banner
+            icon={ElectricityMediumIcon}
+            iconContainerColor="energy"
+            heading="Energy Services"
+            description="Manage your energy account and view your usage."
+            direction="vertical"
+          />
+          <Banner
+            image={{
+              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="Featured Content"
+            description="Discover amazing content curated just for you."
+            direction="vertical"
+            button={
+              <Button size="sm" onPress={() => console.log('Learn More pressed')}>
+                Learn More
+              </Button>
+            }
+          />
+        </Flex>
+      </View>
+    );
+  },
+};
+
+export const ColorSchemes: Story = {
+  render: () => {
+    return (
+      <View style={{ width: 400 }}>
+        <Flex space="lg" direction="column">
+          <Banner
+            icon={ElectricityMediumIcon}
+            iconContainerColor="pig"
+            colorScheme="pig"
+            heading="Pig Pink"
+            description="Banner with pig color scheme."
+            button={
+              <Button size="sm" onPress={() => console.log('Action pressed')}>
+                Action
+              </Button>
+            }
+          />
+          <Banner
+            icon={ElectricityMediumIcon}
+            iconContainerColor="energy"
+            colorScheme="energy"
+            heading="Energy Blue"
+            description="Banner with energy color scheme."
+            button={
+              <Button size="sm" onPress={() => console.log('Action pressed')}>
+                Action
+              </Button>
+            }
+          />
+          <Banner
+            icon={BroadbandMediumIcon}
+            iconContainerColor="broadband"
+            colorScheme="broadband"
+            heading="Broadband Green"
+            description="Banner with broadband color scheme."
+            button={
+              <Button size="sm" onPress={() => console.log('Action pressed')}>
+                Action
+              </Button>
+            }
+          />
+          <Banner
+            icon={MobileMediumIcon}
+            iconContainerColor="mobile"
+            colorScheme="mobile"
+            heading="Mobile Rose"
+            description="Banner with mobile color scheme."
+            button={
+              <Button size="sm" onPress={() => console.log('Action pressed')}>
+                Action
+              </Button>
+            }
+          />
+          <Banner
+            icon={InsuranceMediumIcon}
+            iconContainerColor="insurance"
+            colorScheme="insurance"
+            heading="Insurance Orange"
+            description="Banner with insurance color scheme."
+            button={
+              <Button size="sm" onPress={() => console.log('Action pressed')}>
+                Action
+              </Button>
+            }
+          />
+          <Banner
+            icon={CashbackCardMediumIcon}
+            iconContainerColor="cashback"
+            colorScheme="cashback"
+            heading="Cashback Lilac"
+            description="Banner with cashback color scheme."
+            button={
+              <Button size="sm" onPress={() => console.log('Action pressed')}>
+                Action
+              </Button>
+            }
+          />
+        </Flex>
+      </View>
+    );
+  },
+};
+
+export const EmphasisVariant: Story = {
+  render: () => {
+    return (
+      <View style={{ width: 400 }}>
+        <Flex space="lg" direction="column">
+          <Banner
+            icon={ElectricityMediumIcon}
+            iconContainerColor="energy"
+            iconContainerVariant="emphasis"
+            heading="Important Notice"
+            description="This banner uses the emphasis variant for increased visibility."
+            variant="emphasis"
+          />
+          <Banner
+            image={{
+              light: {
+                uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=200&q=80',
+              },
+              dark: {
+                uri: 'https://images.unsplash.com/photo-1473186578172-c141e6798cf4?w=200&q=80',
+              },
+            }}
+            heading="Featured Offer"
+            description="Limited time deal on premium services."
+            variant="emphasis"
+            button={
+              <Button size="sm" onPress={() => console.log('Claim pressed')}>
+                Claim Now
+              </Button>
+            }
+          />
+        </Flex>
+      </View>
+    );
+  },
+};
+
+export const ComplexExample: Story = {
+  render: () => {
+    return (
+      <View style={{ width: 400 }}>
+        <Flex space="lg" direction="column">
+          <Banner
+            icon={InsuranceMediumIcon}
+            iconContainerColor="insurance"
+            iconContainerVariant="emphasis"
+            colorScheme="insurance"
+            heading="Home Insurance Alert"
+            description="Your policy renewal is coming up. Review your coverage and make any necessary changes."
+            button={
+              <Button size="sm" onPress={() => console.log('Review pressed')}>
+                Review Policy
+              </Button>
+            }
+            onPress={() => console.log('Banner pressed')}
+          />
+          <Banner
+            image={{
+              light: {
+                uri: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=200&q=80',
+              },
+              dark: {
+                uri: 'https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=200&q=80',
+              },
+            }}
+            heading="Exclusive Member Benefit"
+            description="As a valued member, you now have access to premium features at no extra cost."
+            variant="emphasis"
+            link={<Link href="#">Explore benefits</Link>}
+            onClose={() => console.log('Close pressed')}
+          />
+        </Flex>
+      </View>
+    );
+  },
+};