@norges-domstoler/dds-components 10.0.2 → 10.1.0

package/README.md

@@ -67,6 +67,9 @@ Tilgjengelige komponenter:
 - Select
 - SkipToContent
 - Spinner
+- Stack
+  - VStack
+  - HStack
 - Table
 - Tabs
 - Tag

package/dist/cjs/components/Stack/Stack.d.ts

@@ -0,0 +1,37 @@
+import { stackTokens } from './Stack.tokens';
+import { BaseComponentPropsWithChildren } from '../../types';
+declare type Align = 'stretch' | 'center' | 'flex-start' | 'flex-end';
+declare type Justify = 'flex-start' | 'flex-end' | 'space-between' | 'space-around';
+export interface StackStyleProps {
+    /**
+     * Hvilken retning elementene skal plasseres i.
+     */
+    direction: 'horizontal' | 'vertical';
+    /**
+     * CSS `align-items`.
+     * @default 'center'
+     */
+    align?: Align;
+    /**
+     * CSS `justify-content`.
+     * @default 'flex-start'
+     */
+    justify?: Justify;
+    /**
+     * Hvilken spacing token som skal brukes som CSS `gap`.
+     * @default 0
+     */
+    gap?: keyof typeof stackTokens.gap | 0;
+}
+export declare type StackProps = BaseComponentPropsWithChildren<HTMLDivElement, Omit<StackStyleProps, 'direction'>>;
+export declare const HStack: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & Omit<StackStyleProps, "direction"> & {
+    children?: import("react").ReactNode;
+} & {
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const VStack: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & Omit<StackStyleProps, "direction"> & {
+    children?: import("react").ReactNode;
+} & {
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/cjs/components/Stack/Stack.stories.d.ts

@@ -0,0 +1,10 @@
+import { ComponentMeta } from '@storybook/react';
+import { StackProps } from './Stack';
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & Omit<import("./Stack").StackStyleProps, "direction"> & {
+    children?: import("react").ReactNode;
+} & {
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>>;
+export default _default;
+export declare const VStackOverview: (args: StackProps) => JSX.Element;
+export declare const HStackOverview: (args: StackProps) => JSX.Element;

package/dist/cjs/components/Stack/Stack.tokens.d.ts

@@ -0,0 +1,20 @@
+export declare const stackTokens: {
+    gap: {
+        'local-x0.125': string;
+        'local-x0.25': string;
+        'local-x0.5': string;
+        'local-x0.75': string;
+        'local-x1': string;
+        'local-x1.5': string;
+        'local-x2': string;
+        'local-x2.5': string;
+        'local-x3': string;
+        'layout-x1': string;
+        'layout-x1.5': string;
+        'layout-x2': string;
+        'layout-x3': string;
+        'layout-x4': string;
+        'layout-x6': string;
+        'layout-x10': string;
+    };
+};

package/dist/cjs/components/Stack/index.d.ts

@@ -0,0 +1 @@
+export * from './Stack';

package/dist/cjs/components/Table/Cell.d.ts

@@ -1,10 +1,15 @@
 import { ThHTMLAttributes, TdHTMLAttributes } from 'react';
 export declare type TableCellType = 'data' | 'head';
 export declare type TableCellLayout = 'left' | 'right' | 'center' | 'text and icon';
+export declare type CollapsibleProps = {
+    isCollapsibleChild?: boolean;
+};
 export declare type TableCellProps = {
     /**Type celle. Returnerer enten `<td>` eller `<th>`. */
     type?: TableCellType;
     /**Layout av innholdet i cellen. 'tekst and icon' legger `gap` mellom barna og andre barnet i cellen.  */
     layout?: TableCellLayout;
+    /** Props ved bruk av `<CollapsibleRow>`. **OBS!** settes automatisk av forelder. */
+    collapsibleProps?: CollapsibleProps;
 } & (TdHTMLAttributes<HTMLTableCellElement> | ThHTMLAttributes<HTMLTableCellElement>);
 export declare const Cell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/cjs/components/Table/Row.d.ts

@@ -1,23 +1,6 @@
-import { HTMLAttributes } from 'react';
-export declare type TableRowType = 'body' | 'head';
-export declare type RowMode = 'normal' | 'sum';
-export declare type TableRowProps = {
-    /**Spesifiserer om raden skal brukes i `<head>` eller `<body>`-seksjonen. */
-    type?: TableRowType;
-    /**Custom modus for rader som har ytterligere semantisk betydning (f.eks. summeringsrad), definerer kun styling. Ved bruk av sum må `<Cell>` med tall i høyrestilles vha layout prop.  */
-    mode?: RowMode;
-    /**Spesifiserer om raden har blitt valgt/markert. */
-    selected?: boolean;
-    /**Spesifiserer om raden skal ha hover styling. Brukes hovedsakelig på klikkbare rader. */
-    hoverable?: boolean;
-} & HTMLAttributes<HTMLTableRowElement>;
 export declare const Row: import("react").ForwardRefExoticComponent<{
-    /**Spesifiserer om raden skal brukes i `<head>` eller `<body>`-seksjonen. */
-    type?: TableRowType | undefined;
-    /**Custom modus for rader som har ytterligere semantisk betydning (f.eks. summeringsrad), definerer kun styling. Ved bruk av sum må `<Cell>` med tall i høyrestilles vha layout prop.  */
-    mode?: RowMode | undefined;
-    /**Spesifiserer om raden har blitt valgt/markert. */
+    type?: import("./Table.types").TableRowType | undefined;
+    mode?: import("./Table.types").RowMode | undefined;
     selected?: boolean | undefined;
-    /**Spesifiserer om raden skal ha hover styling. Brukes hovedsakelig på klikkbare rader. */
     hoverable?: boolean | undefined;
-} & HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;
+} & import("react").HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;

package/dist/cjs/components/Table/Table.d.ts

@@ -1,18 +1,6 @@
-import { HTMLAttributes } from 'react';
-export declare type TableDensity = 'normal' | 'compact';
-export declare type TableProps = {
-    /**Spesifiserer hvor romslige cellene i tabellen skal være. */
-    density?: TableDensity;
-    /**Spesifiserer om cellene i `<Head>` skal bli sticky ved scrolling. */
-    stickyHeader?: boolean;
-    /**Legger skillelinjer mellom radene. */
-    withDividers?: boolean;
-} & HTMLAttributes<HTMLTableElement>;
+import { TableDensity } from './Table.types';
 export declare const Table: import("react").ForwardRefExoticComponent<{
-    /**Spesifiserer hvor romslige cellene i tabellen skal være. */
     density?: TableDensity | undefined;
-    /**Spesifiserer om cellene i `<Head>` skal bli sticky ved scrolling. */
     stickyHeader?: boolean | undefined;
-    /**Legger skillelinjer mellom radene. */
     withDividers?: boolean | undefined;
-} & HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>>;
+} & import("react").HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>>;

package/dist/cjs/components/Table/Table.stories.d.ts

@@ -2,7 +2,7 @@ import { TableProps, SortOrder } from '.';
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
-        density?: import("./Table").TableDensity | undefined;
+        density?: import("./Table.types").TableDensity | undefined;
         stickyHeader?: boolean | undefined;
         withDividers?: boolean | undefined;
     } & import("react").HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>> & {
@@ -11,8 +11,8 @@ declare const _default: {
         Body: import("react").ForwardRefExoticComponent<import("./Body").TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
         Foot: import("react").ForwardRefExoticComponent<import("./Foot").TableFootProps & import("react").RefAttributes<HTMLTableSectionElement>>;
         Row: import("react").ForwardRefExoticComponent<{
-            type?: import("./Row").TableRowType | undefined;
-            mode?: import("./Row").RowMode | undefined;
+            type?: import("./Table.types").TableRowType | undefined;
+            mode?: import("./Table.types").RowMode | undefined;
             selected?: boolean | undefined;
             hoverable?: boolean | undefined;
         } & import("react").HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;
@@ -38,7 +38,7 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: (args: TableProps) => JSX.Element;
-export declare const withDividers: (args: TableProps) => JSX.Element;
+export declare const WithDividers: (args: TableProps) => JSX.Element;
 export declare const Focusable: (args: TableProps) => JSX.Element;
 export declare const Compact: (args: TableProps) => JSX.Element;
 export declare const StickyHeader: (args: TableProps) => JSX.Element;

package/dist/cjs/components/Table/Table.styles.d.ts

@@ -0,0 +1,10 @@
+import { RowMode, TableRowType } from './Table.types';
+export declare const bodyRowStyles: (mode?: RowMode, selected?: boolean) => import("styled-components").FlattenSimpleInterpolation;
+declare type StyledProps = {
+    type: TableRowType;
+    mode?: RowMode;
+    selected?: boolean;
+    hoverable?: boolean;
+};
+export declare const StyledRow: import("styled-components").StyledComponent<"tr", any, StyledProps, never>;
+export {};

package/dist/cjs/components/Table/Table.tokens.d.ts

@@ -50,4 +50,9 @@ export declare const tableTokens: {
             };
         };
     };
+    collapseButton: {
+        height: string;
+        width: string;
+        borderRadius: string;
+    };
 };

package/dist/cjs/components/Table/Table.types.d.ts

@@ -0,0 +1,37 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export declare type TableDensity = 'normal' | 'compact';
+export declare type TableProps = {
+    /**Spesifiserer hvor romslige cellene i tabellen skal være. */
+    density?: TableDensity;
+    /**Spesifiserer om cellene i `<Head>` skal bli sticky ved scrolling. */
+    stickyHeader?: boolean;
+    /**Legger skillelinjer mellom radene. */
+    withDividers?: boolean;
+} & HTMLAttributes<HTMLTableElement>;
+export declare type HeaderValues = {
+    key: string;
+    content: ReactNode;
+}[];
+export declare type CollapsibleTableProps = {
+    /**Om tabellen skal kollapse. */
+    isCollapsed?: boolean;
+    /**Innhold i headere (`content`) og deres `key`. `headerValues.content` må være den samme som faktisk innhold i `<Table.Cell type='head'>`. */
+    headerValues: HeaderValues;
+    /**
+     * Indeksen(e) til kolonnen(e) som skal synes når tabellen er kollapset. Rekkefølgen i array avgjør rekkefølgen i render.
+     * @default [0]
+     *  */
+    definingColumnIndex?: number[];
+} & TableProps;
+export declare type TableRowType = 'body' | 'head';
+export declare type RowMode = 'normal' | 'sum';
+export declare type TableRowProps = {
+    /**Spesifiserer om raden skal brukes i `<head>` eller `<body>`-seksjonen. */
+    type?: TableRowType;
+    /**Custom modus for rader som har ytterligere semantisk betydning (f.eks. summeringsrad), definerer kun styling. Ved bruk av sum må `<Cell>` med tall i høyrestilles vha layout prop.  */
+    mode?: RowMode;
+    /**Spesifiserer om raden har blitt valgt/markert. */
+    selected?: boolean;
+    /**Spesifiserer om raden skal ha hover styling. Brukes hovedsakelig på klikkbare rader. */
+    hoverable?: boolean;
+} & HTMLAttributes<HTMLTableRowElement>;

package/dist/cjs/components/Table/collapsible/CollapsibleRow.d.ts

@@ -0,0 +1,6 @@
+export declare const CollapsibleRow: import("react").ForwardRefExoticComponent<{
+    type?: import("../Table.types").TableRowType | undefined;
+    mode?: import("../Table.types").RowMode | undefined;
+    selected?: boolean | undefined;
+    hoverable?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;

package/dist/cjs/components/Table/collapsible/CollapsibleTable.d.ts

@@ -0,0 +1,9 @@
+export declare const CollapsibleTable: import("react").ForwardRefExoticComponent<{
+    isCollapsed?: boolean | undefined;
+    headerValues: import("../Table.types").HeaderValues;
+    definingColumnIndex?: number[] | undefined;
+} & {
+    density?: import("../Table.types").TableDensity | undefined;
+    stickyHeader?: boolean | undefined;
+    withDividers?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>>;

package/dist/cjs/components/Table/collapsible/CollapsibleTable.stories.d.ts

@@ -0,0 +1,48 @@
+import { CollapsibleTableProps } from '..';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        isCollapsed?: boolean | undefined;
+        headerValues: import("../Table.types").HeaderValues;
+        definingColumnIndex?: number[] | undefined;
+    } & {
+        density?: import("..").TableDensity | undefined;
+        stickyHeader?: boolean | undefined;
+        withDividers?: boolean | undefined;
+    } & import("react").HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>> & {
+        Row: import("react").ForwardRefExoticComponent<{
+            type?: import("..").TableRowType | undefined;
+            mode?: import("../Table.types").RowMode | undefined;
+            selected?: boolean | undefined;
+            hoverable?: boolean | undefined;
+        } & import("react").HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;
+    };
+    argTypes: {
+        isCollapsed: {
+            control: {
+                type: string;
+            };
+        };
+        stickyHeader: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+export declare const SingleDefiningColumn: (args: CollapsibleTableProps) => JSX.Element;
+export declare const MultipleDefiningColumns: (args: CollapsibleTableProps) => JSX.Element;
+export declare const PrioritizedDefiningColumns: (args: CollapsibleTableProps) => JSX.Element;
+export declare const withDividers: (args: CollapsibleTableProps) => JSX.Element;
+export declare const Compact: (args: CollapsibleTableProps) => JSX.Element;
+export declare const StickyHeader: (args: CollapsibleTableProps) => JSX.Element;
+export declare const WithButtonAndIcons: (args: CollapsibleTableProps) => JSX.Element;
+export declare const Responsive: (args: CollapsibleTableProps) => JSX.Element;
+export declare const ResposiveMultipleBreakpoints: (args: CollapsibleTableProps) => JSX.Element;
+export declare const Example: () => JSX.Element;

package/dist/cjs/components/Table/collapsible/Table.context.d.ts

@@ -0,0 +1,9 @@
+import { HeaderValues } from '../Table.types';
+declare type CollapsibleTableContextProps = {
+    isCollapsed?: boolean;
+    headerValues: HeaderValues;
+    definingColumnIndex: number[];
+};
+export declare const CollapsibleTableContext: import("react").Context<CollapsibleTableContextProps>;
+export declare const useCollapsibleTableContext: () => CollapsibleTableContextProps;
+export {};

package/dist/cjs/components/Table/index.d.ts

@@ -1,8 +1,11 @@
-import { Table as BaseTable, TableProps, TableDensity } from './Table';
+import { Table as BaseTable } from './Table';
+import { CollapsibleTable as BaseCollapsibleTable } from './collapsible/CollapsibleTable';
+import { TableProps, TableDensity, CollapsibleTableProps, TableRowProps, TableRowType } from './Table.types';
 import { Head, TableHeadProps } from './Head';
 import { Body, TableBodyProps } from './Body';
 import { Foot, TableFootProps } from './Foot';
-import { Row, TableRowProps, TableRowType } from './Row';
+import { Row } from './Row';
+import { CollapsibleRow } from './collapsible/CollapsibleRow';
 import { Cell, TableCellProps, TableCellLayout, TableCellType } from './Cell';
 import { SortCell, TableSortCellProps, SortOrder } from './SortCell';
 import { TableWrapper } from './TableWrapper';
@@ -16,5 +19,10 @@ declare type TableCompoundProps = typeof BaseTable & {
     SortCell: typeof SortCell;
 };
 declare const Table: TableCompoundProps;
+declare type CollapsibleTableCompoundProps = typeof BaseCollapsibleTable & {
+    Row: typeof CollapsibleRow;
+};
+declare const CollapsibleTable: CollapsibleTableCompoundProps;
 export { Table };
-export type { TableCellProps, TableDensity, TableProps, TableRowProps, TableRowType, TableHeadProps, TableBodyProps, TableFootProps, TableSortCellProps, SortOrder, TableCellLayout, TableCellType, };
+export { CollapsibleTable };
+export type { TableCellProps, TableDensity, TableProps, TableRowProps, TableRowType, TableHeadProps, TableBodyProps, TableFootProps, TableSortCellProps, SortOrder, TableCellLayout, TableCellType, CollapsibleTableProps, };

package/dist/cjs/index.d.ts

@@ -42,3 +42,4 @@ export * from './hooks';
 export * from './components/InlineEdit';
 export * from './components/TextArea';
 export * from './components/SplitButton';
+export * from './components/Stack';