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