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

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

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: React.FC<import('./Button').ButtonProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+            page: () => React.JSX.Element;
+        };
+    };
+    args: {
+        children: string;
+        href: string;
+    };
+    argTypes: {
+        children: {
+            control: "text";
+        };
+        ellipsis: {
+            control: "boolean";
+        };
+        disabled: {
+            control: "boolean";
+        };
+        fluid: {
+            control: "boolean";
+        };
+        htmlMarkup: {
+            control: "select";
+            options: string[];
+        };
+        href: {
+            control: "text";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Concepts: Story;
+export declare const Icons: Story;
+export declare const LazyIcons: Story;
+export declare const Sizes: Story;
+export declare const DarkMode: Story;
+export declare const Disabled: Story;
+export declare const Fluid: Story;
+export declare const Variants: Story;
+export declare const Ellipsis: Story;
+export declare const UURightArrow: Story;
+export declare const Borderless: Story;

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

@@ -0,0 +1,26 @@
+import { ErrorWrapperClassNameProps } from '../ErrorWrapper';
+import { FormOnColor, FormSize } from '../../constants';
+export interface CheckboxProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'> {
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */
+    label: React.ReactNode;
+    /** input id of the checkbox */
+    inputId?: string;
+    /** Changes the visuals of the checkbox */
+    onColor?: keyof typeof FormOnColor;
+    /** Changes the visuals of the checkbox */
+    size?: keyof typeof FormSize;
+    /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */
+    error?: boolean;
+    /** Error text to show above the component */
+    errorText?: string;
+    /** Error text id */
+    errorTextId?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Ref that is passed to the component */
+    ref?: React.Ref<HTMLInputElement | null>;
+}
+export declare const Checkbox: React.FC<CheckboxProps>;
+export default Checkbox;

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

@@ -0,0 +1,48 @@
+import { StoryObj } from '@storybook/react-vite';
+import { FormOnColor, FormSize } from '../../constants';
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./Checkbox').CheckboxProps>;
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        label: string;
+    };
+    argTypes: {
+        checked: {
+            control: "boolean";
+        };
+        disabled: {
+            control: "boolean";
+        };
+        onColor: {
+            control: "select";
+            options: FormOnColor[];
+        };
+        size: {
+            control: "select";
+            options: FormSize[];
+        };
+        name: {
+            control: "text";
+        };
+        value: {
+            control: "text";
+        };
+        required: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const DifferentLabels: Story;
+export declare const AllColors: Story;
+export declare const Large: Story;

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

@@ -0,0 +1,18 @@
+import { PaletteNames } from '../../theme/palette';
+import { ChipSize, ChipAction, ChipVariant } from './constants';
+export type ChipColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;
+export interface ChipProps {
+    /** Sets the text of the chip */
+    children: string;
+    /** Sets the size of the chip. Default: medium */
+    size?: keyof typeof ChipSize;
+    /** Sets the background of the chip. Not used if action is "undo". Default: blueberry */
+    color?: ChipColors;
+    variant?: keyof typeof ChipVariant;
+    action: keyof typeof ChipAction;
+    onClick: () => void;
+    /** Sets the data-testid attribute on the expander button. */
+    testId?: string;
+}
+declare const Chip: React.FC<ChipProps>;
+export default Chip;

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

@@ -0,0 +1,44 @@
+import { StoryObj } from '@storybook/react-vite';
+import { ChipAction, ChipSize, ChipVariant } from './constants';
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./Chip').ChipProps>;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+        action: ChipAction.remove;
+        onClick: import('storybook/actions').HandlerFunction;
+    };
+    argTypes: {
+        children: {
+            control: "text";
+        };
+        size: {
+            control: "select";
+            options: ChipSize[];
+        };
+        color: {
+            control: "select";
+            options: string[];
+        };
+        variant: {
+            control: "select";
+            options: ChipVariant[];
+        };
+        action: {
+            control: "select";
+            options: ChipAction[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Actions: Story;

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

@@ -0,0 +1,13 @@
+export declare enum ChipSize {
+    medium = "medium",
+    large = "large"
+}
+export declare enum ChipAction {
+    remove = "remove",
+    undo = "undo"
+}
+export declare enum ChipVariant {
+    normal = "normal",
+    oncolor = "oncolor",
+    emphasised = "emphasised"
+}

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

@@ -0,0 +1,4 @@
+import { default as Chip } from './Chip';
+export { ChipSize, ChipAction, ChipVariant } from './constants';
+export * from './Chip';
+export default Chip;

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

@@ -0,0 +1,18 @@
+export interface CloseProps {
+    /** Keeps the icon small for all screen sizes */
+    small?: boolean;
+    /** Function is called when user clicks the button */
+    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** Sets the aria-label of the button */
+    ariaLabel?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Gives color to the svg */
+    color?: 'blueberry' | 'black' | 'plum';
+    /** Ref that is passed to the component */
+    ref?: React.Ref<HTMLButtonElement | null>;
+}
+declare const Close: React.FC<CloseProps>;
+export default Close;

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

@@ -0,0 +1,32 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./Close').CloseProps>;
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        ariaLabel: string;
+    };
+    argTypes: {
+        ariaLabel: {
+            control: "text";
+        };
+        testId: {
+            control: "text";
+        };
+        color: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const AllColors: Story;

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

@@ -0,0 +1,24 @@
+export interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur'> {
+    /**
+     * Sets the content of the trigger.
+     */
+    children: React.ReactNode;
+    /**
+     * Indicates that the trigger is in use.
+     */
+    selected?: boolean;
+    /**
+     * Classname will be applied to the button element.
+     */
+    className?: string;
+    /**
+     * Sets the data-testid attribute.
+     */
+    testId?: string;
+    /**
+     * ref that is passed to the component
+     */
+    ref?: React.Ref<HTMLButtonElement | null>;
+}
+declare const DictionaryTrigger: React.FC<DictionaryTriggerProps>;
+export default DictionaryTrigger;

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

@@ -0,0 +1,29 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./DictionaryTrigger').DictionaryTriggerProps>;
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+        selected: false;
+    };
+    argTypes: {
+        children: {
+            control: "text";
+        };
+        selected: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const NextToText: Story;

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

@@ -0,0 +1,50 @@
+import { default as React } from 'react';
+import { HNDesignsystemDrawer } from '../../resources/Resources';
+import { TitleTags } from '../Title';
+type DesktopDirections = 'left' | 'right';
+export interface DrawerProps extends InnerDrawerProps {
+    /** Opens and closes the drawer */
+    isOpen: boolean;
+}
+export interface InnerDrawerProps {
+    /** Sets the aria-label of the drawer */
+    ariaLabel?: string;
+    /** Sets the aria-labelledby of the drawer */
+    ariaLabelledBy?: string;
+    /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */
+    closeColor?: 'blueberry' | 'plum';
+    /** Direction of the drawer on desktop. Default: left */
+    desktopDirection?: DesktopDirections;
+    /** Sets the style of the Drawer header */
+    headerClasses?: string;
+    /** Title to display in the header of the drawer */
+    title: string;
+    /** id of the drawer title */
+    titleId?: string;
+    /** Changes the underlying element of the title. Default: h3 */
+    titleHtmlMarkup?: TitleTags;
+    /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */
+    onRequestClose?: () => void;
+    /** Optional footer content that can be rendered instead of default CTA(s) */
+    footerContent?: React.ReactNode;
+    /** Main content of the drawer */
+    children?: React.ReactNode;
+    /** Hides the close button */
+    noCloseButton?: boolean;
+    /** Primary CTA callback */
+    onPrimaryAction?: () => void;
+    /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */
+    primaryActionText?: string;
+    /** Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) */
+    secondaryActionText?: string;
+    /** Secondary CTA callback */
+    onSecondaryAction?: () => void;
+    /** Customize the z-index of the drawer */
+    zIndex?: number;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemDrawer>;
+    /** Sets mobile styling and animation from outer level Drawer */
+    isMobile?: boolean;
+}
+declare const Drawer: React.FC<DrawerProps>;
+export default Drawer;

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

@@ -0,0 +1,86 @@
+import { DrawerProps } from './Drawer';
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').FC<DrawerProps>;
+    tags: string[];
+    parameters: {
+        docs: {
+            page: () => React.ReactNode;
+            description: {
+                component: string;
+            };
+            story: {
+                inline: boolean;
+                iframeHeight: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+        onPrimaryAction: import('storybook/actions').HandlerFunction;
+        onRequestClose: import('storybook/actions').HandlerFunction;
+        onSecondaryAction: import('storybook/actions').HandlerFunction;
+        primaryActionText: string;
+        secondaryActionText: string;
+        title: string;
+    };
+    argTypes: {
+        ariaLabel: {
+            control: "text";
+        };
+        ariaLabelledBy: {
+            control: "text";
+        };
+        children: {
+            control: "text";
+        };
+        desktopDirection: {
+            control: "select";
+            options: string[];
+        };
+        footerContent: {
+            control: "object";
+        };
+        isOpen: {
+            control: "boolean";
+        };
+        onPrimaryAction: {
+            action: string;
+        };
+        onRequestClose: {
+            action: string;
+        };
+        onSecondaryAction: {
+            action: string;
+        };
+        primaryActionText: {
+            control: "text";
+        };
+        secondaryActionText: {
+            control: "text";
+        };
+        title: {
+            control: "text";
+        };
+        titleHtmlMarkup: {
+            control: "select";
+            options: import('../Title').TitleTags[];
+        };
+        titleId: {
+            control: "text";
+        };
+        zIndex: {
+            control: "number";
+        };
+        noCloseButton: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const OpenFromButton: Story;
+export declare const FooterContent: Story;
+export declare const ScrollingWindow: Story;

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

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

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

@@ -0,0 +1,40 @@
+import { ComponentType, default as React } from 'react';
+import { SingleSelectItemProps } from './SingleSelect/SingleSelectItem';
+import { HNDesignsystemDropdown } from '../../resources/Resources';
+import { SvgIcon } from '../Icon';
+import { IconName } from '../Icons/IconNames';
+type DropdownVariants = 'fill' | 'transparent' | 'borderless';
+export interface DropdownProps {
+    /** Text on the trigger button that opens the dropdown */
+    triggerText: string;
+    /** Sets the dropdown content */
+    children: React.ReactNode;
+    /** Minimum width for the dropdown in pixels. Does not affect trigger button. */
+    dropdownMinWidth?: number;
+    /** Minimum width for the trigger in pixels. Does not apply for borderless variant */
+    triggerMinWidth?: number;
+    /** Disables rendring of the close button in the list */
+    noCloseButton?: boolean;
+    /** Called when dropdown is open/closed */
+    onToggle?: (isOpen: boolean) => void;
+    /** Whether the dropdown is open or not */
+    open?: 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>;
+    /** Adds an icon to the trigger */
+    svgIcon?: SvgIcon | IconName;
+    /** Sets the visual variant of the Dropdown */
+    variant?: DropdownVariants;
+}
+export declare const DropdownBase: React.FC<DropdownProps>;
+export interface DropdownCompound extends React.FC<DropdownProps> {
+    SingleSelectItem: ComponentType<SingleSelectItemProps>;
+}
+declare const Dropdown: DropdownCompound;
+export default Dropdown;

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

@@ -0,0 +1,36 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('./Dropdown').DropdownCompound;
+    subcomponents: {
+        SingleSelectItem: import('react').ComponentType<import('./SingleSelect').SingleSelectItemProps>;
+    };
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+            description: {
+                component: string;
+            };
+            story: {
+                inline: boolean;
+                iframeHeight: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+        triggerText: string;
+    };
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const SingleSelect: Story;
+export declare const MultiSelect: Story;
+export declare const Variants: Story;
+export declare const WithIcon: Story;
+export declare const AsChild: Story;
+export declare const DropdownWidthAndAlignment: Story;
+export declare const DefaultSelected: Story;
+export declare const WithLanguageProvider: Story;

package/lib/src/components/Dropdown/SingleSelect/SingleSelect.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export type SingleSelectContextType = {
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    value?: string;
+    onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;
+};
+export interface SingleSelectProps {
+    name?: string;
+    disabled?: boolean;
+    defaultValue?: string;
+    onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;
+    children: React.ReactNode;
+}
+export declare const SingleSelect: React.FC<SingleSelectProps>;

package/lib/src/components/Dropdown/SingleSelect/SingleSelect.stories.d.ts

@@ -0,0 +1,57 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./SingleSelectItem').SingleSelectItemProps>;
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+            description: {
+                component: string;
+            };
+            story: {
+                inline: boolean;
+                iframeHeight: string;
+            };
+        };
+    };
+    args: {
+        text: string;
+    };
+    argTypes: {
+        text: {
+            control: "text";
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        value: {
+            control: "text";
+            description: string;
+        };
+        testId: {
+            control: "text";
+            description: string;
+        };
+        asChild: {
+            control: "boolean";
+            description: string;
+        };
+        children: {
+            control: "object";
+            description: string;
+        };
+        defaultSelected: {
+            control: "boolean";
+            description: string;
+        };
+        "aria-describedby": {
+            control: "text";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/lib/src/components/Dropdown/SingleSelect/SingleSelectItem.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+export interface SingleSelectItemProps extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {
+    /** The text to the singleSelectItem */
+    text?: string;
+    /** input id of the singleSelectItem */
+    inputId?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** When true, onclick and keyboard events will be passed to the child Button or AnchorLink. */
+    asChild?: boolean;
+    /** Only use when asChild is set to true and only pass one child */
+    children?: React.ReactNode;
+    /** Value for this singleSelectItem option - used by the parent wrapper to keep track of the context */
+    value?: string;
+    /** aria-describedby passthrough if needed */
+    ['aria-describedby']?: string;
+    /** Marks this option as initially selected */
+    defaultSelected?: boolean;
+    /** Ref that is passed to the component */
+    ref?: React.Ref<HTMLElement | null>;
+}
+export declare const SingleSelectItem: React.FC<SingleSelectItemProps>;
+export default SingleSelectItem;

package/lib/src/components/Dropdown/SingleSelect/utils.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { SingleSelectContextType } from './SingleSelect';
+export declare const SingleSelectContext: React.Context<SingleSelectContextType | null>;
+export declare const useSingleSelect: () => SingleSelectContextType | null;

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

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