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

package/dist/index.mjs

@@ -0,0 +1,399 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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));
+
+// src/Message.tsx
+import { Typography } from "@dt-dds/react-typography";
+
+// ../../dt-dds-react/core/assets/svgs/AllOut.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Apis.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Apps.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ArrowDropDown.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ArrowDropUp.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ArrowLeft.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ArrowRight.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/AvatarThumbnail.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Bolt.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/CalendarMonth.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Cancel.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Check.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/CheckCircle.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var CheckCircleOutlineIcon = (props) => {
+  return /* @__PURE__ */ jsx13(
+    "svg",
+    __spreadProps(__spreadValues({
+      fill: "currentColor",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: /* @__PURE__ */ jsx13("path", { d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z" })
+    })
+  );
+};
+var CheckCircle_default = CheckCircleOutlineIcon;
+
+// ../../dt-dds-react/core/assets/svgs/CheckCircleOutline.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Close.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var CloseIcon = (props) => {
+  return /* @__PURE__ */ jsx15(
+    "svg",
+    __spreadProps(__spreadValues({
+      fill: "none",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: /* @__PURE__ */ jsx15(
+        "path",
+        {
+          d: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z",
+          fill: "currentColor"
+        }
+      )
+    })
+  );
+};
+var Close_default = CloseIcon;
+
+// ../../dt-dds-react/core/assets/svgs/Copy.tsx
+import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Delete.tsx
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Edit.tsx
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Email.tsx
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/EmailSend.tsx
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Error.tsx
+import { useTheme } from "@emotion/react";
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+var Error2 = (props) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs11(
+    "svg",
+    __spreadProps(__spreadValues({
+      color: theme.palette.error.default,
+      fill: "none",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M19.0711 19.0711C17.1957 20.9464 14.6522 22 12 22C9.34784 22 6.8043 20.9464 4.92893 19.0711C3.05357 17.1957 2 14.6522 2 12C2 9.34784 3.05357 6.8043 4.92893 4.92893C6.8043 3.05357 9.34784 2 12 2C14.6522 2 17.1957 3.05357 19.0711 4.92893C20.9464 6.8043 22 9.34784 22 12C22 14.6522 20.9464 17.1957 19.0711 19.0711Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M12.8797 13.6863L13.1157 6.48828H10.8997L11.0997 13.6863H12.8797ZM11.9907 17.5123C12.1621 17.5181 12.333 17.4894 12.4932 17.4281C12.6534 17.3667 12.7997 17.2739 12.9234 17.1551C13.0471 17.0362 13.1458 16.8938 13.2136 16.7362C13.2813 16.5786 13.3168 16.4091 13.318 16.2375C13.3191 16.066 13.2859 15.8959 13.2202 15.7375C13.1545 15.579 13.0577 15.4353 12.9356 15.3148C12.8135 15.1944 12.6684 15.0996 12.5091 15.0361C12.3497 14.9727 12.1792 14.9418 12.0077 14.9453C11.6733 14.9521 11.3547 15.0892 11.1198 15.3274C10.8849 15.5656 10.7522 15.886 10.75 16.2205C10.7478 16.555 10.8762 16.8772 11.1079 17.1184C11.3397 17.3597 11.6564 17.501 11.9907 17.5123Z",
+            fill: "white"
+          }
+        )
+      ]
+    })
+  );
+};
+var Error_default = Error2;
+
+// ../../dt-dds-react/core/assets/svgs/ErrorOutline.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/EVStation.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Info.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var Info = (props) => {
+  return /* @__PURE__ */ jsx24(
+    "svg",
+    __spreadProps(__spreadValues({
+      fill: "currentColor",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: /* @__PURE__ */ jsx24("path", { d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V11H13V17ZM13 9H11V7H13V9Z" })
+    })
+  );
+};
+var Info_default = Info;
+
+// ../../dt-dds-react/core/assets/svgs/InfoOutline.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Input.tsx
+import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Language.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/LocationOn.tsx
+import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/LocationSearching.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/MenuCompact.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/MenuExpand.tsx
+import { jsx as jsx31 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Menu.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/MoreHorizontal.tsx
+import { jsx as jsx33 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/MoreVertical.tsx
+import { jsx as jsx34 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/NoData.tsx
+import { useTheme as useTheme2 } from "@emotion/react";
+import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/NotFound.tsx
+import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropDown.tsx
+import { jsx as jsx37 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropUp.tsx
+import { jsx as jsx38 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/PhoneOutlined.tsx
+import { jsx as jsx39 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Payments.tsx
+import { jsx as jsx40 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Products.tsx
+import { jsx as jsx41, jsxs as jsxs16 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/RemoveCircleOutline.tsx
+import { jsx as jsx42 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Share.tsx
+import { jsx as jsx43, jsxs as jsxs17 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Signout.tsx
+import { jsx as jsx44 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Teams.tsx
+import { jsx as jsx45, jsxs as jsxs18 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Timeline.tsx
+import { jsx as jsx46, jsxs as jsxs19 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Topic.tsx
+import { jsx as jsx47, jsxs as jsxs20 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/UnfoldLess.tsx
+import { jsx as jsx48 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/UnfoldMore.tsx
+import { jsx as jsx49 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Username.tsx
+import { jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ViewAgenda.tsx
+import { jsx as jsx51, jsxs as jsxs22 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Visibility.tsx
+import { jsx as jsx52, jsxs as jsxs23 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/VisibilityOff.tsx
+import { jsx as jsx53, jsxs as jsxs24 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/WarningOutline.tsx
+import { jsx as jsx54 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Warning.tsx
+import { jsx as jsx55 } from "react/jsx-runtime";
+var Warning = (props) => {
+  return /* @__PURE__ */ jsx55(
+    "svg",
+    __spreadProps(__spreadValues({
+      fill: "currentColor",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: /* @__PURE__ */ jsx55("path", { d: "M1 21.5H23L12 2.5L1 21.5ZM13 18.5H11V16.5H13V18.5ZM13 14.5H11V10.5H13V14.5Z" })
+    })
+  );
+};
+var Warning_default = Warning;
+
+// ../../dt-dds-react/core/assets/svgs/Wifi.tsx
+import { jsx as jsx56 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Settings.tsx
+import { jsx as jsx57 } from "react/jsx-runtime";
+
+// src/Message.styled.ts
+import styled from "@emotion/styled";
+
+// src/types/index.ts
+var OMessageType = {
+  Default: "default",
+  Error: "error",
+  Info: "informative",
+  Success: "success",
+  Warning: "warning"
+};
+
+// src/Message.styled.ts
+var MessageStyled = styled.div`
+  ${({ theme, type }) => `
+    padding: ${theme.spacing["3xs"]} ${theme.spacing["2xs"]};
+    background-color: ${type === OMessageType.Default ? theme.palette.surface.light : theme.palette[type].light};
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    border-radius: ${theme.shape.message};
+    border: 1px dashed ${type === OMessageType.Default ? theme.palette.border.default : theme.palette[type].default};
+    width: 100%;
+    height: 100%;
+    gap: ${theme.spacing["4xs"]};
+  `}
+`;
+var MessageContentStyled = styled.div`
+  ${({ theme }) => `
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    text-align: start;
+    gap: ${theme.spacing["6xs"]};
+  `}
+`;
+var MessageActionStyled = styled.div`
+  ${({ theme }) => `
+    padding-top: ${theme.spacing["4xs"]};
+  `}
+`;
+var MessageIconStyled = styled.div`
+  ${({ theme, type }) => `
+    height: 100%;
+    display: flex;
+    color: ${type === "default" ? theme.palette.content.default : theme.palette[type].default};
+  `}
+`;
+var MessageButtonCloseStyled = styled.button`
+  ${({ theme }) => `
+    color: ${theme.palette.content.default};
+    border: 0;
+    cursor: pointer;
+    background: transparent;
+    display: flex;
+  
+    &:hover {
+      background-color: ${theme.palette.surface.contrast};
+    }
+  `}
+`;
+
+// src/Message.tsx
+import { jsx as jsx58, jsxs as jsxs25 } from "react/jsx-runtime";
+var MessageIcons = {
+  [OMessageType.Error]: Error_default,
+  [OMessageType.Info]: Info_default,
+  [OMessageType.Success]: CheckCircle_default,
+  [OMessageType.Warning]: Warning_default,
+  [OMessageType.Default]: null
+};
+var Message = ({
+  children,
+  dataTestId,
+  style,
+  type = OMessageType.Default,
+  onClose
+}) => {
+  const isDismissable = !!onClose;
+  const Icon = MessageIcons[type];
+  return /* @__PURE__ */ jsxs25(
+    MessageStyled,
+    {
+      "data-testid": dataTestId != null ? dataTestId : "message",
+      style,
+      type,
+      children: [
+        Icon ? /* @__PURE__ */ jsx58(MessageIconStyled, { type, children: /* @__PURE__ */ jsx58(Icon, { "data-testid": "message-icon", height: "16px", width: "16px" }) }) : null,
+        /* @__PURE__ */ jsx58(MessageContentStyled, { children }),
+        isDismissable ? /* @__PURE__ */ jsx58(MessageButtonCloseStyled, { onClick: onClose, children: /* @__PURE__ */ jsx58(Close_default, { height: "16px", width: "16px" }) }) : null
+      ]
+    }
+  );
+};
+Message.Title = ({ children }) => {
+  return /* @__PURE__ */ jsx58(Typography, { color: "content.dark", element: "h2", fontStyles: "body2Bold", children });
+};
+Message.Description = ({ children }) => {
+  return /* @__PURE__ */ jsx58(Typography, { color: "content.default", fontStyles: "body3", children });
+};
+Message.Action = ({ children, dataTestId }) => /* @__PURE__ */ jsx58(MessageActionStyled, { "data-testid": dataTestId != null ? dataTestId : "message-action", children });
+export {
+  Message,
+  MessageIcons
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@dt-dds/react-message",
+  "version": "1.0.0-beta.55",
+  "license": "MIT",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint --cache .",
+    "test": "jest",
+    "test:report": "open ./jest-coverage/lcov-report/index.html",
+    "test:update:snapshot": "jest -u"
+  },
+  "dependencies": {
+    "@dt-dds/react-core": "1.0.0-beta.41",
+    "@dt-dds/react-typography": "1.0.0-beta.32",
+    "@dt-dds/react-link": "1.0.0-beta.16"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.23.3",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/css": "^11.7.1",
+    "@emotion/jest": "^11.10.0",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "babel-loader": "^8.3.0",
+    "eslint-config-custom": "*",
+    "eslint-plugin-storybook": "^9.1.0",
+    "jest-config": "*",
+    "react": "^18.1.0",
+    "react-dom": "^18.2.0",
+    "tsconfig": "*",
+    "tsup": "^6.6.3",
+    "typescript": "^4.5.3"
+  },
+  "peerDependencies": {
+    "@emotion/css": "^11.7.1",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  }
+}