import {
  Meta,
  Preview,
  Props,
  Story,
  SourceState,
} from "@storybook/addon-docs/blocks";
import { VendorLogo } from "./VendorLogo";
import { ICON_TYPE } from "../Icon";

export const aptible = {
  name: "Aptible",
  logo: "https://logo.clearbit.com/aptible.com",
};

export const sizes = [40, 20, 14, 10, 6, 4];

<Meta title="Components/Logos/Vendor Logo" component={VendorLogo} />

# VendorLogo

The `VendorLogo` component shows a square image with a styled fallback appearance to the initial of the provided vendor name.

<Preview withSource={SourceState.OPEN}>
  <Story name="VendorLogo">
    <VendorLogo
      src="https://logo.clearbit.com/aptible.com"
      vendorName="Aptible"
    />
  </Story>
</Preview>

## Usage

```jsx
import { VendorLogo } from "@aptible/arrow-ds";
```

### Custom Props

These are the custom props that extend [`BoxProps`](/?path=/docs/components-box--box#all-props).

<Props of={VendorLogo} />

## Demos

### Sizes

<Preview isColumn>
  <Story name="Size4">
    <VendorLogo
      src="https://logo.clearbit.com/aptible.com"
      vendorName="Aptible"
      size={4}
    />
  </Story>
  <Story name="Size6">
    <VendorLogo
      src="https://logo.clearbit.com/aptible.com"
      vendorName="Aptible"
      size={6}
    />
  </Story>
  <Story name="Size10">
    <VendorLogo
      src="https://logo.clearbit.com/aptible.com"
      vendorName="Aptible"
      size={10}
    />
  </Story>
  <Story name="Size14">
    <VendorLogo
      src="https://logo.clearbit.com/aptible.com"
      vendorName="Aptible"
      size={14}
    />
  </Story>
  <Story name="Size20">
    <VendorLogo
      src="https://logo.clearbit.com/aptible.com"
      vendorName="Aptible"
      size={20}
    />
  </Story>
  <Story name="Size40">
    <VendorLogo
      src="https://logo.clearbit.com/aptible.com"
      vendorName="Aptible"
      size={40}
    />
  </Story>
</Preview>

### With Badge

<Preview isColumn>
  <Story name="WithBadge4">
    <VendorLogo
      src="https://logo.clearbit.com/aptible.com"
      vendorName="Aptible"
      size={4}
    >
      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
    </VendorLogo>
  </Story>
  <Story name="WithBadge6">
    <VendorLogo
      src="https://logo.clearbit.com/aptible.com"
      vendorName="Aptible"
      size={6}
    >
      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
    </VendorLogo>
  </Story>
  <Story name="WithBadge10">
    <VendorLogo
      src="https://logo.clearbit.com/aptible.com"
      vendorName="Aptible"
      size={10}
    >
      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
    </VendorLogo>
  </Story>
  <Story name="WithBadge14">
    <VendorLogo
      src="https://logo.clearbit.com/aptible.com"
      vendorName="Aptible"
      size={14}
    >
      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
    </VendorLogo>
  </Story>
  <Story name="WithBadge20">
    <VendorLogo
      src="https://logo.clearbit.com/aptible.com"
      vendorName="Aptible"
      size={20}
    >
      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
    </VendorLogo>
  </Story>
  <Story name="WithBadge40">
    <VendorLogo
      src="https://logo.clearbit.com/aptible.com"
      vendorName="Aptible"
      size={40}
    >
      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
    </VendorLogo>
  </Story>
</Preview>

### Missing Logo

<Preview isColumn>
  <Story name="MissingLogo4">
    <VendorLogo src="http://localhost" vendorName="Aptible" size={4} />
  </Story>
  <Story name="MissingLogo6">
    <VendorLogo src="http://localhost" vendorName="Aptible" size={6} />
  </Story>
  <Story name="MissingLogo10">
    <VendorLogo src="http://localhost" vendorName="Aptible" size={10} />
  </Story>
  <Story name="MissingLogo14">
    <VendorLogo src="http://localhost" vendorName="Aptible" size={14} />
  </Story>
  <Story name="MissingLogo20">
    <VendorLogo src="http://localhost" vendorName="Aptible" size={20} />
  </Story>
  <Story name="MissingLogo40">
    <VendorLogo src="http://localhost" vendorName="Aptible" size={40} />
  </Story>
</Preview>

### Missing Logo With Badge

<Preview isColumn>
  <Story name="MissingLogoWithBadge4">
    <VendorLogo src="http://localhost" vendorName="Aptible" size={4}>
      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
    </VendorLogo>
  </Story>
  <Story name="MissingLogoWithBadge6">
    <VendorLogo src="http://localhost" vendorName="Aptible" size={6}>
      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
    </VendorLogo>
  </Story>
  <Story name="MissingLogoWithBadge10">
    <VendorLogo src="http://localhost" vendorName="Aptible" size={10}>
      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
    </VendorLogo>
  </Story>
  <Story name="MissingLogoWithBadge14">
    <VendorLogo src="http://localhost" vendorName="Aptible" size={14}>
      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
    </VendorLogo>
  </Story>
  <Story name="MissingLogoWithBadge20">
    <VendorLogo src="http://localhost" vendorName="Aptible" size={20}>
      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
    </VendorLogo>
  </Story>
  <Story name="MissingLogoWithBadge40">
    <VendorLogo src="http://localhost" vendorName="Aptible" size={40}>
      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
    </VendorLogo>
  </Story>
</Preview>