@norges-domstoler/dds-components 5.3.0 → 5.4.1

package/README.md

@@ -16,7 +16,7 @@ npm install @norges-domstoler/dds-components
 
 ```js
 import * as React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Button, TextInput } from '@norges-domstoler/dds-components';
 
 const App = () => (
@@ -27,7 +27,9 @@ const App = () => (
   </>
 );
 
-render(<App />, document.getElementById('root'));
+const root = createRoot(document.getElementById('root'));
+
+root.render(<App />);
 ```
 
 ## 📃 Komponenter
@@ -65,6 +67,7 @@ Tilgjengelige komponenter:
 - Tabs
 - Tag
 - TextInput
+- ToggleBar
 - ToggleButton
 - Tooltip
 - Typography

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

@@ -1,10 +1,19 @@
-import { CSSObject } from 'styled-components';
 export declare const breadcrumbTokens: {
-    breadcrumb: {
-        base: CSSObject;
+    list: {
+        gap: string;
+    };
+    listItem: {
+        font: {
+            lineHeight: any;
+            fontSize: string;
+            letterSpacing: any;
+            fontFamily: any;
+            fontWeight: any;
+            fontStyle: any;
+        };
+        gap: string;
     };
     icon: {
-        base: CSSObject;
-        size: string;
+        color: string;
     };
 };

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

@@ -1,8 +1,5 @@
 import { CheckboxProps } from './Checkbox.types';
 export declare const CustomCheckbox: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const Input: import("styled-components").StyledComponent<"input", any, {
-    type: import("react").HTMLInputTypeAttribute;
-}, "type">;
 declare type ContainerProps = Pick<CheckboxProps, 'disabled' | 'readOnly' | 'error' | 'indeterminate' | 'label'>;
 export declare const Container: import("styled-components").StyledComponent<"label", any, ContainerProps, never>;
 export {};

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

@@ -1,9 +1,11 @@
 import { InputProps } from '../../helpers';
-import { Property } from 'csstype';
-export declare type DatepickerProps = InputProps;
-export declare const Datepicker: import("react").ForwardRefExoticComponent<{
-    label?: string | undefined;
-    width?: Property.Width<string> | undefined;
-    tip?: string | undefined;
-    errorMessage?: string | undefined;
-} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+declare type DatepickerType = 'date' | 'datetime-local';
+export declare type DatepickerProps = Modify<InputProps, {
+    /** Angi dato-input med eller uten klokkeslett. */
+    type?: DatepickerType;
+}>;
+export declare const Datepicker: import("react").ForwardRefExoticComponent<Omit<InputProps, "type"> & {
+    /** Angi dato-input med eller uten klokkeslett. */
+    type?: DatepickerType | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -1,12 +1,9 @@
 import { DatepickerProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<{
-        label?: string | undefined;
-        width?: import("csstype").Property.Width<string> | undefined;
-        tip?: string | undefined;
-        errorMessage?: string | undefined;
-    } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+    component: import("react").ForwardRefExoticComponent<Omit<import("../../helpers").InputProps, "type"> & {
+        type?: ("date" | "datetime-local") | undefined;
+    } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {
             control: {

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

@@ -8,6 +8,11 @@ declare const _default: {
                 type: string;
             };
         };
+        applicationDesc: {
+            control: {
+                type: string;
+            };
+        };
         currentPageHref: {
             control: {
                 type: string;
@@ -30,10 +35,10 @@ export declare const Overview: () => JSX.Element;
 export declare const Default: (args: InternalHeaderProps) => JSX.Element;
 export declare const WithNavigationAndContextMenu: (args: InternalHeaderProps) => JSX.Element;
 export declare const WithCurrentPage: (args: InternalHeaderProps) => JSX.Element;
-export declare const SmallScreenWithNavigation: () => JSX.Element;
+export declare const SmallScreenWithNavigation: (args: InternalHeaderProps) => JSX.Element;
 export declare const SmallScreenWithContextMenu: (args: InternalHeaderProps) => JSX.Element;
-export declare const SmallScreenWithNavigationAndContextMenu: () => JSX.Element;
+export declare const SmallScreenWithNavigationAndContextMenu: (args: InternalHeaderProps) => JSX.Element;
 export declare const NoStoryHeading: (args: InternalHeaderProps) => JSX.Element;
-export declare const NoStoryHeadingSmallScreen: () => JSX.Element;
-export declare const NoStoryHeadingSmallScreenLong: () => JSX.Element;
-export declare const NonInteractiveUserOnly: () => JSX.Element;
+export declare const NoStoryHeadingSmallScreen: (args: InternalHeaderProps) => JSX.Element;
+export declare const NoStoryHeadingSmallScreenLong: (args: InternalHeaderProps) => JSX.Element;
+export declare const NonInteractiveUserOnly: (args: InternalHeaderProps) => JSX.Element;

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/InternalHeader/InternalHeader.types.d.ts

@@ -18,6 +18,8 @@ declare type InternaHeaderUserProps = {
 export declare type InternalHeaderProps = BaseComponentProps<HTMLDivElement, {
     /**Navn på applikasjonen. */
     applicationName?: string;
+    /**Beskrivelse på applikasjonen ellen tittel på en underside. Tilgjengelig fram til Lovisa Next kommer. */
+    applicationDesc?: string;
     /**Indikerer om versjonen for små skjermer skal vises. */
     smallScreen?: boolean;
     /**Info om brukeren. Dukker opp som punkt på toppen av kontekstmenyen med tekst oppgitt i name. Blir en lenke hvis href er oppgitt. */

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/RadioButton/RadioButton.styles.d.ts

@@ -1,8 +1,5 @@
 import { RadioButtonProps } from './RadioButton.types';
 export declare const CustomRadioButton: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const Input: import("styled-components").StyledComponent<"input", any, {
-    type: import("react").HTMLInputTypeAttribute;
-}, "type">;
 declare type ContainerProps = Pick<RadioButtonProps, 'error' | 'disabled' | 'readOnly'>;
 export declare const Container: import("styled-components").StyledComponent<"label", any, ContainerProps, never>;
 export {};

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

@@ -12,5 +12,6 @@ export declare const Container: import("styled-components").StyledComponent<"div
 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 getCustomStyles: <TOption>() => Partial<StylesConfig<TOption, boolean, GroupBase<TOption>>>;
 export {};

package/dist/cjs/components/ToggleBar/ToggleBar.context.d.ts

@@ -0,0 +1,10 @@
+import { ChangeEvent } from 'react';
+import { ToggleBarSize, ToggleBarValue } from './ToggleBar.types';
+export declare type ToggleBarContextType = {
+    size: ToggleBarSize;
+    name?: string;
+    value?: ToggleBarValue;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+};
+export declare const ToggleBarContext: import("react").Context<ToggleBarContextType>;
+export declare const useToggleBarContext: () => ToggleBarContextType;

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

@@ -0,0 +1,2 @@
+import { ToggleBarProps } from './ToggleBar.types';
+export declare const ToggleBar: <T extends string | number = string>(props: ToggleBarProps<T>) => JSX.Element;

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

@@ -0,0 +1,20 @@
+import { ToggleBarProps } from './ToggleBar.types';
+declare const _default: {
+    title: string;
+    component: <T extends string | number = string>(props: ToggleBarProps<T>) => JSX.Element;
+    argTypes: {
+        label: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: (args: ToggleBarProps<string>) => JSX.Element;
+export declare const OverviewWithText: (args: ToggleBarProps<string>) => JSX.Element;
+export declare const OverviewWithIcon: (args: ToggleBarProps<string>) => JSX.Element;
+export declare const OverviewWithLabel: (args: ToggleBarProps<string>) => JSX.Element;
+export declare const WithDefaultValue: (args: ToggleBarProps<string>) => JSX.Element;
+export declare const WithLongWords: (args: ToggleBarProps<string>) => JSX.Element;
+export declare const WithWidth: (args: ToggleBarProps<string>) => JSX.Element;

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

@@ -0,0 +1,111 @@
+export declare const toggleBarTokens: {
+    outerContainer: {
+        gap: string;
+    };
+    content: {
+        base: {
+            backgroundColor: string;
+        };
+        active: {
+            color: string;
+            borderColor: string;
+            backgroundColor: string;
+            boxShadow: string;
+        };
+        size: {
+            tiny: {
+                justIcon: {
+                    padding: string;
+                    fontSize: string;
+                };
+                withText: {
+                    padding: string;
+                    font: {
+                        lineHeight: any;
+                        fontSize: string;
+                        letterSpacing: any;
+                        fontFamily: any;
+                        fontWeight: any;
+                        fontStyle: any;
+                    };
+                    gap: string;
+                };
+            };
+            small: {
+                justIcon: {
+                    padding: string;
+                    fontSize: string;
+                };
+                withText: {
+                    padding: string;
+                    font: {
+                        lineHeight: any;
+                        fontSize: string;
+                        letterSpacing: any;
+                        fontFamily: any;
+                        fontWeight: any;
+                        fontStyle: any;
+                    };
+                    gap: string;
+                };
+            };
+            medium: {
+                justIcon: {
+                    padding: string;
+                    fontSize: string;
+                };
+                withText: {
+                    padding: string;
+                    font: {
+                        lineHeight: any;
+                        fontSize: string;
+                        letterSpacing: any;
+                        fontFamily: any;
+                        fontWeight: any;
+                        fontStyle: any;
+                    };
+                    gap: string;
+                };
+            };
+            large: {
+                justIcon: {
+                    padding: string;
+                    fontSize: string;
+                };
+                withText: {
+                    padding: string;
+                    font: {
+                        lineHeight: any;
+                        fontSize: string;
+                        letterSpacing: any;
+                        fontFamily: any;
+                        fontWeight: any;
+                        fontStyle: any;
+                    };
+                    gap: string;
+                };
+            };
+        };
+    };
+    label: {
+        base: {
+            borderColor: string;
+            borderRight: string;
+            borderTop: string;
+            borderBottom: string;
+        };
+        hover: {
+            color: string;
+            borderColor: string;
+        };
+        firstChild: {
+            borderLeft: string;
+            borderTopLeftRadius: string;
+            borderBottomLeftRadius: string;
+        };
+        lastChild: {
+            borderTopRightRadius: string;
+            borderBottomRightRadius: string;
+        };
+    };
+};

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

@@ -0,0 +1,19 @@
+import { ChangeEvent } from 'react';
+import { BaseComponentPropsWithChildren } from '../../types';
+import { Property } from 'csstype';
+export declare type ToggleBarValue = string | number | null | undefined;
+export declare type ToggleBarSize = 'tiny' | 'small' | 'medium' | 'large';
+export declare type ToggleBarProps<T extends string | number> = BaseComponentPropsWithChildren<HTMLDivElement, {
+    /**Størrelse på komponenten. */
+    size?: ToggleBarSize;
+    /**Ledetekst for hele gruppen. */
+    label?: string;
+    /**Funksjonen for `onChange`-event for barna. */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, value?: T) => void;
+    /**Den valgte verdien i gruppen. Hvis satt ved innlastning blir en `<ToggleRadio />` forhåndsvalgt. */
+    value?: T;
+    /** Gir alle barna samme `name` prop.*/
+    name?: string;
+    /**Bredden til komponenten. Bredden fordeles likt mellom barna.  */
+    width?: Property.Width;
+}>;

package/dist/cjs/components/ToggleBar/ToggleRadio.d.ts

@@ -0,0 +1,19 @@
+import { InputHTMLAttributes } from 'react';
+import { SvgIcon } from '../../icons/utils';
+import { BaseComponentProps } from '../../types';
+declare type PickedInputHTMLAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'checked' | 'value' | 'onChange' | 'aria-label' | 'aria-labelledby'>;
+export declare type ToggleRadioProps = BaseComponentProps<HTMLInputElement, {
+    /**Ledetekst som vises i komponenten. */
+    label?: string;
+    /**Ikonet som vises i komponenten. */
+    icon?: SvgIcon;
+} & PickedInputHTMLAttributes, Omit<InputHTMLAttributes<HTMLInputElement>, keyof PickedInputHTMLAttributes>>;
+export declare const ToggleRadio: import("react").ForwardRefExoticComponent<{
+    htmlProps?: Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "checked" | "value" | "onChange" | "aria-label" | "aria-labelledby"> | undefined;
+} & Pick<Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "checked" | "value" | "onChange" | "aria-label" | "aria-labelledby">, "className" | "id"> & {
+    /**Ledetekst som vises i komponenten. */
+    label?: string | undefined;
+    /**Ikonet som vises i komponenten. */
+    icon?: SvgIcon | undefined;
+} & PickedInputHTMLAttributes & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/cjs/components/ToggleBar/ToggleRadio.styles.d.ts

@@ -0,0 +1,11 @@
+import { ToggleBarSize } from './ToggleBar.types';
+declare type ContentProps = {
+    size: ToggleBarSize;
+    justIcon: boolean;
+};
+export declare const Content: import("styled-components").StyledComponent<"span", any, ContentProps, never>;
+declare type LabelProps = {
+    size: ToggleBarSize;
+};
+export declare const Label: import("styled-components").StyledComponent<"label", any, LabelProps, never>;
+export {};

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

@@ -0,0 +1,3 @@
+export * from './ToggleBar';
+export * from './ToggleBar.types';
+export * from './ToggleRadio';

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/HiddenInput/HiddenInput.d.ts

@@ -0,0 +1 @@
+export declare const HiddenInput: import("styled-components").StyledComponent<"input", any, {}, never>;

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

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

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

@@ -1,5 +1,6 @@
 export * from './Backdrop';
 export * from './Chevron';
+export * from './HiddenInput';
 export * from './Input';
 export * from './Paper';
 export * from './RequiredMarker';

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

@@ -1,7 +1,7 @@
 export declare const hideInput: {
     clip: string;
     position: string;
-    height: number;
-    width: number;
+    height: string;
+    width: string;
     margin: number;
 };

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

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

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

@@ -0,0 +1,4 @@
+export declare const selection: {
+    color: string;
+    backgroundColor: string;
+};

package/dist/cjs/index.d.ts

@@ -35,4 +35,5 @@ export * from './components/Chip';
 export * from './components/VisuallyHidden';
 export * from './components/ScrollableContainer';
 export * from './icons/tsx';
+export * from './components/ToggleBar';
 export * from './components/Stepper';