@norges-domstoler/dds-components 4.2.0 → 4.3.0

package/dist/cjs/components/VisuallyHidden/VisuallyHidden.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { BaseComponentPropsWithChildren } from '../../types';
+declare type VisuallyHiddenDivProps = BaseComponentPropsWithChildren<HTMLDivElement, {
+    as: 'div';
+}>;
+declare type VisuallyHiddenSpanProps = BaseComponentPropsWithChildren<HTMLSpanElement, {
+    /**Spesifiserer hvilken HTML tag skal returneres. */
+    as: 'span';
+}>;
+export declare type VisuallyHiddenProps = VisuallyHiddenSpanProps | VisuallyHiddenDivProps;
+export declare const VisuallyHidden: (props: VisuallyHiddenProps) => JSX.Element;
+export {};

package/dist/cjs/components/VisuallyHidden/VisuallyHidden.stories.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { VisuallyHiddenProps } from '.';
+declare const _default: {
+    title: string;
+    component: (props: VisuallyHiddenProps) => JSX.Element;
+    argTypes: {
+        as: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: (args: VisuallyHiddenProps) => JSX.Element;
+export declare const Link: () => JSX.Element;
+export declare const TableButtons: () => JSX.Element;

package/dist/cjs/components/VisuallyHidden/index.d.ts

@@ -0,0 +1 @@
+export * from './VisuallyHidden';

package/dist/cjs/index.d.ts

@@ -32,3 +32,4 @@ export * from './components/ToggleButton';
 export * from './components/Tabs';
 export * from './components/Tag';
 export * from './components/Chip';
+export * from './components/VisuallyHidden';

package/dist/cjs/index.js

@@ -2728,7 +2728,7 @@ var charCounterTokens = {
   base: charCounterBase
 };
 
-var Wrapper$7 = styled__default["default"](Typography).withConfig({
+var Wrapper$8 = styled__default["default"](Typography).withConfig({
   displayName: "CharCounter__Wrapper",
   componentId: "sc-qty1z2-0"
 })(["margin-left:auto;", ""], charCounterTokens.base);
@@ -2746,7 +2746,7 @@ function CharCounter(props) {
       _useState2 = _slicedToArray(_useState, 1),
       uniqueId = _useState2[0];
 
-  return jsxRuntime.jsxs(Wrapper$7, Object.assign({}, getBaseHTMLProps(uniqueId, className, htmlProps, rest), {
+  return jsxRuntime.jsxs(Wrapper$8, Object.assign({}, getBaseHTMLProps(uniqueId, className, htmlProps, rest), {
     forwardedAs: "div",
     typographyType: "supportingStyleHelperText01",
     "aria-label": "".concat(current, " av ").concat(max, " tegn skrevet")
@@ -3237,7 +3237,7 @@ var Container$f = styled__default["default"].div.withConfig({
   var readOnly = _ref5.readOnly;
   return readOnly && styled.css(["", " &:hover{box-shadow:none;", " ", "{", "}}.", "__dropdown-indicator,&:hover .", "__dropdown-indicator{", "}"], selectTokens.container.readOnly.base, selectTokens.container.readOnly.base, Label, selectTokens.label.base, prefix, prefix, selectTokens.dropdownIndicator.readOnly.base);
 });
-var Wrapper$6 = styled__default["default"].div.withConfig({
+var Wrapper$7 = styled__default["default"].div.withConfig({
   displayName: "Selectstyles__Wrapper",
   componentId: "sc-19jkd5s-2"
 })(["margin:0;width:", ";"], function (_ref6) {
@@ -3469,7 +3469,7 @@ var SelectInner = function SelectInner(_a, ref) {
     },
     'aria-invalid': hasErrorMessage ? true : undefined
   }, rest);
-  return jsxRuntime.jsxs(Wrapper$6, Object.assign({}, wrapperProps, {
+  return jsxRuntime.jsxs(Wrapper$7, Object.assign({}, wrapperProps, {
     children: [jsxRuntime.jsxs(Container$f, Object.assign({}, containerProps, {
       children: [label && jsxRuntime.jsxs(Label, Object.assign({
         htmlFor: uniqueId,
@@ -4367,7 +4367,7 @@ var Foot = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
-var Wrapper$5 = styled__default["default"].div.withConfig({
+var Wrapper$6 = styled__default["default"].div.withConfig({
   displayName: "TableWrapper__Wrapper",
   componentId: "sc-eb384b-0"
 })(["", " ", ""], function (_ref) {
@@ -4415,7 +4415,7 @@ var TableWrapper = function TableWrapper(_a) {
     ref: wrapperRef,
     overflowX: overflowX
   }, rest);
-  return jsxRuntime.jsx(Wrapper$5, Object.assign({}, wrapperProps, {
+  return jsxRuntime.jsx(Wrapper$6, Object.assign({}, wrapperProps, {
     children: children
   }));
 };
@@ -5191,7 +5191,7 @@ var Card = function Card(props) {
   }));
 };
 
-var Wrapper$4 = styled__default["default"].div.withConfig({
+var Wrapper$5 = styled__default["default"].div.withConfig({
   displayName: "CardAccordion__Wrapper",
   componentId: "sc-1ctxrby-0"
 })([""]);
@@ -5241,7 +5241,7 @@ var CardAccordion = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var wrapperProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     ref: ref
   });
-  return jsxRuntime.jsx(Wrapper$4, Object.assign({}, wrapperProps, {
+  return jsxRuntime.jsx(Wrapper$5, Object.assign({}, wrapperProps, {
     children: Children
   }));
 });
@@ -6107,7 +6107,7 @@ var OverflowMenuGroup = function OverflowMenuGroup(_ref) {
   });
 };
 
-var Wrapper$3 = styled__default["default"].div.withConfig({
+var Wrapper$4 = styled__default["default"].div.withConfig({
   displayName: "InternalHeaderstyles__Wrapper",
   componentId: "sc-91bnca-0"
 })(["position:relative;*::selection{", "}", ""], typographyTokens.selection.base, internalHeaderTokens.wrapper.base);
@@ -6253,7 +6253,7 @@ var InternalHeader = function InternalHeader(props) {
     })
   })) : null;
   var hasContextMenu = hasContextMenuElements || !!userProps || hasNavInContextMenu;
-  return jsxRuntime.jsxs(Wrapper$3, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+  return jsxRuntime.jsxs(Wrapper$4, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
     children: [jsxRuntime.jsx(BannerWrapper, Object.assign({
       hasContextMenu: hasContextMenu
     }, {
@@ -6344,8 +6344,9 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       tip = _a.tip,
       style = _a.style,
       className = _a.className,
+      max = _a.max,
       ariaDescribedby = _a['aria-describedby'],
-      rest = tslib.__rest(_a, ["id", "type", "required", "readOnly", "disabled", "label", "width", "errorMessage", "tip", "style", "className", 'aria-describedby']);
+      rest = tslib.__rest(_a, ["id", "type", "required", "readOnly", "disabled", "label", "width", "errorMessage", "tip", "style", "className", "max", 'aria-describedby']);
 
   var _useState = React.useState(id !== null && id !== void 0 ? id : "datepickerInput-".concat(nextUniqueId$8++)),
       _useState2 = _slicedToArray(_useState, 1),
@@ -6368,7 +6369,8 @@ var Datepicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     disabled: disabled,
     type: type,
     'aria-describedby': spaceSeparatedIdListGenerator([tipId, errorMessageId, ariaDescribedby]),
-    'aria-invalid': hasErrorMessage ? true : undefined
+    'aria-invalid': hasErrorMessage ? true : undefined,
+    max: max || '9999-12-31'
   }, rest);
   var outerInputContainerProps = {
     width: componentWidth,
@@ -6435,7 +6437,7 @@ var skipToContentTokens = {
   }
 };
 
-var Wrapper$2 = styled__default["default"].div.withConfig({
+var Wrapper$3 = styled__default["default"].div.withConfig({
   displayName: "SkipToContent__Wrapper",
   componentId: "sc-57o1qv-0"
 })(["box-sizing:border-box;position:absolute;top:", ";text-align:center;opacity:0;@media (prefers-reduced-motion:no-preference){transition:opacity 0.2s;}overflow:hidden;clip:rect(1px,1px,1px,1px);height:1px;width:1px;white-space:nowrap;", " &:focus-within{clip:auto;height:auto;overflow:auto;width:100%;z-index:200;opacity:1;}"], function (_ref) {
@@ -6466,7 +6468,7 @@ var SkipToContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: joinClassNames(className, htmlPropsClassName),
     style: style
   };
-  return jsxRuntime.jsx(Wrapper$2, Object.assign({}, wrapperProps, {
+  return jsxRuntime.jsx(Wrapper$3, Object.assign({}, wrapperProps, {
     children: jsxRuntime.jsx(Link, Object.assign({}, getBaseHTMLProps(id, restHtmlProps, rest), {
       ref: ref
     }, {
@@ -7033,7 +7035,7 @@ var popoverTokens = {
 };
 
 var Spacing$2 = ddsDesignTokens.ddsBaseTokens.spacing;
-var Wrapper$1 = styled__default["default"].div.withConfig({
+var Wrapper$2 = styled__default["default"].div.withConfig({
   displayName: "Popover__Wrapper",
   componentId: "sc-1fecd7e-0"
 })(["", " box-sizing:border-box;position:absolute;width:fit-content;z-index:20;", " ", ""], function (_ref) {
@@ -7097,7 +7099,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function (props, ref) {
     style: Object.assign(Object.assign({}, htmlProps.style), styles.floating),
     role: 'dialog'
   });
-  return jsxRuntime.jsxs(Wrapper$1, Object.assign({}, wrapperProps, {
+  return jsxRuntime.jsxs(Wrapper$2, Object.assign({}, wrapperProps, {
     children: [title && jsxRuntime.jsx(TitleContainer, {
       children: typeof title === 'string' ? jsxRuntime.jsx(Typography, Object.assign({
         typographyType: "headingSans02"
@@ -7778,7 +7780,7 @@ var tagTokens = {
   }
 };
 
-var Wrapper = styled__default["default"](Typography).withConfig({
+var Wrapper$1 = styled__default["default"](Typography).withConfig({
   displayName: "Tag__Wrapper",
   componentId: "sc-rdxtch-0"
 })(["", " ", ""], tagTokens.wrapper.base, function (_ref) {
@@ -7798,7 +7800,7 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
       htmlProps = props.htmlProps,
       rest = tslib.__rest(props, ["text", "purpose", "id", "className", "htmlProps"]);
 
-  return jsxRuntime.jsx(Wrapper, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+  return jsxRuntime.jsx(Wrapper$1, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
     forwardedAs: "span",
     typographyType: "bodySans01",
     ref: ref,
@@ -7919,6 +7921,31 @@ var ChipGroup = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }));
 });
 
+var Wrapper = styled__default["default"].span.withConfig({
+  displayName: "VisuallyHidden__Wrapper",
+  componentId: "sc-ciubxt-0"
+})(["width:1px;height:1px;margin:0px;padding:0px;top:0px;inset-inline-start:0px;overflow:hidden;clip:rect(0px,0px,0px,0px);border:0px;"]);
+var VisuallyHidden = function VisuallyHidden(props) {
+  var children = props.children,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      as = props.as,
+      rest = tslib.__rest(props, ["children", "id", "className", "htmlProps", "as"]);
+
+  if (as === 'div') {
+    return jsxRuntime.jsx(Wrapper, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+      as: as
+    }, {
+      children: children
+    }));
+  }
+
+  return jsxRuntime.jsx(Wrapper, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    children: children
+  }));
+};
+
 exports.Body = Body$1;
 exports.Breadcrumb = Breadcrumb;
 exports.Breadcrumbs = Breadcrumbs;
@@ -7980,6 +8007,7 @@ exports.ToggleButton = ToggleButton;
 exports.ToggleButtonGroup = ToggleButtonGroup;
 exports.Tooltip = Tooltip;
 exports.Typography = Typography;
+exports.VisuallyHidden = VisuallyHidden;
 exports.createSelectOptions = createSelectOptions;
 exports.getTextColor = getTextColor;
 exports.inlineElements = inlineElements;

package/dist/components/Datepicker/Datepicker.js

@@ -33,8 +33,9 @@ var Datepicker = /*#__PURE__*/forwardRef(function (_a, ref) {
       tip = _a.tip,
       style = _a.style,
       className = _a.className,
+      max = _a.max,
       ariaDescribedby = _a['aria-describedby'],
-      rest = __rest(_a, ["id", "type", "required", "readOnly", "disabled", "label", "width", "errorMessage", "tip", "style", "className", 'aria-describedby']);
+      rest = __rest(_a, ["id", "type", "required", "readOnly", "disabled", "label", "width", "errorMessage", "tip", "style", "className", "max", 'aria-describedby']);
 
   var _useState = useState(id !== null && id !== void 0 ? id : "datepickerInput-".concat(nextUniqueId++)),
       _useState2 = _slicedToArray(_useState, 1),
@@ -57,7 +58,8 @@ var Datepicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     disabled: disabled,
     type: type,
     'aria-describedby': spaceSeparatedIdListGenerator([tipId, errorMessageId, ariaDescribedby]),
-    'aria-invalid': hasErrorMessage ? true : undefined
+    'aria-invalid': hasErrorMessage ? true : undefined,
+    max: max || '9999-12-31'
   }, rest);
   var outerInputContainerProps = {
     width: componentWidth,

package/dist/components/VisuallyHidden/VisuallyHidden.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { BaseComponentPropsWithChildren } from '../../types';
+declare type VisuallyHiddenDivProps = BaseComponentPropsWithChildren<HTMLDivElement, {
+    as: 'div';
+}>;
+declare type VisuallyHiddenSpanProps = BaseComponentPropsWithChildren<HTMLSpanElement, {
+    /**Spesifiserer hvilken HTML tag skal returneres. */
+    as: 'span';
+}>;
+export declare type VisuallyHiddenProps = VisuallyHiddenSpanProps | VisuallyHiddenDivProps;
+export declare const VisuallyHidden: (props: VisuallyHiddenProps) => JSX.Element;
+export {};

package/dist/components/VisuallyHidden/VisuallyHidden.js

@@ -0,0 +1,31 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var Wrapper = styled.span.withConfig({
+  displayName: "VisuallyHidden__Wrapper",
+  componentId: "sc-ciubxt-0"
+})(["width:1px;height:1px;margin:0px;padding:0px;top:0px;inset-inline-start:0px;overflow:hidden;clip:rect(0px,0px,0px,0px);border:0px;"]);
+var VisuallyHidden = function VisuallyHidden(props) {
+  var children = props.children,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      as = props.as,
+      rest = __rest(props, ["children", "id", "className", "htmlProps", "as"]);
+
+  if (as === 'div') {
+    return jsx(Wrapper, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+      as: as
+    }, {
+      children: children
+    }));
+  }
+
+  return jsx(Wrapper, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    children: children
+  }));
+};
+
+export { VisuallyHidden };

package/dist/components/VisuallyHidden/VisuallyHidden.stories.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { VisuallyHiddenProps } from '.';
+declare const _default: {
+    title: string;
+    component: (props: VisuallyHiddenProps) => JSX.Element;
+    argTypes: {
+        as: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: (args: VisuallyHiddenProps) => JSX.Element;
+export declare const Link: () => JSX.Element;
+export declare const TableButtons: () => JSX.Element;

package/dist/components/VisuallyHidden/index.d.ts

@@ -0,0 +1 @@
+export * from './VisuallyHidden';

package/dist/index.d.ts

@@ -32,3 +32,4 @@ export * from './components/ToggleButton';
 export * from './components/Tabs';
 export * from './components/Tag';
 export * from './components/Chip';
+export * from './components/VisuallyHidden';

package/dist/index.js

@@ -58,3 +58,4 @@ export { TabPanels } from './components/Tabs/TabPanels.js';
 export { Tag } from './components/Tag/Tag.js';
 export { Chip } from './components/Chip/Chip.js';
 export { ChipGroup } from './components/Chip/ChipGroup.js';
+export { VisuallyHidden } from './components/VisuallyHidden/VisuallyHidden.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -72,7 +72,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-storybook": "^0.5.13",
+    "eslint-plugin-storybook": "^0.6.1",
     "jest": "^27.5.1 ",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",