@temp-spotwork/ui 1.7.5 → 1.7.7

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/dist/components/atoms/badge/badge.d.ts

@@ -18,6 +18,8 @@ export declare const badgeColorVariants: {
     warningInverted: string;
     alert: string;
     alertInverted: string;
+    paidBackup: string;
+    paidBackupInverted: string;
     disabled: string;
     disabledInverted: string;
 };

package/dist/components/atoms/badge/badge.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Typography as i } from "../../styles/typography/typography.js";
-const t = {
+import { Typography as d } from "../../styles/typography/typography.js";
+const a = {
   active: "active",
   affirmative: "active",
   affirmativeInverted: "activeInverted",
@@ -10,20 +10,22 @@ const t = {
   warningInverted: "warningInverted",
   alert: "alert",
   alertInverted: "alertInverted",
+  paidBackup: "paidBackup",
+  paidBackupInverted: "paidBackupInverted",
   disabled: "disabled",
   disabledInverted: "disabledInverted"
 };
-function c({ text: a, color: r }) {
-  const n = t[r];
+function s({ text: t, color: r }) {
+  const n = a[r];
   return /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
     "div",
     {
       "data-testid": "Badge-container",
-      className: `px-[0.5rem] py-[0.2rem] bg-surface-${t[r]} rounded-[0.9rem] min-w-[1.8rem] max-w-max h-[1.8rem] flex items-center place-content-around m-[0.1rem]`,
+      className: `px-[0.5rem] py-[0.2rem] bg-surface-${a[r]} rounded-[0.9rem] min-w-[1.8rem] max-w-max h-[1.8rem] flex items-center place-content-around m-[0.1rem]`,
       children: /* @__PURE__ */ e(
-        i,
+        d,
         {
-          children: `${a}`.trim().toUpperCase(),
+          children: `${t}`.trim().toUpperCase(),
           color: n,
           swStyle: 6,
           lineHeight: 1.4
@@ -33,6 +35,6 @@ function c({ text: a, color: r }) {
   ) });
 }
 export {
-  c as Badge,
-  t as badgeColorVariants
+  s as Badge,
+  a as badgeColorVariants
 };

package/dist/components/atoms/badge/badge.stories.d.ts

@@ -5,3 +5,4 @@ declare const meta: Meta<typeof Badge>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
+export declare const PaidBackup: Story;

package/dist/components/atoms/badge/badge.stories.js

@@ -1,8 +1,8 @@
 import { f as o } from "../../../index-Dpx0xQmQ.js";
-import { Badge as t } from "./badge.js";
+import { Badge as a } from "./badge.js";
 const e = {
   title: "@spotwork-ui/badge",
-  component: t,
+  component: a,
   parameters: {
     layout: "centered"
   },
@@ -11,13 +11,19 @@ const e = {
     backgroundColor: { control: "color" }
   },
   args: { onClick: o() }
-}, s = {
+}, c = {
   args: {
     text: "badge item",
     color: "affirmative"
   }
+}, s = {
+  args: {
+    text: "Paid Backup",
+    color: "paidBackup"
+  }
 };
 export {
-  s as Primary,
+  s as PaidBackup,
+  c as Primary,
   e as default
 };

package/dist/components/atoms/form/chips/chips.stories.d.ts

@@ -5,3 +5,5 @@ declare const meta: Meta<typeof Chips>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
+export declare const PaidBackupLargeReadOnly: Story;
+export declare const PaidBackupPill: Story;

package/dist/components/atoms/form/chips/chips.stories.js

@@ -1,8 +1,8 @@
-import { f as o } from "../../../../index-Dpx0xQmQ.js";
-import { Chips as r } from "./chips.js";
-const a = {
+import { f as a } from "../../../../index-Dpx0xQmQ.js";
+import { Chips as o } from "./chips.js";
+const t = {
   title: "@spotwork-ui/chips",
-  component: r,
+  component: o,
   parameters: {
     layout: "centered"
   },
@@ -10,15 +10,33 @@ const a = {
   argTypes: {
     backgroundColor: { control: "color" }
   },
-  args: { onClick: o() }
-}, s = {
+  args: { onClick: a() }
+}, c = {
   args: {
+    id: "primary",
     chipText: "some chips",
     color: "affirmative",
     chipSelected: !1
   }
+}, e = {
+  args: {
+    id: "paid-backup-readonly",
+    chipText: "Ready to Work",
+    color: "paidBackup",
+    variant: "largeReadOnly",
+    infoBubbleContent: "icons:WaitingSmall"
+  }
+}, p = {
+  args: {
+    id: "paid-backup-pill",
+    chipText: "Paid Backup",
+    color: "paidBackup",
+    variant: "pill"
+  }
 };
 export {
-  s as Primary,
-  a as default
+  e as PaidBackupLargeReadOnly,
+  p as PaidBackupPill,
+  c as Primary,
+  t as default
 };

package/dist/components/atoms/form/chips/styles.d.ts

@@ -67,6 +67,7 @@ export declare const colorVariants: {
     success: string;
     warning: string;
     alert: string;
+    paidBackup: string;
     disabled: string;
 };
 export type ColorVariants = keyof typeof colorVariants;

package/dist/components/atoms/form/chips/styles.js

@@ -34,12 +34,14 @@ const n = (e) => ({
   success: "success",
   warning: "warning",
   alert: "alert",
+  paidBackup: "paidBackup",
   disabled: "disabled"
 }, i = {
   affirmative: "affirmativeInverted",
   success: "successInverted",
   warning: "warningInverted",
   alert: "alertInverted",
+  paidBackup: "paidBackupInverted",
   disabled: "disabledInverted"
 };
 export {

package/dist/components/styles/colors/colormap.d.ts

@@ -93,6 +93,8 @@ export declare const glyph: {
     warningInverted: string;
     alert: string;
     alertInverted: string;
+    paidBackup: string;
+    paidBackupInverted: string;
     disabled: string;
     disabledInverted: string;
     firstPartyMessage: string;
@@ -123,6 +125,8 @@ export declare const surface: {
     warningInverted: string;
     alert: string;
     alertInverted: string;
+    paidBackup: string;
+    paidBackupInverted: string;
     badge: string;
     disabled: string;
     disabledInverted: string;

package/dist/components/styles/colors/colormap.js

@@ -87,12 +87,14 @@ const f = {
   warningInverted: d[100],
   alert: t[700],
   alertInverted: t[200],
+  paidBackup: "#8314DB",
+  paidBackupInverted: "#F3E6FF",
   disabled: e[500],
   disabledInverted: e[100],
   firstPartyMessage: e[0],
   secondPartyMessage: a[700],
   visualPlaceholderDefault: f[700]
-}, o = Object.keys(n), u = Object.entries(n).reduce((r, [s]) => (r[s] = `text-glyph-${s}`, r), {}), i = {
+}, u = Object.keys(n), o = Object.entries(n).reduce((r, [s]) => (r[s] = `text-glyph-${s}`, r), {}), i = {
   default: a[600],
   hover: a[700],
   active: a[800],
@@ -113,6 +115,8 @@ const f = {
   warningInverted: d[800],
   alert: t[200],
   alertInverted: t[700],
+  paidBackup: "#F3E6FF",
+  paidBackupInverted: "#8314DB",
   badge: t[500],
   disabled: e[100],
   disabledInverted: e[600],
@@ -120,7 +124,7 @@ const f = {
   visualPlaceholderDefault: f[100],
   firstPartyMessage: a[700],
   secondPartyMessage: a[200]
-}, b = Object.keys(n), h = Object.entries(n).reduce((r, [s]) => (r[s] = `bg-surface-${s}`, r), {}), g = {
+}, b = Object.keys(n), h = Object.entries(n).reduce((r, [s]) => (r[s] = `bg-surface-${s}`, r), {}), p = {
   none: "transparent",
   default: e[300],
   active: a[700],
@@ -133,12 +137,12 @@ const f = {
   disabled: e[200],
   outline: e[100],
   success: c[800]
-}, y = {
+}, g = {
   active: a[200],
   warning: d[100],
   destructive: t[100],
   alert: t[200]
-}, p = {
+}, y = {
   success: c[600],
   warning: d[400],
   caution: f[400],
@@ -197,7 +201,7 @@ const f = {
       default: d[800]
     }
   }
-}, w = {
+}, F = {
   primary: {
     disabled: e[100],
     affirmative: {
@@ -243,7 +247,7 @@ const f = {
       active: e[800]
     }
   }
-}, m = {
+}, w = {
   hue1: "#00BD3F",
   hue2: "#FFCE1B",
   hue3: "#FF7E33",
@@ -257,20 +261,20 @@ const f = {
 export {
   c as apple,
   a as blueRibbon,
-  g as borderColor,
+  p as borderColor,
   C as buttonBorder,
   I as buttonGlyph,
-  w as buttonSurface,
+  F as buttonSurface,
   t as cinnabar,
   f as crusta,
-  m as dataVizColors,
+  w as dataVizColors,
   n as glyph,
-  u as glyphClassesMap,
-  o as glyphColorsKeys,
+  o as glyphClassesMap,
+  u as glyphColorsKeys,
   v as linkColorClassesMap,
   i as linkColors,
-  p as progressBar,
-  y as shadow,
+  y as progressBar,
+  g as shadow,
   d as sun,
   l as surface,
   h as surfaceClassesMap,

package/package.json

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