# ShareBar

A row of social share buttons (X, Facebook, LinkedIn, email, copy link) plus an optional licensing button, mirroring Reuters.com's share toolbar.

**Category:** Components/Page furniture/ShareBar

**Import:** `import { ShareBar } from '@reuters-graphics/graphics-components'`

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `url` | `string` | — |  | Canonical URL to share. When omitted, the live `window.location.href` is read at click time so a shared link reproduces the reader's current view. |
| `headline` | `string` | `''` |  | Headline used as the share text and email subject. |
| `licensingUrl` | `string` | `'https://www.reutersagency.com/en/licensereuterscontent/?utm_medium=rcom-article-media&utm_campaign=rcom-rcp-lead'` |  | Destination for the "Purchase Licensing Rights" button. |
| `showLicensing` | `boolean` | `true` |  | Hide the "Purchase Licensing Rights" button when false. |
| `id` | `string` | `''` |  | ID on the containing block. |
| `class` | `string` | `'fmy-5'` |  | Extra classes on the containing block. |

## Examples

### Demo

```svelte
<ShareBar
  url="https://www.reuters.com/graphics/example-story/"
  headline="An example Reuters graphic"
/>
```

### Without licensing button

```svelte
<ShareBar
  url="https://www.reuters.com/graphics/example-story/"
  headline="An example Reuters graphic"
  showLicensing={false}
/>
```

### Custom licensing URL

```svelte
<ShareBar
  url="https://www.reuters.com/graphics/example-story/"
  headline="An example Reuters graphic"
  licensingUrl="https://www.reutersagency.com/en/licensereuterscontent/"
/>
```

## Documentation

# ShareBar

The `ShareBar` component shows a row of share buttons — X, Facebook, LinkedIn, Email and Copy link — alongside an optional **Purchase Licensing Rights** button, echoing the share toolbar on Reuters.com stories.

The social buttons open the platform's share dialog in a popup window, Email opens the reader's mail client, and Copy link writes the URL to the clipboard with a brief "Link copied" confirmation. The clipboard copy uses an `execCommand` fallback so it still works inside cross-origin iframes (how Reuters embeds graphics), where the async Clipboard API is blocked.

When you don't pass a `url`, the component reads the live `window.location.href` at click time, so a shared link reproduces the reader's current view.

```svelte
<script>
  import { ShareBar } from '@reuters-graphics/graphics-components';
</script>

<ShareBar
  url="https://www.reuters.com/graphics/example-story/"
  headline="An example Reuters graphic"
/>
```

## Without the licensing button

Set `showLicensing={false}` to hide the **Purchase Licensing Rights** button and show only the share icons.

```svelte
<ShareBar headline="An example Reuters graphic" showLicensing={false} />
```