@ledgerhq/lumen-ui-rnative 0.1.36 → 0.1.38

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';
@@ -13,12 +16,14 @@ const dotIconSizeMap: Record<DotIconSize, IconSize> = {
   16: 12,
   20: 16,
   24: 16,
+  32: 20,
 };
 
 const dotSquareRadiusMap: Record<DotIconSize, number> = {
   16: 5,
   20: 6,
   24: 8,
+  32: 10,
 };
 
 export const mediaImageDotIconSizeMap = {
@@ -26,13 +31,14 @@ export const mediaImageDotIconSizeMap = {
   48: 20,
   56: 24,
   64: 24,
+  72: 32,
 } as const satisfies Record<number, DotIconSize>;
 
 export const spotDotIconSizeMap = {
   40: 16,
   48: 20,
   56: 24,
-  72: 24,
+  72: 32,
 } as const satisfies Record<number, DotIconSize>;
 
 const pinAxisMap: Record<DotIconPin, [vertical: string, horizontal: string]> = {
@@ -63,11 +69,13 @@ const useStyles = ({
   shape,
   pin,
   appearance,
+  disabled,
 }: {
   size: DotIconSize;
   shape: 'square' | 'circle';
   pin: DotIconPin;
   appearance: DotIconAppearance;
+  disabled: boolean;
 }) => {
   return useStyleSheet(
     (t) => {
@@ -77,6 +85,10 @@ const useStyles = ({
       const pinOffset = getPinOffset(pin);
 
       return {
+        root: {
+          position: 'relative',
+          ...(disabled && { opacity: 0.3 }),
+        },
         dot: {
           position: 'absolute',
           zIndex: 10,
@@ -96,7 +108,7 @@ const useStyles = ({
         },
       };
     },
-    [size, shape, pin, appearance],
+    [size, shape, pin, appearance, disabled],
   );
 };
 
@@ -119,27 +131,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

@@ -3,7 +3,7 @@ import type { StyleProp, TextStyle } from 'react-native';
 import type { StyledViewProps } from '../../../styles';
 import type { IconSize } from '../Icon';
 
-export type DotIconSize = 16 | 20 | 24;
+export type DotIconSize = 16 | 20 | 24 | 32;
 
 export type DotIconPin =
   | 'top-start'
@@ -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/DotIndicator/DotIndicator.mdx

@@ -24,10 +24,10 @@ import { CustomTabs, Tab } from '../../../../.storybook/components';
 
     DotIndicator comes in four sizes:
 
-    - **xs** - compact dot for tight layouts.
-    - **sm** (default) - standard dot for most use cases.
-    - **md** - medium dot for prominent indicators.
-    - **lg** - large dot for maximum visibility.
+    - **sm** - compact dot for tight layouts.
+    - **md** (default) - standard dot for most use cases.
+    - **lg** - large dot for prominent indicators.
+    - **xl** - extra-large dot for maximum visibility.
 
     <Canvas of={DotIndicatorStories.SizeShowcase} />
 

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

@@ -21,7 +21,7 @@ const meta = {
   argTypes: {
     size: {
       control: 'radio',
-      options: ['xs', 'sm', 'md', 'lg'],
+      options: ['sm', 'md', 'lg', 'xl'],
     },
     appearance: {
       control: 'radio',
@@ -42,10 +42,10 @@ export const Base: Story = {
 export const SizeShowcase: Story = {
   render: () => (
     <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's12' }}>
-      <DotIndicator size='xs' />
       <DotIndicator size='sm' />
       <DotIndicator size='md' />
       <DotIndicator size='lg' />
+      <DotIndicator size='xl' />
     </Box>
   ),
 };

package/src/lib/Components/DotIndicator/DotIndicator.test.tsx

@@ -77,10 +77,10 @@ describe('DotIndicator', () => {
     expect(ref.current).toBeTruthy();
   });
 
-  it('should render in xs size', () => {
+  it('should render in sm size', () => {
     const { toJSON } = render(
       <TestWrapper>
-        <DotIndicator size='xs' />
+        <DotIndicator size='sm' />
       </TestWrapper>,
     );
 
@@ -107,6 +107,16 @@ describe('DotIndicator', () => {
     expect(toJSON()).toBeTruthy();
   });
 
+  it('should render in xl size', () => {
+    const { toJSON } = render(
+      <TestWrapper>
+        <DotIndicator size='xl' />
+      </TestWrapper>,
+    );
+
+    expect(toJSON()).toBeTruthy();
+  });
+
   it('should render with red appearance', () => {
     const { toJSON } = render(
       <TestWrapper>

package/src/lib/Components/DotIndicator/DotIndicator.tsx

@@ -5,7 +5,7 @@ import { Box } from '../Utility';
 import type { DotIndicatorProps } from './types';
 
 export function DotIndicator({
-  size = 'sm',
+  size = 'md',
   appearance = 'base',
   disabled: disabledProp = false,
   lx = {},
@@ -63,10 +63,10 @@ const useStyles = ({
   return useStyleSheet(
     (t) => {
       const sizeMap = {
-        xs: t.sizes.s10,
-        sm: t.sizes.s12,
-        md: t.sizes.s14,
-        lg: t.sizes.s16,
+        sm: t.sizes.s6,
+        md: t.sizes.s8,
+        lg: t.sizes.s10,
+        xl: t.sizes.s12,
       };
 
       const bgColorMap = {

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

@@ -4,9 +4,9 @@ import type { StyledViewProps } from '../../../styles';
 export type DotIndicatorProps = {
   /**
    * The size of the dot indicator.
-   * @default sm
+   * @default md
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg';
+  size?: 'sm' | 'md' | 'lg' | 'xl';
   /**
    * The appearance of the dot indicator.
    * @default base

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: () => (
@@ -146,6 +163,13 @@ export const SizeShowcase: Story = {
         >
           <MediaImage src={parentSrc} size={64} shape='circle' />
         </DotSymbol>
+        <DotSymbol
+          src={dotSrc}
+          size={mediaImageDotSizeMap[72]}
+          pin='bottom-end'
+        >
+          <MediaImage src={parentSrc} size={72} shape='circle' />
+        </DotSymbol>
       </Box>
       <Box lx={{ flexDirection: 'row', alignItems: 'flex-end', gap: 's24' }}>
         <DotSymbol
@@ -204,6 +228,14 @@ export const SizeShowcase: Story = {
         >
           <MediaImage src={parentSrc} size={64} shape='square' />
         </DotSymbol>
+        <DotSymbol
+          shape='square'
+          src={dotSrc}
+          size={mediaImageDotSizeMap[72]}
+          pin='bottom-end'
+        >
+          <MediaImage src={parentSrc} size={72} shape='square' />
+        </DotSymbol>
       </Box>
     </Box>
   ),

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';
@@ -13,6 +17,7 @@ const dotSquareRadiusMap: Record<DotSymbolSize, number> = {
   16: 5,
   20: 6,
   24: 8,
+  32: 10,
 };
 
 const offsetBySize: Record<DotSymbolSize, number> = {
@@ -22,6 +27,7 @@ const offsetBySize: Record<DotSymbolSize, number> = {
   16: -3,
   20: -3,
   24: -3,
+  32: -3,
 };
 
 export const mediaImageDotSizeMap: Record<MediaImageSize, DotSymbolSize> = {
@@ -34,6 +40,7 @@ export const mediaImageDotSizeMap: Record<MediaImageSize, DotSymbolSize> = {
   48: 20,
   56: 24,
   64: 24,
+  72: 32,
 };
 
 export const spotDotSizeMap: Record<SpotSize, DotSymbolSize> = {
@@ -41,7 +48,7 @@ export const spotDotSizeMap: Record<SpotSize, DotSymbolSize> = {
   40: 16,
   48: 20,
   56: 24,
-  72: 24,
+  72: 32,
 };
 
 const pinAxisMap: Record<DotSymbolPin, [vertical: string, horizontal: string]> =
@@ -65,10 +72,12 @@ const useStyles = ({
   size,
   shape,
   pin,
+  disabled,
 }: {
   size: DotSymbolSize;
   shape: 'square' | 'circle';
   pin: DotSymbolPin;
+  disabled: boolean;
 }) => {
   return useStyleSheet(
     (t) => {
@@ -78,6 +87,10 @@ const useStyles = ({
       const pinOffset = getPinOffset(pin, size);
 
       return {
+        root: {
+          position: 'relative',
+          ...(disabled && { opacity: 0.3 }),
+        },
         dot: {
           position: 'absolute',
           zIndex: 10,
@@ -96,7 +109,7 @@ const useStyles = ({
         },
       };
     },
-    [size, shape, pin],
+    [size, shape, pin, disabled],
   );
 };
 
@@ -118,42 +131,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

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import type { StyledViewProps } from '../../../styles';
 
-export type DotSymbolSize = 8 | 10 | 12 | 16 | 20 | 24;
+export type DotSymbolSize = 8 | 10 | 12 | 16 | 20 | 24 | 32;
 
 export type DotSymbolPin =
   | 'top-start'
@@ -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/Label/Label.tsx

@@ -19,7 +19,7 @@ const useStyles = ({ disabled }: { disabled: boolean }) => {
  * A label that should be used to describe a form field.
  *
  * Either choices fields like checkbox, switch or radio.
- * Or text fields like input, textarea, select, etc.
+ * Or text fields like input, textarea, option list, etc.
  */
 export const Label = ({
   style,

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

@@ -11,11 +11,11 @@ import * as MediaButtonStories from './MediaButton.stories';
 
 ## Introduction
 
-A specialized media button designed exclusively for select and dropdown patterns. It displays a label with an optional leading icon and a permanent trailing chevron indicator.
+A specialized media button designed exclusively for option list and dropdown patterns. It displays a label with an optional leading icon and a permanent trailing chevron indicator.
 
 > View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=6389-45680&m=dev).
 
-> **Important**: This component should only be used as a trigger inside a Select or dropdown. For standalone actions, use [Button](/docs/action-button--docs) or [IconButton](/docs/action-iconbutton--docs) instead.
+> **Important**: This component should only be used as a trigger inside an OptionList or dropdown. For standalone actions, use [Button](/docs/action-button--docs) or [IconButton](/docs/action-iconbutton--docs) instead.
 
 ## Properties
 
@@ -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>