# Logos Brand

A cross-platform React brand logos package containing 500+ payment providers, banks, retail stores, and service logos for checkout and payment method displays.

## Installation

```bash
npm install @xsolla/xui-logos-brand
# or
yarn add @xsolla/xui-logos-brand
```

## Demo

### Payment Provider Logos

```tsx
import * as React from 'react';
import { Visa, Mastercard, Paypal, ApplePay } from '@xsolla/xui-logos-brand';

export default function PaymentLogos() {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <Visa size={48} />
      <Mastercard size={48} />
      <Paypal size={48} />
      <ApplePay size={48} />
    </div>
  );
}
```

### Different Sizes

```tsx
import * as React from 'react';
import { Visa } from '@xsolla/xui-logos-brand';

export default function Sizes() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <Visa size={24} />
      <Visa size={32} />
      <Visa size={48} />
      <Visa size={64} />
    </div>
  );
}
```

### Custom Dimensions

```tsx
import * as React from 'react';
import { GooglePay } from '@xsolla/xui-logos-brand';

export default function CustomDimensions() {
  return (
    <GooglePay width={120} height={48} />
  );
}
```

## Anatomy

```jsx
import { Visa } from '@xsolla/xui-logos-brand';

<Visa
  size={24}                  // Size in pixels (square)
  width={48}                 // Width override
  height={24}                // Height override
  className="payment-logo"   // CSS class
  style={{ margin: 4 }}      // Inline styles
  aria-label="Visa"          // Accessible label
/>
```

## Examples

### Payment Method Selection

```tsx
import * as React from 'react';
import { Visa, Mastercard, AmericanExpress, Paypal, GooglePay, ApplePay } from '@xsolla/xui-logos-brand';

export default function PaymentSelection() {
  const [selected, setSelected] = React.useState<string | null>(null);

  const methods = [
    { id: 'visa', Logo: Visa, label: 'Visa' },
    { id: 'mc', Logo: Mastercard, label: 'Mastercard' },
    { id: 'amex', Logo: AmericanExpress, label: 'American Express' },
    { id: 'paypal', Logo: Paypal, label: 'PayPal' },
    { id: 'gpay', Logo: GooglePay, label: 'Google Pay' },
    { id: 'apple', Logo: ApplePay, label: 'Apple Pay' },
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
      {methods.map(({ id, Logo, label }) => (
        <button
          key={id}
          onClick={() => setSelected(id)}
          style={{
            padding: 16,
            border: selected === id ? '2px solid #1976D2' : '1px solid #ddd',
            borderRadius: 8,
            background: '#fff',
            cursor: 'pointer',
          }}
          aria-pressed={selected === id}
        >
          <Logo size={40} aria-label={label} />
        </button>
      ))}
    </div>
  );
}
```

### Bank Logos

```tsx
import * as React from 'react';
import { Hsbc, Bnpparibas, Citibank, Santander } from '@xsolla/xui-logos-brand';

export default function BankLogos() {
  return (
    <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
      <Hsbc size={48} aria-label="HSBC" />
      <Bnpparibas size={48} aria-label="BNP Paribas" />
      <Citibank size={48} aria-label="Citibank" />
      <Santander size={48} aria-label="Santander" />
    </div>
  );
}
```

### E-Wallet Logos

```tsx
import * as React from 'react';
import { Dana, Ovo, Gopay, ShopeePay } from '@xsolla/xui-logos-brand';

export default function EWalletLogos() {
  return (
    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <Dana size={40} />
      <Ovo size={40} />
      <Gopay size={40} />
      <ShopeePay size={40} />
    </div>
  );
}
```

### Checkout Footer

```tsx
import * as React from 'react';
import { Visa, Mastercard, AmericanExpress, Paypal } from '@xsolla/xui-logos-brand';

export default function CheckoutFooter() {
  return (
    <div style={{
      padding: 16,
      borderTop: '1px solid #e0e0e0',
      textAlign: 'center'
    }}>
      <p style={{ fontSize: 12, color: '#666', marginBottom: 8 }}>
        Secure payment powered by
      </p>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
        <Visa size={32} aria-label="Visa" />
        <Mastercard size={32} aria-label="Mastercard" />
        <AmericanExpress size={32} aria-label="American Express" />
        <Paypal size={32} aria-label="PayPal" />
      </div>
    </div>
  );
}
```

## API Reference

### Brand Logo Components

Each brand logo component accepts the same props:

**BrandLogoProps:**

| Prop | Type | Default | Description |
| :--- | :--- | :------ | :---------- |
| size | `number` | `24` | Size in pixels (width and height). |
| width | `number` | - | Width override (takes precedence over size). |
| height | `number` | - | Height override (takes precedence over size). |
| className | `string` | - | CSS class name. |
| style | `CSSProperties` | - | Inline styles. |
| data-testid | `string` | - | Test ID (web). |
| testID | `string` | - | Test ID (React Native). |
| aria-label | `string` | - | Accessible label. |
| aria-hidden | `boolean` | `true` if no aria-label | Hide from screen readers. |

## Available Logos (500+)

### Credit Cards
`Visa`, `Mastercard`, `AmericanExpress`, `Discover`, `Jcb`, `Dinersclub`, `Unionpay`, `Maestro`, `Elo`, `Hipercard`

### Digital Wallets
`Paypal`, `ApplePay`, `GooglePay`, `SamsungPay`, `Alipay`, `WechatPay`, `Dana`, `Ovo`, `Gopay`, `ShopeePay`, `GrabPay`, `LinePay`, `KakaoPay`

### Banks
`Hsbc`, `Bnpparibas`, `Citibank`, `Santander`, `Barclays`, `Ing`, `Rabobank`, `Commerzbank`

### Mobile Payments
`Boku`, `Fortumo`, `Paygarden`

### Cryptocurrency
`Bitpay`, `Crypto`

### Buy Now Pay Later
`Klarna`, `Afterpay`, `Affirm`, `Zip`

### Regional Payment Methods
`Blik` (Poland), `Ideal` (Netherlands), `Bancontact` (Belgium), `Sofort` (Germany), `Trustly` (Nordics), `Pix` (Brazil)

### Retail Stores
`SevenEleven`, `FamilyMart`, `Lawson`, `Ministop`, `Indomaret`, `Alfamart`

## Tree Shaking

Import individual logos for optimal bundle size:

```tsx
// Good - only imports needed logos
import { Visa, Mastercard } from '@xsolla/xui-logos-brand';

// Avoid - imports all logos
import * as BrandLogos from '@xsolla/xui-logos-brand';
```

## Accessibility

- Logos are hidden from screen readers by default (`aria-hidden="true"`)
- Use `aria-label` when the logo conveys meaningful information
- For payment method lists, consider adding visible text labels alongside logos
- When used in selection contexts, the parent button should have the accessible label
