@xsolla/xui-logos-brand 0.99.0 → 0.100.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 +238 -34
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,50 +1,254 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Logos Brand
|
|
3
|
+
subtitle: Payment and service provider logos.
|
|
4
|
+
description: A cross-platform React brand logos package with 500+ payment providers, banks, and service logos.
|
|
5
|
+
---
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
# Logos Brand
|
|
8
|
+
|
|
9
|
+
A cross-platform React brand logos package containing 500+ payment providers, banks, retail stores, and service logos for checkout and payment method displays.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
13
|
```bash
|
|
14
|
+
npm install @xsolla/xui-logos-brand
|
|
15
|
+
# or
|
|
8
16
|
yarn add @xsolla/xui-logos-brand
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## Demo
|
|
20
|
+
|
|
21
|
+
### Payment Provider Logos
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import * as React from 'react';
|
|
25
|
+
import { Visa, Mastercard, Paypal, ApplePay } from '@xsolla/xui-logos-brand';
|
|
26
|
+
|
|
27
|
+
export default function PaymentLogos() {
|
|
28
|
+
return (
|
|
29
|
+
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
|
|
30
|
+
<Visa size={48} />
|
|
31
|
+
<Mastercard size={48} />
|
|
32
|
+
<Paypal size={48} />
|
|
33
|
+
<ApplePay size={48} />
|
|
34
|
+
</div>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Different Sizes
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import * as React from 'react';
|
|
43
|
+
import { Visa } from '@xsolla/xui-logos-brand';
|
|
44
|
+
|
|
45
|
+
export default function Sizes() {
|
|
46
|
+
return (
|
|
47
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
|
48
|
+
<Visa size={24} />
|
|
49
|
+
<Visa size={32} />
|
|
50
|
+
<Visa size={48} />
|
|
51
|
+
<Visa size={64} />
|
|
52
|
+
</div>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Custom Dimensions
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
import * as React from 'react';
|
|
61
|
+
import { GooglePay } from '@xsolla/xui-logos-brand';
|
|
62
|
+
|
|
63
|
+
export default function CustomDimensions() {
|
|
64
|
+
return (
|
|
65
|
+
<GooglePay width={120} height={48} />
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## Anatomy
|
|
71
|
+
|
|
72
|
+
```jsx
|
|
73
|
+
import { Visa } from '@xsolla/xui-logos-brand';
|
|
74
|
+
|
|
75
|
+
<Visa
|
|
76
|
+
size={24} // Size in pixels (square)
|
|
77
|
+
width={48} // Width override
|
|
78
|
+
height={24} // Height override
|
|
79
|
+
className="payment-logo" // CSS class
|
|
80
|
+
style={{ margin: 4 }} // Inline styles
|
|
81
|
+
aria-label="Visa" // Accessible label
|
|
82
|
+
/>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## Examples
|
|
86
|
+
|
|
87
|
+
### Payment Method Selection
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
90
|
+
import * as React from 'react';
|
|
91
|
+
import { Visa, Mastercard, AmericanExpress, Paypal, GooglePay, ApplePay } from '@xsolla/xui-logos-brand';
|
|
92
|
+
|
|
93
|
+
export default function PaymentSelection() {
|
|
94
|
+
const [selected, setSelected] = React.useState<string | null>(null);
|
|
95
|
+
|
|
96
|
+
const methods = [
|
|
97
|
+
{ id: 'visa', Logo: Visa, label: 'Visa' },
|
|
98
|
+
{ id: 'mc', Logo: Mastercard, label: 'Mastercard' },
|
|
99
|
+
{ id: 'amex', Logo: AmericanExpress, label: 'American Express' },
|
|
100
|
+
{ id: 'paypal', Logo: Paypal, label: 'PayPal' },
|
|
101
|
+
{ id: 'gpay', Logo: GooglePay, label: 'Google Pay' },
|
|
102
|
+
{ id: 'apple', Logo: ApplePay, label: 'Apple Pay' },
|
|
103
|
+
];
|
|
104
|
+
|
|
105
|
+
return (
|
|
106
|
+
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
|
|
107
|
+
{methods.map(({ id, Logo, label }) => (
|
|
108
|
+
<button
|
|
109
|
+
key={id}
|
|
110
|
+
onClick={() => setSelected(id)}
|
|
111
|
+
style={{
|
|
112
|
+
padding: 16,
|
|
113
|
+
border: selected === id ? '2px solid #1976D2' : '1px solid #ddd',
|
|
114
|
+
borderRadius: 8,
|
|
115
|
+
background: '#fff',
|
|
116
|
+
cursor: 'pointer',
|
|
117
|
+
}}
|
|
118
|
+
aria-pressed={selected === id}
|
|
119
|
+
>
|
|
120
|
+
<Logo size={40} aria-label={label} />
|
|
121
|
+
</button>
|
|
122
|
+
))}
|
|
123
|
+
</div>
|
|
124
|
+
);
|
|
125
|
+
}
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### Bank Logos
|
|
129
|
+
|
|
130
|
+
```tsx
|
|
131
|
+
import * as React from 'react';
|
|
132
|
+
import { Hsbc, Bnpparibas, Citibank, Santander } from '@xsolla/xui-logos-brand';
|
|
133
|
+
|
|
134
|
+
export default function BankLogos() {
|
|
135
|
+
return (
|
|
136
|
+
<div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
|
|
137
|
+
<Hsbc size={48} aria-label="HSBC" />
|
|
138
|
+
<Bnpparibas size={48} aria-label="BNP Paribas" />
|
|
139
|
+
<Citibank size={48} aria-label="Citibank" />
|
|
140
|
+
<Santander size={48} aria-label="Santander" />
|
|
141
|
+
</div>
|
|
142
|
+
);
|
|
143
|
+
}
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
### E-Wallet Logos
|
|
12
147
|
|
|
13
148
|
```tsx
|
|
14
|
-
import
|
|
149
|
+
import * as React from 'react';
|
|
150
|
+
import { Dana, Ovo, Gopay, ShopeePay } from '@xsolla/xui-logos-brand';
|
|
15
151
|
|
|
16
|
-
function
|
|
152
|
+
export default function EWalletLogos() {
|
|
17
153
|
return (
|
|
18
|
-
|
|
19
|
-
<
|
|
20
|
-
<
|
|
21
|
-
<
|
|
22
|
-
|
|
154
|
+
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
|
|
155
|
+
<Dana size={40} />
|
|
156
|
+
<Ovo size={40} />
|
|
157
|
+
<Gopay size={40} />
|
|
158
|
+
<ShopeePay size={40} />
|
|
159
|
+
</div>
|
|
23
160
|
);
|
|
24
161
|
}
|
|
25
162
|
```
|
|
26
163
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
-
|
|
45
|
-
-
|
|
46
|
-
-
|
|
47
|
-
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
164
|
+
### Checkout Footer
|
|
165
|
+
|
|
166
|
+
```tsx
|
|
167
|
+
import * as React from 'react';
|
|
168
|
+
import { Visa, Mastercard, AmericanExpress, Paypal } from '@xsolla/xui-logos-brand';
|
|
169
|
+
|
|
170
|
+
export default function CheckoutFooter() {
|
|
171
|
+
return (
|
|
172
|
+
<div style={{
|
|
173
|
+
padding: 16,
|
|
174
|
+
borderTop: '1px solid #e0e0e0',
|
|
175
|
+
textAlign: 'center'
|
|
176
|
+
}}>
|
|
177
|
+
<p style={{ fontSize: 12, color: '#666', marginBottom: 8 }}>
|
|
178
|
+
Secure payment powered by
|
|
179
|
+
</p>
|
|
180
|
+
<div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
|
|
181
|
+
<Visa size={32} aria-label="Visa" />
|
|
182
|
+
<Mastercard size={32} aria-label="Mastercard" />
|
|
183
|
+
<AmericanExpress size={32} aria-label="American Express" />
|
|
184
|
+
<Paypal size={32} aria-label="PayPal" />
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
);
|
|
188
|
+
}
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
## API Reference
|
|
192
|
+
|
|
193
|
+
### Brand Logo Components
|
|
194
|
+
|
|
195
|
+
Each brand logo component accepts the same props:
|
|
196
|
+
|
|
197
|
+
**BrandLogoProps:**
|
|
198
|
+
|
|
199
|
+
| Prop | Type | Default | Description |
|
|
200
|
+
| :--- | :--- | :------ | :---------- |
|
|
201
|
+
| size | `number` | `24` | Size in pixels (width and height). |
|
|
202
|
+
| width | `number` | - | Width override (takes precedence over size). |
|
|
203
|
+
| height | `number` | - | Height override (takes precedence over size). |
|
|
204
|
+
| className | `string` | - | CSS class name. |
|
|
205
|
+
| style | `CSSProperties` | - | Inline styles. |
|
|
206
|
+
| data-testid | `string` | - | Test ID (web). |
|
|
207
|
+
| testID | `string` | - | Test ID (React Native). |
|
|
208
|
+
| aria-label | `string` | - | Accessible label. |
|
|
209
|
+
| aria-hidden | `boolean` | `true` if no aria-label | Hide from screen readers. |
|
|
210
|
+
|
|
211
|
+
## Available Logos (500+)
|
|
212
|
+
|
|
213
|
+
### Credit Cards
|
|
214
|
+
`Visa`, `Mastercard`, `AmericanExpress`, `Discover`, `Jcb`, `Dinersclub`, `Unionpay`, `Maestro`, `Elo`, `Hipercard`
|
|
215
|
+
|
|
216
|
+
### Digital Wallets
|
|
217
|
+
`Paypal`, `ApplePay`, `GooglePay`, `SamsungPay`, `Alipay`, `WechatPay`, `Dana`, `Ovo`, `Gopay`, `ShopeePay`, `GrabPay`, `LinePay`, `KakaoPay`
|
|
218
|
+
|
|
219
|
+
### Banks
|
|
220
|
+
`Hsbc`, `Bnpparibas`, `Citibank`, `Santander`, `Barclays`, `Ing`, `Rabobank`, `Commerzbank`
|
|
221
|
+
|
|
222
|
+
### Mobile Payments
|
|
223
|
+
`Boku`, `Fortumo`, `Paygarden`
|
|
224
|
+
|
|
225
|
+
### Cryptocurrency
|
|
226
|
+
`Bitpay`, `Crypto`
|
|
227
|
+
|
|
228
|
+
### Buy Now Pay Later
|
|
229
|
+
`Klarna`, `Afterpay`, `Affirm`, `Zip`
|
|
230
|
+
|
|
231
|
+
### Regional Payment Methods
|
|
232
|
+
`Blik` (Poland), `Ideal` (Netherlands), `Bancontact` (Belgium), `Sofort` (Germany), `Trustly` (Nordics), `Pix` (Brazil)
|
|
233
|
+
|
|
234
|
+
### Retail Stores
|
|
235
|
+
`SevenEleven`, `FamilyMart`, `Lawson`, `Ministop`, `Indomaret`, `Alfamart`
|
|
236
|
+
|
|
237
|
+
## Tree Shaking
|
|
238
|
+
|
|
239
|
+
Import individual logos for optimal bundle size:
|
|
240
|
+
|
|
241
|
+
```tsx
|
|
242
|
+
// Good - only imports needed logos
|
|
243
|
+
import { Visa, Mastercard } from '@xsolla/xui-logos-brand';
|
|
244
|
+
|
|
245
|
+
// Avoid - imports all logos
|
|
246
|
+
import * as BrandLogos from '@xsolla/xui-logos-brand';
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
## Accessibility
|
|
250
|
+
|
|
251
|
+
- Logos are hidden from screen readers by default (`aria-hidden="true"`)
|
|
252
|
+
- Use `aria-label` when the logo conveys meaningful information
|
|
253
|
+
- For payment method lists, consider adding visible text labels alongside logos
|
|
254
|
+
- When used in selection contexts, the parent button should have the accessible label
|