@dt-dds/react-message 1.0.0-beta.100

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Daimler Truck AG.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,94 @@
+# Message Package
+
+This component fills the width of the container where is placed and its height varies depending on the content in it.
+The usage of this component is to show a message to call attention to something, be it useful information or a warning message. They should be used to provide context in proximity to a piece of content.
+Furthermore, it can be used to add an action like a link, by passing it as a children.
+
+## Usage
+
+```jsx
+import { Message, Button } from '@dt-dds/react';
+
+export const App = () => {
+  const title = 'Some Title';
+  const description = 'Some Description';
+  const type = 'Error';
+
+  return (
+    <Message type={type} title={title} description={description}>
+      <Message.Actions>
+        <Button size='small' variant='text'>
+          View action
+        </Button>
+      </Message.Actions>
+    </Message>
+  );
+};
+```
+
+## API
+
+### Message
+
+| Property      | Type                  | Default        | Description                                                                                                                                                              |
+| ------------- | --------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `children`    | `ReactNode`           | -              | Child components to be rendered. There is flexibility on what the content can be, but the recommendation is that it should be a link with a character count limit of 25. |
+| `dataTestId`  | `string`              | `'message'`    | Customizable test identifier.                                                                                                                                            |
+| `style`       | `React.CSSProperties` | -              | Customizable styles                                                                                                                                                      |
+| `type`        | `MessageType`         | `'default'`    | Sets the type of the Message, responsible for the icon and It's color, the background color and color of the dashed border                                               |
+| `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. On mobile the orientation is vertical                                                                                     |
+
+### Message.Actions
+
+| Property     | Type        | Default            | Description                                      |
+| ------------ | ----------- | ------------------ | ------------------------------------------------ |
+| `children`   | `ReactNode` | -                  | Container to render actions. Button is expected. |
+| `dataTestId` | `string`    | `'message-action'` | Customizable test identifier for the action.     |
+
+## Stack
+
+- [TypeScript](https://www.typescriptlang.org/) for static type checking
+- [React](https://reactjs.org/) — JavaScript library for user interfaces
+- [Emotion](https://emotion.sh/docs/introduction) — for writing css styles with JavaScript
+- [Storybook](https://storybook.js.org/) — UI component environment powered by Vite
+- [Jest](https://jestjs.io/) - JavaScript Testing Framework
+- [React Testing Library](https://testing-library.com/) - to test UI components in a user-centric way
+- [ESLint](https://eslint.org/) for code linting
+- [Prettier](https://prettier.io) for code formatting
+- [Tsup](https://github.com/egoist/tsup) — TypeScript bundler powered by esbuild
+- [Yarn](https://yarnpkg.com/) from managing packages
+
+## Commands
+
+- `yarn build` - Build the package
+- `yarn dev` - Run the package locally
+- `yarn lint` - Lint all files within this package
+- `yarn test` - Run all unit tests
+- `yarn test:report` - Open the test coverage report
+- `yarn test:update:snapshot` - Run all unit tests and update the snapshot
+
+## Compilation
+
+Running `yarn build` from the root of the package will use [tsup](https://tsup.egoist.dev/) to compile the raw TypeScript and React code to plain JavaScript.
+
+The `/dist` folder contains the compiled output.
+
+```bash
+message
+└── dist
+    ├── index.d.ts  <-- Types
+    ├── index.js    <-- CommonJS version
+    └── index.mjs   <-- ES Modules version
+    ...
+```
+
+## Versioning
+
+Follows [semantic versioning](https://semver.org/)
+
+## &copy; License
+
+Licensed under [MIT License](LICENSE.md)

package/dist/index.d.mts

@@ -0,0 +1,35 @@
+import { CustomTheme } from '@dt-dds/themes';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { BaseProps, Orientation } from '@dt-dds/react-core';
+import { ReactNode } from 'react';
+
+declare const OMessageType: {
+    readonly Default: "default";
+    readonly Error: "error";
+    readonly Info: "informative";
+    readonly Success: "success";
+    readonly Warning: "warning";
+};
+type MessageType = (typeof OMessageType)[keyof typeof OMessageType];
+interface MessageProps extends BaseProps {
+    type: MessageType;
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    title?: string;
+    description: ReactNode;
+    orientation?: Orientation;
+}
+interface ActionsProps extends BaseProps {
+    type?: MessageType;
+}
+
+declare const Message: {
+    ({ 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;
+};
+
+declare module '@emotion/react' {
+    interface Theme extends CustomTheme {
+    }
+}
+
+export { Message };

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+import { CustomTheme } from '@dt-dds/themes';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { BaseProps, Orientation } from '@dt-dds/react-core';
+import { ReactNode } from 'react';
+
+declare const OMessageType: {
+    readonly Default: "default";
+    readonly Error: "error";
+    readonly Info: "informative";
+    readonly Success: "success";
+    readonly Warning: "warning";
+};
+type MessageType = (typeof OMessageType)[keyof typeof OMessageType];
+interface MessageProps extends BaseProps {
+    type: MessageType;
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    title?: string;
+    description: ReactNode;
+    orientation?: Orientation;
+}
+interface ActionsProps extends BaseProps {
+    type?: MessageType;
+}
+
+declare const Message: {
+    ({ 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;
+};
+
+declare module '@emotion/react' {
+    interface Theme extends CustomTheme {
+    }
+}
+
+export { Message };

package/dist/index.js

@@ -0,0 +1,322 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// ../box/dist/index.js
+var require_dist = __commonJS({
+  "../box/dist/index.js"(exports2, module2) {
+    "use strict";
+    var __create2 = Object.create;
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __getProtoOf2 = Object.getPrototypeOf;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from === "object" || typeof from === "function") {
+        for (let key of __getOwnPropNames2(from))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
+      // If the importer is in node compatibility mode or this is not an ESM
+      // file that has been converted to a CommonJS file using a Babel-
+      // compatible transform (i.e. "__esModule" has not been set), then set
+      // "default" to the CommonJS "module.exports" for node compatibility.
+      isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", { value: mod, enumerable: true }) : target,
+      mod
+    ));
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var index_exports2 = {};
+    __export2(index_exports2, {
+      Box: () => Box2
+    });
+    module2.exports = __toCommonJS2(index_exports2);
+    var import_styled2 = __toESM2(require("@emotion/styled"));
+    var BoxStyled = import_styled2.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+    var import_jsx_runtime2 = require("react/jsx-runtime");
+    var Box2 = ({
+      dataTestId,
+      children,
+      element = "div",
+      style
+    }) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BoxStyled, { as: element, "data-testid": dataTestId, style, children });
+    };
+  }
+});
+
+// index.ts
+var index_exports = {};
+__export(index_exports, {
+  Message: () => Message
+});
+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");
+var import_react2 = require("react");
+
+// src/types/index.ts
+var OMessageType = {
+  Default: "default",
+  Error: "error",
+  Info: "informative",
+  Success: "success",
+  Warning: "warning"
+};
+
+// src/constants/index.ts
+var MESSAGE_ICONS = {
+  [OMessageType.Error]: "error",
+  [OMessageType.Info]: "info",
+  [OMessageType.Success]: "check_circle",
+  [OMessageType.Warning]: "warning"
+};
+
+// src/Message.styled.ts
+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};
+
+  ${({ theme, messageType, orientation }) => {
+  const isDefault = messageType === OMessageType.Default;
+  const background = isDefault ? theme.palette.surface.light : theme.palette[messageType].light;
+  const border = isDefault ? theme.palette.border.medium : theme.palette[messageType].default;
+  const baseGrid = `
+      grid-template-columns: ${isDefault ? "1fr fit-content(100%)" : "fit-content(100%) 1fr fit-content(100%)"};
+      background-color: ${background};
+      border: 1px solid ${border};
+      gap: ${theme.spacing.spacing_50}
+    `;
+  if (orientation === "vertical") {
+    return `
+        ${baseGrid};
+        grid-template-columns: 1fr fit-content(100%);
+        gap: ${theme.spacing.spacing_30};
+
+        & > :nth-child(1) {
+          grid-column: 1;
+          grid-row: 1;
+        }
+
+        ${isDefault ? `
+                & > :nth-child(2) {
+                  grid-column: 2;
+                  grid-row: 1;
+                }
+              ` : `
+                & > :nth-child(2) {
+                  grid-column: 1;
+                  grid-row: 2;
+                }
+                & > :nth-child(3) {
+                  grid-column: 2;
+                  grid-row: 1;
+                }
+              `}
+      `;
+  }
+  return baseGrid;
+}}
+`;
+var MessageActionsStyled = import_styled.default.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme }) => theme.spacing.spacing_20};
+
+  button {
+    ${({ theme, messageType }) => {
+  const isDefault = messageType === "default";
+  const color = isDefault ? theme.palette.content.default : theme.palette[messageType].dark;
+  const hoverBg = isDefault ? theme.palette.surface.medium : theme.palette[messageType].medium;
+  return `
+        color: ${color};
+
+        &:hover {
+          background-color: ${hoverBg};
+          color: ${color};
+        }
+      `;
+}}
+  }
+`;
+var MessageButtonCloseStyled = import_styled.default.button`
+  ${({ theme, messageType, orientation }) => `
+    border: 0;
+    cursor: pointer;
+    background: transparent;
+    display: flex;
+    height: fit-content;
+
+    ${orientation === "horizontal" && "align-self: center"};
+  
+    &:focus-visible {
+      outline: 2px solid ${theme.palette.primary.default};
+      outline-offset: 1px;
+    }
+
+    &:hover {
+      background-color: ${messageType === OMessageType.Default ? theme.palette.surface.medium : theme.palette[messageType].medium};
+    }
+  `}
+`;
+
+// src/Message.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Message = ({
+  children,
+  dataTestId,
+  style,
+  type = OMessageType.Default,
+  onClose,
+  description,
+  title,
+  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`;
+  const iconColor = isDefault ? theme.palette.content.default : theme.palette[type].dark;
+  const clonedChildren = (0, import_react2.useMemo)(
+    () => import_react2.Children.map(children, (child) => {
+      return child && (0, import_react2.cloneElement)(child, __spreadProps(__spreadValues({}, child.props), {
+        type
+      }));
+    }),
+    [children, type]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    MessageStyled,
+    {
+      "data-testid": dataTestId != null ? dataTestId : "message",
+      messageType: type,
+      orientation,
+      style,
+      children: [
+        !isDefault && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_icon.Icon,
+          {
+            code: MESSAGE_ICONS[type],
+            color: theme.palette[type].dark,
+            "data-testid": "message-icon",
+            dataTestId: "message-icon"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_react_box.Box,
+          {
+            dataTestId: "message-content",
+            style: {
+              flexDirection: isHorizontal ? "row" : "column",
+              justifyContent: "space-between",
+              gap: isHorizontal ? theme.spacing.spacing_30 : theme.spacing.spacing_50,
+              alignItems: isHorizontal ? "center" : "start"
+            },
+            children: [
+              /* @__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
+            ]
+          }
+        ),
+        isDismissible ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          MessageButtonCloseStyled,
+          {
+            "aria-label": "Close message",
+            messageType: type,
+            onClick: onClose,
+            orientation,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icon.Icon, { code: "close", color: iconColor })
+          }
+        ) : null
+      ]
+    }
+  );
+};
+Message.Actions = ({ children, dataTestId, type }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  MessageActionsStyled,
+  {
+    "data-testid": dataTestId != null ? dataTestId : "message-actions",
+    messageType: type,
+    children
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Message
+});