linkedunion-design-kit 1.9.2 → 1.9.4

package/dist/src/components/Alerts/Alert/alert.stories.jsx

@@ -0,0 +1,344 @@
+import { Alert, AlertAction, AlertCancel, AlertHeader, AlertTitle, AlertDescription, AlertFooter, colorOptions, sizeOptions, shadowOptions, variantOptions, getIconForColor, getContentForColor, } from "../AlertDialog/index";
+import LUIcon from "../../Icons/LUIcon";
+import { Button } from "../../Button/Button/Button";
+import { Heading } from "../../Typography/Heading/heading";
+import { Body } from "../../Typography/Body/body";
+export default {
+    title: "Components/Alert/Alert",
+    component: Alert,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: "A non-modal alert component that uses the same styling as AlertDialog but renders directly in the page flow without requiring a dialog context.",
+            },
+        },
+    },
+};
+// Template for stories with args
+var Template = function (args) { return (<Alert size={args.size} shadow={args.shadow} color={args.color} variant={args.variant}>
+    <AlertHeader>
+      {args.Icon && <LUIcon icon={args.Icon} variant="padded"/>}
+      <AlertTitle>{args.title}</AlertTitle>
+      <AlertDescription>{args.description}</AlertDescription>
+    </AlertHeader>
+    <AlertFooter>
+      {args.showCancel && (<AlertCancel onClick={function () { return alert("Cancel clicked"); }} className="text-blue-600 hover:text-blue-700 hover:underline">
+          {args.cancelText}
+        </AlertCancel>)}
+      {args.showAction && (<AlertAction onClick={function () { return alert("Action clicked"); }} className="text-blue-600 hover:text-blue-700 hover:underline">
+          {args.actionText}
+        </AlertAction>)}
+    </AlertFooter>
+  </Alert>); };
+// Default story with all controls
+export var Default = Template.bind({});
+Default.args = {
+    size: "md",
+    shadow: "none",
+    color: "blue",
+    variant: "outline",
+    Icon: "info",
+    title: "Update Available",
+    description: "A new version of the application is available. Would you like to update now? The update includes bug fixes and performance improvements.",
+    cancelText: "Later",
+    actionText: "Update Now",
+    showCancel: true,
+    showAction: true,
+};
+Default.argTypes = {
+    size: {
+        control: { type: "select" },
+        options: sizeOptions,
+        description: "Size variant for Alert",
+        table: {
+            defaultValue: { summary: "md" },
+            type: { summary: "enum" },
+            category: "Alert",
+        },
+    },
+    shadow: {
+        control: { type: "select" },
+        options: shadowOptions,
+        description: "Shadow variant for Alert",
+        table: {
+            defaultValue: { summary: "none" },
+            type: { summary: "enum" },
+            category: "Alert",
+        },
+    },
+    color: {
+        control: { type: "select" },
+        options: colorOptions,
+        description: "Color theme for Alert",
+        table: {
+            defaultValue: { summary: "blue" },
+            type: { summary: "enum" },
+            category: "Alert",
+        },
+    },
+    variant: {
+        control: { type: "select" },
+        options: variantOptions,
+        description: "Variant for Alert (outline | fill)",
+        table: {
+            defaultValue: { summary: "outline" },
+            type: { summary: "enum" },
+            category: "Alert",
+        },
+    },
+    Icon: {
+        control: { type: "text" },
+        description: "Icon to display in AlertHeader (LUIcon name)",
+        table: {
+            type: { summary: "string" },
+            category: "AlertHeader",
+        },
+    },
+    title: {
+        control: { type: "text" },
+        description: "Title text for AlertTitle",
+        table: {
+            type: { summary: "string" },
+            category: "AlertTitle",
+        },
+    },
+    description: {
+        control: { type: "text" },
+        description: "Description text for AlertDescription",
+        table: {
+            type: { summary: "string" },
+            category: "AlertDescription",
+        },
+    },
+    cancelText: {
+        control: { type: "text" },
+        description: "Text for AlertCancel button",
+        table: {
+            type: { summary: "string" },
+            category: "AlertCancel",
+        },
+    },
+    actionText: {
+        control: { type: "text" },
+        description: "Text for AlertAction button",
+        table: {
+            type: { summary: "string" },
+            category: "AlertAction",
+        },
+    },
+    showCancel: {
+        control: { type: "boolean" },
+        description: "Whether to show the cancel button",
+        table: {
+            type: { summary: "boolean" },
+            category: "Alert",
+        },
+    },
+    showAction: {
+        control: { type: "boolean" },
+        description: "Whether to show the action button",
+        table: {
+            type: { summary: "boolean" },
+            category: "Alert",
+        },
+    },
+};
+// Simple Example showing the exact code structure
+export var Example = function () { return (<Alert color="blue" size="md" shadow="none">
+    <AlertHeader>
+      <LUIcon icon="info" variant="padded"/>
+      <AlertTitle>Update Available</AlertTitle>
+      <AlertDescription>
+        A new version of the application is available. Would you like to update
+        now? The update includes bug fixes and performance improvements.
+      </AlertDescription>
+    </AlertHeader>
+    <AlertFooter>
+      <AlertCancel className="text-blue-600 hover:text-blue-700 hover:underline" onClick={function () { return console.log("Later clicked"); }}>
+        Later
+      </AlertCancel>
+      <AlertAction className="text-blue-600 hover:text-blue-700 hover:underline" onClick={function () { return console.log("Update Now clicked"); }}>
+        Update Now
+      </AlertAction>
+    </AlertFooter>
+  </Alert>); };
+Example.parameters = {
+    docs: {
+        description: {
+            story: "This example shows the exact code structure you should use to implement the Alert component.",
+        },
+    },
+};
+// All Colors Example
+export var AllColors = function () { return (<div className="flex flex-col gap-4">
+    {colorOptions.map(function (color) {
+        var content = getContentForColor(color);
+        return (<Alert key={color} color={color}>
+          <AlertHeader>
+            <LUIcon icon={getIconForColor(color)} variant="padded"/>
+            <AlertTitle>{content.title}</AlertTitle>
+            <AlertDescription>{content.description}</AlertDescription>
+          </AlertHeader>
+          <AlertFooter>
+            <AlertCancel className={"text-".concat(color, "-600 hover:text-").concat(color, "-700 hover:underline")}>
+              Cancel
+            </AlertCancel>
+            <AlertAction className={"text-".concat(color, "-600 hover:text-").concat(color, "-700 hover:underline")}>
+              {content.button}
+            </AlertAction>
+          </AlertFooter>
+        </Alert>);
+    })}
+  </div>); };
+// All Sizes Example
+export var AllSizes = function () { return (<div className="flex flex-col gap-4">
+    {sizeOptions.map(function (size) { return (<Alert key={size} size={size} color="blue">
+        <AlertHeader>
+          <LUIcon icon="info" color="blue" variant="padded"/>
+          <AlertTitle>Size: {size.toUpperCase()}</AlertTitle>
+          <AlertDescription>
+            This is an example of the Alert component with size {size}.
+          </AlertDescription>
+        </AlertHeader>
+        <AlertFooter>
+          <AlertCancel className="text-blue-600 hover:text-blue-700 hover:underline">
+            Cancel
+          </AlertCancel>
+          <AlertAction className="text-blue-600 hover:text-blue-700 hover:underline">
+            Action
+          </AlertAction>
+        </AlertFooter>
+      </Alert>); })}
+  </div>); };
+// Variants Example
+export var Variants = function () { return (<div className="flex flex-col gap-4">
+    <Alert variant="outline" color="blue">
+      <AlertHeader>
+        <LUIcon icon="info" variant="padded"/>
+        <AlertTitle>Outline Variant</AlertTitle>
+        <AlertDescription>
+          This is an example of the Alert component with the outline variant.
+        </AlertDescription>
+      </AlertHeader>
+      <AlertFooter>
+        <AlertCancel className="text-blue-600 hover:text-blue-700 hover:underline">
+          Cancel
+        </AlertCancel>
+        <AlertAction className="text-blue-600 hover:text-blue-700 hover:underline">
+          Action
+        </AlertAction>
+      </AlertFooter>
+    </Alert>
+
+    <Alert variant="fill" color="blue">
+      <AlertHeader>
+        <LUIcon icon="info" variant="padded"/>
+        <AlertTitle>Fill Variant</AlertTitle>
+        <AlertDescription>
+          This is an example of the Alert component with the fill variant.
+        </AlertDescription>
+      </AlertHeader>
+      <AlertFooter>
+        <AlertCancel className="text-blue-600 hover:text-blue-700 hover:underline">
+          Cancel
+        </AlertCancel>
+        <AlertAction className="text-blue-600 hover:text-blue-700 hover:underline">
+          Action
+        </AlertAction>
+      </AlertFooter>
+    </Alert>
+  </div>); };
+// Comparison with regular AlertDialog
+export var ComparisonWithAlertDialog = function () { return (<div className="flex flex-col gap-8">
+    <div>
+      <h2 className="text-lg font-semibold mb-2">Alert (Non-Modal)</h2>
+      <p className="text-sm text-gray-600 mb-4">
+        This version renders directly in the page flow and does not create a
+        modal overlay.
+      </p>
+      <Alert color="green">
+        <AlertHeader>
+          <LUIcon icon="check" variant="padded"/>
+          <AlertTitle>Success!</AlertTitle>
+          <AlertDescription>
+            Your changes have been saved successfully.
+          </AlertDescription>
+        </AlertHeader>
+        <AlertFooter>
+          <AlertAction className="text-green-600 hover:text-green-700 hover:underline">
+            Close
+          </AlertAction>
+        </AlertFooter>
+      </Alert>
+    </div>
+
+    <div>
+      <h2 className="text-lg font-semibold mb-2">
+        AlertDialog Button (Modal - Click to Open)
+      </h2>
+      <p className="text-sm text-gray-600 mb-4">
+        This is the regular AlertDialog component that creates a modal overlay.
+      </p>
+      <Button color="light-green" onClick={function () { }}>
+        Open Modal AlertDialog (See in Stories)
+      </Button>
+    </div>
+  </div>); };
+// No Buttons Example
+export var NoButtons = function () { return (<Alert color="yellow">
+    <AlertHeader>
+      <LUIcon icon="info" variant="padded"/>
+      <AlertTitle>Maintenance Notice</AlertTitle>
+      <AlertDescription>
+        System maintenance is scheduled for tonight at 10:00 PM. The system will
+        be unavailable for approximately 30 minutes.
+      </AlertDescription>
+    </AlertHeader>
+  </Alert>); };
+// With Shadow Example
+export var WithShadow = function () { return (<Alert color="blue" shadow="lg">
+    <AlertHeader>
+      <LUIcon icon="info" variant="padded"/>
+      <AlertTitle>Information</AlertTitle>
+      <AlertDescription>
+        This alert has a large shadow applied to it.
+      </AlertDescription>
+    </AlertHeader>
+    <AlertFooter>
+      <AlertAction className="text-blue-600 hover:text-blue-700 hover:underline">
+        Got it
+      </AlertAction>
+    </AlertFooter>
+  </Alert>); };
+// CustomizeAlert Example - showing how to customize with Typography components
+export var CustomizeAlert = function () { return (<Alert color="red" size="md" variant="fill">
+    <AlertHeader>
+      <LUIcon icon="info" size="9xl" color="light-red" variant="padded"/>
+      <AlertTitle>
+        <Heading variant="h1-700">Customize Alert Title</Heading>
+      </AlertTitle>
+      <AlertDescription>
+        <Body variant="body-xs">
+          This Alert uses a customized icon size, custom typography variants,
+          and different button colors to demonstrate full customization
+          capabilities.
+        </Body>
+      </AlertDescription>
+    </AlertHeader>
+    <AlertFooter>
+      <AlertCancel variant="fill" color="indigo">
+        Close
+      </AlertCancel>
+      <AlertAction variant="outline" color="light-green">
+        OK
+      </AlertAction>
+    </AlertFooter>
+  </Alert>); };
+CustomizeAlert.parameters = {
+    docs: {
+        description: {
+            story: "This example demonstrates how to customize the Alert component with different typography variants, icon sizes, colors, and button styles. The alert uses a fill variant with red color, custom typography components, a 9xl icon size, and mixed button variants with different colors.",
+        },
+    },
+};

package/dist/src/components/Alerts/AlertDialog/alert-dialog.jsx

@@ -0,0 +1,170 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils";
+import { Button } from "../../Button/Button/Button";
+import LUIcon from "../../Icons/LUIcon";
+// Create context for AlertDialog color
+var AlertDialogContext = React.createContext({});
+var useAlertDialogContext = function () { return React.useContext(AlertDialogContext); };
+export var alertDialogVariants = {
+    size: {
+        lg: "[&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-size)]:size-9 gap-4 [&_h2[data-slot='alert-dialog-title']]:text-2xl [&_h2[data-slot='alert-dialog-title']]:font-medium [&_p[data-slot='alert-dialog-description']]:text-lg [&_p[data-slot='alert-dialog-description']]:font-normal",
+        md: "[&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-size)]:size-8 gap-3 [&_h2[data-slot='alert-dialog-title']]:text-xl [&_h2[data-slot='alert-dialog-title']]:font-medium [&_p[data-slot='alert-dialog-description']]:text-base [&_p[data-slot='alert-dialog-description']]:font-normal",
+        sm: "[&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-size)]:size-7 gap-2 [&_h2[data-slot='alert-dialog-title']]:text-lg [&_h2[data-slot='alert-dialog-title']]:font-medium [&_p[data-slot='alert-dialog-description']]:text-sm [&_p[data-slot='alert-dialog-description']]:font-normal",
+    },
+    shadow: {
+        none: "",
+        lg: "shadow-lg",
+    },
+    color: {
+        blue: "bg-gray-50 text-blue-900 border-blue-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-blue-600 [&_h2[data-slot='alert-dialog-title']]:text-blue-600",
+        red: "bg-gray-50 text-red-900 border-red-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-red-600 [&_h2[data-slot='alert-dialog-title']]:text-red-600",
+        indigo: "bg-gray-50 text-indigo-900 border-indigo-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-indigo-600 [&_h2[data-slot='alert-dialog-title']]:text-indigo-600",
+        yellow: "bg-gray-50 text-yellow-900 border-yellow-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-yellow-600 [&_h2[data-slot='alert-dialog-title']]:text-yellow-600",
+        green: "bg-gray-50 text-green-900 border-green-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-green-600 [&_h2[data-slot='alert-dialog-title']]:text-green-600",
+        gray: "bg-gray-50 text-gray-900 border-gray-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-gray-600 [&_h2[data-slot='alert-dialog-title']]:text-gray-600",
+    },
+    variant: {
+        outline: "",
+        fill: "",
+    },
+};
+var alertDialogContentVariants = cva("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border-l-4 p-4 duration-200 sm:max-w-lg", {
+    variants: alertDialogVariants,
+    defaultVariants: {
+        size: "md",
+        shadow: "none",
+        color: "blue",
+        variant: "outline",
+    },
+    compoundVariants: [
+        {
+            color: "blue",
+            variant: "fill",
+            class: "bg-blue-100 text-blue-900 border-blue-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-blue-600 [&_h2[data-slot='alert-dialog-title']]:text-blue-600",
+        },
+        {
+            color: "red",
+            variant: "fill",
+            class: "bg-red-100 text-red-900 border-red-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-red-600 [&_h2[data-slot='alert-dialog-title']]:text-red-600",
+        },
+        {
+            color: "indigo",
+            variant: "fill",
+            class: "bg-indigo-100 text-indigo-900 border-indigo-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-indigo-600 [&_h2[data-slot='alert-dialog-title']]:text-indigo-600",
+        },
+        {
+            color: "yellow",
+            variant: "fill",
+            class: "bg-yellow-100 text-yellow-900 border-yellow-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-yellow-600 [&_h2[data-slot='alert-dialog-title']]:text-yellow-600",
+        },
+        {
+            color: "green",
+            variant: "fill",
+            class: "bg-green-100 text-green-900 border-green-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-green-600 [&_h2[data-slot='alert-dialog-title']]:text-green-600",
+        },
+        {
+            color: "gray",
+            variant: "fill",
+            class: "bg-gray-100 text-gray-900 border-gray-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-gray-600 [&_h2[data-slot='alert-dialog-title']]:text-gray-600",
+        },
+    ],
+});
+function AlertDialog(_a) {
+    var props = __rest(_a, []);
+    return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props}/>;
+}
+function AlertDialogTrigger(_a) {
+    var props = __rest(_a, []);
+    return (<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props}/>);
+}
+function AlertDialogPortal(_a) {
+    var props = __rest(_a, []);
+    return (<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props}/>);
+}
+function AlertDialogOverlay(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<AlertDialogPrimitive.Overlay data-slot="alert-dialog-overlay" className={cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className)} {...props}/>);
+}
+function AlertDialogContent(_a) {
+    var className = _a.className, size = _a.size, shadow = _a.shadow, color = _a.color, variant = _a.variant, props = __rest(_a, ["className", "size", "shadow", "color", "variant"]);
+    return (<AlertDialogContext.Provider value={{ color: color || undefined }}>
+      <AlertDialogPortal>
+        <AlertDialogOverlay />
+        <AlertDialogPrimitive.Content data-slot="alert-dialog-content" className={cn(alertDialogContentVariants({ size: size, shadow: shadow, color: color, variant: variant }), className)} {...props}/>
+      </AlertDialogPortal>
+    </AlertDialogContext.Provider>);
+}
+function AlertDialogHeader(_a) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    // Check if children contains LUIcon
+    var childrenArray = React.Children.toArray(children);
+    var hasIcon = childrenArray.some(function (child) { return React.isValidElement(child) && child.type === LUIcon; });
+    if (hasIcon) {
+        var iconWithClass_1 = null;
+        var otherChildren_1 = [];
+        childrenArray.forEach(function (child) {
+            if (React.isValidElement(child) && child.type === LUIcon) {
+                var iconElement = child;
+                // If LUIcon has a size prop, add .lu-icon-custom-size to className
+                var hasSizeProp = !!iconElement.props.size;
+                // If LUIcon has a color prop, add .lu-icon-custom-color to className
+                var hasColorProp = !!iconElement.props.color;
+                iconWithClass_1 = React.cloneElement(iconElement, {
+                    className: cn(iconElement.props.className, hasSizeProp && "lu-icon-custom-size", hasColorProp && "lu-icon-custom-color"),
+                });
+            }
+            else {
+                otherChildren_1.push(child);
+            }
+        });
+        return (<div data-slot="alert-dialog-header" className={cn("flex flex-row gap-3 items-start text-left", className)} {...props}>
+        {iconWithClass_1}
+        <div>{otherChildren_1}</div>
+      </div>);
+    }
+    return (<div data-slot="alert-dialog-header" className={cn("flex flex-col gap-2 text-center sm:text-left", className)} {...props}>
+      {children}
+    </div>);
+}
+function AlertDialogFooter(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<div data-slot="alert-dialog-footer" className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)} {...props}/>);
+}
+function AlertDialogTitle(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<AlertDialogPrimitive.Title data-slot="alert-dialog-title" className={cn("text-lg font-semibold", className)} {...props}/>);
+}
+function AlertDialogDescription(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<AlertDialogPrimitive.Description data-slot="alert-dialog-description" className={cn("text-black text-sm", className)} {...props}/>);
+}
+function AlertDialogAction(_a) {
+    var className = _a.className, colorProp = _a.color, props = __rest(_a, ["className", "color"]);
+    var contextColor = useAlertDialogContext().color;
+    var color = colorProp || contextColor || undefined;
+    return (<AlertDialogPrimitive.Action asChild>
+      <Button variant="link" color={color} data-slot="alert-dialog-action" className={cn("h-auto p-0", className)} {...props}/>
+    </AlertDialogPrimitive.Action>);
+}
+function AlertDialogCancel(_a) {
+    var className = _a.className, colorProp = _a.color, props = __rest(_a, ["className", "color"]);
+    var contextColor = useAlertDialogContext().color;
+    var color = colorProp || contextColor || undefined;
+    return (<AlertDialogPrimitive.Cancel asChild>
+      <Button variant="link" color={color} data-slot="alert-dialog-cancel" className={cn("h-auto p-0", className)} {...props}/>
+    </AlertDialogPrimitive.Cancel>);
+}
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };