@norges-domstoler/dds-components 4.0.2 → 4.1.0

package/dist/components/List/List.tokens.js

@@ -0,0 +1,37 @@
+import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
+
+var Spacing = ddsBaseTokens.spacing,
+    FontPackages = ddsBaseTokens.fontPackages;
+var textDefault = ddsReferenceTokens.textDefault;
+var inheritBase = {
+  font: 'inherit'
+};
+var bodySans01Base = Object.assign({}, FontPackages.body_sans_01.base);
+var bodySans02Base = Object.assign({}, FontPackages.body_sans_02.base);
+var bodySans03Base = Object.assign({}, FontPackages.body_sans_03.base);
+var bodySans04Base = Object.assign({}, FontPackages.body_sans_04.base);
+var bodySerif01Base = Object.assign({}, FontPackages.body_serif_01.base);
+var bodySerif02Base = Object.assign({}, FontPackages.body_serif_02.base);
+var bodySerif03Base = Object.assign({}, FontPackages.body_serif_03.base);
+var bodySerif04Base = Object.assign({}, FontPackages.body_serif_04.base);
+var base = {
+  margin: "".concat(Spacing.SizesDdsSpacingLocalX1, " 0"),
+  color: textDefault.textColor
+};
+var listTokens = {
+  base: base,
+  spaceLeft: Spacing.SizesDdsSpacingLocalX2,
+  sizes: {
+    bodySans01: bodySans01Base,
+    bodySans02: bodySans02Base,
+    bodySans03: bodySans03Base,
+    bodySans04: bodySans04Base,
+    bodySerif01: bodySerif01Base,
+    bodySerif02: bodySerif02Base,
+    bodySerif03: bodySerif03Base,
+    bodySerif04: bodySerif04Base,
+    inherit: inheritBase
+  }
+};
+
+export { listTokens };

package/dist/components/List/ListItem.js

@@ -0,0 +1,22 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { listItemTokens } from './ListItem.tokens.js';
+
+var StyledListItem = styled.li.withConfig({
+  displayName: "ListItem__StyledListItem",
+  componentId: "sc-17s9l0b-0"
+})(["", ""], listItemTokens.base);
+var ListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      rest = __rest(_a, ["children"]);
+
+  return jsx(StyledListItem, Object.assign({
+    ref: ref
+  }, rest, {
+    children: children
+  }));
+});
+
+export { ListItem };

package/dist/components/List/ListItem.tokens.js

@@ -0,0 +1,12 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var Spacing = ddsBaseTokens.spacing;
+var base = {
+  lineHeight: '2.5em'
+};
+var listItemTokens = {
+  base: base,
+  bulletSpacing: Spacing.SizesDdsSpacingLocalX025
+};
+
+export { listItemTokens };

package/dist/components/LocalMessage/LocalMessage.js

@@ -0,0 +1,124 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import styled, { css } from 'styled-components';
+import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
+import { forwardRef, useState } from 'react';
+import { localMessageTokens } from './LocalMessage.tokens.js';
+import { typographyTokens } from '../Typography/Typography.tokens.js';
+import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { Typography } from '../Typography/Typography.js';
+import { Button } from '../Button/Button.js';
+
+var Container = styled.div.withConfig({
+  displayName: "LocalMessage__Container",
+  componentId: "sc-kmfp8w-0"
+})(["display:flex;flex-direction:", ";box-sizing:border-box;", ";*::selection{", "}", " width:", ";"], function (_ref) {
+  var layout = _ref.layout;
+  return layout === 'vertical' ? 'column' : 'row';
+}, function (_ref2) {
+  var layout = _ref2.layout;
+  return layout === 'horisontal' && css(["align-items:center;justify-content:space-between;"]);
+}, typographyTokens.selection.base, function (_ref3) {
+  var purpose = _ref3.purpose;
+  return purpose && css(["", " ", ""], localMessageTokens.container.base, localMessageTokens.container[purpose].base);
+}, function (_ref4) {
+  var width = _ref4.width;
+  return width;
+});
+var MessageIconWrapper = styled(IconWrapper).withConfig({
+  displayName: "LocalMessage__MessageIconWrapper",
+  componentId: "sc-kmfp8w-1"
+})(["margin-right:", ";"], localMessageTokens.icon.marginRight);
+var ContentContainer = styled.div.withConfig({
+  displayName: "LocalMessage__ContentContainer",
+  componentId: "sc-kmfp8w-2"
+})(["", " ", " ", ""], localMessageTokens.contentContainer.base, function (_ref5) {
+  var layout = _ref5.layout;
+  return layout === 'vertical' ? css(["", ""], localMessageTokens.contentContainer.vertical.base) : css(["display:flex;align-items:center;"]);
+}, function (_ref6) {
+  var closable = _ref6.closable;
+  return closable && css(["", ""], localMessageTokens.contentContainer.withClosable.base);
+});
+var TopContainer = styled.div.withConfig({
+  displayName: "LocalMessage__TopContainer",
+  componentId: "sc-kmfp8w-3"
+})(["width:100%;display:flex;justify-content:space-between;align-items:center;", " ", ""], localMessageTokens.topContainer.base, function (_ref7) {
+  var closable = _ref7.closable;
+  return closable && css(["", ""], localMessageTokens.topContainer.withClosable.base);
+});
+var LocalMessage = /*#__PURE__*/forwardRef(function (props, ref) {
+  var message = props.message,
+      _props$purpose = props.purpose,
+      purpose = _props$purpose === void 0 ? 'info' : _props$purpose,
+      closable = props.closable,
+      onClose = props.onClose,
+      _props$width = props.width,
+      width = _props$width === void 0 ? localMessageTokens.container.defaultWidth : _props$width,
+      _props$layout = props.layout,
+      layout = _props$layout === void 0 ? 'horisontal' : _props$layout,
+      children = props.children,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["message", "purpose", "closable", "onClose", "width", "layout", "children", "id", "className", "htmlProps"]);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isClosed = _useState2[0],
+      setClosed = _useState2[1];
+
+  var buttonPurpose = localMessageTokens.button[purpose].purpose;
+  var containerProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    purpose: purpose,
+    width: width,
+    layout: layout,
+    ref: ref
+  });
+  var contentContainerProps = {
+    layout: layout,
+    closable: closable
+  };
+
+  var messageIconWrapper = jsx(MessageIconWrapper, {
+    Icon: localMessageTokens.icon[purpose].icon,
+    color: localMessageTokens.icon[purpose].color
+  });
+
+  var content = children !== null && children !== void 0 ? children : jsx(Typography, Object.assign({
+    as: "span"
+  }, {
+    children: message
+  }));
+
+  var closeButton = closable && jsx(Button, {
+    Icon: CloseOutlinedIcon,
+    purpose: buttonPurpose,
+    appearance: "borderless",
+    onClick: function onClick() {
+      setClosed(true);
+      onClose && onClose();
+    },
+    size: "small",
+    "aria-label": "Lukk melding"
+  });
+
+  return !isClosed ? jsx(Container, Object.assign({}, containerProps, {
+    children: layout === 'horisontal' ? jsxs(Fragment, {
+      children: [jsxs(ContentContainer, Object.assign({}, contentContainerProps, {
+        children: [messageIconWrapper, " ", content]
+      })), closeButton]
+    }) : jsxs(Fragment, {
+      children: [jsxs(TopContainer, Object.assign({
+        closable: closable
+      }, {
+        children: [messageIconWrapper, " ", closeButton]
+      })), jsx(ContentContainer, Object.assign({}, contentContainerProps, {
+        children: content
+      }))]
+    })
+  })) : null;
+});
+
+export { LocalMessage };

package/dist/components/LocalMessage/LocalMessage.tokens.js

@@ -0,0 +1,151 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
+import WarningOutlinedIcon from '@mui/icons-material/ReportOutlined';
+import DangerOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import EmojiObjectsOutlinedIcon from '@mui/icons-material/EmojiObjectsOutlined';
+
+var Colors = ddsBaseTokens.colors,
+    Spacing = ddsBaseTokens.spacing,
+    FontPackages = ddsBaseTokens.fontPackages,
+    BorderRadius = ddsBaseTokens.borderRadius,
+    Border = ddsBaseTokens.border,
+    OuterShadow = ddsBaseTokens.outerShadow;
+var containerBase = Object.assign(Object.assign({
+  boxShadow: OuterShadow.DdsShadow1Onlight,
+  borderRadius: BorderRadius.RadiiDdsBorderRadius1Radius,
+  border: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " solid"),
+  padding: "0 ".concat(Spacing.SizesDdsSpacingLocalX1)
+}, FontPackages.body_sans_02.base), {
+  color: Colors.DdsColorNeutralsGray8
+});
+var defaultWidth = '400px';
+var contentContainerBase = {
+  paddingRight: Spacing.SizesDdsSpacingLocalX15,
+  paddingTop: Spacing.SizesDdsSpacingLocalX075,
+  paddingBottom: Spacing.SizesDdsSpacingLocalX075
+};
+var contentContainerWithClosableBase = {
+  paddingRight: Spacing.SizesDdsSpacingLocalX075
+};
+var contentContainerVericalBase = {
+  paddingBottom: Spacing.SizesDdsSpacingLocalX15
+};
+var topContainerBase = {
+  paddingTop: Spacing.SizesDdsSpacingLocalX15
+};
+var topContainerWithClosableBase = {
+  paddingTop: Spacing.SizesDdsSpacingLocalX1
+};
+var containerInfoBase = {
+  borderColor: Colors.DdsColorInfoLighter,
+  backgroundColor: Colors.DdsColorInfoLightest
+};
+var containerDangerBase = {
+  borderColor: Colors.DdsColorDangerLighter,
+  backgroundColor: Colors.DdsColorDangerLightest
+};
+var containerWarningBase = {
+  borderColor: Colors.DdsColorWarningLighter,
+  backgroundColor: Colors.DdsColorWarningLightest
+};
+var containerSuccessBase = {
+  borderColor: Colors.DdsColorSuccessLighter,
+  backgroundColor: Colors.DdsColorSuccessLightest
+};
+var containerTipsBase = {
+  borderColor: Colors.DdsColorPrimaryLighter,
+  backgroundColor: Colors.DdsColorPrimaryLightest
+};
+var containerConfidentialBase = {
+  borderColor: Colors.DdsColorDangerBase,
+  backgroundColor: Colors.DdsColorDangerLightest
+};
+var localMessageTokens = {
+  container: {
+    base: containerBase,
+    defaultWidth: defaultWidth,
+    info: {
+      base: containerInfoBase
+    },
+    danger: {
+      base: containerDangerBase
+    },
+    warning: {
+      base: containerWarningBase
+    },
+    success: {
+      base: containerSuccessBase
+    },
+    tips: {
+      base: containerTipsBase
+    },
+    confidential: {
+      base: containerConfidentialBase
+    }
+  },
+  contentContainer: {
+    base: contentContainerBase,
+    withClosable: {
+      base: contentContainerWithClosableBase
+    },
+    vertical: {
+      base: contentContainerVericalBase
+    }
+  },
+  topContainer: {
+    base: topContainerBase,
+    withClosable: {
+      base: topContainerWithClosableBase
+    }
+  },
+  icon: {
+    marginRight: "".concat(Spacing.SizesDdsSpacingLocalX075),
+    info: {
+      icon: InfoOutlinedIcon,
+      color: Colors.DdsColorInfoDarkest
+    },
+    danger: {
+      icon: DangerOutlinedIcon,
+      color: Colors.DdsColorDangerDarkest
+    },
+    warning: {
+      icon: WarningOutlinedIcon,
+      color: Colors.DdsColorWarningDarkest
+    },
+    success: {
+      icon: CheckCircleOutlinedIcon,
+      color: Colors.DdsColorSuccessDarkest
+    },
+    tips: {
+      icon: EmojiObjectsOutlinedIcon,
+      color: Colors.DdsColorPrimaryDarkest
+    },
+    confidential: {
+      icon: DangerOutlinedIcon,
+      color: Colors.DdsColorDangerDarkest
+    }
+  },
+  button: {
+    info: {
+      purpose: 'secondary'
+    },
+    danger: {
+      purpose: 'danger'
+    },
+    warning: {
+      purpose: 'secondary'
+    },
+    success: {
+      purpose: 'secondary'
+    },
+    confidential: {
+      purpose: 'danger'
+    },
+    tips: {
+      purpose: 'secondary'
+    }
+  }
+};
+
+export { localMessageTokens };

package/dist/components/Modal/Modal.js

@@ -0,0 +1,122 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { modalTokens } from './Modal.tokens.js';
+import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
+import { createPortal } from 'react-dom';
+import { useMountTransition } from '../../hooks/useMountTransition.js';
+import { typographyTokens } from '../Typography/Typography.tokens.js';
+import { useFocusTrap } from '../../hooks/useFocusTrap.js';
+import { handleElementWithBackdropMount, handleElementWithBackdropUnmount } from '../../helpers/Backdrop/Backdrop.utils.js';
+import { Backdrop } from '../../helpers/Backdrop/Backdrop.js';
+import { Button } from '../Button/Button.js';
+import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
+import { useOnClickOutside } from '../../hooks/useOnClickOutside.js';
+import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { Typography } from '../Typography/Typography.js';
+
+var Container = styled.div.withConfig({
+  displayName: "Modal__Container",
+  componentId: "sc-12c14zx-0"
+})(["display:flex;flex-direction:column-reverse;box-sizing:border-box;margin:0;min-width:200px;&::selection,*::selection{", "}", " :focus-visible,&.focus-visible{", "}"], typographyTokens.selection.base, modalTokens.base, modalTokens.focus.base);
+var ContentContainer = styled.div.withConfig({
+  displayName: "Modal__ContentContainer",
+  componentId: "sc-12c14zx-1"
+})(["display:grid;", ""], modalTokens.contentContainer.base);
+var HeaderContainer = styled.div.withConfig({
+  displayName: "Modal__HeaderContainer",
+  componentId: "sc-12c14zx-2"
+})([""]);
+var StyledButton = styled(Button).withConfig({
+  displayName: "Modal__StyledButton",
+  componentId: "sc-12c14zx-3"
+})(["align-self:flex-end;"]);
+var nextUniqueId = 0;
+var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$isOpen = props.isOpen,
+      isOpen = _props$isOpen === void 0 ? false : _props$isOpen,
+      _props$parentElement = props.parentElement,
+      parentElement = _props$parentElement === void 0 ? document.body : _props$parentElement,
+      children = props.children,
+      header = props.header,
+      onClose = props.onClose,
+      id = props.id,
+      triggerRef = props.triggerRef,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["isOpen", "parentElement", "children", "header", "onClose", "id", "triggerRef", "className", "htmlProps"]);
+
+  var uniqueId = nextUniqueId++;
+
+  var _useState = useState(id !== null && id !== void 0 ? id : "modal-".concat(uniqueId)),
+      _useState2 = _slicedToArray(_useState, 1),
+      modalId = _useState2[0];
+
+  var headerId = "".concat(modalId, "-header");
+  var modalRef = useFocusTrap(isOpen);
+  var combinedRef = useCombinedRef(ref, modalRef);
+
+  var handleClose = function handleClose() {
+    var _a;
+
+    if (onClose && isOpen) {
+      triggerRef && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+      onClose();
+    }
+  };
+
+  useEffect(function () {
+    if (isOpen) {
+      handleElementWithBackdropMount(document.body);
+    } else {
+      handleElementWithBackdropUnmount(document.body);
+    }
+  }, [isOpen]);
+  useOnClickOutside(modalRef.current, function () {
+    return handleClose();
+  });
+  useOnKeyDown(['Escape', 'Esc'], function () {
+    return handleClose();
+  });
+  var hasTransitionedIn = useMountTransition(isOpen, 200);
+  var backdropProps = {
+    isOpen: hasTransitionedIn && isOpen
+  };
+  var containerProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    ref: combinedRef,
+    role: 'dialog',
+    'aria-modal': true,
+    'aria-hidden': !isOpen,
+    tabIndex: -1,
+    'aria-labelledby': headerId,
+    id: modalId
+  });
+  var headerContainerProps = {
+    id: headerId
+  };
+  return isOpen || hasTransitionedIn ? /*#__PURE__*/createPortal(jsx(Backdrop, Object.assign({}, backdropProps, {
+    children: jsxs(Container, Object.assign({}, containerProps, {
+      children: [jsxs(ContentContainer, {
+        children: [header && jsx(HeaderContainer, Object.assign({}, headerContainerProps, {
+          children: typeof header === 'string' ? jsx(Typography, Object.assign({
+            typographyType: "headingSans03"
+          }, {
+            children: header
+          })) : header
+        })), children]
+      }), onClose && jsx(StyledButton, {
+        size: "small",
+        appearance: "borderless",
+        purpose: "secondary",
+        Icon: CloseOutlinedIcon,
+        onClick: handleClose,
+        "aria-label": "Lukk dialog"
+      })]
+    }))
+  })), parentElement) : null;
+});
+
+export { Modal };

package/dist/components/Modal/Modal.tokens.js

@@ -0,0 +1,45 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+import { focusVisible } from '../../helpers/styling/focusVisible.js';
+
+var BorderRadius = ddsBaseTokens.borderRadius,
+    Colors = ddsBaseTokens.colors,
+    OuterShadow = ddsBaseTokens.outerShadow,
+    Spacing = ddsBaseTokens.spacing;
+var base = {
+  backgroundColor: Colors.DdsColorNeutralsWhite,
+  boxShadow: OuterShadow.DdsShadow4Onlight,
+  borderRadius: BorderRadius.RadiiDdsBorderRadius1Radius,
+  padding: "".concat(Spacing.SizesDdsSpacingLocalX1, " ").concat(Spacing.SizesDdsSpacingLocalX1, " ").concat(Spacing.SizesDdsSpacingLocalX15, " ").concat(Spacing.SizesDdsSpacingLocalX15)
+};
+var contentContainerBase = {
+  paddingRight: Spacing.SizesDdsSpacingLocalX1,
+  gap: Spacing.SizesDdsSpacingLocalX1
+};
+var actionsContainerBase = {
+  gap: Spacing.SizesDdsSpacingLocalX1
+};
+var focusBase = Object.assign({}, focusVisible);
+var bodyScrollableBase = {
+  overflowY: 'auto'
+};
+var bodyScrollableFocusBase = Object.assign({}, focusVisible);
+var modalTokens = {
+  base: base,
+  focus: {
+    base: focusBase
+  },
+  contentContainer: {
+    base: contentContainerBase
+  },
+  actionsContainer: {
+    base: actionsContainerBase
+  },
+  bodyScrollable: {
+    base: bodyScrollableBase,
+    focus: {
+      base: bodyScrollableFocusBase
+    }
+  }
+};
+
+export { modalTokens };

package/dist/components/Modal/ModalActions.js

@@ -0,0 +1,23 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { modalTokens } from './Modal.tokens.js';
+
+var Container = styled.div.withConfig({
+  displayName: "ModalActions__Container",
+  componentId: "sc-ehph9l-0"
+})(["display:flex;flex-wrap:wrap;", ""], modalTokens.actionsContainer.base);
+var ModalActions = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      rest = __rest(_a, ["children"]);
+
+  var containerProps = Object.assign({
+    ref: ref
+  }, rest);
+  return jsx(Container, Object.assign({}, containerProps, {
+    children: children
+  }));
+});
+
+export { ModalActions };

package/dist/components/Modal/ModalBody.js

@@ -0,0 +1,35 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { modalTokens } from './Modal.tokens.js';
+import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
+import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var Container = styled.div.withConfig({
+  displayName: "ModalBody__Container",
+  componentId: "sc-134o0zg-0"
+})(["", " transition:", ";", ""], scrollbarStyling, focusVisibleTransitionValue, function (_ref) {
+  var scrollable = _ref.scrollable;
+  return scrollable && css(["", " &:focus-visible,&.focus-visible{", "}"], modalTokens.bodyScrollable.base, modalTokens.bodyScrollable.focus.base);
+});
+var ModalBody = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      scrollable = props.scrollable,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["children", "scrollable", "id", "className", "htmlProps"]);
+
+  var containerProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    ref: ref,
+    tabIndex: scrollable ? 0 : undefined,
+    scrollable: scrollable
+  });
+  return jsx(Container, Object.assign({}, containerProps, {
+    children: children
+  }));
+});
+
+export { ModalBody };