@xsolla/xui-store-badge 0.148.0 → 0.148.1

package/README.md

@@ -0,0 +1,208 @@
+# Store Badge
+
+A cross-platform React component for displaying official app store download badges with consistent styling for Google Play, App Store, and App Gallery.
+
+## Installation
+
+```bash
+npm install @xsolla/xui-store-badge
+# or
+yarn add @xsolla/xui-store-badge
+```
+
+## Demo
+
+### All Store Types
+
+```tsx
+import * as React from 'react';
+import { StoreBadge } from '@xsolla/xui-store-badge';
+
+export default function AllStores() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <StoreBadge type="google-play" />
+      <StoreBadge type="app-store" />
+      <StoreBadge type="app-gallery" />
+    </div>
+  );
+}
+```
+
+### Light Palette
+
+```tsx
+import * as React from 'react';
+import { StoreBadge } from '@xsolla/xui-store-badge';
+
+export default function LightBadges() {
+  return (
+    <div style={{ display: 'flex', gap: 16, background: '#f5f5f5', padding: 24 }}>
+      <StoreBadge type="google-play" palette="light" />
+      <StoreBadge type="app-store" palette="light" />
+    </div>
+  );
+}
+```
+
+### Clickable Badges
+
+```tsx
+import * as React from 'react';
+import { StoreBadge } from '@xsolla/xui-store-badge';
+
+export default function ClickableBadges() {
+  return (
+    <div style={{ display: 'flex', gap: 16 }}>
+      <StoreBadge
+        type="google-play"
+        onPress={() => window.open('https://play.google.com/store/apps/details?id=com.example')}
+      />
+      <StoreBadge
+        type="app-store"
+        onPress={() => window.open('https://apps.apple.com/app/example/id123456789')}
+      />
+    </div>
+  );
+}
+```
+
+## Anatomy
+
+```jsx
+import { StoreBadge } from '@xsolla/xui-store-badge';
+
+<StoreBadge
+  type="google-play"       // google-play, app-store, app-gallery
+  palette="dark"           // dark or light
+  onPress={handlePress}    // Click handler
+  data-testid="badge"      // Test ID
+/>
+```
+
+## Examples
+
+### App Download Section
+
+```tsx
+import * as React from 'react';
+import { StoreBadge } from '@xsolla/xui-store-badge';
+
+export default function AppDownload() {
+  return (
+    <section style={{ textAlign: 'center', padding: 48 }}>
+      <h2>Download Our App</h2>
+      <p style={{ marginBottom: 24, color: '#666' }}>
+        Available on your favorite platforms
+      </p>
+      <div style={{ display: 'flex', gap: 16, justifyContent: 'center' }}>
+        <StoreBadge
+          type="google-play"
+          onPress={() => window.open('https://play.google.com')}
+        />
+        <StoreBadge
+          type="app-store"
+          onPress={() => window.open('https://apps.apple.com')}
+        />
+      </div>
+    </section>
+  );
+}
+```
+
+### Footer Badges
+
+```tsx
+import * as React from 'react';
+import { StoreBadge } from '@xsolla/xui-store-badge';
+
+export default function FooterBadges() {
+  return (
+    <footer style={{ background: '#1a1a1a', padding: '48px 24px' }}>
+      <div style={{ maxWidth: 800, margin: '0 auto' }}>
+        <h3 style={{ color: '#fff', marginBottom: 16 }}>Get the Mobile App</h3>
+        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+          <StoreBadge type="google-play" palette="dark" />
+          <StoreBadge type="app-store" palette="dark" />
+          <StoreBadge type="app-gallery" palette="dark" />
+        </div>
+      </div>
+    </footer>
+  );
+}
+```
+
+### Responsive Layout
+
+```tsx
+import * as React from 'react';
+import { StoreBadge } from '@xsolla/xui-store-badge';
+
+export default function ResponsiveBadges() {
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 12,
+      alignItems: 'center',
+    }}>
+      <StoreBadge type="google-play" />
+      <StoreBadge type="app-store" />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### StoreBadge
+
+**StoreBadgeProps:**
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| type | `"google-play" \| "app-store" \| "app-gallery"` | - | Store type to display. |
+| palette | `"dark" \| "light"` | `"dark"` | Color scheme. |
+| onPress | `() => void` | - | Click handler for the badge. |
+| data-testid | `string` | - | Test identifier. |
+| className | `string` | - | CSS class name. |
+
+## Badge Specifications
+
+| Dimension | Value |
+| :-------- | :---- |
+| Height | 87px |
+| Min Width | 253px |
+| Border Radius | 11px |
+| Border Width | 2px |
+| Padding | 20px horizontal |
+
+## Palette Styles
+
+| Palette | Background | Border |
+| :------ | :--------- | :----- |
+| `dark` | #100f0d | #a6a6a6 |
+| `light` | #ffffff | #000000 |
+
+## Store Types
+
+| Type | Description |
+| :--- | :---------- |
+| `google-play` | Google Play Store badge |
+| `app-store` | Apple App Store badge |
+| `app-gallery` | Huawei App Gallery badge |
+
+## Use Cases
+
+- Mobile app landing pages
+- Website footers
+- Marketing materials
+- App download prompts
+- Multi-platform app promotion
+
+## Accessibility
+
+- Badges have appropriate alt text for screen readers
+- Clickable badges show cursor pointer
+- Focus states are visible for keyboard navigation
+- Link behavior when `onPress` is provided

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-store-badge",
-  "version": "0.148.0",
+  "version": "0.148.1",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -10,8 +10,8 @@
     "build:native": "PLATFORM=native tsup"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.148.0",
-    "@xsolla/xui-primitives-core": "0.148.0"
+    "@xsolla/xui-core": "0.148.1",
+    "@xsolla/xui-primitives-core": "0.148.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",