@utilitywarehouse/hearth-react-native 0.4.1 → 0.5.0

package/src/components/IndicatorIconButton/IndicatorIconButton.stories.tsx

@@ -0,0 +1,142 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
+import { ComponentType } from 'react';
+import { VariantTitle } from '../../../docs/components';
+import { Box } from '../Box';
+import { Flex } from '../Flex';
+import { useTheme } from '../../hooks';
+import IndicatorIconButton from './IndicatorIconButton';
+
+const meta = {
+  title: 'Stories / IndicatorIconButton',
+  component: IndicatorIconButton,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    inverted: {
+      type: 'boolean',
+      control: 'boolean',
+      description: 'To set the button to be inverted. (To only be used on `purple` backgrounds)',
+    },
+    icon: {
+      options: ['none', ...Object.keys(Icons).filter(icon => icon.includes('Medium'))],
+      control: 'select',
+      description: 'The icon component for the button.',
+    },
+    pressed: {
+      type: 'boolean',
+      control: 'boolean',
+      description: 'To set the button to be pressed.',
+    },
+    indicator: {
+      type: 'boolean',
+      control: 'boolean',
+      description: 'To show or hide the red dot indicator.',
+    },
+  },
+  args: {
+    icon: 'BellMediumIcon' as unknown as ComponentType,
+    inverted: false,
+    pressed: false,
+    indicator: true,
+  },
+} satisfies Meta<typeof IndicatorIconButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: args => {
+    const icon = typeof args.icon === 'string' ? Icons[args.icon as keyof typeof Icons] : args.icon;
+    return <IndicatorIconButton {...args} icon={icon} />;
+  },
+};
+
+export const Variants: Story = {
+  render: args => {
+    const icon = typeof args.icon === 'string' ? Icons[args.icon as keyof typeof Icons] : args.icon;
+    return (
+      <Flex direction="column" space="xl">
+        <Flex direction="row" space="lg">
+          <Box>
+            <VariantTitle title="Without Indicator" invert={args.inverted}>
+              <IndicatorIconButton {...args} icon={icon} indicator={false} />
+            </VariantTitle>
+          </Box>
+          <Box>
+            <VariantTitle title="With Indicator" invert={args.inverted}>
+              <IndicatorIconButton {...args} icon={icon} indicator={true} />
+            </VariantTitle>
+          </Box>
+        </Flex>
+        <Flex direction="row" space="lg">
+          <Box style={{ backgroundColor: 'purple', padding: 10, borderRadius: 8 }}>
+            <VariantTitle title="Inverted" invert={!args.inverted}>
+              <IndicatorIconButton {...args} icon={icon} inverted={true} />
+            </VariantTitle>
+          </Box>
+        </Flex>
+      </Flex>
+    );
+  },
+};
+
+export const Colourful: Story = {
+  render: args => {
+    const icon = typeof args.icon === 'string' ? Icons[args.icon as keyof typeof Icons] : args.icon;
+    const theme = useTheme();
+
+    return (
+      <Flex direction="column" space="xl">
+        <Flex direction="row" space="lg">
+          <Box>
+            <IndicatorIconButton {...args} icon={icon} iconStyle={{ color: theme.color.energyBlue[500] }} />
+          </Box>
+          <Box>
+            <IndicatorIconButton {...args} icon={icon} iconStyle={{ color: theme.color.cashbackLilac[500] }} />
+          </Box>
+        </Flex>
+      </Flex>
+    );
+  },
+};
+
+export const WithAccessibilityLabel: Story = {
+  render: args => {
+    return (
+      <Flex direction="column" space="xl">
+        <Box>
+          <VariantTitle title="Notification label" invert={args.inverted}>
+            <IndicatorIconButton
+              {...args}
+              icon={Icons.BellMediumIcon}
+              indicator={true}
+              accessibilityLabel="New notifications available"
+            />
+          </VariantTitle>
+        </Box>
+        <Box>
+          <VariantTitle title="No new actions, cashback section" invert={args.inverted}>
+            <IndicatorIconButton
+              {...args}
+              icon={Icons.CashbackCardMediumIcon}
+              indicator={false}
+              accessibilityLabel="Cashback section"
+            />
+          </VariantTitle>
+        </Box>
+        <Box>
+          <VariantTitle title="New action, cashback section" invert={args.inverted}>
+            <IndicatorIconButton
+              {...args}
+              icon={Icons.CashbackCardMediumIcon}
+              indicator={true}
+              accessibilityLabel="Cashback section, new transactions"
+            />
+          </VariantTitle>
+        </Box>
+      </Flex>
+    );
+  },
+};

package/src/components/IndicatorIconButton/IndicatorIconButton.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import { IndicatorIconButtonProps } from './IndicatorIconButton.props';
+
+const IndicatorIconButton = ({ indicator = false, ...props }: IndicatorIconButtonProps) => {
+  return (
+    <View style={styles.container}>
+      <UnstyledIconButton size="md" {...props} />
+      {indicator && <View style={styles.indicator} />}
+    </View>
+  );
+};
+
+IndicatorIconButton.displayName = 'IndicatorIconButton';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    position: 'relative',
+    width: theme.components.iconButton.unstyled.md.width,
+    height: theme.components.iconButton.unstyled.md.height,
+  },
+  indicator: {
+    position: 'absolute',
+    top: 2,
+    right: 1,
+    width: theme.components.indicatorIconButton.indicator.width,
+    height: theme.components.indicatorIconButton.indicator.height,
+    borderRadius: theme.components.indicatorIconButton.indicator.radius,
+    backgroundColor: theme.color.interactive.destructive.surface.strong.default,
+    zIndex: 1,
+  },
+}));
+
+export default IndicatorIconButton;

package/src/components/IndicatorIconButton/index.tsx

@@ -0,0 +1,2 @@
+export { default as IndicatorIconButton } from './IndicatorIconButton';
+export type { IndicatorIconButtonProps } from './IndicatorIconButton.props';

package/src/components/Link/LinkText.tsx

@@ -1,15 +1,15 @@
 import { TextProps } from 'react-native';
-import { useLinkContext } from './Link.context';
 import { StyleSheet } from 'react-native-unistyles';
-import { DetailText } from '../DetailText';
+import { BodyText } from '../BodyText';
+import { useLinkContext } from './Link.context';
 
 const LinkText = ({ children, ...props }: TextProps) => {
   const { inverted, disabled, active } = useLinkContext();
   styles.useVariants({ active, inverted, disabled });
   return (
-    <DetailText size="md" {...props} style={[styles.text, props.style]}>
+    <BodyText size="md" weight="semibold" {...props} style={[styles.text, props.style]}>
       {children}
-    </DetailText>
+    </BodyText>
   );
 };
 

package/src/components/List/List.context.ts

@@ -4,7 +4,6 @@ import type ListProps from './List.props';
 export const ListContext = createContext<{
   loading?: ListProps['loading'];
   disabled?: ListProps['disabled'];
-  divider?: ListProps['divider'];
   container?: ListProps['container'];
 }>({});