@ledgerhq/lumen-ui-rnative 0.1.24 → 0.1.26

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

@@ -0,0 +1,217 @@
+"use strict";
+
+import { ArrowDown, ArrowUp, Close, Link, Star } from "../../Symbols/index.js";
+import { MediaImage } from "../MediaImage/index.js";
+import { Spinner } from "../Spinner/index.js";
+import { Box } from "../Utility/index.js";
+import { DotIcon, mediaImageDotIconSizeMap } from "./DotIcon.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  component: DotIcon,
+  title: 'Communication/DotIcon',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code'
+      }
+    }
+  }
+};
+export default meta;
+const parentSrc = 'https://crypto-icons.ledger.com/ADA.png';
+export const Base = {
+  args: {
+    appearance: 'success',
+    icon: ArrowDown,
+    pin: 'bottom-end',
+    size: mediaImageDotIconSizeMap[48],
+    shape: 'circle',
+    children: /*#__PURE__*/_jsx(MediaImage, {
+      src: parentSrc,
+      alt: "Cardano",
+      size: 48,
+      shape: "circle"
+    })
+  }
+};
+export const PinShowcase = {
+  args: {
+    appearance: 'success',
+    icon: ArrowDown
+  },
+  render: () => /*#__PURE__*/_jsxs(Box, {
+    lx: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 's32'
+    },
+    children: [/*#__PURE__*/_jsx(DotIcon, {
+      appearance: "success",
+      icon: ArrowDown,
+      pin: "bottom-end",
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: parentSrc,
+        shape: "circle"
+      })
+    }), /*#__PURE__*/_jsx(DotIcon, {
+      appearance: "success",
+      icon: ArrowDown,
+      pin: "top-end",
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: parentSrc,
+        shape: "circle"
+      })
+    }), /*#__PURE__*/_jsx(DotIcon, {
+      appearance: "success",
+      icon: ArrowDown,
+      pin: "bottom-start",
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: parentSrc,
+        shape: "circle"
+      })
+    }), /*#__PURE__*/_jsx(DotIcon, {
+      appearance: "success",
+      icon: ArrowDown,
+      pin: "top-start",
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: parentSrc,
+        shape: "circle"
+      })
+    })]
+  })
+};
+export const ShapeShowcase = {
+  args: {
+    appearance: 'muted',
+    icon: ArrowDown
+  },
+  render: () => /*#__PURE__*/_jsxs(Box, {
+    lx: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 's48'
+    },
+    children: [/*#__PURE__*/_jsx(DotIcon, {
+      appearance: "muted",
+      icon: ArrowDown,
+      shape: "circle",
+      pin: "bottom-end",
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: parentSrc,
+        size: 48,
+        shape: "circle"
+      })
+    }), /*#__PURE__*/_jsx(DotIcon, {
+      appearance: "muted",
+      icon: ArrowDown,
+      shape: "square",
+      pin: "bottom-end",
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: parentSrc,
+        size: 48,
+        shape: "square"
+      })
+    })]
+  })
+};
+export const AppearanceShowcase = {
+  args: {
+    appearance: 'success',
+    icon: ArrowDown
+  },
+  render: () => /*#__PURE__*/_jsxs(Box, {
+    lx: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 's32'
+    },
+    children: [/*#__PURE__*/_jsx(DotIcon, {
+      appearance: "success",
+      icon: ArrowDown,
+      size: mediaImageDotIconSizeMap[48],
+      pin: "bottom-end",
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: parentSrc,
+        size: 48,
+        shape: "circle"
+      })
+    }), /*#__PURE__*/_jsx(DotIcon, {
+      appearance: "muted",
+      icon: ArrowUp,
+      size: mediaImageDotIconSizeMap[48],
+      pin: "bottom-end",
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: parentSrc,
+        size: 48,
+        shape: "circle"
+      })
+    }), /*#__PURE__*/_jsx(DotIcon, {
+      appearance: "error",
+      icon: Close,
+      size: mediaImageDotIconSizeMap[48],
+      pin: "bottom-end",
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: parentSrc,
+        size: 48,
+        shape: "circle"
+      })
+    })]
+  })
+};
+export const SizeShowcase = {
+  args: {
+    appearance: 'muted',
+    icon: Link
+  },
+  render: () => /*#__PURE__*/_jsxs(Box, {
+    lx: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      gap: 's24'
+    },
+    children: [/*#__PURE__*/_jsx(DotIcon, {
+      appearance: "muted",
+      icon: Link,
+      size: mediaImageDotIconSizeMap[40],
+      pin: "bottom-end",
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: parentSrc,
+        size: 40,
+        shape: "circle"
+      })
+    }), /*#__PURE__*/_jsx(DotIcon, {
+      appearance: "success",
+      icon: Star,
+      size: mediaImageDotIconSizeMap[48],
+      pin: "bottom-end",
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: parentSrc,
+        size: 48,
+        shape: "circle"
+      })
+    }), /*#__PURE__*/_jsx(DotIcon, {
+      appearance: "success",
+      icon: ArrowDown,
+      size: mediaImageDotIconSizeMap[56],
+      pin: "bottom-end",
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: parentSrc,
+        size: 56,
+        shape: "circle"
+      })
+    }), /*#__PURE__*/_jsx(DotIcon, {
+      appearance: "muted",
+      icon: Spinner,
+      size: mediaImageDotIconSizeMap[64],
+      pin: "bottom-end",
+      children: /*#__PURE__*/_jsx(MediaImage, {
+        src: parentSrc,
+        size: 64,
+        shape: "circle"
+      })
+    })]
+  })
+};
+//# sourceMappingURL=DotIcon.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ArrowDown","ArrowUp","Close","Link","Star","MediaImage","Spinner","Box","DotIcon","mediaImageDotIconSizeMap","jsx","_jsx","jsxs","_jsxs","meta","component","title","parameters","docs","source","language","format","type","parentSrc","Base","args","appearance","icon","pin","size","shape","children","src","alt","PinShowcase","render","lx","flexDirection","alignItems","gap","ShapeShowcase","AppearanceShowcase","SizeShowcase"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotIcon/DotIcon.stories.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/DotIcon/DotIcon.test.js

@@ -0,0 +1,238 @@
+"use strict";
+
+import { describe, it, expect } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { render } from '@testing-library/react-native';
+import { createRef } from 'react';
+import { Text } from 'react-native';
+import { ArrowDown } from "../../Symbols/index.js";
+import { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
+import { DotIcon } from "./DotIcon.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  colors,
+  sizes,
+  borderRadius
+} = ledgerLiveThemes.dark;
+const TestWrapper = ({
+  children
+}) => /*#__PURE__*/_jsx(ThemeProvider, {
+  themes: ledgerLiveThemes,
+  colorScheme: "dark",
+  locale: "en",
+  children: children
+});
+describe('DotIcon Component', () => {
+  describe('Rendering', () => {
+    it('should render children', () => {
+      const {
+        getByText
+      } = render(/*#__PURE__*/_jsx(TestWrapper, {
+        children: /*#__PURE__*/_jsx(DotIcon, {
+          testID: "dot-icon",
+          appearance: "success",
+          icon: ArrowDown,
+          children: /*#__PURE__*/_jsx(Text, {
+            children: "Child"
+          })
+        })
+      }));
+      expect(getByText('Child')).toBeTruthy();
+    });
+    it('should render without children', () => {
+      const {
+        getByTestId
+      } = render(/*#__PURE__*/_jsx(TestWrapper, {
+        children: /*#__PURE__*/_jsx(DotIcon, {
+          testID: "dot-icon",
+          appearance: "success",
+          icon: ArrowDown
+        })
+      }));
+      expect(getByTestId('dot-icon')).toBeTruthy();
+    });
+    it('should have correct displayName', () => {
+      expect(DotIcon.displayName).toBe('DotIcon');
+    });
+  });
+  describe('Appearances', () => {
+    it.each([{
+      appearance: 'success',
+      expectedColor: colors.bg.successStrong
+    }, {
+      appearance: 'muted',
+      expectedColor: colors.bg.mutedStrong
+    }, {
+      appearance: 'error',
+      expectedColor: colors.bg.errorStrong
+    }])('should apply $appearance background color to the dot', ({
+      appearance,
+      expectedColor
+    }) => {
+      const {
+        getByTestId
+      } = render(/*#__PURE__*/_jsx(TestWrapper, {
+        children: /*#__PURE__*/_jsx(DotIcon, {
+          testID: "dot-icon",
+          appearance: appearance,
+          icon: ArrowDown
+        })
+      }));
+      const dotView = getByTestId('dot-icon-dot');
+      expect(dotView.props.style.backgroundColor).toBe(expectedColor);
+    });
+  });
+  describe('Sizes', () => {
+    it.each([{
+      size: 16,
+      expectedSize: sizes.s16
+    }, {
+      size: 20,
+      expectedSize: sizes.s20
+    }, {
+      size: 24,
+      expectedSize: sizes.s24
+    }])('should apply correct width and height for size $size', ({
+      size,
+      expectedSize
+    }) => {
+      const {
+        getByTestId
+      } = render(/*#__PURE__*/_jsx(TestWrapper, {
+        children: /*#__PURE__*/_jsx(DotIcon, {
+          testID: "dot-icon",
+          appearance: "success",
+          icon: ArrowDown,
+          size: size
+        })
+      }));
+      const dotView = getByTestId('dot-icon-dot');
+      expect(dotView.props.style.width).toBe(expectedSize);
+      expect(dotView.props.style.height).toBe(expectedSize);
+    });
+  });
+  describe('Pins', () => {
+    it.each([{
+      pin: 'bottom-end',
+      verticalKey: 'bottom',
+      horizontalKey: 'right'
+    }, {
+      pin: 'bottom-start',
+      verticalKey: 'bottom',
+      horizontalKey: 'left'
+    }, {
+      pin: 'top-end',
+      verticalKey: 'top',
+      horizontalKey: 'right'
+    }, {
+      pin: 'top-start',
+      verticalKey: 'top',
+      horizontalKey: 'left'
+    }])('should position dot at $pin', ({
+      pin,
+      verticalKey,
+      horizontalKey
+    }) => {
+      const {
+        getByTestId
+      } = render(/*#__PURE__*/_jsx(TestWrapper, {
+        children: /*#__PURE__*/_jsx(DotIcon, {
+          testID: "dot-icon",
+          appearance: "success",
+          icon: ArrowDown,
+          pin: pin
+        })
+      }));
+      const dotView = getByTestId('dot-icon-dot');
+      expect(dotView.props.style[verticalKey]).toBe(-3);
+      expect(dotView.props.style[horizontalKey]).toBe(-3);
+    });
+  });
+  describe('Shapes', () => {
+    it('should apply full border radius for circle shape', () => {
+      const {
+        getByTestId
+      } = render(/*#__PURE__*/_jsx(TestWrapper, {
+        children: /*#__PURE__*/_jsx(DotIcon, {
+          testID: "dot-icon",
+          appearance: "success",
+          icon: ArrowDown,
+          shape: "circle"
+        })
+      }));
+      const dotView = getByTestId('dot-icon-dot');
+      expect(dotView.props.style.borderRadius).toBe(borderRadius.full);
+    });
+    it.each([{
+      size: 16,
+      expectedRadius: 5
+    }, {
+      size: 20,
+      expectedRadius: 6
+    }, {
+      size: 24,
+      expectedRadius: 8
+    }])('should apply correct border radius for square shape at size $size', ({
+      size,
+      expectedRadius
+    }) => {
+      const {
+        getByTestId
+      } = render(/*#__PURE__*/_jsx(TestWrapper, {
+        children: /*#__PURE__*/_jsx(DotIcon, {
+          testID: "dot-icon",
+          appearance: "success",
+          icon: ArrowDown,
+          shape: "square",
+          size: size
+        })
+      }));
+      const dotView = getByTestId('dot-icon-dot');
+      expect(dotView.props.style.borderRadius).toBe(expectedRadius);
+    });
+  });
+  describe('Ref forwarding', () => {
+    it('should forward ref to the root element', () => {
+      const ref = /*#__PURE__*/createRef();
+      render(/*#__PURE__*/_jsx(TestWrapper, {
+        children: /*#__PURE__*/_jsx(DotIcon, {
+          ref: ref,
+          appearance: "success",
+          icon: ArrowDown
+        })
+      }));
+      expect(ref.current).not.toBeNull();
+    });
+  });
+  describe('Styling', () => {
+    it('should apply custom styles', () => {
+      const {
+        getByTestId
+      } = render(/*#__PURE__*/_jsx(TestWrapper, {
+        children: /*#__PURE__*/_jsx(DotIcon, {
+          testID: "dot-icon",
+          appearance: "success",
+          icon: ArrowDown,
+          style: {
+            marginTop: 10
+          }
+        })
+      }));
+      const root = getByTestId('dot-icon');
+      expect(root.props.style.marginTop).toBe(10);
+    });
+    it('should pass additional props', () => {
+      const {
+        getByTestId
+      } = render(/*#__PURE__*/_jsx(TestWrapper, {
+        children: /*#__PURE__*/_jsx(DotIcon, {
+          testID: "custom-dot",
+          appearance: "success",
+          icon: ArrowDown
+        })
+      }));
+      expect(getByTestId('custom-dot')).toBeTruthy();
+    });
+  });
+});
+//# sourceMappingURL=DotIcon.test.js.map

package/dist/module/lib/Components/DotIcon/DotIcon.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["describe","it","expect","ledgerLiveThemes","render","createRef","Text","ArrowDown","ThemeProvider","DotIcon","jsx","_jsx","colors","sizes","borderRadius","dark","TestWrapper","children","themes","colorScheme","locale","getByText","testID","appearance","icon","toBeTruthy","getByTestId","displayName","toBe","each","expectedColor","bg","successStrong","mutedStrong","errorStrong","dotView","props","style","backgroundColor","size","expectedSize","s16","s20","s24","width","height","pin","verticalKey","horizontalKey","shape","full","expectedRadius","ref","current","not","toBeNull","marginTop","root"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotIcon/DotIcon.test.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/DotIcon/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export { DotIcon, mediaImageDotIconSizeMap, spotDotIconSizeMap } from "./DotIcon.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/module/lib/Components/DotIcon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DotIcon","mediaImageDotIconSizeMap","spotDotIconSizeMap"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotIcon/index.ts"],"mappings":";;AAAA,SACEA,OAAO,EACPC,wBAAwB,EACxBC,kBAAkB,QACb,cAAW;AAClB,cAAc,YAAS","ignoreList":[]}

package/dist/module/lib/Components/DotIcon/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/dist/module/lib/Components/DotIcon/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Components/DotIcon/types.ts"],"mappings":"","ignoreList":[]}

package/dist/module/lib/Components/DotIndicator/DotIndicator.js

@@ -0,0 +1,89 @@
+"use strict";
+
+import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
+import { StyleSheet } from 'react-native';
+import { useStyleSheet } from "../../../styles/index.js";
+import { Box } from "../Utility/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function DotIndicator({
+  size = 'sm',
+  appearance = 'base',
+  disabled: disabledProp = false,
+  lx = {},
+  style,
+  children,
+  accessibilityLabel,
+  ref,
+  ...props
+}) {
+  const disabled = useDisabledContext({
+    consumerName: 'DotIndicator',
+    mergeWith: {
+      disabled: disabledProp
+    }
+  });
+  const styles = useStyles({
+    size,
+    appearance,
+    disabled,
+    pinned: !!children
+  });
+  return /*#__PURE__*/_jsxs(Box, {
+    ref: ref,
+    lx: lx,
+    style: StyleSheet.flatten([children ? {
+      position: 'relative'
+    } : undefined, style]),
+    ...props,
+    children: [/*#__PURE__*/_jsx(Box, {
+      style: styles.container,
+      accessibilityRole: "image",
+      accessibilityLabel: accessibilityLabel,
+      accessible: !!accessibilityLabel,
+      pointerEvents: "none"
+    }), children]
+  });
+}
+const useStyles = ({
+  size,
+  appearance,
+  disabled,
+  pinned
+}) => {
+  return useStyleSheet(t => {
+    const sizeMap = {
+      xs: t.sizes.s10,
+      sm: t.sizes.s12,
+      md: t.sizes.s16
+    };
+    const bgColorMap = {
+      base: {
+        backgroundColor: t.colors.bg.interactive
+      },
+      red: {
+        backgroundColor: t.colors.bg.errorStrong
+      }
+    };
+    return {
+      container: {
+        height: sizeMap[size],
+        aspectRatio: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: t.borderRadius.full,
+        ...(pinned && {
+          position: 'absolute',
+          top: t.spacings.s0,
+          right: t.spacings.s0,
+          zIndex: 1
+        }),
+        ...(disabled ? {
+          backgroundColor: t.colors.bg.disabled
+        } : {
+          ...bgColorMap[appearance]
+        })
+      }
+    };
+  }, [size, appearance, disabled, pinned]);
+};
+//# sourceMappingURL=DotIndicator.js.map

package/dist/module/lib/Components/DotIndicator/DotIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useDisabledContext","StyleSheet","useStyleSheet","Box","jsx","_jsx","jsxs","_jsxs","DotIndicator","size","appearance","disabled","disabledProp","lx","style","children","accessibilityLabel","ref","props","consumerName","mergeWith","styles","useStyles","pinned","flatten","position","undefined","container","accessibilityRole","accessible","pointerEvents","t","sizeMap","xs","sizes","s10","sm","s12","md","s16","bgColorMap","base","backgroundColor","colors","bg","interactive","red","errorStrong","height","aspectRatio","alignItems","justifyContent","borderRadius","full","top","spacings","s0","right","zIndex"],"sourceRoot":"../../../../../src","sources":["lib/Components/DotIndicator/DotIndicator.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,82 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as DotIndicatorStories from './DotIndicator.stories';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+
+<Meta title='Communication/DotIndicator' of={DotIndicatorStories} />
+
+# DotIndicator
+
+<CustomTabs>
+  <Tab label="Overview">
+
+    ## Introduction
+
+    DotIndicator is a small colored dot used to signal status or draw attention without displaying a number. It supports two appearances (`base` and `red`) and can be pinned to the top-right of a child element.
+
+    > View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=16470-25597).
+
+    ## Properties
+
+    <Canvas of={DotIndicatorStories.Base} />
+    <Controls of={DotIndicatorStories.Base} />
+
+    ## Sizes
+
+    DotIndicator comes in three sizes:
+
+    - **xs** - compact dot for tight layouts.
+    - **sm** (default) - standard dot for most use cases.
+    - **md** - larger dot for prominent indicators.
+
+    <Canvas of={DotIndicatorStories.SizeShowcase} />
+
+    ## Appearances
+
+    Two color schemes are available:
+
+    - **base** (default) - neutral dot for general-purpose indicators.
+    - **red** - high-visibility dot, typically used for unread or alert states.
+
+    <Canvas of={DotIndicatorStories.AppearanceShowcase} />
+
+    ## With Children
+
+    When wrapping a child element, the dot pins itself to the top-right corner.
+
+    <Canvas of={DotIndicatorStories.WithChildren} />
+
+  </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 { DotIndicator } from '@ledgerhq/lumen-ui-rnative';
+
+    function MyComponent() {
+      return <DotIndicator appearance="red" />;
+    }
+    ```
+
+    ### Pinned to a child
+
+    ```tsx
+    <DotIndicator appearance="red">
+      <Button size="sm">Submit</Button>
+    </DotIndicator>
+    ```
+
+    ### Accessibility
+
+    Pass `accessibilityLabel` to provide screen reader context:
+
+    ```tsx
+    <DotIndicator accessibilityLabel="New notifications" />
+    ```
+
+  </Tab>
+</CustomTabs>