@xsolla/xui-store-badge 0.150.0 → 0.151.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.
Files changed (2) hide show
  1. package/README.md +64 -147
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,208 +1,125 @@
1
- # Store Badge
1
+ # StoreBadge
2
2
 
3
- A cross-platform React component for displaying official app store download badges with consistent styling for Google Play, App Store, and App Gallery.
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
8
  npm install @xsolla/xui-store-badge
9
- # or
10
- yarn add @xsolla/xui-store-badge
11
9
  ```
12
10
 
13
- ## Demo
14
-
15
- ### All Store Types
11
+ ## Imports
16
12
 
17
13
  ```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
- }
14
+ import {
15
+ StoreBadge,
16
+ type StoreBadgeProps,
17
+ type StoreType,
18
+ type StoreBadgePalette,
19
+ } from '@xsolla/xui-store-badge';
30
20
  ```
31
21
 
32
- ### Light Palette
22
+ ## Quick start
33
23
 
34
24
  ```tsx
35
25
  import * as React from 'react';
36
26
  import { StoreBadge } from '@xsolla/xui-store-badge';
37
27
 
38
- export default function LightBadges() {
39
- return (
40
- <div style={{ display: 'flex', gap: 16, background: '#f5f5f5', padding: 24 }}>
41
- <StoreBadge type="google-play" palette="light" />
42
- <StoreBadge type="app-store" palette="light" />
43
- </div>
44
- );
28
+ export default function QuickStart() {
29
+ return <StoreBadge type="google-play" palette="dark" />;
45
30
  }
46
31
  ```
47
32
 
48
- ### Clickable Badges
33
+ ## API Reference
49
34
 
50
- ```tsx
51
- import * as React from 'react';
52
- import { StoreBadge } from '@xsolla/xui-store-badge';
35
+ ### `<StoreBadge>`
53
36
 
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
- ```
37
+ | Prop | Type | Default | Description |
38
+ | --- | --- | --- | --- |
39
+ | `type` | `"google-play" \| "app-store" \| "app-gallery"` | — | Store to render. **No default — when omitted, the badge renders an empty container with no store artwork.** |
40
+ | `palette` | `"dark" \| "light"` | `"dark"` | Colour scheme. `dark` = black background; `light` = white background. |
41
+ | `onPress` | `() => void` | — | Press handler. When provided, the cursor switches to `pointer`. |
42
+ | `data-testid` | `string` | — | Test identifier. |
43
+ | `className` | `string` | — | CSS class for the container. |
44
+ | `style` | `CSSProperties` | — | Inline style overrides. |
69
45
 
70
- ## Anatomy
46
+ Additional props are spread onto the inner `Box` (e.g. layout overrides).
71
47
 
72
- ```jsx
73
- import { StoreBadge } from '@xsolla/xui-store-badge';
48
+ ### Specifications
74
49
 
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
- ```
50
+ | Dimension | Value |
51
+ | --- | --- |
52
+ | Height | 87px |
53
+ | Min width | 253px |
54
+ | Border radius | 11px |
55
+ | Border width | 2px |
56
+ | Horizontal padding | 20px |
57
+
58
+ | Palette | Background | Border |
59
+ | --- | --- | --- |
60
+ | `dark` | `#100f0d` | `#a6a6a6` |
61
+ | `light` | `#ffffff` | `#000000` |
82
62
 
83
63
  ## Examples
84
64
 
85
- ### App Download Section
65
+ ### All stores
86
66
 
87
67
  ```tsx
88
68
  import * as React from 'react';
89
69
  import { StoreBadge } from '@xsolla/xui-store-badge';
90
70
 
91
- export default function AppDownload() {
71
+ export default function AllStores() {
92
72
  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>
73
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
74
+ <StoreBadge type="google-play" />
75
+ <StoreBadge type="app-store" />
76
+ <StoreBadge type="app-gallery" />
77
+ </div>
109
78
  );
110
79
  }
111
80
  ```
112
81
 
113
- ### Footer Badges
82
+ ### Light palette
114
83
 
115
84
  ```tsx
116
85
  import * as React from 'react';
117
86
  import { StoreBadge } from '@xsolla/xui-store-badge';
118
87
 
119
- export default function FooterBadges() {
88
+ export default function LightBadges() {
120
89
  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>
90
+ <div style={{ display: 'flex', gap: 16, background: '#f5f5f5', padding: 24 }}>
91
+ <StoreBadge type="google-play" palette="light" />
92
+ <StoreBadge type="app-store" palette="light" />
93
+ </div>
131
94
  );
132
95
  }
133
96
  ```
134
97
 
135
- ### Responsive Layout
98
+ ### Clickable
99
+
100
+ Wrap the badge in a semantic anchor so assistive technology announces the destination.
136
101
 
137
102
  ```tsx
138
103
  import * as React from 'react';
139
104
  import { StoreBadge } from '@xsolla/xui-store-badge';
140
105
 
141
- export default function ResponsiveBadges() {
106
+ export default function ClickableBadges() {
142
107
  return (
143
- <div style={{
144
- display: 'flex',
145
- flexDirection: 'column',
146
- gap: 12,
147
- alignItems: 'center',
148
- }}>
108
+ <a
109
+ href="https://play.google.com"
110
+ target="_blank"
111
+ rel="noopener noreferrer"
112
+ aria-label="Get it on Google Play"
113
+ style={{ display: 'inline-block' }}
114
+ >
149
115
  <StoreBadge type="google-play" />
150
- <StoreBadge type="app-store" />
151
- </div>
116
+ </a>
152
117
  );
153
118
  }
154
119
  ```
155
120
 
156
- ## API Reference
157
-
158
- ### StoreBadge
159
-
160
- **StoreBadgeProps:**
161
-
162
- | Prop | Type | Default | Description |
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
121
  ## Accessibility
204
122
 
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
123
+ - The internal SVG store artwork inherits its `data-testid` for testing.
124
+ - Wrap clickable badges in semantic affordances (e.g. an anchor tag) when linking to a store URL so assistive technology announces the destination.
125
+ - Ensure surrounding context (a heading or descriptive text) describes the platform when the badge is the only signal.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-store-badge",
3
- "version": "0.150.0",
3
+ "version": "0.151.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.150.0",
14
- "@xsolla/xui-primitives-core": "0.150.0"
13
+ "@xsolla/xui-core": "0.151.0",
14
+ "@xsolla/xui-primitives-core": "0.151.0"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "react": ">=16.8.0",