@gsk_poc/untitled-ui-base 0.1.1

package/components/base/tooltip/tooltip.demo.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import type { Placement } from "@react-types/overlays";
+import { HelpCircle } from "@untitledui/icons";
+import { Tooltip, TooltipTrigger } from "@/components/base/tooltip/tooltip";
+
+const PLACEMENTS: { label: string; value: Placement }[] = [
+    {
+        label: "Top left",
+        value: "top left",
+    },
+    {
+        label: "Top",
+        value: "top",
+    },
+    {
+        label: "Top right",
+        value: "top right",
+    },
+    {
+        label: "Bottom left",
+        value: "bottom left",
+    },
+    {
+        label: "Bottom",
+        value: "bottom",
+    },
+    {
+        label: "Bottom right",
+        value: "bottom right",
+    },
+
+    {
+        label: "Left",
+        value: "left",
+    },
+
+    {
+        label: "Right",
+        value: "right",
+    },
+];
+
+export const DefaultDemo = () => {
+    return (
+        <Tooltip title="This is a tooltip">
+            <TooltipTrigger className="group relative flex cursor-pointer flex-col items-center gap-2 text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover">
+                <HelpCircle className="size-4" />
+            </TooltipTrigger>
+        </Tooltip>
+    );
+};
+
+export const WithArrowDemo = () => {
+    return (
+        <Tooltip arrow title="This is a tooltip">
+            <TooltipTrigger className="group relative flex cursor-pointer flex-col items-center gap-2 text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover">
+                <HelpCircle className="size-4" />
+            </TooltipTrigger>
+        </Tooltip>
+    );
+};
+
+export const WithSupportingTextDemo = () => {
+    return (
+        <Tooltip
+            title="This is a tooltip"
+            description="Tooltips are used to describe or identify an element. In most scenarios, tooltip help the user understand meaning, function or alt-text."
+        >
+            <TooltipTrigger className="group relative flex cursor-pointer flex-col items-center gap-2 text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover">
+                <HelpCircle className="size-4" />
+            </TooltipTrigger>
+        </Tooltip>
+    );
+};
+
+export const TooltipDemo = () => (
+    <div className="grid grid-cols-3 gap-12">
+        {PLACEMENTS.map((side, index) => (
+            <div key={index} className="flex flex-col items-center justify-center gap-1 text-center">
+                <Tooltip placement={side.value} title="This is a tooltip">
+                    <TooltipTrigger className="cursor-pointer text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover">
+                        <HelpCircle className="size-4" />
+                    </TooltipTrigger>
+                </Tooltip>
+                <span className="text-xs whitespace-nowrap text-secondary">{side.label}</span>
+            </div>
+        ))}
+    </div>
+);
+
+export const TooltipWithArrow = () => (
+    <div className="grid grid-cols-3 gap-12">
+        {PLACEMENTS.map((side) => (
+            <div key={side.value} className="flex flex-col items-center justify-center gap-1 text-center">
+                <Tooltip arrow placement={side.value} title="This is a tooltip">
+                    <TooltipTrigger className="cursor-pointer text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover">
+                        <HelpCircle className="size-4" />
+                    </TooltipTrigger>
+                </Tooltip>
+                <span className="text-xs whitespace-nowrap text-secondary">{side.label}</span>
+            </div>
+        ))}
+    </div>
+);
+
+export const TooltipWithArrowSupportingText = () => (
+    <div className="grid grid-cols-3 gap-12">
+        {PLACEMENTS.map((side) => (
+            <div key={side.value} className="flex flex-col items-center justify-center gap-1 text-center">
+                <Tooltip
+                    arrow
+                    placement={side.value}
+                    title="This is a tooltip"
+                    description="Tooltips are used to describe or identify an element. In most scenarios, tooltip help the user understand meaning, function or alt-text."
+                >
+                    <TooltipTrigger className="cursor-pointer text-fg-quaternary transition duration-100 ease-linear hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover">
+                        <HelpCircle className="size-4" />
+                    </TooltipTrigger>
+                </Tooltip>
+                <span className="text-xs whitespace-nowrap text-secondary">{side.label}</span>
+            </div>
+        ))}
+    </div>
+);

package/components/base/tooltip/tooltip.story.tsx

@@ -0,0 +1,21 @@
+import type { FC } from "react";
+import * as Tooltips from "@/components/base/tooltip/tooltip.demo";
+
+export default {
+    title: "Base components/Tooltips",
+    decorators: [
+        (Story: FC) => (
+            <div className="flex min-h-screen items-center justify-center bg-primary p-16">
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export const Tooltip = () => <Tooltips.TooltipDemo />;
+
+export const TooltipWithArrow = () => <Tooltips.TooltipWithArrow />;
+TooltipWithArrow.storyName = "Tooltip with arrow";
+
+export const TooltipWithArrowSupportingText = () => <Tooltips.TooltipWithArrowSupportingText />;
+TooltipWithArrowSupportingText.storyName = "Tooltip with arrow supporting text";

package/components/foundations/featured-icon/featured-icon.demo.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { CheckCircle } from "@untitledui/icons";
+import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icon";
+
+export const DefaultDemo = () => {
+    return (
+        <div className="flex flex-col items-center gap-8 md:flex-row md:gap-10">
+            <FeaturedIcon color="brand" icon={CheckCircle} theme="light" size="lg" />
+            <FeaturedIcon color="brand" icon={CheckCircle} theme="gradient" size="lg" />
+            <FeaturedIcon color="brand" icon={CheckCircle} theme="dark" size="lg" />
+            <FeaturedIcon color="gray" icon={CheckCircle} theme="modern" size="lg" />
+            <FeaturedIcon color="gray" icon={CheckCircle} theme="modern-neue" size="lg" />
+            <FeaturedIcon color="brand" icon={CheckCircle} theme="outline" size="lg" />
+        </div>
+    );
+};
+
+export const LightDemo = () => {
+    return (
+        <div className="flex flex-col items-start gap-8">
+            {(["brand", "gray", "error", "warning", "success"] as const).map((color) => (
+                <div key={color} className="flex gap-4">
+                    <FeaturedIcon color={color} icon={CheckCircle} theme="light" size="sm" />
+                    <FeaturedIcon color={color} icon={CheckCircle} theme="light" size="md" />
+                    <FeaturedIcon color={color} icon={CheckCircle} theme="light" size="lg" />
+                    <FeaturedIcon color={color} icon={CheckCircle} theme="light" size="xl" />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const GradientDemo = () => {
+    return (
+        <div className="flex flex-col items-start gap-8">
+            {(["brand", "gray", "error", "warning", "success"] as const).map((color) => (
+                <div key={color} className="flex gap-4">
+                    <FeaturedIcon color={color} icon={CheckCircle} theme="gradient" size="sm" />
+                    <FeaturedIcon color={color} icon={CheckCircle} theme="gradient" size="md" />
+                    <FeaturedIcon color={color} icon={CheckCircle} theme="gradient" size="lg" />
+                    <FeaturedIcon color={color} icon={CheckCircle} theme="gradient" size="xl" />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const DarkDemo = () => {
+    return (
+        <div className="flex flex-col items-start gap-8">
+            {(["brand", "gray", "error", "warning", "success"] as const).map((color) => (
+                <div key={color} className="flex gap-4">
+                    <FeaturedIcon color={color} icon={CheckCircle} theme="dark" size="sm" />
+                    <FeaturedIcon color={color} icon={CheckCircle} theme="dark" size="md" />
+                    <FeaturedIcon color={color} icon={CheckCircle} theme="dark" size="lg" />
+                    <FeaturedIcon color={color} icon={CheckCircle} theme="dark" size="xl" />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const OutlineDemo = () => {
+    return (
+        <div className="flex flex-col items-start gap-8">
+            {(["brand", "gray", "error", "warning", "success"] as const).map((color) => (
+                <div key={color} className="flex gap-8">
+                    <FeaturedIcon color={color} icon={CheckCircle} theme="outline" size="sm" />
+                    <FeaturedIcon color={color} icon={CheckCircle} theme="outline" size="md" />
+                    <FeaturedIcon color={color} icon={CheckCircle} theme="outline" size="lg" />
+                    <FeaturedIcon color={color} icon={CheckCircle} theme="outline" size="xl" />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const ModernDemo = () => {
+    return (
+        <div className="flex items-start gap-4">
+            <FeaturedIcon color="gray" icon={CheckCircle} theme="modern" size="sm" />
+            <FeaturedIcon color="gray" icon={CheckCircle} theme="modern" size="md" />
+            <FeaturedIcon color="gray" icon={CheckCircle} theme="modern" size="lg" />
+            <FeaturedIcon color="gray" icon={CheckCircle} theme="modern" size="xl" />
+        </div>
+    );
+};
+
+export const ModernNeueDemo = () => {
+    return (
+        <div className="flex items-start gap-4">
+            <FeaturedIcon color="gray" icon={CheckCircle} theme="modern-neue" size="sm" />
+            <FeaturedIcon color="gray" icon={CheckCircle} theme="modern-neue" size="md" />
+            <FeaturedIcon color="gray" icon={CheckCircle} theme="modern-neue" size="lg" />
+            <FeaturedIcon color="gray" icon={CheckCircle} theme="modern-neue" size="xl" />
+        </div>
+    );
+};
+
+export const FeaturedIcons = () => {
+    return (
+        <div className="grid w-max grid-cols-2 gap-12">
+            <div className="flex flex-col items-start gap-8">
+                {(["brand", "gray", "error", "warning", "success"] as const).map((color) => (
+                    <div key={color} className="flex gap-4">
+                        <FeaturedIcon color={color} icon={CheckCircle} theme="light" size="sm" />
+                        <FeaturedIcon color={color} icon={CheckCircle} theme="light" size="md" />
+                        <FeaturedIcon color={color} icon={CheckCircle} theme="light" size="lg" />
+                        <FeaturedIcon color={color} icon={CheckCircle} theme="light" size="xl" />
+                    </div>
+                ))}
+            </div>
+
+            <div className="flex flex-col items-start gap-8">
+                {(["brand", "gray", "error", "warning", "success"] as const).map((color) => (
+                    <div key={color} className="flex gap-4">
+                        <FeaturedIcon color={color} icon={CheckCircle} theme="gradient" size="sm" />
+                        <FeaturedIcon color={color} icon={CheckCircle} theme="gradient" size="md" />
+                        <FeaturedIcon color={color} icon={CheckCircle} theme="gradient" size="lg" />
+                        <FeaturedIcon color={color} icon={CheckCircle} theme="gradient" size="xl" />
+                    </div>
+                ))}
+            </div>
+
+            <div className="flex flex-col items-start gap-8">
+                {(["brand", "gray", "error", "warning", "success"] as const).map((color) => (
+                    <div key={color} className="flex gap-4">
+                        <FeaturedIcon color={color} icon={CheckCircle} theme="dark" size="sm" />
+                        <FeaturedIcon color={color} icon={CheckCircle} theme="dark" size="md" />
+                        <FeaturedIcon color={color} icon={CheckCircle} theme="dark" size="lg" />
+                        <FeaturedIcon color={color} icon={CheckCircle} theme="dark" size="xl" />
+                    </div>
+                ))}
+            </div>
+
+            <div className="flex items-start gap-4">
+                <FeaturedIcon color="gray" icon={CheckCircle} theme="modern" size="sm" />
+                <FeaturedIcon color="gray" icon={CheckCircle} theme="modern" size="md" />
+                <FeaturedIcon color="gray" icon={CheckCircle} theme="modern" size="lg" />
+                <FeaturedIcon color="gray" icon={CheckCircle} theme="modern" size="xl" />
+            </div>
+        </div>
+    );
+};
+
+export const FeaturedIconsOutline = () => {
+    return (
+        <div className="flex flex-col gap-8">
+            {(["brand", "gray", "error", "warning", "success"] as const).map((color) => (
+                <div key={color} className="flex gap-8">
+                    <FeaturedIcon color={color} icon={CheckCircle} theme="outline" size="sm" />
+                    <FeaturedIcon color={color} icon={CheckCircle} theme="outline" size="md" />
+                    <FeaturedIcon color={color} icon={CheckCircle} theme="outline" size="lg" />
+                    <FeaturedIcon color={color} icon={CheckCircle} theme="outline" size="xl" />
+                </div>
+            ))}
+        </div>
+    );
+};

package/components/foundations/featured-icon/featured-icon.story.tsx

@@ -0,0 +1,25 @@
+import type { FC } from "react";
+import * as Demos from "./featured-icon.demo";
+
+export default {
+    title: "Base components/Featured Icons",
+    decorators: [
+        (Story: FC) => (
+            <div className="flex min-h-screen w-full overflow-auto bg-primary p-8">
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export const Light = () => <Demos.LightDemo />;
+
+export const Gradient = () => <Demos.GradientDemo />;
+
+export const Dark = () => <Demos.DarkDemo />;
+
+export const Modern = () => <Demos.ModernDemo />;
+
+export const ModernNeue = () => <Demos.ModernNeueDemo />;
+
+export const Outline = () => <Demos.OutlineDemo />;

package/components/shared-assets/credit-card/credit-card.demo.tsx

@@ -0,0 +1,106 @@
+import { CreditCard } from "./credit-card";
+
+export const CreditCardExample = () => (
+    <div className="flex items-center justify-center">
+        <CreditCard type="brand-dark" company="Untitled." cardNumber="1234 1234 1234 1234" cardHolder="OLIVIA RHYE" cardExpiration="06/28" />
+    </div>
+);
+
+// Normal types
+export const CreditCardTransparent = () => (
+    <div className="flex items-center justify-center">
+        <CreditCard type="transparent" />
+    </div>
+);
+
+export const CreditCardTransparentGradient = () => (
+    <div className="flex items-center justify-center">
+        <CreditCard type="transparent-gradient" />
+    </div>
+);
+
+export const CreditCardBrandDark = () => (
+    <div className="flex items-center justify-center">
+        <CreditCard type="brand-dark" />
+    </div>
+);
+
+export const CreditCardBrandLight = () => (
+    <div className="flex items-center justify-center">
+        <CreditCard type="brand-light" />
+    </div>
+);
+
+export const CreditCardGrayDark = () => (
+    <div className="flex items-center justify-center">
+        <CreditCard type="gray-dark" />
+    </div>
+);
+
+export const CreditCardGrayLight = () => (
+    <div className="flex items-center justify-center">
+        <CreditCard type="gray-light" />
+    </div>
+);
+
+// Strip types
+export const CreditCardTransparentStrip = () => (
+    <div className="flex items-center justify-center">
+        <CreditCard type="transparent-strip" />
+    </div>
+);
+
+export const CreditCardGrayStrip = () => (
+    <div className="flex items-center justify-center">
+        <CreditCard type="gray-strip" />
+    </div>
+);
+
+export const CreditCardGradientStrip = () => (
+    <div className="flex items-center justify-center">
+        <CreditCard type="gradient-strip" />
+    </div>
+);
+
+export const CreditCardSalmonStrip = () => (
+    <div className="flex items-center justify-center">
+        <CreditCard type="salmon-strip" />
+    </div>
+);
+
+// Vertical strip types
+export const CreditCardGrayStripVertical = () => (
+    <div className="flex items-center justify-center">
+        <CreditCard type="gray-strip-vertical" />
+    </div>
+);
+
+export const CreditCardGradientStripVertical = () => (
+    <div className="flex items-center justify-center">
+        <CreditCard type="gradient-strip-vertical" />
+    </div>
+);
+
+export const CreditCardSalmonStripVertical = () => (
+    <div className="flex items-center justify-center">
+        <CreditCard type="salmon-strip-vertical" />
+    </div>
+);
+
+export const CreditCardCustomization = () => (
+    <div className="flex flex-col gap-8">
+        <div className="flex items-center justify-center">
+            <CreditCard type="brand-dark" company="Brex" cardNumber="5678 9012 3456 7890" cardHolder="PEDRO FRANCESCHI" cardExpiration="12/28" />
+        </div>
+        <div className="flex items-center justify-center">
+            <CreditCard type="gradient-strip" company="Apple Inc." cardNumber="0987 6543 2109 8765" cardHolder="TIM COOK" cardExpiration="06/29" />
+        </div>
+    </div>
+);
+
+export const CreditCardSizes = () => (
+    <div className="flex flex-col items-center gap-8">
+        <CreditCard type="brand-dark" width={240} />
+        <CreditCard type="brand-dark" width={316} />
+    </div>
+);

package/components/shared-assets/credit-card/credit-card.story.tsx

@@ -0,0 +1,41 @@
+import type { FC } from "react";
+import { CreditCard } from "./credit-card";
+
+export default {
+    title: "Shared Assets/Miscellaneous assets/Credit Card",
+    decorators: [
+        (Story: FC) => (
+            <div className="min-h-screen bg-secondary p-8">
+                <Story />
+            </div>
+        ),
+    ],
+};
+
+export const CreditCardStory = () => (
+    <div className="flex gap-8">
+        <div className="flex flex-col gap-8">
+            <CreditCard type="transparent" />
+            <CreditCard type="transparent-gradient" />
+            <CreditCard type="brand-dark" />
+            <CreditCard type="brand-light" />
+            <CreditCard type="gray-dark" />
+            <CreditCard type="gray-light" />
+        </div>
+
+        <div className="flex flex-col gap-8">
+            <CreditCard type="transparent-strip" />
+            <CreditCard type="gray-strip" />
+            <CreditCard type="gradient-strip" />
+            <CreditCard type="salmon-strip" />
+        </div>
+
+        <div className="flex flex-col gap-8">
+            <CreditCard type="gray-strip-vertical" />
+            <CreditCard type="gradient-strip-vertical" />
+            <CreditCard type="salmon-strip-vertical" />
+        </div>
+    </div>
+);
+
+CreditCardStory.storyName = "Credit card";