@kystverket/styrbord 1.12.0 → 1.13.2

package/README.md

@@ -35,128 +35,23 @@ Importering av enkeltkomponenter.
 import { Heading, Ingress, Tabs } from '@kystverket/styrbord';
 ```
 
-## Design Tokens
-
-Styrbords design tokens hentes fra [@Kystverket/styrbord-tokens](https://github.com/Kystverket/styrbord-tokens).
-
-## Endringslogg
-
-### 2026-06-22 -- v1.9.9
-
-Lagt inn en ny context for å hente filer som er lastet opp til RichTextArea, MarkdownToReact og FileUploader kalt `FileRetrieverContext`. Uten en provider til denne så vil komponentene fortsatt fungere, men preview av opplastede/refererte filer vil ikke bli vist.
-
-### 2026-06-09 -- v1.9.0
+### Språk og oversettelser
 
-Oppdatert RichTextArea og MarkdownToReact til å bruke FileUploader sin context for å håndtere henting av fil-informasjon gjennom `deriveFileInfosFromStorageIds`
+Applikasjoner som bruker Styrbord må wrappe alt med både `<SprakProvider>` (for å velge språk) og `<StyrbordTranslations>` (for å hente oversettelsene til Styrbord). Uten dette vil komponenter som for eksempel Footer vise nøkkelstrenger i stedet for oversatt tekst.
 
-### 2026-05-22 -- v1.7.2
+```tsx
+import { SprakProvider } from '@kystverket/sprak-react';
+import { STYRBORD_TRANSLATIONS_NAMESPACE, StyrbordTranslations } from '@kystverket/styrbord';
 
-Lagt inn bildehåndtering i RichTextArea og MarkdownToReact. Du laster opp bildet selv og legger inn en referanse-lenke i markdownen. Lenken tolkes i MarkdownToReact, slik at markdownen holdes så liten som mulig.
-
-### 2026-05-19 -- v1.7.0
-
-Etter mange problemer med implementasjon og styling av en DatePicker har vi gått til en native datepicker. Noen attributter på datepicker er ikke lenger nødvendige eller tilgjengelige.
-
-### 2026-04-14 -- v1.5.0
-
-- Oppdatert Header til å støtte 'applikasjoner'. For å overstyre LinkComponent som brukes (for å slippe full reload i f.eks. NextJS) kan man wrapper Header med HeaderContext.
-
-```ts
-<HeaderContext.Provider value={{ LinkComponent: Link }}>
-  <Header
-    logo={{ variant: 'selvbetjening', url: '/' + language }}
-    slots={{ postLinks: <LanguageSwitcher language={language} /> }}
-  />
-</HeaderContext.Provider>
+function App() {
+  return (
+    <SprakProvider locale="nb-NO">
+      <StyrbordTranslations>{/* resten av applikasjonen */}</StyrbordTranslations>
+    </SprakProvider>
+  );
+}
 ```
 
-Alle linker er nå plassert i links propertyen. Linker som skal plasseres under profile må ha `position="profile"`. Det er slots for å sette inn egne komponenter i menyen som ikke er en link (for eksempel varselsbjelle).
-
-Header bruker nå hamburger-ikon for mobilmeny.
-
-Fullt navn vises ikke lenger, kun initialer. Initialer blir automatisk lagd basert på navn.
-
-### 2026-03-10 -- v1.4.0
-
-Endret fra StyrbordTranslationContext til å bruke @kystverket/sprak-react.
-
-Internt i Styrbord-komponenter kan man bruke følgende for å hente oversettelsesfunksjonen.
-
-```ts
-import { useStyrbordTranslation } from '~/translations';
-...
-const { t } = useTranslation();
-```
-
-Applikasjoner som bruker Styrbord må wrappe alt med både `<SprakProvider>` (for å velge språk) og `<StyrbordTranslations>` (for å hente oversettelsene til Styrbord).
-
-### 2026-01-13 -- v1.3.0
-
-#### Knekkende endring
-
-Fjernet parameteren language fra Header og Footer. For å endre språk i Styrbord-komponenter kan man nå bruke følgende context provider rundt hele applikasjonen.
-
-```jsx
-<StyrbordTranslationContext.Provider value={{ language: 'nb-NO' }}>...</StyrbordTranslationContext.Provider>
-```
-
-Internt i Styrbord-komponenter kan man bruke følgende for å hente oversettelsesfunksjonen.
-
-```ts
-import { useStyrbordTranslation } from '~/i18n/translations';
-...
-const { t } = useStyrbordTranslation();
-```
-
-### 2025-11-11 -- v1.2.1
-
-- Oppdatert Alert til å ikke være egenprodusert, men istedet være en variant av Alert fra Designsystemet. Deler av interfacet endres til å være likere Designsystemet (size).
-
-### 2025-11-11 -- v1.1.0
-
-- Oppdatert til Designsystemet versjon 1.7.2 fra 1.6.1.
-- Fjernet unødvendig dependency til @navikt/aksel-icons.
-
-### 2025-10-24 -- v1.0
-
-Offisielt versjon 1.0.
-
-- Fjernet all duplisering av CSS-variabler. Tidligere har vi for bakoverkompatibilitet duplisert alle Designsystemvariabler til en variabel uten `--ds-` foran. Disse variablene er nå ikke lenger tilstede. Versjon 1.0 var en god anledning til å rydde i dette.
-- `--spacing-#`-variablene er flyttet fra styrbord-tokens til styrbord. Skal ikke ha noen effekt. Oppfordrer til å bruke `--ds-size-#` over `--spacing-#`.
-
-### 2025-10-23
-
-Oppdatert til Designsystemet 1.6.1 fra 1.4.0.
-
-Endret Avatar.
-
-- Størrelser er nå `2x` og `3x` fra `xxs` og `xxxs`.
-- Endret fargevalg. `data-color` er nå kun vanlige farger, men man kan legge på `data-color-variant="surface-tinted"` for å få dusere farger.
-
-### 2025-10-16
-
-Footer har blitt endret. Den er ikke bakoverkompatibel, men siden footer stort sett settes en gang bør
-dette gå bra. Se [Footer.stories.tsx](https://github.com/Kystverket/styrbord/blob/main/src/components/kystverket/Footer/Footer.stories.tsx) for hvordan den skal brukes i din applikasjon.
-
-### 2025-09-08
-
-Box har fått noen endringer på fargene og interfacet. Dette er gjort for å gjøre default-fargene
-mer attraktive og bruke, og samtidig endre fargenavn til å matche variabelnavn fra Designsystemet.
-
-- Fargen `action` er fjernet og endret til `primary`.
-- Attributten `subtle` er fjernet. Default-farge er nå mye likere `subtle`.
-- Fargevarianter kan velges ved å sette `color="farge/variant"`. For å matche den gamle `action`-fargen
-  kan man ha `color="primary/active"`. Se Box-storyen for alle variantene.
-
-### 2025-08-15
-
-Arbeid for å gjøre Styrbord mindre forskjellig fra Designsystemet. Dette gjør at det forhåpentligvis blir lettere å lære, og lettere å ta i bruk dokumentasjonen til Designsystemet.
-
-- `<InputLabel>` er fjernet. Man kan bruke `<Label>` med `<LabelContent>` (ny) for å oppnå samme visning.
-- `<ErrorLabel>` er fjernet. Man kan bruke `<ValidationMessage>` (fra Designsystemet) for å oppnå samme visning.
-- `<Label>` (fra typografi) er fjernet fra vanlig eksport. Svært lite brukt, og blokkerer `<Label>`-komponenten fra Designsystemet. Har man fortsatt behov for den er den tilgjengelig som `<Typography.Label>`.
-- Overskrivingen av `<Card>` er fjernet. For å oppnå samme stil kan man plassere `<CardTitle>` (ny) i et Card.
-- Overskrivingen av `<Details>` er fjernet. Dette gjør at man må gi innhold til `<Details>` som komponenter og ikke attributter slik vi gjorde det før.
-- Tillater ikke lenger å sende en boolsk verdi til error attributter i input-komponenter.
+## Design Tokens
 
-Komponentene `<Button>`, `<Tabs>`, `<Select>`, `<NumberInput>`, `<TextInput>` og `<TextArea>` overskriver fortsatt noen Designsystem-komponenter med mer eller mindre inkompatible interface.
+Styrbords design tokens hentes fra [@Kystverket/styrbord-tokens](https://github.com/Kystverket/styrbord-tokens).

package/dist/src/components/kystverket/Header/headerContext.d.ts

@@ -5,8 +5,9 @@ export type HeaderLinkComponentProps = {
     children: ReactNode;
     onClick?: (e?: React.UIEvent | undefined) => void;
 };
+export type HeaderLinkComponent = (props: HeaderLinkComponentProps) => React.ReactElement;
 export interface HeaderContextProps {
-    LinkComponent: React.FC<HeaderLinkComponentProps>;
+    LinkComponent: HeaderLinkComponent;
 }
 export declare const HeaderContext: React.Context<HeaderContextProps>;
 export interface ApplicationHeaderContextProps {

package/dist/src/components/kystverket/Icon/Icon.stories.d.ts

@@ -1,7 +1,7 @@
 import type { StoryFn } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ material, filled, className, size, title }: import("~/components/kystverket/Icon/icon").MaterialIconProps) => React.JSX.Element;
+    component: ({ material, indicator, className, size, title, background }: import("~/components/kystverket/Icon/icon").MaterialIconProps) => React.JSX.Element;
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn, context: import("storybook/internal/csf").StoryContext) => React.JSX.Element)[];
     tags: string[];
     argTypes: {};
@@ -9,3 +9,4 @@ declare const meta: {
 export default meta;
 export declare const IconShowcase: StoryFn;
 export declare const IconSizing: StoryFn;
+export declare const IconIndicator: StoryFn;

package/dist/src/components/kystverket/Icon/icon.d.ts

@@ -1,11 +1,13 @@
+import type { StyrbordPaletteColor, StyrbordSemanticColor } from '@kystverket/styrbord-tokens/colors';
 import { IconId } from './icon.types';
 type IconSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
 export interface MaterialIconProps {
     material: IconId;
-    filled?: boolean;
+    indicator?: IconId;
     className?: string;
     size?: IconSize;
     title?: string;
+    background?: StyrbordPaletteColor | StyrbordSemanticColor;
 }
-declare const Icon: ({ material, filled, className, size, title }: MaterialIconProps) => React.JSX.Element;
+declare const Icon: ({ material, indicator, className, size, title, background }: MaterialIconProps) => React.JSX.Element;
 export default Icon;

package/dist/src/components/kystverket/Icon/icon.types.d.ts

@@ -1,2 +1,2 @@
-export declare const iconIdList: readonly ["add", "add_box", "add_location", "add_location_alt", "adjust", "alternate_email", "anchor", "apps", "archive", "arrow_back", "arrow_forward", "arrow_right_alt", "article", "calendar_month", "change_history", "chat", "check", "check_circle", "chevron_left", "chevron_right", "circle", "close", "cloud_alert", "cloud_done", "code_blocks", "content_copy", "data_table", "delete", "description", "directions_boat", "distance", "domain", "download", "edit", "edit_document", "edit_location", "edit_location_alt", "edit_square", "error", "event", "explore", "explore_nearby", "export_notes", "favorite", "file_map", "file_save", "folder_open", "format_align_center", "format_align_left", "format_align_right", "forward", "globe_uk", "groups", "image", "inbox", "info", "info_i", "keep", "keep_off", "keyboard_arrow_down", "keyboard_arrow_up", "language", "layers", "lightbulb", "link", "location_chip", "lock", "login", "logout", "mail", "map", "map_pin_heart", "match_case", "menu", "mode_cool", "more_vert", "move", "numbers", "open_in_new", "pan_zoom", "pending_actions", "person", "person_add", "person_pin", "person_pin_circle", "photo_camera", "picture_as_pdf", "pin_drop", "radio_button_checked", "radio_button_unchecked", "sailing", "save", "send", "settings", "settings_input_antenna", "severe_cold", "source_environment", "stylus", "text_snippet", "timeline", "upload", "video_library", "videocam", "view_list", "warning", "zoom_in_map", "zoom_out_map", "format_italic", "format_bold", "format_list_bulleted", "format_list_numbered", "format_align_justify", "undo", "redo", "visibility", "left_panel_close", "left_panel_open", "right_panel_close", "right_panel_open"];
+export declare const iconIdList: readonly ["add_box", "add_location_alt", "add_location", "add", "adjust", "alternate_email", "anchor", "apps", "archive", "arrow_back", "arrow_downward", "arrow_forward", "arrow_right_alt", "arrow_upward", "article", "assignment", "attach_file", "cached", "calendar_month", "change_history", "chat_add_on", "chat_bubble", "chat", "check_circle", "check", "chevron_left", "chevron_right", "circle", "close", "cloud_alert", "cloud_done", "code_blocks", "comment", "compare_arrows", "compare", "content_copy", "conversation", "data_table", "delete", "description", "difference", "directions_boat", "directory_sync", "distance", "domain", "download", "drafts", "edit_document", "edit_location_alt", "edit_location", "edit_square", "edit", "error", "event", "explore_nearby", "explore", "export_notes", "favorite", "file_map", "file_save", "folder_open", "format_align_center", "format_align_justify", "format_align_left", "format_align_right", "format_bold", "format_italic", "format_list_bulleted", "format_list_numbered", "forum", "forward_to_inbox", "forward", "globe_uk", "groups", "image", "inbox", "info_i", "info", "keep_off", "keep", "keyboard_arrow_down", "keyboard_arrow_up", "language", "layers", "left_panel_close", "left_panel_open", "lightbulb", "link", "location_chip", "lock", "login", "logout", "mail_shield", "mail", "manage_search", "map_pin_heart", "map", "mark_as_unread", "mark_chat_read", "mark_chat_unread", "mark_email_read", "mark_email_unread", "match_case", "menu", "mode_cool", "more_vert", "move_to_inbox", "move", "note_stack_add", "note_stack", "notification_add", "numbers", "open_in_new", "pan_zoom", "pending_actions", "person_add", "person_pin_circle", "person_pin", "person", "photo_camera", "picture_as_pdf", "pin_drop", "question_exchange", "radio_button_checked", "radio_button_unchecked", "redo", "reply_all", "reply", "right_panel_close", "right_panel_open", "sailing", "save", "send_and_archive", "send", "settings_input_antenna", "settings", "severe_cold", "sort", "source_environment", "stacked_email", "stylus", "sync", "text_compare", "text_snippet", "timeline", "undo", "upload", "video_library", "videocam", "view_list", "visibility", "warning", "zoom_in_map", "zoom_out_map"];
 export type IconId = (typeof iconIdList)[number];

package/dist/src/components/kystverket/SaksbehandlingShell/ItemCard/ItemCard.d.ts

@@ -0,0 +1,2 @@
+import type { ItemCardProps } from './ItemCard.types';
+export declare function ItemCard({ item, selected, onClick }: Readonly<ItemCardProps>): React.JSX.Element;

package/dist/src/components/kystverket/SaksbehandlingShell/ItemCard/ItemCard.types.d.ts

@@ -0,0 +1,6 @@
+import type { SaksbehandlingItem } from '../SaksbehandlingShell.types';
+export interface ItemCardProps {
+    item: SaksbehandlingItem;
+    selected?: boolean;
+    onClick?: () => void;
+}

package/dist/src/components/kystverket/SaksbehandlingShell/ItemList/ItemList.d.ts

@@ -0,0 +1,2 @@
+import type { ItemListProps } from './ItemList.types';
+export declare function ItemList({ items, selectedItemId, onSelectItemId }: Readonly<ItemListProps>): React.JSX.Element;

package/dist/src/components/kystverket/SaksbehandlingShell/ItemList/ItemList.types.d.ts

@@ -0,0 +1,6 @@
+import type { SaksbehandlingItem } from '../SaksbehandlingShell.types';
+export interface ItemListProps {
+    items: SaksbehandlingItem[];
+    selectedItemId?: string;
+    onSelectItemId: (id: string) => void;
+}

package/dist/src/components/kystverket/SaksbehandlingShell/SaksbehandlingShell.d.ts

@@ -0,0 +1,2 @@
+import type { SaksbehandlingShellProps } from './SaksbehandlingShell.types';
+export declare function SaksbehandlingShell({ headerContent, caseActions, itemActions, items, selectedItemId, onSelectItemId, comparisonContent, defaultItemListOpen, defaultComparisonOpen, children, className, }: Readonly<SaksbehandlingShellProps>): React.JSX.Element;

package/dist/src/components/kystverket/SaksbehandlingShell/SaksbehandlingShell.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryFn } from '@storybook/react-vite';
+import { SaksbehandlingShell } from './SaksbehandlingShell';
+declare const meta: {
+    title: string;
+    component: typeof SaksbehandlingShell;
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn, context: import("storybook/internal/csf").StoryContext) => React.JSX.Element)[];
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+export declare const Default: StoryFn<typeof SaksbehandlingShell>;

package/dist/src/components/kystverket/SaksbehandlingShell/SaksbehandlingShell.types.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import type { MaterialIconProps } from '../Icon/icon';
+export interface SaksbehandlingItem {
+    id: string;
+    title: string;
+    description?: string;
+    children?: ReactNode;
+    icon: MaterialIconProps['material'];
+    iconIndicator?: MaterialIconProps['indicator'];
+    iconColor?: MaterialIconProps['background'];
+}
+export interface SaksbehandlingShellProps {
+    /** Content for the header row. */
+    headerContent: ReactNode;
+    /** Actions related to the case as a whole, shown on the left of the toolbar. */
+    caseActions?: ReactNode;
+    /** Actions related to the currently selected item, shown on the right of the toolbar. */
+    itemActions?: ReactNode;
+    items: SaksbehandlingItem[];
+    selectedItemId?: string;
+    onSelectItemId: (id: string) => void;
+    /** Optional comparison section content. When omitted, the comparison panel and its toggle are not rendered. */
+    comparisonContent?: ReactNode;
+    /** Default open state of the item list panel. Default: `true`. */
+    defaultItemListOpen?: boolean;
+    /** Default open state of the comparison panel. Default: `false`. */
+    defaultComparisonOpen?: boolean;
+    /** Main section content for the currently selected item. */
+    children?: ReactNode;
+    className?: string;
+}

package/dist/src/components/kystverket/SideSheet/SideSheet.types.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-export type SideSheetSize = 'sm' | 'md' | 'lg' | '33%' | '50%' | '66%';
+export type SideSheetSize = 'sm' | 'md' | 'lg' | '33%' | '40%' | '50%' | '66%';
 export type SideSheetPlacement = 'left' | 'right';
 /**
  * - `overlay`: sheet slides over content (default). Can be pinned by the user via `pinnable`.

package/dist/src/main.d.ts

@@ -55,6 +55,8 @@ export { default as CompactDetails } from './components/kystverket/CompactDetail
 export type { CompactDetailsProps } from './components/kystverket/CompactDetails/CompactDetails.types';
 export { default as ClickableCard } from './components/kystverket/ClickableCard/ClickableCard';
 export type { ClickableCardProps, ClickableCardColor, ClickableCardVariant, } from './components/kystverket/ClickableCard/ClickableCard.types';
+export { SaksbehandlingShell } from './components/kystverket/SaksbehandlingShell/SaksbehandlingShell';
+export type { SaksbehandlingShellProps, SaksbehandlingItem, } from './components/kystverket/SaksbehandlingShell/SaksbehandlingShell.types';
 export { Button } from './components/designsystemet/Button/Button';
 export type { ButtonProps } from './components/designsystemet/Button/Button';
 export { IconButton } from './components/designsystemet/IconButton/IconButton';