jfs-components 0.0.5 → 0.0.7

package/src/components/Accordion/Accordion.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as AccordionStories from './Accordion.stories';
 import Accordion from './Accordion';
 import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';

package/src/components/ActionFooter/ActionFooter.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
 import * as ActionFooterStories from './ActionFooter.stories';
 import ActionFooter from './ActionFooter';
 

package/src/components/ActionFooter/ActionFooter.tsx

@@ -6,6 +6,7 @@ import {
   Platform,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { cloneChildrenWithModes } from '../../utils/react-utils'
 
 export type ActionFooterProps = {
   /**
@@ -108,22 +109,12 @@ function ActionFooter({
   }
 
   // Web-specific box-shadow
-  const webShadow = Platform.OS === 'web' 
+  const webShadow = Platform.OS === 'web'
     ? { boxShadow: '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)' } as any
     : {}
 
   // Pass modes prop to all slot children
-  const childrenWithModes = React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      // Merge modes: child's modes take precedence over parent's modes
-      const childModes = (child.props as any).modes
-      const mergedModes = childModes ? { ...modes, ...childModes } : modes
-      return React.cloneElement(child as React.ReactElement<any>, {
-        modes: mergedModes,
-      })
-    }
-    return child
-  })
+  const childrenWithModes = cloneChildrenWithModes(children, modes)
 
   return (
     <View

package/src/components/ActionTile/ActionTile.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, PureArgsTable as Controls } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, PureArgsTable as Controls } from '@storybook/blocks';
 import * as ActionTileStories from './ActionTile.stories';
 
 <Meta of={ActionTileStories} />
@@ -15,6 +15,10 @@ This component uses the following design token collections. Each collection supp
 ### Color Mode
 - **Modes:** Light | Dark
 - **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
 ## Usage
 
 ```tsx

package/src/components/ActionTile/ActionTile.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, type ViewStyle, type TextStyle, TouchableOpacity } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import IconCapsule from '../IconCapsule/IconCapsule'
 
 export type ActionTileProps = {
@@ -29,10 +30,13 @@ export type ActionTileProps = {
 export default function ActionTile({
     label = 'Cards',
     icon,
-    modes = {},
+    modes: propModes = {},
     style,
     onPress,
 }: ActionTileProps) {
+    const { modes: globalModes } = useTokens()
+    const modes = { ...globalModes, ...propModes }
+
     // Resolve tokens
     const backgroundColor = getVariableByName('actionTile/background', modes) || '#ffffff'
     const gap = Number(getVariableByName('actionTile/gap', modes)) || 8

package/src/components/AppBar/AppBar.mdx

@@ -1,63 +1,75 @@
-import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
 import * as AppBarStories from './AppBar.stories';
-import AppBar from './AppBar';
-import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
 
 <Meta of={AppBarStories} />
 
 # AppBar
 
-Helper function to recursively clone children and pass modes prop to components that accept it.
+The `AppBar` component supports two main types tailored for different hierarchy levels in the app:
+- **MainPage**: Taller bar, typically used on landing pages. Supports branding (leading), and varied actions.
+- **SubPage**: Standard height, used for inner pages. Typically features a "Back" arrow and a page title.
+
 
 ## Available Collections and Modes
 
-This component does not use any design token collections with multiple modes.
-## Usage
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
 
-<Canvas>
-  <Story of={AppBarStories.Default} />
-</Canvas>
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+## Usage
 
+```tsx
+import { AppBar } from 'jfs-components';
+// or relative path...
 
-<AccessibilitySection
-  items={[
-    'Set `accessibilityLabel` and `accessibilityHint` on AppBar/AppBarHome to describe the screen or navigation target.',
-    'Give every IconButton in leading/actions slots a readable label; pair with `onLeadingPress` for back/home navigation instead of relying on gestures.',
-    'Keep middle slot content informational only—the wrapper is hidden from the accessibility tree to avoid duplicate announcements.',
-    'Hide decorative icons from assistive tech by setting `accessibilityElementsHidden`/`importantForAccessibility` on custom elements.',
-  ]}
+// MainPage Example
+<AppBar
+  type="MainPage"
+  leadingSlot={<JioLogo />}
+  actionsSlot={
+    <>
+      <IconButton iconName="ic_search" />
+      <IconButton iconName="ic_notification" />
+      <Avatar />
+    </>
+  }
 />
 
-<AnatomySection>
-  <ul>
-    <li><strong>Leading</strong> — default back IconButton; replace with any element (receives merged `modes`).</li>
-    <li><strong>Middle slot</strong> — centered, non-interactive title/search content layered above the bar.</li>
-    <li><strong>Actions slot</strong> — right-aligned IconButtons; defaults to search and overflow buttons.</li>
-    <li><strong>AppBarHome</strong> — leading IconButton + actions + Avatar arranged on the right.</li>
-  </ul>
-</AnatomySection>
-
-<UsageConstraintsSection
-  items={[
-    'Pass shared `modes` so token-driven spacing and sizes stay consistent across slots and Avatar.',
-    'Avoid focusable controls in the middle slot; it is for display content and hidden from the accessibility tree.',
-    'Provide explicit `onLeadingPress`/`onPress` handlers to avoid inert navigation controls.',
-    'Override layout with `style` sparingly—keep token padding to preserve tap targets.',
-  ]}
+// SubPage Example
+<AppBar
+  type="SubPage"
+  // Default leading is back arrow, so leadingSlot can be omitted if that's desired
+  onLeadingPress={() => navigation.goBack()}
+  middleSlot={<Text style={{ fontWeight: 'bold' }}>Settings</Text>}
+  actionsSlot={<IconButton iconName="ic_more_horizontal" />}
 />
+```
+
 ## Props
 
-<ArgsTable of={AppBar} />
+<Controls />
+
+## Slots & Modes
+
+The `AppBar` automatically passes `modes` down to all children within `leadingSlot`, `middleSlot`, and `actionsSlot`.
+This ensures that if you switch the AppBar's mode (e.g. to Dark Mode), all buttons and text inside will adapt if they respect the `modes` prop.
 
 ## Design Tokens
 
 This component uses the following design tokens, resolved through `getVariableByName`:
 
-- **`appBarActions/actions/gap`**
-- **`appBarActions/padding/horizontal`**
-- **`appBarActions/padding/vertical`**
-- **`appBarHome/actions/gap`**
-- **`appBarHome/padding/horizontal`**
-- **`appBarHome/padding/vertical`**
+- **`appBar/mainPage/actions/gap`**
+- **`appBar/mainPage/background`**
+- **`appBar/mainPage/padding/horizontal`**
+- **`appBar/mainPage/padding/vertical`**
+- **`appBar/subPage/actions/gap`**
+- **`appBar/subPage/background`**
+- **`appBar/subPage/padding/horizontal`**
+- **`appBar/subPage/padding/vertical`**
 
 All tokens support mode-based theming through the `modes` prop.