@norges-domstoler/dds-components 2.4.0 → 3.0.0

package/dist/{src/components → components}/Tooltip/Tooltip.d.ts

@@ -1,7 +1,9 @@
 import React, { HTMLAttributes } from 'react';
 import { Placement } from '../../hooks';
+import { BaseComponentProps } from '../../types';
 declare type AnchorElement = React.ReactElement & React.RefAttributes<HTMLElement>;
-export declare type TooltipProps = {
+declare type PickedHTMLAttributes = Pick<HTMLAttributes<HTMLDivElement>, 'style' | 'onMouseLeave' | 'onMouseOver' | 'className'>;
+export declare type TooltipProps = BaseComponentProps<HTMLDivElement, {
     /**Innhold i tooltip. */
     text: string;
     /**Plassering i forhold til anchor-elementet. */
@@ -12,8 +14,11 @@ export declare type TooltipProps = {
     delay?: number;
     /**`id` for tooltip. */
     tooltipId?: string;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+} & PickedHTMLAttributes, Omit<HTMLAttributes<HTMLDivElement>, 'children' | keyof PickedHTMLAttributes>>;
 export declare const Tooltip: React.ForwardRefExoticComponent<{
+    id?: string | undefined;
+    htmlProps?: Omit<Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "onMouseLeave" | "onMouseOver" | "className" | "children">, "id"> | undefined;
+} & {
     /**Innhold i tooltip. */
     text: string;
     /**Plassering i forhold til anchor-elementet. */
@@ -24,5 +29,5 @@ export declare const Tooltip: React.ForwardRefExoticComponent<{
     delay?: number | undefined;
     /**`id` for tooltip. */
     tooltipId?: string | undefined;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & React.RefAttributes<HTMLDivElement>>;
+} & PickedHTMLAttributes & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/{src/components → components}/Tooltip/Tooltip.stories.d.ts

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

package/dist/{src/components → components}/Typography/Typography.d.ts

@@ -1,21 +1,17 @@
-import { HTMLAttributes, ElementType, AnchorHTMLAttributes, LabelHTMLAttributes } from 'react';
+import { ElementType, PropsWithChildren, HTMLAttributes, AnchorHTMLAttributes } from 'react';
 import { CSSObject } from 'styled-components';
-import { TypographyType, TextColor } from './Typography.types';
+import { TextColor, OtherTypographyType, AnchorTypographyType, LabelTypographyType } from './Typography.types';
 export declare function isTextColor(color: string): color is TextColor;
 export declare const getTextColor: (color: TextColor | string) => string;
 export declare type TypographyInteractionProps = {
     hover?: CSSObject;
     active?: CSSObject;
 };
-export declare type TypographyProps = {
-    /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under.  */
-    typographyType?: TypographyType;
-    /**Spesifiserer om tekstelementet skal ha spacing definert i Elsa. Brukes hovedsakelig i artikler og lignende. **OBS!** har forskjellig virkning på ulike typografityper. `body` og `lead`-typer får margin på bunnen, `heading`-typer får margin på bunnen og padding på toppen mens `supportingStyles` får margin topp og bunn. */
-    withMargins?: boolean;
+declare type BaseTypographyProps = PropsWithChildren<{
     /**HTML tag som skal brukes istedenfor default definert via `typographyType`.  */
     as?: ElementType;
-    /** Spesifiserer om lenka er ekstern ved `typographyType='a'` eller `as='a'`.*/
-    externalLink?: boolean;
+    /**Spesifiserer om tekstelementet skal ha spacing definert i Elsa. Brukes hovedsakelig i artikler og lignende. **OBS!** har forskjellig virkning på ulike typografityper. `body` og `lead`-typer får margin på bunnen, `heading`-typer får margin på bunnen og padding på toppen mens `supportingStyles` får margin topp og bunn. */
+    withMargins?: boolean;
     /**Tekstfarge fra utvalget eller custom. **OBS!** Bruk farger fra `@dds-design-tokens`. */
     color?: TextColor | string;
     /**Setter `bold` styling. */
@@ -26,7 +22,24 @@ export declare type TypographyProps = {
     underline?: boolean;
     /**Støtte for å enkelt kunne endre på hover- og active-styling. Bruk `@dds-design-tokens` til farger osv. */
     interactionProps?: TypographyInteractionProps;
+}>;
+declare type AnchorTypographyProps = BaseTypographyProps & {
+    /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under.  */
+    typographyType?: AnchorTypographyType;
+    href?: string | undefined;
+    /** Spesifiserer om lenka er ekstern ved `typographyType='a'` eller `as='a'`.*/
+    externalLink?: boolean;
     /**nativ `target`-prop ved `typographyType='a'`.  */
     target?: string;
-} & (HTMLAttributes<HTMLElement> | LabelHTMLAttributes<HTMLLabelElement> | AnchorHTMLAttributes<HTMLAnchorElement>);
+} & AnchorHTMLAttributes<HTMLAnchorElement>;
+declare type LabelTypographyProps = BaseTypographyProps & {
+    /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under.  */
+    typographyType?: LabelTypographyType;
+} & HTMLAttributes<HTMLLabelElement>;
+declare type OtherTypographyProps = BaseTypographyProps & {
+    /**Styling basert på det typografiske utvalget definert i Figma. Returnerer default HTML tag for hver type. **OBS!** Ved bruk av `'a'` er det flere tilgjengelige props, se under.  */
+    typographyType?: OtherTypographyType;
+} & HTMLAttributes<HTMLLabelElement>;
+export declare type TypographyProps = AnchorTypographyProps | LabelTypographyProps | OtherTypographyProps;
 export declare const Typography: import("react").ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/components/Typography/Typography.types.d.ts

@@ -0,0 +1,12 @@
+declare type TypographyBodySansType = 'bodySans01' | 'bodySans02' | 'bodySans03' | 'bodySans04';
+declare type TypographyBodySerifType = 'bodySerif01' | 'bodySerif02' | 'bodySerif03' | 'bodySerif04';
+export declare type TypographyBodyType = TypographyBodySansType | TypographyBodySerifType;
+declare type TypographyHeadingType = 'headingSans01' | 'headingSans02' | 'headingSans03' | 'headingSans04' | 'headingSans05' | 'headingSans06' | 'headingSans07' | 'headingSans08';
+declare type TypographyLeadType = 'leadSans01' | 'leadSans02' | 'leadSans03' | 'leadSans04' | 'leadSans05';
+declare type TypographySupportingType = 'supportingStyleInputText01' | 'supportingStyleInputText02' | 'supportingStyleInputText03' | 'supportingStyleHelperText01' | 'supportingStylePlaceholderText01' | 'supportingStyleTiny01' | 'supportingStyleTiny02';
+export declare type AnchorTypographyType = 'a';
+export declare type LabelTypographyType = 'supportingStyleLabel01';
+export declare type OtherTypographyType = TypographyHeadingType | TypographyBodyType | TypographyLeadType | TypographySupportingType;
+export declare type TypographyType = AnchorTypographyType | LabelTypographyType | OtherTypographyType;
+export declare type TextColor = 'interactive' | 'primary' | 'danger' | 'warning' | 'success' | 'onLight' | 'onDark' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'gray6' | 'gray7' | 'gray8' | 'gray9';
+export {};

package/dist/helpers/Input/Input.styles.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { StyledLabelProps } from '.';
+import { Property } from 'csstype';
+export declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const StatefulInput: import("styled-components").StyledComponent<"input", any, Pick<import("./Input.types").InputProps, "disabled" | "readOnly"> & {
+    hasErrorMessage: boolean;
+    hasLabel: import("./Input.types").LabelPresence;
+}, never>;
+export declare const Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../components/Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>, any, StyledLabelProps, never>;
+export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type OuterInputContainerProps = {
+    width?: Property.Width<string>;
+};
+export declare const OuterInputContainer: import("styled-components").StyledComponent<"div", any, OuterInputContainerProps, never>;
+export {};

package/dist/{src/helpers → helpers}/Input/Input.tokens.d.ts

@@ -1,5 +1,14 @@
 import { CSSObject } from 'styled-components';
 export declare const inputTokens: {
+    baseInput: {
+        base: CSSObject;
+        focus: {
+            base: CSSObject;
+        };
+        hover: {
+            base: CSSObject;
+        };
+    };
     general: {
         input: {
             borderRadius: string;
@@ -33,9 +42,7 @@ export declare const inputTokens: {
             };
         };
     };
-    base: CSSObject;
-    focusColor: string;
-    withLabel: {
+    hasLabel: {
         base: CSSObject;
     };
     noLabel: {

package/dist/{src/helpers → helpers}/Input/Input.types.d.ts

@@ -10,9 +10,10 @@ export declare type InputProps = {
     /**Feilmelding. Setter også error state. */
     errorMessage?: string;
 } & InputHTMLAttributes<HTMLInputElement>;
+export declare type LabelPresence = 'hasLabel' | 'noLabel';
 export declare type StyledInputProps = Pick<InputProps, 'readOnly' | 'disabled'> & {
     hasErrorMessage: boolean;
-    hasLabel: boolean;
+    hasLabel: LabelPresence;
 };
 export declare type StyledLabelProps = {
     disabled?: boolean;

package/dist/{src/helpers → helpers}/Input/index.d.ts

@@ -1,4 +1,3 @@
 export * from './Input.styles';
 export * from './Input.types';
 export * from './Input.tokens';
-export * from './inputFieldStylingBase';

package/dist/helpers/styling/removeListStyling.d.ts

@@ -0,0 +1,5 @@
+export declare const removeListStyling: {
+    listStyle: string;
+    padding: number;
+    margin: number;
+};

package/dist/helpers/styling/scrollbarStyling.d.ts

@@ -0,0 +1,3 @@
+export declare const scrollbarWidthNumberPx = 10;
+export declare const scrollbarWidth: string;
+export declare const scrollbarStyling: import("styled-components").FlattenSimpleInterpolation;

package/dist/{src/hooks → hooks}/useRoveFocus.d.ts

@@ -1,3 +1,3 @@
 import { Dispatch, SetStateAction } from 'react';
-import { Direction } from '../../typings';
+import { Direction } from '../types';
 export declare function useRoveFocus(size: number | undefined, reset?: boolean, direction?: Direction): [number, Dispatch<SetStateAction<number>>];

package/dist/{src/index.d.ts → index.d.ts}

@@ -31,3 +31,4 @@ export * from './components/InputMessage';
 export * from './components/ToggleButton';
 export * from './components/Tabs';
 export * from './components/Tag';
+export * from './components/Chip';