- GitHub: [BonnierNews/dn-design-system/../web/src/components/modal](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/modal)
- Storybook: [Modal](https://designsystem.dn.se/?path=/docs/basic-modal--docs)
- Storybook (Latest): [Modal](https://designsystem-latest.dn.se/?path=/docs/basic-modal--docs)

----

# Modal


## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
| title | String | no | | | Title in modal |
| modalType | String | no | standard, sheet | standard | Appearance of the modal |
| primaryButton | Object | no | text | | Object with text, href (optional), classNames (optional) and attributes (optional) |
| secondaryButton | Object | no | text | | Object with text, href (optional), classNames (optional) and attributes (optional). Set isCloseButton to true if you wanna close modal with this button |
| classNames | String | no | | | Ex. "my-special-class" |
| attributes | Object | no | | | Ex. { data-prop: value } |
| forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size

## Minimum requirement example

These are copy paste friendly examples to quickliy get started using a component.

### Nunjucks

```javascript
{% from '@bonniernews/dn-design-system-web/components/modal/modal.njk' import Modal %}

{% call Modal({title: "Rubrik", primaryButton: { text: "Text i knapp", href: "ww.url.se" }, secondaryButton: { text: "Text i knapp", isCloseButton: true } }) %}
  <p>Text i modalen</p>
{% endcall %}
```

### Scss

```scss
@use "@bonniernews/dn-design-system-web/components/modal/modal";
```

### Javascript

```javascript
import { initModal, openModal } from '@bonniernews/dn-design-system-web/components/modal/modal.js'
const modalEl = document.querySelector(".ds-modal");
initModal(modalEl);
openModal(modalEl);
```