@syscore/ui-library 1.15.1 → 1.15.3

package/client/components/icons/UtilityTriangleInfo.tsx

@@ -1,13 +1,30 @@
 import React from "react";
 import { cn } from "../../lib/utils";
 
+/** Green = low, Plum = medium, Coral = high */
+export type UtilityTriangleInfoVariant = "low" | "medium" | "high";
+
+const VARIANT_COLORS: Record<
+  UtilityTriangleInfoVariant,
+  { fill: string; stroke: string }
+> = {
+  low: { fill: "#50E7CA", stroke: "#1BC5A3" },
+  medium: { fill: "#DCADD2", stroke: "#AA6A9B" },
+  high: { fill: "#F0AA99", stroke: "#E67357" },
+};
+
 interface UtilityTriangleInfoProps {
   className?: string;
+  /** Low (green), Medium (plum), High (coral) */
+  variant?: UtilityTriangleInfoVariant;
 }
 
 export const UtilityTriangleInfo: React.FC<UtilityTriangleInfoProps> = ({
   className,
+  variant = "low",
 }) => {
+  const { fill, stroke } = VARIANT_COLORS[variant];
+
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -19,8 +36,8 @@ export const UtilityTriangleInfo: React.FC<UtilityTriangleInfoProps> = ({
     >
       <path
         d="M7.78821 1.348C7.6827 1.16611 7.53127 1.01514 7.34906 0.910189C7.16685 0.80524 6.96027 0.75 6.75 0.75C6.53973 0.75 6.33315 0.80524 6.15094 0.910189C5.96873 1.01514 5.8173 1.16611 5.71179 1.348L0.910803 9.74972C0.805511 9.93209 0.750054 10.139 0.75 10.3495C0.749946 10.5601 0.805297 10.767 0.910495 10.9494C1.01569 11.1319 1.16703 11.2834 1.34932 11.3888C1.53161 11.4943 1.73843 11.5499 1.94902 11.5501H11.551C11.7616 11.5499 11.9684 11.4943 12.1507 11.3888C12.333 11.2834 12.4843 11.1319 12.5895 10.9494C12.6947 10.767 12.7501 10.5601 12.75 10.3495C12.7499 10.139 12.6945 9.93209 12.5892 9.74972L7.78821 1.348Z"
-        fill="#50E7CA"
-        stroke="#1BC5A3"
+        fill={fill}
+        stroke={stroke}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"

package/client/components/ui/section-badge.tsx

@@ -0,0 +1,22 @@
+import { cn } from "@/lib/utils";
+
+function SectionBadge({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <span
+      className={cn(
+        "section-badge overline-large",
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+export { SectionBadge };

package/client/components/ui/typography.tsx

@@ -4,113 +4,113 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const typographyVariants = cva("", {
-    variants: {
-        variant: {
-            "heading-large": "heading-large",
-            "heading-medium": "heading-medium",
-            "heading-small": "heading-small",
-            "heading-xsmall": "heading-xsmall",
-            "heading-xxsmall": "heading-xxsmall",
-            "body-large": "body-large",
-            "body-base": "body-base",
-            "body-small": "body-small",
-            "overline-large": "overline-large",
-            "overline-medium": "overline-medium",
-            "overline-small": "overline-small",
-            "number-large": "number-large",
-            "number-base": "number-base",
-        },
-    },
-    defaultVariants: {
-        variant: "body-base",
+  variants: {
+    variant: {
+      "heading-xlarge": "heading-xlarge",
+      "heading-large": "heading-large",
+      "heading-medium": "heading-medium",
+      "heading-small": "heading-small",
+      "heading-xsmall": "heading-xsmall",
+      "heading-xxsmall": "heading-xxsmall",
+      "body-large": "body-large",
+      "body-base": "body-base",
+      "body-small": "body-small",
+      "overline-large": "overline-large",
+      "overline-medium": "overline-medium",
+      "overline-small": "overline-small",
+      "number-large": "number-large",
+      "number-base": "number-base",
     },
+  },
+  defaultVariants: {
+    variant: "body-base",
+  },
 });
 
 type Variant = NonNullable<VariantProps<typeof typographyVariants>["variant"]>;
 
 const defaultElementMap: Record<Variant, React.ElementType> = {
-    "heading-large": "h1",
-    "heading-medium": "h2",
-    "heading-small": "h3",
-    "heading-xsmall": "h4",
-    "heading-xxsmall": "h5",
-    "body-large": "p",
-    "body-base": "p",
-    "body-small": "p",
-    "overline-large": "span",
-    "overline-medium": "span",
-    "overline-small": "span",
-    "number-large": "span",
-    "number-base": "span",
+  "heading-xlarge": "h1",
+  "heading-large": "h1",
+  "heading-medium": "h2",
+  "heading-small": "h3",
+  "heading-xsmall": "h4",
+  "heading-xxsmall": "h5",
+  "body-large": "p",
+  "body-base": "p",
+  "body-small": "p",
+  "overline-large": "span",
+  "overline-medium": "span",
+  "overline-small": "span",
+  "number-large": "span",
+  "number-base": "span",
 };
 
 interface TextProps extends React.HTMLAttributes<HTMLElement> {
-    variant?: Variant;
-    as?: React.ElementType;
+  variant?: Variant;
+  as?: React.ElementType;
 }
 
 const Text = React.forwardRef<HTMLElement, TextProps>(
-    ({ className, variant = "body-base", as, ...props }, ref) => {
-        const Component = as || defaultElementMap[variant];
+  ({ className, variant = "body-base", as, ...props }, ref) => {
+    const Component = as || defaultElementMap[variant];
 
-        return (
-            <Component
-                ref={ref}
-                className={cn(typographyVariants({ variant }), className)}
-                {...props}
-            />
-        );
-    }
+    return (
+      <Component
+        ref={ref}
+        className={cn(typographyVariants({ variant }), className)}
+        {...props}
+      />
+    );
+  },
 );
 Text.displayName = "Text";
 
 interface ListProps extends React.HTMLAttributes<HTMLUListElement> {}
 
 const List = React.forwardRef<HTMLUListElement, ListProps>(
-    ({ className, ...props }, ref) => {
-        return (
-            <ul
-                ref={ref}
-                className={cn("typography-list", className)}
-                {...props}
-            />
-        );
-    }
+  ({ className, ...props }, ref) => {
+    return (
+      <ul ref={ref} className={cn("typography-list", className)} {...props} />
+    );
+  },
 );
 List.displayName = "List";
 
 interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
-    variant?: Variant;
+  variant?: Variant;
 }
 
 const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(
-    ({ className, variant = "body-base", children, ...props }, ref) => {
-        return (
-            <li
-                ref={ref}
-                className={cn("typography-list-item", className)}
-                {...props}
-            >
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="4"
-                    height="4"
-                    viewBox="0 0 4 4"
-                    fill="none"
-                    className="typography-list-bullet"
-                    aria-hidden="true"
-                >
-                    <circle cx="2" cy="2" r="2" fill="#71747D" />
-                </svg>
-                <span className={cn(typographyVariants({ variant }))}>
-                    {children}
-                </span>
-            </li>
-        );
-    }
+  ({ className, variant = "body-base", children, ...props }, ref) => {
+    return (
+      <li
+        ref={ref}
+        className={cn("typography-list-item", className)}
+        {...props}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="4"
+          height="4"
+          viewBox="0 0 4 4"
+          fill="none"
+          className="typography-list-bullet"
+          aria-hidden="true"
+        >
+          <circle cx="2" cy="2" r="2" fill="#71747D" />
+        </svg>
+        <span className={cn(typographyVariants({ variant }))}>{children}</span>
+      </li>
+    );
+  },
 );
 ListItem.displayName = "ListItem";
 
 export { Text, List, ListItem, typographyVariants, defaultElementMap };
-export type { TextProps, ListProps, ListItemProps, Variant as TypographyVariant };
-
+export type {
+  TextProps,
+  ListProps,
+  ListItemProps,
+  Variant as TypographyVariant,
+};

package/client/global.css

@@ -701,6 +701,9 @@ layer(base);
   --blur-lg: 12px;
   --blur-xl: 20px;
 
+  --radius-modal: 40px;
+  --modal-color: rgba(0, 0, 0, 0.08);
+
   --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
   --shadow-sm:
     0 1px 3px 0 rgba(16, 24, 40, 0.1), 0 1px 2px -1px rgba(16, 24, 40, 0.1);
@@ -1145,6 +1148,9 @@ body {
   position: relative;
   z-index: 10;
   font-weight: 600 !important;
+  display: flex;
+  align-items: center;
+  padding-top: 2px;
 }
 
 /* Accordion Styles */
@@ -1252,6 +1258,14 @@ body {
   color: hsl(var(--foreground));
 }
 
+/* Section Badge Styles */
+.section-badge {
+  display: inline-block;
+  border-radius: 0.375rem;
+  padding: 1rem;
+  margin-bottom: 2rem;
+}
+
 /* Label Styles */
 .label {
   color: var(--color-gray-600, #52545d);
@@ -6549,6 +6563,24 @@ body {
   margin-right: 1rem;
 }
 
+.heading-xlarge {
+  font-family: var(--font-ftmade);
+  font-size: 58px;
+  line-height: 64px;
+  letter-spacing: -0.58px;
+
+  &::before {
+    content: "";
+    margin-bottom: -0.2703em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.1023em;
+    display: table;
+  }
+}
+
 .heading-large {
   font-family: var(--font-ftmade);
   font-size: 38px;

package/client/ui/SectionBadge.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SectionBadge } from "../components/ui/section-badge";
+
+const meta = {
+  title: "Review/SectionBadge",
+  component: SectionBadge,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof SectionBadge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "Section Title",
+  },
+};
+
+export const Styled: Story = {
+  args: {
+    children: "Custom Styled",
+    className: "bg-cyan-100 text-blue-500",
+  },
+};