@norges-domstoler/dds-components 5.2.0 → 5.3.0

package/README.md

@@ -2,9 +2,9 @@
 
 [![Version](https://img.shields.io/npm/v/@norges-domstoler/dds-components)](https://www.npmjs.com/package/@norges-domstoler/dds-components)
 
-React UI komponenter til bruk i Domstolenes tjenester.
+React UI komponenter til bruk i domstolenes tjenester.
 
-Sjekk ut [Domstolenes designsystem Elsa](https://design.domstol.no/) og [Storybook](https://domstolene.github.io/designsystem) for mer dokumentasjon og demoer.
+Sjekk ut [Elsa - domstolenes designsystem](https://design.domstol.no/) og [ Elsa Storybook](https://domstolene.github.io/designsystem) for mer dokumentasjon og demoer.
 
 ## 📦 Installasjon
 
@@ -40,24 +40,35 @@ Tilgjengelige komponenter:
 - Button
 - Card (inkludert CardAccordion)
 - Checkbox
+- Chip
 - Datepicker
 - DescriptionList
 - Divider
+- Drawer
 - GlobalMessage
-- IconWrapper
+- Icon
+- InputMessage
 - InternaHeader
 - List
 - LocalMessage
+- Modal
+- OverflowMenu
 - Pagination
 - Popover
 - RadioButton
+- Scrollbar
 - Search
 - Select
 - SkipToContent
 - Spinner
 - Table
+- Tabs
+- Tag
 - TextInput
+- ToggleButton
+- Tooltip
 - Typography
+- VisuallyHidden
 
 ## ⏫ Release av ny versjon
 

package/dist/cjs/components/Select/Select.tokens.d.ts

@@ -100,9 +100,6 @@ export declare const selectTokens: {
         hover: {
             base: CSSObject;
         };
-        icon: {
-            base: CSSObject;
-        };
     };
     indicatorsContainer: {
         withLabel: {

package/dist/cjs/icons/tsx/closeSmall.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from '../utils/propTypes';
+export declare function CloseSmallIcon(props: SvgProps): JSX.Element;

package/dist/cjs/icons/tsx/index.d.ts

@@ -28,6 +28,7 @@ export * from './chevronLeft';
 export * from './chevronRight';
 export * from './chevronUp';
 export * from './close';
+export * from './closeSmall';
 export * from './closeCircled';
 export * from './cloud';
 export * from './collapse';

package/dist/cjs/index.js

@@ -1436,6 +1436,26 @@ function CloseIcon(props) {
   }));
 }
 
+function CloseSmallIcon(props) {
+  var title = props.title,
+      rest = tslib.__rest(props, ["title"]);
+
+  return jsxRuntime.jsxs(StyledSvg, Object.assign({
+    width: 24,
+    height: 24,
+    fill: "currentColor"
+  }, rest, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, {
+    children: [title && jsxRuntime.jsx("title", {
+      children: title
+    }), jsxRuntime.jsx("path", {
+      d: "M7.293 8.707l1.414-1.414L12 10.586l3.293-3.293 1.414 1.414L13.414 12l3.293 3.293-1.414 1.414L12 13.414l-3.293 3.293-1.414-1.414L10.586 12 7.293 8.707z"
+    })]
+  }));
+}
+
 function CloseCircledIcon(props) {
   var title = props.title,
       rest = tslib.__rest(props, ["title"]);
@@ -5734,8 +5754,7 @@ var Colors$e = ddsDesignTokens.ddsBaseTokens.colors,
     Spacing$k = ddsDesignTokens.ddsBaseTokens.spacing,
     FontPackages$b = ddsDesignTokens.ddsBaseTokens.fontPackages,
     BorderRadius$5 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-    Border$c = ddsDesignTokens.ddsBaseTokens.border,
-    IconSizes$2 = ddsDesignTokens.ddsBaseTokens.iconSizes;
+    Border$c = ddsDesignTokens.ddsBaseTokens.border;
 var textDefault$4 = ddsDesignTokens.ddsReferenceTokens.textDefault;
 var multiValueContainerMinHeight = "".concat(Spacing$k.SizesDdsSpacingLocalX0125NumberPx * 2 + Spacing$k.SizesDdsSpacingLocalX025NumberPx * 2 + calculateHeightWithLineHeight(FontPackages$b.supportingStyle_inputtext_01.numbers.lineHeightNumber, FontPackages$b.supportingStyle_inputtext_01.numbers.fontSizeNumber), "px"); //custom spacing so that multiselect has same height as single value select
 
@@ -5816,8 +5835,7 @@ var drodownIndicatorReadOnlyBase = {
   color: 'transparent'
 };
 var clearIndicatorBase = {
-  color: Colors$e.DdsColorNeutralsGray6,
-  padding: " 0 ".concat(Spacing$k.SizesDdsSpacingLocalX025, " 0 0")
+  color: Colors$e.DdsColorNeutralsGray6
 };
 var loadingIndicatorBase = {
   color: Colors$e.DdsColorNeutralsGray6,
@@ -5843,13 +5861,11 @@ var optionBase = Object.assign(Object.assign({
   color: textDefault$4.textColor
 });
 var optionHoverBase = {
-  backgroundColor: Colors$e.DdsColorInteractiveLighter
-};
-var optionSelectedBase = Object.assign(Object.assign({
   backgroundColor: Colors$e.DdsColorInteractiveLightest
-}, FontPackages$b.body_sans_02.base), {
-  fontWeight: 600
-});
+};
+var optionSelectedBase = Object.assign({
+  backgroundColor: Colors$e.DdsColorNeutralsWhite
+}, FontPackages$b.body_sans_02.base);
 var noOptionsMessageBase = Object.assign({
   padding: "".concat(Spacing$k.SizesDdsSpacingLocalX05, " ").concat(Spacing$k.SizesDdsSpacingLocalX1),
   color: Colors$e.DdsColorNeutralsGray6
@@ -5874,17 +5890,12 @@ var multiValueLabelBase = Object.assign(Object.assign({
   fontWeight: 'bold'
 });
 var multiValueRemoveBase = {
-  padding: "".concat(Spacing$k.SizesDdsSpacingLocalX025),
   color: Colors$e.DdsColorNeutralsGray9
 };
 var multiValueRemoveHoverBase = {
   color: Colors$e.DdsColorNeutralsWhite,
   backgroundColor: Colors$e.DdsColorInteractiveBase
 };
-var multiValueRemoveIconBase = {
-  height: IconSizes$2.DdsIconsizeSmall,
-  width: IconSizes$2.DdsIconsizeSmall
-};
 var containerDisabledBase = {
   backgroundColor: Colors$e.DdsColorNeutralsGray1,
   borderColor: Colors$e.DdsColorNeutralsGray5
@@ -5993,9 +6004,6 @@ var selectTokens = {
     base: multiValueRemoveBase,
     hover: {
       base: multiValueRemoveHoverBase
-    },
-    icon: {
-      base: multiValueRemoveIconBase
     }
   },
   indicatorsContainer: {
@@ -6122,7 +6130,7 @@ var getCustomStyles = function getCustomStyles() {
           transition: 'color 0.2s, background-color 0.2s'
         }
       }), selectTokens.multiValueRemove.base), {
-        svg: Object.assign({}, selectTokens.multiValueRemove.icon.base),
+        padding: 0,
         '&:hover': Object.assign({}, selectTokens.multiValueRemove.hover.base),
         '&:focus': {
           backgroundColor: 'blue'
@@ -6160,6 +6168,9 @@ var getCustomStyles = function getCustomStyles() {
       return Object.assign(Object.assign({
         display: 'inline-flex'
       }, selectTokens.clearIndicator.base), {
+        '@media (prefers-reduced-motion: no-preference)': {
+          transition: 'color 0.2s'
+        },
         '&:hover': Object.assign({}, selectTokens.clearIndicator.hover.base)
       });
     },
@@ -6172,7 +6183,10 @@ var getCustomStyles = function getCustomStyles() {
 var DdsOption = ReactSelect.components.Option,
     NoOptionsMessage = ReactSelect.components.NoOptionsMessage,
     Input$2 = ReactSelect.components.Input,
-    SingleValue = ReactSelect.components.SingleValue;
+    SingleValue = ReactSelect.components.SingleValue,
+    ClearIndicator = ReactSelect.components.ClearIndicator,
+    DropdownIndicator = ReactSelect.components.DropdownIndicator,
+    MultiValueRemove = ReactSelect.components.MultiValueRemove;
 var createSelectOptions = function createSelectOptions() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
@@ -6190,7 +6204,7 @@ var IconOption = function IconOption(props) {
   return jsxRuntime.jsxs(DdsOption, Object.assign({}, props, {
     children: [props.isSelected && jsxRuntime.jsx(Icon, {
       icon: CheckIcon,
-      iconSize: "inherit"
+      iconSize: "medium"
     }), props.children]
   }));
 };
@@ -6213,6 +6227,33 @@ var NoOptionsMessageCustom = function NoOptionsMessageCustom(props) {
   }));
 };
 
+var CustomClearIndicator = function CustomClearIndicator(props) {
+  return jsxRuntime.jsx(ClearIndicator, Object.assign({}, props, {
+    children: jsxRuntime.jsx(Icon, {
+      icon: CloseSmallIcon,
+      iconSize: "medium"
+    })
+  }));
+};
+
+var CustomMultiValueRemove = function CustomMultiValueRemove(props) {
+  return jsxRuntime.jsx(MultiValueRemove, Object.assign({}, props, {
+    children: jsxRuntime.jsx(Icon, {
+      icon: CloseSmallIcon,
+      iconSize: "medium"
+    })
+  }));
+};
+
+var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
+  return jsxRuntime.jsx(DropdownIndicator, Object.assign({}, props, {
+    children: jsxRuntime.jsx(Icon, {
+      icon: ChevronDownIcon,
+      iconSize: "medium"
+    })
+  }));
+};
+
 function escapeRegexCharacters(text) {
   return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
 }
@@ -6301,7 +6342,10 @@ var SelectInner = function SelectInner(_a, ref) {
       Input: CustomInput,
       SingleValue: customSingleValueElement ? function (props) {
         return CustomSingleValue(props, customSingleValueElement);
-      } : SingleValue
+      } : SingleValue,
+      ClearIndicator: CustomClearIndicator,
+      DropdownIndicator: CustomDropdownIndicator,
+      MultiValueRemove: CustomMultiValueRemove
     },
     'aria-invalid': hasErrorMessage ? true : undefined
   }, rest);
@@ -7453,7 +7497,7 @@ var Container$b = styled__default["default"].div.withConfig({
   componentId: "sc-5ltegq-3"
 })(["display:inline-flex;gap:", ";", ""], paginationTokens.container.spaceBetweenItems, function (_ref2) {
   var smallScreen = _ref2.smallScreen;
-  return smallScreen ? styled.css(["flex-direction:column;align-items:center;"]) : styled.css(["justify-content:space-around;flex-wrap:wrap;"]);
+  return smallScreen ? styled.css(["flex-direction:column;align-items:center;"]) : styled.css(["justify-content:space-between;flex-wrap:wrap;"]);
 });
 var IndicatorsContainer = styled__default["default"].div.withConfig({
   displayName: "Pagination__IndicatorsContainer",
@@ -11064,6 +11108,7 @@ exports.Chip = Chip;
 exports.ChipGroup = ChipGroup;
 exports.CloseCircledIcon = CloseCircledIcon;
 exports.CloseIcon = CloseIcon;
+exports.CloseSmallIcon = CloseSmallIcon;
 exports.CloudIcon = CloudIcon;
 exports.CollapseIcon = CollapseIcon;
 exports.CommentIcon = CommentIcon;

package/dist/components/Pagination/Pagination.js

@@ -36,7 +36,7 @@ var Container = styled.div.withConfig({
   componentId: "sc-5ltegq-3"
 })(["display:inline-flex;gap:", ";", ""], paginationTokens.container.spaceBetweenItems, function (_ref2) {
   var smallScreen = _ref2.smallScreen;
-  return smallScreen ? css(["flex-direction:column;align-items:center;"]) : css(["justify-content:space-around;flex-wrap:wrap;"]);
+  return smallScreen ? css(["flex-direction:column;align-items:center;"]) : css(["justify-content:space-between;flex-wrap:wrap;"]);
 });
 var IndicatorsContainer = styled.div.withConfig({
   displayName: "Pagination__IndicatorsContainer",

package/dist/components/Select/Select.js

@@ -6,6 +6,8 @@ import ReactSelect, { components } from 'react-select';
 import { prefix, getCustomStyles, Wrapper, Container, Label } from './Select.styles.js';
 import { selectTokens } from './Select.tokens.js';
 import { CheckIcon } from '../../icons/tsx/check.js';
+import { CloseSmallIcon } from '../../icons/tsx/closeSmall.js';
+import { ChevronDownIcon } from '../../icons/tsx/chevronDown.js';
 import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
 import { InputMessage } from '../InputMessage/InputMessage.js';
 import { Icon } from '../Icon/Icon.js';
@@ -14,7 +16,10 @@ import { derivativeIdGenerator, spaceSeparatedIdListGenerator } from '../../util
 var DdsOption = components.Option,
     NoOptionsMessage = components.NoOptionsMessage,
     Input = components.Input,
-    SingleValue = components.SingleValue;
+    SingleValue = components.SingleValue,
+    ClearIndicator = components.ClearIndicator,
+    DropdownIndicator = components.DropdownIndicator,
+    MultiValueRemove = components.MultiValueRemove;
 var createSelectOptions = function createSelectOptions() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
@@ -32,7 +37,7 @@ var IconOption = function IconOption(props) {
   return jsxs(DdsOption, Object.assign({}, props, {
     children: [props.isSelected && jsx(Icon, {
       icon: CheckIcon,
-      iconSize: "inherit"
+      iconSize: "medium"
     }), props.children]
   }));
 };
@@ -55,6 +60,33 @@ var NoOptionsMessageCustom = function NoOptionsMessageCustom(props) {
   }));
 };
 
+var CustomClearIndicator = function CustomClearIndicator(props) {
+  return jsx(ClearIndicator, Object.assign({}, props, {
+    children: jsx(Icon, {
+      icon: CloseSmallIcon,
+      iconSize: "medium"
+    })
+  }));
+};
+
+var CustomMultiValueRemove = function CustomMultiValueRemove(props) {
+  return jsx(MultiValueRemove, Object.assign({}, props, {
+    children: jsx(Icon, {
+      icon: CloseSmallIcon,
+      iconSize: "medium"
+    })
+  }));
+};
+
+var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
+  return jsx(DropdownIndicator, Object.assign({}, props, {
+    children: jsx(Icon, {
+      icon: ChevronDownIcon,
+      iconSize: "medium"
+    })
+  }));
+};
+
 function escapeRegexCharacters(text) {
   return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
 }
@@ -143,7 +175,10 @@ var SelectInner = function SelectInner(_a, ref) {
       Input: CustomInput,
       SingleValue: customSingleValueElement ? function (props) {
         return CustomSingleValue(props, customSingleValueElement);
-      } : SingleValue
+      } : SingleValue,
+      ClearIndicator: CustomClearIndicator,
+      DropdownIndicator: CustomDropdownIndicator,
+      MultiValueRemove: CustomMultiValueRemove
     },
     'aria-invalid': hasErrorMessage ? true : undefined
   }, rest);

package/dist/components/Select/Select.styles.js

@@ -89,7 +89,7 @@ var getCustomStyles = function getCustomStyles() {
           transition: 'color 0.2s, background-color 0.2s'
         }
       }), selectTokens.multiValueRemove.base), {
-        svg: Object.assign({}, selectTokens.multiValueRemove.icon.base),
+        padding: 0,
         '&:hover': Object.assign({}, selectTokens.multiValueRemove.hover.base),
         '&:focus': {
           backgroundColor: 'blue'
@@ -127,6 +127,9 @@ var getCustomStyles = function getCustomStyles() {
       return Object.assign(Object.assign({
         display: 'inline-flex'
       }, selectTokens.clearIndicator.base), {
+        '@media (prefers-reduced-motion: no-preference)': {
+          transition: 'color 0.2s'
+        },
         '&:hover': Object.assign({}, selectTokens.clearIndicator.hover.base)
       });
     },

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

@@ -100,9 +100,6 @@ export declare const selectTokens: {
         hover: {
             base: CSSObject;
         };
-        icon: {
-            base: CSSObject;
-        };
     };
     indicatorsContainer: {
         withLabel: {

package/dist/components/Select/Select.tokens.js

@@ -8,8 +8,7 @@ var Colors = ddsBaseTokens.colors,
     Spacing = ddsBaseTokens.spacing,
     FontPackages = ddsBaseTokens.fontPackages,
     BorderRadius = ddsBaseTokens.borderRadius,
-    Border = ddsBaseTokens.border,
-    IconSizes = ddsBaseTokens.iconSizes;
+    Border = ddsBaseTokens.border;
 var textDefault = ddsReferenceTokens.textDefault;
 var multiValueContainerMinHeight = "".concat(Spacing.SizesDdsSpacingLocalX0125NumberPx * 2 + Spacing.SizesDdsSpacingLocalX025NumberPx * 2 + calculateHeightWithLineHeight(FontPackages.supportingStyle_inputtext_01.numbers.lineHeightNumber, FontPackages.supportingStyle_inputtext_01.numbers.fontSizeNumber), "px"); //custom spacing so that multiselect has same height as single value select
 
@@ -90,8 +89,7 @@ var drodownIndicatorReadOnlyBase = {
   color: 'transparent'
 };
 var clearIndicatorBase = {
-  color: Colors.DdsColorNeutralsGray6,
-  padding: " 0 ".concat(Spacing.SizesDdsSpacingLocalX025, " 0 0")
+  color: Colors.DdsColorNeutralsGray6
 };
 var loadingIndicatorBase = {
   color: Colors.DdsColorNeutralsGray6,
@@ -117,13 +115,11 @@ var optionBase = Object.assign(Object.assign({
   color: textDefault.textColor
 });
 var optionHoverBase = {
-  backgroundColor: Colors.DdsColorInteractiveLighter
-};
-var optionSelectedBase = Object.assign(Object.assign({
   backgroundColor: Colors.DdsColorInteractiveLightest
-}, FontPackages.body_sans_02.base), {
-  fontWeight: 600
-});
+};
+var optionSelectedBase = Object.assign({
+  backgroundColor: Colors.DdsColorNeutralsWhite
+}, FontPackages.body_sans_02.base);
 var noOptionsMessageBase = Object.assign({
   padding: "".concat(Spacing.SizesDdsSpacingLocalX05, " ").concat(Spacing.SizesDdsSpacingLocalX1),
   color: Colors.DdsColorNeutralsGray6
@@ -148,17 +144,12 @@ var multiValueLabelBase = Object.assign(Object.assign({
   fontWeight: 'bold'
 });
 var multiValueRemoveBase = {
-  padding: "".concat(Spacing.SizesDdsSpacingLocalX025),
   color: Colors.DdsColorNeutralsGray9
 };
 var multiValueRemoveHoverBase = {
   color: Colors.DdsColorNeutralsWhite,
   backgroundColor: Colors.DdsColorInteractiveBase
 };
-var multiValueRemoveIconBase = {
-  height: IconSizes.DdsIconsizeSmall,
-  width: IconSizes.DdsIconsizeSmall
-};
 var containerDisabledBase = {
   backgroundColor: Colors.DdsColorNeutralsGray1,
   borderColor: Colors.DdsColorNeutralsGray5
@@ -267,9 +258,6 @@ var selectTokens = {
     base: multiValueRemoveBase,
     hover: {
       base: multiValueRemoveHoverBase
-    },
-    icon: {
-      base: multiValueRemoveIconBase
     }
   },
   indicatorsContainer: {

package/dist/components/Table/SortCell.js

@@ -6,9 +6,9 @@ import { cellTokens } from './Cell.tokens.js';
 import styled from 'styled-components';
 import { removeButtonStyling } from '../../helpers/styling/removeButtonStyling.js';
 import { UnfoldMoreIcon } from '../../icons/tsx/unfoldMore.js';
-import { ChevronDownIcon } from '../../icons/tsx/chevronDown.js';
 import { ChevronUpIcon } from '../../icons/tsx/chevronUp.js';
 import { Icon } from '../Icon/Icon.js';
+import { ChevronDownIcon } from '../../icons/tsx/chevronDown.js';
 
 var SortIcon = styled(Icon).withConfig({
   displayName: "SortCell__SortIcon",

package/dist/icons/tsx/closeSmall.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from '../utils/propTypes';
+export declare function CloseSmallIcon(props: SvgProps): JSX.Element;

package/dist/icons/tsx/closeSmall.js

@@ -0,0 +1,25 @@
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { StyledSvg } from '../utils/StyledSvg.js';
+
+function CloseSmallIcon(props) {
+  var title = props.title,
+      rest = __rest(props, ["title"]);
+
+  return jsxs(StyledSvg, Object.assign({
+    width: 24,
+    height: 24,
+    fill: "currentColor"
+  }, rest, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, {
+    children: [title && jsx("title", {
+      children: title
+    }), jsx("path", {
+      d: "M7.293 8.707l1.414-1.414L12 10.586l3.293-3.293 1.414 1.414L13.414 12l3.293 3.293-1.414 1.414L12 13.414l-3.293 3.293-1.414-1.414L10.586 12 7.293 8.707z"
+    })]
+  }));
+}
+
+export { CloseSmallIcon };

package/dist/icons/tsx/index.d.ts

@@ -28,6 +28,7 @@ export * from './chevronLeft';
 export * from './chevronRight';
 export * from './chevronUp';
 export * from './close';
+export * from './closeSmall';
 export * from './closeCircled';
 export * from './cloud';
 export * from './collapse';

package/dist/index.js

@@ -92,6 +92,7 @@ export { ChevronLeftIcon } from './icons/tsx/chevronLeft.js';
 export { ChevronRightIcon } from './icons/tsx/chevronRight.js';
 export { ChevronUpIcon } from './icons/tsx/chevronUp.js';
 export { CloseIcon } from './icons/tsx/close.js';
+export { CloseSmallIcon } from './icons/tsx/closeSmall.js';
 export { CloseCircledIcon } from './icons/tsx/closeCircled.js';
 export { CloudIcon } from './icons/tsx/cloud.js';
 export { CollapseIcon } from './icons/tsx/collapse.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -80,7 +80,7 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-storybook": "^0.6.4",
     "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
+    "jest-environment-jsdom": "^29.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^2.78.1",