jfs-components 0.0.1 → 0.0.3

package/src/components/NavArrow/NavArrow.tsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import { View, type ViewStyle } from 'react-native'
+import Svg, { Path } from 'react-native-svg'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+type NavArrowDirection = 'Back' | 'Forward'
+
+type NavArrowProps = {
+  /** Direction of the arrow: 'Back' (left chevron) or 'Forward' (right chevron) */
+  direction?: NavArrowDirection
+  /** Modes used to resolve design tokens */
+  modes?: Record<string, any>
+  /** Optional additional container style */
+  style?: ViewStyle
+  /** Accessibility label for the arrow */
+  accessibilityLabel?: string
+} & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityLabel'>
+
+/**
+ * NavArrow component that displays a small chevron arrow for navigation.
+ *
+ * This component uses design tokens for all visual properties:
+ * - navArrow/icon/color - chevron stroke color
+ * - navArrow/icon/width - icon width
+ * - navArrow/icon/height - icon height
+ * - navArrow/icon/strokeWeight - stroke width
+ * - navArrow/width - container width
+ * - navArrow/height - container height
+ * - navArrow/radius - border radius
+ * - navArrow/background - background color
+ *
+ * @component
+ * @param {Object} props
+ * @param {'Back'|'Forward'} [props.direction='Back'] - Arrow direction
+ * @param {Object} [props.modes={}] - Modes for design token resolution
+ * @param {Object} [props.style] - Additional container styles
+ */
+function NavArrow({
+  direction = 'Back',
+  modes = {},
+  style,
+  accessibilityLabel,
+  ...rest
+}: NavArrowProps) {
+  // Resolve design tokens
+  const iconColor =
+    (getVariableByName('navArrow/icon/color', modes) as string) || '#24262b'
+  const iconWidth =
+    Number(getVariableByName('navArrow/icon/width', modes)) || 4
+  const iconHeight =
+    Number(getVariableByName('navArrow/icon/height', modes)) || 8
+  const strokeWeight =
+    Number(getVariableByName('navArrow/icon/strokeWeight', modes)) || 2
+  const containerWidth =
+    Number(getVariableByName('navArrow/width', modes)) || 6
+  const containerHeight =
+    Number(getVariableByName('navArrow/height', modes)) || 10
+  const borderRadius =
+    Number(getVariableByName('navArrow/radius', modes)) || 0
+  const backgroundColor =
+    (getVariableByName('navArrow/background', modes) as string) || 'transparent'
+
+  const containerStyle: ViewStyle = {
+    width: containerWidth,
+    height: containerHeight,
+    borderRadius,
+    backgroundColor,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...(style || {}),
+  }
+
+  const defaultAccessibilityLabel =
+    accessibilityLabel || (direction === 'Back' ? 'Go back' : 'Go forward')
+
+  // SVG path for chevron - draws a simple ">" shape
+  // For Back direction, we flip horizontally with scaleX(-1)
+  // The path creates a chevron pointing right by default
+  const chevronPath = `M1 1L${iconWidth - 1} ${iconHeight / 2}L1 ${iconHeight - 1}`
+
+  return (
+    <View
+      style={containerStyle}
+      accessibilityRole="image"
+      accessibilityLabel={defaultAccessibilityLabel}
+      {...rest}
+    >
+      <Svg
+        width={iconWidth}
+        height={iconHeight}
+        viewBox={`0 0 ${iconWidth} ${iconHeight}`}
+        style={direction === 'Back' ? { transform: [{ scaleX: -1 }] } : undefined}
+      >
+        <Path
+          d={chevronPath}
+          stroke={iconColor}
+          strokeWidth={strokeWeight}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          fill="none"
+        />
+      </Svg>
+    </View>
+  )
+}
+
+export default NavArrow
+

package/src/components/Section/Section.mdx

@@ -13,6 +13,10 @@ Section component that mirrors the Figma "Section" component.
 
 This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
 ### Padding
 - **Modes:** Default | None
 - **Default:** Default
@@ -20,10 +24,6 @@ This component uses the following design token collections. Each collection supp
 ### Appearance.Brand
 - **Modes:** Primary | Secondary | Neutral
 - **Default:** Primary
-
-### Color Mode
-- **Modes:** Light | Dark
-- **Default:** Light
 ## Usage
 
 <Canvas>

package/src/components/Stepper/Step.mdx

@@ -12,7 +12,7 @@ A component representing a single step within a Stepper process. It displays an
 
 This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
-### Status
+### Step Status
 - **Modes:** active | inactive | complete | error | warning
 - **Default:** active
 

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export { default as ActionFooter, type ActionFooterProps } from './ActionFooter/ActionFooter';
 export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
 export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
@@ -8,6 +9,7 @@ export { default as Button, type ButtonProps } from './Button/Button';
 export { default as Card } from './Card/Card';
 export { default as CardFeedback } from './CardFeedback/CardFeedback';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
+export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
 export { default as Drawer } from './Drawer/Drawer';
 export { default as FilterBar } from './FilterBar/FilterBar';
 export { default as IconButton } from './IconButton/IconButton';
@@ -16,7 +18,9 @@ export { default as LazyList } from './LazyList/LazyList';
 export { default as ListGroup } from './ListGroup/ListGroup';
 export { default as ListItem } from './ListItem/ListItem';
 export { default as MediaCard } from './MediaCard/MediaCard';
+export { default as MerchantProfile, type MerchantProfileProps } from './MerchantProfile/MerchantProfile';
 export { default as MoneyValue } from './MoneyValue/MoneyValue';
+export { default as NavArrow } from './NavArrow/NavArrow';
 export { default as PageTitle } from './PageTitle/PageTitle';
 export { default as Section } from './Section/Section';
 export { default as Stepper } from './Stepper/Stepper';