@commercetools-uikit/messages 18.0.0 → 18.2.0

package/README.md

@@ -1,29 +1,29 @@
-# Messages: WarningMessage
+# Messages: AdditionalInfoMessage
 
 ## Description
 
-Represents an warning message.
+Represents an additional info message.
 
 ## Usage
 
 ```js
-import { WarningMessage } from '@commercetools-uikit/messages';
+import { AdditionalInfoMessage } from '@commercetools-uikit/messages';
 
-<WarningMessage>This is a duplicate of {`${duplicate}`}</WarningMessage>;
+<AdditionalInfoMessage>Something went wrong</AdditionalInfoMessage>;
 ```
 
 ## Properties
 
 | Props         | Type           | Required | Values | Default | Description                                                          |
 | ------------- | -------------- | :------: | ------ | ------- | -------------------------------------------------------------------- |
-| `children`    | `node`         | ✅ (\*)  | -      | -       | Warning message, either as string or node                            |
+| `children`    | `node`         | ✅ (\*)  | -      | -       | Info message, either as string or node                               |
 | `intlMessage` | `intl message` | ✅ (\*)  | -      | -       | An intl message object that will be rendered with `FormattedMessage` |
 
 > `*`: `children` is required only if `intlMessage` is not provided
 
 Main functions and use cases are:
 
-- Display validation warnings of input fields
+- Display neutral information of input fields
 
 # Messages: ErrorMessage
 
@@ -51,3 +51,30 @@ import { ErrorMessage } from '@commercetools-uikit/messages';
 Main functions and use cases are:
 
 - Display validation errors of input fields
+
+# Messages: WarningMessage
+
+## Description
+
+Represents an warning message.
+
+## Usage
+
+```js
+import { WarningMessage } from '@commercetools-uikit/messages';
+
+<WarningMessage>This is a duplicate of {`${duplicate}`}</WarningMessage>;
+```
+
+## Properties
+
+| Props         | Type           | Required | Values | Default | Description                                                          |
+| ------------- | -------------- | :------: | ------ | ------- | -------------------------------------------------------------------- |
+| `children`    | `node`         | ✅ (\*)  | -      | -       | Warning message, either as string or node                            |
+| `intlMessage` | `intl message` | ✅ (\*)  | -      | -       | An intl message object that will be rendered with `FormattedMessage` |
+
+> `*`: `children` is required only if `intlMessage` is not provided
+
+Main functions and use cases are:
+
+- Display validation warnings of input fields

package/dist/commercetools-uikit-messages.cjs.dev.js

@@ -71,9 +71,37 @@ WarningMessage.propTypes = process.env.NODE_ENV !== "production" ? {
 WarningMessage.displayName = 'WarningMessage';
 var WarningMessage$1 = WarningMessage;
 
+const AdditionalInfoMessage = props => {
+  // We use a `Text.Detail` component prop if the receive message is a react-intl message descriptor
+  if (props.message && typeof props.message === 'object' && 'id' in props.message) {
+    return jsxRuntime.jsx(Text__default["default"].Detail, {
+      id: props.id,
+      intlMessage: props.message,
+      tone: "tertiary"
+    });
+  }
+  return jsxRuntime.jsx(Text__default["default"].Detail, {
+    id: props.id,
+    tone: "tertiary",
+    children: props.message
+  });
+};
+AdditionalInfoMessage.propTypes = process.env.NODE_ENV !== "production" ? {
+  id: _pt__default["default"].string,
+  message: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].node, _pt__default["default"].shape({
+    id: _pt__default["default"].string.isRequired,
+    description: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].object]),
+    defaultMessage: _pt__default["default"].string.isRequired,
+    values: _pt__default["default"].objectOf(_pt__default["default"].node)
+  })]).isRequired
+} : {};
+AdditionalInfoMessage.displayName = 'AdditionalInfoMessage';
+var AdditionalInfoMessage$1 = AdditionalInfoMessage;
+
 // NOTE: This string will be replaced on build time with the package version.
-var version = "18.0.0";
+var version = "18.2.0";
 
+exports.AdditionalInfoMessage = AdditionalInfoMessage$1;
 exports.ErrorMessage = ErrorMessage$1;
 exports.WarningMessage = WarningMessage$1;
 exports.version = version;

package/dist/commercetools-uikit-messages.cjs.prod.js

@@ -52,9 +52,29 @@ WarningMessage.propTypes = {};
 WarningMessage.displayName = 'WarningMessage';
 var WarningMessage$1 = WarningMessage;
 
+const AdditionalInfoMessage = props => {
+  // We use a `Text.Detail` component prop if the receive message is a react-intl message descriptor
+  if (props.message && typeof props.message === 'object' && 'id' in props.message) {
+    return jsxRuntime.jsx(Text__default["default"].Detail, {
+      id: props.id,
+      intlMessage: props.message,
+      tone: "tertiary"
+    });
+  }
+  return jsxRuntime.jsx(Text__default["default"].Detail, {
+    id: props.id,
+    tone: "tertiary",
+    children: props.message
+  });
+};
+AdditionalInfoMessage.propTypes = {};
+AdditionalInfoMessage.displayName = 'AdditionalInfoMessage';
+var AdditionalInfoMessage$1 = AdditionalInfoMessage;
+
 // NOTE: This string will be replaced on build time with the package version.
-var version = "18.0.0";
+var version = "18.2.0";
 
+exports.AdditionalInfoMessage = AdditionalInfoMessage$1;
 exports.ErrorMessage = ErrorMessage$1;
 exports.WarningMessage = WarningMessage$1;
 exports.version = version;

package/dist/commercetools-uikit-messages.esm.js

@@ -54,7 +54,34 @@ WarningMessage.propTypes = process.env.NODE_ENV !== "production" ? {
 WarningMessage.displayName = 'WarningMessage';
 var WarningMessage$1 = WarningMessage;
 
+const AdditionalInfoMessage = props => {
+  // We use a `Text.Detail` component prop if the receive message is a react-intl message descriptor
+  if (props.message && typeof props.message === 'object' && 'id' in props.message) {
+    return jsx(Text.Detail, {
+      id: props.id,
+      intlMessage: props.message,
+      tone: "tertiary"
+    });
+  }
+  return jsx(Text.Detail, {
+    id: props.id,
+    tone: "tertiary",
+    children: props.message
+  });
+};
+AdditionalInfoMessage.propTypes = process.env.NODE_ENV !== "production" ? {
+  id: _pt.string,
+  message: _pt.oneOfType([_pt.string, _pt.node, _pt.shape({
+    id: _pt.string.isRequired,
+    description: _pt.oneOfType([_pt.string, _pt.object]),
+    defaultMessage: _pt.string.isRequired,
+    values: _pt.objectOf(_pt.node)
+  })]).isRequired
+} : {};
+AdditionalInfoMessage.displayName = 'AdditionalInfoMessage';
+var AdditionalInfoMessage$1 = AdditionalInfoMessage;
+
 // NOTE: This string will be replaced on build time with the package version.
-var version = "18.0.0";
+var version = "18.2.0";
 
-export { ErrorMessage$1 as ErrorMessage, WarningMessage$1 as WarningMessage, version };
+export { AdditionalInfoMessage$1 as AdditionalInfoMessage, ErrorMessage$1 as ErrorMessage, WarningMessage$1 as WarningMessage, version };

package/dist/declarations/src/additional-info-message/additional-info-message.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export type TIntlMessageDescriptor = {
+    id: string;
+    description?: string | object;
+    defaultMessage: string;
+    values?: Record<string, ReactNode>;
+};
+export type TAdditionalInfoMessageProps = {
+    id?: string;
+    message: string | ReactNode | TIntlMessageDescriptor;
+};
+declare const AdditionalInfoMessage: {
+    (props: TAdditionalInfoMessageProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default AdditionalInfoMessage;

package/dist/declarations/src/additional-info-message/export-types.d.ts

@@ -0,0 +1,3 @@
+import type { TAdditionalInfoMessageProps as AdditionalInfoProps, TIntlMessageDescriptor as IntlMessageDescriptor } from "./additional-info-message.js";
+export type TAdditionalInfoProps = AdditionalInfoProps;
+export type TIntlMessageDescriptor = IntlMessageDescriptor;

package/dist/declarations/src/additional-info-message/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./additional-info-message.js";
+export * from "./export-types.js";

package/dist/declarations/src/index.d.ts

@@ -1,4 +1,6 @@
 export { default as ErrorMessage } from "./error-message/index.js";
 export { default as WarningMessage } from "./warning-message/index.js";
+export { default as AdditionalInfoMessage } from "./additional-info-message/index.js";
 export * from "./error-message/export-types.js";
+export { type TAdditionalInfoProps } from "./additional-info-message/export-types.js";
 export { default as version } from "./version.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/messages",
   "description": "A component to render error or warning messages within together with form fields.",
-  "version": "18.0.0",
+  "version": "18.2.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,8 +21,8 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/text": "18.0.0",
-    "@commercetools-uikit/utils": "18.0.0",
+    "@commercetools-uikit/text": "18.2.0",
+    "@commercetools-uikit/utils": "18.2.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "prop-types": "15.8.1",