- GitHub: [BonnierNews/dn-design-system/../web/src/components/byline-list-item](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/byline-list-item)
- Storybook: [Byline](https://designsystem.dn.se/?path=/docs/article-byline-list-item--docs)
- Storybook (Latest): [Byline](https://designsystem-latest.dn.se/?path=/docs/article-byline-list-item--docs)

----

# Byline List Item

The byline is a list item and should be wrapped in a list.

* variant:'follow' can render both a button and a link

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|variant | String | yes | follow, link, direkt | | |
|authorName | String | yes | | | |
|bylineImage | HTML | no | | | Html image from bang. The component only makes the image round. Scaling is up to the user. Should be 44px for non retina screens. |
|role | String | no | | | Used in variant:link |
|authorPageUrl | String | no | | | For variant:button an inner link can be used in combination with a button, for other variants an outer link is used |
|followable | Boolean | no | true, false | true | If true the toggle button to follow will be shown when using variant:follow. |
|followed | Boolean | no | true, false | false | If true the toggle button will be in "selected" state. Depends on followable parameter. |
|border | Boolean | no | true, false | true | If false the border will not be shown. Used to remove border from the last item or direkt bylines  |
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|elementAttributes | Object | no | | | Sets attributes on actual toggle element and not byline list item. Same structure as attributes above, for accessability reasons it's important to send in "aria-label": "Följ " + byline.name |
|linkAttributes | Object | no | | | Sets attributes on the link element. |
|classNames | String | no | | | Ex. "my-special-class" |
|elementClassNames | String | no | | | Sets classes on actual toggle element and not byline list item. Same structure as classNames above |
|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size

## 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/byline-list-item/byline-list-item.njk' import BylineListItem %}

{{ BylineListItem({
  variant: variant,
  bylineImage: imageHtml(),
  authorName: authorName,
  role: role,
  authorPageUrl: authorPageUrl,
  followable: followable,
  border: border,
  attributes: attributes,
  elementAttributes: elementAttributes,
  elementClassNames: elementClassNames,
  classNames: "",
  forcePx: false
})}}
```

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/components/byline-list-item/byline-list-item";
```

### Javascript

```javascript
import dsButtonToggle from '@bonniernews/dn-design-system-web/components/button/button-interactions.js'
const toggleElements = Array.from(document.getElementsByClassName("ds-btn--toggle"));
dsButtonToggle(toggleElements);
```