@norges-domstoler/dds-components 2.2.0 → 2.4.0

package/dist/src/components/Typography/Body.stories.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>;
+};
+export default _default;
+export declare const Body: () => JSX.Element;
+export declare const Headings: () => JSX.Element;
+export declare const Leads: () => JSX.Element;
+export declare const Supporting: () => JSX.Element;
+export declare const Link: () => JSX.Element;

package/dist/src/components/Typography/Examples.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>;
+};
+export default _default;
+export declare const Article: () => JSX.Element;
+export declare const Link: () => JSX.Element;

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

@@ -0,0 +1,32 @@
+import { HTMLAttributes, ElementType, AnchorHTMLAttributes, LabelHTMLAttributes } from 'react';
+import { CSSObject } from 'styled-components';
+import { TypographyType, TextColor } 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;
+    /**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;
+    /**Tekstfarge fra utvalget eller custom. **OBS!** Bruk farger fra `@dds-design-tokens`. */
+    color?: TextColor | string;
+    /**Setter `bold` styling. */
+    bold?: boolean;
+    /**Setter `italic` styling. */
+    italic?: boolean;
+    /**Setter en linje under. */
+    underline?: boolean;
+    /**Støtte for å enkelt kunne endre på hover- og active-styling. Bruk `@dds-design-tokens` til farger osv. */
+    interactionProps?: TypographyInteractionProps;
+    /**nativ `target`-prop ved `typographyType='a'`.  */
+    target?: string;
+} & (HTMLAttributes<HTMLElement> | LabelHTMLAttributes<HTMLLabelElement> | AnchorHTMLAttributes<HTMLAnchorElement>);
+export declare const Typography: import("react").ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<HTMLElement>>;

package/dist/src/components/Typography/Typography.stories.d.ts

@@ -0,0 +1,58 @@
+/// <reference types="react" />
+import { TypographyProps } from '.';
+declare type StoryTProps = {
+    text: string;
+} & TypographyProps;
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<TypographyProps & import("react").RefAttributes<HTMLElement>>;
+    argTypes: {
+        typographyType: {
+            control: {
+                type: string;
+            };
+        };
+        bold: {
+            control: {
+                type: string;
+            };
+        };
+        italic: {
+            control: {
+                type: string;
+            };
+        };
+        withMargins: {
+            control: {
+                type: string;
+            };
+        };
+        externalLink: {
+            control: {
+                type: string;
+            };
+        };
+        color: {
+            control: {
+                type: string;
+            };
+        };
+        href: {
+            control: {
+                type: string;
+            };
+        };
+        text: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+export declare const Default: (args: StoryTProps) => JSX.Element;

package/dist/{helpers → src/helpers}/Chevron/AnimatedChevronUpDown.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import * as CSS from 'csstype';
+import { Property } from 'csstype';
 declare type SvgChevronProps = {
     isUp?: boolean;
-    height?: CSS.Property.Height<string>;
-    width?: CSS.Property.Width<string>;
+    height?: Property.Height<string>;
+    width?: Property.Width<string>;
 };
 export declare const AnimatedChevronUpDown: ({ isUp, height, width }: SvgChevronProps) => JSX.Element;
 export {};

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { InputProps, StyledInputProps, StyledLabelProps } from './Input.types';
-export declare const inputStyling: ({ readOnly, label, disabled, hasErrorMessage }: StyledInputProps) => import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-export declare const Input: import("styled-components").StyledComponent<"input", any, Pick<InputProps, "readOnly" | "label" | "disabled"> & {
+export declare const inputStyling: ({ readOnly, hasLabel, disabled, hasErrorMessage }: StyledInputProps) => import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export declare const Input: import("styled-components").StyledComponent<"input", any, Pick<InputProps, "readOnly" | "disabled"> & {
     hasErrorMessage: boolean;
+    hasLabel: boolean;
 }, never>;
 export declare const SingleLineLabel: 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>;

package/dist/src/helpers/Input/Input.types.d.ts

@@ -0,0 +1,19 @@
+import { InputHTMLAttributes } from 'react';
+import { Property } from 'csstype';
+export declare type InputProps = {
+    /**Ledetekst for input. */
+    label?: string;
+    /**Bredde for inputfeltet. */
+    width?: Property.Width<string>;
+    /**Hjelpetekst. */
+    tip?: string;
+    /**Feilmelding. Setter også error state. */
+    errorMessage?: string;
+} & InputHTMLAttributes<HTMLInputElement>;
+export declare type StyledInputProps = Pick<InputProps, 'readOnly' | 'disabled'> & {
+    hasErrorMessage: boolean;
+    hasLabel: boolean;
+};
+export declare type StyledLabelProps = {
+    disabled?: boolean;
+};

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

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

package/dist/src/helpers/RequiredMarker/RequiredMarker.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const RequiredMarker: () => JSX.Element;

package/dist/src/helpers/RequiredMarker/index.d.ts

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

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

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

package/dist/{helpers → src/helpers}/styling/focusVisible.d.ts

@@ -7,6 +7,7 @@ export declare const focusVisibleOnDark: {
     outline: string;
     outlineOffset: string;
 };
+export declare const focusVisibleTransitionValue = "outline-offset 0.2s";
 export declare const focusVisibleLink: {
     outline: string;
     backgroundColor: string;
@@ -19,6 +20,7 @@ export declare const focusVisibleLinkOnDark: {
     color: string;
     textDecoration: string;
 };
+export declare const focusVisibleLinkTransitionValue = "background-color 0.2s, text-decoration 0.2s, color 0.2s";
 export declare const focusVisibleWithBorder: {
     outline: string;
     borderColor: string;

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

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

package/dist/src/helpers/styling/removeButtonStyling.d.ts

@@ -0,0 +1,9 @@
+export declare const removeButtonStyling: {
+    background: string;
+    color: string;
+    border: string;
+    padding: number;
+    font: string;
+    cursor: string;
+    outline: string;
+};

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

@@ -0,0 +1 @@
+export declare const scrollbarStyling: import("styled-components").FlattenSimpleInterpolation;

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

@@ -6,3 +6,4 @@ export * from './useRoveFocus';
 export * from './useFocusTrap';
 export * from './useMountTransition';
 export * from './useId';
+export * from './useScreenSize';

package/dist/src/hooks/useRoveFocus.d.ts

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

package/dist/src/hooks/useScreenSize.d.ts

@@ -0,0 +1,8 @@
+export declare enum ScreenSize {
+    XSmall = 0,
+    Small = 1,
+    Medium = 2,
+    Large = 3,
+    XLarge = 4
+}
+export declare const useScreenSize: () => ScreenSize;

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

@@ -12,7 +12,7 @@ export * from './components/Search';
 export * from './components/Typography';
 export * from './components/Table';
 export * from './components/Breadcrumbs';
-export * from './helpers/IconWrapper';
+export * from './components/IconWrapper';
 export * from './components/Pagination';
 export * from './components/Divider';
 export * from './components/List';
@@ -29,3 +29,5 @@ export * from './components/OverflowMenu';
 export * from './components/Popover';
 export * from './components/InputMessage';
 export * from './components/ToggleButton';
+export * from './components/Tabs';
+export * from './components/Tag';

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

@@ -1,3 +1,5 @@
 export * from './combineHandlers';
 export * from './idGenerator';
 export * from './getScrollbarSize';
+export * from './text';
+export * from './color';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",

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

@@ -1,12 +0,0 @@
-import { HTMLAttributes } from 'react';
-import * as CSS from 'csstype';
-export declare type CardAccordionBodyProps = {
-    isExpanded?: boolean;
-    headerId?: string;
-    paddingTop?: CSS.Property.PaddingTop<string>;
-} & HTMLAttributes<HTMLDivElement>;
-export declare const CardAccordionBody: import("react").ForwardRefExoticComponent<{
-    isExpanded?: boolean | undefined;
-    headerId?: string | undefined;
-    paddingTop?: CSS.Property.PaddingTop<string> | undefined;
-} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,11 +0,0 @@
-import { ButtonHTMLAttributes } from 'react';
-export declare type CardAccordionHeaderProps = {
-    isExpanded?: boolean;
-    toggleExpanded?: () => void;
-    bodyId?: string;
-} & ButtonHTMLAttributes<HTMLButtonElement>;
-export declare const CardAccordionHeader: import("react").ForwardRefExoticComponent<{
-    isExpanded?: boolean | undefined;
-    toggleExpanded?: (() => void) | undefined;
-    bodyId?: string | undefined;
-} & ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,10 +0,0 @@
-import React, { InputHTMLAttributes } from 'react';
-export declare type CheckboxProps = {
-    label?: string;
-    error?: boolean;
-    disabled?: boolean;
-    readOnly?: boolean;
-    indeterminate?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-} & InputHTMLAttributes<HTMLInputElement>;

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

@@ -1,15 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-declare type Direction = 'column' | 'row';
-export declare type CheckboxGroupProps = {
-    label?: string;
-    direction?: Direction;
-    groupId?: string;
-    errorMessage?: string;
-    tip?: string;
-    required?: boolean;
-    className?: string;
-    children?: React.ReactNode;
-    style?: React.CSSProperties;
-} & HTMLAttributes<HTMLDivElement>;
-export declare const CheckboxGroup: ({ label, direction, errorMessage, tip, required, groupId, children, className, style, ...rest }: CheckboxGroupProps) => JSX.Element;
-export {};

package/dist/components/Drawer/Drawer.d.ts

@@ -1,29 +0,0 @@
-import { HTMLAttributes, ReactNode, RefObject } from 'react';
-import { Property } from 'csstype';
-export declare type DrawerSize = 'small' | 'large';
-export declare type DrawerPlacement = 'left' | 'right';
-export declare type WidthProps = {
-    minWidth?: Property.MinWidth<string>;
-    maxWidth?: Property.MaxWidth<string>;
-    width?: Property.Width<string>;
-};
-export declare type DrawerProps = {
-    isOpen?: boolean;
-    placement?: DrawerPlacement;
-    size?: DrawerSize;
-    onClose?: () => void;
-    parentElement?: HTMLElement;
-    header?: string | ReactNode;
-    widthProps?: WidthProps;
-    triggerRef?: RefObject<HTMLElement>;
-} & HTMLAttributes<HTMLDivElement>;
-export declare const Drawer: import("react").ForwardRefExoticComponent<{
-    isOpen?: boolean | undefined;
-    placement?: DrawerPlacement | undefined;
-    size?: DrawerSize | undefined;
-    onClose?: (() => void) | undefined;
-    parentElement?: HTMLElement | undefined;
-    header?: string | ReactNode;
-    widthProps?: WidthProps | undefined;
-    triggerRef?: RefObject<HTMLElement> | undefined;
-} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,12 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { TypographyBodyType } from '../Typography';
-export declare type ListType = 'ordered' | 'unordered';
-export declare type ListTypographyType = TypographyBodyType | 'inherit';
-export declare type ListProps = {
-    listType?: ListType;
-    typographyType?: ListTypographyType;
-} & HTMLAttributes<HTMLUListElement | HTMLOListElement>;
-export declare const List: import("react").ForwardRefExoticComponent<{
-    listType?: ListType | undefined;
-    typographyType?: ListTypographyType | undefined;
-} & HTMLAttributes<HTMLUListElement | HTMLOListElement> & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;

package/dist/components/LocalMessage/LocalMessage.d.ts

@@ -1,20 +0,0 @@
-import { HTMLAttributes } from 'react';
-import * as CSS from 'csstype';
-export declare type LocalMessagePurpose = 'info' | 'warning' | 'danger' | 'confidential' | 'success' | 'tips';
-export declare type LocalMessageLayout = 'horisontal' | 'vertical';
-export declare type LocalMessageProps = {
-    message?: string;
-    purpose?: LocalMessagePurpose;
-    closable?: boolean;
-    onClose?: () => void;
-    width?: CSS.Property.Width<string>;
-    layout?: LocalMessageLayout;
-} & HTMLAttributes<HTMLDivElement>;
-export declare const LocalMessage: import("react").ForwardRefExoticComponent<{
-    message?: string | undefined;
-    purpose?: LocalMessagePurpose | undefined;
-    closable?: boolean | undefined;
-    onClose?: (() => void) | undefined;
-    width?: CSS.Property.Width<string> | undefined;
-    layout?: LocalMessageLayout | undefined;
-} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,15 +0,0 @@
-import { HTMLAttributes, ReactNode, RefObject } from 'react';
-export declare type ModalProps = {
-    onClose?: () => void;
-    isOpen?: boolean;
-    parentElement?: HTMLElement;
-    header?: string | ReactNode;
-    triggerRef?: RefObject<HTMLElement>;
-} & HTMLAttributes<HTMLDivElement>;
-export declare const Modal: import("react").ForwardRefExoticComponent<{
-    onClose?: (() => void) | undefined;
-    isOpen?: boolean | undefined;
-    parentElement?: HTMLElement | undefined;
-    header?: string | ReactNode;
-    triggerRef?: RefObject<HTMLElement> | undefined;
-} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Pagination/Pagination.d.ts

@@ -1,29 +0,0 @@
-import { HTMLAttributes } from 'react';
-export declare type PaginationOption = {
-    label: string;
-    value: number;
-};
-export declare type PaginationProps = {
-    itemsAmount: number;
-    defaultItemsPerPage?: number;
-    defaultActivePage?: number;
-    withPagination?: boolean;
-    withCounter?: boolean;
-    withSelect?: boolean;
-    selectOptions?: PaginationOption[];
-    onSelectOptionChange?: (option: PaginationOption | null) => void;
-    smallScreen?: boolean;
-    onChange?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, page: number) => void;
-} & Omit<HTMLAttributes<HTMLElement>, 'onChange'>;
-export declare const Pagination: import("react").ForwardRefExoticComponent<{
-    itemsAmount: number;
-    defaultItemsPerPage?: number | undefined;
-    defaultActivePage?: number | undefined;
-    withPagination?: boolean | undefined;
-    withCounter?: boolean | undefined;
-    withSelect?: boolean | undefined;
-    selectOptions?: PaginationOption[] | undefined;
-    onSelectOptionChange?: ((option: PaginationOption | null) => void) | undefined;
-    smallScreen?: boolean | undefined;
-    onChange?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>, page: number) => void) | undefined;
-} & Omit<HTMLAttributes<HTMLElement>, "onChange"> & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Popover/Popover.d.ts

@@ -1,33 +0,0 @@
-import * as CSS from 'csstype';
-import { HTMLAttributes, ReactNode } from 'react';
-import { Placement } from '../../hooks';
-export declare type PopoverSizeProps = {
-    width?: CSS.Property.Width<string>;
-    height?: CSS.Property.Height<string>;
-    minWidth?: CSS.Property.MinWidth<string>;
-    minHeight?: CSS.Property.MinHeight<string>;
-    maxWidth?: CSS.Property.MaxWidth<string>;
-    maxHeight?: CSS.Property.MaxHeight<string>;
-};
-export declare type PopoverProps = {
-    title?: string | ReactNode;
-    onCloseButtonClick?: () => void;
-    onCloseButtonBlur?: () => void;
-    isOpen?: boolean;
-    withCloseButton?: boolean;
-    anchorElement?: HTMLElement;
-    placement?: Placement;
-    offset?: number;
-    sizeProps?: PopoverSizeProps;
-} & HTMLAttributes<HTMLDivElement>;
-export declare const Popover: import("react").ForwardRefExoticComponent<{
-    title?: string | ReactNode;
-    onCloseButtonClick?: (() => void) | undefined;
-    onCloseButtonBlur?: (() => void) | undefined;
-    isOpen?: boolean | undefined;
-    withCloseButton?: boolean | undefined;
-    anchorElement?: HTMLElement | undefined;
-    placement?: Placement | undefined;
-    offset?: number | undefined;
-    sizeProps?: PopoverSizeProps | undefined;
-} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,8 +0,0 @@
-import React, { InputHTMLAttributes } from 'react';
-export declare type RadioButtonProps = {
-    label?: string;
-    disabled?: boolean;
-    error?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-} & InputHTMLAttributes<HTMLInputElement>;

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

@@ -1,20 +0,0 @@
-import React, { ChangeEvent, HTMLAttributes } from 'react';
-declare type Direction = 'column' | 'row';
-export declare type RadioButtonGroupProps = {
-    name?: string;
-    label?: string;
-    errorMessage?: string;
-    tip?: string;
-    disabled?: boolean;
-    readOnly?: boolean;
-    direction?: Direction;
-    value?: string | number;
-    groupId?: string;
-    children?: React.ReactNode;
-    required?: boolean;
-    onChange?: (event: ChangeEvent<HTMLInputElement>, value: unknown) => void;
-    className?: string;
-    style?: React.CSSProperties;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;
-export declare const RadioButtonGroup: ({ name, label, groupId, errorMessage, tip, disabled, readOnly, direction, value, children, required, onChange, className, style, ...rest }: RadioButtonGroupProps) => JSX.Element;
-export {};

package/dist/components/SkipToContent/SkipToContent.d.ts

@@ -1,12 +0,0 @@
-import { HTMLAttributes } from 'react';
-import * as CSS from 'csstype';
-export declare type SkipToContentProps = {
-    text?: string;
-    href: string;
-    top?: CSS.Property.Top<string | number>;
-} & HTMLAttributes<HTMLAnchorElement>;
-export declare const SkipToContent: import("react").ForwardRefExoticComponent<{
-    text?: string | undefined;
-    href: string;
-    top?: CSS.Property.Top<string | number> | undefined;
-} & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/components/Table/Row.d.ts

@@ -1,15 +0,0 @@
-import { HTMLAttributes } from 'react';
-export declare type TableRowType = 'body' | 'head';
-export declare type RowMode = 'normal' | 'sum';
-export declare type TableRowProps = {
-    type?: TableRowType;
-    mode?: RowMode;
-    selected?: boolean;
-    hoverable?: boolean;
-} & HTMLAttributes<HTMLTableRowElement>;
-export declare const Row: import("react").ForwardRefExoticComponent<{
-    type?: TableRowType | undefined;
-    mode?: RowMode | undefined;
-    selected?: boolean | undefined;
-    hoverable?: boolean | undefined;
-} & HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;

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

@@ -1,7 +0,0 @@
-import React, { InputHTMLAttributes } from 'react';
-import { InputProps } from '../../helpers/Input';
-export declare type TextInputProps = {
-    multiline?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-} & InputProps & InputHTMLAttributes<HTMLTextAreaElement>;