@ankhorage/zora 1.0.5 → 1.0.7

package/src/patterns/timeline/Timeline.tsx

@@ -0,0 +1,104 @@
+import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
+import React from 'react';
+
+import { Heading } from '../../components/heading';
+import { Icon } from '../../components/icon';
+import { Text } from '../../components/text';
+import { Box, Inline, Stack } from '../../foundation';
+import type { ZoraTone } from '../../internal/recipes';
+import { resolveIconSize } from '../../internal/recipes';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { TimelineItem, TimelineProps } from './types';
+
+function resolveRoleSemantics(theme: SurfaceTheme, tone: ZoraTone): RoleSemantics {
+  switch (tone) {
+    case 'primary':
+      return theme.semantics.action.primary;
+    case 'danger':
+      return theme.semantics.action.danger;
+    case 'success':
+      return theme.semantics.success;
+    case 'warning':
+      return theme.semantics.warning;
+    case 'neutral':
+    default:
+      return theme.semantics.action.neutral;
+  }
+}
+
+function TimelineInner({
+  themeId: _themeId,
+  mode: _mode,
+  testID,
+  items,
+  compact = false,
+}: TimelineProps) {
+  const { theme } = useZoraTheme();
+  const gap = compact ? 'm' : 'l';
+
+  const renderItem = (item: TimelineItem, index: number) => {
+    const status = item.status ?? 'neutral';
+    const role = resolveRoleSemantics(theme, status);
+    const showConnector = index < items.length - 1;
+    const iconSize = Math.max(12, resolveIconSize('s'));
+
+    return (
+      <Inline key={item.id} align="flex-start" gap="m" testID={item.testID} wrap="nowrap">
+        <Stack align="center" flexShrink={0} gap="xs" style={{ width: 24 }}>
+          <Box
+            bg={status === 'neutral' ? theme.semantics.neutral.surface : role.softBg}
+            borderColor={status === 'neutral' ? theme.semantics.neutral.divider : role.base}
+            borderWidth={1}
+            height={20}
+            radius="full"
+            width={20}
+            style={{ alignItems: 'center', justifyContent: 'center' }}
+          >
+            {item.icon ? (
+              <Icon
+                color={status === 'neutral' ? theme.semantics.content.muted : role.base}
+                name={item.icon.name}
+                provider={item.icon.provider}
+                size={iconSize}
+              />
+            ) : null}
+          </Box>
+
+          {showConnector ? (
+            <Box
+              bg={theme.semantics.neutral.divider}
+              flex={1}
+              radius="full"
+              style={{ minHeight: 16, width: 2 }}
+            />
+          ) : null}
+        </Stack>
+
+        <Stack flex={1} gap="xs" testID={testID}>
+          <Inline align="flex-start" gap="s" justify="space-between" wrap="wrap">
+            <Heading level={compact ? 4 : 3}>{item.title}</Heading>
+            {item.meta ? (
+              <Text tone="muted" variant="caption">
+                {item.meta}
+              </Text>
+            ) : null}
+          </Inline>
+          {item.description ? (
+            <Text tone="muted" variant="bodySmall">
+              {item.description}
+            </Text>
+          ) : null}
+        </Stack>
+      </Inline>
+    );
+  };
+
+  return (
+    <Stack gap={gap} testID={testID}>
+      {items.map(renderItem)}
+    </Stack>
+  );
+}
+
+export const Timeline = withZoraThemeScope(TimelineInner);

package/src/patterns/timeline/index.ts

@@ -0,0 +1,2 @@
+export { Timeline } from './Timeline';
+export type { TimelineItem, TimelineProps } from './types';

package/src/patterns/timeline/types.ts

@@ -0,0 +1,20 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface TimelineItem {
+  id: string;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  meta?: React.ReactNode;
+  status?: ZoraTone;
+  icon?: ButtonIconSpec;
+  testID?: string;
+}
+
+export interface TimelineProps extends ZoraBaseProps {
+  items: readonly TimelineItem[];
+  compact?: boolean;
+}

package/src/showcaseCoverage.test.ts

@@ -35,9 +35,13 @@ const REQUIRED_SHOWCASE_COVERAGE = {
     'Icon',
     'IconButton',
     'Input',
+    'MediaCard',
+    'MetricCard',
     'Modal',
+    'Progress',
     'Radio',
     'RadioGroup',
+    'Rating',
     'SearchBar',
     'Select',
     'Tabs',
@@ -78,6 +82,9 @@ const REQUIRED_SHOWCASE_COVERAGE = {
     'DisclosureSection',
     'EmptyState',
     'FilterBar',
+    'List',
+    'ListRow',
+    'ListSection',
     'InspectorField',
     'Notice',
     'Panel',
@@ -85,6 +92,7 @@ const REQUIRED_SHOWCASE_COVERAGE = {
     'SectionHeader',
     'SettingsRow',
     'SwitchField',
+    'Timeline',
     'ThemeComposer',
     'PaletteItem',
     'TileGrid',

package/src/theme/themeScopeStructure.test.ts

@@ -56,6 +56,8 @@ const scopedComponentFiles = [
   join(srcDir, 'components', 'badge', 'Badge.tsx'),
   join(srcDir, 'components', 'button', 'Button.tsx'),
   join(srcDir, 'components', 'card', 'Card.tsx'),
+  join(srcDir, 'components', 'media-card', 'MediaCard.tsx'),
+  join(srcDir, 'components', 'metric-card', 'MetricCard.tsx'),
   join(srcDir, 'components', 'checkbox', 'Checkbox.tsx'),
   join(srcDir, 'components', 'checkbox', 'CheckboxGroup.tsx'),
   join(srcDir, 'components', 'drawer', 'Drawer.tsx'),
@@ -68,8 +70,10 @@ const scopedComponentFiles = [
   join(srcDir, 'components', 'icon-button', 'IconButton.tsx'),
   join(srcDir, 'components', 'input', 'Input.tsx'),
   join(srcDir, 'components', 'modal', 'Modal.tsx'),
+  join(srcDir, 'components', 'progress', 'Progress.tsx'),
   join(srcDir, 'components', 'radio', 'Radio.tsx'),
   join(srcDir, 'components', 'radio', 'RadioGroup.tsx'),
+  join(srcDir, 'components', 'rating', 'Rating.tsx'),
   join(srcDir, 'components', 'select', 'Select.tsx'),
   join(srcDir, 'components', 'tabs', 'Tabs.tsx'),
   join(srcDir, 'components', 'text', 'Text.tsx'),
@@ -96,12 +100,16 @@ const scopedComponentFiles = [
   join(srcDir, 'patterns', 'empty-state', 'EmptyState.tsx'),
   join(srcDir, 'patterns', 'form-field', 'FormField.tsx'),
   join(srcDir, 'patterns', 'inspector-field', 'InspectorField.tsx'),
+  join(srcDir, 'patterns', 'list', 'List.tsx'),
+  join(srcDir, 'patterns', 'list', 'ListRow.tsx'),
+  join(srcDir, 'patterns', 'list', 'ListSection.tsx'),
   join(srcDir, 'patterns', 'notice', 'Notice.tsx'),
   join(srcDir, 'patterns', 'panel', 'Panel.tsx'),
   join(srcDir, 'patterns', 'responsive-panel', 'ResponsivePanel.tsx'),
   join(srcDir, 'patterns', 'section-header', 'SectionHeader.tsx'),
   join(srcDir, 'patterns', 'settings-row', 'SettingsRow.tsx'),
   join(srcDir, 'patterns', 'switch-field', 'SwitchField.tsx'),
+  join(srcDir, 'patterns', 'timeline', 'Timeline.tsx'),
   join(srcDir, 'patterns', 'tile-grid', 'PaletteItem.tsx'),
   join(srcDir, 'patterns', 'tile-grid', 'TileGrid.tsx'),
   join(srcDir, 'patterns', 'tree-view', 'TreeItem.tsx'),
@@ -123,6 +131,8 @@ const scopedPropTypeFiles = [
   join(srcDir, 'components', 'badge', 'types.ts'),
   join(srcDir, 'components', 'button', 'types.ts'),
   join(srcDir, 'components', 'card', 'types.ts'),
+  join(srcDir, 'components', 'media-card', 'types.ts'),
+  join(srcDir, 'components', 'metric-card', 'types.ts'),
   join(srcDir, 'components', 'checkbox', 'types.ts'),
   join(srcDir, 'components', 'drawer', 'types.ts'),
   join(srcDir, 'components', 'form', 'types.ts'),
@@ -131,7 +141,9 @@ const scopedPropTypeFiles = [
   join(srcDir, 'components', 'icon-button', 'types.ts'),
   join(srcDir, 'components', 'input', 'types.ts'),
   join(srcDir, 'components', 'modal', 'types.ts'),
+  join(srcDir, 'components', 'progress', 'types.ts'),
   join(srcDir, 'components', 'radio', 'types.ts'),
+  join(srcDir, 'components', 'rating', 'types.ts'),
   join(srcDir, 'components', 'select', 'types.ts'),
   join(srcDir, 'components', 'tabs', 'types.ts'),
   join(srcDir, 'components', 'text', 'types.ts'),
@@ -154,12 +166,14 @@ const scopedPropTypeFiles = [
   join(srcDir, 'patterns', 'empty-state', 'types.ts'),
   join(srcDir, 'patterns', 'form-field', 'types.ts'),
   join(srcDir, 'patterns', 'inspector-field', 'types.ts'),
+  join(srcDir, 'patterns', 'list', 'types.ts'),
   join(srcDir, 'patterns', 'notice', 'types.ts'),
   join(srcDir, 'patterns', 'panel', 'types.ts'),
   join(srcDir, 'patterns', 'responsive-panel', 'types.ts'),
   join(srcDir, 'patterns', 'section-header', 'types.ts'),
   join(srcDir, 'patterns', 'settings-row', 'types.ts'),
   join(srcDir, 'patterns', 'switch-field', 'types.ts'),
+  join(srcDir, 'patterns', 'timeline', 'types.ts'),
   join(srcDir, 'patterns', 'tile-grid', 'types.ts'),
   join(srcDir, 'patterns', 'tree-view', 'types.ts'),
 ] as const;