BylineList
==========

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

BylineList is a component that renders a list of bylines with optional media and titles. It is used for the sheet that displays if we click a byline with more than one author.

**This is only implemented in tsx. Nkj files are not implemented. They are still using the old list item component.**

The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/byline-list/byline-list.scss'`

| Name | Description | Default |
|:--- | :--- | :--- |
| bylines\* | BylineData\[\] | \- |
| showBorderOnLastItem | boolean | false |
| forcePx | boolean | \- |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |

```jsx
<BylineList
  bylines={[
    {
      authorId: '1',
      authorPageUrl: 'https://www.dn.se/av/peter-wolodarski',
      bylineImage: <ExamplePicture alt="Wolo" sizes="44px" src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=88:88&output-quality=60 88w" style={{aspectRatio: '1 / 1'}}/>,
      followable: false,
      name: 'Byline link',
      role: 'Grafik'
    },
    {
      authorId: '123',
      authorPageUrl: 'https://www.dn.se/av/peter-wolodarski',
      bylineImage: <ExamplePicture alt="Wolo" sizes="44px" src="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80" srcSet="https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=44:44&output-quality=80 44w, https://cached-images.bonnier.news/gcs/bilder/dn-author/i3v3p74rhqjfaaz5bh55j7plztzslpgpr3go52zr4q4dzdtyit3q-450x1020.png?interpolation=lanczos-none&crop=261:261;81,2&resize=88:88&output-quality=60 88w" style={{aspectRatio: '1 / 1'}}/>,
      followable: true,
      name: 'Test Testsson',
      role: 'Text'
    }
  ]}
 />
```