@norges-domstoler/dds-components 2.2.0 → 2.4.0

package/dist/src/components/Pagination/Pagination.stories.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import { PaginationProps } from '.';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        itemsAmount: number;
+        defaultItemsPerPage?: number | undefined;
+        defaultActivePage?: number | undefined;
+        withPagination?: boolean | undefined;
+        withCounter?: boolean | undefined;
+        withSelect?: boolean | undefined;
+        selectOptions?: import("./Pagination").PaginationOption[] | undefined;
+        onChange?: ((event: import("react").MouseEvent<HTMLButtonElement, MouseEvent>, page: number) => void) | undefined;
+        onSelectOptionChange?: ((option: import("./Pagination").PaginationOption | null) => void) | undefined;
+        smallScreen?: boolean | undefined;
+    } & Omit<import("react").HTMLAttributes<HTMLElement>, "onChange"> & import("react").RefAttributes<HTMLElement>>;
+    argTypes: {
+        withCounter: {
+            control: string;
+        };
+        withPagination: {
+            control: string;
+        };
+        withSelect: {
+            control: string;
+        };
+        smallScreen: {
+            control: string;
+        };
+        defaultItemsPerPage: {
+            control: string;
+        };
+        defaultActivePage: {
+            control: string;
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+export declare const Overview: (args: PaginationProps) => JSX.Element;
+export declare const OverviewMobile: (args: PaginationProps) => JSX.Element;
+export declare const Default: (args: PaginationProps) => JSX.Element;

package/dist/src/components/Popover/Popover.d.ts

@@ -0,0 +1,51 @@
+import { Property } from 'csstype';
+import { HTMLAttributes, ReactNode } from 'react';
+import { Placement } from '../../hooks';
+export declare type PopoverSizeProps = {
+    width?: Property.Width<string>;
+    height?: Property.Height<string>;
+    minWidth?: Property.MinWidth<string>;
+    minHeight?: Property.MinHeight<string>;
+    maxWidth?: Property.MaxWidth<string>;
+    maxHeight?: Property.MaxHeight<string>;
+};
+export declare type PopoverProps = {
+    /**Tittel. */
+    title?: string | ReactNode;
+    /** **OBS!** Propen settes automatisk av `<PopoverGroup />`. Spesifiserer om `<Popover />` skal vises. */
+    isOpen?: boolean;
+    /**Om lukkeknapp skal vises. */
+    withCloseButton?: boolean;
+    /** **OBS!** Propen settes automatisk av `<PopoverGroup />`. Anchor-elementet. */
+    anchorElement?: HTMLElement;
+    /**Spesifiserer hvor komponenten skal plasseres i forhold til anchor-elementet. */
+    placement?: Placement;
+    /**Avstand fra anchor-elementet i px. */
+    offset?: number;
+    /** Ekstra logikk kjørt når lukkeknappen trykkes. */
+    onCloseButtonClick?: () => void;
+    /** Ekstra logikk kjørt når lukkeknappen mister fokus. */
+    onCloseButtonBlur?: () => void;
+    /**Custom størrelse. */
+    sizeProps?: PopoverSizeProps;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const Popover: import("react").ForwardRefExoticComponent<{
+    /**Tittel. */
+    title?: string | ReactNode;
+    /** **OBS!** Propen settes automatisk av `<PopoverGroup />`. Spesifiserer om `<Popover />` skal vises. */
+    isOpen?: boolean | undefined;
+    /**Om lukkeknapp skal vises. */
+    withCloseButton?: boolean | undefined;
+    /** **OBS!** Propen settes automatisk av `<PopoverGroup />`. Anchor-elementet. */
+    anchorElement?: HTMLElement | undefined;
+    /**Spesifiserer hvor komponenten skal plasseres i forhold til anchor-elementet. */
+    placement?: Placement | undefined;
+    /**Avstand fra anchor-elementet i px. */
+    offset?: number | undefined;
+    /** Ekstra logikk kjørt når lukkeknappen trykkes. */
+    onCloseButtonClick?: (() => void) | undefined;
+    /** Ekstra logikk kjørt når lukkeknappen mister fokus. */
+    onCloseButtonBlur?: (() => void) | undefined;
+    /**Custom størrelse. */
+    sizeProps?: PopoverSizeProps | undefined;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/components/Popover/Popover.stories.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import { PopoverProps } from '.';
+import { Placement } from '../../hooks';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        title?: import("react").ReactNode;
+        isOpen?: boolean | undefined;
+        withCloseButton?: boolean | undefined;
+        anchorElement?: HTMLElement | undefined;
+        placement?: Placement | undefined;
+        offset?: number | undefined;
+        onCloseButtonClick?: (() => void) | undefined;
+        onCloseButtonBlur?: (() => void) | undefined;
+        sizeProps?: import("./Popover").PopoverSizeProps | undefined;
+    } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    argTypes: {
+        withCloseButton: {
+            control: {
+                type: string;
+            };
+        };
+        placement: {
+            control: {
+                type: string;
+            };
+        };
+        title: {
+            control: {
+                type: string;
+            };
+        };
+        offset: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+export declare const ContentOverview: (args: PopoverProps) => JSX.Element;
+export declare const PlacementOverview: () => JSX.Element;
+export declare const Default: (args: PopoverProps) => JSX.Element;
+export declare const Overflow: (args: PopoverProps) => JSX.Element;
+export declare const InlineExample: (args: PopoverProps) => JSX.Element;

package/dist/{components → src/components}/Popover/PopoverGroup.d.ts

@@ -1,9 +1,14 @@
 import { ReactNode } from 'react';
 export declare type PopoverGroupProps = {
+    /**Callback når det trykkes på lukkeknappen. */
     onCloseButtonClick?: () => void;
+    /** Callback når det trykkes på anchor-elementet (trigger-elementet). */
     onTriggerClick?: () => void;
+    /**Forteller `<Popover />` om den skal være åpen.  */
     isOpen?: boolean;
+    /** `id` til `<Popover />.` */
     popoverId?: string;
+    /** Barna til wrapperen: anchor-element som det første og `<Popover />` so det adnre.  */
     children: ReactNode;
 };
 export declare const PopoverGroup: ({ isOpen, onCloseButtonClick, onTriggerClick, children, popoverId }: PopoverGroupProps) => JSX.Element;

package/dist/{components → src/components}/RadioButton/RadioButton.d.ts

@@ -3,6 +3,4 @@ export declare const RadioButton: import("react").ForwardRefExoticComponent<{
     label?: string | undefined;
     disabled?: boolean | undefined;
     error?: boolean | undefined;
-    className?: string | undefined;
-    style?: import("react").CSSProperties | undefined;
 } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/src/components/RadioButton/RadioButton.stories.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import { RadioButtonProps } from '.';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        label?: string | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+    } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+    argTypes: {
+        label: {
+            control: {
+                type: string;
+            };
+        };
+        error: {
+            control: {
+                type: string;
+            };
+        };
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+        readOnly: {
+            control: {
+                type: string;
+            };
+        };
+        className: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Overview: (args: RadioButtonProps) => JSX.Element;
+export declare const Default: (args: RadioButtonProps) => JSX.Element;

package/dist/src/components/RadioButton/RadioButton.types.d.ts

@@ -0,0 +1,9 @@
+import { InputHTMLAttributes } from 'react';
+export declare type RadioButtonProps = {
+    /**Ledetekst for alternativet. */
+    label?: string;
+    /**Spesifiserer om input er disabled. */
+    disabled?: boolean;
+    /**Indikerer valideringsfeil. Påvirker styling. */
+    error?: boolean;
+} & InputHTMLAttributes<HTMLInputElement>;

package/dist/src/components/RadioButton/RadioButtonGroup.d.ts

@@ -0,0 +1,28 @@
+import { ChangeEvent, HTMLAttributes } from 'react';
+declare type Direction = 'column' | 'row';
+export declare type RadioButtonGroupProps<T extends string | number> = {
+    /** Gir alle barna `name` prop.*/
+    name?: string;
+    /**Ledetekst for hele gruppen. */
+    label?: string;
+    /**Funksjonen for onChange-event for barna. */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, value: T | undefined) => void;
+    /**Legger en markør (*) bak label som indikerer at input er påkrevd. Gjør alle barna påkrevd ved å gi dem `required` prop. */
+    required?: boolean;
+    /**Meldingen som vises ved valideringsfeil. Gir alle barna error prop. */
+    errorMessage?: string;
+    /**Hjelpetekst for gruppen. */
+    tip?: string;
+    /**Gir alle barna `disabled` prop. */
+    disabled?: boolean;
+    /**Gir alle barna `readOnly` prop */
+    readOnly?: boolean;
+    /**Retningen radioknappene skal gjengis i. */
+    direction?: Direction;
+    /**Default verdi - en `<RadioButton />` blir forhåndsvalgt. **OBS!** brukes kun når brukeren ikke skal fylle ut selv. */
+    value?: T | undefined;
+    /**custom id for for gruppen, knytter `label` til gruppen via `aria-label`. */
+    groupId?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;
+export declare const RadioButtonGroup: <T extends string | number = string>({ name, label, groupId, errorMessage, tip, disabled, readOnly, direction, value, children, required, onChange, className, style, ...rest }: RadioButtonGroupProps<T>) => JSX.Element;
+export {};

package/dist/src/components/RadioButton/RadioButtonGroup.stories.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { RadioButtonGroupProps } from '.';
+declare const _default: {
+    title: string;
+    component: <T extends string | number = string>({ name, label, groupId, errorMessage, tip, disabled, readOnly, direction, value, children, required, onChange, className, style, ...rest }: RadioButtonGroupProps<T>) => JSX.Element;
+    argTypes: {
+        label: {
+            control: {
+                type: string;
+            };
+        };
+        errorMessage: {
+            control: {
+                type: string;
+            };
+        };
+        tip: {
+            control: {
+                type: string;
+            };
+        };
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+        readOnly: {
+            control: {
+                type: string;
+            };
+        };
+        required: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+export declare const Overview: (args: RadioButtonGroupProps<string>) => JSX.Element;
+export declare const Default: (args: RadioButtonGroupProps<number>) => JSX.Element;
+export declare const WithDefaultValue: (args: RadioButtonGroupProps<number>) => JSX.Element;

package/dist/{components → src/components}/RadioButton/index.d.ts

@@ -1,2 +1,3 @@
 export * from './RadioButton';
+export * from './RadioButton.types';
 export * from './RadioButtonGroup';

package/dist/{components → src/components}/Search/Search.d.ts

@@ -1,4 +1,4 @@
-import React, { ButtonHTMLAttributes, InputHTMLAttributes, MouseEvent } from 'react';
+import { ButtonHTMLAttributes, InputHTMLAttributes, MouseEvent } from 'react';
 export declare type SearchSize = 'small' | 'medium' | 'large';
 declare type ButtonProps = {
     onClick: (event: MouseEvent<HTMLButtonElement>) => void;
@@ -6,17 +6,19 @@ declare type ButtonProps = {
     loading?: boolean;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 export declare type SearchProps = {
+    /**Størrelsen på komponenten. */
+    componentSize?: SearchSize;
+    /**Hjelpetekst. */
     tip?: string;
+    /**Props for søkeknappen. */
     buttonProps?: ButtonProps;
-    componentSize?: SearchSize;
-    className?: string;
-    style?: React.CSSProperties;
 } & InputHTMLAttributes<HTMLInputElement>;
-export declare const Search: React.ForwardRefExoticComponent<{
+export declare const Search: import("react").ForwardRefExoticComponent<{
+    /**Størrelsen på komponenten. */
+    componentSize?: SearchSize | undefined;
+    /**Hjelpetekst. */
     tip?: string | undefined;
+    /**Props for søkeknappen. */
     buttonProps?: ButtonProps | undefined;
-    componentSize?: SearchSize | undefined;
-    className?: string | undefined;
-    style?: React.CSSProperties | undefined;
-} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+} & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/src/components/Search/Search.stories.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { SearchProps } from './Search';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        componentSize?: import("./Search").SearchSize | undefined;
+        tip?: string | undefined;
+        buttonProps?: ({
+            onClick: (event: import("react").MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+            label?: string | undefined;
+            loading?: boolean | undefined;
+        } & import("react").ButtonHTMLAttributes<HTMLButtonElement>) | undefined;
+    } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+    argTypes: {
+        tip: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+export declare const Overview: (args: SearchProps) => JSX.Element;
+export declare const Default: (args: SearchProps) => JSX.Element;
+export declare const WithButton: (args: SearchProps) => JSX.Element;

package/dist/src/components/Select/MultiSelect.stories.d.ts

@@ -0,0 +1,74 @@
+/// <reference types="react" />
+import { SelectProps } from './Select';
+declare const _default: {
+    title: string;
+    component: <TOption, IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, ...rest }: SelectProps<TOption, IsMulti>, ref: ((instance: import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null) => void) | import("react").MutableRefObject<import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null> | null) => JSX.Element;
+    argTypes: {
+        label: {
+            control: {
+                type: string;
+            };
+        };
+        tip: {
+            control: {
+                type: string;
+            };
+        };
+        errorMessage: {
+            control: {
+                type: string;
+            };
+        };
+        width: {
+            control: {
+                type: string;
+            };
+        };
+        placeholder: {
+            control: {
+                type: string;
+            };
+        };
+        isDisabled: {
+            control: {
+                type: string;
+            };
+        };
+        isClearable: {
+            control: {
+                type: string;
+            };
+        };
+        required: {
+            control: {
+                type: string;
+            };
+        };
+        readOnly: {
+            control: {
+                type: string;
+            };
+        };
+        isLoading: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+declare type Option = {
+    label: string;
+    value: string;
+};
+declare type MultiSelectProps = SelectProps<Option, true>;
+export declare const Overview: (args: MultiSelectProps) => JSX.Element;
+export declare const Default: (args: MultiSelectProps) => JSX.Element;
+export declare const WithLabel: (args: MultiSelectProps) => JSX.Element;
+export declare const WithDefaultValue: (args: MultiSelectProps) => JSX.Element;
+export declare const WithFitContent: (args: MultiSelectProps) => JSX.Element;

package/dist/{components → src/components}/Select/Select.d.ts

@@ -1,15 +1,23 @@
-import * as CSS from 'csstype';
+import { Property } from 'csstype';
 import React from 'react';
 import { GroupBase, Props as ReactSelectProps, SelectInstance } from 'react-select';
 export declare function searchFilter(text: string, search: string): boolean;
 export declare type SelectProps<TOption, IsMulti extends boolean> = {
+    /**Ledetekst for nedtrekkslisten. */
     label?: string;
+    /**Gir required styling. **OBS!** støtter ikke DOM `required` attributt.   */
     required?: boolean;
+    /**Nedtrekkslisten blir disabled og får readOnly styling. */
     readOnly?: boolean;
+    /**Meldingen som vises ved valideringsfeil. */
     errorMessage?: string;
+    /**Hjelpetekst. */
     tip?: string;
-    width?: CSS.Property.Width<string>;
+    /**Custom bredde ved behov. */
+    width?: Property.Width<string>;
+    /** CSS klassenavn. */
     className?: string;
+    /** Inline styling. */
     style?: React.CSSProperties;
 } & ReactSelectProps<TOption, IsMulti, GroupBase<TOption>>;
 declare type ForwardRefType<TOption, IsMulti extends boolean> = React.ForwardedRef<SelectInstance<TOption, IsMulti, GroupBase<TOption>>>;

package/dist/src/components/Select/Select.stories.d.ts

@@ -0,0 +1,73 @@
+/// <reference types="react" />
+import { SelectProps } from '.';
+declare const _default: {
+    title: string;
+    component: <TOption, IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, ...rest }: SelectProps<TOption, IsMulti>, ref: ((instance: import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null) => void) | import("react").MutableRefObject<import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null> | null) => JSX.Element;
+    argTypes: {
+        label: {
+            control: {
+                type: string;
+            };
+        };
+        tip: {
+            control: {
+                type: string;
+            };
+        };
+        errorMessage: {
+            control: {
+                type: string;
+            };
+        };
+        width: {
+            control: {
+                type: string;
+            };
+        };
+        placeholder: {
+            control: {
+                type: string;
+            };
+        };
+        isDisabled: {
+            control: {
+                type: string;
+            };
+        };
+        isClearable: {
+            control: {
+                type: string;
+            };
+        };
+        required: {
+            control: {
+                type: string;
+            };
+        };
+        readOnly: {
+            control: {
+                type: string;
+            };
+        };
+        isLoading: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+declare type Option = {
+    label: string;
+    value: string;
+};
+declare type SingleSelectProps = SelectProps<Option, false>;
+export declare const Overview: (args: SingleSelectProps) => JSX.Element;
+export declare const Default: (args: SingleSelectProps) => JSX.Element;
+export declare const WithLabel: (args: SingleSelectProps) => JSX.Element;
+export declare const ManyItems: (args: SingleSelectProps) => JSX.Element;

package/dist/{components → src/components}/Select/Select.styles.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { GroupBase, StylesConfig } from 'react-select';
-import { IconWrapper } from '../../helpers/IconWrapper';
+import { IconWrapper } from '../IconWrapper';
 export declare const prefix = "dds-select";
 export declare const Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 declare type StyledContainerProps = {

package/dist/{components → src/components}/Select/Select.tokens.d.ts

@@ -1,10 +1,10 @@
 import { CSSObject } from 'styled-components';
-import * as CSS from 'csstype';
+import { Property } from 'csstype';
 export declare const multiValueContainerMinHeight: string;
 export declare const selectTokens: {
     container: {
         base: CSSObject;
-        defaultWidth: CSS.Property.Width<string>;
+        defaultWidth: Property.Width<string>;
         hover: {
             base: CSSObject;
         };

package/dist/src/components/SkipToContent/SkipToContent.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'react';
+import { Property } from 'csstype';
+export declare type SkipToContentProps = {
+    /** Teksten som vises i lenka. */
+    text?: string;
+    /**Spesifiserer hvor det skal hoppes til via `id`-attributtet til innholdet. */
+    href: string;
+    /**Avstand fra top i nærmeste posisjonert container. */
+    top?: Property.Top<string | number>;
+} & HTMLAttributes<HTMLAnchorElement>;
+export declare const SkipToContent: import("react").ForwardRefExoticComponent<{
+    /** Teksten som vises i lenka. */
+    text?: string | undefined;
+    /**Spesifiserer hvor det skal hoppes til via `id`-attributtet til innholdet. */
+    href: string;
+    /**Avstand fra top i nærmeste posisjonert container. */
+    top?: Property.Top<string | number> | undefined;
+} & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/src/components/SkipToContent/SkipToContent.stories.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { SkipToContentProps } from '.';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        text?: string | undefined;
+        href: string;
+        top?: import("csstype").Property.Top<string | number> | undefined;
+    } & import("react").HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
+    argTypes: {
+        text: {
+            control: {
+                type: string;
+            };
+        };
+        top: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+export declare const Overview: () => JSX.Element;
+export declare const Default: (args: SkipToContentProps) => JSX.Element;
+export declare const Example: (args: SkipToContentProps) => JSX.Element;