@skatteetaten/ds-overlays 2.2.2 → 2.3.0

package/Modal/styles.css

@@ -1 +1 @@
-html:has(dialog[open]){overflow:hidden}.Modal-module_modal__Kyr-Y{background-color:var(--palette-graphite-0);border:.25rem solid var(--theme-primary);box-shadow:0 0 8px 2px rgba(0,0,0,.16),0 2px 4px -4px rgba(0,0,0,.16);box-sizing:border-box;font-size:var(--font-size-m);font-weight:var(--font-weight-regular);line-height:var(--semantic-line-height-article);max-height:calc(100vh - var(--spacing-m)*2);max-width:calc(var(--semantic-responsive-article) - var(--spacing-m)*2);min-width:calc(300px - var(--spacing-m)*2);overflow-y:auto;padding:0;position:fixed}.Modal-module_modal__Kyr-Y::backdrop{background:hsla(0,0%,100%,.8)}.Modal-module_modalContainer__muf75{outline:none}.Modal-module_modalHeading__uwT1R{padding-right:var(--spacing-xl)}.Modal-module_modalHeadingNoPadding__t2hkH{padding-right:0}.Modal-module_modalIllustration__jbA32{margin-bottom:var(--spacing-m);width:100%}.Modal-module_modal__Kyr-Y[data-variant=plain]{border:none}.Modal-module_modalPaddingNONE__02HaX{padding:0}.Modal-module_modalPaddingS__O93ax{padding:calc(var(--spacing-s) - .25rem)}.Modal-module_modalPaddingM__c5Wi2{padding:calc(var(--spacing-m) - .25rem)}.Modal-module_modalPaddingL__IbVyg{padding:calc(var(--spacing-l) - .25rem)}.Modal-module_modalPaddingMEGA__wWHwS{padding:calc(var(--spacing-mega) - .25rem)}.Modal-module_modalNoPaddingTop__REBWr{padding-top:0}.Modal-module_closeButton__jgbDq{margin:var(--spacing-s);position:absolute;right:0;top:0}.Modal-module_closeButton__jgbDq:not(:active)>svg{fill:var(--palette-graphite-100)}.Modal-module_srOnly__W8dQv{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
+html:has(dialog[open]){overflow:hidden}.Modal-module_modal__Kyr-Y{--ds-modal-footer-height:0px;background-color:var(--palette-graphite-0);border:.25rem solid var(--theme-primary);box-shadow:0 0 8px 2px rgba(0,0,0,.16),0 2px 4px -4px rgba(0,0,0,.16);box-sizing:border-box;font-size:var(--font-size-m);font-weight:var(--font-weight-regular);line-height:var(--semantic-line-height-article);max-height:calc(100dvh - var(--spacing-m)*2);max-width:calc(var(--semantic-responsive-article) - var(--spacing-m)*2);min-width:calc(300px - var(--spacing-m)*2);overflow-y:auto;padding:0;padding-bottom:calc(env(safe-area-inset-bottom, 0px) + var(--ds-modal-footer-height));position:fixed}@supports not (height:100dvh){.Modal-module_modal__Kyr-Y{max-height:calc(100vh - var(--spacing-m)*2)}}.Modal-module_modal__Kyr-Y::backdrop{background:hsla(0,0%,100%,.8)}.Modal-module_modalContainer__muf75{outline:none}.Modal-module_modalHeading__uwT1R{padding-right:var(--spacing-xl)}.Modal-module_modalHeadingNoPadding__t2hkH{padding-right:0}.Modal-module_modalIllustration__jbA32{margin-bottom:var(--spacing-m);width:100%}.Modal-module_modal__Kyr-Y[data-variant=plain]{border:none}.Modal-module_modalPaddingNONE__02HaX{padding:0}.Modal-module_modalPaddingS__O93ax{padding:calc(var(--spacing-s) - .25rem)}.Modal-module_modalPaddingM__c5Wi2{padding:calc(var(--spacing-m) - .25rem)}.Modal-module_modalPaddingL__IbVyg{padding:calc(var(--spacing-l) - .25rem)}.Modal-module_modalPaddingMEGA__wWHwS{padding:calc(var(--spacing-mega) - .25rem)}.Modal-module_modalNoPaddingTop__REBWr{padding-top:0}.Modal-module_closeButton__jgbDq{margin:var(--spacing-s);position:absolute;right:0;top:0}.Modal-module_closeButton__jgbDq:not(:active)>svg{fill:var(--palette-graphite-100)}.Modal-module_srOnly__W8dQv{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

package/Popover/defaults.esm.js

@@ -1,5 +1,6 @@
 const getPopoverColorDefault = ()=>'forest';
 const getPopoverPositionDefault = ()=>'bottomStart';
 const getPopoverRestoreFocusDefault = ()=>true;
+const getPopoverContentAsDefault = ()=>'div';
 
-export { getPopoverColorDefault, getPopoverPositionDefault, getPopoverRestoreFocusDefault };
+export { getPopoverColorDefault, getPopoverContentAsDefault, getPopoverPositionDefault, getPopoverRestoreFocusDefault };

package/Popover/index.esm.js

@@ -3,7 +3,7 @@ import { useRef, useState, useEffect, useMemo } from 'react';
 import { useFloating, offset, flip, shift, arrow, autoUpdate, useDismiss, useInteractions } from '@floating-ui/react';
 import { useMediaQuery } from '@skatteetaten/ds-core-utils';
 import { getPopoverPositionDefault } from './defaults.esm.js';
-export { getPopoverColorDefault, getPopoverRestoreFocusDefault } from './defaults.esm.js';
+export { getPopoverColorDefault, getPopoverContentAsDefault, getPopoverRestoreFocusDefault } from './defaults.esm.js';
 import { PopoverContent } from '../PopoverContent/index.esm.js';
 import { PopoverContext } from '../PopoverContext/index.esm.js';
 import { PopoverTrigger } from '../PopoverTrigger/index.esm.js';

package/PopoverContent/index.esm.js

@@ -5,13 +5,13 @@ import { useMergeRefs } from '@floating-ui/react';
 import { IconButton } from '@skatteetaten/ds-buttons';
 import { dsI18n, getCommonClassNameDefault } from '@skatteetaten/ds-core-utils';
 import { CancelSVGpath } from '@skatteetaten/ds-icons';
-import { getPopoverColorDefault, getPopoverRestoreFocusDefault } from '../Popover/defaults.esm.js';
+import { getPopoverColorDefault, getPopoverRestoreFocusDefault, getPopoverContentAsDefault } from '../Popover/defaults.esm.js';
 import { PopoverContext } from '../PopoverContext/index.esm.js';
 import styles from './PopoverContent.module.scss.esm.js';
 import './styles.css';
 
 
-/* eslint-disable react/forbid-dom-props */ const PopoverContent = ({ ref, id, className = getCommonClassNameDefault(), lang, 'data-testid': dataTestId, children })=>{
+const PopoverContent = ({ ref, id, className = getCommonClassNameDefault(), classNames, lang, 'data-testid': dataTestId, as: Tag = getPopoverContentAsDefault(), children })=>{
     const { floatingData, interactions, arrowRef, isOpen, setIsOpen, color = getPopoverColorDefault(), shouldRestoreFocus = getPopoverRestoreFocusDefault(), onClose } = useContext(PopoverContext);
     const { refs, floatingStyles, placement, middlewareData } = floatingData;
     const { getFloatingProps } = interactions;
@@ -34,24 +34,25 @@ import './styles.css';
     if (!isOpen) {
         return null;
     }
-    return /*#__PURE__*/ jsxs("div", {
+    return /*#__PURE__*/ jsxs(Tag, {
         ...getFloatingProps(),
         ref: mergedRef,
+        // eslint-disable-next-line react/forbid-component-props
         style: floatingStyles,
         id: id,
         lang: lang,
         "data-testid": dataTestId,
         className: `${styles.popover} ${colorClassName} ${className}`.trim(),
         children: [
-            /*#__PURE__*/ jsxs("div", {
+            /*#__PURE__*/ jsxs(Tag, {
                 className: styles.popoverContent,
                 children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: styles.popoverContentWrapper,
+                    /*#__PURE__*/ jsx(Tag, {
+                        className: `${styles.popoverContentWrapper} ${classNames?.contentWrapper ?? ''}`.trim(),
                         children: children
                     }),
                     /*#__PURE__*/ jsx(IconButton, {
-                        className: styles.popoverContentCloseButton,
+                        className: `${styles.popoverContentCloseButton} ${classNames?.closeButton ?? ''}`.trim(),
                         svgPath: CancelSVGpath,
                         title: t('shared.Close'),
                         onClick: ()=>{
@@ -64,8 +65,9 @@ import './styles.css';
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx("div", {
+            /*#__PURE__*/ jsx(Tag, {
                 ref: arrowRef,
+                // eslint-disable-next-line react/forbid-component-props
                 style: {
                     left: middlewareData.arrow?.x,
                     top: middlewareData.arrow?.y,

package/README.md

@@ -15,3 +15,6 @@ npm i @skatteetaten/ds-overlays
 ## Innhold
 
 - Modal
+- Popover
+- RolePicker
+- WordInfo

package/RolePicker/index.esm.js

@@ -37,6 +37,10 @@ const RolePicker = ({ ref, id, className = getCommonClassNameDefault(), lang, 'd
         setLoadingEntityId(undefined);
         onClose?.();
     };
+    const handleCancel = ()=>{
+        modalRef.current?.close();
+        handleClose();
+    };
     const getRepresentationText = ()=>{
         if (people && people.total > 0 && businesses && businesses.total > 0) {
             return /*#__PURE__*/ jsxs(Paragraph, {
@@ -173,7 +177,7 @@ const RolePicker = ({ ref, id, className = getCommonClassNameDefault(), lang, 'd
                                 }),
                                 !hideCloseButton ? /*#__PURE__*/ jsx(Button, {
                                     variant: 'secondary',
-                                    onClick: ()=>modalRef.current?.close(),
+                                    onClick: handleCancel,
                                     children: t('rolepicker.Cancel')
                                 }) : null
                             ]

package/WordInfo/defaults.esm.js

@@ -0,0 +1,3 @@
+const getWordInfoHasIconDefault = ()=>true;
+
+export { getWordInfoHasIconDefault };

package/WordInfo/index.d.ts

@@ -0,0 +1 @@
+export * from "./src/WordInfo/WordInfo";

package/WordInfo/index.esm.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+export { getWordInfoHasIconDefault } from './defaults.esm.js';
+import { Popover } from '../Popover/index.esm.js';
+import { WordInfoContent } from '../WordInfoContent/index.esm.js';
+import { WordInfoTrigger } from '../WordInfoTrigger/index.esm.js';
+
+const WordInfo = (props)=>{
+    return /*#__PURE__*/ jsx(Popover, {
+        ...props
+    });
+};
+WordInfo.displayName = 'WordInfo';
+WordInfo.Content = WordInfoContent;
+WordInfo.Content.displayName = 'WordInfo.Content';
+WordInfo.Trigger = WordInfoTrigger;
+WordInfo.Trigger.displayName = 'WordInfo.Trigger';
+
+export { WordInfo };

package/WordInfoContent/WordInfoContent.module.scss.esm.js

@@ -0,0 +1,7 @@
+var styles = {
+    "wordInfoContent": "WordInfoContent-module_wordInfoContent__KyB0L",
+    "contentWrapper": "WordInfoContent-module_contentWrapper__-GbIP",
+    "closeButton": "WordInfoContent-module_closeButton__qGgbC"
+};
+
+export { styles as default };

package/WordInfoContent/index.d.ts

@@ -0,0 +1 @@
+export * from "./src/WordInfoContent/WordInfoContent";

package/WordInfoContent/index.esm.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { getCommonClassNameDefault } from '@skatteetaten/ds-core-utils';
+import { PopoverContent } from '../PopoverContent/index.esm.js';
+import styles from './WordInfoContent.module.scss.esm.js';
+import './styles.css';
+
+
+const WordInfoContent = ({ ref, id, className = getCommonClassNameDefault(), lang, 'data-testid': dataTestId, children })=>{
+    return /*#__PURE__*/ jsx(PopoverContent, {
+        ref: ref,
+        id: id,
+        className: `${styles.wordInfoContent} ${className}`.trim(),
+        classNames: {
+            contentWrapper: styles.contentWrapper,
+            closeButton: styles.closeButton
+        },
+        lang: lang,
+        "data-testid": dataTestId,
+        as: 'span',
+        children: children
+    });
+};
+WordInfoContent.displayName = 'WordInfoContent';
+
+export { WordInfoContent };

package/WordInfoContent/styles.css

@@ -0,0 +1 @@
+.WordInfoContent-module_wordInfoContent__KyB0L{--background-color:var(--palette-denim-10);--border-color:var(--palette-denim-100)}.WordInfoContent-module_contentWrapper__-GbIP{padding:.5625rem var(--spacing-s)}.WordInfoContent-module_closeButton__qGgbC{margin:var(--spacing-xs)}

package/WordInfoTrigger/WordInfoTrigger.module.scss.esm.js

@@ -0,0 +1,7 @@
+var styles = {
+    "wordInfoTrigger": "WordInfoTrigger-module_wordInfoTrigger__Ef023",
+    "icon": "WordInfoTrigger-module_icon__Q789Z",
+    "srOnly": "WordInfoTrigger-module_srOnly__FR7qs"
+};
+
+export { styles as default };

package/WordInfoTrigger/index.d.ts

@@ -0,0 +1 @@
+export * from "./src/WordInfoTrigger/WordInfoTrigger";

package/WordInfoTrigger/index.esm.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMergeRefs } from '@floating-ui/react';
+import { dsI18n, getCommonClassNameDefault } from '@skatteetaten/ds-core-utils';
+import { BookOpenIcon } from '@skatteetaten/ds-icons';
+import { PopoverContext } from '../PopoverContext/index.esm.js';
+import styles from './WordInfoTrigger.module.scss.esm.js';
+import './styles.css';
+
+
+const WordInfoTrigger = ({ ref, id, className = getCommonClassNameDefault(), lang, 'data-testid': dataTestId, hasIcon = true, children, onClick })=>{
+    const { floatingData, setIsOpen, isOpen } = useContext(PopoverContext);
+    const { setReference } = floatingData.refs;
+    const mergedRef = useMergeRefs([
+        setReference,
+        ref
+    ]);
+    const { t } = useTranslation('ds_overlays', {
+        i18n: dsI18n
+    });
+    return /*#__PURE__*/ jsxs("button", {
+        ref: mergedRef,
+        id: id,
+        className: `${styles.wordInfoTrigger} ${className}`.trim(),
+        lang: lang,
+        "data-testid": dataTestId,
+        "aria-expanded": isOpen,
+        onClick: (event)=>{
+            onClick?.(event);
+            setIsOpen(!isOpen);
+        },
+        children: [
+            children,
+            /*#__PURE__*/ jsxs("span", {
+                className: styles.srOnly,
+                children: [
+                    " ",
+                    t('wordinfo.WordExplanation')
+                ]
+            }),
+            hasIcon && /*#__PURE__*/ jsx(BookOpenIcon, {
+                className: styles.icon
+            })
+        ]
+    });
+};
+WordInfoTrigger.displayName = 'WordInfoTrigger';
+
+export { WordInfoTrigger };

package/WordInfoTrigger/styles.css

@@ -0,0 +1 @@
+html:has(dialog[open]){overflow:hidden}.WordInfoTrigger-module_wordInfoTrigger__Ef023{background:none;border:none;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;line-height:inherit;padding:0;position:relative;text-decoration-line:underline;text-decoration-style:dotted;text-decoration-thickness:2px;text-underline-offset:3px}.WordInfoTrigger-module_wordInfoTrigger__Ef023 .WordInfoTrigger-module_icon__Q789Z{fill:var(--semantic-interactive-main);height:var(--size-extra-small);margin-left:2px;min-width:var(--size-extra-small);vertical-align:top!important;width:var(--size-extra-small)}.WordInfoTrigger-module_wordInfoTrigger__Ef023:hover{background-color:var(--semantic-interactive-background);text-decoration:none}.WordInfoTrigger-module_wordInfoTrigger__Ef023:focus-visible{outline:2px solid var(--semantic-interactive-main);text-decoration:none}.WordInfoTrigger-module_wordInfoTrigger__Ef023:active{background-color:var(--semantic-interactive-main);color:var(--palette-graphite-0);text-decoration:none}.WordInfoTrigger-module_wordInfoTrigger__Ef023:active .WordInfoTrigger-module_icon__Q789Z{fill:var(--palette-graphite-0)}.WordInfoTrigger-module_srOnly__FR7qs{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

package/index.esm.js

@@ -3,6 +3,8 @@ export { modalPaddingArr, modalVariantArr } from './Modal/Modal.types.esm.js';
 export { Popover } from './Popover/index.esm.js';
 export { popoverColorArr } from './Popover/Popover.types.esm.js';
 export { RolePicker } from './RolePicker/index.esm.js';
+export { WordInfo } from './WordInfo/index.esm.js';
 export { getModalDismissOnEscDefault, getModalDismissOnOutsideClickDefault, getModalPaddingDefault, getModalVariantDefault } from './Modal/defaults.esm.js';
-export { getPopoverColorDefault, getPopoverPositionDefault, getPopoverRestoreFocusDefault } from './Popover/defaults.esm.js';
+export { getPopoverColorDefault, getPopoverContentAsDefault, getPopoverPositionDefault, getPopoverRestoreFocusDefault } from './Popover/defaults.esm.js';
 export { getRolePickerHideCloseButtonDefault, getRolePickerMinimumEntitiesForSearchDefault, getRolePickerShowDeceasedPeopleDefault, getRolePickerShowInactiveBusinessesDefault, getRolePickerShowSubunitsDefault } from './RolePicker/defaults.esm.js';
+export { getWordInfoHasIconDefault } from './WordInfo/defaults.esm.js';

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@skatteetaten/ds-overlays",
   "groupId": "no.skatteetaten.aurora",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "main": "./index.esm.js",
   "type": "module",
   "module": "./index.esm.js",
-  "types": "./index.esm.d.ts",
+  "types": "./index.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Skatteetaten/designsystemet.git"
@@ -16,16 +16,16 @@
     "i18next": "^24 || ^25",
     "react": "^19 ",
     "react-i18next": "^15",
-    "@skatteetaten/ds-core-utils": "2.2.2",
-    "@skatteetaten/ds-buttons": "2.2.2",
-    "@skatteetaten/ds-forms": "2.2.2",
-    "@skatteetaten/ds-icons": "2.2.2",
-    "@skatteetaten/ds-navigation": "2.2.2",
-    "@skatteetaten/ds-typography": "2.2.2",
-    "@skatteetaten/ds-progress": "2.2.2",
-    "@skatteetaten/ds-status": "2.2.2",
+    "@skatteetaten/ds-core-utils": "2.3.0",
+    "@skatteetaten/ds-buttons": "2.3.0",
+    "@skatteetaten/ds-forms": "2.3.0",
+    "@skatteetaten/ds-icons": "2.3.0",
+    "@skatteetaten/ds-navigation": "2.3.0",
+    "@skatteetaten/ds-typography": "2.3.0",
+    "@skatteetaten/ds-progress": "2.3.0",
+    "@skatteetaten/ds-status": "2.3.0",
     "date-fns": "^4",
-    "@skatteetaten/ds-content": "2.2.2",
+    "@skatteetaten/ds-content": "2.3.0",
     "@floating-ui/react": "0.26.28"
   },
   "dependencies": {},

package/src/Popover/Popover.d.ts

@@ -1,4 +1,4 @@
-import { getPopoverColorDefault, getPopoverPositionDefault, getPopoverRestoreFocusDefault } from './defaults';
+import { getPopoverColorDefault, getPopoverContentAsDefault, getPopoverPositionDefault, getPopoverRestoreFocusDefault } from './defaults';
 import { PopoverComponent } from './Popover.types';
 export declare const Popover: PopoverComponent;
-export { getPopoverColorDefault, getPopoverPositionDefault, getPopoverRestoreFocusDefault, };
+export { getPopoverColorDefault, getPopoverPositionDefault, getPopoverRestoreFocusDefault, getPopoverContentAsDefault, };

package/src/Popover/Popover.types.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, FunctionComponent, MutableRefObject, ReactNode, SetStateAction } from 'react';
+import { Dispatch, FunctionComponent, RefObject, ReactNode, SetStateAction } from 'react';
 import { UseFloatingReturn, useInteractions } from '@floating-ui/react';
 import { positionArr } from '@skatteetaten/ds-core-utils';
 import { PopoverContent } from '../PopoverContent/PopoverContent';
@@ -17,7 +17,7 @@ export interface PopoverProps {
     disableAutoDismissOnMobile?: boolean;
     /** Om Popover er synlig */
     isOpen?: boolean;
-    /** Om focus skal settes tilbake til trigger ved bruk av lukkekrysset. */
+    /** Om fokus skal settes tilbake til trigger ved bruk av lukkekrysset. Hvis denne settes til false, så må fokus håndteres manuelt. */
     shouldRestoreFocus?: boolean;
     /** Callback når Popover lukkes */
     onClose?: () => void;
@@ -29,7 +29,7 @@ export interface PopoverComponent extends FunctionComponent<PopoverProps> {
     Trigger: typeof PopoverTrigger;
 }
 export interface PopoverContextProps extends Exclude<PopoverProps, 'children'> {
-    arrowRef: MutableRefObject<HTMLDivElement | null>;
+    arrowRef: RefObject<HTMLDivElement | null>;
     floatingData: UseFloatingReturn<HTMLButtonElement>;
     interactions: ReturnType<typeof useInteractions>;
     isOpen: boolean;

package/src/Popover/defaults.d.ts

@@ -1,4 +1,6 @@
 import { PopoverPosition, PopoverColor } from './Popover.types';
+import { PopoverContentAs } from '../PopoverContent/PopoverContent.types';
 export declare const getPopoverColorDefault: () => PopoverColor;
 export declare const getPopoverPositionDefault: () => PopoverPosition;
 export declare const getPopoverRestoreFocusDefault: () => boolean;
+export declare const getPopoverContentAsDefault: () => PopoverContentAs;

package/src/PopoverContent/PopoverContent.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
 import { PopoverContentProps } from './PopoverContent.types';
 export declare const PopoverContent: {
-    ({ ref, id, className, lang, "data-testid": dataTestId, children, }: PopoverContentProps): JSX.Element | null;
+    ({ ref, id, className, classNames, lang, "data-testid": dataTestId, as: Tag, children, }: PopoverContentProps): JSX.Element | null;
     displayName: string;
 };

package/src/PopoverContent/PopoverContent.types.d.ts

@@ -1,9 +1,20 @@
 import { ReactNode, Ref } from 'react';
 import { BaseProps } from '@skatteetaten/ds-core-utils';
 export declare const popoverPositionArr: readonly ["top-start", "top-end", "bottom-start", "bottom-end"];
+export declare const popoverContentAsArr: readonly ["div", "span"];
+export type PopoverContentAs = (typeof popoverContentAsArr)[number];
 export type PopoverPosition = (typeof popoverPositionArr)[number];
 export interface PopoverContentProps extends BaseProps {
     ref?: Ref<HTMLDivElement>;
-    /** Tekst */
+    classNames?: {
+        contentWrapper?: string;
+        closeButton?: string;
+    };
+    /**
+     * Innhold i popup-boksen. NB! Hvis as-prop er satt til span, må innholdet være en string eller et HTML-element som er tillatt i en span.
+     * Finn ut hvilke elementer som er tillatt i en span: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Content_categories#phrasing_content}.
+     */
     children: ReactNode;
+    /** HTML-element til innholdet. */
+    as?: PopoverContentAs;
 }

package/src/WordInfo/WordInfo.d.ts

@@ -0,0 +1,4 @@
+import { getWordInfoHasIconDefault } from './defaults';
+import { WordInfoComponent } from './WordInfo.types';
+export declare const WordInfo: WordInfoComponent;
+export { getWordInfoHasIconDefault };

package/src/WordInfo/WordInfo.types.d.ts

@@ -0,0 +1,18 @@
+import { FunctionComponent, ReactNode } from 'react';
+import { PopoverPosition, PopoverProps } from '../Popover/Popover.types';
+import { WordInfoContent } from '../WordInfoContent/WordInfoContent';
+import { WordInfoTrigger } from '../WordInfoTrigger/WordInfoTrigger';
+export interface WordInfoProps extends Omit<PopoverProps, 'color' | 'disableAutoDismissOnMobile'> {
+    /** Om popup-boksen er synlig */
+    isOpen?: boolean;
+    /** Callback når popup-boksen lukkes */
+    onClose?: () => void;
+    /** Plassering av popup-boksen i forhold til teksten */
+    position?: PopoverPosition;
+    /** WordInfo.Trigger og WordInfo.Content */
+    children?: ReactNode;
+}
+export interface WordInfoComponent extends FunctionComponent<WordInfoProps> {
+    Content: typeof WordInfoContent;
+    Trigger: typeof WordInfoTrigger;
+}

package/src/WordInfo/defaults.d.ts

@@ -0,0 +1 @@
+export declare const getWordInfoHasIconDefault: () => boolean;

package/src/WordInfoContent/WordInfoContent.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { WordInfoContentProps } from './WordInfoContent.types';
+export declare const WordInfoContent: {
+    ({ ref, id, className, lang, "data-testid": dataTestId, children, }: WordInfoContentProps): JSX.Element | null;
+    displayName: string;
+};

package/src/WordInfoContent/WordInfoContent.types.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode, Ref } from 'react';
+import { BaseProps } from '@skatteetaten/ds-core-utils';
+export interface WordInfoContentProps extends BaseProps {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Innhold i popup-boksen. Må være string eller et HTML-element som er tillatt i en span.
+     * Finn ut hvilke elementer som er tillatt i en span: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Content_categories#phrasing_content}.
+     */
+    children: ReactNode;
+}

package/src/WordInfoTrigger/WordInfoTrigger.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { WordInfoTriggerProps } from './WordInfoTrigger.types';
+export declare const WordInfoTrigger: {
+    ({ ref, id, className, lang, "data-testid": dataTestId, hasIcon, children, onClick, }: WordInfoTriggerProps): JSX.Element;
+    displayName: string;
+};

package/src/WordInfoTrigger/WordInfoTrigger.types.d.ts

@@ -0,0 +1,14 @@
+import { Ref } from 'react';
+import { ButtonProps } from '@skatteetaten/ds-buttons';
+import { BaseProps } from '@skatteetaten/ds-core-utils';
+type PropsFromButton = Pick<ButtonProps, 'onClick'>;
+type WordInfoTriggerCommonProps = BaseProps & {
+    ref?: Ref<HTMLButtonElement>;
+    /** Om bok-ikonet er synlig */
+    hasIcon?: boolean;
+    /** Tekst som trenger ordforklaring */
+    children: string;
+};
+export interface WordInfoTriggerProps extends WordInfoTriggerCommonProps, Partial<PropsFromButton> {
+}
+export {};

package/src/index.d.ts

@@ -4,3 +4,5 @@ export * from './Popover/Popover';
 export * from './Popover/Popover.types';
 export * from './RolePicker/RolePicker';
 export * from './RolePicker/RolePicker.types';
+export * from './WordInfo/WordInfo';
+export * from './WordInfo/WordInfo.types';