import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
import { Flex } from "../Flex";
import { Table } from "../Table";
import { IntegrationLogo } from "./IntegrationLogo";

<Meta title="Components/Logos/Integration Logo" component={IntegrationLogo} />

# Integration logo

A specific component to display the logo of a supported integration. This is
separate from VendorLogo because we need more control over the logo and its
size for rendering within the UI.

Each logo's size has been set to match it's current use case within the Comply
app (24 px tall), so in most cases, you shouldn't need to resize it. However,
the size can be changed by applying styles via `className` or `style`.

## Sizing

### With `size` prop

The easiest way to style `IntegrationLogo` is to use the `size` prop. This
prop defines the height of the icon (as well as the width if you are using the
`square` prop).

### With CSS

When styling the `height` property via CSS, the `width` will be calculated
automatically. When styling the `width`, however, the `height` will need to be
set to `auto` to be calculated automatically.

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

export const logos = [
  "addigy",
  "aws",
  "bamboohr",
  "bitbucket",
  "conveyor",
  "deploy",
  "events-api",
  "gcp",
  "github",
  "gitlab",
  "gsuite",
  "jamf",
  "jira",
  "jumpcloud",
  "okta",
  "onelogin",
  "salesforce",
  "slack",
  "zoom",
  "[ no match ]",
];

<Preview>
  <Story name="Integration logo">
    <div>
      <Table>
        <Table.Head>
          <Table.Row>
            <Table.HeaderCell sortable={false}>Logo</Table.HeaderCell>
            <Table.HeaderCell sortable={false}>Regular</Table.HeaderCell>
            <Table.HeaderCell sortable={false}>Square</Table.HeaderCell>
          </Table.Row>
        </Table.Head>
        <Table.Body>
          {logos.map((logo) => (
            <Table.Row key={logo}>
              <Table.Cell>{logo}</Table.Cell>
              <Table.Cell>
                <IntegrationLogo logo={logo} />
              </Table.Cell>
              <Table.Cell>
                <IntegrationLogo logo={logo} square />
              </Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    </div>
  </Story>
</Preview>

## `IntegrationLogo` Custom Props

These are the custom props that extend `React.SVGAttributes<SVGElement>`.

<Props of={IntegrationLogo} />

## Demos

### Simple Use case

<Preview>
  <Story name="IntegrationLogo Simple">
    <IntegrationLogo logo="gsuite" />
  </Story>
</Preview>

### Square logo

<Preview>
  <Story name="Square logo">
    <IntegrationLogo logo="okta" square />
  </Story>
</Preview>

### Size

<Preview>
  <Story name="Size">
    <div>
      <Flex className="mb-12 items-center justify-between">
        <IntegrationLogo logo="okta" size={24} />
        <IntegrationLogo logo="okta" size={48} />
        <IntegrationLogo logo="okta" size={72} />
      </Flex>
      <Flex className="items-center justify-between">
        <IntegrationLogo logo="okta" size={24} square />
        <IntegrationLogo logo="okta" size={48} square />
        <IntegrationLogo logo="okta" size={72} square />
      </Flex>
    </div>
  </Story>
</Preview>

### Okta logo with container

<Preview>
  <Story name="Okta logo with container">
    <Flex
      className="rounded w-12 h-12 items-center justify-center"
      style={{ backgroundColor: "#0a7ec2" }}
    >
      <IntegrationLogo
        logo="okta"
        color="white"
        style={{ width: "42px", height: "auto" }}
      />
    </Flex>
  </Story>
</Preview>

### Jamf logo with container

<Preview>
  <Story name="Jamf logo with container">
    <Flex
      className="rounded w-12 h-12 items-center justify-center"
      style={{ backgroundColor: "#434a54" }}
    >
      <IntegrationLogo logo="jamf" size={32} square />
    </Flex>
  </Story>
</Preview>