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

----

# GroupHeader

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|title | string | yes | | | The title text |
|type | string | no | icon, link, toggle, arrows | icon | The type of interactive element added to the header |
|variant | string | no | bauta, default | | The design variant, if not bauta the group header will get the 'standard' design |
|mediaHtml | string | no | | | The image markup for the header |
|href | string | no | | | If given, the title is rendered as a link |
|linkText | string | no | | | The link text to render (only for types `link` and `direkt`) |
|showBottomBorder | boolean | no | | | If true there will be a bottom border |
|toggleText | text | no | | | `text` parameter to ToggleButton (only for type `toggle`) |
|toggleSelectedText | text | no | | | `selectedText` parameter to ToggleButton (only for type `toggle`) |
|toggleSelected | boolean | no | | | `selected` parameter to ToggleButton (only for type `toggle`) |
|toggleLoading | boolean | no | | | `loading` parameter to ToggleButton (only for type `toggle`) |
|toggleClassNames | text | no | | | `classNames` parameter to ToggleButton (only for type `toggle`) |
|toggleAttributes | text | no | | | `attributes` parameter to ToggleButton (only for type `toggle`) |
|classNames | String | no | | | Ex. "my-special-class" |
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |

NB: The `arrows` type is only active in desktop environments. It is equivalent to `link` or `icon` in non-desktop environments, depending on if the `linkText` parameter is also given.

Depending on type, either the `toggle-*` or `linkText` parameters are allowed. In `icon` and `link` mode, the `href` parameter is required to show the ornament.

The type `toggle` is (currently) not allowed if variant is bauta.

## Minimum requirement example

### Nunjucks

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

```html
{% from '@bonniernews/dn-design-system-web/components/group-header/group-header.njk' import GroupHeader %}

{{ GroupHeader({
  title: "Dagens Nyheter",
  href: "https://www.dn.se/"
}) }}
```

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/components/group-header/group-header";
```

### JS
If you use the `toggle` type, you might need to initiate that component, [as per the documentation](https://designsystem.dn.se/?path=/readmetab/basic-buttons-buttontoggle--docs).