@xsolla/xui-store-badge 0.99.0 → 0.101.0
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/README.md +188 -15
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,35 +1,208 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Store Badge
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A cross-platform React component for displaying official app store download badges with consistent styling for Google Play, App Store, and App Gallery.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
+
npm install @xsolla/xui-store-badge
|
|
9
|
+
# or
|
|
8
10
|
yarn add @xsolla/xui-store-badge
|
|
9
11
|
```
|
|
10
12
|
|
|
11
|
-
##
|
|
13
|
+
## Demo
|
|
14
|
+
|
|
15
|
+
### All Store Types
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import * as React from 'react';
|
|
19
|
+
import { StoreBadge } from '@xsolla/xui-store-badge';
|
|
20
|
+
|
|
21
|
+
export default function AllStores() {
|
|
22
|
+
return (
|
|
23
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
24
|
+
<StoreBadge type="google-play" />
|
|
25
|
+
<StoreBadge type="app-store" />
|
|
26
|
+
<StoreBadge type="app-gallery" />
|
|
27
|
+
</div>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Light Palette
|
|
12
33
|
|
|
13
34
|
```tsx
|
|
35
|
+
import * as React from 'react';
|
|
14
36
|
import { StoreBadge } from '@xsolla/xui-store-badge';
|
|
15
37
|
|
|
16
|
-
function
|
|
38
|
+
export default function LightBadges() {
|
|
17
39
|
return (
|
|
18
|
-
|
|
19
|
-
<StoreBadge type="google-play" palette="
|
|
40
|
+
<div style={{ display: 'flex', gap: 16, background: '#f5f5f5', padding: 24 }}>
|
|
41
|
+
<StoreBadge type="google-play" palette="light" />
|
|
20
42
|
<StoreBadge type="app-store" palette="light" />
|
|
21
|
-
|
|
22
|
-
|
|
43
|
+
</div>
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Clickable Badges
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
import * as React from 'react';
|
|
52
|
+
import { StoreBadge } from '@xsolla/xui-store-badge';
|
|
53
|
+
|
|
54
|
+
export default function ClickableBadges() {
|
|
55
|
+
return (
|
|
56
|
+
<div style={{ display: 'flex', gap: 16 }}>
|
|
57
|
+
<StoreBadge
|
|
58
|
+
type="google-play"
|
|
59
|
+
onPress={() => window.open('https://play.google.com/store/apps/details?id=com.example')}
|
|
60
|
+
/>
|
|
61
|
+
<StoreBadge
|
|
62
|
+
type="app-store"
|
|
63
|
+
onPress={() => window.open('https://apps.apple.com/app/example/id123456789')}
|
|
64
|
+
/>
|
|
65
|
+
</div>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## Anatomy
|
|
71
|
+
|
|
72
|
+
```jsx
|
|
73
|
+
import { StoreBadge } from '@xsolla/xui-store-badge';
|
|
74
|
+
|
|
75
|
+
<StoreBadge
|
|
76
|
+
type="google-play" // google-play, app-store, app-gallery
|
|
77
|
+
palette="dark" // dark or light
|
|
78
|
+
onPress={handlePress} // Click handler
|
|
79
|
+
data-testid="badge" // Test ID
|
|
80
|
+
/>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## Examples
|
|
84
|
+
|
|
85
|
+
### App Download Section
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
import * as React from 'react';
|
|
89
|
+
import { StoreBadge } from '@xsolla/xui-store-badge';
|
|
90
|
+
|
|
91
|
+
export default function AppDownload() {
|
|
92
|
+
return (
|
|
93
|
+
<section style={{ textAlign: 'center', padding: 48 }}>
|
|
94
|
+
<h2>Download Our App</h2>
|
|
95
|
+
<p style={{ marginBottom: 24, color: '#666' }}>
|
|
96
|
+
Available on your favorite platforms
|
|
97
|
+
</p>
|
|
98
|
+
<div style={{ display: 'flex', gap: 16, justifyContent: 'center' }}>
|
|
99
|
+
<StoreBadge
|
|
100
|
+
type="google-play"
|
|
101
|
+
onPress={() => window.open('https://play.google.com')}
|
|
102
|
+
/>
|
|
103
|
+
<StoreBadge
|
|
104
|
+
type="app-store"
|
|
105
|
+
onPress={() => window.open('https://apps.apple.com')}
|
|
106
|
+
/>
|
|
107
|
+
</div>
|
|
108
|
+
</section>
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### Footer Badges
|
|
114
|
+
|
|
115
|
+
```tsx
|
|
116
|
+
import * as React from 'react';
|
|
117
|
+
import { StoreBadge } from '@xsolla/xui-store-badge';
|
|
118
|
+
|
|
119
|
+
export default function FooterBadges() {
|
|
120
|
+
return (
|
|
121
|
+
<footer style={{ background: '#1a1a1a', padding: '48px 24px' }}>
|
|
122
|
+
<div style={{ maxWidth: 800, margin: '0 auto' }}>
|
|
123
|
+
<h3 style={{ color: '#fff', marginBottom: 16 }}>Get the Mobile App</h3>
|
|
124
|
+
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
|
|
125
|
+
<StoreBadge type="google-play" palette="dark" />
|
|
126
|
+
<StoreBadge type="app-store" palette="dark" />
|
|
127
|
+
<StoreBadge type="app-gallery" palette="dark" />
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
</footer>
|
|
131
|
+
);
|
|
132
|
+
}
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### Responsive Layout
|
|
136
|
+
|
|
137
|
+
```tsx
|
|
138
|
+
import * as React from 'react';
|
|
139
|
+
import { StoreBadge } from '@xsolla/xui-store-badge';
|
|
140
|
+
|
|
141
|
+
export default function ResponsiveBadges() {
|
|
142
|
+
return (
|
|
143
|
+
<div style={{
|
|
144
|
+
display: 'flex',
|
|
145
|
+
flexDirection: 'column',
|
|
146
|
+
gap: 12,
|
|
147
|
+
alignItems: 'center',
|
|
148
|
+
}}>
|
|
149
|
+
<StoreBadge type="google-play" />
|
|
150
|
+
<StoreBadge type="app-store" />
|
|
151
|
+
</div>
|
|
23
152
|
);
|
|
24
153
|
}
|
|
25
154
|
```
|
|
26
155
|
|
|
27
|
-
##
|
|
156
|
+
## API Reference
|
|
157
|
+
|
|
158
|
+
### StoreBadge
|
|
159
|
+
|
|
160
|
+
**StoreBadgeProps:**
|
|
28
161
|
|
|
29
162
|
| Prop | Type | Default | Description |
|
|
30
|
-
|
|
31
|
-
|
|
|
32
|
-
|
|
|
33
|
-
|
|
|
34
|
-
|
|
|
35
|
-
|
|
|
163
|
+
| :--- | :--- | :------ | :---------- |
|
|
164
|
+
| type | `"google-play" \| "app-store" \| "app-gallery"` | - | Store type to display. |
|
|
165
|
+
| palette | `"dark" \| "light"` | `"dark"` | Color scheme. |
|
|
166
|
+
| onPress | `() => void` | - | Click handler for the badge. |
|
|
167
|
+
| data-testid | `string` | - | Test identifier. |
|
|
168
|
+
| className | `string` | - | CSS class name. |
|
|
169
|
+
|
|
170
|
+
## Badge Specifications
|
|
171
|
+
|
|
172
|
+
| Dimension | Value |
|
|
173
|
+
| :-------- | :---- |
|
|
174
|
+
| Height | 87px |
|
|
175
|
+
| Min Width | 253px |
|
|
176
|
+
| Border Radius | 11px |
|
|
177
|
+
| Border Width | 2px |
|
|
178
|
+
| Padding | 20px horizontal |
|
|
179
|
+
|
|
180
|
+
## Palette Styles
|
|
181
|
+
|
|
182
|
+
| Palette | Background | Border |
|
|
183
|
+
| :------ | :--------- | :----- |
|
|
184
|
+
| `dark` | #100f0d | #a6a6a6 |
|
|
185
|
+
| `light` | #ffffff | #000000 |
|
|
186
|
+
|
|
187
|
+
## Store Types
|
|
188
|
+
|
|
189
|
+
| Type | Description |
|
|
190
|
+
| :--- | :---------- |
|
|
191
|
+
| `google-play` | Google Play Store badge |
|
|
192
|
+
| `app-store` | Apple App Store badge |
|
|
193
|
+
| `app-gallery` | Huawei App Gallery badge |
|
|
194
|
+
|
|
195
|
+
## Use Cases
|
|
196
|
+
|
|
197
|
+
- Mobile app landing pages
|
|
198
|
+
- Website footers
|
|
199
|
+
- Marketing materials
|
|
200
|
+
- App download prompts
|
|
201
|
+
- Multi-platform app promotion
|
|
202
|
+
|
|
203
|
+
## Accessibility
|
|
204
|
+
|
|
205
|
+
- Badges have appropriate alt text for screen readers
|
|
206
|
+
- Clickable badges show cursor pointer
|
|
207
|
+
- Focus states are visible for keyboard navigation
|
|
208
|
+
- Link behavior when `onPress` is provided
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-store-badge",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.101.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-core": "0.
|
|
14
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-core": "0.101.0",
|
|
14
|
+
"@xsolla/xui-primitives-core": "0.101.0"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": ">=16.8.0",
|