@norges-domstoler/dds-components 9.2.0 → 9.3.0

package/README.md

@@ -48,6 +48,7 @@ Tilgjengelige komponenter:
 - Divider
 - Drawer
 - FileUploader
+- FormGenerator
 - GlobalMessage
 - Grid
 - Icon

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

@@ -1,7 +1,7 @@
 import { ButtonProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick" | "onFocus" | "onBlur">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onFocus" | "onBlur" | "onClick" | "type">, "id" | "className"> & {
         size?: import("./Button.types").ButtonSize | undefined;
         label?: string | undefined;
         purpose?: import("./Button.types").ButtonPurpose | undefined;
@@ -13,12 +13,12 @@ declare const _default: {
         href?: string | undefined;
         target?: string | undefined;
     } & {
-        type?: "button" | "submit" | "reset" | undefined;
-        onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
         onFocus?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
         onBlur?: import("react").FocusEventHandler<HTMLButtonElement> | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+        type?: "button" | "submit" | "reset" | undefined;
     } & {
-        htmlProps?: Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick" | "onFocus" | "onBlur"> | undefined;
+        htmlProps?: Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onFocus" | "onBlur" | "onClick" | "type"> | undefined;
     } & import("react").RefAttributes<HTMLButtonElement>>;
     argTypes: {
         label: {

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

@@ -1,14 +1,14 @@
 import { CheckboxProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onBlur" | "name" | "value" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onChange" | "checked">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked">, "id" | "className"> & {
         label?: string | undefined;
         error?: boolean | undefined;
         disabled?: boolean | undefined;
         readOnly?: boolean | undefined;
         indeterminate?: boolean | undefined;
     } & import("../../types").CheckboxPickedHTMLAttributes & {
-        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onBlur" | "name" | "value" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onChange" | "checked"> | undefined;
+        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked"> | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {

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

@@ -0,0 +1,2 @@
+import { FormGeneratorProps } from './FormGenerator.types';
+export declare const FormGenerator: (props: FormGeneratorProps) => JSX.Element;

package/dist/cjs/components/FormGenerator/FormGenerator.examples.d.ts

@@ -0,0 +1,5 @@
+import { FormGeneratorField, FormGeneratorRow } from './FormGenerator.types';
+export declare const exampleDefault: (FormGeneratorField | FormGeneratorRow)[];
+export declare const exampleRowTypes: (FormGeneratorField | FormGeneratorRow)[];
+export declare const exampleChildren: (FormGeneratorField | FormGeneratorRow)[];
+export declare const exampleFull: (FormGeneratorField | FormGeneratorRow)[];

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

@@ -0,0 +1,10 @@
+import { FormGeneratorProps } from './FormGenerator.types';
+declare const _default: {
+    title: string;
+    component: (props: FormGeneratorProps) => JSX.Element;
+};
+export default _default;
+export declare const Default: (args: FormGeneratorProps) => JSX.Element;
+export declare const Rows: (args: FormGeneratorProps) => JSX.Element;
+export declare const ComponentWithChildren: (args: FormGeneratorProps) => JSX.Element;
+export declare const FullExample: (args: FormGeneratorProps) => JSX.Element;

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

@@ -0,0 +1,9 @@
+import { ScreenSize } from '../../hooks/useScreenSize';
+export declare const FormGeneratorFlexContainer: import("styled-components").StyledComponent<"div", any, {
+    screenSize: ScreenSize;
+}, never>;
+export declare const SubContainer: import("styled-components").StyledComponent<"div", any, {
+    screenSize: ScreenSize;
+    length: number;
+    breakpoint?: ScreenSize | undefined;
+}, never>;

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

@@ -0,0 +1,16 @@
+export declare const formGeneratorTokens: {
+    columnGaps: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+    };
+    rowGaps: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+};

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

@@ -0,0 +1,168 @@
+import { ScreenSize } from '../..';
+import { BaseComponentPropsWithChildren } from '../../types';
+import { ButtonProps } from '../Button';
+import { CardProps } from '../Card';
+import { CheckboxGroupProps, CheckboxProps } from '../Checkbox';
+import { DatepickerProps } from '../Datepicker';
+import { DividerProps } from '../Divider';
+import { GlobalMessageProps } from '../GlobalMessage';
+import { InputMessageProps } from '../InputMessage';
+import { ListProps, ListItemProps } from '../List';
+import { LocalMessageProps } from '../LocalMessage';
+import { RadioButtonGroupProps, RadioButtonProps } from '../RadioButton';
+import { SelectOption, SelectProps } from '../Select';
+import { SpinnerProps } from '../Spinner';
+import { TextInputProps } from '../TextInput';
+import { ToggleButtonProps, ToggleButtonGroupProps } from '../ToggleButton';
+import { HeadingProps, LabelProps, LinkProps, ParagraphProps, TypographyProps } from '../Typography';
+import { VisuallyHiddenProps } from '../VisuallyHidden';
+export declare type FormGeneratorProps = BaseComponentPropsWithChildren<HTMLElement, {
+    /** Definere liste med felt/komponenter og/eller rader med felt/komponenter */
+    fields: (FormGeneratorField | FormGeneratorRow)[];
+    /** For å hente ut state etter endringer */
+    stateOnChange: (newState: object) => void;
+}>;
+export declare type FormGeneratorRow = {
+    rowType: 'button' | 'standard';
+    breakpoint?: ScreenSize;
+    fields: FormGeneratorField[];
+};
+export declare type FormGeneratorField = FieldWithChildren | FieldWithoutChildren;
+declare type FieldWithChildren = CheckboxGroupField | ListField | RadioButtonGroupField | ToggleButtonGroupField;
+declare type FieldWithoutChildren = ButtonField | CardField | CheckboxField | DatepickerField | DividerField | GlobalMessageField | HeadingField | InputMessageField | LabelField | LinkField | ListItemField | LocalMessageField | ParagraphField | RadioButtonField | SelectField | SpinnerField | TextInputField | ToggleButtonField | TypographyField | VisuallyHiddenField;
+declare type ButtonField = {
+    component: 'Button';
+    props: ButtonProps;
+    hide?: boolean;
+};
+declare type CardField = {
+    component: 'Card';
+    props: CardProps;
+    hide?: boolean;
+    innerHTML: JSX.Element | string;
+};
+declare type CheckboxField = {
+    component: 'Checkbox';
+    props: CheckboxProps;
+    hide?: boolean;
+};
+declare type CheckboxGroupField = {
+    component: 'CheckboxGroup';
+    props: CheckboxGroupProps;
+    hide?: boolean;
+    children: CheckboxField[];
+};
+declare type DatepickerField = {
+    component: 'Datepicker';
+    props: DatepickerProps;
+    hide?: boolean;
+};
+declare type DividerField = {
+    component: 'Divider';
+    props: DividerProps;
+    hide?: boolean;
+};
+declare type GlobalMessageField = {
+    component: 'GlobalMessage';
+    props: GlobalMessageProps;
+    hide?: boolean;
+    innerHTML?: JSX.Element | string;
+};
+declare type HeadingField = {
+    component: 'Heading';
+    props: HeadingProps;
+    hide?: boolean;
+    innerHTML?: JSX.Element | string;
+};
+declare type InputMessageField = {
+    component: 'InputMessage';
+    props: InputMessageProps;
+    hide?: boolean;
+};
+declare type LabelField = {
+    component: 'Label';
+    props: LabelProps;
+    hide?: boolean;
+    innerHTML?: JSX.Element | string;
+};
+declare type LinkField = {
+    component: 'Link';
+    props: LinkProps;
+    hide?: boolean;
+    innerHTML?: JSX.Element | string;
+};
+declare type ListItemField = {
+    component: 'ListItem';
+    props?: ListItemProps;
+    hide?: boolean;
+    innerHTML?: JSX.Element | string;
+};
+declare type ListField = {
+    component: 'List';
+    props?: ListProps;
+    hide?: boolean;
+    children: ListItemField[];
+};
+declare type LocalMessageField = {
+    component: 'LocalMessage';
+    props: LocalMessageProps;
+    hide?: boolean;
+    innerHTML?: JSX.Element | string;
+};
+declare type ParagraphField = {
+    component: 'Paragraph';
+    props: ParagraphProps;
+    hide?: boolean;
+    innerHTML?: JSX.Element | string;
+};
+declare type RadioButtonField = {
+    component: 'RadioButton';
+    props: RadioButtonProps;
+    hide?: boolean;
+};
+declare type RadioButtonGroupField = {
+    component: 'RadioButtonGroup';
+    props: RadioButtonGroupProps<string | number>;
+    hide?: boolean;
+    children: RadioButtonField[];
+};
+declare type SelectField = {
+    component: 'Select';
+    props: SelectProps<SelectOption<unknown>, boolean>;
+    name: string;
+    hide?: boolean;
+};
+declare type SpinnerField = {
+    component: 'Spinner';
+    props: SpinnerProps;
+    hide?: boolean;
+};
+declare type TextInputField = {
+    component: 'TextInput';
+    props: TextInputProps;
+    hide?: boolean;
+};
+declare type ToggleButtonField = {
+    component: 'ToggleButton';
+    props: ToggleButtonProps;
+    hide?: boolean;
+};
+declare type ToggleButtonGroupField = {
+    component: 'ToggleButtonGroup';
+    props: ToggleButtonGroupProps;
+    hide?: boolean;
+    children: ToggleButtonField[];
+};
+declare type TypographyField = {
+    component: 'Typography';
+    props: TypographyProps;
+    hide?: boolean;
+    innerHTML: JSX.Element | string;
+};
+declare type VisuallyHiddenField = {
+    component: 'VisuallyHidden';
+    props: VisuallyHiddenProps;
+    hide?: boolean;
+    innerHTML: JSX.Element | string;
+};
+export {};

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

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

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

@@ -6,7 +6,7 @@ declare const _default: {
         userProps?: ({
             name: string;
             href?: string | undefined;
-        } & (import("react").ButtonHTMLAttributes<HTMLButtonElement> | import("react").AnchorHTMLAttributes<HTMLAnchorElement>)) | undefined;
+        } & (import("react").AnchorHTMLAttributes<HTMLAnchorElement> | import("react").ButtonHTMLAttributes<HTMLButtonElement>)) | undefined;
         navItems?: import("./OverflowMenu.types").OverflowMenuLinkItem[] | undefined;
         isOpen?: boolean | undefined;
         onClose?: (() => void) | undefined;

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

@@ -16,6 +16,9 @@ export declare const overflowMenuTokens: {
         };
     };
     link: {
+        iconWrapper: {
+            height: string;
+        };
         hover: {
             backgroundColor: string;
         };

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

@@ -1,22 +1,22 @@
 import { RadioButtonProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "value" | "aria-describedby" | "onChange" | "checked" | "readOnly" | "required">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "onChange" | "name" | "value" | "checked" | "readOnly" | "required">, "id" | "className"> & {
         label?: string | undefined;
         disabled?: boolean | undefined;
         error?: boolean | undefined;
     } & {
-        name?: string | undefined;
-        value?: string | number | readonly string[] | undefined;
         'aria-describedby'?: string | undefined;
         onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
+        name?: string | undefined;
+        value?: string | number | readonly string[] | undefined;
         checked?: boolean | undefined;
         readOnly?: boolean | undefined;
         required?: boolean | undefined;
     } & {
         children?: import("react").ReactNode;
     } & {
-        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "value" | "aria-describedby" | "onChange" | "checked" | "readOnly" | "required"> | undefined;
+        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "onChange" | "name" | "value" | "checked" | "readOnly" | "required"> | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {

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

@@ -1,5 +1,6 @@
-import { ButtonProps, ButtonSize } from '../Button';
+import { ButtonProps, ButtonPurpose, ButtonSize } from '../Button';
 import { OverflowMenuButtonItem } from '../OverflowMenu';
+export declare type SplitButtonPurpose = Extract<ButtonPurpose, 'primary' | 'secondary'>;
 export declare type SplitButtonProps = {
     /**Størrelse på komponenten. */
     size?: ButtonSize;
@@ -7,5 +8,7 @@ export declare type SplitButtonProps = {
     primaryAction: Omit<ButtonProps, 'size' | 'apperance' | 'purpose'>;
     /**Props for sekunære handlinger. */
     secondaryActions: OverflowMenuButtonItem[];
+    /**Formål med knappen */
+    purpose?: SplitButtonPurpose;
 };
 export declare const SplitButton: import("react").ForwardRefExoticComponent<SplitButtonProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,7 @@
+export declare const tokens: {
+    mainButton: {
+        primary: {
+            borderLeft: string;
+        };
+    };
+};

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

@@ -1,11 +1,11 @@
 import { ToggleButtonProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onBlur" | "name" | "value" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onChange" | "checked">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked">, "id" | "className"> & {
         label?: string | undefined;
         icon?: import("../../icons/utils").SvgIcon | undefined;
     } & import("../../types").CheckboxPickedHTMLAttributes & {
-        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onBlur" | "name" | "value" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onChange" | "checked"> | undefined;
+        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked"> | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {

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

@@ -1,7 +1,7 @@
 import { TooltipProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "style" | "children" | "onMouseLeave" | "onMouseOver">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "style" | "onMouseLeave" | "onMouseOver">, "id" | "className"> & {
         text: string;
         placement?: import("../..").Placement | undefined;
         children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> & import("react").RefAttributes<HTMLElement>;
@@ -12,7 +12,7 @@ declare const _default: {
         onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
         onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
     } & {
-        htmlProps?: Omit<import("react").HTMLAttributes<HTMLDivElement>, "style" | "children" | "onMouseLeave" | "onMouseOver"> | undefined;
+        htmlProps?: Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "style" | "onMouseLeave" | "onMouseOver"> | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
     argTypes: {
         text: {