@dt-dds/react-avatar 1.0.0-beta.50

package/dist/index.mjs

@@ -0,0 +1,375 @@
+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/Avatar.tsx
+import { Tooltip } from "@dt-dds/react-tooltip";
+import { useState } from "react";
+
+// ../../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";
+var AvatarThumbnail = (props) => {
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    __spreadProps(__spreadValues({
+      fill: "none",
+      height: "32",
+      viewBox: "0 0 33 32",
+      width: "33",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsxs4("g", { clipPath: "url(#clip0_1627_31268)", children: [
+          /* @__PURE__ */ jsx8("rect", { fill: "#D3D4D5", height: "32", rx: "16", width: "32", x: "0.5" }),
+          /* @__PURE__ */ jsx8("circle", { cx: "16.5", cy: "34", fill: "white", r: "14" }),
+          /* @__PURE__ */ jsx8("circle", { cx: "16.5", cy: "13", fill: "white", r: "5" })
+        ] }),
+        /* @__PURE__ */ jsx8("defs", { children: /* @__PURE__ */ jsx8("clipPath", { id: "clip0_1627_31268", children: /* @__PURE__ */ jsx8("rect", { fill: "white", height: "32", rx: "16", width: "32", x: "0.5" }) }) })
+      ]
+    })
+  );
+};
+var AvatarThumbnail_default = AvatarThumbnail;
+
+// ../../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";
+
+// ../../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";
+
+// ../../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";
+
+// ../../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";
+
+// ../../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";
+
+// ../../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/Avatar.styled.ts
+import styled from "@emotion/styled";
+
+// src/constants/AvatarType.ts
+var AvatarType = {
+  Primary: "primary",
+  Secondary: "secondary",
+  Tertiary: "tertiary",
+  Profile: "profile"
+};
+
+// src/constants/AvatarSize.ts
+var AvatarSize = {
+  Small: "small",
+  Medium: "medium",
+  Large: "large"
+};
+
+// src/Avatar.styled.ts
+var AvatarStyled = styled.div`
+  ${({ theme, type, size }) => {
+  let styles = `
+      & > * {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+        text-transform: uppercase;
+        border-radius: ${theme.radius.full};
+        cursor: pointer;
+      }
+    `;
+  switch (size) {
+    case AvatarSize.Small:
+      styles += `
+          width: 16px;
+          height: 16px;
+          font-size: 8px;
+          line-height: 10px;
+          
+          & > * {
+            padding: 3px 2px 2px 2px;
+          }
+        `;
+      break;
+    case AvatarSize.Medium:
+      styles += `
+          width: 24px;
+          height: 24px;
+          font-size: 10px;
+          line-height: 14px;
+        `;
+      break;
+    case AvatarSize.Large:
+      styles += `
+          width: 32px;
+          height: 32px;
+          font-size: 12px;
+          line-height: 16px;
+        `;
+      break;
+  }
+  switch (type) {
+    case AvatarType.Primary:
+      styles += `
+          color: ${theme.palette.content.contrast};
+          
+          & > * {
+            background-color: ${theme.palette.primary.default};
+
+            &:hover {
+              background-color: ${theme.palette.primary.dark};
+            }
+          }
+        `;
+      break;
+    case AvatarType.Secondary:
+      styles += `
+          color: ${theme.palette.content.contrast};
+          
+          & > * {
+            background-color: ${theme.palette.secondary.default};
+
+            &:hover {
+              background-color: ${theme.palette.secondary.dark};
+            }
+          }
+        `;
+      break;
+    case AvatarType.Tertiary:
+      styles += `
+          color: ${theme.palette.primary.default};
+          
+          & > * {
+            background-color: ${theme.palette.content.contrast};
+
+            &:hover {
+              background-color: ${theme.palette.primary.light};
+            }
+          }
+        `;
+      break;
+    case AvatarType.Profile:
+      styles += `
+          & > * {
+            padding: initial;
+          }
+        `;
+      break;
+  }
+  return styles;
+}}
+`;
+
+// src/utils/acronymGenerator.ts
+var acronymGenerator = (text = "") => {
+  const textSliced = text.split(" ").slice(0, 2).join(" ");
+  return textSliced.split(/\s/).reduce((response, word) => response += word.slice(0, 1), "").toUpperCase();
+};
+
+// src/Avatar.tsx
+import { jsx as jsx58, jsxs as jsxs25 } from "react/jsx-runtime";
+var Avatar = ({
+  title,
+  type = AvatarType.Primary,
+  size = AvatarSize.Medium,
+  imageSrc = "",
+  dataTestId,
+  customInitials
+}) => {
+  const [showThumbnail, setShowThumbnail] = useState(false);
+  const handleImageError = () => {
+    setShowThumbnail(true);
+  };
+  const renderProfileImage = () => showThumbnail ? /* @__PURE__ */ jsx58(AvatarThumbnail_default, {}) : /* @__PURE__ */ jsx58("img", { alt: title, onError: handleImageError, src: imageSrc });
+  return /* @__PURE__ */ jsxs25(Tooltip, { children: [
+    /* @__PURE__ */ jsx58(
+      AvatarStyled,
+      {
+        "data-testid": dataTestId != null ? dataTestId : "avatar",
+        size,
+        type,
+        children: type === AvatarType.Profile ? renderProfileImage() : /* @__PURE__ */ jsx58("div", { children: customInitials ? customInitials.substring(0, 2) : acronymGenerator(title) })
+      }
+    ),
+    /* @__PURE__ */ jsx58(Tooltip.Content, { children: title })
+  ] });
+};
+var Avatar_default = Avatar;
+export {
+  Avatar_default as Avatar,
+  AvatarSize,
+  AvatarType
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@dt-dds/react-avatar",
+  "version": "1.0.0-beta.50",
+  "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-tooltip": "1.0.0-beta.49"
+  },
+  "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"
+  }
+}