Version Packages

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@obosbbl/grunnmuren-tailwind@2.4.0

Minor Changes

• 440543f: ## New classes for layout grids
  You can now use the classes layout-grid-gap-x, layout-grid, layout-grid-container and layout-subgrid-1-layout-subgrid-12 to set up layout grids pages so that all your content aligns.

  layout-grid-gap-x

  Defines the layout grid column spacing responsively.

  layout-grid

  Sets up a responsive 14 column grid with layout-grid-gap-x.

  layout-grid-container

  Combines layout-grid with the container class, which makes up the new page container.

  layout-subgrid-1-layout-subgrid-12

  Until there is better support for subgrid in CSS, you can use these classes to set up subgrids that aligns with layout-grid.

Patch Changes

• 1c04f75: Extract styles for the <LinkList> components to component classes. This makes them reusable outside React, and makes the implementation and CSS for the component more readable.
• 0f8cd6d: Styles for headings and icons inside link lists.

@obosbbl/grunnmuren-react@3.2.1

Patch Changes

• 0f8cd6d: ## Breaking Beta change
  The <LinkList> API has now been refactored to support headings inside link lists.

  • <LinkListItem> no longer supports link props, the component must now receive a <Link> as a child to which link props are passed
  • The isExternal prop has been removed <LinkListItem>. External links are now identified byt the rel prop on the <Link> child (e.g <Link rel="external">)

  Before

  <LinkList>
    <LinkListItem href="/medlem">Les mer</LinkListItem>
    <LinkListItem download href="/medlemsvilkar.pdf">
      Medlemsvilkår
    </LinkListItem>
    <LinkListItem
      href="https://www.tryg.no/forsikringer/fordeler-hos-tryg/bruk-medlemsfordelene-dine/obos/index.html?cmpid=obos_tryggjennomlivet"
      rel="external"
    >
      Tryg forsikring
    </LinkListItem>
  </LinkList>

  Now

  <LinkList>
    <LinkListItem>
      <Link href="/bolig">Bolig</Link>
    </LinkListItem>
    <LinkListItem>
      <Link href="/bank" download href="/medlemsvilkar.pdf">
        Medlemsvilkår
      </Link>
    </LinkListItem>
    <LinkListItem>
      <Link
        href="/medlem"
        href="https://www.tryg.no/forsikringer/fordeler-hos-tryg/bruk-medlemsfordelene-dine/obos/index.html?cmpid=obos_tryggjennomlivet"
        rel="external"
      >
        Tryg forsikring
      </Link>
    </LinkListItem>
  </LinkList>

  Use Headings (with links)

  <LinkListContainer>
    <Heading level={2}>
      <Link href="/om">OBOS</Link>
    </Heading>
    <LinkList>
      <LinkListItem>
        <Link href="/bolig">Bolig</Link>
      </LinkListItem>
      <LinkListItem>
        <Link href="/bank">Bank</Link>
      </LinkListItem>
      <LinkListItem>
        <Link href="/medlem">Medlem</Link>
      </LinkListItem>
    </LinkList>
  </LinkListContainer>

• 1c04f75: # Breaking Beta Change
  Exposing <LinkListContainer> as part of the <LinkList> API. This allows for easier customization and flexibility. Since it is now possible to style the container and the list individually. This means you can still just render shorter lists (less than 6 LinkListItems) like before:

  <LinkList>
    <LinkListItem href="/bolig">Bolig</LinkListItem>
    <LinkListItem href="/bank">Bank</LinkListItem>
    <LinkListItem href="/medlem">Medlem</LinkListItem>
  </LinkList>

  But the <LinkList> itself will no longer divide larger list (more than 5 LinkListItems) into multiple columns like before. For that you will now need to wrap it in the <LinkListContainer>:

  <LinkListContainer>
    <LinkList>
      <LinkListItem href="/konsernledelsen">Konsernledelsen</LinkListItem>
      <LinkListItem href="/styret">Styret</LinkListItem>
      <LinkListItem href="/representantskapet">Representantskapet</LinkListItem>
      <LinkListItem href="/boligpriser-og-statistikk">
        Boligpriser og statistikk
      </LinkListItem>
      <LinkListItem href="/investor-relations">Investor Relations</LinkListItem>
      <LinkListItem href="/digital-arsrapport">Digital årsrapport</LinkListItem>
    </LinkList>
  </LinkListContainer>

  This also paves way for supporting <Heading> inside the <LinkListContainer>, above the <LinkListContainer>. Stay tuned!

• 0f8cd6d: Better screen reader support in the <Link> component: annonuce external links.