@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/components/Badge/Badge.tsx

@@ -1,300 +0,0 @@
-import { useMemo } from 'react';
-import { View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BadgeContext } from './Badge.context';
-import type BadgeProps from './Badge.props';
-import BadgeIcon from './BadgeIcon';
-import BadgeText from './BadgeText';
-
-const Badge = ({ children, ...props }: BadgeProps) => {
-  const {
-    variant = 'subtle',
-    icon,
-    colorScheme = 'info',
-    flatBase = false,
-    size = 'sm',
-    style,
-    text,
-    numberOfLines,
-    ...rest
-  } = props;
-
-  const value = useMemo(
-    () => ({ colorScheme, flatBase, variant, size }),
-    [colorScheme, flatBase, variant, size]
-  );
-
-  const childIsText = typeof children === 'string' || typeof children === 'number' || !!text;
-
-  styles.useVariants({ colorScheme, flatBase, variant, size });
-
-  return (
-    <BadgeContext.Provider value={value}>
-      <View {...rest} style={[styles.container, style]}>
-        {!!icon && <BadgeIcon as={icon} />}
-        {childIsText ? (
-          <BadgeText numberOfLines={numberOfLines}>{text ?? children}</BadgeText>
-        ) : (
-          children
-        )}
-      </View>
-    </BadgeContext.Provider>
-  );
-};
-
-Badge.displayName = 'Badge';
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    alignSelf: 'flex-start',
-    paddingHorizontal: theme.components.badge.paddingHorizontal,
-    borderRadius: theme.components.badge.borderRadius,
-    gap: theme.components.badge.gap,
-    variants: {
-      colorScheme: {
-        info: {},
-        danger: {},
-        positive: {},
-        warning: {},
-        functional: {},
-        energy: {},
-        broadband: {},
-        mobile: {},
-        insurance: {},
-        cashback: {},
-        pig: {},
-        highlight: {},
-      },
-      variant: {
-        subtle: {},
-        emphasis: {},
-        outline: {
-          borderWidth: theme.components.badge.outline.borderWidth,
-          borderColor: theme.color.border.subtle,
-        },
-      },
-      size: {
-        sm: {
-          paddingVertical: theme.components.badge.sm.paddingVertical,
-          minHeight: theme.components.badge.sm.height,
-        },
-        md: {
-          paddingVertical: theme.components.badge.md.paddingVertical,
-          minHeight: theme.components.badge.md.height,
-        },
-      },
-      flatBase: {
-        true: {
-          borderBottomLeftRadius: theme.components.badge.flatBase.borderBottomLeftRadius,
-          borderBottomRightRadius: theme.components.badge.flatBase.borderBottomRightRadius,
-        },
-        false: {},
-      },
-    },
-    compoundVariants: [
-      // Emphasis
-      {
-        colorScheme: 'info',
-        variant: 'emphasis',
-        styles: {
-          backgroundColor: theme.color.feedback.info.surface.default,
-        },
-      },
-      {
-        colorScheme: 'danger',
-        variant: 'emphasis',
-        styles: {
-          backgroundColor: theme.color.feedback.danger.surface.default,
-        },
-      },
-      {
-        colorScheme: 'positive',
-        variant: 'emphasis',
-        styles: {
-          backgroundColor: theme.color.feedback.positive.surface.default,
-        },
-      },
-      {
-        colorScheme: 'warning',
-        variant: 'emphasis',
-        styles: {
-          backgroundColor: theme.color.feedback.warning.surface.default,
-        },
-      },
-      {
-        colorScheme: 'functional',
-        variant: 'emphasis',
-        styles: {
-          backgroundColor: theme.color.feedback.functional.surface.default,
-        },
-      },
-      {
-        colorScheme: 'energy',
-        variant: 'emphasis',
-        styles: {
-          backgroundColor: theme.color.surface.energy.default,
-        },
-      },
-      {
-        colorScheme: 'broadband',
-        variant: 'emphasis',
-        styles: {
-          backgroundColor: theme.color.surface.broadband.default,
-        },
-      },
-      {
-        colorScheme: 'mobile',
-        variant: 'emphasis',
-        styles: {
-          backgroundColor: theme.color.surface.mobile.default,
-        },
-      },
-      {
-        colorScheme: 'insurance',
-        variant: 'emphasis',
-        styles: {
-          backgroundColor: theme.color.surface.insurance.default,
-        },
-      },
-      {
-        colorScheme: 'cashback',
-        variant: 'emphasis',
-        styles: {
-          backgroundColor: theme.color.surface.cashback.default,
-        },
-      },
-      {
-        colorScheme: 'pig',
-        variant: 'emphasis',
-        styles: {
-          backgroundColor: theme.color.surface.pig.default,
-        },
-      },
-      // Subtle
-      {
-        colorScheme: 'info',
-        variant: 'subtle',
-        styles: {
-          backgroundColor: theme.color.feedback.info.surface.subtle,
-        },
-      },
-      {
-        colorScheme: 'danger',
-        variant: 'subtle',
-        styles: {
-          backgroundColor: theme.color.feedback.danger.surface.subtle,
-        },
-      },
-      {
-        colorScheme: 'positive',
-        variant: 'subtle',
-        styles: {
-          backgroundColor: theme.color.feedback.positive.surface.subtle,
-        },
-      },
-      {
-        colorScheme: 'warning',
-        variant: 'subtle',
-        styles: {
-          backgroundColor: theme.color.feedback.warning.surface.subtle,
-        },
-      },
-      {
-        colorScheme: 'functional',
-        variant: 'subtle',
-        styles: {
-          backgroundColor: theme.color.feedback.functional.surface.subtle,
-        },
-      },
-      {
-        colorScheme: 'energy',
-        variant: 'subtle',
-        styles: {
-          backgroundColor: theme.color.surface.energy.subtle,
-        },
-      },
-      {
-        colorScheme: 'broadband',
-        variant: 'subtle',
-        styles: {
-          backgroundColor: theme.color.surface.broadband.subtle,
-        },
-      },
-      {
-        colorScheme: 'mobile',
-        variant: 'subtle',
-        styles: {
-          backgroundColor: theme.color.surface.mobile.subtle,
-        },
-      },
-      {
-        colorScheme: 'insurance',
-        variant: 'subtle',
-        styles: {
-          backgroundColor: theme.color.surface.insurance.subtle,
-        },
-      },
-      {
-        colorScheme: 'cashback',
-        variant: 'subtle',
-        styles: {
-          backgroundColor: theme.color.surface.cashback.subtle,
-        },
-      },
-      {
-        colorScheme: 'pig',
-        variant: 'subtle',
-        styles: {
-          backgroundColor: theme.color.surface.pig.subtle,
-        },
-      },
-      {
-        colorScheme: 'highlight',
-        variant: 'subtle',
-        styles: {
-          backgroundColor: theme.color.surface.highlight.subtle,
-        },
-      },
-      // Outline
-      {
-        colorScheme: 'info',
-        variant: 'outline',
-        styles: {
-          backgroundColor: 'transparent',
-        },
-      },
-      {
-        colorScheme: 'danger',
-        variant: 'outline',
-        styles: {
-          backgroundColor: 'transparent',
-        },
-      },
-      {
-        colorScheme: 'positive',
-        variant: 'outline',
-        styles: {
-          backgroundColor: 'transparent',
-        },
-      },
-      {
-        colorScheme: 'warning',
-        variant: 'outline',
-        styles: {
-          backgroundColor: 'transparent',
-        },
-      },
-      {
-        colorScheme: 'functional',
-        variant: 'outline',
-        styles: {
-          backgroundColor: 'transparent',
-        },
-      },
-    ],
-  },
-}));
-
-export default Badge;

package/src/components/Badge/BadgeIcon.tsx

@@ -1,158 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { Icon } from '../Icon';
-import type IconProps from '../Icon/Icon.props';
-import { useBadgeContext } from './Badge.context';
-
-const BadgeIcon = (props: IconProps) => {
-  const { colorScheme, variant } = useBadgeContext();
-  styles.useVariants({ colorScheme, variant });
-  return <Icon {...props} style={styles.icon} />;
-};
-
-BadgeIcon.displayName = 'BadgeIcon';
-
-const styles = StyleSheet.create(theme => ({
-  icon: {
-    width: 20,
-    height: 20,
-    minWidth: 20,
-    minHeight: 20,
-    variants: {
-      colorScheme: {
-        info: {},
-        danger: {},
-        positive: {},
-        warning: {},
-        functional: {},
-        energy: {},
-        broadband: {},
-        mobile: {},
-        insurance: {},
-        cashback: {},
-        pig: {},
-        highlight: {},
-      },
-      variant: {
-        emphasis: {
-          color: theme.color.text.primary,
-        },
-        subtle: {
-          color: theme.color.text.primary,
-        },
-        outline: {},
-      },
-    },
-    compoundVariants: [
-      // Emphasis
-      {
-        colorScheme: 'info',
-        variant: 'emphasis',
-        styles: {
-          color: theme.color.feedback.info.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'danger',
-        variant: 'emphasis',
-        styles: {
-          color: theme.color.feedback.danger.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'positive',
-        variant: 'emphasis',
-        styles: {
-          color: theme.color.feedback.positive.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'warning',
-        variant: 'emphasis',
-        styles: {
-          color: theme.color.feedback.warning.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'functional',
-        variant: 'emphasis',
-        styles: {
-          color: theme.color.feedback.functional.foreground.default,
-        },
-      },
-      // Subtle
-      {
-        colorScheme: 'info',
-        variant: 'subtle',
-        styles: {
-          color: theme.color.feedback.info.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'danger',
-        variant: 'subtle',
-        styles: {
-          color: theme.color.feedback.danger.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'positive',
-        variant: 'subtle',
-        styles: {
-          color: theme.color.feedback.positive.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'warning',
-        variant: 'subtle',
-        styles: {
-          color: theme.color.feedback.warning.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'functional',
-        variant: 'subtle',
-        styles: {
-          color: theme.color.feedback.functional.foreground.default,
-        },
-      },
-      // Outline
-      {
-        colorScheme: 'info',
-        variant: 'outline',
-        styles: {
-          color: theme.color.feedback.info.foreground.subtle,
-        },
-      },
-      {
-        colorScheme: 'danger',
-        variant: 'outline',
-        styles: {
-          color: theme.color.feedback.danger.foreground.subtle,
-        },
-      },
-      {
-        colorScheme: 'positive',
-        variant: 'outline',
-        styles: {
-          color: theme.color.feedback.positive.foreground.subtle,
-        },
-      },
-      {
-        colorScheme: 'warning',
-        variant: 'outline',
-        styles: {
-          color: theme.color.feedback.warning.foreground.subtle,
-        },
-      },
-      {
-        colorScheme: 'functional',
-        variant: 'outline',
-        styles: {
-          color: theme.color.feedback.functional.foreground.subtle,
-        },
-      },
-    ],
-  },
-}));
-
-export default BadgeIcon;

package/src/components/Badge/BadgeText.tsx

@@ -1,166 +0,0 @@
-import { TextProps } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../BodyText';
-import { useBadgeContext } from './Badge.context';
-
-const BadgeText = ({ children, style, numberOfLines = 1, ...props }: TextProps) => {
-  const { variant, colorScheme, size } = useBadgeContext();
-  styles.useVariants({ variant, colorScheme });
-  return (
-    <BodyText
-      {...props}
-      numberOfLines={numberOfLines}
-      size={size}
-      weight="semibold"
-      style={[styles.text, style]}
-    >
-      {children}
-    </BodyText>
-  );
-};
-
-BadgeText.displayName = 'BadgeText';
-
-const styles = StyleSheet.create(theme => ({
-  text: {
-    variants: {
-      colorScheme: {
-        info: {},
-        danger: {},
-        positive: {},
-        warning: {},
-        functional: {},
-        energy: {},
-        broadband: {},
-        mobile: {},
-        insurance: {},
-        cashback: {},
-        pig: {},
-        highlight: {},
-      },
-      variant: {
-        emphasis: {
-          color: theme.color.text.primary,
-        },
-        subtle: {
-          color: theme.color.text.primary,
-        },
-        outline: {},
-      },
-    },
-    compoundVariants: [
-      // Emphasis
-      {
-        colorScheme: 'info',
-        variant: 'emphasis',
-        styles: {
-          color: theme.color.feedback.info.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'danger',
-        variant: 'emphasis',
-        styles: {
-          color: theme.color.feedback.danger.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'positive',
-        variant: 'emphasis',
-        styles: {
-          color: theme.color.feedback.positive.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'warning',
-        variant: 'emphasis',
-        styles: {
-          color: theme.color.feedback.warning.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'functional',
-        variant: 'emphasis',
-        styles: {
-          color: theme.color.feedback.functional.foreground.default,
-        },
-      },
-      // Subtle
-      {
-        colorScheme: 'info',
-        variant: 'subtle',
-        styles: {
-          color: theme.color.feedback.info.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'danger',
-        variant: 'subtle',
-        styles: {
-          color: theme.color.feedback.danger.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'positive',
-        variant: 'subtle',
-        styles: {
-          color: theme.color.feedback.positive.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'warning',
-        variant: 'subtle',
-        styles: {
-          color: theme.color.feedback.warning.foreground.default,
-        },
-      },
-      {
-        colorScheme: 'functional',
-        variant: 'subtle',
-        styles: {
-          color: theme.color.feedback.functional.foreground.default,
-        },
-      },
-      // Outline
-      {
-        colorScheme: 'info',
-        variant: 'outline',
-        styles: {
-          color: theme.color.feedback.info.foreground.subtle,
-        },
-      },
-      {
-        colorScheme: 'danger',
-        variant: 'outline',
-        styles: {
-          color: theme.color.feedback.danger.foreground.subtle,
-        },
-      },
-      {
-        colorScheme: 'positive',
-        variant: 'outline',
-        styles: {
-          color: theme.color.feedback.positive.foreground.subtle,
-        },
-      },
-      {
-        colorScheme: 'warning',
-        variant: 'outline',
-        styles: {
-          color: theme.color.feedback.warning.foreground.subtle,
-        },
-      },
-      {
-        colorScheme: 'functional',
-        variant: 'outline',
-        styles: {
-          color: theme.color.feedback.functional.foreground.subtle,
-        },
-      },
-    ],
-  },
-}));
-
-BadgeText.displayName = 'BadgeText';
-
-export default BadgeText;

package/src/components/Badge/index.ts

@@ -1,3 +0,0 @@
-export { default as Badge } from './Badge';
-export { default as BadgeText } from './BadgeText';
-export { default as BadgeIcon } from './BadgeIcon';

package/src/components/Banner/Banner.context.ts

@@ -1,11 +0,0 @@
-import { createContext, useContext } from 'react';
-
-const BannerContext = createContext<{ direction: 'horizontal' | 'vertical' }>({
-  direction: 'horizontal',
-});
-
-export const useBannerContext = () => {
-  return useContext(BannerContext);
-};
-
-export default BannerContext;

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

@@ -1,23 +0,0 @@
-import figma from '@figma/code-connect';
-import { Banner } from '../';
-
-figma.connect(
-  Banner,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=8294-3905&t=wLfy4ZMrZsHup0oB-4',
-  {
-    props: {
-      // irection: figma.enum('Direction', {
-      //   Horizontal: 'horizontal',
-      //   Vertical: 'vertical',
-      // }),d
-    },
-    example: props => {
-      return (
-        // Banner doesn't need to be wrapped in a Card
-        // it's a standalone component in code please see the Banner docs
-        // https://hearth.prod.uw.systems/react-native/?path=/docs/components-banner--docs
-        <Banner heading="The banner heading" description="The text in the banner" />
-      );
-    },
-  }
-);