@norges-domstoler/dds-components 4.0.2 → 4.2.0

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { BaseComponentProps } from '../../types';
+export declare type TagPurpose = 'success' | 'info' | 'danger' | 'warning' | 'default';
+export declare type TagProps = BaseComponentProps<HTMLSpanElement, {
+    /**Tekst som vises i `<Tag />.` */
+    text?: string;
+    /**Formål med status eller kategorisering. Påvirker styling. */
+    purpose?: TagPurpose;
+}>;
+export declare const Tag: import("react").ForwardRefExoticComponent<{
+    htmlProps?: import("react").HTMLAttributes<HTMLSpanElement> | undefined;
+} & Pick<import("react").HTMLAttributes<HTMLSpanElement>, "id" | "className"> & {
+    /**Tekst som vises i `<Tag />.` */
+    text?: string | undefined;
+    /**Formål med status eller kategorisering. Påvirker styling. */
+    purpose?: TagPurpose | undefined;
+} & import("react").RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { TagProps } from '.';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        htmlProps?: import("react").HTMLAttributes<HTMLSpanElement> | undefined;
+    } & Pick<import("react").HTMLAttributes<HTMLSpanElement>, "id" | "className"> & {
+        text?: string | undefined;
+        purpose?: import("./Tag").TagPurpose | undefined;
+    } & import("react").RefAttributes<HTMLSpanElement>>;
+    argTypes: {
+        text: {
+            control: string;
+        };
+    };
+};
+export default _default;
+export declare const Overview: () => JSX.Element;
+export declare const Default: (args: TagProps) => JSX.Element;

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

@@ -0,0 +1,26 @@
+import { CSSObject } from 'styled-components';
+export declare const tagTokens: {
+    wrapper: {
+        base: CSSObject;
+        type: {
+            success: {
+                base: CSSObject;
+            };
+            warning: {
+                base: CSSObject;
+            };
+            danger: {
+                base: CSSObject;
+            };
+            default: {
+                base: CSSObject;
+            };
+            info: {
+                base: CSSObject;
+            };
+        };
+    };
+    inner: {
+        base: CSSObject;
+    };
+};

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

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

package/dist/cjs/components/TextInput/CharCounter.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { BaseComponentProps } from '../../types';
+declare type Props = BaseComponentProps<HTMLElement, {
+    current: number;
+    max: number;
+}>;
+declare function CharCounter(props: Props): JSX.Element;
+export default CharCounter;

package/dist/cjs/components/TextInput/CharCounter.tokens.d.ts

@@ -0,0 +1,4 @@
+import { CSSObject } from 'styled-components';
+export declare const charCounterTokens: {
+    base: CSSObject;
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const TextInput: React.ForwardRefExoticComponent<{
+    multiline?: boolean | undefined;
+    withCharacterCounter?: boolean | undefined;
+} & {
+    label?: string | undefined;
+    width?: import("csstype").Property.Width<string> | undefined;
+    tip?: string | undefined;
+    errorMessage?: string | undefined;
+} & React.InputHTMLAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,69 @@
+/// <reference types="react" />
+import { TextInputProps } from '.';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        multiline?: boolean | undefined;
+        withCharacterCounter?: boolean | undefined;
+    } & {
+        label?: string | undefined;
+        width?: import("csstype").Property.Width<string> | undefined;
+        tip?: string | undefined;
+        errorMessage?: string | undefined;
+    } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLInputElement>>;
+    argTypes: {
+        label: {
+            control: {
+                type: string;
+            };
+        };
+        tip: {
+            control: {
+                type: string;
+            };
+        };
+        errorMessage: {
+            control: {
+                type: string;
+            };
+        };
+        width: {
+            control: {
+                type: string;
+            };
+        };
+        multiline: {
+            control: {
+                type: string;
+            };
+        };
+        required: {
+            control: {
+                type: string;
+            };
+        };
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+        readOnly: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+export declare const TextInputOverview: (args: TextInputProps) => JSX.Element;
+export declare const TextareaOverview: (args: TextInputProps) => JSX.Element;
+export declare const Default: (args: TextInputProps) => JSX.Element;
+export declare const WithLabel: (args: TextInputProps) => JSX.Element;
+export declare const WithCharacterCount: (args: TextInputProps) => JSX.Element;
+export declare const Textarea: (args: TextInputProps) => JSX.Element;
+export declare const TextareaWithLabel: (args: TextInputProps) => JSX.Element;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TextInputProps } from './TextInput.types';
+export declare const TextArea: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers").InputProps, "disabled" | "readOnly"> & {
+    hasErrorMessage: boolean;
+    hasLabel: import("../../helpers").LabelPresence;
+}, never>;
+export declare const MessageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type LabelProps = Pick<TextInputProps, 'multiline' | 'disabled' | 'readOnly'>;
+export declare const Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>, any, import("../../helpers").StyledLabelProps & LabelProps, never>;
+export {};

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

@@ -0,0 +1,54 @@
+import { CSSObject } from 'styled-components';
+import { Property } from 'csstype';
+export declare const textInputTokens: {
+    general: {
+        input: {
+            borderRadius: string;
+            borderWidth: string;
+            borderColor: string;
+            textColor: string;
+            font: {
+                lineHeight: any;
+                fontSize: string;
+                letterSpacing: any;
+                fontFamily: any;
+                fontWeight: any;
+                fontStyle: any;
+            };
+            hover: {
+                backgroundColor: string;
+                borderColor: string;
+                borderWidth: string;
+            };
+            focus: {
+                borderColor: string;
+                borderWidth: string;
+            };
+        };
+        label: {
+            hover: {
+                textColor: string;
+            };
+            focus: {
+                textColor: string;
+            };
+        };
+    };
+    multiline: {
+        base: CSSObject;
+        hasLabel: {
+            base: CSSObject;
+        };
+        noLabel: {
+            base: CSSObject;
+        };
+    };
+    label: {
+        multiline: {
+            base: CSSObject;
+        };
+    };
+    wrapper: {
+        defaultWidth: Property.Width<string>;
+    };
+};

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

@@ -0,0 +1,8 @@
+import { InputHTMLAttributes } from 'react';
+import { InputProps } from '../../helpers';
+export declare type TextInputProps = {
+    /**Gjør inputfeltet om til `<textarea>`. */
+    multiline?: boolean;
+    /** Spesifiserer om tegntelleren skal vises. */
+    withCharacterCounter?: boolean;
+} & InputProps & InputHTMLAttributes<HTMLTextAreaElement>;

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

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

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

@@ -0,0 +1,18 @@
+import { SvgIconTypeMap } from '@mui/material';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+import { InputHTMLAttributes } from 'react';
+import { BaseComponentProps } from '../../types';
+export declare type ToggleButtonProps = BaseComponentProps<HTMLInputElement, {
+    /**Ledetekst for inputelementet. */
+    label?: string;
+    /** Ikon. */
+    Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, 'svg'>>;
+}, InputHTMLAttributes<HTMLInputElement>>;
+export declare const ToggleButton: import("react").ForwardRefExoticComponent<{
+    htmlProps?: InputHTMLAttributes<HTMLInputElement> | undefined;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "className" | "id"> & {
+    /**Ledetekst for inputelementet. */
+    label?: string | undefined;
+    /** Ikon. */
+    Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, "svg">> | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ToggleButtonProps } from '.';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        htmlProps?: import("react").InputHTMLAttributes<HTMLInputElement> | undefined;
+    } & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "id" | "className"> & {
+        label?: string | undefined;
+        Icon?: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<Record<string, unknown>, "svg">> | undefined;
+    } & import("react").RefAttributes<HTMLInputElement>>;
+};
+export default _default;
+export declare const Default: (args: ToggleButtonProps) => JSX.Element;
+export declare const WithIcon: (args: ToggleButtonProps) => JSX.Element;

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

@@ -0,0 +1,22 @@
+import { CSSObject } from 'styled-components';
+export declare const toggleButtonTokens: {
+    base: CSSObject;
+    hover: {
+        base: CSSObject;
+    };
+    focus: {
+        base: CSSObject;
+    };
+    checked: {
+        base: CSSObject;
+        hover: {
+            base: CSSObject;
+        };
+    };
+    group: {
+        base: CSSObject;
+    };
+    container: {
+        base: CSSObject;
+    };
+};

package/dist/cjs/components/ToggleButton/ToggleButtonGroup.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { BaseComponentPropsWithChildren } from '../../types';
+declare type Direction = 'row' | 'column';
+export declare type ToggleButtonGroupProps = BaseComponentPropsWithChildren<HTMLDivElement, {
+    /** Ledetekst for gruppen. */
+    label?: string;
+    /**Retningen barna legger seg i. */
+    direction?: Direction;
+    /** Custom `id` for ledetekst. Blir generert som default for å knytte ledetekst til gruppen.  */
+    labelId?: string;
+}>;
+export declare const ToggleButtonGroup: (props: ToggleButtonGroupProps) => JSX.Element;
+export {};

package/dist/cjs/components/ToggleButton/ToggleButtonGroup.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ToggleButtonGroupProps } from '.';
+declare const _default: {
+    title: string;
+    component: (props: ToggleButtonGroupProps) => JSX.Element;
+};
+export default _default;
+export declare const Default: (args: ToggleButtonGroupProps) => JSX.Element;
+export declare const WithLabel: (args: ToggleButtonGroupProps) => JSX.Element;

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

@@ -0,0 +1,2 @@
+export * from './ToggleButton';
+export * from './ToggleButtonGroup';

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

@@ -0,0 +1,32 @@
+import React, { HTMLAttributes } from 'react';
+import { Placement } from '../../hooks';
+import { BaseComponentProps } from '../../types';
+declare type AnchorElement = React.ReactElement & React.RefAttributes<HTMLElement>;
+declare type PickedHTMLAttributes = Pick<HTMLAttributes<HTMLDivElement>, 'style' | 'onMouseLeave' | 'onMouseOver'>;
+export declare type TooltipProps = BaseComponentProps<HTMLDivElement, {
+    /**Innhold i tooltip. */
+    text: string;
+    /**Plassering i forhold til anchor-elementet. */
+    placement?: Placement;
+    /**Anchor-elementet. */
+    children: AnchorElement;
+    /**Forsinkelse for når tooltip skal dukke opp. Oppgis i millisekunder.  */
+    delay?: number;
+    /**`id` for tooltip. */
+    tooltipId?: string;
+} & PickedHTMLAttributes, Omit<HTMLAttributes<HTMLDivElement>, 'children' | keyof PickedHTMLAttributes>>;
+export declare const Tooltip: React.ForwardRefExoticComponent<{
+    htmlProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "onMouseLeave" | "onMouseOver" | "children"> | undefined;
+} & Pick<Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "onMouseLeave" | "onMouseOver" | "children">, "className" | "id"> & {
+    /**Innhold i tooltip. */
+    text: string;
+    /**Plassering i forhold til anchor-elementet. */
+    placement?: Placement | undefined;
+    /**Anchor-elementet. */
+    children: AnchorElement;
+    /**Forsinkelse for når tooltip skal dukke opp. Oppgis i millisekunder.  */
+    delay?: number | undefined;
+    /**`id` for tooltip. */
+    tooltipId?: string | undefined;
+} & PickedHTMLAttributes & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { TooltipProps } from '.';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        htmlProps?: Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "style" | "onMouseLeave" | "onMouseOver"> | undefined;
+    } & Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "style" | "onMouseLeave" | "onMouseOver">, "id" | "className"> & {
+        text: string;
+        placement?: import("../../hooks").Placement | undefined;
+        children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> & import("react").RefAttributes<HTMLElement>;
+        delay?: number | undefined;
+        tooltipId?: string | undefined;
+    } & {
+        style?: import("react").CSSProperties | undefined;
+        onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    argTypes: {
+        text: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+export declare const Overview: () => JSX.Element;
+export declare const Default: (args: TooltipProps) => JSX.Element;
+export declare const Centered: (args: TooltipProps) => JSX.Element;
+export declare const TextButton: (args: TooltipProps) => JSX.Element;

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

@@ -0,0 +1,8 @@
+export declare const SvgArrow: import("styled-components").StyledComponent<"svg", any, {}, never>;
+export declare const ArrowWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type WrapperProps = {
+    open: boolean;
+};
+export declare const TooltipWrapper: import("styled-components").StyledComponent<"div", any, WrapperProps, never>;
+export {};

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

@@ -0,0 +1,14 @@
+import { CSSObject } from 'styled-components';
+export declare const tooltipTokens: {
+    wrapper: {
+        base: CSSObject;
+    };
+    svgArrow: {
+        border: {
+            fill: string;
+        };
+        background: {
+            fill: string;
+        };
+    };
+};

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

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

package/dist/cjs/components/Typography/Body.stories.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>;
+};
+export default _default;
+export declare const Body: () => JSX.Element;
+export declare const Headings: () => JSX.Element;
+export declare const Leads: () => JSX.Element;
+export declare const Supporting: () => JSX.Element;
+export declare const Link: () => JSX.Element;

package/dist/cjs/components/Typography/Examples.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>;
+};
+export default _default;
+export declare const Article: () => JSX.Element;
+export declare const Link: () => JSX.Element;

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

@@ -0,0 +1,48 @@
+import { ElementType, PropsWithChildren, HTMLAttributes, AnchorHTMLAttributes } from 'react';
+import { CSSObject } from 'styled-components';
+import { TextColor, OtherTypographyType, AnchorTypographyType, LabelTypographyType } from './Typography.types';
+import { BaseComponentProps } from '../../types';
+export declare const inlineElements: ElementType[];
+export declare function isTextColor(color: string): color is TextColor;
+export declare const getTextColor: (color: TextColor | string) => string;
+export declare type TypographyInteractionProps = {
+    hover?: CSSObject;
+    active?: CSSObject;
+};
+declare type BaseTypographyProps = PropsWithChildren<{
+    /**HTML tag som skal brukes istedenfor default definert via `typographyType`.  */
+    as?: ElementType;
+    /**Spesifiserer om tekstelementet skal ha spacing definert i Elsa. Brukes hovedsakelig i artikler og lignende. **OBS!** har forskjellig virkning på ulike typografityper. `body` og `lead`-typer får margin på bunnen, `heading`-typer får margin på bunnen og padding på toppen mens `supportingStyles` får margin topp og bunn. */
+    withMargins?: boolean;
+    /**Tekstfarge fra utvalget eller custom. **OBS!** Bruk farger fra `@dds-design-tokens`. */
+    color?: TextColor | string;
+    /**Setter `bold` styling. */
+    bold?: boolean;
+    /**Setter `italic` styling. */
+    italic?: boolean;
+    /**Setter en linje under. */
+    underline?: boolean;
+    /**Støtte for å enkelt kunne endre på hover- og active-styling. Bruk `@dds-design-tokens` til farger osv. */
+    interactionProps?: TypographyInteractionProps;
+}> & Pick<HTMLAttributes<HTMLElement>, 'style'>;
+declare type AnchorTypographyProps = BaseComponentProps<HTMLAnchorElement, BaseTypographyProps & {
+    href?: string | undefined;
+    /** Spesifiserer om lenka er ekstern ved `typographyType='a'` eller `as='a'`.*/
+    externalLink?: boolean;
+    /**nativ `target`-prop ved `typographyType='a'`.  */
+    target?: string;
+}, AnchorHTMLAttributes<HTMLAnchorElement>>;
+declare type LabelTypographyProps = BaseComponentProps<HTMLLabelElement, BaseTypographyProps, HTMLAttributes<HTMLLabelElement>>;
+declare type OtherTypographyProps = BaseComponentProps<HTMLElement, BaseTypographyProps, HTMLAttributes<HTMLElement>>;
+export declare type TypographyProps = ({
+    /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under.  */
+    typographyType?: AnchorTypographyType;
+} & AnchorTypographyProps) | ({
+    /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under.  */
+    typographyType?: LabelTypographyType;
+} & LabelTypographyProps) | ({
+    /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under.  */
+    typographyType?: OtherTypographyType;
+} & OtherTypographyProps);
+export declare const Typography: import("react").ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<HTMLElement>>;
+export {};

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

@@ -0,0 +1,63 @@
+/// <reference types="react" />
+import { TypographyProps } from '.';
+declare type StoryTProps = {
+    text: string;
+} & TypographyProps;
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<HTMLElement>>;
+    argTypes: {
+        typographyType: {
+            control: {
+                type: string;
+            };
+        };
+        bold: {
+            control: {
+                type: string;
+            };
+        };
+        italic: {
+            control: {
+                type: string;
+            };
+        };
+        withMargins: {
+            control: {
+                type: string;
+            };
+        };
+        externalLink: {
+            control: {
+                type: string;
+            };
+        };
+        color: {
+            control: {
+                type: string;
+            };
+        };
+        href: {
+            control: {
+                type: string;
+            };
+        };
+        text: {
+            control: {
+                type: string;
+            };
+        };
+        as: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+export declare const Default: (args: StoryTProps) => JSX.Element;