@norges-domstoler/dds-components 13.8.1 → 13.8.3

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

@@ -1,332 +0,0 @@
-import { StaticTypographyType } from '@norges-domstoler/dds-typography';
-import { ButtonSize } from '.';
-export declare const typographyTypes: {
-    [k in ButtonSize]: StaticTypographyType;
-};
-export declare const buttonTokens: {
-    button: {
-        base: {
-            border: string;
-        };
-        sizes: {
-            large: {
-                justIcon: {
-                    icon: {
-                        fontSize: string;
-                        padding: string;
-                    };
-                    wrapper: {
-                        height: string;
-                        width: string;
-                    };
-                };
-                text: {
-                    padding: string;
-                };
-                textAndIcon: {
-                    gap: string;
-                };
-            };
-            medium: {
-                justIcon: {
-                    icon: {
-                        fontSize: string;
-                        padding: string;
-                    };
-                    wrapper: {
-                        height: string;
-                        width: string;
-                    };
-                };
-                text: {
-                    padding: string;
-                };
-                textAndIcon: {
-                    gap: string;
-                };
-            };
-            small: {
-                justIcon: {
-                    icon: {
-                        fontSize: string;
-                        padding: string;
-                    };
-                    wrapper: {
-                        height: string;
-                        width: string;
-                    };
-                };
-                text: {
-                    padding: string;
-                };
-                textAndIcon: {
-                    gap: string;
-                };
-            };
-            tiny: {
-                justIcon: {
-                    icon: {
-                        fontSize: string;
-                        padding: string;
-                    };
-                    wrapper: {
-                        height: string;
-                        width: string;
-                    };
-                };
-                text: {
-                    padding: string;
-                };
-                textAndIcon: {
-                    gap: string;
-                };
-            };
-        };
-        appearances: {
-            filled: {
-                base: {
-                    borderRadius: string;
-                    boxShadow: string;
-                };
-                purpose: {
-                    primary: {
-                        base: {
-                            color: string;
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        hover: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        active: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                    };
-                    secondary: {
-                        base: {
-                            color: string;
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        hover: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        active: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                    };
-                    danger: {
-                        base: {
-                            color: string;
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        hover: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        active: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                    };
-                };
-            };
-            ghost: {
-                base: {
-                    borderRadius: string;
-                    boxShadow: string;
-                    backgroundColor: string;
-                };
-                purpose: {
-                    primary: {
-                        base: {
-                            color: string;
-                            borderColor: string;
-                        };
-                        hover: {
-                            color: string;
-                            borderColor: string;
-                            boxShadow: string;
-                        };
-                        active: {
-                            color: string;
-                            borderColor: string;
-                            boxShadow: string;
-                        };
-                    };
-                    secondary: {
-                        base: {
-                            color: string;
-                            borderColor: string;
-                        };
-                        hover: {
-                            color: string;
-                            borderColor: string;
-                            boxShadow: string;
-                        };
-                        active: {
-                            color: string;
-                            borderColor: string;
-                            boxShadow: string;
-                        };
-                    };
-                    danger: {
-                        base: {
-                            color: string;
-                            borderColor: string;
-                        };
-                        hover: {
-                            color: string;
-                            borderColor: string;
-                            boxShadow: string;
-                        };
-                        active: {
-                            color: string;
-                            borderColor: string;
-                            boxShadow: string;
-                        };
-                    };
-                };
-            };
-            borderless: {
-                base: {
-                    borderRadius: string;
-                    boxShadow: string;
-                    backgroundColor: string;
-                    borderColor: string;
-                    textDecoration: string;
-                    textDecorationColor: string;
-                };
-                purpose: {
-                    primary: {
-                        base: {
-                            color: string;
-                        };
-                        hover: {
-                            color: string;
-                            textDecorationColor: string;
-                        };
-                        active: {
-                            color: string;
-                            textDecorationColor: string;
-                        };
-                        icon: {
-                            hover: {
-                                borderColor: string;
-                                boxShadow: string;
-                            };
-                            active: {
-                                borderColor: string;
-                                boxShadow: string;
-                            };
-                        };
-                    };
-                    secondary: {
-                        base: {
-                            color: string;
-                        };
-                        hover: {
-                            color: string;
-                            textDecorationColor: string;
-                        };
-                        active: {
-                            color: string;
-                            textDecorationColor: string;
-                        };
-                        icon: {
-                            hover: {
-                                borderColor: string;
-                                boxShadow: string;
-                            };
-                            active: {
-                                borderColor: string;
-                                boxShadow: string;
-                            };
-                        };
-                    };
-                    danger: {
-                        base: {
-                            color: string;
-                        };
-                        hover: {
-                            color: string;
-                            textDecorationColor: string;
-                        };
-                        active: {
-                            color: string;
-                            textDecorationColor: string;
-                        };
-                        icon: {
-                            hover: {
-                                borderColor: string;
-                                boxShadow: string;
-                            };
-                            active: {
-                                borderColor: string;
-                                boxShadow: string;
-                            };
-                        };
-                    };
-                };
-            };
-            rounded: {
-                base: {
-                    borderRadius: string;
-                    boxShadow: string;
-                };
-                purpose: {
-                    primary: {
-                        base: {
-                            color: string;
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        hover: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        active: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                    };
-                    secondary: {
-                        base: {
-                            color: string;
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        hover: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        active: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                    };
-                    danger: {
-                        base: {
-                            color: string;
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        hover: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                        active: {
-                            backgroundColor: string;
-                            borderColor: string;
-                        };
-                    };
-                };
-            };
-        };
-    };
-};

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

@@ -1,33 +0,0 @@
-import { ButtonHTMLAttributes, ReactElement } from 'react';
-import { BaseComponentProps } from '@norges-domstoler/dds-core';
-import { SvgIcon } from '@norges-domstoler/dds-icons';
-export type ButtonPurpose = 'primary' | 'secondary' | 'danger';
-export type ButtonSize = 'tiny' | 'small' | 'medium' | 'large';
-export type ButtonAppearance = 'filled' | 'ghost' | 'rounded' | 'borderless';
-export type IconPosition = 'left' | 'right';
-type PickedHTMLAttributes = Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur' | 'type'>;
-export type ButtonProps = BaseComponentProps<HTMLButtonElement, {
-    /**Størrelsen på knappen. */
-    size?: ButtonSize;
-    /**Tekst i knappen. */
-    label?: string | ReactElement;
-    /**Bestemmer farger basert på formål. */
-    purpose?: ButtonPurpose;
-    /**	Posisjonen til ikonet i forhold til teksten.*/
-    iconPosition?: IconPosition;
-    /**Bestemmer utseende på knappen, bl.a. bakgrunn, border radius og skygger.  */
-    appearance?: ButtonAppearance;
-    /**Indikerer en loading-knapp. */
-    loading?: boolean;
-    /**Tooltip som vises ved loading. */
-    loadingTooltip?: string;
-    /**Ikonet som ligger i knappen.  */
-    icon?: SvgIcon;
-    /**Knapp med full bredde. */
-    fullWidth?: boolean;
-    /**URL for knapper som skal brukes som lenke. Knappen blir til et `<a>`-element. */
-    href?: string;
-    /**Nativt target-attributt som kan spesifiseres når knappen er et `<a>`-element.  */
-    target?: string;
-} & PickedHTMLAttributes, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof PickedHTMLAttributes>>;
-export {};

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

@@ -1,2 +0,0 @@
-export * from './Button';
-export * from './Button.types';

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

@@ -1,26 +0,0 @@
-import { AnchorHTMLAttributes, RefObject } from 'react';
-import { BaseComponentPropsWithChildren } from '@norges-domstoler/dds-core';
-export type CardColor = 'filledDark' | 'filledLight' | 'strokeDark' | 'strokeLight';
-export type CardType = 'info' | 'navigation' | 'expandable';
-type BaseCardProps<T extends HTMLElement> = BaseComponentPropsWithChildren<T, {
-    /** Fargepalett i komponenten. */
-    color?: CardColor;
-    /** Referanse til komponenten. */
-    cardRef?: RefObject<T>;
-}>;
-export type InfoCardProps = BaseCardProps<HTMLDivElement> & {
-    /** Spesifiserer funksjonalitet og formål med komponenten. **OBS!** ved `'navigation'` må `href` oppgis. Ved `'expandable'` må alle `<Card />` grupperte sammen ligge egen `<div>` container. */
-    cardType: 'info';
-};
-export type NavigationCardProps = BaseCardProps<HTMLAnchorElement> & {
-    cardType: 'navigation';
-} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target'>;
-export type ExpandableCardProps = BaseCardProps<HTMLDivElement> & {
-    cardType: 'expandable';
-};
-export type CardProps = InfoCardProps | NavigationCardProps | ExpandableCardProps;
-export declare const Card: {
-    (props: CardProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export {};

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

@@ -1,15 +0,0 @@
-import { CardProps, ExpandableCardProps } from '.';
-declare const _default: {
-    title: string;
-    component: {
-        (props: CardProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-};
-export default _default;
-export declare const Overview: () => import("react/jsx-runtime").JSX.Element;
-export declare const Default: (args: CardProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Accordion: (args: ExpandableCardProps) => import("react/jsx-runtime").JSX.Element;
-export declare const AccordionControlled: (args: ExpandableCardProps) => import("react/jsx-runtime").JSX.Element;
-export declare const AccordionCustom: (args: ExpandableCardProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Examples: (args: CardProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,27 +0,0 @@
-export declare const cardTokens: {
-    base: {
-        border: string;
-    };
-    colors: {
-        filledLight: {
-            backgroundColor: string;
-            borderColor: string;
-            color: string;
-        };
-        filledDark: {
-            backgroundColor: string;
-            borderColor: string;
-            color: string;
-        };
-        strokeDark: {
-            backgroundColor: string;
-            borderColor: string;
-            color: string;
-        };
-        strokeLight: {
-            backgroundColor: string;
-            borderColor: string;
-            color: string;
-        };
-    };
-};

package/dist/cjs/components/Card/CardAccordion/CardAccordion.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import { BaseComponentPropsWithChildren } from '@norges-domstoler/dds-core';
-export type CardAccordionProps = BaseComponentPropsWithChildren<HTMLDivElement, {
-    /**Spesifiserer om body skal være utvidet ved innlastning. */
-    isExpanded?: boolean;
-    /**For å lytte til endringer i expanded-state. */
-    onChange?: (expanded: boolean) => void;
-}>;
-export declare const CardAccordion: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
-    /**Spesifiserer om body skal være utvidet ved innlastning. */
-    isExpanded?: boolean | undefined;
-    /**For å lytte til endringer i expanded-state. */
-    onChange?: ((expanded: boolean) => void) | undefined;
-} & {
-    children?: import("react").ReactNode;
-} & {
-    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/Card/CardAccordion/CardAccordion.tokens.d.ts

@@ -1,28 +0,0 @@
-import { StaticTypographyType } from '@norges-domstoler/dds-typography';
-export declare const typographyTypes: {
-    body: StaticTypographyType;
-    header: StaticTypographyType;
-};
-export declare const cardAccordionTokens: {
-    header: {
-        padding: string;
-        hover: {
-            boxShadow: string;
-        };
-        focus: {
-            boxShadow: string;
-        };
-    };
-    body: {
-        padding: string;
-    };
-    chevronWrapper: {
-        width: string;
-        height: string;
-        marginLeft: string;
-    };
-    chevron: {
-        width: string;
-        height: string;
-    };
-};

package/dist/cjs/components/Card/CardAccordion/CardAccordionBody.d.ts

@@ -1,27 +0,0 @@
-/// <reference types="react" />
-import { Property } from 'csstype';
-import { BaseComponentPropsWithChildren } from '@norges-domstoler/dds-core';
-export type CardAccordionBodyProps = BaseComponentPropsWithChildren<HTMLDivElement, {
-    /** **OBS!** denne propen blir satt automatisk av forelder. Forteller komponenten om den skal utvides.  */
-    isExpanded?: boolean;
-    /** **OBS!** denne propen blir satt automatisk av forelder. Forteller `id` til `<CardAccordionHeader />`.  */
-    headerId?: string;
-    /**Overskriver default padding på toppen. Brukes når barn har spacing på toppen, f.eks. en overskrift. */
-    paddingTop?: Property.PaddingTop<string>;
-    /**Overskriver default padding. */
-    padding?: Property.Padding<string>;
-}>;
-export declare const CardAccordionBody: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
-    /** **OBS!** denne propen blir satt automatisk av forelder. Forteller komponenten om den skal utvides.  */
-    isExpanded?: boolean | undefined;
-    /** **OBS!** denne propen blir satt automatisk av forelder. Forteller `id` til `<CardAccordionHeader />`.  */
-    headerId?: string | undefined;
-    /**Overskriver default padding på toppen. Brukes når barn har spacing på toppen, f.eks. en overskrift. */
-    paddingTop?: Property.PaddingTop<string> | undefined;
-    /**Overskriver default padding. */
-    padding?: Property.Padding<string> | undefined;
-} & {
-    children?: import("react").ReactNode;
-} & {
-    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/Card/CardAccordion/CardAccordionHeader.d.ts

@@ -1,36 +0,0 @@
-import { ButtonHTMLAttributes } from 'react';
-import { BaseComponentPropsWithChildren } from '@norges-domstoler/dds-core';
-import { StaticTypographyType } from '@norges-domstoler/dds-typography';
-import { Property } from 'csstype';
-export type CardAccordionHeaderProps = BaseComponentPropsWithChildren<HTMLButtonElement, {
-    /** **OBS!** denne propen blir satt automatisk av forelder. Forteller body er utvidet.  */
-    isExpanded?: boolean;
-    /** **OBS!** denne propen blir satt automatisk av forelder. Callback for å styre utvidelse og sammentrukking.  */
-    toggleExpanded?: () => void;
-    /** **OBS!** denne propen blir satt automatisk av forelder. Forteller `id` til `<CardAccordionBody />`.  */
-    bodyId?: string;
-    /**Overskriver default padding. */
-    padding?: Property.Padding<string>;
-    /**Overskriver default teksttype. */
-    typographyType?: StaticTypographyType;
-    /**Angir om teksten skal være i "bold"-format. */
-    bold?: boolean;
-}, ButtonHTMLAttributes<HTMLButtonElement>>;
-export declare const CardAccordionHeader: import("react").ForwardRefExoticComponent<Pick<ButtonHTMLAttributes<HTMLButtonElement>, "className" | "id"> & {
-    /** **OBS!** denne propen blir satt automatisk av forelder. Forteller body er utvidet.  */
-    isExpanded?: boolean | undefined;
-    /** **OBS!** denne propen blir satt automatisk av forelder. Callback for å styre utvidelse og sammentrukking.  */
-    toggleExpanded?: (() => void) | undefined;
-    /** **OBS!** denne propen blir satt automatisk av forelder. Forteller `id` til `<CardAccordionBody />`.  */
-    bodyId?: string | undefined;
-    /**Overskriver default padding. */
-    padding?: Property.Padding<string> | undefined;
-    /**Overskriver default teksttype. */
-    typographyType?: StaticTypographyType | undefined;
-    /**Angir om teksten skal være i "bold"-format. */
-    bold?: boolean | undefined;
-} & {
-    children?: import("react").ReactNode;
-} & {
-    htmlProps?: ButtonHTMLAttributes<HTMLButtonElement> | undefined;
-} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/cjs/components/Card/CardAccordion/useElementHeight.d.ts

@@ -1 +0,0 @@
-export declare function useElementHeight(element: HTMLDivElement | null): number | null;

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

@@ -1,4 +0,0 @@
-export * from './Card';
-export * from './CardAccordion/CardAccordion';
-export * from './CardAccordion/CardAccordionHeader';
-export * from './CardAccordion/CardAccordionBody';

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

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import { BaseComponentProps } from '@norges-domstoler/dds-core';
-export type ChipProps = BaseComponentProps<HTMLDivElement, {
-    /** Teksten som vises i komponenten. */
-    text?: string;
-    /** Ekstra logikk når `<Chip />` lukkes. */
-    onClose?: () => void;
-}>;
-export declare const Chip: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
-    /** Teksten som vises i komponenten. */
-    text?: string | undefined;
-    /** Ekstra logikk når `<Chip />` lukkes. */
-    onClose?: (() => void) | undefined;
-} & {
-    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-import { ChipProps } from '.';
-declare const _default: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
-        text?: string | undefined;
-        onClose?: (() => void) | undefined;
-    } & {
-        htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
-    } & import("react").RefAttributes<HTMLDivElement>>;
-    argTypes: {
-        text: {
-            control: {
-                type: string;
-            };
-        };
-    };
-};
-export default _default;
-export declare const Default: (args: ChipProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,14 +0,0 @@
-import { StaticTypographyType } from '@norges-domstoler/dds-typography';
-export declare const typographyType: StaticTypographyType;
-export declare const chipTokens: {
-    container: {
-        gap: string;
-        padding: string;
-        backgroundColor: string;
-        border: string;
-        borderRadius: string;
-    };
-    group: {
-        gap: string;
-    };
-};

package/dist/cjs/components/Chip/ChipGroup.d.ts

@@ -1,3 +0,0 @@
-import { HTMLAttributes } from 'react';
-export type ChipGroupProps = HTMLAttributes<HTMLUListElement>;
-export declare const ChipGroup: import("react").ForwardRefExoticComponent<ChipGroupProps & import("react").RefAttributes<HTMLUListElement>>;

package/dist/cjs/components/Chip/ChipGroup.stories.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { ChipGroupProps } from '.';
-declare const _default: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<ChipGroupProps & import("react").RefAttributes<HTMLUListElement>>;
-};
-export default _default;
-export declare const Default: (args: ChipGroupProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +0,0 @@
-export * from './Chip';
-export * from './ChipGroup';

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

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import { InputProps } from '@norges-domstoler/dds-form';
-type DatepickerType = 'date' | 'datetime-local';
-export type DatepickerProps = Omit<InputProps, 'type'> & {
-    /** Angi dato-input med eller uten klokkeslett. */
-    type?: DatepickerType;
-};
-export declare const Datepicker: import("react").ForwardRefExoticComponent<Omit<InputProps, "type"> & {
-    /** Angi dato-input med eller uten klokkeslett. */
-    type?: DatepickerType | undefined;
-} & import("react").RefAttributes<HTMLInputElement>>;
-export {};