Footer
======

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

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/footer/footer.scss'`

| Name | Description | Default |
|:--- | :--- | :--- |
| editorsHtml | string | \- |
| copyright | string | \- |
| linkGroups | FooterLinkList\[\] | \- |
| rudolf\* | { imgUrl: string; text: string; } | \- |
| buttons | Footerbutton\[\] | \- |
| forcePx | boolean | \- |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |

```jsx
<Footer
  buttons={[
    {
      attributes: {
        rel: 'nofollow'
      },
      text: 'Byt version'
    },
    {
      attributes: {
        rel: 'nofollow'
      },
      classNames: 'story-hidden-mobile',
      text: 'Mobil'
    },
    {
      attributes: {
        rel: 'nofollow'
      },
      classNames: 'story-hidden-tablet',
      text: 'Tablet'
    },
    {
      attributes: {
        rel: 'nofollow'
      },
      classNames: 'story-hidden-desktop',
      text: 'Webb'
    },
    {
      attributes: {
        id: 'site-footer__cookie-settings'
      },
      classNames: 'story-hidden-tablet',
      text: 'Cookie-inställningar'
    }
  ]}
  copyright="&copy; Dagens Nyheter AB 2023"
  editorsHtml="<p>Chefredaktör och ansvarig utgivare:&nbsp;Peter Wolodarski | Redaktionschef:&nbsp;Anna Åberg | Vd:&nbsp;Anders Eriksson | Administrativ redaktionschef:&nbsp;Fredrik Björnsson | Biträdande redaktionschef:&nbsp;Matilda E Hanson | Utrikeschef:&nbsp;Pia Skagermark | Kulturchef:&nbsp;Björn Wiman | Politisk redaktör:&nbsp;Amanda Sokolnicki | Chef DN.se:&nbsp;Anna Kallenberg <br /> Dagens Nyheter – en del av Bonnier News <br />Bonnier News org.nr 559080-0917</p>"
  linkGroups={[
    {
      links: [
        {
          href: '/app/',
          text: 'DN:s appar'
        },
        {
          href: 'https://etidning.dn.se/',
          text: 'e-DN'
        },
        {
          href: '/korsord/',
          text: 'Korsord'
        },
        {
          href: 'https://arkivet.dn.se/',
          text: 'Arkivet'
        },
        {
          href: '/insandare/',
          text: 'Insändare'
        },
        {
          href: '/nyhetsbrev/',
          text: 'Nyhetsbrev'
        },
        {
          href: '/foljer/',
          text: 'Följ ämnen och skribenter'
        }
      ],
      title: 'Ta del av DN'
    },
    {
      attributes: {
        'data-hide-promo': ''
      },
      links: [
        {
          href: 'https://prenumerera.dn.se/bli-prenumerant/',
          text: 'Bli prenumerant'
        },
        {
          href: 'https://id.dn.se/konto/',
          text: 'Kundservice'
        },
        {
          href: 'https://id.dn.se/konto/',
          text: 'Min prenumeration'
        },
        {
          href: 'https://id.dn.se/konto/?nextUrl=/vanliga-fragor/dn/',
          text: 'Vanliga frågor'
        },
        {
          href: 'https://id.dn.se/konto/?nextUrl=/kontakt/dn/',
          text: 'Kontakta kundservice'
        },
        {
          href: 'https://erbjudanden.dn.se/',
          text: 'Kunderbjudanden'
        }
      ],
      title: 'Kundservice'
    },
    {
      links: [
        {
          href: '/kontakt/',
          text: 'Kontakta oss'
        },
        {
          href: 'https://dngranskar.dn.se/',
          text: 'Tipsa DN'
        },
        {
          href: 'https://gdpr.bonniernews.se/cookiepolicy',
          text: 'Om cookies'
        },
        {
          href: 'https://gdpr.bonniernews.se/personuppgiftspolicy/',
          text: 'Personuppgiftspolicy'
        },
        {
          href: 'https://dn.ocast.com/',
          text: 'Annonsera'
        },
        {
          attributes: {
            rel: 'nofollow noopener',
            target: '_blank'
          },
          href: 'https://iabsverige.se/goldstandard/',
          text: 'IAB Sweden Gold Standard'
        },
        {
          href: 'javascript:window.location.href='mailto:adops@bonniernews.se'',
          text: 'Anmäl störande/felaktig annons'
        }
      ],
      title: 'Om DN'
    },
    {
      links: [
        {
          href: 'https://instagram.com/dagens_nyheter',
          text: 'Instagram'
        },
        {
          href: 'https://www.youtube.com/@DagensNyheterDN',
          text: 'Youtube'
        },
        {
          href: 'https://facebook.com/dn.se',
          text: 'Facebook'
        },
        {
          href: 'https://twitter.com/dagensnyheter',
          text: 'Twitter'
        },
        {
          href: 'https://www.tiktok.com/@dagensnyheterdn',
          text: 'TikTok'
        }
      ],
      title: 'Följ oss'
    }
  ]}
  rudolf={{
    imgUrl: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22140%22%20height%3D%22140%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20140%20140%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%20%20%20%20%20%20%20%20%23holder%20text%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20%2300000%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20sans-serif%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2028px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20400%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%3Cg%20id%3D%22holder%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23cccccc%22%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%3Cg%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ctext%20text-anchor%3D%22middle%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20dy%3D%22.3em%22%3ERudolf%3C%2Ftext%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fsvg%3E',
    text: 'Punkten efter Dagens Nyheter har funnits med allt sedan det första numret 23 december 1864. Grundaren Rudolf Wall lär ha satt dit den med tanken att Dagens Nyheter inte bara är ett namn. Det är också en avslutad mening, ett konstaterande av vad som hänt. Därför sätter vi punkt även i vår tid.'
  }}
/>
```