# 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
```

## 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 for testing frameworks. On web this renders as `data-testid`; on React Native it renders as `testID`. |
| 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
