@ledgerhq/lumen-ui-rnative 0.1.35 → 0.1.37

package/src/lib/Components/DescriptionItem/index.ts

@@ -0,0 +1,2 @@
+export * from './DescriptionItem';
+export * from './types';

package/src/lib/Components/DescriptionItem/types.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+import type { StyledTextProps, StyledViewProps } from '../../../styles';
+
+export type DescriptionItemSize = 'sm' | 'md';
+
+export type DescriptionItemProps = {
+  /**
+   * The content of the description item (DescriptionItemLeading, DescriptionItemTrailing).
+   */
+  children: ReactNode;
+  /**
+   * The size of the description item.
+   * @default 'md'
+   */
+  size?: DescriptionItemSize;
+} & Omit<StyledViewProps, 'children'>;
+
+export type DescriptionItemLeadingProps = {
+  /**
+   * The leading content (DescriptionItemLabel + optional info icon sibling).
+   */
+  children: ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+
+export type DescriptionItemLabelProps = {
+  /**
+   * The label text or custom content.
+   */
+  children: ReactNode;
+} & Omit<StyledTextProps, 'children'>;
+
+export type DescriptionItemTrailingProps = {
+  /**
+   * The trailing content (DescriptionItemValue, Tag, Link, etc.).
+   */
+  children: ReactNode;
+} & Omit<StyledViewProps, 'children'>;
+
+export type DescriptionItemValueProps = {
+  /**
+   * The value text or custom content.
+   */
+  children: ReactNode;
+} & Omit<StyledTextProps, 'children'>;

package/src/lib/Components/Divider/Divider.mdx

@@ -9,7 +9,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title='Layout/Divider' of={DividerStories} />
 
-# ➖ Divider
+# Divider
 
 <CustomTabs>
   <Tab label="Overview ">

package/src/lib/Components/DotIcon/DotIcon.mdx

@@ -1,13 +1,18 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as DotIconStories from './DotIcon.stories';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
 
 <Meta title='Communication/DotIcon' of={DotIconStories} />
 
 # DotIcon
 
+<CustomTabs>
+  <Tab label="Overview">
+
 ## Introduction
 
 DotIcon positions a small icon indicator at a configurable corner of a child element such as MediaImage or Spot. The dot background uses a semantic color (`success`, `muted`, or `error`) to convey meaning at a glance.
+
 > View in [Figma](https://www.figma.com/design/zSkvGGiqcnhywp2l3HTHxA/1.-Symbol-Library?node-id=6159-1866).
 
 ## Anatomy
@@ -50,7 +55,94 @@ The dot size is driven by the parent MediaImage or Spot size via the mapping hel
 
 <Canvas of={DotIconStories.SizeShowcase} />
 
+### Disabled
+
+Only set `disabled` on `DotIcon`. The state is propagated to the child via context. Passing it to both stacks the opacity overlay.
+
+<Canvas of={DotIconStories.DisabledShowcase} />
+
 ## Accessibility
 
 - The icon is purely decorative; the child element should carry its own accessibility label.
 - Pair semantic appearances with meaningful icons so the state can be understood without relying on color alone.
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+### Basic Usage
+
+```tsx
+import { DotIcon, MediaImage } from '@ledgerhq/lumen-ui-rnative';
+import { ArrowDown } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  return (
+    <DotIcon appearance='success' icon={ArrowDown}>
+      <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+    </DotIcon>
+  );
+}
+```
+
+### Pin Placement
+
+Position the dot at any of the four corners of the child:
+
+```tsx
+<DotIcon appearance='success' icon={ArrowDown} pin='top-end'>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+</DotIcon>
+```
+
+### Shapes
+
+Use `shape='square'` to match a square child element:
+
+```tsx
+<DotIcon appearance='muted' icon={ArrowDown} shape='square'>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} shape='square' />
+</DotIcon>
+```
+
+### Appearances
+
+Pick a semantic color via `appearance`:
+
+```tsx
+<DotIcon appearance='success' icon={ArrowDown}>...</DotIcon>
+<DotIcon appearance='muted' icon={ArrowUp}>...</DotIcon>
+<DotIcon appearance='error' icon={Close}>...</DotIcon>
+```
+
+### Sizing
+
+The dot size is driven by the parent's size via the mapping helpers:
+
+```tsx
+import { DotIcon, mediaImageDotIconSizeMap, MediaImage } from '@ledgerhq/lumen-ui-rnative';
+
+<DotIcon
+  appearance='success'
+  icon={ArrowDown}
+  size={mediaImageDotIconSizeMap[48]}
+>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+</DotIcon>;
+```
+
+### Disabled State
+
+Only set `disabled` on `DotIcon`. The state is propagated to the child via context. Passing it to both stacks the opacity overlay.
+
+```tsx
+<DotIcon appearance='success' icon={ArrowDown} disabled>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+</DotIcon>
+```
+
+</Tab>
+</CustomTabs>

package/src/lib/Components/DotIcon/DotIcon.stories.tsx

@@ -113,6 +113,41 @@ export const AppearanceShowcase: Story = {
   ),
 };
 
+export const DisabledShowcase: Story = {
+  args: { appearance: 'success', icon: ArrowDown },
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's32' }}>
+      <DotIcon
+        appearance='success'
+        icon={ArrowDown}
+        size={mediaImageDotIconSizeMap[48]}
+        pin='bottom-end'
+        disabled
+      >
+        <MediaImage src={parentSrc} size={48} shape='circle' />
+      </DotIcon>
+      <DotIcon
+        appearance='muted'
+        icon={ArrowUp}
+        size={mediaImageDotIconSizeMap[48]}
+        pin='bottom-end'
+        disabled
+      >
+        <MediaImage src={parentSrc} size={48} shape='circle' />
+      </DotIcon>
+      <DotIcon
+        appearance='error'
+        icon={Close}
+        size={mediaImageDotIconSizeMap[48]}
+        pin='bottom-end'
+        disabled
+      >
+        <MediaImage src={parentSrc} size={48} shape='circle' />
+      </DotIcon>
+    </Box>
+  ),
+};
+
 export const SizeShowcase: Story = {
   args: { appearance: 'muted', icon: Link },
   render: () => (

package/src/lib/Components/DotIcon/DotIcon.tsx

@@ -1,4 +1,7 @@
-import { StyleSheet } from 'react-native';
+import {
+  DisabledProvider,
+  useDisabledContext,
+} from '@ledgerhq/lumen-utils-shared';
 import { useStyleSheet } from '../../../styles';
 import type { IconSize } from '../Icon';
 import { Box } from '../Utility';
@@ -63,11 +66,13 @@ const useStyles = ({
   shape,
   pin,
   appearance,
+  disabled,
 }: {
   size: DotIconSize;
   shape: 'square' | 'circle';
   pin: DotIconPin;
   appearance: DotIconAppearance;
+  disabled: boolean;
 }) => {
   return useStyleSheet(
     (t) => {
@@ -77,6 +82,10 @@ const useStyles = ({
       const pinOffset = getPinOffset(pin);
 
       return {
+        root: {
+          position: 'relative',
+          ...(disabled && { opacity: 0.3 }),
+        },
         dot: {
           position: 'absolute',
           zIndex: 10,
@@ -96,7 +105,7 @@ const useStyles = ({
         },
       };
     },
-    [size, shape, pin, appearance],
+    [size, shape, pin, appearance, disabled],
   );
 };
 
@@ -119,27 +128,35 @@ export const DotIcon = ({
   pin = 'bottom-end',
   size = 20,
   shape = 'circle',
+  disabled: disabledProp = false,
   lx = {},
   style,
   ref,
   ...rest
 }: DotIconProps) => {
-  const styles = useStyles({ size, shape, pin, appearance });
+  const disabled = useDisabledContext({
+    consumerName: 'DotIcon',
+    mergeWith: { disabled: disabledProp },
+  });
+  const styles = useStyles({ size, shape, pin, appearance, disabled });
 
   return (
-    <Box
-      ref={ref}
-      lx={lx}
-      style={StyleSheet.flatten([{ position: 'relative' }, style])}
-      {...rest}
-    >
-      <Box style={{ alignSelf: 'flex-start', position: 'relative' }}>
-        {children}
-        <Box testID='dot-icon-dot' style={styles.dot}>
-          <Icon size={dotIconSizeMap[size]} style={styles.icon} />
+    <DisabledProvider value={{ disabled: false }}>
+      <Box
+        ref={ref}
+        lx={lx}
+        style={[styles.root, style]}
+        accessibilityState={{ disabled }}
+        {...rest}
+      >
+        <Box style={{ alignSelf: 'flex-start', position: 'relative' }}>
+          {children}
+          <Box testID='dot-icon-dot' style={styles.dot}>
+            <Icon size={dotIconSizeMap[size]} style={styles.icon} />
+          </Box>
         </Box>
       </Box>
-    </Box>
+    </DisabledProvider>
   );
 };
 

package/src/lib/Components/DotIcon/types.ts

@@ -37,6 +37,12 @@ export type DotIconProps = {
    * @default 'circle'
    */
   shape?: 'square' | 'circle';
+  /**
+   * Shows a disabled appearance.
+   * @optional
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * The wrapped component (e.g. MediaImage or Spot).
    */

package/src/lib/Components/DotSymbol/DotSymbol.mdx

@@ -4,14 +4,17 @@ import { CustomTabs, Tab } from '../../../../.storybook/components';
 
 <Meta title='Communication/DotSymbol' of={DotSymbolStories} />
 
+# DotSymbol
+
 <CustomTabs>
   <Tab label="Overview">
-# DotSymbol
 
 ## Introduction
 
 DotSymbol positions a small image indicator at a configurable corner of a child element such as MediaImage or Spot. It is commonly used to show a network badge or secondary icon overlapping a primary symbol.
 
+> View in [Figma](https://www.figma.com/design/zSkvGGiqcnhywp2l3HTHxA/1.-Symbol-Library?node-id=8602-380&m=dev).
+
 ## Anatomy
 
 <Canvas of={DotSymbolStories.Base} />
@@ -46,9 +49,83 @@ The dot size is driven by the parent MediaImage or Spot size via the mapping hel
 
 <Canvas of={DotSymbolStories.SizeShowcase} />
 
+### Disabled
+
+Only set `disabled` on `DotSymbol`. The state is propagated to the child via context. Passing it to both stacks the opacity overlay.
+
+<Canvas of={DotSymbolStories.DisabledShowcase} />
+
 ## Accessibility
 
 - Always provide a meaningful `alt` prop on the DotSymbol so the indicator image is announced by screen readers.
 - The child element should carry its own accessibility label independently.
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+### Basic Usage
+
+```tsx
+import { DotSymbol, MediaImage } from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return (
+    <DotSymbol src='https://example.com/btc.png' alt='Bitcoin network'>
+      <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+    </DotSymbol>
+  );
+}
+```
+
+### Pin Placement
+
+Position the dot at any of the four corners of the child:
+
+```tsx
+<DotSymbol src='https://example.com/btc.png' alt='Bitcoin' pin='top-end'>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+</DotSymbol>
+```
+
+### Shapes
+
+Use `shape='square'` to match a square child element:
+
+```tsx
+<DotSymbol src='https://example.com/btc.png' alt='Bitcoin' shape='square'>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} shape='square' />
+</DotSymbol>
+```
+
+### Sizing
+
+The dot size is driven by the parent's size via the mapping helpers:
+
+```tsx
+import { DotSymbol, mediaImageDotSizeMap, MediaImage } from '@ledgerhq/lumen-ui-rnative';
+
+<DotSymbol
+  src='https://example.com/btc.png'
+  alt='Bitcoin'
+  size={mediaImageDotSizeMap[48]}
+>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+</DotSymbol>;
+```
+
+### Disabled State
+
+Only set `disabled` on `DotSymbol`. The state is propagated to the child via context. Passing it to both stacks the opacity overlay.
+
+```tsx
+<DotSymbol src='https://example.com/btc.png' alt='Bitcoin' disabled>
+  <MediaImage src='https://example.com/ada.png' alt='Cardano' size={48} />
+</DotSymbol>
+```
+
 </Tab>
-</CustomTabs>
+</CustomTabs>

package/src/lib/Components/DotSymbol/DotSymbol.stories.tsx

@@ -92,6 +92,23 @@ export const ShapeShowcase: Story = {
   ),
 };
 
+export const DisabledShowcase: Story = {
+  args: { src: dotSrc, alt: 'Disabled showcase' },
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's32' }}>
+      <DotSymbol src={dotSrc} pin='bottom-end' disabled>
+        <MediaImage src={parentSrc} size={48} shape='circle' />
+      </DotSymbol>
+      <DotSymbol src={dotSrc} pin='bottom-end' shape='square' disabled>
+        <MediaImage src={parentSrc} size={48} shape='square' />
+      </DotSymbol>
+      <DotSymbol src={dotSrc} pin='bottom-end' disabled>
+        <Spot appearance='icon' icon={CoinAlert} />
+      </DotSymbol>
+    </Box>
+  ),
+};
+
 export const SizeShowcase: Story = {
   args: { src: dotSrc, alt: 'Size showcase' },
   render: () => (

package/src/lib/Components/DotSymbol/DotSymbol.tsx

@@ -1,5 +1,9 @@
+import {
+  DisabledProvider,
+  useDisabledContext,
+} from '@ledgerhq/lumen-utils-shared';
 import { useEffect, useState } from 'react';
-import { Image, StyleSheet } from 'react-native';
+import { Image } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import type { MediaImageSize } from '../MediaImage';
 import type { SpotSize } from '../Spot';
@@ -65,10 +69,12 @@ const useStyles = ({
   size,
   shape,
   pin,
+  disabled,
 }: {
   size: DotSymbolSize;
   shape: 'square' | 'circle';
   pin: DotSymbolPin;
+  disabled: boolean;
 }) => {
   return useStyleSheet(
     (t) => {
@@ -78,6 +84,10 @@ const useStyles = ({
       const pinOffset = getPinOffset(pin, size);
 
       return {
+        root: {
+          position: 'relative',
+          ...(disabled && { opacity: 0.3 }),
+        },
         dot: {
           position: 'absolute',
           zIndex: 10,
@@ -96,7 +106,7 @@ const useStyles = ({
         },
       };
     },
-    [size, shape, pin],
+    [size, shape, pin, disabled],
   );
 };
 
@@ -118,42 +128,50 @@ export const DotSymbol = ({
   pin = 'bottom-end',
   size = 20,
   shape = 'circle',
+  disabled: disabledProp = false,
   lx = {},
   style,
   ref,
   ...rest
 }: DotSymbolProps) => {
-  const styles = useStyles({ size, shape, pin });
   const [error, setError] = useState(false);
+  const disabled = useDisabledContext({
+    consumerName: 'DotSymbol',
+    mergeWith: { disabled: disabledProp },
+  });
+  const styles = useStyles({ size, shape, pin, disabled });
 
   useEffect(() => {
     setError(false);
   }, [src]);
 
   return (
-    <Box
-      ref={ref}
-      lx={lx}
-      style={StyleSheet.flatten([{ position: 'relative' }, style])}
-      accessibilityRole='image'
-      accessibilityLabel={alt}
-      {...rest}
-    >
-      <Box style={{ alignSelf: 'flex-start', position: 'relative' }}>
-        {children}
-        <Box style={styles.dot}>
-          {!error && (
-            <Image
-              source={{ uri: src }}
-              style={styles.image}
-              accessible={false}
-              onError={() => setError(true)}
-              testID='dot-symbol-img'
-            />
-          )}
+    <DisabledProvider value={{ disabled: false }}>
+      <Box
+        ref={ref}
+        lx={lx}
+        style={[styles.root, style]}
+        accessibilityRole='image'
+        accessibilityLabel={alt}
+        accessibilityState={{ disabled }}
+        {...rest}
+      >
+        <Box style={{ alignSelf: 'flex-start', position: 'relative' }}>
+          {children}
+          <Box style={styles.dot}>
+            {!error && (
+              <Image
+                source={{ uri: src }}
+                style={styles.image}
+                accessible={false}
+                onError={() => setError(true)}
+                testID='dot-symbol-img'
+              />
+            )}
+          </Box>
         </Box>
       </Box>
-    </Box>
+    </DisabledProvider>
   );
 };
 

package/src/lib/Components/DotSymbol/types.ts

@@ -33,6 +33,12 @@ export type DotSymbolProps = {
    * @default 'circle'
    */
   shape?: 'square' | 'circle';
+  /**
+   * Shows a disabled appearance.
+   * @optional
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * The wrapped component (e.g. MediaImage or Spot).
    */

package/src/lib/Components/IconButton/IconButton.mdx

@@ -8,7 +8,7 @@ import { Box } from '../Utility';
 
 <Meta title='Action/IconButton' of={IconButtonStories} />
 
-# 🔘 IconButton
+# IconButton
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/InteractiveIcon/InteractiveIcon.mdx

@@ -8,7 +8,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title='Components/InteractiveIcon' of={InteractiveIconStories} />
 
-# 🎯 InteractiveIcon
+# InteractiveIcon
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/Link/Link.mdx

@@ -8,7 +8,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title='Components/Link' of={LinkStories} />
 
-# 🔗 Link
+# Link
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/MediaBanner/MediaBanner.mdx

@@ -12,7 +12,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 <Meta title='Components/MediaBanner' of={MediaBannerStories} />
 
-# 🖼️ MediaBanner
+# MediaBanner
 
 <CustomTabs>
   <Tab label="Overview">

package/src/lib/Components/MediaButton/MediaButton.mdx

@@ -32,13 +32,13 @@ Three appearances are available: `gray` (default), `transparent`, and `no-backgr
 
 <Canvas of={MediaButtonStories.SizeShowcase} />
 
-## Icon Types
+## Leading Content Shapes
 
-The `iconType` prop controls the padding scheme based on the leading icon's shape:
+The `leadingContentShape` prop controls the padding scheme based on the leading content's shape:
 
 - **`flat`**: Standard padding for interface icons (line icons without background).
 - **`rounded`**: Tighter left padding for circular icons with their own background (e.g., crypto icons).
 
-<Canvas of={MediaButtonStories.IconTypeShowcase} />
+<Canvas of={MediaButtonStories.LeadingContentShapeShowcase} />
 </Tab>
 </CustomTabs>