import { Meta, ArgTypes, Story } from "@storybook/addon-docs/blocks";
import * as LogoStories from "./Logo.stories";
import { Logo } from "./Logo";

<Meta of={LogoStories} />

# Logo

The `Logo` component is used for wherever brand logo is required to be displayed

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { Logo } from "@simplybusiness/mobius";
```

`<Logo>` by default will fill the space of the container. To restrict, set `width` on the container or the component.

Logo is often combined with an `<a>` tag. To make the component accessible, add `aria-label` attribute to it. For example:

```jsx
<a href="https://www.simplybusiness.co.uk" aria-label="Simply Business">
  <Logo />
</a>
```

### Default

<Story of={LogoStories.Default} />

## Props

<ArgTypes of={Logo} />

## Component HTML Structure and Class names

The following HTML is rendered for a Logo:

```html
<svg width="144" className="mobius-logo" viewBox="0 0 144 37">...</svg>
```
