@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/components/Banner/Banner.tsx

@@ -1,337 +0,0 @@
-import { ChevronRightSmallIcon, CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useMemo } from 'react';
-import { Pressable, View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../BodyText';
-import { Card } from '../Card';
-import { Heading } from '../Heading';
-import { IconContainer } from '../IconContainer';
-import { UnstyledIconButton } from '../UnstyledIconButton';
-import BannerContext from './Banner.context';
-import type BannerProps from './Banner.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
-}: BannerProps) => {
-  const hasIllustration = Boolean(illustration);
-  styles.useVariants({
-    direction,
-    hasIllustration,
-    isPressable: Boolean(onPress),
-    alignChevron,
-  });
-
-  const context = useMemo(
-    () => ({
-      direction,
-    }),
-    [direction]
-  );
-
-  const renderIconOrImage = () => {
-    if (icon) {
-      return (
-        <IconContainer
-          icon={icon}
-          variant={iconContainerVariant}
-          size={iconContainerSize}
-          color={iconContainerColor}
-          style={styles.media}
-        />
-      );
-    }
-    if (illustration) {
-      return illustration;
-    }
-    if (image) {
-      return image;
-    }
-    return null;
-  };
-
-  const renderAction = () => {
-    if (link) {
-      return <View style={styles.action}>{link}</View>;
-    }
-    if (button) {
-      return (
-        <View style={[styles.action, styles.buttonWrap]}>
-          <View style={styles.buttonInner}>{button}</View>
-        </View>
-      );
-    }
-    return null;
-  };
-
-  const content = (
-    <View style={styles.container}>
-      {onClose && direction === 'vertical' && (
-        <UnstyledIconButton
-          icon={CloseSmallIcon}
-          size="sm"
-          onPress={onClose}
-          style={styles.closeButton}
-          accessibilityLabel="Close banner"
-        />
-      )}
-      {renderIconOrImage()}
-
-      <View style={styles.contentContainer}>
-        <View style={styles.contentTextContainer}>
-          <View style={styles.textContainer}>
-            <Heading
-              size="sm"
-              style={styles.heading}
-              textAlign={hasIllustration && direction === 'vertical' ? 'center' : 'left'}
-            >
-              {heading}
-            </Heading>
-            <BodyText
-              size="md"
-              style={styles.description}
-              textAlign={hasIllustration && direction === 'vertical' ? 'center' : 'left'}
-            >
-              {description}
-            </BodyText>
-          </View>
-
-          {renderAction()}
-        </View>
-        {onPress && (
-          <UnstyledIconButton
-            icon={ChevronRightSmallIcon}
-            size="sm"
-            onPress={onPress}
-            style={styles.chevron}
-          />
-        )}
-        {onClose && direction === 'horizontal' && (
-          <UnstyledIconButton
-            icon={CloseSmallIcon}
-            size="sm"
-            onPress={onClose}
-            style={styles.closeButton}
-            accessibilityLabel="Close banner"
-          />
-        )}
-      </View>
-    </View>
-  );
-
-  if (onPress) {
-    return (
-      <BannerContext.Provider value={context}>
-        <Card variant={variant} style={[styles.card, style]} {...props}>
-          <Pressable onPress={onPress} accessibilityRole="button" style={styles.pressable}>
-            {content}
-          </Pressable>
-        </Card>
-      </BannerContext.Provider>
-    );
-  }
-
-  return (
-    <BannerContext.Provider value={context}>
-      <Card variant={variant} style={[styles.card, style]} {...props}>
-        {content}
-      </Card>
-    </BannerContext.Provider>
-  );
-};
-
-Banner.displayName = 'Banner';
-
-const styles = StyleSheet.create(theme => ({
-  card: { flexDirection: 'row', _web: { flexDirection: 'column' } },
-  pressable: {
-    flex: 1,
-  },
-  container: {
-    flexDirection: 'row',
-    gap: theme.space.lg,
-    variants: {
-      direction: {
-        horizontal: {
-          flexDirection: 'row',
-          alignItems: 'flex-start',
-        },
-        vertical: {
-          flexDirection: 'column',
-          alignItems: 'stretch',
-        },
-      },
-      hasIllustration: {
-        true: {},
-        false: {},
-      },
-      isPressable: {
-        true: {},
-        false: {},
-      },
-    },
-    compoundVariants: [
-      {
-        direction: 'vertical',
-        hasIllustration: false,
-        styles: {
-          alignItems: 'flex-start',
-        },
-      },
-      {
-        direction: 'vertical',
-        hasIllustration: true,
-        styles: {
-          alignItems: 'center',
-        },
-      },
-      {
-        direction: 'horizontal',
-        isPressable: false,
-        styles: {
-          flex: 1,
-        },
-      },
-    ],
-  },
-  media: {
-    flexShrink: 0,
-    variants: {
-      direction: {
-        horizontal: {},
-        vertical: {
-          alignSelf: 'flex-start',
-        },
-      },
-    },
-  },
-  contentContainer: {
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
-    gap: theme.space.lg,
-    variants: {
-      direction: {
-        horizontal: {
-          flex: 1,
-          flexDirection: 'row',
-        },
-        vertical: {
-          flexDirection: 'column',
-        },
-      },
-    },
-  },
-  textContainer: {
-    gap: theme.space.sm,
-  },
-  contentTextContainer: {
-    gap: theme.space.lg,
-    variants: {
-      direction: {
-        horizontal: {
-          flex: 1,
-        },
-        vertical: {},
-      },
-    },
-  },
-  heading: {
-    compoundVariants: [
-      {
-        direction: 'vertical',
-        hasIllustration: true,
-        styles: {
-          textAlign: 'center',
-        },
-      },
-    ],
-  },
-  description: {
-    compoundVariants: [
-      {
-        direction: 'vertical',
-        hasIllustration: true,
-        styles: {
-          textAlign: 'center',
-        },
-      },
-    ],
-  },
-  action: {
-    alignSelf: 'flex-start',
-  },
-  buttonWrap: {
-    variants: {
-      direction: {
-        horizontal: {},
-        vertical: {
-          flexDirection: 'row',
-          justifyContent: 'center',
-          alignItems: 'stretch',
-        },
-      },
-    },
-  },
-  buttonInner: {
-    variants: {
-      direction: {
-        horizontal: {},
-        vertical: {
-          flex: 1,
-        },
-      },
-    },
-  },
-  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',
-    variants: {
-      direction: {
-        vertical: {
-          position: 'absolute',
-          top: 0,
-          right: 0,
-        },
-        horizontal: {},
-      },
-    },
-  },
-}));
-
-export default Banner;

package/src/components/Banner/BannerIllustration.figma.tsx

@@ -1,30 +0,0 @@
-import React from "react"
-import BannerIllustration from "./BannerIllustration"
-import figma from "@figma/code-connect"
-
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
-
-figma.connect(
-  BannerIllustration,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=10145%3A4877",
-  {
-    props: {
-      // No matching props could be found for these Figma properties:
-      // "illustration": figma.instance('Illustration'),
-      // "size": figma.enum('Size', {
-      //   "XL-120": "xl-120",
-      //   "LG-100": "lg-100",
-      //   "MD-80": "md-80",
-      //   "SM-60": "sm-60",
-      //   "XS-40": "xs-40"
-      // })
-    },
-    example: (props) => <BannerIllustration />,
-  },
-)

package/src/components/Banner/BannerIllustration.tsx

@@ -1,58 +0,0 @@
-import { Image, ImageProps, View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { isThemedImageProps } from '../../utils';
-import { ThemedImage, ThemedImageProps } from '../ThemedImage';
-import { useBannerContext } from './Banner.context';
-
-const BannerIllustration = (props: ImageProps | ThemedImageProps) => {
-  const { direction } = useBannerContext();
-  styles.useVariants({ direction });
-  if (isThemedImageProps(props)) {
-    return (
-      <View style={[styles.media, styles.imageWrapper]}>
-        <ThemedImage {...props} style={[styles.image, props.style]} />
-      </View>
-    );
-  }
-  return (
-    <View style={[styles.media, styles.imageWrapper]}>
-      <Image {...props} style={[styles.image, props.style]} />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  media: {
-    flexShrink: 0,
-    variants: {
-      direction: {
-        horizontal: {},
-        vertical: {
-          alignSelf: 'center',
-        },
-      },
-    },
-  },
-  imageWrapper: {
-    flexDirection: 'row',
-    variants: {
-      direction: {
-        horizontal: {},
-        vertical: {},
-      },
-    },
-  },
-  image: {
-    variants: {
-      direction: {
-        horizontal: { width: 160, height: 95 },
-        vertical: {
-          width: '100%',
-          height: 160,
-        },
-      },
-    },
-  },
-});
-
-export default BannerIllustration;

package/src/components/Banner/BannerImage.tsx

@@ -1,63 +0,0 @@
-import { Image, ImageProps, View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { isThemedImageProps } from '../../utils';
-import { ThemedImage, ThemedImageProps } from '../ThemedImage';
-import { useBannerContext } from './Banner.context';
-
-const BannerImage = (props: ImageProps | ThemedImageProps) => {
-  const { direction } = useBannerContext();
-  styles.useVariants({ direction });
-  if (isThemedImageProps(props)) {
-    return (
-      <View style={[styles.media, styles.imageWrapper]}>
-        <ThemedImage {...props} style={[styles.image, props.style]} />
-      </View>
-    );
-  }
-  return (
-    <View style={[styles.media, styles.imageWrapper]}>
-      <Image {...props} style={[styles.image, props.style]} />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create(theme => ({
-  media: {
-    flexShrink: 0,
-    variants: {
-      direction: {
-        horizontal: {},
-        vertical: {
-          alignSelf: 'flex-start',
-        },
-      },
-    },
-  },
-  imageWrapper: {
-    flexDirection: 'row',
-    variants: {
-      direction: {
-        horizontal: {},
-        vertical: {
-          width: '100%',
-        },
-      },
-    },
-  },
-  image: {
-    borderRadius: theme.borderRadius.md,
-    borderColor: theme.color.border.strong,
-    borderWidth: theme.borderWidth[1],
-    variants: {
-      direction: {
-        horizontal: { width: 160, height: 95 },
-        vertical: {
-          width: '100%',
-          height: 160,
-        },
-      },
-    },
-  },
-}));
-
-export default BannerImage;

package/src/components/Banner/index.ts

@@ -1,4 +0,0 @@
-export { default as Banner } from './Banner';
-export type { default as BannerProps } from './Banner.props';
-export { default as BannerIllustration } from './BannerIllustration';
-export { default as BannerImage } from './BannerImage';

package/src/components/BodyText/BodyText.props.ts

@@ -1,10 +0,0 @@
-import type { CommonTextProps } from '../../types';
-
-interface BodyTextProps extends CommonTextProps {
-  /** Text size variant. */
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  /** Font weight variant. */
-  weight?: 'regular' | 'semibold' | 'bold';
-}
-
-export default BodyTextProps;

package/src/components/BodyText/BodyText.stories.tsx

@@ -1,147 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { BodyText } from '.';
-import { VariantTitle } from '../../../docs/components';
-import { coloursAsArray } from '../../utils';
-import { textColorKeys } from '../../utils/coloursAsArray';
-import { Box } from '../Box';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Stories / BodyText',
-  component: BodyText,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    size: {
-      options: ['sm', 'md', 'lg', 'xl'],
-      control: 'select',
-      description: 'The size of the text.',
-    },
-    truncated: {
-      type: 'boolean',
-      control: 'boolean',
-      description: 'Truncate the text.',
-    },
-    weight: {
-      options: ['regular', 'semibold', 'bold'],
-      control: 'select',
-      description: 'The weight of the text.',
-    },
-    italic: {
-      type: 'boolean',
-      control: 'boolean',
-      description: 'Italicize the text.',
-    },
-    underline: {
-      type: 'boolean',
-      control: 'boolean',
-      description: 'Underline the text.',
-    },
-    strikeThrough: {
-      type: 'boolean',
-      control: 'boolean',
-      description: 'Strike through the text.',
-    },
-    color: {
-      options: textColorKeys,
-      control: 'select',
-      description: 'Color of the text. Use the color name from the theme.',
-    },
-    textDecorationLine: {
-      options: ['none', 'underline', 'line-through'],
-      control: 'select',
-      description: 'Text decoration line.',
-    },
-    textDecorationColor: {
-      options: coloursAsArray(),
-      control: 'select',
-      description: 'Color of the text decoration. Use the color name from the theme.',
-    },
-    textTransform: {
-      options: ['none', 'uppercase', 'lowercase', 'capitalize'],
-      control: 'select',
-      description: 'Transform the text.',
-    },
-    textAlign: {
-      options: ['auto', 'left', 'right', 'center', 'justify'],
-      control: 'select',
-      description: 'Align the text horizontally.',
-    },
-    textDecorationStyle: {
-      options: ['solid', 'double', 'dotted', 'dashed'],
-      control: 'select',
-      description: 'Style of the text decoration.',
-    },
-    textAlignVertical: {
-      options: ['auto', 'top', 'bottom', 'center'],
-      control: 'select',
-      description: 'Align the text vertically.',
-    },
-    userSelect: {
-      options: ['auto', 'none', 'text', 'contain', 'all', 'all-scroll', 'auto', 'unset'],
-      control: 'select',
-      description: 'User select.',
-    },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: {
-    children: "Hello there, I'm some body text!",
-    size: 'md',
-    truncated: false,
-    weight: 'regular',
-    italic: false,
-    underline: false,
-    strikeThrough: false,
-    color: undefined,
-    textDecorationColor: 'grey1000',
-  },
-} satisfies Meta<typeof BodyText>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {};
-
-export const KitchenSink: Story = {
-  render: args => (
-    <Box gap="200">
-      <VariantTitle title="SM">
-        <BodyText {...args} size="sm">
-          Hello there, I'm some body text!
-        </BodyText>
-      </VariantTitle>
-      <VariantTitle title="MD">
-        <BodyText {...args} size="md">
-          Hello there, I'm some body text!
-        </BodyText>
-      </VariantTitle>
-      <VariantTitle title="LG">
-        <BodyText {...args} size="lg">
-          Hello there, I'm some body text!
-        </BodyText>
-      </VariantTitle>
-      <VariantTitle title="XL">
-        <BodyText {...args} size="xl">
-          Hello there, I'm some body text!
-        </BodyText>
-      </VariantTitle>
-    </Box>
-  ),
-};
-
-export const SemiBold: Story = {
-  args: {
-    weight: 'semibold',
-    children: "Hello there, I'm some semi bold body text!",
-  },
-};
-
-export const Underline: Story = {
-  args: {
-    underline: true,
-    children: "Hello there, I'm some underlined body text!",
-  },
-};