@syscore/ui-library 1.10.1 → 1.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/client/components/icons/UtilityMessage.tsx +38 -0
  2. package/client/components/icons/UtilityTrash.tsx +52 -0
  3. package/client/global.css +1 -1
  4. package/client/ui/Icons.stories.tsx +15 -0
  5. package/client/ui/Panel.stories.tsx +8 -4
  6. package/dist/index.cjs.js +1 -1
  7. package/dist/index.d.ts +6 -0
  8. package/dist/index.es.js +99 -0
  9. package/package.json +1 -1
package/client/components/icons/UtilityMessage.tsx ADDED
@@ -0,0 +1,38 @@
1
+ import React from "react";
2
+ import { cn } from "../../lib/utils";
3
+
4
+ interface UtilityMessageProps {
5
+ className?: string;
6
+ }
7
+
8
+ export const UtilityMessage: React.FC<UtilityMessageProps> = ({
9
+ className,
10
+ }) => {
11
+ return (
12
+ <div
13
+ className={cn(
14
+ "size-4 flex items-center justify-center text-gray-500",
15
+ className,
16
+ )}
17
+ >
18
+ <svg
19
+ xmlns="http://www.w3.org/2000/svg"
20
+ width="22"
21
+ height="21"
22
+ viewBox="0 0 22 21"
23
+ fill="none"
24
+ className={cn("size-[14px] text-inherit")}
25
+ >
26
+ <path
27
+ d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H5.828C5.29761 17.0001 4.78899 17.2109 4.414 17.586L2.212 19.788C2.1127 19.8873 1.9862 19.9549 1.84849 19.9823C1.71077 20.0097 1.56803 19.9956 1.43831 19.9419C1.30858 19.8881 1.1977 19.7971 1.11969 19.6804C1.04167 19.5637 1.00002 19.4264 1 19.286V3C1 2.46957 1.21071 1.96086 1.58579 1.58579C1.96086 1.21071 2.46957 1 3 1H19C19.5304 1 20.0391 1.21071 20.4142 1.58579C20.7893 1.96086 21 2.46957 21 3V15Z"
28
+ fill="currentColor"
29
+ fill-opacity="0.2"
30
+ stroke="currentColor"
31
+ stroke-width="2"
32
+ stroke-linecap="round"
33
+ stroke-linejoin="round"
34
+ />
35
+ </svg>
36
+ </div>
37
+ );
38
+ };
package/client/components/icons/UtilityTrash.tsx ADDED
@@ -0,0 +1,52 @@
1
+ import React from "react";
2
+ import { cn } from "../../lib/utils";
3
+
4
+ interface UtilityTrashProps {
5
+ className?: string;
6
+ }
7
+
8
+ export const UtilityTrash: React.FC<UtilityTrashProps> = ({ className }) => {
9
+ return (
10
+ <div
11
+ className={cn(
12
+ "size-4 flex items-center justify-center text-gray-500",
13
+ className,
14
+ )}
15
+ >
16
+ <svg
17
+ width="15"
18
+ height="16"
19
+ viewBox="0 0 15 16"
20
+ fill="none"
21
+ xmlns="http://www.w3.org/2000/svg"
22
+ className={cn("size-[14px] text-inherit")}
23
+ >
24
+ <path
25
+ d="M11.9504 3.5498V13.3498C11.9504 13.7211 11.8029 14.0772 11.5403 14.3398C11.2778 14.6023 10.9217 14.7498 10.5504 14.7498H3.55039C3.17909 14.7498 2.82299 14.6023 2.56044 14.3398C2.29789 14.0772 2.15039 13.7211 2.15039 13.3498V3.5498"
26
+ fill="white"
27
+ />
28
+ <path
29
+ d="M11.9504 3.5498V13.3498C11.9504 13.7211 11.8029 14.0772 11.5403 14.3398C11.2778 14.6023 10.9217 14.7498 10.5504 14.7498H3.55039C3.17909 14.7498 2.82299 14.6023 2.56044 14.3398C2.29789 14.0772 2.15039 13.7211 2.15039 13.3498V3.5498"
30
+ stroke="currentColor"
31
+ stroke-width="1.5"
32
+ stroke-linecap="round"
33
+ stroke-linejoin="round"
34
+ />
35
+ <path
36
+ d="M0.75 3.5498H13.35"
37
+ stroke="currentColor"
38
+ stroke-width="1.5"
39
+ stroke-linecap="round"
40
+ stroke-linejoin="round"
41
+ />
42
+ <path
43
+ d="M4.25 3.55V2.15C4.25 1.7787 4.3975 1.4226 4.66005 1.16005C4.9226 0.8975 5.2787 0.75 5.65 0.75H8.45C8.8213 0.75 9.1774 0.8975 9.43995 1.16005C9.7025 1.4226 9.85 1.7787 9.85 2.15V3.55"
44
+ stroke="currentColor"
45
+ stroke-width="1.5"
46
+ stroke-linecap="round"
47
+ stroke-linejoin="round"
48
+ />
49
+ </svg>
50
+ </div>
51
+ );
52
+ };
package/client/global.css CHANGED
@@ -6096,7 +6096,7 @@ body {
6096
6096
  top: 0;
6097
6097
  left: 0;
6098
6098
  z-index: 50;
6099
- height: 3.5rem;
6099
+ height: 4rem;
6100
6100
  width: 100%;
6101
6101
  }
6102
6102
 
package/client/ui/Icons.stories.tsx CHANGED
@@ -20,6 +20,7 @@ import { UtilityClassification } from "../components/icons/UtilityClassification
20
20
  import { UtilityClose } from "../components/icons/UtilityClose";
21
21
  import { UtilityDrag } from "../components/icons/UtilityDrag";
22
22
  import { UtilityEdit } from "../components/icons/UtilityEdit";
23
+ import { UtilityMessage } from "../components/icons/UtilityMessage";
23
24
  import { UtilityOptions } from "../components/icons/UtilityOptions";
24
25
  import { UtilityPortfolio } from "../components/icons/UtilityPortfolio";
25
26
  import { UtilityReset } from "../components/icons/UtilityReset";
@@ -27,6 +28,7 @@ import { UtilityScoring } from "../components/icons/UtilityScoring";
27
28
  import { UtilitySearch } from "../components/icons/UtilitySearch";
28
29
  import { UtilitySort } from "../components/icons/UtilitySort";
29
30
  import { UtilityText } from "../components/icons/UtilityText";
31
+ import { UtilityTriangleInfo } from "../components/icons/UtilityTriangleInfo";
30
32
  import { SealWell } from "../components/icons/SealWell";
31
33
  import { SealIwbiMember } from "../components/icons/SealIwbiMember";
32
34
  import { SealWellCertification } from "../components/icons/SealWellCertification";
@@ -49,6 +51,7 @@ import {
49
51
  SealProductProvider,
50
52
  SealProviders,
51
53
  } from "../components/icons/ProviderSeals";
54
+ import { UtilityTrash } from "@/components/icons/UtilityTrash";
52
55
 
53
56
  const meta = {
54
57
  title: "Review/Icons",
@@ -232,6 +235,10 @@ export const UtilityIcons: Story = {
232
235
  <UtilityEdit />
233
236
  <span className="text-sm font-medium">Edit</span>
234
237
  </div>
238
+ <div className="flex flex-col items-center gap-2">
239
+ <UtilityMessage />
240
+ <span className="text-sm font-medium">Message</span>
241
+ </div>
235
242
  <div className="flex flex-col items-center gap-2">
236
243
  <UtilityOptions />
237
244
  <span className="text-sm font-medium">Options</span>
@@ -260,6 +267,14 @@ export const UtilityIcons: Story = {
260
267
  <UtilityText />
261
268
  <span className="text-sm font-medium">Text</span>
262
269
  </div>
270
+ <div className="flex flex-col items-center gap-2">
271
+ <UtilityTrash />
272
+ <span className="text-sm font-medium">Trash</span>
273
+ </div>
274
+ <div className="flex flex-col items-center gap-2">
275
+ <UtilityTriangleInfo />
276
+ <span className="text-sm font-medium">TriangleInfo</span>
277
+ </div>
263
278
  </div>
264
279
  </div>
265
280
  </div>
package/client/ui/Panel.stories.tsx CHANGED
@@ -60,8 +60,10 @@ const ExploreSidePanelView = (args: any) => {
60
60
  className="absolute top-1/2 -translate-y-1/2 left-0 right-0 body-small"
61
61
  style={{ willChange: "opacity, transform" }}
62
62
  >
63
- <span className="line-clamp-1">
64
- ·{" "}
63
+ <span className="line-clamp-1 text-gray-800">
64
+ <span aria-hidden="true" className="text-gray-300">
65
+ ·{" "}
66
+ </span>
65
67
  {capitalize(
66
68
  concepts.find((c) => c.conceptKey === hoveredConcept)
67
69
  ?.name ?? "",
@@ -145,8 +147,10 @@ const ExploreSidePanelView = (args: any) => {
145
147
  className="absolute top-1/2 -translate-y-1/2 left-0 right-0 body-small"
146
148
  style={{ willChange: "opacity, transform" }}
147
149
  >
148
- <span className="line-clamp-1">
149
- ·{" "}
150
+ <span className="block w-[235px] truncate pr-6 text-gray-800">
151
+ <span aria-hidden="true" className="text-gray-300">
152
+ ·{" "}
153
+ </span>
150
154
  {capitalize(
151
155
  themes.find((t) => t.code === hoveredTheme)?.name ??
152
156
  "",