@utilitywarehouse/hearth-react-native 0.6.0 → 0.8.0

package/src/components/Card/Card.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { Card, CardAction } from '.';
+import { BellMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { Card, CardAction, CardPressHandler } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { BodyText } from '../BodyText';
 import { Button } from '../Button';
@@ -59,6 +60,52 @@ export const Playground: Story = {
   },
 };
 
+export const WithActions: Story = {
+  render: ({ children, ...props }) => {
+    return (
+      <Card {...props} flexDirection="column" alignItems="stretch" space="md" variant="emphasis">
+        <BodyText>{children as string}</BodyText>
+        <CardAction
+          onPress={() => console.log('Card action pressed')}
+          heading="Card Action Head"
+          helperText="Some helper text"
+          leadingIcon={BellMediumIcon}
+        />
+        <CardAction
+          onPress={() => console.log('Card action pressed')}
+          heading="Card Action Head"
+          leadingIcon={BellMediumIcon}
+        />
+        <CardAction
+          onPress={() => console.log('Card action pressed')}
+          heading="Card Action Head"
+          helperText="Testing"
+          leadingIcon={BellMediumIcon}
+          iconContainer={false}
+        />
+      </Card>
+    );
+  },
+};
+
+export const WithOnlyAction: Story = {
+  args: {
+    variant: 'emphasis',
+  },
+  render: ({ children, ...props }) => {
+    return (
+      <Card {...props} flexDirection="column" alignItems="stretch" space="md">
+        <CardAction
+          onPress={() => console.log('Card action pressed')}
+          heading="Card Action Head"
+          helperText="Some helper text"
+          leadingIcon={BellMediumIcon}
+        />
+      </Card>
+    );
+  },
+};
+
 export const Variants: Story = {
   parameters: {
     controls: { exclude: ['variant', 'colorScheme'] },
@@ -224,9 +271,9 @@ export const Interactive: Story = {
           >
             <Heading size="md">Heading</Heading>
             <BodyText>{children as string}</BodyText>
-            <CardAction>
+            <CardPressHandler>
               <Button onPress={() => console.log('pressed')}>Press me</Button>
-            </CardAction>
+            </CardPressHandler>
           </Card>
         </VariantTitle>
       </Flex>

package/src/components/Card/CardAction/CardAction.context.ts

@@ -0,0 +1,22 @@
+import { createContext, useContext } from 'react';
+
+export interface ICardActionContext {
+  showPressed: boolean;
+  active?: boolean;
+  loading: boolean;
+  disabled: boolean;
+  size: 'md' | 'lg';
+}
+
+export const CardActionContext = createContext<ICardActionContext>({
+  showPressed: false,
+  active: false,
+  loading: false,
+  disabled: false,
+  size: 'md',
+});
+
+export const useCardActionContext = () => {
+  const context = useContext(CardActionContext);
+  return context;
+};

package/src/components/Card/CardAction/CardAction.props.ts

@@ -0,0 +1,87 @@
+import { ComponentType } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+import BadgeProps from '../../Badge/Badge.props';
+import { IconContainerProps } from '../../IconContainer';
+
+interface CardActionBaseProps extends Omit<PressableProps, 'children'> {
+  loading?: boolean;
+  disabled?: boolean;
+  size?: 'md' | 'lg';
+}
+
+interface CardActionContentProps {
+  heading: string;
+  helperText?: string;
+  badge?: BadgeProps;
+  badgePosition?: 'bottom' | 'middle' | 'right' | 'top';
+  iconContainer?: boolean;
+  iconContainerVariant?: IconContainerProps['variant'];
+  iconContainerColor?: IconContainerProps['color'];
+}
+
+export interface CardActionWithChildren extends CardActionBaseProps {
+  children: ViewProps['children'];
+  heading?: never;
+  helperText?: never;
+  leadingContent?: never;
+  leadingIcon?: never;
+  trailingContent?: never;
+  trailingIcon?: never;
+  badge?: never;
+  badgePosition?: never;
+  iconContainer?: never;
+  iconContainerVariant?: never;
+  iconContainerColor?: never;
+}
+
+// Leading content variants
+type CardActionWithLeadingContent = CardActionBaseProps &
+  CardActionContentProps & {
+    children?: never;
+    leadingContent: ViewProps['children'];
+    leadingIcon?: never;
+  };
+
+type CardActionWithLeadingIcon = CardActionBaseProps &
+  CardActionContentProps & {
+    children?: never;
+    leadingContent?: never;
+    leadingIcon: ComponentType;
+  };
+
+type CardActionWithNoLeading = CardActionBaseProps &
+  CardActionContentProps & {
+    children?: never;
+    leadingContent?: never;
+    leadingIcon?: never;
+  };
+
+type CardActionLeadingVariants =
+  | CardActionWithLeadingContent
+  | CardActionWithLeadingIcon
+  | CardActionWithNoLeading;
+
+// Trailing content combined with leading variants
+type CardActionWithTrailingContent = CardActionLeadingVariants & {
+  trailingContent: ViewProps['children'];
+  trailingIcon?: never;
+};
+
+type CardActionWithTrailingIcon = CardActionLeadingVariants & {
+  trailingContent?: never;
+  trailingIcon: ComponentType;
+};
+
+type CardActionWithNoTrailing = CardActionLeadingVariants & {
+  trailingContent?: never;
+  trailingIcon?: never;
+};
+
+type CardActionWithoutChildren =
+  | CardActionWithTrailingContent
+  | CardActionWithTrailingIcon
+  | CardActionWithNoTrailing;
+
+type CardActionProps = CardActionWithChildren | CardActionWithoutChildren;
+
+export default CardActionProps;

package/src/components/Card/CardAction/CardAction.stories.tsx

@@ -0,0 +1,265 @@
+import { Meta, StoryObj } from '@storybook/react';
+import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
+import { ElectricityMediumIcon, GasMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { View } from 'react-native';
+import { Flex } from '../../Flex';
+import Card from '../Card';
+import CardAction from './CardAction';
+
+const meta: Meta<typeof CardAction> = {
+  title: 'Stories / CardAction',
+  component: CardAction,
+  argTypes: {
+    heading: { control: 'text' },
+    helperText: { control: 'text' },
+    disabled: { control: 'boolean' },
+    loading: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: ['md', 'lg'],
+    },
+    badge: { control: 'object' },
+    badgePosition: {
+      control: 'select',
+      options: ['bottom', 'middle', 'right'],
+    },
+    leadingIcon: {
+      options: [
+        'none',
+        ...Object.keys(Icons).filter(icon => icon.includes('Small') || icon.includes('Medium')),
+      ],
+      control: 'select',
+      description: 'The leading icon.',
+    },
+    trailingIcon: {
+      options: [
+        'none',
+        ...Object.keys(Icons).filter(icon => icon.includes('Small') || icon.includes('Medium')),
+      ],
+      control: 'select',
+      description: 'The trailing icon.',
+    },
+    iconContainer: { control: 'boolean' },
+    iconContainerVariant: {
+      control: 'select',
+      options: ['subtle', 'emphasis'],
+    },
+    iconContainerColor: {
+      control: 'select',
+      options: ['pig', 'energy', 'broadband', 'mobile', 'insurance', 'cashback', 'highlight'],
+    },
+  },
+  args: {
+    heading: 'Card Action',
+    helperText: 'This is a card action component',
+    size: 'md',
+    loading: false,
+    disabled: false,
+    iconContainer: true,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CardAction>;
+
+export const Playground: Story = {
+  args: {
+    onPress: () => console.log('pressed'),
+  },
+  render: (args: any) => {
+    // @ts-expect-error - This is a playground
+    const leadingIcon = args.leadingIcon === 'none' ? undefined : Icons[args.leadingIcon];
+    // @ts-expect-error - This is a playground
+    const trailingIcon = args.trailingIcon === 'none' ? undefined : Icons[args.trailingIcon];
+    return (
+      <View style={{ width: '100%', maxWidth: 400 }}>
+        <Card variant="emphasis">
+          <CardAction {...args} leadingIcon={leadingIcon} trailingIcon={trailingIcon} />
+        </Card>
+      </View>
+    );
+  },
+};
+
+export const WithLeadingIcon: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <View style={{ width: '100%', maxWidth: 400 }}>
+      <Card variant="emphasis">
+        <CardAction
+          heading="Bills"
+          helperText="View your bills"
+          leadingIcon={ElectricityMediumIcon}
+          onPress={() => console.log('pressed')}
+        />
+      </Card>
+    </View>
+  ),
+};
+
+export const WithTrailingIcon: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <View style={{ width: '100%', maxWidth: 400 }}>
+      <Card variant="emphasis">
+        <CardAction
+          heading="Bills"
+          helperText="View your bills"
+          trailingIcon={ElectricityMediumIcon}
+          onPress={() => console.log('pressed')}
+        />
+      </Card>
+    </View>
+  ),
+};
+
+export const WithIconContainer: Story = {
+  args: {},
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <View style={{ width: '100%', maxWidth: 400 }}>
+      <Card variant="emphasis">
+        <CardAction
+          heading="Electricity"
+          helperText="Last reading 23/03/24"
+          leadingIcon={ElectricityMediumIcon}
+          iconContainer
+          iconContainerVariant="emphasis"
+          iconContainerColor="energy"
+          onPress={() => console.log('pressed')}
+        />
+        <CardAction
+          heading="Gas"
+          helperText="Last reading 23/03/24"
+          leadingIcon={GasMediumIcon}
+          iconContainer
+          iconContainerVariant="emphasis"
+          iconContainerColor="energy"
+          onPress={() => console.log('pressed')}
+        />
+        <CardAction
+          heading="Gas"
+          helperText="Last reading 23/03/24"
+          leadingIcon={GasMediumIcon}
+          iconContainer
+          iconContainerVariant="emphasis"
+          iconContainerColor="energy"
+          onPress={() => console.log('pressed')}
+        />
+      </Card>
+    </View>
+  ),
+};
+
+export const WithBadge: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <Flex direction="column" space="md" style={{ width: '100%', maxWidth: 400 }}>
+      <Card variant="emphasis">
+        <CardAction
+          heading="Badge at bottom"
+          helperText="Badge positioned below text"
+          leadingIcon={ElectricityMediumIcon}
+          badge={{ text: 'New' }}
+          badgePosition="bottom"
+          onPress={() => console.log('pressed')}
+        />
+      </Card>
+      <Card variant="emphasis">
+        <CardAction
+          heading="Badge at middle"
+          helperText="Badge positioned between heading and helper text"
+          leadingIcon={ElectricityMediumIcon}
+          badge={{ text: 'New' }}
+          badgePosition="middle"
+          onPress={() => console.log('pressed')}
+        />
+      </Card>
+      <Card variant="emphasis">
+        <CardAction
+          heading="Badge at right"
+          helperText="Badge positioned on the right side"
+          leadingIcon={ElectricityMediumIcon}
+          badge={{ text: 'New' }}
+          badgePosition="right"
+          onPress={() => console.log('pressed')}
+        />
+      </Card>
+    </Flex>
+  ),
+};
+
+export const Sizes: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <Flex direction="column" space="md" style={{ width: '100%', maxWidth: 400 }}>
+      <Card variant="emphasis">
+        <CardAction
+          heading="Medium size (default)"
+          helperText="Heading size is md"
+          size="md"
+          leadingIcon={ElectricityMediumIcon}
+          onPress={() => console.log('pressed')}
+        />
+      </Card>
+      <Card variant="emphasis">
+        <CardAction
+          heading="Large size"
+          helperText="Heading size is lg"
+          size="lg"
+          leadingIcon={ElectricityMediumIcon}
+          onPress={() => console.log('pressed')}
+        />
+      </Card>
+    </Flex>
+  ),
+};
+
+export const Loading: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <View style={{ width: '100%', maxWidth: 400 }}>
+      <Card variant="emphasis">
+        <CardAction
+          heading="Loading"
+          helperText="This is loading"
+          loading
+          leadingIcon={ElectricityMediumIcon}
+          onPress={() => console.log('pressed')}
+        />
+      </Card>
+    </View>
+  ),
+};
+
+export const Disabled: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => (
+    <View style={{ width: '100%', maxWidth: 400 }}>
+      <Card variant="emphasis">
+        <CardAction
+          heading="Disabled"
+          helperText="This is disabled"
+          disabled
+          leadingIcon={ElectricityMediumIcon}
+          onPress={() => console.log('pressed')}
+        />
+      </Card>
+    </View>
+  ),
+};

package/src/components/Card/CardAction/CardAction.tsx

@@ -0,0 +1,10 @@
+import { createPressable } from '@gluestack-ui/pressable';
+import CardActionRoot from './CardActionRoot';
+
+const CardAction = createPressable({
+  Root: CardActionRoot,
+});
+
+CardAction.displayName = 'CardAction';
+
+export default CardAction;

package/src/components/Card/CardAction/CardActionContent.tsx

@@ -0,0 +1,20 @@
+import { View, type ViewProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+const CardActionContent = ({ children, ...props }: ViewProps) => {
+  return (
+    <View {...props} style={[styles.container, props.style]}>
+      {children}
+    </View>
+  );
+};
+
+CardActionContent.displayName = 'CardActionContent';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default CardActionContent;

package/src/components/Card/CardAction/CardActionHelperText.tsx

@@ -0,0 +1,21 @@
+import { TextProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../../BodyText';
+
+const CardActionHelperText = ({ children, ...props }: TextProps) => {
+  return (
+    <BodyText size="md" {...props} style={[styles.text, props.style]}>
+      {children}
+    </BodyText>
+  );
+};
+
+CardActionHelperText.displayName = 'CardActionHelperText';
+
+const styles = StyleSheet.create(theme => ({
+  text: {
+    color: theme.color.text.secondary,
+  },
+}));
+
+export default CardActionHelperText;

package/src/components/Card/CardAction/CardActionIcon.tsx

@@ -0,0 +1,32 @@
+import { ComponentType } from 'react';
+import { Platform, type StyleProp, type ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon, IconProps } from '../../Icon';
+
+const CardActionIcon = ({ children, ...props }: IconProps & { as?: ComponentType }) => {
+  return (
+    <Icon
+      {...props}
+      style={
+        Platform.OS === 'web'
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
+          : ([styles.icon as StyleProp<ViewStyle>, props.style] as any)
+      }
+    >
+      {children}
+    </Icon>
+  );
+};
+
+CardActionIcon.displayName = 'CardActionIcon';
+
+const styles = StyleSheet.create(theme => ({
+  icon: {
+    color: theme.color.icon.primary,
+    width: 24,
+    height: 24,
+  },
+}));
+
+export default CardActionIcon;

package/src/components/Card/CardAction/CardActionLeadingContent.tsx

@@ -0,0 +1,9 @@
+import { View, type ViewProps } from 'react-native';
+
+const CardActionLeadingContent = ({ children, ...props }: ViewProps) => (
+  <View {...props}>{children}</View>
+);
+
+CardActionLeadingContent.displayName = 'CardActionLeadingContent';
+
+export default CardActionLeadingContent;