@ledgerhq/lumen-ui-rnative 0.1.8 → 0.1.9

package/dist/module/lib/Components/Subheader/Subheader.mdx

@@ -0,0 +1,517 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import { Box } from '../Utility';
+import * as SubheaderStories from './Subheader.stories';
+import {
+  Subheader,
+  SubheaderRow,
+  SubheaderTitle,
+  SubheaderCount,
+  SubheaderInfo,
+  SubheaderShowMore,
+  SubheaderDescription,
+  SubheaderAction,
+} from './Subheader';
+import {
+  CustomTabs,
+  Tab,
+  DoVsDontRow,
+  DoBlockItem,
+  DontBlockItem,
+} from '../../../../.storybook/components';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+<Meta title='Components/Subheader' of={SubheaderStories} />
+
+# 🃏 Subheader
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+Subheaders are section headers that provide context and organization to content blocks. They use a composite component pattern that provides full flexibility over layout and content through composable sub-components.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=your-node-id).
+
+## Anatomy
+
+<Canvas of={SubheaderStories.Base} />
+
+The Subheader uses a composite structure with the following components:
+
+- **Subheader**: Root container
+- **SubheaderRow**: Interactive horizontal container for title and inline elements
+- **SubheaderTitle**: The main heading text (required)
+- **SubheaderCount**: Displays a numeric count in parentheses (optional)
+- **SubheaderShowMore**: Static chevron right icon to indicate expandable content, positioned after the count (optional)
+- **SubheaderInfo**: Information icon that can be wrapped in tooltips or bottom sheets (optional)
+- **SubheaderDescription**: Additional descriptive text below the row (optional)
+- **SubheaderAction**: Container for action elements, positioned at the far right (optional)
+
+## Properties
+
+### Overview
+
+<Canvas of={SubheaderStories.Base} />
+<Controls of={SubheaderStories.Base} />
+
+### Interactive Row
+
+Interactive rows always include the chevron to indicate they lead to more content:
+
+<Canvas of={SubheaderStories.InteractiveRow} />
+
+### With Info Icon
+
+Use the info icon to provide contextual help:
+
+<Canvas of={SubheaderStories.WithInfoIcon} />
+
+### With Action
+
+Use actions for quick access to related functionality:
+
+<Canvas of={SubheaderStories.WithAction} />
+
+> **Key behaviors:**
+>
+> - Subheaders flow naturally to fill their parent container width
+> - Title truncates with ellipsis when too long for the available space
+> - Count, hint, and action elements maintain their positions
+> - Uses flex layout for responsive arrangement
+> - Action elements are positioned at the far right using `marginLeft: 'auto'`
+
+## Accessibility
+
+React Native Subheader includes:
+
+- Native touch feedback with `Pressable` for interactive rows
+- Proper text truncation with `numberOfLines` and `ellipsizeMode`
+- Screen reader support through React Native's accessibility features
+- Clear visual hierarchy for scannable content
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+## Basic Usage
+
+The Subheader uses a composite component pattern for maximum flexibility:
+
+```tsx
+import {
+  Subheader,
+  SubheaderRow,
+  SubheaderTitle,
+} from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return (
+    <Subheader>
+      <SubheaderRow>
+        <SubheaderTitle>Section Title</SubheaderTitle>
+      </SubheaderRow>
+    </Subheader>
+  );
+}
+```
+
+### With Description
+
+Add descriptive text below the title row:
+
+```tsx
+import {
+  Subheader,
+  SubheaderRow,
+  SubheaderTitle,
+  SubheaderDescription,
+} from '@ledgerhq/lumen-ui-rnative';
+
+function DescriptiveSubheader() {
+  return (
+    <Subheader>
+      <SubheaderRow>
+        <SubheaderTitle>Section Title</SubheaderTitle>
+      </SubheaderRow>
+      <SubheaderDescription>
+        Additional context about this section
+      </SubheaderDescription>
+    </Subheader>
+  );
+}
+```
+
+### With Count
+
+Display a numeric count next to the title:
+
+```tsx
+import {
+  Subheader,
+  SubheaderRow,
+  SubheaderTitle,
+  SubheaderCount,
+} from '@ledgerhq/lumen-ui-rnative';
+
+function CountExample() {
+  return (
+    <Subheader>
+      <SubheaderRow>
+        <SubheaderTitle>Accounts</SubheaderTitle>
+        <SubheaderCount value={30} />
+      </SubheaderRow>
+    </Subheader>
+  );
+}
+```
+
+You can also provide a custom formatter:
+
+```tsx
+<SubheaderCount value={150} format={(n) => (n > 99 ? '(99+)' : `(${n})`)} />
+```
+
+### With Info Tooltip
+
+Add an informational tooltip using the `SubheaderInfo` component (which includes an interactive information icon by default):
+
+```tsx
+import {
+  Subheader,
+  SubheaderRow,
+  SubheaderTitle,
+  SubheaderInfo,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from '@ledgerhq/lumen-ui-rnative';
+import { Text } from 'react-native';
+
+function InfoExample() {
+  return (
+    <Subheader>
+      <SubheaderRow>
+        <SubheaderTitle>Section Title</SubheaderTitle>
+        <Tooltip>
+          <TooltipTrigger>
+            <SubheaderInfo />
+          </TooltipTrigger>
+          <TooltipContent content={<Text>This is additional information</Text>} />
+        </Tooltip>
+      </SubheaderRow>
+    </Subheader>
+  );
+}
+```
+
+### With Action
+
+Include an action element in the row (automatically aligned to the right):
+
+```tsx
+import {
+  Subheader,
+  SubheaderRow,
+  SubheaderTitle,
+  SubheaderAction,
+} from '@ledgerhq/lumen-ui-rnative';
+
+function ActionExample() {
+  return (
+    <Subheader>
+      <SubheaderRow>
+        <SubheaderTitle>Section Title</SubheaderTitle>
+        <SubheaderAction onPress={() => console.log('Action clicked')}>
+          View More
+        </SubheaderAction>
+      </SubheaderRow>
+    </Subheader>
+  );
+}
+```
+
+### With Show More
+
+Display a static chevron right icon to indicate expandable content. Position it after the count to visually suggest the row is interactive:
+
+```tsx
+import {
+  Subheader,
+  SubheaderRow,
+  SubheaderTitle,
+  SubheaderCount,
+  SubheaderShowMore,
+  SubheaderDescription,
+} from '@ledgerhq/lumen-ui-rnative';
+
+function ShowMoreExample() {
+  const handleRowPress = () => {
+    console.log('Row pressed');
+    // Navigate to detail view or expand content
+  };
+
+  return (
+    <Subheader>
+      <SubheaderRow onPress={handleRowPress}>
+        <SubheaderTitle>Accounts</SubheaderTitle>
+        <SubheaderCount value={5} />
+        <SubheaderShowMore />
+      </SubheaderRow>
+      <SubheaderDescription>
+        The chevron indicates this row leads to more content
+      </SubheaderDescription>
+    </Subheader>
+  );
+}
+```
+
+> **Note**: The `SubheaderShowMore` is a static (non-interactive) chevron icon. The entire row should be made clickable using `SubheaderRow`'s `onPress` prop. Position `SubheaderShowMore` after `SubheaderCount` to maintain proper visual hierarchy.
+
+### Interactive Row
+
+Make the entire row clickable by adding an `onPress` handler to `SubheaderRow`. Interactive rows should always include the chevron (`SubheaderShowMore`) to indicate they lead to more content:
+
+```tsx
+import {
+  Subheader,
+  SubheaderRow,
+  SubheaderTitle,
+  SubheaderCount,
+  SubheaderShowMore,
+  SubheaderDescription,
+} from '@ledgerhq/lumen-ui-rnative';
+
+function InteractiveExample() {
+  return (
+    <Subheader>
+      <SubheaderRow onPress={() => console.log('Row clicked')}>
+        <SubheaderTitle>Accounts</SubheaderTitle>
+        <SubheaderCount value={5} />
+        <SubheaderShowMore />
+      </SubheaderRow>
+      <SubheaderDescription>
+        Interactive rows always include the chevron to indicate they lead to more content
+      </SubheaderDescription>
+    </Subheader>
+  );
+}
+```
+
+### Combining Multiple Options
+
+You can combine different components as needed. The `SubheaderRow` and `SubheaderTitle` are required, while all other components (`SubheaderCount`, `SubheaderInfo`, `SubheaderDescription`, `SubheaderAction`) are optional:
+
+```tsx
+import {
+  Subheader,
+  SubheaderRow,
+  SubheaderTitle,
+  SubheaderCount,
+  SubheaderInfo,
+  SubheaderDescription,
+  SubheaderAction,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from '@ledgerhq/lumen-ui-rnative';
+import { Text } from 'react-native';
+
+function FullExample() {
+  return (
+    <Subheader>
+      <SubheaderRow>
+        <SubheaderTitle>Section Title</SubheaderTitle>
+        <SubheaderCount value={42} />
+        <Tooltip>
+          <TooltipTrigger>
+            <SubheaderInfo />
+          </TooltipTrigger>
+          <TooltipContent content={<Text>Additional info</Text>} />
+        </Tooltip>
+        <SubheaderAction onPress={() => console.log('Action clicked')}>
+          Action
+        </SubheaderAction>
+      </SubheaderRow>
+      <SubheaderDescription>
+        This is a detailed description of the section.
+      </SubheaderDescription>
+    </Subheader>
+  );
+}
+```
+
+### Layout Adjustments with lx
+
+Use the `lx` prop for layout adjustments like margins or positioning:
+
+```tsx
+<Subheader lx={{ marginTop: 's16', marginBottom: 's8' }}>
+  <SubheaderRow>
+    <SubheaderTitle>With Margin</SubheaderTitle>
+  </SubheaderRow>
+  <SubheaderDescription>
+    This subheader has custom margins
+  </SubheaderDescription>
+</Subheader>
+```
+
+## Do's and Don'ts
+
+The following guidelines ensure consistent usage of the Subheader component and maintain design system principles.
+
+<Box lx={{ flexDirection: 'column', gap: 's16' }}>
+
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use Count for numeric values'
+      description='Pass numbers using the value prop'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Subheader>
+  <SubheaderRow>
+    <SubheaderTitle>Accounts</SubheaderTitle>
+    <SubheaderCount value={30} />
+  </SubheaderRow>
+</Subheader>
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't add parentheses manually"
+      description='Count component automatically formats the value'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Subheader>
+  <SubheaderRow>
+    <SubheaderTitle>Accounts (30)</SubheaderTitle>
+  </SubheaderRow>
+</Subheader>
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use the composite pattern'
+      description='Compose sub-components for flexibility'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Subheader>
+  <SubheaderRow>
+    <SubheaderTitle>Title</SubheaderTitle>
+    <SubheaderCount value={5} />
+  </SubheaderRow>
+  <SubheaderDescription>Description</SubheaderDescription>
+</Subheader>
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't use non-composite children"
+      description='Only use the provided sub-components'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Subheader>
+  <Text>Title (5)</Text>
+  <Text>Description</Text>
+</Subheader>
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use Action in Row with onPress'
+      description='Action should have an onPress handler and be placed in Row for right alignment'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Subheader>
+  <SubheaderRow>
+    <SubheaderTitle>Title</SubheaderTitle>
+    <SubheaderAction onPress={handleAction}>
+      Action
+    </SubheaderAction>
+  </SubheaderRow>
+</Subheader>
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't place Action outside Row"
+      description='Action must be inside SubheaderRow for proper positioning'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Subheader>
+  <SubheaderRow>
+    <SubheaderTitle>Title</SubheaderTitle>
+  </SubheaderRow>
+  <SubheaderAction onPress={handleAction}>
+    Action
+  </SubheaderAction>
+</Subheader>
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <DoVsDontRow>
+    <DoBlockItem
+      title='Use lx for layout adjustments only'
+      description='Use the lx prop for margins, positioning, and other layout adjustments'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Subheader lx={{ marginTop: 's16' }}>
+  <SubheaderRow>
+    <SubheaderTitle>Title</SubheaderTitle>
+  </SubheaderRow>
+</Subheader>
+```
+
+    </DoBlockItem>
+    <DontBlockItem
+      title="Don't use lx for appearance changes"
+      description='Avoid using lx to modify colors, padding, or other core appearance styles'
+    >
+
+{/* prettier-ignore */}
+```tsx
+<Subheader lx={{ backgroundColor: 'accent', padding: 's24' }}>
+  <SubheaderRow>
+    <SubheaderTitle>Title</SubheaderTitle>
+  </SubheaderRow>
+</Subheader>
+```
+
+    </DontBlockItem>
+
+  </DoVsDontRow>
+
+  <CommonRulesDoAndDont />
+</Box>
+
+</Tab>
+</CustomTabs>
+

package/dist/module/lib/Components/Subheader/Subheader.stories.js

@@ -0,0 +1,96 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { Tooltip, TooltipTrigger, TooltipContent } from "../Tooltip/index.js";
+import { Subheader, SubheaderRow, SubheaderTitle, SubheaderCount, SubheaderInfo, SubheaderShowMore, SubheaderDescription, SubheaderAction } from "./Subheader.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Container = ({
+  children
+}) => /*#__PURE__*/_jsx(View, {
+  style: {
+    padding: 8,
+    backgroundColor: '#ffffff',
+    width: '100%'
+  },
+  children: children
+});
+const meta = {
+  component: Subheader,
+  title: 'Communication/Subheader',
+  subcomponents: {
+    SubheaderRow,
+    SubheaderTitle,
+    SubheaderDescription,
+    SubheaderCount,
+    SubheaderInfo,
+    SubheaderShowMore,
+    SubheaderAction
+  },
+  decorators: [Story => /*#__PURE__*/_jsx(Container, {
+    children: /*#__PURE__*/_jsx(Story, {})
+  })]
+};
+export default meta;
+export const Base = {
+  render: () => /*#__PURE__*/_jsxs(Subheader, {
+    children: [/*#__PURE__*/_jsx(SubheaderRow, {
+      children: /*#__PURE__*/_jsx(SubheaderTitle, {
+        children: "Section Title"
+      })
+    }), /*#__PURE__*/_jsx(SubheaderDescription, {
+      children: "This is a detailed description that provides additional context about this section."
+    })]
+  })
+};
+export const InteractiveRow = {
+  render: () => /*#__PURE__*/_jsxs(Subheader, {
+    children: [/*#__PURE__*/_jsxs(SubheaderRow, {
+      onPress: () => console.log('Row clicked'),
+      children: [/*#__PURE__*/_jsx(SubheaderTitle, {
+        children: "Accounts"
+      }), /*#__PURE__*/_jsx(SubheaderCount, {
+        value: 5
+      }), /*#__PURE__*/_jsx(SubheaderShowMore, {})]
+    }), /*#__PURE__*/_jsx(SubheaderDescription, {
+      children: "Interactive rows always include the chevron to indicate they lead to more content"
+    })]
+  })
+};
+export const WithInfoIcon = {
+  render: () => /*#__PURE__*/_jsxs(Subheader, {
+    children: [/*#__PURE__*/_jsxs(SubheaderRow, {
+      children: [/*#__PURE__*/_jsx(SubheaderTitle, {
+        children: "Section with Info"
+      }), /*#__PURE__*/_jsxs(Tooltip, {
+        children: [/*#__PURE__*/_jsx(TooltipTrigger, {
+          children: /*#__PURE__*/_jsx(SubheaderInfo, {})
+        }), /*#__PURE__*/_jsx(TooltipContent, {
+          content: /*#__PURE__*/_jsx(Text, {
+            children: "Additional information about this section"
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(SubheaderDescription, {
+      children: "Use the info icon to provide contextual help or additional details"
+    })]
+  })
+};
+export const WithAction = {
+  render: () => /*#__PURE__*/_jsxs(Subheader, {
+    lx: {
+      maxWidth: 's480'
+    },
+    children: [/*#__PURE__*/_jsxs(SubheaderRow, {
+      children: [/*#__PURE__*/_jsx(SubheaderTitle, {
+        children: "Recent Activity"
+      }), /*#__PURE__*/_jsx(SubheaderAction, {
+        onPress: () => console.log('View all'),
+        children: "View all"
+      })]
+    }), /*#__PURE__*/_jsx(SubheaderDescription, {
+      children: "Use actions for quick access to related functionality"
+    })]
+  })
+};
+//# sourceMappingURL=Subheader.stories.js.map

package/dist/module/lib/Components/Subheader/Subheader.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","Tooltip","TooltipTrigger","TooltipContent","Subheader","SubheaderRow","SubheaderTitle","SubheaderCount","SubheaderInfo","SubheaderShowMore","SubheaderDescription","SubheaderAction","jsx","_jsx","jsxs","_jsxs","Container","children","style","padding","backgroundColor","width","meta","component","title","subcomponents","decorators","Story","Base","render","InteractiveRow","onPress","console","log","value","WithInfoIcon","content","WithAction","lx","maxWidth"],"sourceRoot":"../../../../../src","sources":["lib/Components/Subheader/Subheader.stories.tsx"],"mappings":"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","ignoreList":[]}