@gnist/design-system 3.5.6 → 3.7.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.7.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.6.0...@gnist/design-system@3.7.0) (2025-07-11)
+
+### Features
+
+* add mode prop to TextField ([015a59b](https://github.com/mollerdigital/design-system-design-system/commit/015a59b522fc04d0526a67de9d0e2ecc0fd3396f))
+
+## [3.6.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.5.6...@gnist/design-system@3.6.0) (2025-07-07)
+
+### Features
+
+* AlertBanner message-prop allows React Node ([c911154](https://github.com/mollerdigital/design-system-design-system/commit/c911154f4a3c2b8bea410bf963a9c4b14943a508))
+
 ## [3.5.6](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.5.5...@gnist/design-system@3.5.6) (2025-07-04)
 
 ### Bug Fixes

package/dist/components/feedback/alerts/AlertBanner.cjs

@@ -23,6 +23,6 @@ const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
 const BannerHeading = componentUtils.component("BannerHeading", AlertBanner_css.bannerHeading, "h2");
 const AlertBanner = ({ type, heading, message, dismiss, action, density = "default", headingLevel = "h2", className }) => {
   const text = index.useTranslation((t) => t.components.feedback.alerts);
-  return jsxRuntime.jsxs("div", { className: classNames__default.default(className, AlertBanner_css.banner({ type, density })), children: [jsxRuntime.jsx(Icon.Icon, { type, icon: type, className: AlertBanner_css.icon({ type }) }), jsxRuntime.jsxs("div", { className: AlertBanner_css.mainContentContainer({ density }), children: [heading && jsxRuntime.jsx(BannerHeading, { "$as": headingLevel, children: heading }), dismiss && jsxRuntime.jsx(IconButton.IconButton, { className: AlertBanner_css.closeButton, icon: "close", label: text.dismissLabel, onClick: dismiss }), jsxRuntime.jsx(index$1.TextContainer, { className: AlertBanner_css.messageContainer, children: message }), action && jsxRuntime.jsx(TextButton.TextButton, { density: "compact", className: AlertBanner_css.actionButton, onClick: action.onClick, underline: true, children: action.label })] })] });
+  return jsxRuntime.jsxs("div", { className: classNames__default.default(className, AlertBanner_css.banner({ type, density })), children: [jsxRuntime.jsx(Icon.Icon, { type, icon: type, className: AlertBanner_css.icon({ type }) }), jsxRuntime.jsxs("div", { className: AlertBanner_css.mainContentContainer({ density }), children: [heading && jsxRuntime.jsx(BannerHeading, { "$as": headingLevel, children: heading }), dismiss && jsxRuntime.jsx(IconButton.IconButton, { className: AlertBanner_css.closeButton, icon: "close", label: text.dismissLabel, onClick: dismiss }), typeof message === "string" ? jsxRuntime.jsx(index$1.TextContainer, { className: AlertBanner_css.messageContainer, children: message }) : jsxRuntime.jsx("div", { className: AlertBanner_css.messageContainer, children: message }), action && jsxRuntime.jsx(TextButton.TextButton, { density: "compact", className: AlertBanner_css.actionButton, onClick: action.onClick, underline: true, children: action.label })] })] });
 };
 exports.AlertBanner = AlertBanner;

package/dist/components/feedback/alerts/AlertBanner.d.ts

@@ -1,8 +1,9 @@
 import { DensitySizes } from "../../../foundation/typography";
+import { ReactNode } from "react";
 export interface AlertBannerProps {
     type: "info" | "success" | "warning" | "error";
     heading?: string | undefined;
-    message: string;
+    message: ReactNode;
     dismiss?: () => void;
     action?: {
         label: string;
@@ -14,7 +15,7 @@ export interface AlertBannerProps {
 }
 /** An alert banner displays an important and high-signal message, and provides actions for users to address (or dismiss the banner). They’re meant to be noticed and often requires a user action to be dismissed.
 
- Text is required for all alert banners. The message should be concise and, if applicable, describe the next step that a user can take.
+ Message is required for all alert banners. The message should be concise and, if applicable, describe the next step that a user can take. The message prop can be string or other React Node.
 
  Title and button with a contextual action are optional.
 

package/dist/components/feedback/alerts/AlertBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertBanner.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/alerts/AlertBanner.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,YAAY,EAEf,uCAAmD;AAcpD,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACvB,CAAC;IACF,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAID;;;;;;;GAOG;AAEH,eAAO,MAAM,WAAW,mFASrB,gBAAgB,4CAmClB,CAAC"}
+{"version":3,"file":"AlertBanner.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/alerts/AlertBanner.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,YAAY,EAEf,uCAAmD;AAapD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACvB,CAAC;IACF,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAID;;;;;;;GAOG;AAEH,eAAO,MAAM,WAAW,mFASrB,gBAAgB,4CAuClB,CAAC"}

package/dist/components/feedback/alerts/AlertBanner.js

@@ -19,7 +19,7 @@ import { bannerHeading, icon, mainContentContainer, closeButton, messageContaine
 const BannerHeading = component("BannerHeading", bannerHeading, "h2");
 const AlertBanner = ({ type, heading, message, dismiss, action, density = "default", headingLevel = "h2", className }) => {
   const text = useTranslation((t) => t.components.feedback.alerts);
-  return jsxs("div", { className: classNames(className, banner({ type, density })), children: [jsx(Icon, { type, icon: type, className: icon({ type }) }), jsxs("div", { className: mainContentContainer({ density }), children: [heading && jsx(BannerHeading, { "$as": headingLevel, children: heading }), dismiss && jsx(IconButton, { className: closeButton, icon: "close", label: text.dismissLabel, onClick: dismiss }), jsx(TextContainer, { className: messageContainer, children: message }), action && jsx(TextButton, { density: "compact", className: actionButton, onClick: action.onClick, underline: true, children: action.label })] })] });
+  return jsxs("div", { className: classNames(className, banner({ type, density })), children: [jsx(Icon, { type, icon: type, className: icon({ type }) }), jsxs("div", { className: mainContentContainer({ density }), children: [heading && jsx(BannerHeading, { "$as": headingLevel, children: heading }), dismiss && jsx(IconButton, { className: closeButton, icon: "close", label: text.dismissLabel, onClick: dismiss }), typeof message === "string" ? jsx(TextContainer, { className: messageContainer, children: message }) : jsx("div", { className: messageContainer, children: message }), action && jsx(TextButton, { density: "compact", className: actionButton, onClick: action.onClick, underline: true, children: action.label })] })] });
 };
 export {
   AlertBanner

package/dist/components/inputs/textFields/TextField.cjs

@@ -23,17 +23,40 @@ const shared = require("../shared.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
 const TextField = React.forwardRef(function TextField2(props, ref) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const { wrapperProps, contentProps, commonInputProps } = shared.useInputFieldLogic(props);
   const { inputProps } = shared.getInputFieldProps(props);
+  const isModeCurrencyOrNumberFormatting = ((_a = props.mode) == null ? void 0 : _a.style) === "currency" || ((_b = props.mode) == null ? void 0 : _b.style) === "numberSpacing";
+  const onChangeHandler = (event) => {
+    var _a2;
+    if (isModeCurrencyOrNumberFormatting) {
+      event.target.value = event.target.value.replace(new RegExp("(?<!^)-|[^\\d\\W.,]+|[.,]|\\s+", "g"), "");
+    }
+    (_a2 = inputProps.onChange) == null ? void 0 : _a2.call(inputProps, event);
+  };
+  if (isModeCurrencyOrNumberFormatting && !!inputProps.value) {
+    inputProps.type = "text";
+    inputProps.inputMode = "numeric";
+    const number = inputProps.value;
+    const isNegativeNumber = number[0] === "-";
+    inputProps.value = isNegativeNumber ? inputProps.value.slice(1) : inputProps.value;
+    const numberPrefix = isNegativeNumber ? "-" : "";
+    const formattedValue = new Intl.NumberFormat("nb-NB", {
+      style: "currency",
+      currency: "NOK",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 5
+    }).format(parseFloat(inputProps.value)).replaceAll(/[^0-9.,\W]/g, "").trim();
+    inputProps.value = numberPrefix + formattedValue;
+  }
   return jsxRuntime.jsxs("span", { ref, className: classNames__default.default(wrapperProps.className, inputField_css.wrapperStyle), children: [props.leadingIcon && shared.isClickableIcon(props.leadingIcon) && jsxRuntime.jsx("button", { className: iconButtonOverlay_css.iconButtonOverlayRecipe({
     placement: "left",
     density: wrapperProps.density
   }), title: props.leadingIcon.title, onClick: props.leadingIcon.onClick }), jsxRuntime.jsxs("label", { htmlFor: props.id, className: inputField_css.inputFieldWrapperRecipe({
     disabled: props.disabled,
     density: props.density,
-    validityType: (_a = props.validity) == null ? void 0 : _a.type
-  }), children: [jsxRuntime.jsx("input", { ...commonInputProps, ...inputProps, className: classNames__default.default(inputField_css.inputFieldStyle, inputProps.className), style: dynamic.assignInlineVars({
+    validityType: (_c = props.validity) == null ? void 0 : _c.type
+  }), children: [jsxRuntime.jsx("input", { ...commonInputProps, ...inputProps, value: inputProps.value, onChange: onChangeHandler, className: classNames__default.default(inputField_css.inputFieldStyle, inputProps.className), style: dynamic.assignInlineVars({
     [inputFieldConstants_css.preInputWidth]: wrapperProps.preInputWidth,
     [inputFieldConstants_css.postInputWidth]: wrapperProps.postInputWidth
   }), onFocus: (event) => {
@@ -44,7 +67,7 @@ const TextField = React.forwardRef(function TextField2(props, ref) {
     (_b2 = inputProps.onFocus) == null ? void 0 : _b2.call(inputProps, event);
   } }), jsxRuntime.jsxs("span", { className: inputField_css.inputContentWrapper({ density: props.density }), children: [props.leadingIcon && jsxRuntime.jsx(Icon.Icon, { icon: shared.isClickableIcon(props.leadingIcon) ? props.leadingIcon.icon : props.leadingIcon, className: atoms_css_js.atoms({ paddingRight: "xxs" }) }), props.prefix && jsxRuntime.jsx("span", { ref: contentProps.prefixRef, "aria-hidden": true, className: suffixPrefix_css.prefixStyle, children: props.prefix }), jsxRuntime.jsx("label", { id: contentProps.labelId, className: labelStyles_css.labelStyle({
     density: props.density,
-    validityType: (_b = props.validity) == null ? void 0 : _b.type,
+    validityType: (_d = props.validity) == null ? void 0 : _d.type,
     isElevated: !!props.value || props.type === "date" || props.type === "time",
     disabled: props.disabled
   }), style: {

package/dist/components/inputs/textFields/TextField.d.ts

@@ -1,12 +1,17 @@
 import { InputHTMLAttributes } from "react";
 import { TextInputProps } from "../shared.js";
-export type TextFieldProps = TextInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "placeholder" | "value" | "type"> & {
+export type TextFieldModeProps = {
     /**
-     * Input type
-     * @default text
+     * Applies number spacing and numeric input mode
      */
-    type?: "email" | "search" | "tel" | "text" | "url" | "password" | "number" | "date" | "time";
+    mode?: {
+        style: "numberSpacing";
+    } | {
+        style: "currency";
+        currency: "NOK";
+    };
 };
+export type TextFieldProps = TextInputProps & TextFieldModeProps & Omit<InputHTMLAttributes<HTMLInputElement>, "placeholder" | "value">;
 /**
 A text field is an input that allows a user to write or edit text. Text fields typically appear in forms and dialogs.
 
@@ -18,11 +23,5 @@ _Accessibility note:_ The leading/trailing icon and prefix/suffix text will not
 
 Documentation: [TextField](https://gnist.moller.no/developers/components/latest/?path=/docs/components-inputs-textfields-textfield--docs)
  */
-export declare const TextField: import("react").ForwardRefExoticComponent<TextInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "placeholder"> & {
-    /**
-     * Input type
-     * @default text
-     */
-    type?: "email" | "search" | "tel" | "text" | "url" | "password" | "number" | "date" | "time";
-} & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const TextField: import("react").ForwardRefExoticComponent<TextInputProps & TextFieldModeProps & Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "placeholder"> & import("react").RefAttributes<HTMLSpanElement>>;
 //# sourceMappingURL=TextField.d.ts.map

package/dist/components/inputs/textFields/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/TextField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA4B,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAetE,OAAO,EAGH,cAAc,EAEjB,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,cAAc,GAAG,cAAc,GACvC,IAAI,CACA,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,aAAa,GAAG,OAAO,GAAG,MAAM,CACnC,GAAG;IACA;;;OAGG;IACH,IAAI,CAAC,EACC,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,GACN,KAAK,GACL,UAAU,GACV,QAAQ,GACR,MAAM,GACN,MAAM,CAAC;CAChB,CAAC;AAEN;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;IA3Bd;;;OAGG;WAEG,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,GACN,KAAK,GACL,UAAU,GACV,QAAQ,GACR,MAAM,GACN,MAAM;mDAuJlB,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/TextField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA4B,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAetE,OAAO,EAGH,cAAc,EAEjB,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,kBAAkB,GAAG;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,eAAe,CAAA;KAAE,GAAG;QAAE,KAAK,EAAE,UAAU,CAAC;QAAC,QAAQ,EAAE,KAAK,CAAA;KAAE,CAAC;CAC9E,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,GACvC,kBAAkB,GAClB,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,CAAC;AAEzE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,wMAqLpB,CAAC"}

package/dist/components/inputs/textFields/TextField.js

@@ -19,17 +19,40 @@ import { labelStyle } from "../shared-styles/labelStyles.css.js";
 import { prefixStyle, suffixStyle } from "../shared-styles/suffixPrefix.css.js";
 import { useInputFieldLogic, getInputFieldProps, isClickableIcon } from "../shared.js";
 const TextField = forwardRef(function TextField2(props, ref) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const { wrapperProps, contentProps, commonInputProps } = useInputFieldLogic(props);
   const { inputProps } = getInputFieldProps(props);
+  const isModeCurrencyOrNumberFormatting = ((_a = props.mode) == null ? void 0 : _a.style) === "currency" || ((_b = props.mode) == null ? void 0 : _b.style) === "numberSpacing";
+  const onChangeHandler = (event) => {
+    var _a2;
+    if (isModeCurrencyOrNumberFormatting) {
+      event.target.value = event.target.value.replace(new RegExp("(?<!^)-|[^\\d\\W.,]+|[.,]|\\s+", "g"), "");
+    }
+    (_a2 = inputProps.onChange) == null ? void 0 : _a2.call(inputProps, event);
+  };
+  if (isModeCurrencyOrNumberFormatting && !!inputProps.value) {
+    inputProps.type = "text";
+    inputProps.inputMode = "numeric";
+    const number = inputProps.value;
+    const isNegativeNumber = number[0] === "-";
+    inputProps.value = isNegativeNumber ? inputProps.value.slice(1) : inputProps.value;
+    const numberPrefix = isNegativeNumber ? "-" : "";
+    const formattedValue = new Intl.NumberFormat("nb-NB", {
+      style: "currency",
+      currency: "NOK",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 5
+    }).format(parseFloat(inputProps.value)).replaceAll(/[^0-9.,\W]/g, "").trim();
+    inputProps.value = numberPrefix + formattedValue;
+  }
   return jsxs("span", { ref, className: classNames(wrapperProps.className, wrapperStyle), children: [props.leadingIcon && isClickableIcon(props.leadingIcon) && jsx("button", { className: iconButtonOverlayRecipe({
     placement: "left",
     density: wrapperProps.density
   }), title: props.leadingIcon.title, onClick: props.leadingIcon.onClick }), jsxs("label", { htmlFor: props.id, className: inputFieldWrapperRecipe({
     disabled: props.disabled,
     density: props.density,
-    validityType: (_a = props.validity) == null ? void 0 : _a.type
-  }), children: [jsx("input", { ...commonInputProps, ...inputProps, className: classNames(inputFieldStyle, inputProps.className), style: assignInlineVars({
+    validityType: (_c = props.validity) == null ? void 0 : _c.type
+  }), children: [jsx("input", { ...commonInputProps, ...inputProps, value: inputProps.value, onChange: onChangeHandler, className: classNames(inputFieldStyle, inputProps.className), style: assignInlineVars({
     [preInputWidth]: wrapperProps.preInputWidth,
     [postInputWidth]: wrapperProps.postInputWidth
   }), onFocus: (event) => {
@@ -40,7 +63,7 @@ const TextField = forwardRef(function TextField2(props, ref) {
     (_b2 = inputProps.onFocus) == null ? void 0 : _b2.call(inputProps, event);
   } }), jsxs("span", { className: inputContentWrapper({ density: props.density }), children: [props.leadingIcon && jsx(Icon, { icon: isClickableIcon(props.leadingIcon) ? props.leadingIcon.icon : props.leadingIcon, className: atoms({ paddingRight: "xxs" }) }), props.prefix && jsx("span", { ref: contentProps.prefixRef, "aria-hidden": true, className: prefixStyle, children: props.prefix }), jsx("label", { id: contentProps.labelId, className: labelStyle({
     density: props.density,
-    validityType: (_b = props.validity) == null ? void 0 : _b.type,
+    validityType: (_d = props.validity) == null ? void 0 : _d.type,
     isElevated: !!props.value || props.type === "date" || props.type === "time",
     disabled: props.disabled
   }), style: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gnist/design-system",
-    "version": "3.5.6",
+    "version": "3.7.0",
     "license": "UNLICENSED",
     "type": "module",
     "main": "dist/index.cjs",
@@ -102,5 +102,5 @@
             "optional": true
         }
     },
-    "gitHead": "78272447930d8da86b147c877ad67c28fdfe6d50"
+    "gitHead": "14c41444b303c99e0b9eca32b48848f84a07213c"
 }