@ledgerhq/lumen-ui-rnative 0.1.11 → 0.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/module/i18n/locales/de.json +3 -0
- package/dist/module/i18n/locales/en.json +3 -0
- package/dist/module/i18n/locales/es.json +3 -0
- package/dist/module/i18n/locales/fr.json +3 -0
- package/dist/module/i18n/locales/ja.json +3 -0
- package/dist/module/i18n/locales/ko.json +3 -0
- package/dist/module/i18n/locales/pt.json +3 -0
- package/dist/module/i18n/locales/ru.json +3 -0
- package/dist/module/i18n/locales/th.json +3 -0
- package/dist/module/i18n/locales/tr.json +3 -0
- package/dist/module/i18n/locales/zh.json +3 -0
- package/dist/module/lib/Animations/Pulse/Pulse.js +1 -1
- package/dist/module/lib/Animations/Spin/Spin.js +1 -1
- package/dist/module/lib/Components/AmountDisplay/AmountDisplay.js +21 -21
- package/dist/module/lib/Components/AmountDisplay/AmountDisplay.js.map +1 -1
- package/dist/module/lib/Components/AmountInput/AmountInput.js +3 -3
- package/dist/module/lib/Components/BaseInput/BaseInput.js +1 -1
- package/dist/module/lib/Components/BottomSheet/BottomSheet.stories.js.map +1 -1
- package/dist/module/lib/Components/Card/Card.js +39 -29
- package/dist/module/lib/Components/Card/Card.js.map +1 -1
- package/dist/module/lib/Components/InteractiveIcon/InteractiveIcon.js +22 -2
- package/dist/module/lib/Components/InteractiveIcon/InteractiveIcon.js.map +1 -1
- package/dist/module/lib/Components/Link/Link.mdx +1 -0
- package/dist/module/lib/Components/MediaBanner/MediaBanner.js +158 -0
- package/dist/module/lib/Components/MediaBanner/MediaBanner.js.map +1 -0
- package/dist/module/lib/Components/MediaBanner/MediaBanner.mdx +150 -0
- package/dist/module/lib/Components/MediaBanner/MediaBanner.stories.js +135 -0
- package/dist/module/lib/Components/MediaBanner/MediaBanner.stories.js.map +1 -0
- package/dist/module/lib/Components/MediaBanner/MediaBanner.test.js +83 -0
- package/dist/module/lib/Components/MediaBanner/MediaBanner.test.js.map +1 -0
- package/dist/module/lib/Components/MediaBanner/index.js +5 -0
- package/dist/module/lib/Components/MediaBanner/index.js.map +1 -0
- package/dist/module/lib/Components/MediaBanner/types.js +4 -0
- package/dist/module/lib/Components/MediaBanner/types.js.map +1 -0
- package/dist/module/lib/Components/MediaCard/MediaCard.js +183 -0
- package/dist/module/lib/Components/MediaCard/MediaCard.js.map +1 -0
- package/dist/module/lib/Components/MediaCard/MediaCard.mdx +111 -0
- package/dist/module/lib/Components/MediaCard/MediaCard.stories.js +199 -0
- package/dist/module/lib/Components/MediaCard/MediaCard.stories.js.map +1 -0
- package/dist/module/lib/Components/MediaCard/MediaCard.test.js +140 -0
- package/dist/module/lib/Components/MediaCard/MediaCard.test.js.map +1 -0
- package/dist/module/lib/Components/MediaCard/index.js +5 -0
- package/dist/module/lib/Components/MediaCard/index.js.map +1 -0
- package/dist/module/lib/Components/MediaCard/types.js +4 -0
- package/dist/module/lib/Components/MediaCard/types.js.map +1 -0
- package/dist/module/lib/Components/PageIndicator/PageIndicator.js +2 -2
- package/dist/module/lib/Components/SegmentedControl/usePillLayout.js +1 -1
- package/dist/module/lib/Components/Stepper/Stepper.js +1 -1
- package/dist/module/lib/Components/Switch/BaseSwitch.js +1 -1
- package/dist/module/lib/Components/TabBar/TabBar.js +4 -4
- package/dist/module/lib/Components/ThemeProvider/ThemeProvider.test.js +22 -20
- package/dist/module/lib/Components/ThemeProvider/ThemeProvider.test.js.map +1 -1
- package/dist/module/lib/Components/TriggerButton/TriggerButton.js +197 -0
- package/dist/module/lib/Components/TriggerButton/TriggerButton.js.map +1 -0
- package/dist/module/lib/Components/TriggerButton/TriggerButton.mdx +44 -0
- package/dist/module/lib/Components/TriggerButton/TriggerButton.stories.js +170 -0
- package/dist/module/lib/Components/TriggerButton/TriggerButton.stories.js.map +1 -0
- package/dist/module/lib/Components/TriggerButton/TriggerButton.test.js +146 -0
- package/dist/module/lib/Components/TriggerButton/TriggerButton.test.js.map +1 -0
- package/dist/module/lib/Components/TriggerButton/index.js +5 -0
- package/dist/module/lib/Components/TriggerButton/index.js.map +1 -0
- package/dist/module/lib/Components/TriggerButton/types.js +4 -0
- package/dist/module/lib/Components/TriggerButton/types.js.map +1 -0
- package/dist/module/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.js.map +1 -1
- package/dist/module/lib/Components/index.js +3 -0
- package/dist/module/lib/Components/index.js.map +1 -1
- package/dist/module/lib/Symbols/Icons/NanoGen5.js +49 -0
- package/dist/module/lib/Symbols/Icons/NanoGen5.js.map +1 -0
- package/dist/module/lib/Symbols/index.js +1 -0
- package/dist/module/lib/Symbols/index.js.map +1 -1
- package/dist/typescript/src/lib/Components/Card/Card.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/InteractiveIcon/InteractiveIcon.d.ts +1 -1
- package/dist/typescript/src/lib/Components/InteractiveIcon/InteractiveIcon.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/InteractiveIcon/types.d.ts +8 -0
- package/dist/typescript/src/lib/Components/InteractiveIcon/types.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/MediaBanner/MediaBanner.d.ts +16 -0
- package/dist/typescript/src/lib/Components/MediaBanner/MediaBanner.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/MediaBanner/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/MediaBanner/index.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/MediaBanner/types.d.ts +42 -0
- package/dist/typescript/src/lib/Components/MediaBanner/types.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/MediaCard/MediaCard.d.ts +32 -0
- package/dist/typescript/src/lib/Components/MediaCard/MediaCard.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/MediaCard/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/MediaCard/index.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/MediaCard/types.d.ts +38 -0
- package/dist/typescript/src/lib/Components/MediaCard/types.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/TriggerButton/TriggerButton.d.ts +26 -0
- package/dist/typescript/src/lib/Components/TriggerButton/TriggerButton.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/TriggerButton/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/TriggerButton/index.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/TriggerButton/types.d.ts +38 -0
- package/dist/typescript/src/lib/Components/TriggerButton/types.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/index.d.ts.map +1 -1
- package/dist/typescript/src/lib/Symbols/Icons/NanoGen5.d.ts +35 -0
- package/dist/typescript/src/lib/Symbols/Icons/NanoGen5.d.ts.map +1 -0
- package/dist/typescript/src/lib/Symbols/index.d.ts +1 -0
- package/dist/typescript/src/lib/Symbols/index.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/i18n/locales/de.json +3 -0
- package/src/i18n/locales/en.json +3 -0
- package/src/i18n/locales/es.json +3 -0
- package/src/i18n/locales/fr.json +3 -0
- package/src/i18n/locales/ja.json +3 -0
- package/src/i18n/locales/ko.json +3 -0
- package/src/i18n/locales/pt.json +3 -0
- package/src/i18n/locales/ru.json +3 -0
- package/src/i18n/locales/th.json +3 -0
- package/src/i18n/locales/tr.json +3 -0
- package/src/i18n/locales/zh.json +3 -0
- package/src/lib/Components/AmountDisplay/AmountDisplay.tsx +20 -20
- package/src/lib/Components/BottomSheet/BottomSheet.stories.tsx +9 -9
- package/src/lib/Components/Card/Card.tsx +38 -33
- package/src/lib/Components/InteractiveIcon/InteractiveIcon.tsx +26 -4
- package/src/lib/Components/InteractiveIcon/types.ts +8 -0
- package/src/lib/Components/Link/Link.mdx +1 -0
- package/src/lib/Components/MediaBanner/MediaBanner.mdx +150 -0
- package/src/lib/Components/MediaBanner/MediaBanner.stories.tsx +143 -0
- package/src/lib/Components/MediaBanner/MediaBanner.test.tsx +77 -0
- package/src/lib/Components/MediaBanner/MediaBanner.tsx +172 -0
- package/src/lib/Components/MediaBanner/index.ts +2 -0
- package/src/lib/Components/MediaBanner/types.ts +44 -0
- package/src/lib/Components/MediaCard/MediaCard.mdx +111 -0
- package/src/lib/Components/MediaCard/MediaCard.stories.tsx +190 -0
- package/src/lib/Components/MediaCard/MediaCard.test.tsx +125 -0
- package/src/lib/Components/MediaCard/MediaCard.tsx +203 -0
- package/src/lib/Components/MediaCard/index.ts +2 -0
- package/src/lib/Components/MediaCard/types.ts +39 -0
- package/src/lib/Components/ThemeProvider/ThemeProvider.test.tsx +16 -18
- package/src/lib/Components/TriggerButton/TriggerButton.mdx +44 -0
- package/src/lib/Components/TriggerButton/TriggerButton.stories.tsx +132 -0
- package/src/lib/Components/TriggerButton/TriggerButton.test.tsx +157 -0
- package/src/lib/Components/TriggerButton/TriggerButton.tsx +228 -0
- package/src/lib/Components/TriggerButton/index.ts +2 -0
- package/src/lib/Components/TriggerButton/types.ts +38 -0
- package/src/lib/Components/Utility/Gradient/RadialGradient/RadialGradient.stories.tsx +1 -1
- package/src/lib/Components/index.ts +3 -0
- package/src/lib/Symbols/Icons/NanoGen5.tsx +44 -0
- package/src/lib/Symbols/index.ts +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useDisabledContext","Children","isValidElement","StyleSheet","View","useStyleSheet","InjectStylesIntoChildren","Pressable","HIT_SLOP_MAP","jsx","_jsx","useStyles","iconType","pressed","disabled","t","backgroundStyle","filled","backgroundColor","colors","bg","base","stroked","baseTransparent","
|
|
1
|
+
{"version":3,"names":["useDisabledContext","Children","isValidElement","StyleSheet","View","useStyleSheet","InjectStylesIntoChildren","Pressable","HIT_SLOP_MAP","jsx","_jsx","useStyles","iconType","appearance","pressed","disabled","t","backgroundStyle","filled","backgroundColor","colors","bg","base","stroked","baseTransparent","appearanceColors","default","text","basePressed","muted","mutedPressed","white","whitePressed","colorSet","container","flatten","borderRadius","full","baseTransparentPressed","icon","color","InteractiveIcon","children","disabledProp","hitSlop","hitSlopProp","hitSlopType","style","lx","props","consumerName","mergeWith","child","only","iconSize","size","resolvedHitSlop","alignItems","justifyContent","accessibilityRole","accessibilityState","InteractiveIconContent","styles","displayName"],"sourceRoot":"../../../../../src","sources":["lib/Components/InteractiveIcon/InteractiveIcon.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
|
|
2
2
|
import * as LinkStories from './Link.stories';
|
|
3
3
|
import { Link } from './Link';
|
|
4
|
+
import { Box } from '../Utility';
|
|
4
5
|
import { CustomTabs, Tab } from '../../../../.storybook/components';
|
|
5
6
|
import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
|
|
6
7
|
import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useEffect, useState } from 'react';
|
|
4
|
+
import { Image, StyleSheet } from 'react-native';
|
|
5
|
+
import { useCommonTranslation } from "../../../i18n/index.js";
|
|
6
|
+
import { useStyleSheet, useTheme } from "../../../styles/index.js";
|
|
7
|
+
import { Close } from "../../Symbols/index.js";
|
|
8
|
+
import { InteractiveIcon } from "../InteractiveIcon/index.js";
|
|
9
|
+
import { Box, LinearGradient, Pressable, Text } from "../Utility/index.js";
|
|
10
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
|
+
/**
|
|
12
|
+
* A promotional banner with a background image, title, description, and an optional close button.
|
|
13
|
+
*
|
|
14
|
+
* @see {@link https://ldls.vercel.app/?path=/docs/communication-mediabanner--docs Storybook}
|
|
15
|
+
*/
|
|
16
|
+
export function MediaBanner({
|
|
17
|
+
lx,
|
|
18
|
+
style,
|
|
19
|
+
imageUrl,
|
|
20
|
+
onClose,
|
|
21
|
+
closeAccessibilityLabel,
|
|
22
|
+
children,
|
|
23
|
+
...props
|
|
24
|
+
}) {
|
|
25
|
+
const {
|
|
26
|
+
t: translate
|
|
27
|
+
} = useCommonTranslation();
|
|
28
|
+
const {
|
|
29
|
+
theme: t
|
|
30
|
+
} = useTheme();
|
|
31
|
+
const [imageLoadError, setImageLoadError] = useState(false);
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
setImageLoadError(false);
|
|
34
|
+
}, [imageUrl]);
|
|
35
|
+
const showImage = imageUrl && !imageLoadError;
|
|
36
|
+
const styles = useStyleSheet(t => ({
|
|
37
|
+
container: {
|
|
38
|
+
backgroundColor: t.colors.bg.surface,
|
|
39
|
+
borderRadius: t.borderRadius.md,
|
|
40
|
+
overflow: 'hidden',
|
|
41
|
+
flexDirection: 'row',
|
|
42
|
+
height: t.sizes.s72
|
|
43
|
+
},
|
|
44
|
+
contentWrapper: {
|
|
45
|
+
flex: 1,
|
|
46
|
+
overflow: 'hidden',
|
|
47
|
+
justifyContent: 'center',
|
|
48
|
+
paddingHorizontal: t.spacings.s12,
|
|
49
|
+
paddingVertical: t.spacings.s2
|
|
50
|
+
},
|
|
51
|
+
contentContainer: {
|
|
52
|
+
paddingVertical: t.spacings.s12,
|
|
53
|
+
gap: 4
|
|
54
|
+
},
|
|
55
|
+
closeButton: {
|
|
56
|
+
position: 'absolute',
|
|
57
|
+
top: 8.5,
|
|
58
|
+
right: 8.5
|
|
59
|
+
}
|
|
60
|
+
}), []);
|
|
61
|
+
return /*#__PURE__*/_jsxs(Pressable, {
|
|
62
|
+
lx: lx,
|
|
63
|
+
style: [styles.container, style],
|
|
64
|
+
...props,
|
|
65
|
+
children: [/*#__PURE__*/_jsx(Box, {
|
|
66
|
+
style: styles.contentWrapper,
|
|
67
|
+
children: /*#__PURE__*/_jsx(Box, {
|
|
68
|
+
style: styles.contentContainer,
|
|
69
|
+
children: children
|
|
70
|
+
})
|
|
71
|
+
}), /*#__PURE__*/_jsxs(Box, {
|
|
72
|
+
style: {
|
|
73
|
+
width: 120
|
|
74
|
+
},
|
|
75
|
+
children: [showImage && /*#__PURE__*/_jsx(Image, {
|
|
76
|
+
source: {
|
|
77
|
+
uri: imageUrl
|
|
78
|
+
},
|
|
79
|
+
style: StyleSheet.absoluteFill,
|
|
80
|
+
resizeMode: "cover",
|
|
81
|
+
onError: () => setImageLoadError(true),
|
|
82
|
+
accessible: false
|
|
83
|
+
}), /*#__PURE__*/_jsx(LinearGradient, {
|
|
84
|
+
direction: "to-topright",
|
|
85
|
+
stops: [{
|
|
86
|
+
color: t.colors.bg.black,
|
|
87
|
+
opacity: 0,
|
|
88
|
+
offset: 0.67
|
|
89
|
+
}, {
|
|
90
|
+
color: t.colors.bg.black,
|
|
91
|
+
opacity: 0.8
|
|
92
|
+
}],
|
|
93
|
+
style: StyleSheet.absoluteFill,
|
|
94
|
+
accessible: false,
|
|
95
|
+
pointerEvents: "none"
|
|
96
|
+
})]
|
|
97
|
+
}), onClose && /*#__PURE__*/_jsx(Box, {
|
|
98
|
+
style: styles.closeButton,
|
|
99
|
+
children: /*#__PURE__*/_jsx(InteractiveIcon, {
|
|
100
|
+
testID: "media-banner-close-button",
|
|
101
|
+
iconType: "stroked",
|
|
102
|
+
appearance: "white",
|
|
103
|
+
onPress: onClose,
|
|
104
|
+
accessibilityLabel: closeAccessibilityLabel || translate('components.banner.closeAriaLabel'),
|
|
105
|
+
children: /*#__PURE__*/_jsx(Close, {
|
|
106
|
+
size: 16
|
|
107
|
+
})
|
|
108
|
+
})
|
|
109
|
+
})]
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* The title of the MediaBanner. Clamps at 1 line.
|
|
115
|
+
*/
|
|
116
|
+
export function MediaBannerTitle({
|
|
117
|
+
lx,
|
|
118
|
+
style,
|
|
119
|
+
children,
|
|
120
|
+
...props
|
|
121
|
+
}) {
|
|
122
|
+
const styles = useStyleSheet(t => ({
|
|
123
|
+
title: StyleSheet.flatten([t.typographies.body2SemiBold, {
|
|
124
|
+
color: t.colors.text.base
|
|
125
|
+
}])
|
|
126
|
+
}), []);
|
|
127
|
+
return /*#__PURE__*/_jsx(Text, {
|
|
128
|
+
lx: lx,
|
|
129
|
+
style: [styles.title, style],
|
|
130
|
+
numberOfLines: 1,
|
|
131
|
+
...props,
|
|
132
|
+
children: children
|
|
133
|
+
});
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/**
|
|
137
|
+
* The description of the MediaBanner. Clamps at 2 lines.
|
|
138
|
+
*/
|
|
139
|
+
export function MediaBannerDescription({
|
|
140
|
+
lx,
|
|
141
|
+
style,
|
|
142
|
+
children,
|
|
143
|
+
...props
|
|
144
|
+
}) {
|
|
145
|
+
const styles = useStyleSheet(t => ({
|
|
146
|
+
description: StyleSheet.flatten([t.typographies.body3, {
|
|
147
|
+
color: t.colors.text.muted
|
|
148
|
+
}])
|
|
149
|
+
}), []);
|
|
150
|
+
return /*#__PURE__*/_jsx(Text, {
|
|
151
|
+
lx: lx,
|
|
152
|
+
style: [styles.description, style],
|
|
153
|
+
numberOfLines: 2,
|
|
154
|
+
...props,
|
|
155
|
+
children: children
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
//# sourceMappingURL=MediaBanner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useEffect","useState","Image","StyleSheet","useCommonTranslation","useStyleSheet","useTheme","Close","InteractiveIcon","Box","LinearGradient","Pressable","Text","jsx","_jsx","jsxs","_jsxs","MediaBanner","lx","style","imageUrl","onClose","closeAccessibilityLabel","children","props","t","translate","theme","imageLoadError","setImageLoadError","showImage","styles","container","backgroundColor","colors","bg","surface","borderRadius","md","overflow","flexDirection","height","sizes","s72","contentWrapper","flex","justifyContent","paddingHorizontal","spacings","s12","paddingVertical","s2","contentContainer","gap","closeButton","position","top","right","width","source","uri","absoluteFill","resizeMode","onError","accessible","direction","stops","color","black","opacity","offset","pointerEvents","testID","iconType","appearance","onPress","accessibilityLabel","size","MediaBannerTitle","title","flatten","typographies","body2SemiBold","text","base","numberOfLines","MediaBannerDescription","description","body3","muted"],"sourceRoot":"../../../../../src","sources":["lib/Components/MediaBanner/MediaBanner.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
|
|
2
|
+
import * as MediaBannerStories from './MediaBanner.stories';
|
|
3
|
+
import {
|
|
4
|
+
MediaBanner,
|
|
5
|
+
MediaBannerTitle,
|
|
6
|
+
MediaBannerDescription,
|
|
7
|
+
} from './MediaBanner';
|
|
8
|
+
import { Box } from '../Utility';
|
|
9
|
+
import { CustomTabs, Tab } from '../../../../.storybook/components';
|
|
10
|
+
import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
|
|
11
|
+
import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
|
|
12
|
+
|
|
13
|
+
<Meta title='Components/MediaBanner' of={MediaBannerStories} />
|
|
14
|
+
|
|
15
|
+
# 🖼️ MediaBanner
|
|
16
|
+
|
|
17
|
+
<CustomTabs>
|
|
18
|
+
<Tab label="Overview">
|
|
19
|
+
|
|
20
|
+
## Introduction
|
|
21
|
+
|
|
22
|
+
MediaBanner is a promotional banner component that displays a background image alongside a title and description. It is designed for marketing or informational content and supports an optional close action for dismissibility.
|
|
23
|
+
|
|
24
|
+
> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=11235-5982&m=dev).
|
|
25
|
+
|
|
26
|
+
## Anatomy
|
|
27
|
+
|
|
28
|
+
<Canvas of={MediaBannerStories.Base} />
|
|
29
|
+
|
|
30
|
+
- **MediaBanner**: Root pressable container with surface background, rounded corners, and a fixed height
|
|
31
|
+
- **MediaBannerTitle**: The main label of the banner (clamps at 1 line)
|
|
32
|
+
- **MediaBannerDescription**: Additional context below the title (clamps at 2 lines)
|
|
33
|
+
- **Image**: Background image displayed on the right side with a gradient overlay
|
|
34
|
+
- **Close button**: Optional InteractiveIcon rendered in the top-right corner via the `onClose` prop
|
|
35
|
+
|
|
36
|
+
## Properties
|
|
37
|
+
|
|
38
|
+
### Overview
|
|
39
|
+
|
|
40
|
+
<Canvas of={MediaBannerStories.Base} />
|
|
41
|
+
<Controls of={MediaBannerStories.Base} />
|
|
42
|
+
|
|
43
|
+
### Truncation
|
|
44
|
+
|
|
45
|
+
Title clamps at 1 line and description clamps at 2 lines when content overflows.
|
|
46
|
+
|
|
47
|
+
<Canvas of={MediaBannerStories.Truncation} />
|
|
48
|
+
|
|
49
|
+
### Broken Image
|
|
50
|
+
|
|
51
|
+
When the `imageUrl` fails to load, the broken image is hidden while the gradient overlay and image space are preserved. The banner remains functional and visually consistent.
|
|
52
|
+
|
|
53
|
+
<Canvas of={MediaBannerStories.WithBrokenImage} />
|
|
54
|
+
|
|
55
|
+
### Dismissible
|
|
56
|
+
|
|
57
|
+
When `onClose` is provided, the close button allows the user to dismiss the banner.
|
|
58
|
+
|
|
59
|
+
<Canvas of={MediaBannerStories.WithClose} />
|
|
60
|
+
|
|
61
|
+
## Accessibility
|
|
62
|
+
|
|
63
|
+
- The close button uses `InteractiveIcon` with proper press states
|
|
64
|
+
- The root element is a `Pressable` for interactive use cases
|
|
65
|
+
- Title and description use semantic `Text` elements
|
|
66
|
+
|
|
67
|
+
</Tab>
|
|
68
|
+
<Tab label="Implementation">
|
|
69
|
+
|
|
70
|
+
## Setup
|
|
71
|
+
|
|
72
|
+
Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
|
|
73
|
+
|
|
74
|
+
## Basic Usage
|
|
75
|
+
|
|
76
|
+
MediaBanner uses a composite component pattern with `MediaBannerTitle` and `MediaBannerDescription`:
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
import {
|
|
80
|
+
MediaBanner,
|
|
81
|
+
MediaBannerTitle,
|
|
82
|
+
MediaBannerDescription,
|
|
83
|
+
} from '@ledgerhq/lumen-ui-rnative';
|
|
84
|
+
|
|
85
|
+
function MyComponent() {
|
|
86
|
+
return (
|
|
87
|
+
<MediaBanner imageUrl='https://example.com/promo.jpg'>
|
|
88
|
+
<MediaBannerTitle>Firmware Update</MediaBannerTitle>
|
|
89
|
+
<MediaBannerDescription>
|
|
90
|
+
Keep your Nano updated!
|
|
91
|
+
</MediaBannerDescription>
|
|
92
|
+
</MediaBanner>
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### With Close Button
|
|
98
|
+
|
|
99
|
+
Add an `onClose` callback to make the banner dismissible:
|
|
100
|
+
|
|
101
|
+
```tsx
|
|
102
|
+
import {
|
|
103
|
+
MediaBanner,
|
|
104
|
+
MediaBannerTitle,
|
|
105
|
+
MediaBannerDescription,
|
|
106
|
+
} from '@ledgerhq/lumen-ui-rnative';
|
|
107
|
+
import { useState } from 'react';
|
|
108
|
+
|
|
109
|
+
function DismissibleBanner() {
|
|
110
|
+
const [isVisible, setIsVisible] = useState(true);
|
|
111
|
+
|
|
112
|
+
if (!isVisible) return null;
|
|
113
|
+
|
|
114
|
+
return (
|
|
115
|
+
<MediaBanner
|
|
116
|
+
imageUrl='https://example.com/promo.jpg'
|
|
117
|
+
onClose={() => setIsVisible(false)}
|
|
118
|
+
>
|
|
119
|
+
<MediaBannerTitle>
|
|
120
|
+
Earn Up to 12% APY With Staking Now!
|
|
121
|
+
</MediaBannerTitle>
|
|
122
|
+
<MediaBannerDescription>
|
|
123
|
+
Put your idle crypto to work. Start staking SOL, ETH, ATOM and more
|
|
124
|
+
directly from Ledger Live
|
|
125
|
+
</MediaBannerDescription>
|
|
126
|
+
</MediaBanner>
|
|
127
|
+
);
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Layout Adjustments with lx
|
|
132
|
+
|
|
133
|
+
Use the `lx` prop for layout adjustments like margins or positioning:
|
|
134
|
+
|
|
135
|
+
```tsx
|
|
136
|
+
<MediaBanner
|
|
137
|
+
imageUrl='https://example.com/promo.jpg'
|
|
138
|
+
lx={{ marginTop: 's16', marginBottom: 's8' }}
|
|
139
|
+
>
|
|
140
|
+
<MediaBannerTitle>With Margin</MediaBannerTitle>
|
|
141
|
+
<MediaBannerDescription>
|
|
142
|
+
This banner has layout adjustments via lx.
|
|
143
|
+
</MediaBannerDescription>
|
|
144
|
+
</MediaBanner>
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
<CommonRulesDoAndDont />
|
|
148
|
+
|
|
149
|
+
</Tab>
|
|
150
|
+
</CustomTabs>
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
import { Button } from "../Button/index.js";
|
|
5
|
+
import { Box } from "../Utility/index.js";
|
|
6
|
+
import { MediaBanner, MediaBannerDescription, MediaBannerTitle } from "./MediaBanner.js";
|
|
7
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
const IMAGE_URL = 'https://images.unsplash.com/photo-1663741954108-d15d514529ef';
|
|
9
|
+
const meta = {
|
|
10
|
+
component: MediaBanner,
|
|
11
|
+
title: 'Communication/MediaBanner',
|
|
12
|
+
subcomponents: {
|
|
13
|
+
MediaBannerTitle,
|
|
14
|
+
MediaBannerDescription
|
|
15
|
+
},
|
|
16
|
+
parameters: {
|
|
17
|
+
docs: {
|
|
18
|
+
source: {
|
|
19
|
+
language: 'tsx',
|
|
20
|
+
format: true,
|
|
21
|
+
type: 'code'
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
argTypes: {
|
|
26
|
+
imageUrl: {
|
|
27
|
+
control: 'text',
|
|
28
|
+
description: 'URL of the background image'
|
|
29
|
+
},
|
|
30
|
+
onClose: {
|
|
31
|
+
control: 'select',
|
|
32
|
+
description: 'Close action callback',
|
|
33
|
+
options: ['With Close', 'None'],
|
|
34
|
+
mapping: {
|
|
35
|
+
'With Close': () => {
|
|
36
|
+
console.log('Close clicked');
|
|
37
|
+
},
|
|
38
|
+
None: undefined
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
export default meta;
|
|
44
|
+
export const Base = {
|
|
45
|
+
args: {
|
|
46
|
+
imageUrl: IMAGE_URL
|
|
47
|
+
},
|
|
48
|
+
render: args => /*#__PURE__*/_jsx(Box, {
|
|
49
|
+
lx: {
|
|
50
|
+
width: 's400'
|
|
51
|
+
},
|
|
52
|
+
children: /*#__PURE__*/_jsxs(MediaBanner, {
|
|
53
|
+
...args,
|
|
54
|
+
children: [/*#__PURE__*/_jsx(MediaBannerTitle, {
|
|
55
|
+
children: "Firmware Update"
|
|
56
|
+
}), /*#__PURE__*/_jsx(MediaBannerDescription, {
|
|
57
|
+
children: "Keep your Nano updated!"
|
|
58
|
+
})]
|
|
59
|
+
})
|
|
60
|
+
}),
|
|
61
|
+
parameters: {
|
|
62
|
+
docs: {
|
|
63
|
+
source: {
|
|
64
|
+
code: `
|
|
65
|
+
<MediaBanner imageUrl="https://images.unsplash.com/photo-1663741954108-d15d514529ef">
|
|
66
|
+
<MediaBannerTitle>Firmware Update</MediaBannerTitle>
|
|
67
|
+
<MediaBannerDescription>
|
|
68
|
+
Keep your Nano updated!
|
|
69
|
+
</MediaBannerDescription>
|
|
70
|
+
</MediaBanner>
|
|
71
|
+
`
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
export const Truncation = {
|
|
77
|
+
render: () => /*#__PURE__*/_jsx(Box, {
|
|
78
|
+
lx: {
|
|
79
|
+
width: 's400'
|
|
80
|
+
},
|
|
81
|
+
children: /*#__PURE__*/_jsxs(MediaBanner, {
|
|
82
|
+
imageUrl: IMAGE_URL,
|
|
83
|
+
onClose: () => console.log('close'),
|
|
84
|
+
children: [/*#__PURE__*/_jsx(MediaBannerTitle, {
|
|
85
|
+
children: "Earn Up to 12% APY With Staking Now And Much More Rewards Awaiting You"
|
|
86
|
+
}), /*#__PURE__*/_jsx(MediaBannerDescription, {
|
|
87
|
+
children: "Put your idle crypto to work. Start staking SOL, ETH, ATOM and more directly from Ledger Live. Maximize your returns with our secure staking solutions."
|
|
88
|
+
})]
|
|
89
|
+
})
|
|
90
|
+
})
|
|
91
|
+
};
|
|
92
|
+
export const WithBrokenImage = {
|
|
93
|
+
render: () => /*#__PURE__*/_jsx(Box, {
|
|
94
|
+
lx: {
|
|
95
|
+
width: 's400'
|
|
96
|
+
},
|
|
97
|
+
children: /*#__PURE__*/_jsxs(MediaBanner, {
|
|
98
|
+
imageUrl: "https://broken-url.invalid/image.jpg",
|
|
99
|
+
onClose: () => console.log('close'),
|
|
100
|
+
children: [/*#__PURE__*/_jsx(MediaBannerTitle, {
|
|
101
|
+
children: "Sorry!"
|
|
102
|
+
}), /*#__PURE__*/_jsx(MediaBannerDescription, {
|
|
103
|
+
children: "The image failed to load so the banner decided to gracefully hide it."
|
|
104
|
+
})]
|
|
105
|
+
})
|
|
106
|
+
})
|
|
107
|
+
};
|
|
108
|
+
export const WithClose = {
|
|
109
|
+
render: () => {
|
|
110
|
+
const [visible, setVisible] = useState(true);
|
|
111
|
+
if (!visible) {
|
|
112
|
+
return /*#__PURE__*/_jsx(Button, {
|
|
113
|
+
appearance: "transparent",
|
|
114
|
+
size: "sm",
|
|
115
|
+
onPress: () => setVisible(true),
|
|
116
|
+
children: "Show banner"
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
return /*#__PURE__*/_jsx(Box, {
|
|
120
|
+
lx: {
|
|
121
|
+
width: 's400'
|
|
122
|
+
},
|
|
123
|
+
children: /*#__PURE__*/_jsxs(MediaBanner, {
|
|
124
|
+
imageUrl: IMAGE_URL,
|
|
125
|
+
onClose: () => setVisible(false),
|
|
126
|
+
children: [/*#__PURE__*/_jsx(MediaBannerTitle, {
|
|
127
|
+
children: "Earn Up to 12% APY With Staking Now!"
|
|
128
|
+
}), /*#__PURE__*/_jsx(MediaBannerDescription, {
|
|
129
|
+
children: "Put your idle crypto to work. Start staking SOL, ETH, ATOM and more directly from Ledger Live"
|
|
130
|
+
})]
|
|
131
|
+
})
|
|
132
|
+
});
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
//# sourceMappingURL=MediaBanner.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useState","Button","Box","MediaBanner","MediaBannerDescription","MediaBannerTitle","jsx","_jsx","jsxs","_jsxs","IMAGE_URL","meta","component","title","subcomponents","parameters","docs","source","language","format","type","argTypes","imageUrl","control","description","onClose","options","mapping","With Close","console","log","None","undefined","Base","args","render","lx","width","children","code","Truncation","WithBrokenImage","WithClose","visible","setVisible","appearance","size","onPress"],"sourceRoot":"../../../../../src","sources":["lib/Components/MediaBanner/MediaBanner.stories.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { describe, it, expect, jest } from '@jest/globals';
|
|
4
|
+
import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
|
|
5
|
+
import { fireEvent, render } from '@testing-library/react-native';
|
|
6
|
+
import { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
|
|
7
|
+
import { MediaBanner, MediaBannerTitle, MediaBannerDescription } from "./MediaBanner.js";
|
|
8
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
+
const TestWrapper = ({
|
|
10
|
+
children
|
|
11
|
+
}) => /*#__PURE__*/_jsx(ThemeProvider, {
|
|
12
|
+
themes: ledgerLiveThemes,
|
|
13
|
+
colorScheme: "dark",
|
|
14
|
+
locale: "en",
|
|
15
|
+
children: children
|
|
16
|
+
});
|
|
17
|
+
const IMAGE_URL = 'https://example.com/image.jpg';
|
|
18
|
+
describe('MediaBanner', () => {
|
|
19
|
+
it('should render title and description', () => {
|
|
20
|
+
const {
|
|
21
|
+
getByText
|
|
22
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
23
|
+
children: /*#__PURE__*/_jsxs(MediaBanner, {
|
|
24
|
+
imageUrl: IMAGE_URL,
|
|
25
|
+
children: [/*#__PURE__*/_jsx(MediaBannerTitle, {
|
|
26
|
+
children: "Banner Title"
|
|
27
|
+
}), /*#__PURE__*/_jsx(MediaBannerDescription, {
|
|
28
|
+
children: "Banner description"
|
|
29
|
+
})]
|
|
30
|
+
})
|
|
31
|
+
}));
|
|
32
|
+
getByText('Banner Title');
|
|
33
|
+
getByText('Banner description');
|
|
34
|
+
});
|
|
35
|
+
it('should call onClose when close button is pressed', () => {
|
|
36
|
+
const handleClose = jest.fn();
|
|
37
|
+
const {
|
|
38
|
+
getByTestId
|
|
39
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
40
|
+
children: /*#__PURE__*/_jsx(MediaBanner, {
|
|
41
|
+
imageUrl: IMAGE_URL,
|
|
42
|
+
onClose: handleClose,
|
|
43
|
+
children: /*#__PURE__*/_jsx(MediaBannerTitle, {
|
|
44
|
+
children: "Title"
|
|
45
|
+
})
|
|
46
|
+
})
|
|
47
|
+
}));
|
|
48
|
+
const closeButton = getByTestId('media-banner-close-button');
|
|
49
|
+
expect(closeButton).toBeTruthy();
|
|
50
|
+
fireEvent.press(closeButton);
|
|
51
|
+
expect(handleClose).toHaveBeenCalledTimes(1);
|
|
52
|
+
});
|
|
53
|
+
it('should apply surface background color', () => {
|
|
54
|
+
const {
|
|
55
|
+
getByTestId
|
|
56
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
57
|
+
children: /*#__PURE__*/_jsx(MediaBanner, {
|
|
58
|
+
testID: "media-banner",
|
|
59
|
+
imageUrl: IMAGE_URL,
|
|
60
|
+
children: /*#__PURE__*/_jsx(MediaBannerTitle, {
|
|
61
|
+
children: "Title"
|
|
62
|
+
})
|
|
63
|
+
})
|
|
64
|
+
}));
|
|
65
|
+
const banner = getByTestId('media-banner');
|
|
66
|
+
expect(banner.props.style.backgroundColor).toBe(ledgerLiveThemes.dark.colors.bg.surface);
|
|
67
|
+
});
|
|
68
|
+
it('should render with imageUrl prop', () => {
|
|
69
|
+
const {
|
|
70
|
+
getByTestId
|
|
71
|
+
} = render(/*#__PURE__*/_jsx(TestWrapper, {
|
|
72
|
+
children: /*#__PURE__*/_jsx(MediaBanner, {
|
|
73
|
+
testID: "media-banner",
|
|
74
|
+
imageUrl: IMAGE_URL,
|
|
75
|
+
children: /*#__PURE__*/_jsx(MediaBannerTitle, {
|
|
76
|
+
children: "Title"
|
|
77
|
+
})
|
|
78
|
+
})
|
|
79
|
+
}));
|
|
80
|
+
expect(getByTestId('media-banner')).toBeTruthy();
|
|
81
|
+
});
|
|
82
|
+
});
|
|
83
|
+
//# sourceMappingURL=MediaBanner.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["describe","it","expect","jest","ledgerLiveThemes","fireEvent","render","ThemeProvider","MediaBanner","MediaBannerTitle","MediaBannerDescription","jsx","_jsx","jsxs","_jsxs","TestWrapper","children","themes","colorScheme","locale","IMAGE_URL","getByText","imageUrl","handleClose","fn","getByTestId","onClose","closeButton","toBeTruthy","press","toHaveBeenCalledTimes","testID","banner","props","style","backgroundColor","toBe","dark","colors","bg","surface"],"sourceRoot":"../../../../../src","sources":["lib/Components/MediaBanner/MediaBanner.test.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Components/MediaBanner/index.ts"],"mappings":";;AAAA,cAAc,kBAAe;AAC7B,cAAc,YAAS","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Components/MediaBanner/types.ts"],"mappings":"","ignoreList":[]}
|