@norges-domstoler/dds-components 9.1.1 → 9.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @norges-domstoler/dds-components
 
-[![Version](https://img.shields.io/npm/v/@norges-domstoler/dds-components)](https://www.npmjs.com/package/@norges-domstoler/dds-components)
+![Version](https://img.shields.io/npm/v/@norges-domstoler/dds-components) [![License](https://img.shields.io/npm/l/@norges-domstoler/dds-components)](https://www.npmjs.com/package/@norges-domstoler/dds-components) ![Checks](https://github.com/domstolene/designsystem/actions/workflows/design-system.yml/badge.svg)
 
 React UI komponenter til bruk i domstolenes tjenester.
 
@@ -47,6 +47,7 @@ Tilgjengelige komponenter:
 - DescriptionList
 - Divider
 - Drawer
+- FileUploader
 - GlobalMessage
 - Grid
 - Icon

package/dist/assets/svg/bullets/jordskifterett_bullet1.svg.js

@@ -1,4 +1,4 @@
 var img = "data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6.7085' cy='6.7085' r='2.625' fill='%230B0D0E'/%3e%3c/svg%3e";
-  var bullet = img;
+  var bulletLvl1 = img;
 
-export { bullet as default };
+export { bulletLvl1 as default };

package/dist/cjs/components/Breadcrumbs/Breadcrumb.tokens.d.ts

@@ -1,16 +1,10 @@
+import { StaticTypographyType } from '../Typography';
+export declare const typographyType: StaticTypographyType;
 export declare const breadcrumbTokens: {
     list: {
         gap: string;
     };
     listItem: {
-        font: {
-            lineHeight: any;
-            fontSize: string;
-            letterSpacing: any;
-            fontFamily: any;
-            fontWeight: any;
-            fontStyle: any;
-        };
         gap: string;
     };
     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>, "onFocus" | "onBlur" | "onClick" | "type">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick" | "onFocus" | "onBlur">, "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>, "onFocus" | "onBlur" | "onClick" | "type"> | undefined;
+        htmlProps?: Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick" | "onFocus" | "onBlur"> | undefined;
     } & import("react").RefAttributes<HTMLButtonElement>>;
     argTypes: {
         label: {

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

@@ -15,6 +15,7 @@ declare type StyledIconWrapperSpanProps = {
     size: ButtonSize;
     absolutePosition?: boolean;
     isHidden?: boolean;
+    justIcon?: boolean;
 };
 export declare const StyledIconWrapperSpan: import("styled-components").StyledComponent<"span", any, StyledIconWrapperSpanProps, never>;
 declare type LabelProps = {

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

@@ -1,201 +1,330 @@
-import { CSSObject } from 'styled-components';
+import { ButtonSize } from '.';
+import { StaticTypographyType } from '../Typography';
+export declare const typographyTypes: {
+    [k in ButtonSize]: StaticTypographyType;
+};
 export declare const buttonTokens: {
-    base: CSSObject;
-    focus: {
-        base: CSSObject;
-    };
-    sizes: {
-        small: {
-            justIcon: {
-                base: CSSObject;
-            };
-            justIconWrapper: {
-                base: CSSObject;
-            };
-            text: {
-                base: CSSObject;
-            };
-            iconWithTextMargin: string;
-        };
-        medium: {
-            justIcon: {
-                base: CSSObject;
-            };
-            justIconWrapper: {
-                base: CSSObject;
-            };
-            text: {
-                base: CSSObject;
-            };
-            iconWithTextMargin: string;
-        };
-        large: {
-            justIcon: {
-                base: CSSObject;
-            };
-            justIconWrapper: {
-                base: CSSObject;
-            };
-            text: {
-                base: CSSObject;
-            };
-            iconWithTextMargin: string;
-        };
-        tiny: {
-            justIcon: {
-                base: CSSObject;
-            };
-            justIconWrapper: {
-                base: CSSObject;
-            };
-            text: {
-                base: CSSObject;
-            };
-            iconWithTextMargin: string;
+    button: {
+        base: {
+            border: string;
         };
-    };
-    appearance: {
-        filled: {
-            base: CSSObject;
-            primary: {
-                base: CSSObject;
-                hover: {
-                    base: CSSObject;
-                };
-                active: {
-                    base: CSSObject;
-                };
-            };
-            secondary: {
-                base: CSSObject;
-                hover: {
-                    base: CSSObject;
-                };
-                active: {
-                    base: CSSObject;
-                };
-            };
-            danger: {
-                base: CSSObject;
-                hover: {
-                    base: CSSObject;
-                };
-                active: {
-                    base: CSSObject;
+        sizes: {
+            large: {
+                justIcon: {
+                    icon: {
+                        fontSize: string;
+                        padding: string;
+                    };
+                    wrapper: {
+                        height: string;
+                        width: string;
+                    };
                 };
-            };
-        };
-        ghost: {
-            base: CSSObject;
-            primary: {
-                base: CSSObject;
-                hover: {
-                    base: CSSObject;
+                text: {
+                    padding: string;
                 };
-                active: {
-                    base: CSSObject;
+                textAndIcon: {
+                    gap: string;
                 };
             };
-            secondary: {
-                base: CSSObject;
-                hover: {
-                    base: CSSObject;
-                };
-                active: {
-                    base: CSSObject;
+            medium: {
+                justIcon: {
+                    icon: {
+                        fontSize: string;
+                        padding: string;
+                    };
+                    wrapper: {
+                        height: string;
+                        width: string;
+                    };
                 };
-            };
-            danger: {
-                base: CSSObject;
-                hover: {
-                    base: CSSObject;
+                text: {
+                    padding: string;
                 };
-                active: {
-                    base: CSSObject;
+                textAndIcon: {
+                    gap: string;
                 };
             };
-        };
-        borderless: {
-            base: CSSObject;
-            primary: {
-                base: CSSObject;
-                hover: {
-                    base: CSSObject;
-                };
-                active: {
-                    base: CSSObject;
-                };
+            small: {
                 justIcon: {
-                    hover: {
-                        base: CSSObject;
+                    icon: {
+                        fontSize: string;
+                        padding: string;
                     };
-                    active: {
-                        base: CSSObject;
+                    wrapper: {
+                        height: string;
+                        width: string;
                     };
                 };
-            };
-            secondary: {
-                base: CSSObject;
-                hover: {
-                    base: CSSObject;
+                text: {
+                    padding: string;
                 };
-                active: {
-                    base: CSSObject;
+                textAndIcon: {
+                    gap: string;
                 };
+            };
+            tiny: {
                 justIcon: {
-                    hover: {
-                        base: CSSObject;
+                    icon: {
+                        fontSize: string;
+                        padding: string;
                     };
-                    active: {
-                        base: CSSObject;
+                    wrapper: {
+                        height: string;
+                        width: string;
                     };
                 };
-            };
-            danger: {
-                base: CSSObject;
-                hover: {
-                    base: CSSObject;
+                text: {
+                    padding: string;
                 };
-                active: {
-                    base: CSSObject;
+                textAndIcon: {
+                    gap: string;
                 };
-                justIcon: {
-                    hover: {
-                        base: CSSObject;
+            };
+        };
+        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;
+                        };
                     };
-                    active: {
-                        base: CSSObject;
+                    danger: {
+                        base: {
+                            color: string;
+                            backgroundColor: string;
+                            borderColor: string;
+                        };
+                        hover: {
+                            backgroundColor: string;
+                            borderColor: string;
+                        };
+                        active: {
+                            backgroundColor: string;
+                            borderColor: string;
+                        };
                     };
                 };
             };
-        };
-        rounded: {
-            base: CSSObject;
-            primary: {
-                base: CSSObject;
-                hover: {
-                    base: CSSObject;
+            ghost: {
+                base: {
+                    borderRadius: string;
+                    boxShadow: string;
+                    backgroundColor: string;
                 };
-                active: {
-                    base: CSSObject;
+                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;
+                        };
+                    };
                 };
             };
-            secondary: {
-                base: CSSObject;
-                hover: {
-                    base: CSSObject;
+            borderless: {
+                base: {
+                    borderRadius: string;
+                    boxShadow: string;
+                    backgroundColor: string;
+                    borderColor: string;
+                    textDecoration: string;
+                    textDecorationColor: string;
                 };
-                active: {
-                    base: CSSObject;
+                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;
+                            };
+                        };
+                    };
                 };
             };
-            danger: {
-                base: CSSObject;
-                hover: {
-                    base: CSSObject;
+            rounded: {
+                base: {
+                    borderRadius: string;
+                    boxShadow: string;
                 };
-                active: {
-                    base: CSSObject;
+                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/Card/Card.tokens.d.ts

@@ -1,26 +1,27 @@
-import { CSSObject } from 'styled-components';
 export declare const cardTokens: {
-    base: CSSObject;
-    navigation: {
-        hover: {
-            base: CSSObject;
-        };
-        focus: {
-            base: CSSObject;
-        };
+    base: {
+        border: string;
     };
     colors: {
-        filledDark: {
-            base: CSSObject;
-        };
         filledLight: {
-            base: CSSObject;
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
         };
-        strokeLight: {
-            base: CSSObject;
+        filledDark: {
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
         };
         strokeDark: {
-            base: CSSObject;
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
+        };
+        strokeLight: {
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
         };
     };
 };

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

@@ -0,0 +1,28 @@
+import { StaticTypographyType } from '../../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/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>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onBlur" | "name" | "value" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onChange" | "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>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked"> | undefined;
+        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onBlur" | "name" | "value" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onChange" | "checked"> | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {

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

@@ -1,5 +1,4 @@
-import { BaseComponentPropsWithChildren } from '../../types';
-declare type Direction = 'column' | 'row';
+import { BaseComponentPropsWithChildren, Direction } from '../../types';
 export declare type CheckboxGroupProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     /**Ledetekst for gruppen. */
     label?: string;
@@ -14,4 +13,3 @@ export declare type CheckboxGroupProps = BaseComponentPropsWithChildren<HTMLDivE
     required?: boolean;
 }>;
 export declare const CheckboxGroup: (props: CheckboxGroupProps) => JSX.Element;
-export {};