@temp-spotwork/ui 1.7.5 → 1.7.6

package/dist/components/atoms/avatar/Avatar.stories.d.ts

@@ -7,3 +7,9 @@ type Story = StoryObj<typeof meta>;
 export declare const Circular: Story;
 export declare const WithFullName: Story;
 export declare const LargeWithFullName: Story;
+export declare const SingleName: Story;
+export declare const WhitespaceName: Story;
+export declare const EmptyName: Story;
+export declare const NoTextView: Story;
+export declare const NullName: Story;
+export declare const EdgeCasesShowcase: Story;

package/dist/components/atoms/avatar/Avatar.stories.js

@@ -1,8 +1,9 @@
-import { f as a } from "../../../index-Dpx0xQmQ.js";
-import { Avatar as r } from "./avatar.js";
-const o = {
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+import { f as s } from "../../../index-Dpx0xQmQ.js";
+import { Avatar as t } from "./avatar.js";
+const v = {
   title: "@spotwork-ui/Avatar",
-  component: r,
+  component: t,
   parameters: {
     layout: "centered"
   },
@@ -10,19 +11,19 @@ const o = {
   argTypes: {
     backgroundColor: { control: "color" }
   },
-  args: { onClick: a() }
-}, i = {
+  args: { onClick: s() }
+}, u = {
   args: {
     id: "circular-avatar",
     variant: "circular"
   }
-}, c = {
+}, d = {
   args: {
     id: "full-name-avatar",
     variant: "circular",
     textView: "Steve Bob"
   }
-}, l = {
+}, x = {
   args: {
     id: "large-full-name-avatar",
     variant: "circular",
@@ -30,10 +31,67 @@ const o = {
     size: 9,
     isActive: !0
   }
+}, g = {
+  args: {
+    id: "single-name-avatar",
+    variant: "circular",
+    textView: "Steve"
+  }
+}, p = {
+  args: {
+    id: "whitespace-name-avatar",
+    variant: "circular",
+    textView: " "
+  }
+}, w = {
+  args: {
+    id: "empty-name-avatar",
+    variant: "circular",
+    textView: ""
+  }
+}, f = {
+  args: {
+    id: "no-text-view-avatar",
+    variant: "circular"
+  }
+}, V = {
+  args: {
+    id: "null-name-avatar",
+    variant: "circular",
+    textView: null
+  }
+}, c = [
+  { label: "Full name", textView: "Steve Bob" },
+  { label: "Single name", textView: "Steve" },
+  { label: 'Whitespace " "', textView: " " },
+  { label: 'Empty ""', textView: "" },
+  { label: "Undefined", textView: void 0 },
+  { label: "Null", textView: null }
+], N = {
+  render: () => /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-6", children: c.map(({ label: r, textView: i }, e) => /* @__PURE__ */ l("div", { className: "flex flex-col items-center gap-2", children: [
+    /* @__PURE__ */ a(
+      t,
+      {
+        id: `showcase-${e}`,
+        variant: "circular",
+        textView: i
+      }
+    ),
+    /* @__PURE__ */ a("span", { className: "text-xs text-gray-600", children: r })
+  ] }, e)) }),
+  parameters: {
+    layout: "padded"
+  }
 };
 export {
-  i as Circular,
-  l as LargeWithFullName,
-  c as WithFullName,
-  o as default
+  u as Circular,
+  N as EdgeCasesShowcase,
+  w as EmptyName,
+  x as LargeWithFullName,
+  f as NoTextView,
+  V as NullName,
+  g as SingleName,
+  p as WhitespaceName,
+  d as WithFullName,
+  v as default
 };

package/dist/components/atoms/avatar/avatar.js

@@ -1,38 +1,38 @@
-import { jsx as r, Fragment as g, jsxs as I } from "react/jsx-runtime";
-import { Typography as y } from "../../styles/typography/typography.js";
-import { classesMap as D } from "./styles.js";
-import F from "./statusIndicatorIcon.js";
-import { t as l } from "../../../bundle-mjs-BjFsLjkg.js";
-function w({
-  id: E,
+import { jsx as r, Fragment as b, jsxs as _ } from "react/jsx-runtime";
+import { Typography as I } from "../../styles/typography/typography.js";
+import { classesMap as y } from "./styles.js";
+import D from "./statusIndicatorIcon.js";
+import { t as c } from "../../../bundle-mjs-BjFsLjkg.js";
+function j({
+  id: g,
   hasBorder: i = !1,
   variant: d,
   image: m,
-  textView: u = "NN",
+  textView: E = "NN",
   isActive: n,
   isOnline: v = !1,
   onClick: s,
   size: t
 }) {
   const C = (() => {
-    const e = u.trim().split(/\s+/);
-    return e.length > 1 ? (e[0][0] + e[e.length - 1][0]).toUpperCase() : e.length === 1 ? e[0][0].toUpperCase() : u;
-  })(), a = d === "circular", o = a ? 5 : 5.5, c = t ? t / o : 1, p = D[d](i), h = !a && i && n ? "border-bcolor-active" : "border-bcolor-divider", S = t && o > t ? 1 : 7, U = () => {
-    s && s(E);
-  }, A = m ? /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(
+    const e = (E ?? "").trim().split(/\s+/).filter(Boolean);
+    return e.length === 0 ? "NN" : e.length === 1 ? e[0][0].toUpperCase() : (e[0][0] + e[e.length - 1][0]).toUpperCase();
+  })(), a = d === "circular", o = a ? 5 : 5.5, l = t ? t / o : 1, u = y[d](i), p = !a && i && n ? "border-bcolor-active" : "border-bcolor-divider", S = t && o > t ? 1 : 7, U = () => {
+    s && s(g);
+  }, x = m ? /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(
     "img",
     {
-      className: l(p.image, h),
+      className: c(u.image, p),
       src: m,
       alt: "avatar-image"
     }
-  ) }) : /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(
+  ) }) : /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(
     "div",
     {
       "data-testid": "avatar-text-box",
-      className: l(p.textBox, h),
+      className: c(u.textBox, p),
       children: /* @__PURE__ */ r(
-        y,
+        I,
         {
           swStyle: S,
           children: C,
@@ -40,20 +40,20 @@ function w({
         }
       )
     }
-  ) }), f = 0.25, x = a && v && !n && /* @__PURE__ */ r(
+  ) }), f = 0.25, A = a && v && !n && /* @__PURE__ */ r(
     "div",
     {
       className: "absolute",
       style: {
-        bottom: `${c * f}rem`,
-        right: `${c * f}rem`
+        bottom: `${l * f}rem`,
+        right: `${l * f}rem`
       },
       "data-testid": "avatar-online-status",
-      children: /* @__PURE__ */ r(F, { scalingFactor: c })
+      children: /* @__PURE__ */ r(D, { scalingFactor: l })
     }
-  ), b = s ? "button" : "div", _ = () => a && n ? "border-bcolor-active" : "border-[transparent]";
-  return /* @__PURE__ */ I(
-    b,
+  ), h = s ? "button" : "div", N = () => a && n ? "border-bcolor-active" : "border-[transparent]";
+  return /* @__PURE__ */ _(
+    h,
     {
       "data-testid": "avatar-container",
       onClick: U,
@@ -61,19 +61,19 @@ function w({
         width: `${t || o}rem`,
         height: `${t || o}rem`
       },
-      className: l(
+      className: c(
         "flex items-center justify-center flex-shrink-0 flex-grow-0 relative",
-        _(),
+        N(),
         "aspect-square"
       ),
-      ...b === "button" ? { type: "button" } : {},
+      ...h === "button" ? { type: "button" } : {},
       children: [
-        A,
-        x
+        x,
+        A
       ]
     }
   );
 }
 export {
-  w as Avatar
+  j as Avatar
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@temp-spotwork/ui",
   "private": false,
-  "version": "1.7.5",
+  "version": "1.7.6",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",