@dt-dds/react-message 1.0.0-beta.89 → 1.0.0-beta.91

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @dt-ui/react-message
 
+## 1.0.0-beta.91
+
+### Minor Changes
+
+- feat: add breakpoint to message
+
+### Patch Changes
+
+- @dt-dds/react-button@1.0.0-beta.75
+
+## 1.0.0-beta.90
+
+### Patch Changes
+
+- fix: set full width on message
+  - @dt-dds/react-button@1.0.0-beta.74
+
 ## 1.0.0-beta.89
 
 ### Minor Changes

package/README.md

@@ -39,7 +39,7 @@ export const App = () => {
 | `title`       | `string`              | -              | Optional Text to be presented as Title within the Message.Content, It should have text character count limit: 50.                                                        |
 | `description` | `string`              | -              | Text to be presented as Description within the Message.Content, It should have text character count limit: 230.                                                          |
 | `onClose`     | `function`            | -              | When provided, a close button is displayed and, when clicked, it triggers this function.                                                                                 |
-| `orientation` | `Orientation`         | `'horizontal'` | Sets the orientation of the message component.                                                                                                                           |
+| `orientation` | `Orientation`         | `'horizontal'` | Sets the orientation of the message component. On mobile the orientation is vertical                                                                                     |
 
 ### Message.Actions
 

package/dist/index.d.mts

@@ -23,7 +23,7 @@ interface ActionsProps extends BaseProps {
 }
 
 declare const Message: {
-    ({ children, dataTestId, style, type, onClose, description, title, orientation, }: MessageProps): react_jsx_runtime.JSX.Element;
+    ({ children, dataTestId, style, type, onClose, description, title, orientation: propOrientation, }: MessageProps): react_jsx_runtime.JSX.Element;
     Actions({ children, dataTestId, type }: ActionsProps): react_jsx_runtime.JSX.Element;
 };
 

package/dist/index.d.ts

@@ -23,7 +23,7 @@ interface ActionsProps extends BaseProps {
 }
 
 declare const Message: {
-    ({ children, dataTestId, style, type, onClose, description, title, orientation, }: MessageProps): react_jsx_runtime.JSX.Element;
+    ({ children, dataTestId, style, type, onClose, description, title, orientation: propOrientation, }: MessageProps): react_jsx_runtime.JSX.Element;
     Actions({ children, dataTestId, type }: ActionsProps): react_jsx_runtime.JSX.Element;
 };
 

package/dist/index.js

@@ -110,6 +110,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/Message.tsx
 var import_react_box = __toESM(require_dist());
+var import_react_core = require("@dt-dds/react-core");
 var import_react_icon = require("@dt-dds/react-icon");
 var import_react_typography = require("@dt-dds/react-typography");
 var import_react = require("@emotion/react");
@@ -136,6 +137,7 @@ var MESSAGE_ICONS = {
 var import_styled = __toESM(require("@emotion/styled"));
 var MessageStyled = import_styled.default.div`
   display: grid;
+  width: 100%;
   padding: ${({ theme }) => `${theme.spacing.spacing_40} ${theme.spacing.spacing_50}`};
   border-radius: ${({ theme }) => theme.shape.message};
 
@@ -232,10 +234,12 @@ var Message = ({
   onClose,
   description,
   title,
-  orientation = "horizontal"
+  orientation: propOrientation = "horizontal"
 }) => {
   const theme = (0, import_react.useTheme)();
   const isDefault = type === OMessageType.Default;
+  const isMobile = (0, import_react_core.useMedia)(`(max-width: ${theme.breakpoints.mq2}px)`);
+  const orientation = isMobile ? "vertical" : propOrientation || "horizontal";
   const isHorizontal = orientation === "horizontal";
   const isDismissible = !!onClose;
   const textColor = isDefault ? "content.default" : `${type}.dark`;
@@ -276,10 +280,16 @@ var Message = ({
               alignItems: isHorizontal ? "center" : "start"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_box.Box, { style: { alignItems: "flex-start" }, children: [
-                title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_typography.Typography, { color: textColor, fontStyles: "bodyLgBold", children: title }) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_typography.Typography, { color: textColor, fontStyles: "bodyLgRegular", children: description })
-              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_react_box.Box,
+                {
+                  style: { alignItems: "flex-start", gap: theme.spacing.spacing_10 },
+                  children: [
+                    title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_typography.Typography, { color: textColor, fontStyles: "bodyLgBold", children: title }) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_typography.Typography, { color: textColor, fontStyles: "bodyLgRegular", children: description })
+                  ]
+                }
+              ),
               clonedChildren
             ]
           }

package/dist/index.mjs

@@ -103,6 +103,7 @@ var require_dist = __commonJS({
 
 // src/Message.tsx
 var import_react_box = __toESM(require_dist());
+import { useMedia } from "@dt-dds/react-core";
 import { Icon } from "@dt-dds/react-icon";
 import { Typography } from "@dt-dds/react-typography";
 import { useTheme } from "@emotion/react";
@@ -129,6 +130,7 @@ var MESSAGE_ICONS = {
 import styled from "@emotion/styled";
 var MessageStyled = styled.div`
   display: grid;
+  width: 100%;
   padding: ${({ theme }) => `${theme.spacing.spacing_40} ${theme.spacing.spacing_50}`};
   border-radius: ${({ theme }) => theme.shape.message};
 
@@ -225,10 +227,12 @@ var Message = ({
   onClose,
   description,
   title,
-  orientation = "horizontal"
+  orientation: propOrientation = "horizontal"
 }) => {
   const theme = useTheme();
   const isDefault = type === OMessageType.Default;
+  const isMobile = useMedia(`(max-width: ${theme.breakpoints.mq2}px)`);
+  const orientation = isMobile ? "vertical" : propOrientation || "horizontal";
   const isHorizontal = orientation === "horizontal";
   const isDismissible = !!onClose;
   const textColor = isDefault ? "content.default" : `${type}.dark`;
@@ -269,10 +273,16 @@ var Message = ({
               alignItems: isHorizontal ? "center" : "start"
             },
             children: [
-              /* @__PURE__ */ jsxs(import_react_box.Box, { style: { alignItems: "flex-start" }, children: [
-                title ? /* @__PURE__ */ jsx(Typography, { color: textColor, fontStyles: "bodyLgBold", children: title }) : null,
-                /* @__PURE__ */ jsx(Typography, { color: textColor, fontStyles: "bodyLgRegular", children: description })
-              ] }),
+              /* @__PURE__ */ jsxs(
+                import_react_box.Box,
+                {
+                  style: { alignItems: "flex-start", gap: theme.spacing.spacing_10 },
+                  children: [
+                    title ? /* @__PURE__ */ jsx(Typography, { color: textColor, fontStyles: "bodyLgBold", children: title }) : null,
+                    /* @__PURE__ */ jsx(Typography, { color: textColor, fontStyles: "bodyLgRegular", children: description })
+                  ]
+                }
+              ),
               clonedChildren
             ]
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dt-dds/react-message",
-  "version": "1.0.0-beta.89",
+  "version": "1.0.0-beta.91",
   "license": "MIT",
   "exports": {
     ".": "./dist/index.js"
@@ -20,7 +20,7 @@
     "test:update:snapshot": "jest -u"
   },
   "dependencies": {
-    "@dt-dds/react-button": "1.0.0-beta.73",
+    "@dt-dds/react-button": "1.0.0-beta.75",
     "@dt-dds/react-core": "1.0.0-beta.50",
     "@dt-dds/react-icon": "1.0.0-beta.51",
     "@dt-dds/react-typography": "1.0.0-beta.41",