@helsenorge/designsystem-react 13.4.0 → 14.0.0-beta.1

package/lib/src/components/DropdownOld/DropdownOld.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+import { HNDesignsystemDropdown } from '../../resources/Resources';
+import { DropdownOldOnColor } from './constants';
+export interface DropdownOldProps {
+    /** Label for dropdown. Visible for screen readers  */
+    label: string;
+    /** Text on the trigger button that opens the dropdown */
+    placeholder: string;
+    /** Sets the dropdown content */
+    children: React.ReactNode;
+    /** @deprecated Close button text */
+    closeText?: string;
+    /** Minimum width for the dropdown in pixels. Does not affect trigger button */
+    dropdownMinWidth?: number;
+    /** No close button */
+    noCloseButton?: boolean;
+    /** Called when dropdown is open/closed */
+    onToggle?: (isOpen: boolean) => void;
+    /** Whether the dropdown is open or not */
+    open?: boolean;
+    /** Changes the visuals of the dropdown */
+    onColor?: keyof typeof DropdownOldOnColor;
+    /** Makes the background of the trigger transparent */
+    transparent?: boolean;
+    /** Makes the width of the full component adjust to its parent */
+    fluid?: boolean;
+    /** Makes the dropdown disabled */
+    disabled?: boolean;
+    /** Sets the data-testid attribute on the dropdown button */
+    testId?: string;
+    /** Overrides the default z-index of the DropDownContent */
+    zIndex?: number;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemDropdown>;
+}
+declare const DropdownOld: React.FC<DropdownOldProps>;
+export default DropdownOld;

package/lib/src/components/DropdownOld/DropdownOld.stories.d.ts

@@ -0,0 +1,66 @@
+import { default as React } from 'react';
+import { StoryObj } from '@storybook/react-vite';
+import { DropdownOldOnColor } from './constants';
+declare const meta: {
+    title: string;
+    component: React.FC<import('./DropdownOld').DropdownOldProps>;
+    tags: string[];
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+            description: {
+                component: string;
+            };
+            story: {
+                inline: boolean;
+                iframeHeight: string;
+            };
+        };
+    };
+    args: {
+        label: string;
+        children: string;
+        placeholder: string;
+    };
+    argTypes: {
+        label: {
+            control: "text";
+        };
+        placeholder: {
+            control: "text";
+        };
+        closeText: {
+            control: "text";
+        };
+        open: {
+            control: "boolean";
+        };
+        onColor: {
+            control: "select";
+            options: DropdownOldOnColor[];
+        };
+        transparent: {
+            control: "boolean";
+        };
+        fluid: {
+            control: "boolean";
+        };
+        noCloseButton: {
+            control: "boolean";
+        };
+        disabled: {
+            control: "boolean";
+        };
+        dropdownMinWidth: {
+            control: "number";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const RadioButtonChildren: Story;
+export declare const CheckboxChildren: Story;
+export declare const WideChildren: Story;
+export declare const EksternChildrenRefs: Story;
+export declare const WithLanguageProvider: Story;

package/lib/src/components/DropdownOld/constants.d.ts

@@ -0,0 +1,6 @@
+export declare enum DropdownOldOnColor {
+    onwhite = "onwhite",
+    ongrey = "ongrey",
+    onblueberry = "onblueberry",
+    oncherry = "oncherry"
+}

package/lib/src/components/DropdownOld/index.d.ts

@@ -0,0 +1,4 @@
+import { default as DropdownOld } from './DropdownOld';
+export { DropdownOldOnColor } from './constants';
+export * from './DropdownOld';
+export default DropdownOld;

package/lib/src/components/DropdownOld/resourceHelper.d.ts

@@ -0,0 +1,3 @@
+import { HNDesignsystemDropdown } from '../../resources/Resources';
+import { LanguageLocales } from '../../constants';
+export declare const getResources: (language: LanguageLocales) => HNDesignsystemDropdown;

package/lib/src/components/Duolist/Duolist.d.ts

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+import { TitleProps } from '../Title';
+import { Breakpoint } from '../../hooks/useBreakpoint';
+export type DuolistVariants = 'normal' | 'line';
+export type BoldColumn = 'first' | 'second' | 'none';
+export type Border = 'no-border' | 'border';
+export type Formats = 'formatted' | 'non-formatted';
+export interface DuolistProps {
+    /** Determines which column is bold */
+    boldColumn?: BoldColumn;
+    /** Label of the Duolist */
+    border?: Border;
+    /** Label of the Duolist */
+    label?: React.ReactElement<TitleProps>;
+    /** Formatted or non-formatted visual variants */
+    format?: Formats;
+    /** Character separator for non-formatted format */
+    separator?: string;
+    /** Sets the visual variant of the Duolist. */
+    variant?: DuolistVariants;
+    /** Sets the content of the Duolist. */
+    children: React.ReactNode;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Width of the description column in percentage */
+    descriptionWidth?: number;
+    /** Use collapsed mode on columns from chosen breakpoint and below. */
+    useCollapsedFromAndBelowBreakpoint?: keyof typeof Breakpoint;
+}
+export interface DuolistGroupProps {
+    /** Determines which column is bold */
+    boldColumn?: BoldColumn;
+    /** Sets content of the <dd> tag. */
+    description: React.ReactNode;
+    /** Formatted or non-formatted visual variants */
+    format?: Formats;
+    /** Character separator for non-formatted format */
+    separator?: string;
+    /** Sets content of the <dt> tag. */
+    term: React.ReactNode;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const DuolistGroup: React.FC<DuolistGroupProps>;
+export declare const Duolist: React.FC<DuolistProps>;
+export default Duolist;

package/lib/src/components/Duolist/Duolist.stories.d.ts

@@ -0,0 +1,35 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./Duolist').DuolistProps>;
+    tags: string[];
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+        useCollapsedFromAndBelowBreakpoint: "xs";
+    };
+    argTypes: {
+        descriptionWidth: {
+            control: "number";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const DescriptionWithLink: Story;
+export declare const WithLabel: Story;
+export declare const WithLines: Story;
+export declare const WithBorder: Story;
+export declare const BoldColumn: Story;
+export declare const DescriptionWidth: Story;
+export declare const NonFormatted: Story;
+export declare const WithHighlighter: Story;
+export declare const WithTestid: Story;

package/lib/src/components/ElementHeader/ElementHeader.d.ts

@@ -0,0 +1,58 @@
+import { default as React } from 'react';
+import { AvatarProps, AvatarType } from '../Avatar';
+import { BadgeProps, BadgeType } from '../Badge';
+import { SvgIcon } from '../Icon';
+import { StatusDotProps, StatusDotType } from '../StatusDot';
+import { TitleTags } from '../Title';
+import { ElementHeaderTextProps, ElementHeaderTextType } from './ElementHeaderText/ElementHeaderText';
+import { StatusDotListProps, StatusDotListType } from './StatusDotList/StatusDotList';
+export type ElementHeaderSize = 'compact' | 'small' | 'medium' | 'large';
+export type ParentType = 'linklist' | 'expanderlist';
+export interface ElementHeaderType extends React.FC<ElementHeaderProps> {
+    Avatar?: AvatarType;
+    Badge?: BadgeType;
+    ElementHeaderText?: ElementHeaderTextType;
+    StatusDot?: StatusDotType;
+    StatusDotList?: StatusDotListType;
+}
+export interface ElementHeaderProps {
+    /** Adds custom classes to the ElementHeader element. */
+    className?: string;
+    /** Chevron to render inside of the ElementHeader */
+    chevronIcon?: SvgIcon;
+    /** Close button to be rendered inside of ElementHeader. This renders in place of chevronIcon */
+    closeButton?: React.ReactElement;
+    /** Children to be rendered inside of ElementHeader */
+    children: React.ReactNode;
+    /** Changes the underlying element of the title. Default: h2*/
+    titleHtmlMarkup?: TitleTags;
+    /** icon to be rendered inside of ElementHeader */
+    icon?: React.ReactElement;
+    /** whether or not the parent is hovered */
+    isHovered?: boolean;
+    /** Adjusts styling based on parent */
+    parentType?: ParentType;
+    /** Changes size of the ElementHeader. */
+    size?: ElementHeaderSize;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Highlights text in title. Used for search results */
+    highlightText?: string;
+}
+export interface ElementHeaderChildren {
+    avatarChild?: React.ReactElement<AvatarProps>;
+    elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[];
+    badgeChildren?: React.ReactElement<BadgeProps>[];
+    statusDotChildren?: React.ReactElement<StatusDotProps>[];
+    statusDotMCChild?: React.ReactElement<StatusDotListProps>;
+    elementChild?: React.ReactElement;
+    stringChildren: string[];
+    remainingChildren: React.ReactNode[];
+}
+export declare const ElementHeaderRoot: ElementHeaderType;
+type ElementHeaderComponent = typeof ElementHeaderRoot & {
+    Text: React.FC<ElementHeaderTextProps>;
+    StatusDotList: React.FC<StatusDotListProps>;
+};
+declare const ElementHeader: ElementHeaderComponent;
+export default ElementHeader;

package/lib/src/components/ElementHeader/ElementHeader.stories.d.ts

@@ -0,0 +1,26 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('./ElementHeader').ElementHeaderType & {
+        Text: React.FC<import('./ElementHeaderText').ElementHeaderTextProps>;
+        StatusDotList: React.FC<import('./StatusDotList').StatusDotListProps>;
+    };
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+        };
+    };
+    args: {
+        children: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const LinkListWithElementHeaderComp: Story;
+export declare const ExpanderListWithElementHeaderComp: Story;
+export declare const WithAvatarAndBadge: Story;
+export declare const WithNotificationBadge: Story;
+export declare const WithStatusDots: Story;
+export declare const WithEverything: Story;

package/lib/src/components/ElementHeader/ElementHeaderText/ElementHeaderText.d.ts

@@ -0,0 +1,24 @@
+import { TitleTags } from '../../Title';
+export type ElementHeaderTextType = typeof ElementHeaderText;
+export interface ElementHeaderTextProps {
+    /** The first text in the ElementHeaderText Component */
+    firstText: string;
+    /** Will style the first text as bold */
+    firstTextEmphasised?: boolean;
+    /** The second text in the ElementHeaderText Component */
+    secondText?: string;
+    /** Will style the second text as bold */
+    secondTextEmphasised?: boolean;
+    /** Whether or not this ElementHeaderText is a sub text */
+    subText?: boolean;
+    /** Adds custom classes to the ElementHeaderText component. */
+    className?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Changes the underlying element of the text. Default: span*/
+    titleHtmlMarkup?: TitleTags;
+    /** Highlights text. Used for search results */
+    highlightText?: string;
+}
+export declare const ElementHeaderText: React.FC<ElementHeaderTextProps>;
+export default ElementHeaderText;

package/lib/src/components/ElementHeader/ElementHeaderText/ElementHeaderText.stories.d.ts

@@ -0,0 +1,51 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./ElementHeaderText').ElementHeaderTextProps>;
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+        };
+    };
+    args: {
+        firstText: string;
+    };
+    argTypes: {
+        firstText: {
+            control: "text";
+            description: string;
+        };
+        firstTextEmphasised: {
+            control: "boolean";
+            description: string;
+        };
+        secondText: {
+            control: "text";
+            description: string;
+        };
+        secondTextEmphasised: {
+            control: "boolean";
+            description: string;
+        };
+        subText: {
+            control: "boolean";
+            description: string;
+        };
+        className: {
+            control: "text";
+            description: string;
+        };
+        testId: {
+            control: "text";
+            description: string;
+        };
+        titleHtmlMarkup: {
+            control: "select";
+            options: import('../../Title').TitleTags[];
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/lib/src/components/ElementHeader/StatusDotList/StatusDotList.d.ts

@@ -0,0 +1,22 @@
+import { StatusDotProps } from '../../StatusDot';
+export type StatusDotListType = typeof StatusDotList;
+export interface StatusDotListProps {
+    /** Additional text to the bottom statusdot */
+    additionalText?: string;
+    /** StatusDot that is under the others and outside the stacking */
+    bottomStatusDot?: React.ReactElement<StatusDotProps>;
+    /** Stacking of the statusdots  */
+    stacking?: 'vertical' | 'horizontal';
+    /** StatusDots as children */
+    children?: React.ReactNode;
+    /** Adds custom classes */
+    className?: string;
+    /** Show a hidden for child statusdot over the other */
+    hiddenForChild?: boolean;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** StatusDot that is over the others and outside the stacking */
+    topStatusDot?: React.ReactElement<StatusDotProps>;
+}
+export declare const StatusDotList: React.FC<StatusDotListProps>;
+export default StatusDotList;

package/lib/src/components/ElementHeader/StatusDotList/StatusDotList.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./StatusDotList').StatusDotListProps>;
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+        };
+    };
+    args: {};
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/lib/src/components/ElementHeader/utils.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { ElementHeaderChildren, ElementHeaderProps } from './ElementHeader';
+type ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ElementHeaderChildren | undefined;
+export declare const mapChildren: ChildrenMapper;
+export declare const renderElementHeader: (element: React.ReactNode, options: Pick<ElementHeaderProps, "titleHtmlMarkup" | "isHovered" | "size" | "parentType" | "chevronIcon" | "icon" | "highlightText" | "closeButton">) => React.ReactElement | undefined;
+export {};

package/lib/src/components/EmptyState/EmptyBoxBeeMedium.d.ts

@@ -0,0 +1,3 @@
+import { EmptyStateIllustrationProps } from './EmptyState';
+declare const EmptyBoxBeeMedium: React.FC<EmptyStateIllustrationProps>;
+export default EmptyBoxBeeMedium;

package/lib/src/components/EmptyState/EmptyBoxBeeSmall.d.ts

@@ -0,0 +1,3 @@
+import { EmptyStateIllustrationProps } from './EmptyState';
+declare const EmptyBoxBeeSmall: React.FC<EmptyStateIllustrationProps>;
+export default EmptyBoxBeeSmall;

package/lib/src/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,27 @@
+import { IllustrationColor } from '../Illustration';
+import { TitleTags } from '../Title';
+import { EmptyStateOnColor } from './constants';
+export type EmptyStateType = 'dashed' | 'blank';
+export type EmptyStateSize = 'normal' | 'compact';
+export interface EmptyStateIllustrationProps {
+    color: IllustrationColor;
+    svgProperties?: React.SVGProps<SVGSVGElement>;
+}
+export interface EmptyStateProps {
+    /** Additional text rendered under the title.  */
+    additionalText?: React.ReactNode;
+    /** Color of the illustration */
+    onColor?: EmptyStateOnColor;
+    /** Normal or compact size */
+    size?: EmptyStateSize;
+    /** The main message in the component  */
+    title: React.ReactNode;
+    /** Markup props for title. Default: h2 */
+    titleHtmlMarkup?: TitleTags;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Styling of the border */
+    type?: EmptyStateType;
+}
+declare const EmptyState: React.FC<EmptyStateProps>;
+export default EmptyState;

package/lib/src/components/EmptyState/EmptyState.stories.d.ts

@@ -0,0 +1,38 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./EmptyState').EmptyStateProps>;
+    tags: string[];
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        title: string;
+    };
+    argTypes: {
+        title: {
+            control: "text";
+        };
+        onColor: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+        additionalText: {
+            control: "text";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithAnchorLink: Story;
+export declare const WithTitle: Story;

package/lib/src/components/EmptyState/constants.d.ts

@@ -0,0 +1,5 @@
+export declare enum EmptyStateOnColor {
+    onwhite = "onwhite",
+    onblueberry = "onblueberry",
+    oncherry = "oncherry"
+}

package/lib/src/components/EmptyState/index.d.ts

@@ -0,0 +1,4 @@
+import { default as EmptyState } from './EmptyState';
+export { EmptyStateOnColor } from './constants';
+export * from './EmptyState';
+export default EmptyState;

package/lib/src/components/ErrorWrapper/ErrorWrapper.d.ts

@@ -0,0 +1,21 @@
+export interface ErrorWrapperClassNameProps {
+    errorWrapperClassName?: string;
+}
+export interface ErrorWrapperProps {
+    /** Form component */
+    children?: React.ReactNode;
+    /** Error message */
+    errorText?: string;
+    /** Error text id */
+    errorTextId?: string;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Adds a ref to the error message p tag */
+    errorMessageRef?: React.Ref<HTMLDivElement>;
+    /** Renders the error component (Default: true) */
+    renderError?: boolean;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const ErrorWrapper: React.FC<ErrorWrapperProps>;
+export default ErrorWrapper;

package/lib/src/components/Expander/Expander.d.ts

@@ -0,0 +1,36 @@
+import { PaletteNames } from '../../theme/palette';
+import { SvgIcon } from '../Icon';
+import { IconName } from '../Icons/IconNames';
+import { ExpanderSize } from './constants';
+export type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;
+export interface ExpanderProps {
+    buttonId?: string;
+    /** Sets the trigger title */
+    title: string;
+    /** Sets the expanded content */
+    children?: React.ReactNode;
+    /** Sets classnames on the content area */
+    contentClassNames?: string;
+    /** Sets the size of the expander. Default: ExpanderSize.small */
+    size?: ExpanderSize;
+    /** Sets the background of the expander. Requires size=ExpanderSize.large. */
+    color?: ExpanderColors;
+    /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */
+    svgIcon?: SvgIcon | IconName;
+    /** Opens or closes the expander */
+    expanded?: boolean;
+    /** Removes border to the left of the content. Requires size=ExpanderSize.small. */
+    noNestedLine?: boolean;
+    /** Stick expander trigger to top of screen while scrolling down */
+    sticky?: boolean;
+    /** Called when expander is open/closed. */
+    onExpand?: (isExpanded: boolean) => void;
+    /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */
+    renderChildrenWhenClosed?: boolean;
+    /** Sets the data-testid attribute on the expander button. */
+    testId?: string;
+    /** Overrides the default z-index of the expander header */
+    zIndex?: number;
+}
+declare const Expander: React.FC<ExpanderProps>;
+export default Expander;

package/lib/src/components/Expander/Expander.stories.d.ts

@@ -0,0 +1,54 @@
+import { StoryObj } from '@storybook/react-vite';
+import { ExpanderSize } from './constants';
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./Expander').ExpanderProps>;
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+        title: string;
+    };
+    argTypes: {
+        children: {
+            control: "text";
+        };
+        title: {
+            control: "text";
+        };
+        size: {
+            control: "select";
+            options: ExpanderSize[];
+        };
+        color: {
+            control: "select";
+            options: string[];
+        };
+        noNestedLine: {
+            control: "boolean";
+        };
+        expanded: {
+            control: "boolean";
+        };
+        renderChildrenWhenClosed: {
+            control: "boolean";
+        };
+        sticky: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+export declare const WithIcon: Story;
+export declare const WithLoader: Story;
+export declare const WithCallback: Story;

package/lib/src/components/Expander/constants.d.ts

@@ -0,0 +1,4 @@
+export declare enum ExpanderSize {
+    small = "small",
+    large = "large"
+}

package/lib/src/components/Expander/index.d.ts

@@ -0,0 +1,4 @@
+import { default as Expander } from './Expander';
+export { ExpanderSize } from './constants';
+export * from './Expander';
+export default Expander;

package/lib/src/components/ExpanderHierarchy/Expander.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { ExpanderHierarchyCommonProps } from './ExpanderHierarchy';
+export interface ExpanderProps extends ExpanderHierarchyCommonProps {
+    /** Sets the trigger title */
+    title: string;
+    /** Opens or closes the expander */
+    expanded?: boolean;
+    /** Called when expander is open/closed. */
+    onExpand?: (isExpanded: boolean) => void;
+    /** Sets the expanded content */
+    children?: React.ReactNode;
+    /** Sets the data-testid attribute on the expander button. */
+    testId?: string;
+    /** Adds custom classes to the element. */
+    className?: string;
+}
+export type ExpanderType = typeof Expander;
+declare const Expander: React.FC<ExpanderProps>;
+export default Expander;

package/lib/src/components/ExpanderHierarchy/ExpanderButton.d.ts

@@ -0,0 +1,9 @@
+import { ExpanderHierarchyCommonProps } from '../ExpanderHierarchy';
+interface ExpanderButtonProps extends ExpanderHierarchyCommonProps {
+    expanded: boolean;
+    onExpand?: (isExpanded: boolean) => void;
+    children: string;
+    testId?: string;
+}
+declare const ExpanderButton: React.FC<ExpanderButtonProps>;
+export default ExpanderButton;