@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/components/DescriptionList/DescriptionList.stories.tsx

@@ -1,172 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { DescriptionList, DescriptionListItem } from '.';
-import { VariantTitle } from '../../../docs/components';
-import { Flex } from '../Flex';
-import { Link } from '../Link';
-
-const meta: Meta<typeof DescriptionList> = {
-  title: 'Stories / DescriptionList',
-  component: DescriptionList,
-  parameters: { layout: 'centered' },
-  argTypes: {
-    direction: {
-      control: 'select',
-      options: ['row', 'column'],
-      description: 'Orientation of heading & description pairs',
-    },
-    itemHeadingWidth: {
-      control: 'number',
-      description: 'Override width (px) for heading column when direction is row',
-    },
-    heading: {
-      control: 'text',
-      description:
-        'Optional overall heading (renders a SectionHeader). Playground only – prefer SectionHeader directly when composing.',
-    },
-    helperText: {
-      control: 'text',
-      description: 'Supporting text shown under heading (Playground only).',
-    },
-  },
-  args: {
-    direction: 'column',
-    heading: 'Account details',
-    helperText: 'Static account metadata',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const sampleData = [
-  { heading: 'Account Number', description: '123456789' },
-  { heading: 'Sort Code', description: '12-34-56' },
-  { heading: 'Status', description: 'Inactive', invalidText: 'Status cannot be inactive' },
-];
-
-export const Playground: Story = {
-  render: args => (
-    <DescriptionList {...args}>
-      {sampleData.map(item => (
-        <DescriptionListItem
-          key={item.heading}
-          heading={item.heading}
-          description={item.description}
-          invalidText={item.invalidText}
-        />
-      ))}
-    </DescriptionList>
-  ),
-};
-
-export const Row: Story = {
-  args: { direction: 'row' },
-  render: args => (
-    <DescriptionList {...args}>
-      {sampleData.map(item => (
-        <DescriptionListItem
-          key={item.heading}
-          heading={item.heading}
-          description={item.description}
-          invalidText={item.invalidText}
-        />
-      ))}
-    </DescriptionList>
-  ),
-};
-
-export const Column: Story = {
-  args: { direction: 'column' },
-  render: args => (
-    <DescriptionList {...args}>
-      {sampleData.map(item => (
-        <DescriptionListItem
-          key={item.heading}
-          heading={item.heading}
-          description={item.description}
-          invalidText={item.invalidText}
-        />
-      ))}
-    </DescriptionList>
-  ),
-};
-
-export const KitchenSink: Story = {
-  parameters: { controls: { include: [] } },
-  render: () => (
-    <Flex direction="column" spacing="lg" style={{ width: '100%' }}>
-      <VariantTitle title="Row direction">
-        <DescriptionList direction="row">
-          {sampleData.map(item => (
-            <DescriptionListItem
-              key={item.heading}
-              heading={item.heading}
-              description={item.description}
-              invalidText={item.invalidText}
-            />
-          ))}
-        </DescriptionList>
-      </VariantTitle>
-      <VariantTitle title="Column direction">
-        <DescriptionList direction="column">
-          {sampleData.map(item => (
-            <DescriptionListItem
-              key={item.heading}
-              heading={item.heading}
-              description={item.description}
-              invalidText={item.invalidText}
-            />
-          ))}
-        </DescriptionList>
-      </VariantTitle>
-    </Flex>
-  ),
-};
-
-export const WithLinks: Story = {
-  parameters: { controls: { include: ['direction', 'itemHeadingWidth'] } },
-  args: { direction: 'row' },
-  render: args => (
-    <DescriptionList {...args}>
-      <DescriptionListItem
-        heading="Account Number"
-        description="123456789"
-        trailingContent={<Link href="https://example.com/account">Manage account</Link>}
-      />
-      <DescriptionListItem
-        heading="Status"
-        description="Active"
-        trailingContent={
-          <Link href="https://example.com/status" showIcon={false}>
-            Change
-          </Link>
-        }
-      />
-      <DescriptionListItem heading="Region" description="United Kingdom" />
-    </DescriptionList>
-  ),
-};
-
-export const WithNumericValues: Story = {
-  parameters: { controls: { include: ['direction', 'itemHeadingWidth'] } },
-  args: { direction: 'row' },
-  render: args => (
-    <DescriptionList {...args}>
-      <DescriptionListItem
-        heading="Account Balance"
-        description="Current balance"
-        numericValue="£5,432.10"
-      />
-      <DescriptionListItem
-        heading="Available Credit"
-        description="Credit limit minus current balance"
-        numericValue="£1,234.56"
-      />
-      <DescriptionListItem
-        heading="Minimum Payment"
-        description="Amount due by next statement date"
-        numericValue="£123.45"
-      />
-    </DescriptionList>
-  ),
-};

package/src/components/DescriptionList/DescriptionList.tsx

@@ -1,54 +0,0 @@
-import { useMemo } from 'react';
-import { View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { SectionHeader } from '../SectionHeader';
-import { DescriptionListContext } from './DescriptionList.context';
-import type DescriptionListProps from './DescriptionList.props';
-
-const DescriptionList = ({
-  direction = 'column',
-  itemHeadingWidth,
-  heading,
-  helperText,
-  headerTrailingContent,
-  children,
-  style,
-  invalidText,
-  ...props
-}: DescriptionListProps) => {
-  styles.useVariants({ direction });
-  const value = useMemo(() => ({ direction, itemHeadingWidth }), [direction, itemHeadingWidth]);
-
-  return (
-    <DescriptionListContext.Provider value={value}>
-      <View accessibilityRole="list" {...props} style={[styles.container, style]}>
-        {heading ? (
-          <SectionHeader
-            heading={heading}
-            helperText={helperText}
-            trailingContent={headerTrailingContent}
-            invalidText={invalidText}
-          />
-        ) : null}
-        {children}
-      </View>
-    </DescriptionListContext.Provider>
-  );
-};
-
-DescriptionList.displayName = 'DescriptionList';
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    width: theme.space.full,
-    gap: theme.components.descriptionList.gap,
-    variants: {
-      direction: {
-        row: {},
-        column: {},
-      },
-    },
-  },
-}));
-
-export default DescriptionList;

package/src/components/DescriptionList/DescriptionListItem.figma.tsx

@@ -1,42 +0,0 @@
-import figma from '@figma/code-connect';
-import { DescriptionListItem } from '../';
-
-figma.connect(
-  DescriptionListItem,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7247-5209&t=3uUSBVdxldgG5uz3-4',
-  {
-    props: {
-      heading: figma.string('Heading'),
-      direction: figma.enum('Direction', {
-        Row: 'row',
-        Column: 'column',
-      }),
-      description: figma.boolean('Description?', {
-        true: figma.string('Description'),
-      }),
-      trailingContent: figma.boolean('Trailing content?', {
-        true: figma.nestedProps('Trailing content', {
-          trailingContent: figma.instance('Variant'),
-        }),
-      }),
-      invalidText: figma.enum('State', {
-        Invalid: figma.nestedProps('Validation Text', {
-          invalidText: figma.string('Text'),
-        }),
-      }),
-      numericValue: figma.boolean('Numerical value?', {
-        true: figma.string('Numerical value'),
-      }),
-    },
-    example: props => (
-      <DescriptionListItem
-        heading={props.heading}
-        description={props.description}
-        direction={props.direction}
-        trailingContent={props.trailingContent?.trailingContent}
-        invalidText={props.invalidText?.invalidText}
-        numericValue={props.numericValue}
-      />
-    ),
-  }
-);

package/src/components/DescriptionList/DescriptionListItem.props.ts

@@ -1,15 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ViewProps } from 'react-native';
-
-export interface DescriptionListItemProps extends ViewProps {
-  /** Heading / label part */
-  heading: ReactNode;
-  /** Description / value part */
-  description: ReactNode;
-  headingWidth?: number;
-  trailingContent?: ReactNode;
-  invalidText?: string;
-  numericValue?: string;
-}
-
-export default DescriptionListItemProps;

package/src/components/DescriptionList/DescriptionListItem.tsx

@@ -1,106 +0,0 @@
-import { ErrorCircleSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { useTheme } from '../../hooks';
-import { BodyText } from '../BodyText';
-import Helper from '../Helper/Helper';
-import { useDescriptionListContext } from './DescriptionList.context';
-import type DescriptionListItemProps from './DescriptionListItem.props';
-
-const DescriptionListItem = ({
-  heading,
-  description,
-  headingWidth,
-  trailingContent,
-  invalidText,
-  numericValue,
-  style,
-  ...props
-}: DescriptionListItemProps) => {
-  const { components } = useTheme();
-  const { direction, itemHeadingWidth = components.descriptionList.item.row.headingWidth } =
-    useDescriptionListContext();
-  styles.useVariants({ direction });
-  const headingIsText = typeof heading === 'string' || typeof heading === 'number';
-  const descIsText = typeof description === 'string' || typeof description === 'number';
-  const combinedLabel = headingIsText && descIsText ? `${heading}: ${description}` : undefined;
-  const hideDescendants = !!combinedLabel;
-  return (
-    <View
-      accessibilityRole="text"
-      accessible={!!combinedLabel}
-      accessibilityLabel={combinedLabel}
-      {...props}
-      style={[styles.item, style]}
-    >
-      <View
-        style={styles.textWrap}
-        importantForAccessibility={hideDescendants ? 'no-hide-descendants' : undefined}
-        accessibilityElementsHidden={hideDescendants || undefined}
-      >
-        <View style={[direction === 'row' && { width: headingWidth || itemHeadingWidth }]}>
-          {headingIsText ? <BodyText style={styles.headingText}>{heading}</BodyText> : heading}
-        </View>
-        <View style={styles.descriptionWrapper}>
-          {descIsText ? <BodyText>{description}</BodyText> : description}
-          {!!invalidText && (
-            <Helper
-              validationStatus="invalid"
-              showIcon
-              icon={ErrorCircleSmallIcon}
-              text={invalidText || ''}
-            />
-          )}
-        </View>
-        {numericValue ? (
-          <View style={styles.descriptionWrapper}>
-            <BodyText weight="semibold">{numericValue}</BodyText>
-          </View>
-        ) : null}
-      </View>
-      {trailingContent ? trailingContent : null}
-    </View>
-  );
-};
-
-DescriptionListItem.displayName = 'DescriptionListItem';
-
-const styles = StyleSheet.create(theme => ({
-  item: {
-    width: theme.space.full,
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    gap: theme.components.descriptionList.item.gap,
-  },
-  textWrap: {
-    flex: 1,
-    variants: {
-      direction: {
-        row: {
-          flexDirection: 'row',
-          alignItems: 'flex-start',
-          gap: theme.components.descriptionList.item.row.gap,
-        },
-        column: {
-          flexDirection: 'column',
-          gap: theme.components.descriptionList.item.column.gap,
-        },
-      },
-    },
-  },
-  headingText: {
-    color: theme.color.text.secondary,
-  },
-  descriptionWrapper: {
-    variants: {
-      direction: {
-        row: {
-          flex: 1,
-        },
-        column: {},
-      },
-    },
-  },
-}));
-
-export default DescriptionListItem;

package/src/components/DescriptionList/index.ts

@@ -1,4 +0,0 @@
-export { default as DescriptionList } from './DescriptionList';
-export type { default as DescriptionListProps } from './DescriptionList.props';
-export { default as DescriptionListItem } from './DescriptionListItem';
-export type { default as DescriptionListItemProps } from './DescriptionListItem.props';

package/src/components/DetailText/DetailText.props.ts

@@ -1,8 +0,0 @@
-import type { CommonTextProps } from '../../types';
-
-interface DetailTextProps extends CommonTextProps {
-  /** Text size variant. */
-  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
-}
-
-export default DetailTextProps;

package/src/components/DetailText/DetailText.stories.tsx

@@ -1,148 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { DetailText } from '.';
-import { VariantTitle } from '../../../docs/components';
-import { coloursAsArray, textColorKeys } from '../../utils';
-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 / DetailText',
-  component: DetailText,
-  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', '2xl', '3xl', '4xl'],
-      control: 'select',
-      description: 'The size of the text.',
-    },
-    truncated: {
-      type: 'boolean',
-      control: 'boolean',
-      description: 'Truncate 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 detail text!",
-    size: 'md',
-    truncated: false,
-    italic: false,
-    underline: false,
-    strikeThrough: false,
-    color: undefined,
-    textDecorationColor: 'grey1000',
-  },
-} satisfies Meta<typeof DetailText>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {};
-
-export const KitchenSink: Story = {
-  render: args => (
-    <Box gap="200">
-      <VariantTitle title="SM">
-        <DetailText {...args} size="sm">
-          Hello there, I'm some detail text!
-        </DetailText>
-      </VariantTitle>
-      <VariantTitle title="MD">
-        <DetailText {...args} size="md">
-          Hello there, I'm some detail text!
-        </DetailText>
-      </VariantTitle>
-      <VariantTitle title="LG">
-        <DetailText {...args} size="lg">
-          Hello there, I'm some detail text!
-        </DetailText>
-      </VariantTitle>
-      <VariantTitle title="XL">
-        <DetailText {...args} size="xl">
-          Hello there, I'm some detail text!
-        </DetailText>
-      </VariantTitle>
-      <VariantTitle title="2XL">
-        <DetailText {...args} size="2xl">
-          Hello there, I'm some detail text!
-        </DetailText>
-      </VariantTitle>
-      <VariantTitle title="3XL">
-        <DetailText {...args} size="3xl">
-          Hello there, I'm some detail text!
-        </DetailText>
-      </VariantTitle>
-      <VariantTitle title="4XL">
-        <DetailText {...args} size="4xl">
-          Hello there, I'm some detail text!
-        </DetailText>
-      </VariantTitle>
-    </Box>
-  ),
-};
-
-export const Underline: Story = {
-  args: {
-    underline: true,
-    children: "Hello there, I'm some underlined detail text!",
-  },
-};