@ankhorage/zora 1.0.9 → 1.1.0

package/src/patterns/zora-tab-bar/ZoraTabBar.tsx

@@ -0,0 +1,55 @@
+import { TabBar as SurfaceTabBar } from '@ankhorage/surface';
+import React from 'react';
+
+import { Surface } from '../../foundation';
+import {
+  createTabBarItemPressHandler,
+  resolveNavigationItems,
+} from '../../internal/resolveZoraNavigationItems';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { ZoraTabBarProps } from './types';
+
+function ZoraTabBarInner({
+  themeId: _themeId,
+  mode: _mode,
+  state,
+  navigation,
+  descriptors,
+  routeMap,
+  compact = false,
+  chrome = 'raised',
+  testID,
+}: ZoraTabBarProps) {
+  const resolved = resolveNavigationItems({
+    state,
+    descriptors,
+    routeMap,
+    kind: 'tab',
+  });
+
+  const items = resolved.map((item) => ({
+    id: item.route.key,
+    label: item.label,
+    icon: item.metadata?.icon,
+    badge: item.metadata?.badge,
+    active: item.active,
+    disabled: item.disabled,
+    onPress: createTabBarItemPressHandler({ item, navigation }),
+    accessibilityLabel: item.metadata?.accessibilityLabel,
+    testID: item.metadata?.testID,
+  }));
+
+  const content = <SurfaceTabBar compact={compact} items={items} testID={testID} />;
+
+  if (chrome === 'none') {
+    return content;
+  }
+
+  return (
+    <Surface variant="raised" testID={testID ? `${testID}-chrome` : undefined}>
+      {content}
+    </Surface>
+  );
+}
+
+export const ZoraTabBar = withZoraThemeScope(ZoraTabBarInner);

package/src/patterns/zora-tab-bar/index.ts

@@ -0,0 +1,2 @@
+export type { ZoraTabBarProps } from './types';
+export { ZoraTabBar } from './ZoraTabBar';

package/src/patterns/zora-tab-bar/types.ts

@@ -0,0 +1,18 @@
+import type { ZoraNavigationRouteMap } from '../../components/navigation-list';
+import type {
+  ZoraNavigationDescriptors,
+  ZoraNavigationState,
+  ZoraTabBarNavigation,
+} from '../../internal/resolveZoraNavigationItems';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+
+export interface ZoraTabBarProps extends ZoraBaseProps {
+  state: ZoraNavigationState;
+  navigation: ZoraTabBarNavigation;
+  descriptors?: ZoraNavigationDescriptors | undefined;
+  insets?: { top?: number; bottom?: number; left?: number; right?: number } | undefined;
+  routeMap?: ZoraNavigationRouteMap | undefined;
+  compact?: boolean;
+  chrome?: 'none' | 'raised';
+  testID?: string;
+}

package/src/showcaseCoverage.test.ts

@@ -34,10 +34,13 @@ const REQUIRED_SHOWCASE_COVERAGE = {
     'Heading',
     'Icon',
     'IconButton',
+    'Image',
     'Input',
     'MediaCard',
     'MetricCard',
     'Modal',
+    'NavigationItem',
+    'NavigationList',
     'Progress',
     'Radio',
     'RadioGroup',
@@ -86,6 +89,8 @@ const REQUIRED_SHOWCASE_COVERAGE = {
     'ListRow',
     'ListSection',
     'InspectorField',
+    'ImagePreview',
+    'ImageUploadField',
     'Notice',
     'Panel',
     'ResponsivePanel',
@@ -98,6 +103,8 @@ const REQUIRED_SHOWCASE_COVERAGE = {
     'TileGrid',
     'TreeItem',
     'TreeView',
+    'ZoraDrawerContent',
+    'ZoraTabBar',
   ],
 } as const;