designsystemet icon indicating copy to clipboard operation
designsystemet copied to clipboard

New component documentation page

Open mrosvik opened this issue 7 months ago • 3 comments

Epic for creating new component documentation pages in the Storefront.

Relevant tasks:

  • [x] Investigate a technical structure that is robust and scalable.
  • [x] PR: #3966
  • [ ] Design: https://www.figma.com/design/hpNSt9jMeVTH46Fh9TENBE/Storefront?node-id=3661-11&t=Ui5W5vfq7jKTV1Vo-1

mrosvik avatar Jun 13 '25 10:06 mrosvik

In #3728 I tested out Sandpack, which seemed a bit cumbersome to work with. It does however give us a lot of functionality, and makes it super easy to grab the code displayed, and transfer it to codesandbox.

Sanpack might come with some drawback, since we need to investigate it for cookie usage.

I recently found react-live, which seems like just what we need. It has less functionality, but we don't need a lot Will test this in a separate PR

Barsnes avatar Aug 18 '25 10:08 Barsnes

It looks like react-live is a good fit for us. It gives us good flexibility, and is lightweight to use. In our testing we have not met any huge roadblocks.

We will go ahead and work with it, and fledge out #3966 with how we want everything to work

Barsnes avatar Sep 01 '25 07:09 Barsnes

Before closing this we should ensure #3994 also is done.

mrosvik avatar Nov 03 '25 13:11 mrosvik

Next, for the Tilgjengelighet-tab, try it out on a couple of components (Buttons, ..?), based on the template https://github.com/digdir/designsystemet/wiki/Utkast-%E2%80%90-Tilgjengelighet%E2%80%90dok-p%C3%A5-komponenter

frankdahle avatar Dec 01 '25 09:12 frankdahle