@norges-domstoler/dds-components 5.2.0-beta.2 → 5.3.1

package/README.md

@@ -2,9 +2,9 @@
 
 [![Version](https://img.shields.io/npm/v/@norges-domstoler/dds-components)](https://www.npmjs.com/package/@norges-domstoler/dds-components)
 
-React UI komponenter til bruk i Domstolenes tjenester.
+React UI komponenter til bruk i domstolenes tjenester.
 
-Sjekk ut [Domstolenes designsystem Elsa](https://design.domstol.no/) og [Storybook](https://domstolene.github.io/designsystem) for mer dokumentasjon og demoer.
+Sjekk ut [Elsa - domstolenes designsystem](https://design.domstol.no/) og [ Elsa Storybook](https://domstolene.github.io/designsystem) for mer dokumentasjon og demoer.
 
 ## 📦 Installasjon
 
@@ -40,24 +40,35 @@ Tilgjengelige komponenter:
 - Button
 - Card (inkludert CardAccordion)
 - Checkbox
+- Chip
 - Datepicker
 - DescriptionList
 - Divider
+- Drawer
 - GlobalMessage
-- IconWrapper
+- Icon
+- InputMessage
 - InternaHeader
 - List
 - LocalMessage
+- Modal
+- OverflowMenu
 - Pagination
 - Popover
 - RadioButton
+- Scrollbar
 - Search
 - Select
 - SkipToContent
 - Spinner
 - Table
+- Tabs
+- Tag
 - TextInput
+- ToggleButton
+- Tooltip
 - Typography
+- VisuallyHidden
 
 ## ⏫ Release av ny versjon
 

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

@@ -0,0 +1,70 @@
+export declare const descriptionListTokens: {
+    term: {
+        appearance: {
+            small: {
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+                color: string;
+                lineHeight: any;
+                fontSize: string;
+                letterSpacing: any;
+                fontFamily: any;
+                fontWeight: any;
+                fontStyle: any;
+            };
+            bold: {
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+                lineHeight: any;
+                fontSize: string;
+                letterSpacing: any;
+                fontFamily: any;
+                fontWeight: number;
+                fontStyle: any;
+                color: string;
+            };
+        };
+        firstOfType: {
+            marginTop: string;
+        };
+    };
+    desc: {
+        base: {
+            font: {
+                lineHeight: any;
+                fontSize: string;
+                letterSpacing: any;
+                fontFamily: any;
+                fontWeight: any;
+                fontStyle: any;
+            };
+            gap: string;
+            color: string;
+        };
+        lastChild: {
+            marginBottom: string;
+        };
+    };
+    list: {
+        beforeNextTerm: {
+            marginTop: string;
+        };
+    };
+    group: {
+        base: {
+            margin: string;
+        };
+    };
+};

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

@@ -1,5 +1,5 @@
 import { InternalHeaderProps } from './InternalHeader.types';
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const OuterContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type BannerProps = {
     hasContextMenu?: boolean;
 };

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

@@ -1,40 +1,52 @@
-import { CSSObject } from 'styled-components';
 export declare const internalHeaderTokens: {
-    wrapper: {
-        base: CSSObject;
+    navLink: {
+        base: {
+            color: string;
+            textDecoration: string;
+            backgroundColor: string;
+            padding: string;
+            font: {
+                lineHeight: any;
+                fontSize: string;
+                letterSpacing: any;
+                fontFamily: any;
+                fontWeight: any;
+                fontStyle: any;
+            };
+        };
+        hover: {
+            color: string;
+        };
+        active: {
+            color: string;
+        };
+        current: {
+            color: string;
+            backgroundColor: string;
+        };
+    };
+    outerContainer: {
+        backgroundColor: string;
     };
     applicationNameWrapper: {
-        base: CSSObject;
+        padding: string;
     };
     lovisaWrapper: {
-        base: CSSObject;
+        padding: string;
+        borderRight: string;
     };
     banner: {
-        base: CSSObject;
-        contextMenuSpacing: string;
-    };
-    bannerLeft: {
-        base: CSSObject;
+        borderBottom: string;
+        paddingRight: string;
+        hasContextMenu: {
+            paddingRight: string;
+        };
     };
     navigation: {
-        base: CSSObject;
-    };
-    navigationLink: {
-        base: CSSObject;
-        hover: {
-            base: CSSObject;
-        };
-        active: {
-            base: CSSObject;
-        };
-        focus: {
-            base: CSSObject;
-        };
-        current: {
-            base: CSSObject;
-        };
+        borderBottom: string;
     };
     contextGroup: {
-        base: CSSObject;
+        right: string;
+        top: string;
     };
 };

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

@@ -10,10 +10,4 @@ export declare const modalTokens: {
     actionsContainer: {
         base: CSSObject;
     };
-    bodyScrollable: {
-        base: CSSObject;
-        focus: {
-            base: CSSObject;
-        };
-    };
 };

package/dist/cjs/components/Modal/ModalBody.d.ts

@@ -1,13 +1,18 @@
 import { BaseComponentPropsWithChildren } from '../../types';
+import { Property } from 'csstype';
 export declare type ModalBodyProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     /**Gjør at innholdet kan scrolles. Det må eventuelt settes (max)bredde og (max)høyde styling på både denne subkomponenten og `<Modal />`.  */
     scrollable?: boolean;
+    /**Høyde på container. */
+    height?: Property.Height;
 }>;
 export declare const ModalBody: import("react").ForwardRefExoticComponent<{
     htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
-} & Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+} & Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
     /**Gjør at innholdet kan scrolles. Det må eventuelt settes (max)bredde og (max)høyde styling på både denne subkomponenten og `<Modal />`.  */
     scrollable?: boolean | undefined;
+    /**Høyde på container. */
+    height?: Property.Height<0 | (string & {})> | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,22 +1,37 @@
-import { CSSObject } from 'styled-components';
 export declare const overflowMenuTokens: {
     container: {
-        base: CSSObject;
+        border: string;
+        backgroundColor: string;
+        borderRadius: string;
     };
-    link: {
-        base: CSSObject;
-        active: {
-            base: CSSObject;
+    element: {
+        base: {
+            color: string;
+            textDecoration: string;
+            backgroundColor: string;
+            padding: string;
+            gap: string;
+            font: {
+                lineHeight: any;
+                fontSize: string;
+                letterSpacing: any;
+                fontFamily: any;
+                fontWeight: any;
+                fontStyle: any;
+            };
         };
+    };
+    link: {
         hover: {
-            base: CSSObject;
+            color: string;
         };
-        focus: {
-            base: CSSObject;
+        active: {
+            color: string;
         };
     };
     divider: {
-        base: CSSObject;
+        marginRight: string;
+        marginLeft: string;
     };
     offset: number;
 };

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

@@ -0,0 +1,7 @@
+import { BaseComponentPropsWithChildren } from '../../types';
+import { Property } from 'csstype';
+export declare type ScrollableContainerProps = BaseComponentPropsWithChildren<HTMLDivElement, {
+    /**Høyde på innholdscontainer. */
+    contentHeight?: Property.Height;
+}>;
+export declare const ScrollableContainer: (props: ScrollableContainerProps) => JSX.Element;

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

@@ -0,0 +1,15 @@
+import { ScrollableContainerProps } from '.';
+declare const _default: {
+    title: string;
+    component: (props: ScrollableContainerProps) => JSX.Element;
+    argTypes: {
+        contentHeight: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: (args: ScrollableContainerProps) => JSX.Element;
+export declare const JustScrollbar: () => JSX.Element;

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

@@ -0,0 +1,25 @@
+export declare const scrollbarWidthNumberPx = 10;
+export declare const scrollbarTokens: {
+    minThumbHeightPx: number;
+    track: {
+        backgroundColor: string;
+        borderRadius: string;
+        width: string;
+    };
+    thumb: {
+        base: {
+            backgroundColor: string;
+            borderRadius: string;
+            width: string;
+        };
+        hover: {
+            backgroundColor: string;
+        };
+    };
+    content: {
+        paddingRight: string;
+    };
+    outerContainer: {
+        padding: string;
+    };
+};

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

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+import { BaseComponentProps } from '../../types';
+export declare type ScrollbarProps = BaseComponentProps<HTMLDivElement, {
+    /** Ref til container med innholdet som skal scrolles. */
+    contentRef?: RefObject<HTMLDivElement>;
+}>;
+export declare const Scrollbar: (props: ScrollbarProps) => JSX.Element | null;

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

@@ -0,0 +1,3 @@
+export * from './Scrollbar';
+export * from './ScrollableContainer';
+export * from './scrollbarStyling';

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

@@ -0,0 +1,26 @@
+/**
+ * CSS-in-JS scrollbar styling til bruk der det ikke passer å bruke dedikerte komponenter. Inkluderer styling for webkit pseudo-elementer og for Firefox.
+ */
+export declare const scrollbarStyling: {
+    webkit: {
+        '&::-webkit-scrollbar': {
+            width: string;
+            height: string;
+        };
+        '&::-webkit-scrollbar-track': {
+            background: string;
+            borderRadius: string;
+        };
+        '&::-webkit-scrollbar-thumb': {
+            background: string;
+            borderRadius: string;
+        };
+    };
+    '&::-webkit-scrollbar-thumb:hover': {
+        background: string;
+    };
+    firefox: {
+        scrollbarColor: string;
+        scrollbarWidth: string;
+    };
+};

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

@@ -100,9 +100,6 @@ export declare const selectTokens: {
         hover: {
             base: CSSObject;
         };
-        icon: {
-            base: CSSObject;
-        };
     };
     indicatorsContainer: {
         withLabel: {

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

@@ -16,7 +16,7 @@ export declare type TooltipProps = BaseComponentProps<HTMLDivElement, {
     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;
+    htmlProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "onMouseLeave" | "onMouseOver" | "children"> | undefined; /**`id` for tooltip. */
 } & Pick<Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "onMouseLeave" | "onMouseOver" | "children">, "className" | "id"> & {
     /**Innhold i tooltip. */
     text: string;

package/dist/cjs/helpers/styling/index.d.ts

@@ -5,4 +5,3 @@ export * from './hover';
 export * from './focus';
 export * from './danger';
 export * from './hideInput';
-export * from './scrollbarStyling';

package/dist/cjs/icons/tsx/closeSmall.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from '../utils/propTypes';
+export declare function CloseSmallIcon(props: SvgProps): JSX.Element;

package/dist/cjs/icons/tsx/index.d.ts

@@ -28,6 +28,7 @@ export * from './chevronLeft';
 export * from './chevronRight';
 export * from './chevronUp';
 export * from './close';
+export * from './closeSmall';
 export * from './closeCircled';
 export * from './cloud';
 export * from './collapse';

package/dist/cjs/index.d.ts

@@ -33,5 +33,6 @@ export * from './components/Tabs';
 export * from './components/Tag';
 export * from './components/Chip';
 export * from './components/VisuallyHidden';
+export * from './components/ScrollableContainer';
 export * from './icons/tsx';
 export * from './components/Stepper';