@norges-domstoler/dds-components 4.1.1 → 4.2.0

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

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare const TextInput: React.ForwardRefExoticComponent<{
     multiline?: boolean | undefined;
+    withCharacterCounter?: boolean | undefined;
 } & {
     label?: string | undefined;
     width?: import("csstype").Property.Width<string> | undefined;

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

@@ -4,6 +4,7 @@ declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
         multiline?: boolean | undefined;
+        withCharacterCounter?: boolean | undefined;
     } & {
         label?: string | undefined;
         width?: import("csstype").Property.Width<string> | undefined;

package/dist/cjs/components/TextInput/TextInput.types.d.ts

@@ -3,4 +3,6 @@ import { InputProps } from '../../helpers';
 export declare type TextInputProps = {
     /**Gjør inputfeltet om til `<textarea>`. */
     multiline?: boolean;
+    /** Spesifiserer om tegntelleren skal vises. */
+    withCharacterCounter?: boolean;
 } & InputProps & InputHTMLAttributes<HTMLTextAreaElement>;

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

@@ -2,6 +2,7 @@ import { ElementType, PropsWithChildren, HTMLAttributes, AnchorHTMLAttributes }
 import { CSSObject } from 'styled-components';
 import { TextColor, OtherTypographyType, AnchorTypographyType, LabelTypographyType } from './Typography.types';
 import { BaseComponentProps } from '../../types';
+export declare const inlineElements: ElementType[];
 export declare function isTextColor(color: string): color is TextColor;
 export declare const getTextColor: (color: TextColor | string) => string;
 export declare type TypographyInteractionProps = {

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

@@ -47,6 +47,11 @@ declare const _default: {
                 type: string;
             };
         };
+        as: {
+            control: {
+                type: string;
+            };
+        };
     };
     parameters: {
         controls: {

package/dist/cjs/components/Typography/Typography.types.d.ts

@@ -9,4 +9,5 @@ export declare type LabelTypographyType = 'supportingStyleLabel01';
 export declare type OtherTypographyType = TypographyHeadingType | TypographyBodyType | TypographyLeadType | TypographySupportingType;
 export declare type TypographyType = AnchorTypographyType | LabelTypographyType | OtherTypographyType;
 export declare type TextColor = 'interactive' | 'primary' | 'danger' | 'warning' | 'success' | 'onLight' | 'onDark' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'gray6' | 'gray7' | 'gray8' | 'gray9';
+export declare type InlineElement = 'a' | 'abbr' | 'audio' | 'b' | 'bdi' | 'bdo' | 'big' | 'br' | 'button' | 'canvas' | 'cite' | 'code' | 'data' | 'datalist' | 'del' | 'dfn' | 'em' | 'embed' | 'i' | 'iframe' | 'img' | 'input' | 'ins' | 'kbd' | 'label' | 'map' | 'mark' | 'meter' | 'noscript' | 'object' | 'output' | 'picture' | 'progress' | 'q' | 'ruby' | 's' | 'samp' | 'script' | 'select' | 'slot' | 'small' | 'span' | 'strong' | 'sub' | 'sup' | 'svg' | 'template' | 'textarea' | 'time' | 'u' | 'var' | 'video' | 'wbr';
 export {};

package/dist/cjs/index.js

@@ -912,6 +912,12 @@ var getElementType = function getElementType(element) {
   }
 };
 
+var inlineElements = ['a', 'abbr', 'audio', 'b', 'bdi', 'bdo', 'big', 'br', 'button', 'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'label', 'map', 'mark', 'meter', 'noscript', 'object', 'output', 'picture', 'progress', 'q', 'ruby', 's', 'samp', 'script', 'select', 'slot', 'small', 'span', 'strong', 'sub', 'sup', 'svg', 'template', 'textarea', 'time', 'u', 'var', 'video', 'wbr'];
+
+var isInlineElement = function isInlineElement(as) {
+  return inlineElements.indexOf(as) !== -1;
+};
+
 function isTextColor(color) {
   return textColorsArray.indexOf(color) !== -1;
 }
@@ -946,8 +952,9 @@ var StyledTypography = styled__default["default"].p.withConfig({
   return interactionProps && interactionProps.active && styled.css(["&:active{", "}"], interactionProps.active);
 }, function (_ref5) {
   var withMargins = _ref5.withMargins,
-      typographyType = _ref5.typographyType;
-  return withMargins && typographyType ? styled.css(["", ""], typographyTokens.typographyType[typographyType].margins.base) : styled.css(["margin:0;"]);
+      typographyType = _ref5.typographyType,
+      as = _ref5.as;
+  return withMargins && typographyType && isInlineElement(as) ? styled.css(["", " display:block;"], typographyTokens.typographyType[typographyType].margins.base) : withMargins && typographyType ? styled.css(["", ""], typographyTokens.typographyType[typographyType].margins.base) : styled.css(["margin:0;"]);
 }, function (_ref6) {
   var color = _ref6.color;
   return color && styled.css(["color:", ";"], getTextColor(color));
@@ -2791,10 +2798,12 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       width = _a$width === void 0 ? textInputTokens.wrapper.defaultWidth : _a$width,
       _a$type = _a.type,
       type = _a$type === void 0 ? 'text' : _a$type,
+      _a$withCharacterCount = _a.withCharacterCounter,
+      withCharacterCounter = _a$withCharacterCount === void 0 ? true : _a$withCharacterCount,
       className = _a.className,
       style = _a.style,
       ariaDescribedby = _a['aria-describedby'],
-      rest = tslib.__rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "multiline", "onChange", "id", "width", "type", "className", "style", 'aria-describedby']);
+      rest = tslib.__rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "multiline", "onChange", "id", "width", "type", "withCharacterCounter", "className", "style", 'aria-describedby']);
 
   var textAreaRef = React.useRef(null);
 
@@ -2834,7 +2843,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var hasLabel = !!label;
   var labelPresence = hasLabel ? 'hasLabel' : 'noLabel';
   var hasMessage = hasErrorMessage || hasTip || !!maxLength;
-  var characterCounterId = derivativeIdGenerator(uniqueId, 'characterCounter', maxLength);
+  var characterCounterId = derivativeIdGenerator(uniqueId, 'characterCounter', maxLength && withCharacterCounter);
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
   var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
   var generalInputProps = Object.assign({
@@ -2890,7 +2899,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         message: tip,
         messageType: "tip",
         id: tipId
-      }), maxLength && Number.isInteger(maxLength) && maxLength > 0 && jsxRuntime.jsx(CharCounter, {
+      }), maxLength && Number.isInteger(maxLength) && maxLength > 0 && withCharacterCounter && jsxRuntime.jsx(CharCounter, {
         id: characterCounterId,
         current: text.length,
         max: maxLength
@@ -7973,5 +7982,6 @@ exports.Tooltip = Tooltip;
 exports.Typography = Typography;
 exports.createSelectOptions = createSelectOptions;
 exports.getTextColor = getTextColor;
+exports.inlineElements = inlineElements;
 exports.isTextColor = isTextColor;
 exports.searchFilter = searchFilter;

package/dist/cjs/utils/idGenerator.d.ts

@@ -1,3 +1,3 @@
-export declare const derivativeIdGenerator: (prefix: string, suffix: string, value?: string | number) => string | undefined;
+export declare const derivativeIdGenerator: (prefix: string, suffix: string, value?: string | number | boolean) => string | undefined;
 export declare const idArrayGenerator: (values: (string | undefined)[]) => string[] | undefined;
 export declare const spaceSeparatedIdListGenerator: (values: (string | undefined)[]) => string | undefined;

package/dist/components/TextInput/TextInput.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare const TextInput: React.ForwardRefExoticComponent<{
     multiline?: boolean | undefined;
+    withCharacterCounter?: boolean | undefined;
 } & {
     label?: string | undefined;
     width?: import("csstype").Property.Width<string> | undefined;

package/dist/components/TextInput/TextInput.js

@@ -26,10 +26,12 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
       width = _a$width === void 0 ? textInputTokens.wrapper.defaultWidth : _a$width,
       _a$type = _a.type,
       type = _a$type === void 0 ? 'text' : _a$type,
+      _a$withCharacterCount = _a.withCharacterCounter,
+      withCharacterCounter = _a$withCharacterCount === void 0 ? true : _a$withCharacterCount,
       className = _a.className,
       style = _a.style,
       ariaDescribedby = _a['aria-describedby'],
-      rest = __rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "multiline", "onChange", "id", "width", "type", "className", "style", 'aria-describedby']);
+      rest = __rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "multiline", "onChange", "id", "width", "type", "withCharacterCounter", "className", "style", 'aria-describedby']);
 
   var textAreaRef = useRef(null);
 
@@ -69,7 +71,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var hasLabel = !!label;
   var labelPresence = hasLabel ? 'hasLabel' : 'noLabel';
   var hasMessage = hasErrorMessage || hasTip || !!maxLength;
-  var characterCounterId = derivativeIdGenerator(uniqueId, 'characterCounter', maxLength);
+  var characterCounterId = derivativeIdGenerator(uniqueId, 'characterCounter', maxLength && withCharacterCounter);
   var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
   var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
   var generalInputProps = Object.assign({
@@ -125,7 +127,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
         message: tip,
         messageType: "tip",
         id: tipId
-      }), maxLength && Number.isInteger(maxLength) && maxLength > 0 && jsx(CharCounter, {
+      }), maxLength && Number.isInteger(maxLength) && maxLength > 0 && withCharacterCounter && jsx(CharCounter, {
         id: characterCounterId,
         current: text.length,
         max: maxLength

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

@@ -4,6 +4,7 @@ declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
         multiline?: boolean | undefined;
+        withCharacterCounter?: boolean | undefined;
     } & {
         label?: string | undefined;
         width?: import("csstype").Property.Width<string> | undefined;

package/dist/components/TextInput/TextInput.types.d.ts

@@ -3,4 +3,6 @@ import { InputProps } from '../../helpers';
 export declare type TextInputProps = {
     /**Gjør inputfeltet om til `<textarea>`. */
     multiline?: boolean;
+    /** Spesifiserer om tegntelleren skal vises. */
+    withCharacterCounter?: boolean;
 } & InputProps & InputHTMLAttributes<HTMLTextAreaElement>;

package/dist/components/Typography/Typography.d.ts

@@ -2,6 +2,7 @@ import { ElementType, PropsWithChildren, HTMLAttributes, AnchorHTMLAttributes }
 import { CSSObject } from 'styled-components';
 import { TextColor, OtherTypographyType, AnchorTypographyType, LabelTypographyType } from './Typography.types';
 import { BaseComponentProps } from '../../types';
+export declare const inlineElements: ElementType[];
 export declare function isTextColor(color: string): color is TextColor;
 export declare const getTextColor: (color: TextColor | string) => string;
 export declare type TypographyInteractionProps = {

package/dist/components/Typography/Typography.js

@@ -61,6 +61,12 @@ var getElementType = function getElementType(element) {
   }
 };
 
+var inlineElements = ['a', 'abbr', 'audio', 'b', 'bdi', 'bdo', 'big', 'br', 'button', 'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'label', 'map', 'mark', 'meter', 'noscript', 'object', 'output', 'picture', 'progress', 'q', 'ruby', 's', 'samp', 'script', 'select', 'slot', 'small', 'span', 'strong', 'sub', 'sup', 'svg', 'template', 'textarea', 'time', 'u', 'var', 'video', 'wbr'];
+
+var isInlineElement = function isInlineElement(as) {
+  return inlineElements.indexOf(as) !== -1;
+};
+
 function isTextColor(color) {
   return textColorsArray.indexOf(color) !== -1;
 }
@@ -95,8 +101,9 @@ var StyledTypography = styled.p.withConfig({
   return interactionProps && interactionProps.active && css(["&:active{", "}"], interactionProps.active);
 }, function (_ref5) {
   var withMargins = _ref5.withMargins,
-      typographyType = _ref5.typographyType;
-  return withMargins && typographyType ? css(["", ""], typographyTokens.typographyType[typographyType].margins.base) : css(["margin:0;"]);
+      typographyType = _ref5.typographyType,
+      as = _ref5.as;
+  return withMargins && typographyType && isInlineElement(as) ? css(["", " display:block;"], typographyTokens.typographyType[typographyType].margins.base) : withMargins && typographyType ? css(["", ""], typographyTokens.typographyType[typographyType].margins.base) : css(["margin:0;"]);
 }, function (_ref6) {
   var color = _ref6.color;
   return color && css(["color:", ";"], getTextColor(color));
@@ -162,4 +169,4 @@ var Typography = /*#__PURE__*/forwardRef(function (props, ref) {
   }));
 });
 
-export { Typography, getTextColor, isTextColor };
+export { Typography, getTextColor, inlineElements, isTextColor };

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

@@ -47,6 +47,11 @@ declare const _default: {
                 type: string;
             };
         };
+        as: {
+            control: {
+                type: string;
+            };
+        };
     };
     parameters: {
         controls: {

package/dist/components/Typography/Typography.types.d.ts

@@ -9,4 +9,5 @@ export declare type LabelTypographyType = 'supportingStyleLabel01';
 export declare type OtherTypographyType = TypographyHeadingType | TypographyBodyType | TypographyLeadType | TypographySupportingType;
 export declare type TypographyType = AnchorTypographyType | LabelTypographyType | OtherTypographyType;
 export declare type TextColor = 'interactive' | 'primary' | 'danger' | 'warning' | 'success' | 'onLight' | 'onDark' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'gray6' | 'gray7' | 'gray8' | 'gray9';
+export declare type InlineElement = 'a' | 'abbr' | 'audio' | 'b' | 'bdi' | 'bdo' | 'big' | 'br' | 'button' | 'canvas' | 'cite' | 'code' | 'data' | 'datalist' | 'del' | 'dfn' | 'em' | 'embed' | 'i' | 'iframe' | 'img' | 'input' | 'ins' | 'kbd' | 'label' | 'map' | 'mark' | 'meter' | 'noscript' | 'object' | 'output' | 'picture' | 'progress' | 'q' | 'ruby' | 's' | 'samp' | 'script' | 'select' | 'slot' | 'small' | 'span' | 'strong' | 'sub' | 'sup' | 'svg' | 'template' | 'textarea' | 'time' | 'u' | 'var' | 'video' | 'wbr';
 export {};

package/dist/index.js

@@ -9,7 +9,7 @@ export { Select, createSelectOptions, searchFilter } from './components/Select/S
 export { GlobalMessage } from './components/GlobalMessage/GlobalMessage.js';
 export { LocalMessage } from './components/LocalMessage/LocalMessage.js';
 export { Search } from './components/Search/Search.js';
-export { Typography, getTextColor, isTextColor } from './components/Typography/Typography.js';
+export { Typography, getTextColor, inlineElements, isTextColor } from './components/Typography/Typography.js';
 export { Table } from './components/Table/Table.js';
 export { Body } from './components/Table/Body.js';
 export { Head } from './components/Table/Head.js';

package/dist/utils/idGenerator.d.ts

@@ -1,3 +1,3 @@
-export declare const derivativeIdGenerator: (prefix: string, suffix: string, value?: string | number) => string | undefined;
+export declare const derivativeIdGenerator: (prefix: string, suffix: string, value?: string | number | boolean) => string | undefined;
 export declare const idArrayGenerator: (values: (string | undefined)[]) => string[] | undefined;
 export declare const spaceSeparatedIdListGenerator: (values: (string | undefined)[]) => string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",