@norges-domstoler/dds-components 10.7.0 → 11.0.0

package/dist/cjs/index.js

@@ -3613,55 +3613,58 @@ var getAppearanceAndPurposeStyling = function getAppearanceAndPurposeStyling(app
 var ButtonWrapper = styled__default.default.button.withConfig({
   displayName: "Buttonstyles__ButtonWrapper",
   componentId: "sc-14dutqk-0"
-})(["", " border:", ";user-select:text;display:inline-flex;align-items:center;justify-content:center;height:fit-content;width:", ";cursor:pointer;box-shadow:none;text-decoration:none;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,text-decoration-color 0.2s,box-shadow 0.2s,border-color 0.2s,color 0.2s,", ";}", " ", " ", " ", " ", " &:focus-visible,&.focus-visible{", "}*::selection{", "}"], normalizeButton, base$1.border, function (_ref) {
+})(["", " border:", ";user-select:text;display:inline-flex;align-items:center;justify-content:center;height:fit-content;width:", ";cursor:", ";box-shadow:none;text-decoration:none;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,text-decoration-color 0.2s,box-shadow 0.2s,border-color 0.2s,color 0.2s,", ";}", " ", " ", " ", " ", " &:focus-visible,&.focus-visible{", "}*::selection{", "}"], normalizeButton, base$1.border, function (_ref) {
   var fullWidth = _ref.fullWidth;
   return fullWidth ? '100%' : 'fit-content';
-}, focusVisibleTransitionValue, function (_ref2) {
-  var appearance = _ref2.appearance,
-    purpose = _ref2.purpose;
-  return styled.css(["border-radius:", ";box-shadow:", ";color:", ";", ""], appearances$1[appearance].base.borderRadius, appearances$1[appearance].base.boxShadow, appearances$1[appearance].purpose[purpose].base.color, getAppearanceAndPurposeStyling(appearance, purpose));
-}, function (_ref3) {
-  var hasIcon = _ref3.hasIcon,
-    hasLabel = _ref3.hasLabel,
-    appearance = _ref3.appearance,
+}, function (_ref2) {
+  var isLoading = _ref2.isLoading;
+  return isLoading ? 'not-allowed' : 'pointer';
+}, focusVisibleTransitionValue, function (_ref3) {
+  var appearance = _ref3.appearance,
     purpose = _ref3.purpose;
-  return hasIcon && !hasLabel && appearance === 'borderless' && styled.css(["&:hover{border-color:", ";box-shadow:", ";}&:active{border-color::", ";box-shadow:", ";}"], appearances$1[appearance].purpose[purpose].icon.hover.borderColor, appearances$1[appearance].purpose[purpose].icon.hover.boxShadow, appearances$1[appearance].purpose[purpose].icon.active.borderColor, appearances$1[appearance].purpose[purpose].icon.active.boxShadow);
+  return styled.css(["border-radius:", ";box-shadow:", ";color:", ";", ""], appearances$1[appearance].base.borderRadius, appearances$1[appearance].base.boxShadow, appearances$1[appearance].purpose[purpose].base.color, getAppearanceAndPurposeStyling(appearance, purpose));
 }, function (_ref4) {
   var hasIcon = _ref4.hasIcon,
     hasLabel = _ref4.hasLabel,
-    size = _ref4.size;
-  return hasIcon && hasLabel && styled.css(["gap:", ";"], sizes$1[size].textAndIcon.gap);
+    appearance = _ref4.appearance,
+    purpose = _ref4.purpose;
+  return hasIcon && !hasLabel && appearance === 'borderless' && styled.css(["&:hover{border-color:", ";box-shadow:", ";}&:active{border-color::", ";box-shadow:", ";}"], appearances$1[appearance].purpose[purpose].icon.hover.borderColor, appearances$1[appearance].purpose[purpose].icon.hover.boxShadow, appearances$1[appearance].purpose[purpose].icon.active.borderColor, appearances$1[appearance].purpose[purpose].icon.active.boxShadow);
 }, function (_ref5) {
-  var size = _ref5.size,
-    hasLabel = _ref5.hasLabel;
-  return hasLabel ? styled.css(["", " padding:", ";"], getFontStyling(typographyTypes$6[size]), sizes$1[size].text.padding) : styled.css(["font-size:", ";padding:", ";"], sizes$1[size].justIcon.icon.fontSize, sizes$1[size].justIcon.icon.padding);
+  var hasIcon = _ref5.hasIcon,
+    hasLabel = _ref5.hasLabel,
+    size = _ref5.size;
+  return hasIcon && hasLabel && styled.css(["gap:", ";"], sizes$1[size].textAndIcon.gap);
 }, function (_ref6) {
-  var fullWidth = _ref6.fullWidth,
-    hasIcon = _ref6.hasIcon,
-    hasLabel = _ref6.hasLabel,
-    isLoading = _ref6.isLoading,
-    iconPosition = _ref6.iconPosition;
+  var size = _ref6.size,
+    hasLabel = _ref6.hasLabel;
+  return hasLabel ? styled.css(["", " padding:", ";"], getFontStyling(typographyTypes$6[size]), sizes$1[size].text.padding) : styled.css(["font-size:", ";padding:", ";"], sizes$1[size].justIcon.icon.fontSize, sizes$1[size].justIcon.icon.padding);
+}, function (_ref7) {
+  var fullWidth = _ref7.fullWidth,
+    hasIcon = _ref7.hasIcon,
+    hasLabel = _ref7.hasLabel,
+    isLoading = _ref7.isLoading,
+    iconPosition = _ref7.iconPosition;
   return fullWidth && (!hasIcon || !hasLabel || isLoading ? styled.css(["justify-content:center;"]) : hasIcon && hasLabel && iconPosition === 'left' ? styled.css(["justify-content:left;"]) : styled.css(["justify-content:space-between;"]));
 }, focusVisible, selection);
 var StyledIconWrapperSpan = styled__default.default.span.withConfig({
   displayName: "Buttonstyles__StyledIconWrapperSpan",
   componentId: "sc-14dutqk-1"
-})(["display:flex;align-items:center;justify-content:center;", " ", " ", ""], function (_ref7) {
-  var absolutePosition = _ref7.absolutePosition;
+})(["display:flex;align-items:center;justify-content:center;", " ", " ", ""], function (_ref8) {
+  var absolutePosition = _ref8.absolutePosition;
   return absolutePosition && styled.css(["position:absolute;"]);
-}, function (_ref8) {
-  var isHidden = _ref8.isHidden;
-  return isHidden && styled.css(["visibility:hidden;"]);
 }, function (_ref9) {
-  var justIcon = _ref9.justIcon,
-    size = _ref9.size;
+  var isHidden = _ref9.isHidden;
+  return isHidden && styled.css(["visibility:hidden;"]);
+}, function (_ref10) {
+  var justIcon = _ref10.justIcon,
+    size = _ref10.size;
   return justIcon && styled.css(["height:", ";width:", ";"], sizes$1[size].justIcon.wrapper.height, sizes$1[size].justIcon.wrapper.width);
 });
 var Label$1 = styled__default.default.span.withConfig({
   displayName: "Buttonstyles__Label",
   componentId: "sc-14dutqk-2"
-})(["", ""], function (_ref10) {
-  var isHidden = _ref10.isHidden;
+})(["", ""], function (_ref11) {
+  var isHidden = _ref11.isHidden;
   return isHidden && styled.css(["visibility:hidden;"]);
 });
 
@@ -3685,7 +3688,7 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _props$fullWidth = props.fullWidth,
     fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
     icon = props.icon,
-    onClick = props.onClick,
+    _onClick = props.onClick,
     onFocus = props.onFocus,
     onBlur = props.onBlur,
     id = props.id,
@@ -3710,7 +3713,11 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     hasIcon: hasIcon,
     isLoading: loading,
     size: size,
-    onClick: onClick,
+    onClick: function onClick(event) {
+      if (!loading && _onClick) {
+        _onClick(event);
+      }
+    },
     onFocus: onFocus,
     onBlur: onBlur
   });
@@ -3726,6 +3733,8 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     })
   }));
   return jsxRuntime.jsxs(ButtonWrapper, Object.assign({}, wrapperProps, {
+    "aria-disabled": loading
+  }, {
     children: [!isIconButton && jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [iconPosition === 'left' && iconElement, jsxRuntime.jsx(Label$1, Object.assign({
         isHidden: loading,

package/dist/components/Button/Button.js

@@ -27,7 +27,7 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$fullWidth = props.fullWidth,
     fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
     icon = props.icon,
-    onClick = props.onClick,
+    _onClick = props.onClick,
     onFocus = props.onFocus,
     onBlur = props.onBlur,
     id = props.id,
@@ -52,7 +52,11 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     hasIcon: hasIcon,
     isLoading: loading,
     size: size,
-    onClick: onClick,
+    onClick: function onClick(event) {
+      if (!loading && _onClick) {
+        _onClick(event);
+      }
+    },
     onFocus: onFocus,
     onBlur: onBlur
   });
@@ -68,6 +72,8 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     })
   }));
   return jsxs(ButtonWrapper, Object.assign({}, wrapperProps, {
+    "aria-disabled": loading
+  }, {
     children: [!isIconButton && jsxs(Fragment, {
       children: [iconPosition === 'left' && iconElement, jsx(Label, Object.assign({
         isHidden: loading,

package/dist/components/Button/Button.styles.js

@@ -26,55 +26,58 @@ var getAppearanceAndPurposeStyling = function getAppearanceAndPurposeStyling(app
 var ButtonWrapper = styled.button.withConfig({
   displayName: "Buttonstyles__ButtonWrapper",
   componentId: "sc-14dutqk-0"
-})(["", " border:", ";user-select:text;display:inline-flex;align-items:center;justify-content:center;height:fit-content;width:", ";cursor:pointer;box-shadow:none;text-decoration:none;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,text-decoration-color 0.2s,box-shadow 0.2s,border-color 0.2s,color 0.2s,", ";}", " ", " ", " ", " ", " &:focus-visible,&.focus-visible{", "}*::selection{", "}"], normalizeButton, base.border, function (_ref) {
+})(["", " border:", ";user-select:text;display:inline-flex;align-items:center;justify-content:center;height:fit-content;width:", ";cursor:", ";box-shadow:none;text-decoration:none;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,text-decoration-color 0.2s,box-shadow 0.2s,border-color 0.2s,color 0.2s,", ";}", " ", " ", " ", " ", " &:focus-visible,&.focus-visible{", "}*::selection{", "}"], normalizeButton, base.border, function (_ref) {
   var fullWidth = _ref.fullWidth;
   return fullWidth ? '100%' : 'fit-content';
-}, focusVisibleTransitionValue, function (_ref2) {
-  var appearance = _ref2.appearance,
-    purpose = _ref2.purpose;
-  return css(["border-radius:", ";box-shadow:", ";color:", ";", ""], appearances[appearance].base.borderRadius, appearances[appearance].base.boxShadow, appearances[appearance].purpose[purpose].base.color, getAppearanceAndPurposeStyling(appearance, purpose));
-}, function (_ref3) {
-  var hasIcon = _ref3.hasIcon,
-    hasLabel = _ref3.hasLabel,
-    appearance = _ref3.appearance,
+}, function (_ref2) {
+  var isLoading = _ref2.isLoading;
+  return isLoading ? 'not-allowed' : 'pointer';
+}, focusVisibleTransitionValue, function (_ref3) {
+  var appearance = _ref3.appearance,
     purpose = _ref3.purpose;
-  return hasIcon && !hasLabel && appearance === 'borderless' && css(["&:hover{border-color:", ";box-shadow:", ";}&:active{border-color::", ";box-shadow:", ";}"], appearances[appearance].purpose[purpose].icon.hover.borderColor, appearances[appearance].purpose[purpose].icon.hover.boxShadow, appearances[appearance].purpose[purpose].icon.active.borderColor, appearances[appearance].purpose[purpose].icon.active.boxShadow);
+  return css(["border-radius:", ";box-shadow:", ";color:", ";", ""], appearances[appearance].base.borderRadius, appearances[appearance].base.boxShadow, appearances[appearance].purpose[purpose].base.color, getAppearanceAndPurposeStyling(appearance, purpose));
 }, function (_ref4) {
   var hasIcon = _ref4.hasIcon,
     hasLabel = _ref4.hasLabel,
-    size = _ref4.size;
-  return hasIcon && hasLabel && css(["gap:", ";"], sizes[size].textAndIcon.gap);
+    appearance = _ref4.appearance,
+    purpose = _ref4.purpose;
+  return hasIcon && !hasLabel && appearance === 'borderless' && css(["&:hover{border-color:", ";box-shadow:", ";}&:active{border-color::", ";box-shadow:", ";}"], appearances[appearance].purpose[purpose].icon.hover.borderColor, appearances[appearance].purpose[purpose].icon.hover.boxShadow, appearances[appearance].purpose[purpose].icon.active.borderColor, appearances[appearance].purpose[purpose].icon.active.boxShadow);
 }, function (_ref5) {
-  var size = _ref5.size,
-    hasLabel = _ref5.hasLabel;
-  return hasLabel ? css(["", " padding:", ";"], getFontStyling(typographyTypes[size]), sizes[size].text.padding) : css(["font-size:", ";padding:", ";"], sizes[size].justIcon.icon.fontSize, sizes[size].justIcon.icon.padding);
+  var hasIcon = _ref5.hasIcon,
+    hasLabel = _ref5.hasLabel,
+    size = _ref5.size;
+  return hasIcon && hasLabel && css(["gap:", ";"], sizes[size].textAndIcon.gap);
 }, function (_ref6) {
-  var fullWidth = _ref6.fullWidth,
-    hasIcon = _ref6.hasIcon,
-    hasLabel = _ref6.hasLabel,
-    isLoading = _ref6.isLoading,
-    iconPosition = _ref6.iconPosition;
+  var size = _ref6.size,
+    hasLabel = _ref6.hasLabel;
+  return hasLabel ? css(["", " padding:", ";"], getFontStyling(typographyTypes[size]), sizes[size].text.padding) : css(["font-size:", ";padding:", ";"], sizes[size].justIcon.icon.fontSize, sizes[size].justIcon.icon.padding);
+}, function (_ref7) {
+  var fullWidth = _ref7.fullWidth,
+    hasIcon = _ref7.hasIcon,
+    hasLabel = _ref7.hasLabel,
+    isLoading = _ref7.isLoading,
+    iconPosition = _ref7.iconPosition;
   return fullWidth && (!hasIcon || !hasLabel || isLoading ? css(["justify-content:center;"]) : hasIcon && hasLabel && iconPosition === 'left' ? css(["justify-content:left;"]) : css(["justify-content:space-between;"]));
 }, focusVisible, selection);
 var StyledIconWrapperSpan = styled.span.withConfig({
   displayName: "Buttonstyles__StyledIconWrapperSpan",
   componentId: "sc-14dutqk-1"
-})(["display:flex;align-items:center;justify-content:center;", " ", " ", ""], function (_ref7) {
-  var absolutePosition = _ref7.absolutePosition;
+})(["display:flex;align-items:center;justify-content:center;", " ", " ", ""], function (_ref8) {
+  var absolutePosition = _ref8.absolutePosition;
   return absolutePosition && css(["position:absolute;"]);
-}, function (_ref8) {
-  var isHidden = _ref8.isHidden;
-  return isHidden && css(["visibility:hidden;"]);
 }, function (_ref9) {
-  var justIcon = _ref9.justIcon,
-    size = _ref9.size;
+  var isHidden = _ref9.isHidden;
+  return isHidden && css(["visibility:hidden;"]);
+}, function (_ref10) {
+  var justIcon = _ref10.justIcon,
+    size = _ref10.size;
   return justIcon && css(["height:", ";width:", ";"], sizes[size].justIcon.wrapper.height, sizes[size].justIcon.wrapper.width);
 });
 var Label = styled.span.withConfig({
   displayName: "Buttonstyles__Label",
   componentId: "sc-14dutqk-2"
-})(["", ""], function (_ref10) {
-  var isHidden = _ref10.isHidden;
+})(["", ""], function (_ref11) {
+  var isHidden = _ref11.isHidden;
   return isHidden && css(["visibility:hidden;"]);
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "10.7.0",
+  "version": "11.0.0",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -61,8 +61,8 @@
     "@storybook/addons": "^6.5.15",
     "@storybook/builder-webpack5": "^6.5.15",
     "@storybook/manager-webpack5": "^6.5.15",
-    "@storybook/mdx2-csf": "^0.0.3",
-    "@storybook/react": "^6.5.15",
+    "@storybook/mdx2-csf": "^0.0.4",
+    "@storybook/react": "^6.5.16",
     "@storybook/theming": "^6.5.15",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
@@ -71,7 +71,7 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.38.1",
+    "@typescript-eslint/eslint-plugin": "^5.52.0",
     "@typescript-eslint/parser": "^5.38.1",
     "babel-loader": "^9.1.2",
     "babel-plugin-styled-components": "^2.0.7",
@@ -79,10 +79,10 @@
     "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-storybook": "^0.6.4",
     "jest": "^29.4.2",
-    "jest-environment-jsdom": "^29.0.3",
+    "jest-environment-jsdom": "^29.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^3.10.0",