@norges-domstoler/dds-components 6.0.0 → 7.0.0

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

@@ -7,4 +7,5 @@ export default _default;
 export declare const Overview: () => JSX.Element;
 export declare const Default: (args: CardProps) => JSX.Element;
 export declare const Accordion: (args: ExpandableCardProps) => JSX.Element;
+export declare const AccordionControlled: (args: ExpandableCardProps) => JSX.Element;
 export declare const Examples: (args: CardProps) => JSX.Element;

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

@@ -2,10 +2,14 @@ import { BaseComponentPropsWithChildren } from '../../../types';
 export declare 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;
 } & {

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

@@ -55,3 +55,4 @@ declare const _default: {
 export default _default;
 export declare const Overview: (args: CheckboxProps) => JSX.Element;
 export declare const Default: (args: CheckboxProps) => JSX.Element;
+export declare const WithLabel: (args: CheckboxProps) => JSX.Element;

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

@@ -13,5 +13,5 @@ export declare type CheckboxGroupProps = BaseComponentPropsWithChildren<HTMLDivE
     /**Indikerer at det er påkrevd å velge minst ett alternativ. Innebærer visuell endring. **OBS!** `required` må i tillegg gis til `<Checkbox />` manuelt. */
     required?: boolean;
 }>;
-export declare const CheckboxGroup: ({ label, direction, errorMessage, tip, required, groupId, children, id, className, htmlProps, ...rest }: CheckboxGroupProps) => JSX.Element;
+export declare const CheckboxGroup: (props: CheckboxGroupProps) => JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 import { CheckboxGroupProps } from '.';
 declare const _default: {
     title: string;
-    component: ({ label, direction, errorMessage, tip, required, groupId, children, id, className, htmlProps, ...rest }: CheckboxGroupProps) => JSX.Element;
+    component: (props: CheckboxGroupProps) => JSX.Element;
     argTypes: {
         label: {
             control: {

package/dist/cjs/components/Checkbox/CheckboxGroup.tokens.d.ts

@@ -1,19 +1,13 @@
-import { CSSObject } from 'styled-components';
 export declare const checkboxGroupTokens: {
-    label: {
-        spaceLeft: string;
-    };
-    container: {
-        base: CSSObject;
+    outerContainer: {
+        gap: string;
     };
     groupContainer: {
-        direction: {
-            row: {
-                base: CSSObject;
-            };
-            column: {
-                base: CSSObject;
-            };
+        row: {
+            gap: string;
+        };
+        column: {
+            gap: string;
         };
     };
 };

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

@@ -45,6 +45,7 @@ declare const _default: {
 export default _default;
 export declare const OverviewDate: () => JSX.Element;
 export declare const OverviewDatetime: () => JSX.Element;
+export declare const OverviewSizes: () => JSX.Element;
 export declare const Default: (args: DatepickerProps) => JSX.Element;
 export declare const WithLabel: (args: DatepickerProps) => JSX.Element;
 export declare const Datetime: (args: DatepickerProps) => JSX.Element;

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

@@ -1,9 +1,27 @@
-import { CSSObject } from 'styled-components';
 export declare const datepickerTokens: {
     calendarIndicator: {
-        base: CSSObject;
+        base: {
+            sizes: {
+                medium: {
+                    height: string;
+                    width: string;
+                    right: string;
+                };
+                small: {
+                    height: string;
+                    width: string;
+                    right: string;
+                };
+                tiny: {
+                    height: string;
+                    width: string;
+                    right: string;
+                };
+            };
+        };
         focus: {
-            base: CSSObject;
+            outline: string;
+            outlineOffset: string;
         };
     };
 };

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

@@ -1,14 +1,17 @@
-import { CSSObject } from 'styled-components';
 export declare const inputMessageTokens: {
-    padding: string;
-    base: CSSObject;
-    tip: {
-        base: CSSObject;
-    };
-    error: {
-        base: CSSObject;
+    message: {
+        tip: {
+            backgroundColor: string;
+            padding: string;
+        };
+        error: {
+            padding: string;
+            color: string;
+            backgroundColor: string;
+            gap: string;
+        };
     };
     icon: {
-        spaceRight: string;
+        marginTop: string;
     };
 };

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

@@ -7,10 +7,6 @@ export declare const listTokens: {
         bodySans02: CSSObject;
         bodySans03: CSSObject;
         bodySans04: CSSObject;
-        bodySerif01: CSSObject;
-        bodySerif02: CSSObject;
-        bodySerif03: CSSObject;
-        bodySerif04: CSSObject;
         inherit: CSSObject;
     };
 };

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

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, HTMLAttributes, ReactElement, Ref } from 'react';
+import { ChangeEvent, HTMLAttributes, ReactElement, Ref } from 'react';
 import { BaseComponentPropsWithChildren } from '../../types';
 declare type Direction = 'column' | 'row';
 export declare type RadioButtonGroupProps<T extends string | number> = BaseComponentPropsWithChildren<HTMLDivElement, {
@@ -25,7 +25,7 @@ export declare type RadioButtonGroupProps<T extends string | number> = BaseCompo
     /**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>(props: Pick<Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, "className" | "id"> & {
+export declare const RadioButtonGroup: <T extends string | number = string>(props: Pick<Omit<HTMLAttributes<HTMLDivElement>, "onChange">, "className" | "id"> & {
     /** Gir alle barna `name` prop.*/
     name?: string | undefined;
     /**Ledetekst for hele gruppen. */
@@ -49,10 +49,10 @@ export declare const RadioButtonGroup: <T extends string | number = string>(prop
     /**custom id for for gruppen, knytter `label` til gruppen via `aria-label`. */
     groupId?: string | undefined;
 } & {
-    children?: React.ReactNode;
+    children?: import("react").ReactNode;
 } & {
-    htmlProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> | undefined;
+    htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, "onChange"> | undefined;
 } & {
-    ref?: React.Ref<HTMLDivElement> | undefined;
+    ref?: Ref<HTMLDivElement> | undefined;
 }) => ReactElement;
 export {};

package/dist/cjs/components/ScrollableContainer/scrollbarStyling.d.ts

@@ -21,6 +21,6 @@ export declare const scrollbarStyling: {
     };
     firefox: {
         scrollbarColor: string;
-        scrollbarWidth: string;
+        scrollbarWidth: "thin";
     };
 };

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

@@ -1,37 +1,67 @@
-import { CSSObject } from 'styled-components';
 export declare const searchTokens: {
     input: {
-        base: CSSObject;
-        small: {
-            base: CSSObject;
-        };
-        medium: {
-            base: CSSObject;
+        base: {
+            paddingRight: string;
+            paddingLeft: string;
         };
-        large: {
-            base: CSSObject;
+        sizes: {
+            small: {
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+                paddingTop: string;
+                paddingBottom: string;
+                paddingLeft: string;
+            };
+            medium: {
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+                paddingTop: string;
+                paddingBottom: string;
+                paddingLeft: string;
+            };
+            large: {
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+                paddingTop: string;
+                paddingBottom: string;
+                paddingLeft: string;
+            };
         };
     };
     icon: {
-        spaceLeft: string;
+        base: {
+            left: string;
+            color: string;
+        };
         small: {
-            size: string;
-            spaceTop: string;
+            top: string;
         };
         medium: {
-            size: string;
-            spaceTop: string;
+            top: string;
         };
         large: {
-            size: string;
-            spaceTop: string;
+            top: string;
         };
-        spaceTop: string;
-    };
-    iconWrapper: {
-        base: CSSObject;
     };
     container: {
-        base: CSSObject;
+        gap: string;
     };
 };

package/dist/cjs/components/Select/CustomSelect.stories.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { SelectOption, SelectProps } from '.';
 declare const _default: {
     title: string;
-    component: <TOption extends Record<string, unknown>, IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, customOptionElement, customSingleValueElement, ...rest }: SelectProps<TOption, IsMulti>, ref: ((instance: import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null) => void) | React.MutableRefObject<import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null> | null) => JSX.Element;
+    component: <TOption extends Record<string, unknown>, IsMulti extends boolean = false>(props: SelectProps<TOption, IsMulti>, ref: ((instance: import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null) => void) | React.MutableRefObject<import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null> | null) => JSX.Element;
     argTypes: {
         label: {
             control: {
@@ -63,4 +63,4 @@ declare const _default: {
 };
 export default _default;
 declare type SingleSelectProps = SelectProps<SelectOption, false>;
-export declare const Overview: (args: SingleSelectProps) => JSX.Element;
+export declare const Example: (args: SingleSelectProps) => JSX.Element;

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

@@ -1,7 +1,7 @@
 import { SelectProps } from './Select';
 declare const _default: {
     title: string;
-    component: <TOption extends Record<string, unknown>, IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, customOptionElement, customSingleValueElement, ...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;
+    component: <TOption extends Record<string, unknown>, IsMulti extends boolean = false>(props: 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: {
@@ -67,6 +67,7 @@ declare type Option = {
 };
 declare type MultiSelectProps = SelectProps<Option, true>;
 export declare const Overview: (args: MultiSelectProps) => JSX.Element;
+export declare const OverviewSizes: (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;

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

@@ -1,7 +1,9 @@
 import { Property } from 'csstype';
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 import { GroupBase, OptionProps, Props as ReactSelectProps, SelectInstance, SingleValueProps } from 'react-select';
+import { InputSize } from '../../helpers';
 import { WithRequiredIf } from '../../types/utils';
+import { SvgIcon } from '../../icons/utils';
 export declare type SelectOption<TValue = unknown> = {
     label: string | number;
     value: TValue;
@@ -14,6 +16,10 @@ export declare type SelectProps<TOption extends Record<string, unknown>, IsMulti
     label?: string;
     /**Gir required styling. **OBS!** støtter ikke DOM `required` attributt.   */
     required?: boolean;
+    /**Størrelsen på komponenten. */
+    componentSize?: InputSize;
+    /**Ikonet som vises i komponenten. */
+    icon?: SvgIcon;
     /**Nedtrekkslisten blir disabled og får readOnly styling. */
     readOnly?: boolean;
     /**Meldingen som vises ved valideringsfeil. */
@@ -28,7 +34,7 @@ export declare type SelectProps<TOption extends Record<string, unknown>, IsMulti
     style?: React.CSSProperties;
     customOptionElement?: (props: OptionProps<TOption, IsMulti, GroupBase<TOption>>) => JSX.Element;
     customSingleValueElement?: (props: SingleValueProps<TOption, IsMulti, GroupBase<TOption>>) => JSX.Element;
-} & WrappedReactSelectProps<TOption, IsMulti, GroupBase<TOption>>;
+} & Pick<HTMLAttributes<HTMLInputElement>, 'aria-required'> & WrappedReactSelectProps<TOption, IsMulti, GroupBase<TOption>>;
 declare type ForwardRefType<TOption, IsMulti extends boolean> = React.ForwardedRef<SelectInstance<TOption, IsMulti, GroupBase<TOption>>>;
-export declare const Select: <TOption extends Record<string, unknown>, IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, customOptionElement, customSingleValueElement, ...rest }: SelectProps<TOption, IsMulti>, ref: ForwardRefType<TOption, IsMulti>) => JSX.Element;
+export declare const Select: <TOption extends Record<string, unknown>, IsMulti extends boolean = false>(props: SelectProps<TOption, IsMulti>, ref: ForwardRefType<TOption, IsMulti>) => JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 import { SelectOption, SelectProps } from '.';
 declare const _default: {
     title: string;
-    component: <TOption extends Record<string, unknown>, IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, customOptionElement, customSingleValueElement, ...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;
+    component: <TOption extends Record<string, unknown>, IsMulti extends boolean = false>(props: 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: {
@@ -63,6 +63,8 @@ declare const _default: {
 export default _default;
 declare type SingleSelectProps = SelectProps<SelectOption, false>;
 export declare const Overview: (args: SingleSelectProps) => JSX.Element;
+export declare const OverviewSizes: (args: SingleSelectProps) => JSX.Element;
 export declare const Default: (args: SingleSelectProps) => JSX.Element;
+export declare const WithGroups: (args: SingleSelectProps) => JSX.Element;
 export declare const WithLabel: (args: SingleSelectProps) => JSX.Element;
 export declare const ManyItems: (args: SingleSelectProps) => JSX.Element;

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

@@ -1,17 +1,18 @@
 import { GroupBase, StylesConfig } from 'react-select';
+import { Property } from 'csstype';
+import { Icon } from '../Icon';
+import { InputSize } from '../../helpers';
 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 = {
     errorMessage?: string;
     isDisabled?: boolean;
     readOnly?: boolean;
-    hasLabel: boolean;
+    width?: Property.Width;
+    componentSize: InputSize;
     isMulti?: boolean;
 };
 export declare const Container: import("styled-components").StyledComponent<"div", any, StyledContainerProps, never>;
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
-    width?: string | number | undefined;
-}, never>;
 export declare const InnerSingleValue: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
 export declare const getCustomStyles: <TOption>() => Partial<StylesConfig<TOption, boolean, GroupBase<TOption>>>;
 export {};