feat: add StudioSearch component

[standeren]

Description

• add StudioSearch component.
• use new component in code list page in library.
• use new component in text editor.
• use new compone

Dashboard:

nt on dashboard.

Text-editor:

CodeLists in content library:

Related Issue(s)

• Support search for code lists in library #14273

Verification

• Your code builds clean without any errors or warnings
• Manual testing done (required)

[TomasEng]

Jeg ser at det er gjort på denne måten enkelte andre steder, men for å følge fasademønsteret, bør vi egentlig lage en egen komponent rundt designsystemkomponenten. Da kan vi også sette size='sm' som standard og ta i bruk WithoutAsChild på prop-typen.

[ErlingHauan]

Vi har et søkefelt på dashbordet også. Hvis det ikke er for mye jobb, kan du legge den til der i tillegg?

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.54%. Comparing base (1e059fd) to head (f2cc3c9).

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #14348   +/-   ##
=======================================
  Coverage   95.54%   95.54%           
=======================================
  Files        1862     1864    +2     
  Lines       24125    24134    +9     
  Branches     2785     2785           
=======================================
+ Hits        23050    23060   +10     
  Misses        817      817           
+ Partials      258      257    -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[TomasEng]

Var litt rask med å godkjenne denne. Se kommentar.

[TomasEng]

Når vi bruker label, må vi bruke htmlFor til å referere til riktig felt. Dette refererer til HTML-attributtet for. ID-en kan vi generere ved hjelp av useId.

Suggested change

	<Label>{label}</Label>
	<Search {...rest} size={size} ref={ref} />
	<Label htmlFor={id}>{label}</Label>
	<Search {...rest} id={id} size={size} ref={ref} />

Dette kan vi verifisere med en test som bruker screen.getByRole('searchbox', { name: label }) til å finne søkefeltet.

For øvrig lurer jeg på hva som er hensikten med StudioFieldset her?

[standeren]

Skal fikse!

StudiofieldSet la jeg til fordi DS hadde dette kodeeksempelet bare. Men jeg er på tynn is her, så godt mulig det ikke er riktig! https://storybook.designsystemet.no/iframe.html?viewMode=docs&id=komponenter-search--docs&globals=#med-label

[TomasEng]

I dette eksemplet bruker de Field, ikke Fieldset. Jeg går ut fra at dette er noe som er lagt til versjon 1 for å fikse dette med ID automatisk.

[TomasEng]

Vi bør ikke hardkode ID-en. En ID må være unik, så dette vil gjøre DOM-en ugyldig hvis siden inneholder flere søkefelter. Derfor bør vi generere en unik ID med useId. Vi bør også sjekke om det allerede er satt in ID i proppene. I så fall er det den som skal gjelde.

[TomasEng]

Suggested change

	it('should find search component with label name', () => {
	it('should render search field with label name', () => {