@utilitywarehouse/hearth-react-native 0.27.3 → 0.28.0-testid-fix-1

package/src/components/Table/TableCell.tsx

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+import { View, ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { useTableContext } from './Table.context';
+import { TableCellProps } from './Table.props';
+import { getColumnStyle } from './Table.utils';
+
+const renderContent = (children?: ReactNode, weight: 'regular' | 'semibold' = 'regular') => {
+  if (typeof children === 'string' || typeof children === 'number') {
+    return (
+      <BodyText size="md" weight={weight}>
+        {children}
+      </BodyText>
+    );
+  }
+
+  return children;
+};
+
+const TableCell = ({
+  children,
+  style,
+  ...props
+}: TableCellProps & { columnIndex?: number; isLast?: boolean; isLastRow?: boolean }) => {
+  const { columnWidths, container, hasPagination } = useTableContext();
+  const { columnIndex = 0, isLast, isLastRow, ...rest } = props;
+  const removeBottomBorder = Boolean(isLastRow && container !== 'none' && !hasPagination);
+  const columnStyle = getColumnStyle(columnWidths[columnIndex], 120);
+
+  return (
+    <View
+      {...rest}
+      style={[
+        styles.cell,
+        columnStyle,
+        isLast && styles.lastCell,
+        removeBottomBorder && styles.lastRowCell,
+        style as ViewStyle,
+      ]}
+    >
+      {renderContent(children)}
+    </View>
+  );
+};
+
+TableCell.displayName = 'TableCell';
+
+const styles = StyleSheet.create(theme => ({
+  cell: {
+    minHeight: theme.components.table.cell.minHeight,
+    justifyContent: 'center',
+    padding: theme.components.table.cell.padding,
+    borderRightWidth: theme.components.table.cell.borderWidth,
+    borderBottomWidth: theme.components.table.cell.borderWidth,
+    borderColor: theme.color.border.subtle,
+    backgroundColor: theme.color.surface.neutral.strong,
+  },
+  lastCell: {
+    borderRightWidth: 0,
+  },
+  lastRowCell: {
+    borderBottomWidth: 0,
+  },
+}));
+
+export default TableCell;

package/src/components/Table/TableHeader.tsx

@@ -0,0 +1,41 @@
+import { Children, cloneElement, isValidElement } from 'react';
+import { View, ViewStyle } from 'react-native';
+import { TableHeaderProps } from './Table.props';
+
+const TableHeader = ({ children, color = 'purple', style, ...props }: TableHeaderProps) => {
+  const items = Children.toArray(children);
+
+  return (
+    <View {...props} style={[styles.header, style as ViewStyle]}>
+      {items.map((child, index) => {
+        if (!isValidElement(child)) {
+          return child;
+        }
+
+        return cloneElement(
+          child as React.ReactElement<{
+            color?: 'purple' | 'white';
+            columnIndex?: number;
+            isLast?: boolean;
+          }>,
+          {
+            color,
+            columnIndex: index,
+            isLast: index === items.length - 1,
+          }
+        );
+      })}
+    </View>
+  );
+};
+
+TableHeader.displayName = 'TableHeader';
+
+const styles = {
+  header: {
+    flexDirection: 'row' as const,
+    width: '100%' as const,
+  },
+};
+
+export default TableHeader;

package/src/components/Table/TableHeaderCell.tsx

@@ -0,0 +1,136 @@
+import { cloneElement, isValidElement, ReactNode } from 'react';
+import { View, ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { useTableContext } from './Table.context';
+import type { TableHeaderCellProps } from './Table.props';
+import { getColumnStyle } from './Table.utils';
+
+const renderContent = (
+  children?: ReactNode,
+  weight: 'regular' | 'semibold' = 'semibold',
+  color: 'purple' | 'white' = 'white'
+) => {
+  if (typeof children === 'string' || typeof children === 'number') {
+    return (
+      <BodyText size="md" weight={weight} style={styles.text} inverted={color === 'purple'}>
+        {children}
+      </BodyText>
+    );
+  }
+
+  return children;
+};
+
+const TableHeaderCell = ({
+  children,
+  color = 'white',
+  row = false,
+  style,
+  trailingContent,
+  ...props
+}: TableHeaderCellProps & { columnIndex?: number; isLast?: boolean; isLastRow?: boolean }) => {
+  const { columnWidths, container, hasPagination } = useTableContext();
+  const { columnIndex = 0, isLast, isLastRow, ...rest } = props;
+  const removeBottomBorder = Boolean(row && isLastRow && container !== 'none' && !hasPagination);
+  const columnStyle = getColumnStyle(columnWidths[columnIndex], 120);
+
+  styles.useVariants({ color, row });
+
+  const trailingElement =
+    trailingContent && isValidElement(trailingContent)
+      ? (trailingContent as React.ReactElement<{ inverted?: boolean }>)
+      : null;
+
+  const resolvedTrailingContent =
+    trailingElement && !row && 'inverted' in (trailingElement.props ?? {})
+      ? cloneElement(trailingElement, {
+          inverted: color === 'purple',
+        })
+      : trailingContent;
+
+  return (
+    <View
+      {...rest}
+      style={[
+        styles.cell,
+        columnStyle,
+        isLast && styles.lastCell,
+        removeBottomBorder && styles.lastRowCell,
+        style as ViewStyle,
+      ]}
+    >
+      <View style={styles.content}>
+        {renderContent(children, 'semibold', color)}
+        {resolvedTrailingContent ? (
+          <View style={styles.trailing}>{resolvedTrailingContent}</View>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+TableHeaderCell.displayName = 'TableHeaderCell';
+
+const styles = StyleSheet.create(theme => ({
+  cell: {
+    minHeight: theme.components.table.headerCell.height,
+    justifyContent: 'center',
+    paddingHorizontal: theme.components.table.headerCell.paddingHorizontal,
+    paddingVertical: theme.components.table.headerCell.paddingVertical,
+    borderRightWidth: theme.components.table.headerCell.borderWidth,
+    borderBottomWidth: theme.components.table.headerCell.borderWidth,
+    borderColor: theme.color.border.subtle,
+    backgroundColor: theme.color.surface.neutral.strong,
+    variants: {
+      color: {
+        purple: {
+          borderColor: theme.color.interactive.brand.foreground.strong,
+          backgroundColor: theme.color.surface.brand.default,
+        },
+        white: {
+          borderColor: theme.color.border.subtle,
+          backgroundColor: theme.color.surface.neutral.strong,
+        },
+      },
+      row: {
+        true: {
+          minHeight: theme.components.table.cell.minHeight,
+          paddingHorizontal: theme.components.table.cell.padding,
+          paddingVertical: theme.components.table.cell.padding,
+          borderRightWidth: theme.components.table.cell.borderWidth,
+          borderBottomWidth: theme.components.table.cell.borderWidth,
+          borderColor: theme.color.border.subtle,
+          backgroundColor: theme.color.surface.neutral.strong,
+        },
+      },
+    },
+  },
+  lastCell: {
+    borderRightWidth: 0,
+  },
+  lastRowCell: {
+    borderBottomWidth: 0,
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: theme.components.table.headerCell.gap,
+  },
+  trailing: {
+    flexShrink: 0,
+  },
+  text: {
+    flexShrink: 1,
+    variants: {
+      row: {
+        true: {
+          color: theme.color.text.primary,
+        },
+      },
+    },
+  },
+}));
+
+export default TableHeaderCell;

package/src/components/Table/TablePagination.tsx

@@ -0,0 +1,10 @@
+import { Pagination } from '../Pagination';
+import type { TablePaginationProps } from './Table.props';
+
+const TablePagination = (props: TablePaginationProps) => {
+  return <Pagination {...props} />;
+};
+
+TablePagination.displayName = 'TablePagination';
+
+export default TablePagination;

package/src/components/Table/TableRow.tsx

@@ -0,0 +1,42 @@
+import { Children, cloneElement, isValidElement } from 'react';
+import { View } from 'react-native';
+import { TableRowProps } from './Table.props';
+
+const TableRow = ({ children, ...props }: TableRowProps & { isLastRow?: boolean }) => {
+  const items = Children.toArray(children);
+  const { isLastRow = false, ...rest } = props;
+
+  return (
+    <View {...rest} style={[styles.row, rest.style]}>
+      {items.map((child, index) => {
+        if (!isValidElement(child)) {
+          return child;
+        }
+
+        return cloneElement(
+          child as React.ReactElement<{
+            columnIndex?: number;
+            isLast?: boolean;
+            isLastRow?: boolean;
+          }>,
+          {
+            isLast: index === items.length - 1,
+            columnIndex: index,
+            isLastRow,
+          }
+        );
+      })}
+    </View>
+  );
+};
+
+TableRow.displayName = 'TableRow';
+
+const styles = {
+  row: {
+    flexDirection: 'row' as const,
+    width: '100%' as const,
+  },
+};
+
+export default TableRow;

package/src/components/Table/index.ts

@@ -0,0 +1,16 @@
+export { default as Table } from './Table';
+export type {
+  TableBodyProps,
+  TableCellProps,
+  TableHeaderCellProps,
+  TableHeaderProps,
+  TablePaginationProps,
+  TableProps,
+  TableRowProps,
+} from './Table.props';
+export { default as TableBody } from './TableBody';
+export { default as TableCell } from './TableCell';
+export { default as TableHeader } from './TableHeader';
+export { default as TableHeaderCell } from './TableHeaderCell';
+export { default as TablePagination } from './TablePagination';
+export { default as TableRow } from './TableRow';

package/src/components/Timeline/Timeline.docs.mdx

@@ -0,0 +1,177 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Badge, BodyText, Box, Card, Center, Timeline, TimelineItem } from '../..';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './Timeline.stories';
+
+<Meta title="Components / Timeline" />
+
+<BackToTopButton />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10592-5483&t=pZwKJYFo1y1QRQD1-4" />
+
+# Timeline
+
+Timeline presents a sequence of related stops or steps using either a static stop indicator or a progress state indicator. Each item supports a label, optional helper text, and optional custom content.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Examples](#examples)
+- [Accessibility](#accessibility)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+<UsageWrap>
+  <Center>
+    <Box style={{ width: 300 }}>
+      <Timeline variant="progress">
+        <TimelineItem label="Ordered" helperText="We have received your order" state="complete" />
+        <TimelineItem label="Packed" helperText="Your items are ready" state="complete" />
+        <TimelineItem label="Out for delivery" helperText="Arriving today" state="active" />
+        <TimelineItem label="Delivered" helperText="Pending" state="incomplete" />
+      </Timeline>
+    </Box>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Timeline, TimelineItem } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <Timeline variant="progress">
+    <TimelineItem label="Ordered" helperText="We have received your order" state="complete" />
+    <TimelineItem label="Packed" helperText="Your items are ready" state="complete" />
+    <TimelineItem label="Out for delivery" helperText="Arriving today" state="active" />
+    <TimelineItem label="Delivered" helperText="Pending" state="incomplete" />
+  </Timeline>
+);
+```
+
+## Props
+
+### Timeline Props
+
+| Property   | Type                     | Description                                   | Default    |
+| ---------- | ------------------------ | --------------------------------------------- | ---------- |
+| `children` | `ReactNode`              | Child `TimelineItem` components.              | Required   |
+| `variant`  | `'static' \| 'progress'` | Controls the indicator style for child items. | `'static'` |
+
+### TimelineItem Props
+
+| Property     | Type                                     | Description                                              | Default        |
+| ------------ | ---------------------------------------- | -------------------------------------------------------- | -------------- |
+| `label`      | `string`                                 | Primary label text.                                      | Required       |
+| `helperText` | `string`                                 | Optional supporting text beneath the label.              | `undefined`    |
+| `state`      | `'complete' \| 'active' \| 'incomplete'` | Progress state used when `variant="progress"`.           | `'incomplete'` |
+| `children`   | `ReactNode`                              | Optional custom content rendered below the text content. | `undefined`    |
+
+## Examples
+
+### Variants
+
+<UsageWrap>
+  <Center>
+    <Box style={{ width: 320 }}>
+      <Timeline variant="progress">
+        <TimelineItem label="Account created" helperText="Done" state="complete" />
+        <TimelineItem label="Documents uploaded" helperText="Done" state="complete" />
+        <TimelineItem label="Verification" helperText="In progress" state="active" />
+        <TimelineItem label="Decision" helperText="Pending" state="incomplete" />
+      </Timeline>
+      <Box style={{ height: 24 }} />
+      <Timeline variant="static">
+        <TimelineItem label="Collected" helperText="08:15" />
+        <TimelineItem label="Sorted" helperText="10:40" />
+        <TimelineItem label="Out for delivery" helperText="13:25" />
+      </Timeline>
+    </Box>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Box, Timeline, TimelineItem } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <Box>
+    <Timeline variant="progress">
+      <TimelineItem label="Account created" helperText="Done" state="complete" />
+      <TimelineItem label="Documents uploaded" helperText="Done" state="complete" />
+      <TimelineItem label="Verification" helperText="In progress" state="active" />
+      <TimelineItem label="Decision" helperText="Pending" state="incomplete" />
+    </Timeline>
+
+    <Timeline variant="static">
+      <TimelineItem label="Collected" helperText="08:15" />
+      <TimelineItem label="Sorted" helperText="10:40" />
+      <TimelineItem label="Out for delivery" helperText="13:25" />
+    </Timeline>
+  </Box>
+);
+```
+
+### Custom Content
+
+<UsageWrap>
+  <Center>
+    <Box style={{ width: 320 }}>
+      <Timeline variant="progress">
+        <TimelineItem
+          label="Application started"
+          helperText="We have saved your draft"
+          state="complete"
+        />
+        <TimelineItem label="Additional information" helperText="Action needed" state="active">
+          <Card variant="subtle" spacing="md">
+            <Badge>Required</Badge>
+            <Box>
+              <BodyText size="sm">Upload proof of address to continue.</BodyText>
+            </Box>
+          </Card>
+        </TimelineItem>
+        <TimelineItem label="Review complete" helperText="Pending" state="incomplete" />
+      </Timeline>
+    </Box>
+  </Center>
+</UsageWrap>
+
+```tsx
+import {
+  Badge,
+  BodyText,
+  Box,
+  Card,
+  Timeline,
+  TimelineItem,
+} from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <Timeline variant="progress">
+    <TimelineItem
+      label="Application started"
+      helperText="We have saved your draft"
+      state="complete"
+    />
+    <TimelineItem label="Additional information" helperText="Action needed" state="active">
+      <Card variant="subtle" spacing="md">
+        <Badge>Required</Badge>
+        <BodyText size="sm">Upload proof of address to continue.</BodyText>
+      </Card>
+    </TimelineItem>
+    <TimelineItem label="Review complete" helperText="Pending" state="incomplete" />
+  </Timeline>
+);
+```
+
+## Accessibility
+
+Timeline uses `accessibilityRole="list"` on the root so assistive technologies can understand the sequence as a grouped set of steps.
+
+Each `TimelineItem` exposes a combined accessibility label made up of the label, helper text, and progress state when the progress variant is used.
+
+When you provide custom content, make sure any interactive elements inside that content have their own accessible labels and hints. The timeline item itself is announced, but nested actions still need explicit accessibility metadata when they are actionable.

package/src/components/Timeline/Timeline.figma.tsx

@@ -0,0 +1,89 @@
+import figma from '@figma/code-connect';
+import { Timeline, TimelineItem } from '.';
+
+figma.connect(
+  Timeline,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10592-5483&t=pZwKJYFo1y1QRQD1-4',
+  {
+    props: {
+      items: figma.children('Progress'),
+    },
+    variant: {
+      Variant: 'Progress',
+    },
+    example: props => <Timeline variant="progress">{props.items}</Timeline>,
+  }
+);
+
+figma.connect(
+  Timeline,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10592-5483&t=pZwKJYFo1y1QRQD1-4',
+  {
+    props: {
+      items: figma.children('Static'),
+    },
+    variant: {
+      Variant: 'Static',
+    },
+    example: props => <Timeline variant="static">{props.items}</Timeline>,
+  }
+);
+
+figma.connect(
+  TimelineItem,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10562-2810&t=pZwKJYFo1y1QRQD1-4',
+  {
+    props: {
+      label: figma.string('Label'),
+      helperText: figma.boolean('Helper text?', { true: figma.string('Helper text') }),
+      state: figma.enum('State', {
+        Complete: 'complete',
+        Active: 'active',
+        Incomplete: 'incomplete',
+      }),
+      customContent: figma.boolean('Custom content?', {
+        true: figma.instance('Slot'),
+      }),
+    },
+    example: props => (
+      <TimelineItem
+        variant="progress"
+        position="middle"
+        label={props.label}
+        helperText={props.helperText}
+        state={props.state}
+      >
+        {props.customContent}
+      </TimelineItem>
+    ),
+  }
+);
+
+figma.connect(
+  TimelineItem,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10592-5189&t=pZwKJYFo1y1QRQD1-4',
+  {
+    props: {
+      label: figma.string('Label'),
+      helperText: figma.boolean('Helper text?', { true: figma.string('Helper text') }),
+      customContent: figma.boolean('Custom content?', {
+        true: figma.instance('Slot'),
+      }),
+      position: figma.enum('Variant', {
+        Start: 'start',
+        Middle: 'middle',
+        End: 'end',
+      }),
+    },
+    example: props => (
+      <TimelineItem
+        variant="static"
+        position={props.position}
+        label={props.label}
+        helperText={props.helperText}
+      >
+        {props.customContent}
+      </TimelineItem>
+    ),
+  }
+);

package/src/components/Timeline/Timeline.props.ts

@@ -0,0 +1,51 @@
+import { ViewProps } from 'react-native';
+
+export type TimelineVariant = 'static' | 'progress';
+export type TimelineItemState = 'complete' | 'active' | 'incomplete';
+export type TimelineItemPosition = 'single' | 'start' | 'middle' | 'end';
+
+export interface TimelineProps extends ViewProps {
+  /**
+   * Child TimelineItem components.
+   */
+  children: React.ReactNode;
+  /**
+   * Controls the indicator style used by all child timeline items.
+   * @default 'static'
+   */
+  variant?: TimelineVariant;
+}
+
+export interface TimelineItemProps extends ViewProps {
+  /**
+   * The primary label for the timeline item.
+   */
+  label: string;
+  /**
+   * Optional supporting text displayed beneath the label.
+   */
+  helperText?: string;
+  /**
+   * Visual state for progress timelines.
+   * @default 'incomplete'
+   */
+  state?: TimelineItemState;
+  /**
+   * Optional custom content rendered beneath the text content.
+   */
+  children?: React.ReactNode;
+  /**
+   * The timeline variant used when the item is rendered standalone.
+   * Items inside Timeline receive this automatically.
+   * @default 'static'
+   */
+  variant?: TimelineVariant;
+  /**
+   * The item's position in the timeline used to draw connectors.
+   * Items inside Timeline receive this automatically.
+   * @default 'single'
+   */
+  position?: TimelineItemPosition;
+}
+
+export default TimelineProps;