import { Meta } from '@storybook/blocks';

<Meta title="Docs/Configuration" />

# Configuration

Some behavior of the renderer can be adjusted by passing a config object to the config prop of JSONArticle. This is completely optional.

## Available config options

| Config key             | Description                                                                                                                                                                                                                                        |
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `locale`               | The ISO language code or complete `[language code]-[region code]` code to be use, decides if the document direction should be right-to-left or left-to-right.                                                                                      |
| `direction`            | Decides if the document direction should be right-to-left or left-to-right. Overrides the automatic direction infered from locale.                                                                                                                 |
| `linkComponent`        | It's possible to provide a custom link component to replace the standard HTML `<a>`, for example `"next/link"` for Next.js apps                                                                                                                    |
| `imageComponent`       | It's possible to provide a custom link component to replace the standard HTML `<img>`, for example `"next/image"` for Next.js apps                                                                                                                 |
| `hotspotLinksPosition` | The value `HotspotLinksPosition.overlay` (or `0`) is the default and shows the links next to the hotspot marker. `HotspotLinksPosition.bottom` (or `1`) shows the links below the image map. `HotspotLinksPosition.hidden` (or `4`) shows no links |
| `assets`               | Configures how asset paths should be manipulated                                                                                                                                                                                                   |
| `assets.basePath`      | If provided adds the base path in front of any non-absolute asset URL:s. If a `replace` RegExp is provided it will instead replace the pattern matching the replace RegExp with this value                                                         |
| `assets.replace`       | RegExp for replacing path placeholders in URL:s                                                                                                                                                                                                    |
| `assets.resizeParam`   | URL parameter used to request images of certain size, eg. `"imwidth"` for Akamai Image Manager.                                                                                                                                                    |
| `icons.tip`            | Custon Icon for InfoBox of type `tip`                                                                                                                                                                                                              |
| `icons.note`           | Custon Icon for InfoBox of type `note`                                                                                                                                                                                                             |
| `icons.important`      | Custon Icon for InfoBox of type `important`                                                                                                                                                                                                        |
| `icons.warning`        | Icon for InfoBox of type `warning`                                                                                                                                                                                                                 |
| `icons.chevron`        | Icon for ImageMapHotspot                                                                                                                                                                                                                           |
| `icons.warning`        | Icon for InfoBox of type `warning`                                                                                                                                                                                                                 |
| `disableVideo`         | Internal, only for tests                                                                                                                                                                                                                           |
| `disableFootNoteLink`  | Disable internal linking between footnotes, jsut renders them as plain text.                                                                                                                                                                       |
| `strings`              | Strings used in some components (Useful for internationalization reasons)                                                                                                                                                                          |

### Supported Strings (properties of the `strings` object)

| String Key               | Description                                | Default Value       |
| ------------------------ | ------------------------------------------ | ------------------- |
| `animation.replay`       | The replay button label text               | `"Replay"`.         |
| `footnote.backToContent` | The back to content link text in footnotes | `"Back to content"` |

## Example configuration

### General case

```jsx
<JSONArticle
  theme={Theme.VOLVO}
  config={{
    locale: 'en-GB',
    direction: 'ltr',
    linkComponent: (props) => {
      return <a {...props} />;
    },
    imageComponent: (props) => {
      return <img {...props} />;
    },
    hotspotLinksPosition: HotspotLinksPosition.bottom,
    assets: {
      basePath: 'assets/',
      replace: /replace-with-this-with-basePath/,
      resizeParam: 'imwidth',
    },
    icons: {
      tip: 'https://www.volvocars.com/static/shared/icons/v2/info-32.svg#light-secondary',
      note: 'https://www.volvocars.com/static/shared/icons/v2/info-32.svg#light-secondary',
      important:
        'https://www.volvocars.com/static/shared/icons/v2/info-32.svg#light-action',
      warning:
        'https://www.volvocars.com/static/shared/icons/v2/car-driveralert-32.svg#light-alert',
    },
  }}
  data={
    {
      /* ... */
    }
  }
/>
```

### Updating the strings

```tsx
<JSONArticle
  theme={Theme.VOLVO}
  config={{
    locale: 'pt-BR',
    direction: 'ltr',
    linkComponent: (props) => {
      return <a {...props} />;
    },
    imageComponent: (props) => {
      return <img {...props} />;
    },
    hotspotLinksPosition: HotspotLinksPosition.overlay,
    strings: {
      'animation.replay': 'Recomeçar',
      'footnote.backToContent': 'Voltar ao conteúdo',
    },
  }}
  data={
    {
      /* ... */
    }
  }
/>
```

---

Next: [Themes](/story/docs-themes--page)