@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/components/Heading/Heading.stories.tsx

@@ -1,128 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { Heading } 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 / Heading',
-  component: Heading,
-  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.',
-    },
-    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 a heading!",
-    size: 'md',
-    truncated: false,
-    underline: false,
-    strikeThrough: false,
-    color: undefined,
-    textDecorationColor: 'grey1000',
-  },
-} satisfies Meta<typeof Heading>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {};
-
-export const KitchenSink: Story = {
-  render: args => (
-    <Box gap="200">
-      <VariantTitle title="SM">
-        <Heading {...args} size="sm">
-          Hello there, I'm a heading!
-        </Heading>
-      </VariantTitle>
-      <VariantTitle title="MD">
-        <Heading {...args} size="md">
-          Hello there, I'm a heading!
-        </Heading>
-      </VariantTitle>
-      <VariantTitle title="LG">
-        <Heading {...args} size="lg">
-          Hello there, I'm a heading!
-        </Heading>
-      </VariantTitle>
-      <VariantTitle title="XL">
-        <Heading {...args} size="xl">
-          Hello there, I'm a heading!
-        </Heading>
-      </VariantTitle>
-    </Box>
-  ),
-};
-
-export const Underline: Story = {
-  args: {
-    underline: true,
-    children: 'Hello there, an underlined Heading!',
-  },
-};

package/src/components/Heading/Heading.tsx

@@ -1,193 +0,0 @@
-import { Text, TextStyle } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { useStyleProps } from '../../hooks';
-import { getFlattenedColorValue, resolveThemeValueWithFallback } from '../../utils';
-import type HeadingProps from './Heading.props';
-
-const Heading = ({
-  children,
-  color,
-  size = 'lg',
-  truncated,
-  underline,
-  strikeThrough,
-  textTransform,
-  textAlign,
-  textAlignVertical,
-  textDecorationColor,
-  textDecorationLine,
-  textDecorationStyle,
-  userSelect,
-  inverted,
-  ...props
-}: HeadingProps) => {
-  // Extract margin utility props from remaining props
-  const { computedStyles: utilityStyles, remainingProps } = useStyleProps(props);
-
-  styles.useVariants({
-    size,
-    underline,
-    strikeThrough,
-    inverted,
-  });
-
-  return (
-    <Text
-      accessibilityRole="header"
-      {...remainingProps}
-      {...(truncated
-        ? {
-            numberOfLines: 1,
-            ellipsizeMode: 'tail',
-          }
-        : {})}
-      style={[
-        styles.text,
-        utilityStyles,
-        {
-          ...(textTransform ? { textTransform } : {}),
-          ...(textAlign ? { textAlign } : {}),
-          ...(textAlignVertical ? { textAlignVertical } : {}),
-          ...(textDecorationLine && { textDecorationLine }),
-          ...(textDecorationStyle && { textDecorationStyle }),
-          ...(userSelect && { userSelect }),
-        },
-        styles.getColours(color, textDecorationColor),
-        props.style,
-      ]}
-    >
-      {children}
-    </Text>
-  );
-};
-
-Heading.displayName = 'Heading';
-
-const styles = StyleSheet.create(theme => ({
-  text: {
-    color: theme.color.text.primary,
-    fontFamily: theme.typography.mobile.heading.fontFamily,
-    marginVertical: 0,
-    fontStyle: 'normal',
-    variants: {
-      size: {
-        sm: {
-          fontSize: {
-            base: theme.typography.mobile.heading.sm.fontSize,
-            md: theme.typography.tablet.heading.sm.fontSize,
-            lg: theme.typography.desktop.heading.sm.fontSize,
-          },
-          fontWeight: {
-            base: theme.typography.mobile.heading.sm.fontWeight,
-            md: theme.typography.tablet.heading.sm.fontWeight,
-            lg: theme.typography.desktop.heading.sm.fontWeight,
-          },
-          lineHeight: {
-            base: theme.typography.mobile.heading.sm.lineHeight,
-            md: theme.typography.tablet.heading.sm.lineHeight,
-            lg: theme.typography.desktop.heading.sm.lineHeight,
-          },
-        },
-        md: {
-          fontSize: {
-            base: theme.typography.mobile.heading.md.fontSize,
-            md: theme.typography.tablet.heading.md.fontSize,
-            lg: theme.typography.desktop.heading.md.fontSize,
-          },
-          fontWeight: {
-            base: theme.typography.mobile.heading.md.fontWeight,
-            md: theme.typography.tablet.heading.md.fontWeight,
-            lg: theme.typography.desktop.heading.md.fontWeight,
-          },
-          lineHeight: {
-            base: theme.typography.mobile.heading.md.lineHeight,
-            md: theme.typography.tablet.heading.md.lineHeight,
-            lg: theme.typography.desktop.heading.md.lineHeight,
-          },
-        },
-        lg: {
-          fontSize: {
-            base: theme.typography.mobile.heading.lg.fontSize,
-            md: theme.typography.tablet.heading.lg.fontSize,
-            lg: theme.typography.desktop.heading.lg.fontSize,
-          },
-          fontWeight: {
-            base: theme.typography.mobile.heading.lg.fontWeight,
-            md: theme.typography.tablet.heading.lg.fontWeight,
-            lg: theme.typography.desktop.heading.lg.fontWeight,
-          },
-          lineHeight: {
-            base: theme.typography.mobile.heading.lg.lineHeight,
-            md: theme.typography.tablet.heading.lg.lineHeight,
-            lg: theme.typography.desktop.heading.lg.lineHeight,
-          },
-        },
-        xl: {
-          fontSize: {
-            base: theme.typography.mobile.heading.xl.fontSize,
-            md: theme.typography.tablet.heading.xl.fontSize,
-            lg: theme.typography.desktop.heading.xl.fontSize,
-          },
-          fontWeight: {
-            base: theme.typography.mobile.heading.xl.fontWeight,
-            md: theme.typography.tablet.heading.xl.fontWeight,
-            lg: theme.typography.desktop.heading.xl.fontWeight,
-          },
-          lineHeight: {
-            base: theme.typography.mobile.heading.xl.lineHeight,
-            md: theme.typography.tablet.heading.xl.lineHeight,
-            lg: theme.typography.desktop.heading.xl.lineHeight,
-          },
-        },
-        '2xl': {
-          fontSize: {
-            base: theme.typography.mobile.heading['2xl'].fontSize,
-            md: theme.typography.tablet.heading['2xl'].fontSize,
-            lg: theme.typography.desktop.heading['2xl'].fontSize,
-          },
-          fontWeight: {
-            base: theme.typography.mobile.heading['2xl'].fontWeight,
-            md: theme.typography.tablet.heading['2xl'].fontWeight,
-            lg: theme.typography.desktop.heading['2xl'].fontWeight,
-          },
-          lineHeight: {
-            base: theme.typography.mobile.heading['2xl'].lineHeight,
-            md: theme.typography.tablet.heading['2xl'].lineHeight,
-            lg: theme.typography.desktop.heading['2xl'].lineHeight,
-          },
-        },
-      },
-      underline: {
-        true: {
-          textDecorationLine: 'underline' as TextStyle['textDecorationLine'],
-        },
-      },
-      strikeThrough: {
-        true: {
-          textDecorationLine: 'line-through' as TextStyle['textDecorationLine'],
-        },
-      },
-      inverted: {
-        true: {
-          color: theme.color.text.inverted,
-        },
-      },
-    },
-  },
-  getColours: (color?: string, textDecorationColor?: string) => ({
-    ...(color
-      ? {
-          color: resolveThemeValueWithFallback(
-            color,
-            theme.helpers.semanticColor.text,
-            theme.color
-          ),
-        }
-      : {}),
-    ...(textDecorationColor
-      ? { textDecorationColor: getFlattenedColorValue(textDecorationColor, theme.color) }
-      : {}),
-  }),
-}));
-
-export default Heading;

package/src/components/Heading/index.ts

@@ -1 +0,0 @@
-export { default as Heading } from './Heading';

package/src/components/Helper/Helper.props.ts

@@ -1,24 +0,0 @@
-import type { ComponentType } from 'react';
-import { ViewProps } from 'react-native';
-
-export interface HelperBaseProps extends ViewProps {
-  validationStatus?: 'valid' | 'invalid' | 'initial';
-  showIcon?: boolean;
-  disabled?: boolean;
-}
-
-interface HelperWithChildrenProps extends HelperBaseProps {
-  children: ViewProps['children'];
-  icon?: never;
-  text?: never;
-}
-
-interface HelperWithoutChildrenProps extends HelperBaseProps {
-  children?: never;
-  icon?: ComponentType;
-  text?: string;
-}
-
-type HelperProps = HelperWithChildrenProps | HelperWithoutChildrenProps;
-
-export default HelperProps;

package/src/components/Helper/Helper.tsx

@@ -1,66 +0,0 @@
-import {
-  ErrorCircleSmallIcon,
-  TickCircleSmallIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
-import { useMemo } from 'react';
-import { View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import HelperProps from './Helper.props';
-import { HelperContext } from './HelperContext';
-import HelperIcon from './HelperIcon';
-import HelperText from './HelperText';
-
-const Helper = ({
-  children,
-  validationStatus = 'initial',
-  showIcon,
-  disabled,
-  icon,
-  text,
-  ...props
-}: HelperProps) => {
-  styles.useVariants({ disabled });
-  let Icon = icon;
-  if (validationStatus === 'valid' && !icon) {
-    Icon = TickCircleSmallIcon;
-  }
-  if (validationStatus === 'invalid' && !icon) {
-    Icon = ErrorCircleSmallIcon;
-  }
-
-  const value = useMemo(() => ({ validationStatus, disabled }), [validationStatus, disabled]);
-
-  return (
-    <HelperContext.Provider value={value}>
-      <View style={styles.container}>
-        {children ? (
-          children
-        ) : (
-          <>
-            {showIcon && <HelperIcon as={Icon} />}
-            <HelperText {...props}>{text}</HelperText>
-          </>
-        )}
-      </View>
-    </HelperContext.Provider>
-  );
-};
-
-Helper.displayName = 'Helper';
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    flexDirection: 'row',
-    gap: theme.components.formField.helper.gap,
-    alignItems: 'flex-start',
-    variants: {
-      disabled: {
-        true: {
-          opacity: theme.opacity.disabled,
-        },
-      },
-    },
-  },
-}));
-
-export default Helper;

package/src/components/Helper/HelperContext.ts

@@ -1,6 +0,0 @@
-import { createContext, useContext } from 'react';
-import { HelperBaseProps } from './Helper.props';
-
-export const HelperContext = createContext<HelperBaseProps>({});
-
-export const useHelperContext = () => useContext(HelperContext);

package/src/components/Helper/HelperIcon.tsx

@@ -1,44 +0,0 @@
-import { Platform, StyleProp, ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { Icon } from '../Icon';
-import IconProps from '../Icon/Icon.props';
-import { useHelperContext } from './HelperContext';
-
-const HelperIcon = (props: IconProps) => {
-  const { validationStatus } = useHelperContext();
-  styles.useVariants({ validationStatus });
-
-  return (
-    <Icon
-      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)
-      }
-      {...props}
-    />
-  );
-};
-
-HelperIcon.displayName = 'HelperIcon';
-
-const styles = StyleSheet.create(theme => ({
-  icon: {
-    width: 20,
-    height: 20,
-    variants: {
-      validationStatus: {
-        valid: {
-          color: theme.color.feedback.positive.foreground.subtle,
-        },
-        invalid: {
-          color: theme.color.feedback.danger.foreground.subtle,
-        },
-        initial: {},
-      },
-    },
-  },
-}));
-
-export default HelperIcon;

package/src/components/Helper/HelperText.figma.tsx

@@ -1,23 +0,0 @@
-import React from "react"
-import HelperText from "./HelperText"
-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(
-  HelperText,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=8364%3A1538",
-  {
-    props: {
-      // No matching props could be found for these Figma properties:
-      // "helperText": figma.string('Helper text')
-    },
-    example: (props) => <HelperText />,
-  },
-)

package/src/components/Helper/HelperText.tsx

@@ -1,46 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../BodyText';
-import TextProps from '../BodyText/BodyText.props';
-import { useHelperContext } from './HelperContext';
-
-const HelperText = (props: TextProps) => {
-  const { validationStatus, disabled } = useHelperContext();
-  styles.useVariants({ validationStatus, disabled });
-
-  return (
-    <BodyText
-      size={validationStatus !== 'initial' ? 'sm' : 'md'}
-      style={[styles.text, props.style]}
-      {...props}
-    >
-      {props.children}
-    </BodyText>
-  );
-};
-
-HelperText.displayName = 'HelperText';
-
-const styles = StyleSheet.create(theme => ({
-  text: {
-    color: theme.color.text.secondary,
-    flexShrink: 1,
-    variants: {
-      validationStatus: {
-        valid: {
-          color: theme.color.feedback.positive.foreground.subtle,
-        },
-        invalid: {
-          color: theme.color.feedback.danger.foreground.subtle,
-        },
-        initial: {},
-      },
-      disabled: {
-        true: {
-          opacity: theme.opacity.disabled,
-        },
-      },
-    },
-  },
-}));
-
-export default HelperText;

package/src/components/Helper/index.ts

@@ -1,3 +0,0 @@
-export { default as HelperText } from './HelperText';
-export { default as HelperIcon } from './HelperIcon';
-export { default as Helper } from './Helper';

package/src/components/HighlightBanner/HighlightBanner.figma.tsx

@@ -1,46 +0,0 @@
-import figma from '@figma/code-connect';
-import { HighlightBanner, Image } from '..';
-
-figma.connect(
-  HighlightBanner,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=8306-4665&t=3uUSBVdxldgG5uz3-4',
-  {
-    props: {
-      heading: figma.string('Heading'),
-      description: figma.string('Description'),
-      image: figma.boolean('Image?', {
-        true: <Image source={{ uri: '' }} />,
-      }),
-      headingColor: figma.enum('Heading color', {
-        Highlight: 'highlight',
-        Pig: 'pig',
-        Energy: 'energy',
-        Broadband: 'broadband',
-        Insurance: 'insurance',
-        Cashback: 'cashback',
-        Mobile: 'mobile',
-      }),
-      link: figma.boolean('Link?', {
-        true: figma.children('Link'),
-      }),
-      button: figma.boolean('Button?', {
-        true: figma.children('Button'),
-      }),
-    },
-    example: props => {
-      return (
-        // HighlightBanner doesn't need to be wrapped in a Card
-        // it's a standalone component in code please see the HighlightBanner docs
-        // https://hearth.prod.uw.systems/react-native/?path=/docs/components-highlightbanner--docs
-        <HighlightBanner
-          heading={props.heading}
-          description={props.description}
-          image={props.image}
-          headingColor={props.headingColor}
-          link={props.link}
-          button={props.button}
-        />
-      );
-    },
-  }
-);

package/src/components/HighlightBanner/HighlightBanner.props.ts

@@ -1,29 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-import CardProps from '../Card/Card.props';
-
-interface HighlightBannerProps
-  extends Omit<
-    CardProps,
-    | 'noPadding'
-    | 'variant'
-    | 'space'
-    | 'gap'
-    | 'rowGap'
-    | 'columnGap'
-    | 'flexDirection'
-    | 'flexWrap'
-    | 'alignItems'
-    | 'justifyContent'
-    | 'colorScheme'
-  > {
-  heading?: string;
-  headingColor?: 'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight';
-  variant?: 'emphasis' | 'subtle';
-  image?: ReactNode;
-  imageContainerHeight?: number;
-  description?: string;
-  link?: ReactElement;
-  button?: ReactElement;
-}
-
-export default HighlightBannerProps;