@norges-domstoler/dds-components 7.1.0 → 7.2.0

package/dist/components/Breadcrumbs/Breadcrumbs.stories.d.ts

@@ -1,7 +1,7 @@
 import { BreadcrumbsProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLElement>, "id" | "className"> & {
         smallScreen?: boolean | undefined;
     } & {
         children?: import("react").ReactNode;

package/dist/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>, "type" | "onFocus" | "onBlur" | "onClick">, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onFocus" | "onBlur" | "onClick">, "id" | "className"> & {
         size?: import("./Button.types").ButtonSize | undefined;
         label?: string | undefined;
         purpose?: import("./Button.types").ButtonPurpose | undefined;

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

@@ -1,7 +1,7 @@
 import { CheckboxProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "value" | "checked">, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "value" | "checked">, "id" | "className"> & {
         label?: string | undefined;
         error?: boolean | undefined;
         disabled?: boolean | undefined;

package/dist/components/Chip/Chip.stories.d.ts

@@ -1,7 +1,7 @@
 import { ChipProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
         text?: string | undefined;
         onClose?: (() => void) | undefined;
     } & {

package/dist/components/DescriptionList/DescriptionList.stories.d.ts

@@ -1,7 +1,7 @@
 import { DescriptionListProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDListElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDListElement>, "id" | "className"> & {
         appearance?: import("./DescriptionList").DescriptionListAppearance | undefined;
     } & {
         children?: import("react").ReactNode;

package/dist/components/Divider/Divider.stories.d.ts

@@ -1,7 +1,7 @@
 import { DividerProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLHRElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLHRElement>, "id" | "className"> & {
         color?: import("./Divider").DividerColor | undefined;
     } & {
         htmlProps?: import("react").HTMLAttributes<HTMLHRElement> | undefined;

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

@@ -1,7 +1,7 @@
 import { DrawerProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
         size?: import("./Drawer").DrawerSize | undefined;
         placement?: import("./Drawer").DrawerPlacement | undefined;
         header?: import("react").ReactNode;

package/dist/components/GlobalMessage/GlobalMessage.stories.d.ts

@@ -1,7 +1,7 @@
 import { GlobalMessageProps } from './GlobalMessage';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
         message?: string | undefined;
         purpose?: import("./GlobalMessage").GlobalMessagePurpose | undefined;
         closable?: boolean | undefined;

package/dist/components/InputMessage/InputMessage.stories.d.ts

@@ -1,7 +1,7 @@
 import { InputMessageProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
         message: string;
         messageType: import("./InputMessage").InputMessageType;
     } & {

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

@@ -1,7 +1,7 @@
 import { ListProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLOListElement | HTMLUListElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLOListElement | HTMLUListElement>, "id" | "className"> & {
         listType?: import("./List").ListType | undefined;
         typographyType?: import("./List").ListTypographyType | undefined;
     } & {

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

@@ -1,7 +1,7 @@
 import { LocalMessageProps } from './LocalMessage';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
         message?: string | undefined;
         purpose?: import("./LocalMessage").LocalMessagePurpose | undefined;
         closable?: boolean | undefined;

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

@@ -1,7 +1,7 @@
 import { ModalProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
         isOpen?: boolean | undefined;
         onClose?: (() => void) | undefined;
         parentElement?: HTMLElement | undefined;

package/dist/components/OverflowMenu/OverflowMenu.stories.d.ts

@@ -1,7 +1,7 @@
 import { OverflowMenuProps, OverflowMenuContextItem, OverflowMenuNavItem } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
         items?: OverflowMenuContextItem[] | undefined;
         userProps?: ({
             name: string;

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

@@ -1,7 +1,7 @@
 import { PaginationProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").HTMLAttributes<HTMLElement>, "onChange">, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").HTMLAttributes<HTMLElement>, "onChange">, "id" | "className"> & {
         itemsAmount: number;
         defaultItemsPerPage?: number | undefined;
         defaultActivePage?: number | undefined;

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

@@ -2,7 +2,7 @@ import { PopoverProps } from '.';
 import { Placement } from '../../hooks';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
         title?: import("react").ReactNode;
         isOpen?: boolean | undefined;
         withCloseButton?: boolean | undefined;

package/dist/components/ProgressTracker/ProgressTracker.context.d.ts

@@ -0,0 +1,6 @@
+declare type ProgressTrackerContextType = {
+    activeStep: number;
+};
+export declare const ProgressTrackerContext: import("react").Context<ProgressTrackerContextType>;
+export declare const useProgressTrackerContext: () => ProgressTrackerContextType;
+export {};

package/dist/components/ProgressTracker/ProgressTracker.context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+
+var ProgressTrackerContext = /*#__PURE__*/createContext({
+  activeStep: 0
+});
+var useProgressTrackerContext = function useProgressTrackerContext() {
+  return useContext(ProgressTrackerContext);
+};
+
+export { ProgressTrackerContext, useProgressTrackerContext };

package/dist/components/ProgressTracker/ProgressTracker.d.ts

@@ -0,0 +1,12 @@
+import { ForwardRefExoticComponent } from 'react';
+import { BaseComponentPropsWithChildren } from '../../types';
+import { ProgressTrackerItem } from './ProgressTrackerItem';
+declare type ProgressTrackerProps = BaseComponentPropsWithChildren<HTMLDivElement, {
+    /** Indeksen til det aktive steget. */
+    activeStep?: number;
+}>;
+declare type ProgressTrackerComponent = ForwardRefExoticComponent<ProgressTrackerProps> & {
+    Item: typeof ProgressTrackerItem;
+};
+export declare const ProgressTracker: ProgressTrackerComponent;
+export {};

package/dist/components/ProgressTracker/ProgressTracker.js

@@ -0,0 +1,93 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect, useMemo, Children, isValidElement, cloneElement, Fragment } from 'react';
+import styled from 'styled-components';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { ProgressTrackerContext } from './ProgressTracker.context.js';
+import { progressTrackerTokens } from './ProgressTracker.tokens.js';
+import { ProgressTrackerItem } from './ProgressTrackerItem.js';
+
+var ItemsWrapper = styled.ol.withConfig({
+  displayName: "ProgressTracker__ItemsWrapper",
+  componentId: "sc-v5htnb-0"
+})(["display:flex;flex-direction:column;align-items:flex-start;gap:", ";margin:0;padding:0;"], progressTrackerTokens.itemsWrapper.gap);
+var ProgressTrackerConnector = styled.div.withConfig({
+  displayName: "ProgressTracker__ProgressTrackerConnector",
+  componentId: "sc-v5htnb-1"
+})(["margin-left:calc( (", " / 2) - (", " / 2) );height:", ";border-right:", " solid ", ";"], progressTrackerTokens.itemNumber.size, progressTrackerTokens.connector.width, progressTrackerTokens.connector.height, progressTrackerTokens.connector.width, progressTrackerTokens.connector.color);
+var ProgressTracker = function () {
+  var Res = /*#__PURE__*/forwardRef(function (props, ref) {
+    var id = props.id,
+        _props$activeStep = props.activeStep,
+        activeStep = _props$activeStep === void 0 ? 0 : _props$activeStep,
+        children = props.children,
+        className = props.className,
+        htmlProps = props.htmlProps,
+        rest = __rest(props, ["id", "activeStep", "children", "className", "htmlProps"]);
+
+    var _useState = useState(activeStep),
+        _useState2 = _slicedToArray(_useState, 2),
+        thisActiveStep = _useState2[0],
+        setActiveStep = _useState2[1];
+
+    useEffect(function () {
+      if (activeStep !== undefined && activeStep != thisActiveStep) {
+        setActiveStep(activeStep);
+      }
+    }, [activeStep, thisActiveStep]);
+    var containerProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+      ref: ref
+    });
+    var steps = useMemo(function () {
+      var validChildren = removeInvalidChildren(children);
+      var itemsWithIndex = passIndexPropToProgressTrackerItem(validChildren);
+      var itemsWithConnectorsBetween = intersperseItemsWithConnector(itemsWithIndex);
+      return itemsWithConnectorsBetween;
+    }, [children]);
+    return jsx(ProgressTrackerContext.Provider, Object.assign({
+      value: {
+        activeStep: thisActiveStep
+      }
+    }, {
+      children: jsx("div", Object.assign({
+        role: "group",
+        "aria-label": "progress"
+      }, containerProps, {
+        children: jsx(ItemsWrapper, {
+          children: steps
+        })
+      }))
+    }));
+  });
+  Res.Item = ProgressTrackerItem;
+  return Res;
+}();
+
+var removeInvalidChildren = function removeInvalidChildren(children) {
+  return Children.toArray(children).filter(isValidElement);
+};
+
+var passIndexPropToProgressTrackerItem = function passIndexPropToProgressTrackerItem(children) {
+  return Children.map(children, function (item, index) {
+    return /*#__PURE__*/cloneElement(item, Object.assign(Object.assign({}, item.props), {
+      index: index
+    }));
+  });
+};
+
+var intersperseItemsWithConnector = function intersperseItemsWithConnector(children) {
+  return Children.map(children, function (child, index) {
+    if (index === 0) {
+      return child;
+    }
+
+    return jsxs(Fragment, {
+      children: [jsx(ProgressTrackerConnector, {
+        "aria-hidden": true
+      }), child]
+    }, index);
+  });
+};
+
+export { ProgressTracker };

package/dist/components/ProgressTracker/ProgressTracker.stories.d.ts

@@ -0,0 +1,40 @@
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+        activeStep?: number | undefined;
+    } & {
+        children?: import("react").ReactNode;
+    } & {
+        htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+    }> & {
+        Item: (props: ({
+            onClick: (index: number) => void;
+        } & Pick<import("react").HTMLAttributes<HTMLButtonElement>, "id" | "className"> & {
+            active?: boolean | undefined;
+            completed?: boolean | undefined;
+            disabled?: boolean | undefined;
+            icon?: import("../../icons/utils").SvgIcon | undefined;
+            index?: number | undefined;
+        } & {
+            children?: import("react").ReactNode;
+        } & {
+            htmlProps?: import("react").HTMLAttributes<HTMLButtonElement> | undefined;
+        }) | ({
+            onClick?: undefined;
+        } & Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+            active?: boolean | undefined;
+            completed?: boolean | undefined;
+            disabled?: boolean | undefined;
+            icon?: import("../../icons/utils").SvgIcon | undefined;
+            index?: number | undefined;
+        } & {
+            children?: import("react").ReactNode;
+        } & {
+            htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+        })) => JSX.Element;
+    };
+};
+export default _default;
+export declare const Overview: () => JSX.Element;
+export declare const WithIcons: () => JSX.Element;
+export declare const NonClickable: () => JSX.Element;

package/dist/components/ProgressTracker/ProgressTracker.tokens.d.ts

@@ -0,0 +1,69 @@
+import { IconSize } from '../Icon';
+export declare const progressTrackerTokens: {
+    itemsWrapper: {
+        gap: string;
+    };
+    itemContentWrapper: {
+        gap: string;
+    };
+    connector: {
+        color: string;
+        height: string;
+        width: string;
+    };
+    itemNumber: {
+        size: string;
+        borderWidth: string;
+        iconSize: IconSize;
+        fontSize: string;
+        active: {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+        completed: {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+            hover: {
+                borderColor: string;
+                color: string;
+                backgroundColor: string;
+            };
+        };
+        inactive: {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+            hover: {
+                borderColor: string;
+                color: string;
+                backgroundColor: string;
+            };
+        };
+        disabled: {
+            borderColor: string;
+            color: string;
+            backgroundColor: string;
+        };
+    };
+    itemText: {
+        fontFamily: string;
+        fontSize: string;
+        active: {
+            color: string;
+            textDecoration: string;
+        };
+        inactive: {
+            color: string;
+            textDecoration: string;
+            hover: {
+                textDecoration: string;
+            };
+        };
+        disabled: {
+            color: string;
+            textDecoration: string;
+        };
+    };
+};

package/dist/components/ProgressTracker/ProgressTracker.tokens.js

@@ -0,0 +1,80 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var colors = ddsBaseTokens.colors,
+    spacing = ddsBaseTokens.spacing,
+    font = ddsBaseTokens.font;
+var itemsWrapper = {
+  gap: spacing.SizesDdsSpacingLocalX0125
+};
+var itemContentWrapper = {
+  gap: spacing.SizesDdsSpacingLocalX05
+};
+var connector = {
+  color: colors.DdsColorNeutralsGray5,
+  height: '18px',
+  width: '1px'
+};
+var itemNumber = {
+  size: '28px',
+  borderWidth: '2px',
+  iconSize: 'small',
+  fontSize: font.DdsFontBodySans01FontSize,
+  active: {
+    borderColor: colors.DdsColorInteractiveBase,
+    color: colors.DdsColorNeutralsWhite,
+    backgroundColor: colors.DdsColorInteractiveBase
+  },
+  completed: {
+    borderColor: colors.DdsColorInteractiveBase,
+    color: colors.DdsColorNeutralsWhite,
+    backgroundColor: colors.DdsColorInteractiveBase,
+    hover: {
+      borderColor: colors.DdsColorInteractiveDark,
+      color: colors.DdsColorNeutralsWhite,
+      backgroundColor: colors.DdsColorInteractiveDark
+    }
+  },
+  inactive: {
+    borderColor: colors.DdsColorInteractiveBase,
+    color: colors.DdsColorInteractiveBase,
+    backgroundColor: colors.DdsColorNeutralsWhite,
+    hover: {
+      borderColor: colors.DdsColorInteractiveBase,
+      color: colors.DdsColorInteractiveBase,
+      backgroundColor: colors.DdsColorInteractiveLightest
+    }
+  },
+  disabled: {
+    borderColor: colors.DdsColorNeutralsGray5,
+    color: colors.DdsColorNeutralsGray5,
+    backgroundColor: colors.DdsColorNeutralsWhite
+  }
+};
+var itemText = {
+  fontFamily: font.DdsFontSupportingStyleLabel01FontFamily,
+  fontSize: font.DdsFontSupportingStyleLabel01FontSize,
+  active: {
+    color: colors.DdsColorNeutralsGray9,
+    textDecoration: 'underline'
+  },
+  inactive: {
+    color: colors.DdsColorNeutralsGray7,
+    textDecoration: 'none',
+    hover: {
+      textDecoration: 'underline'
+    }
+  },
+  disabled: {
+    color: colors.DdsColorNeutralsGray6,
+    textDecoration: 'none'
+  }
+};
+var progressTrackerTokens = {
+  itemsWrapper: itemsWrapper,
+  itemContentWrapper: itemContentWrapper,
+  connector: connector,
+  itemNumber: itemNumber,
+  itemText: itemText
+};
+
+export { progressTrackerTokens };

package/dist/components/ProgressTracker/ProgressTrackerItem.d.ts

@@ -0,0 +1,24 @@
+import { SvgIcon } from '../../icons/utils';
+import { BaseComponentPropsWithChildren } from '../../types';
+declare type BaseItemProps = {
+    /** Om steget er valgt eller ikke. Settes av konsument. */
+    active?: boolean;
+    /** Om steget er ferdig eller ikke. Settes av konsument. */
+    completed?: boolean;
+    /** Om steget skal være disabled. Settes av konsument.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Ikon som skal vises istedenfor stegnummeret. Settes av konument. */
+    icon?: SvgIcon;
+    /** Indeksen til steget. NB! Denne settes automatisk av `<ProgressTracker />` og skal ikke settes manuelt. */
+    index?: number;
+};
+declare type ProgressTrackerItemProps = ({
+    /** Click-handler som gjør det mulig for bruker å klikke på steget for å navigere. Valgfri. */
+    onClick: (index: number) => void;
+} & BaseComponentPropsWithChildren<HTMLButtonElement, BaseItemProps>) | ({
+    onClick?: undefined;
+} & BaseComponentPropsWithChildren<HTMLDivElement, BaseItemProps>);
+export declare const ProgressTrackerItem: (props: ProgressTrackerItemProps) => JSX.Element;
+export {};