@dust-tt/sparkle 0.2.528 → 0.2.529-rc-1

package/src/context.tsx

@@ -2,6 +2,8 @@ import React, { ComponentType, MouseEvent, ReactNode } from "react";
 import type { UrlObject } from "url";
 import url from "url";
 
+import { cn } from "./lib/utils";
+
 type SparkleLinkProps = {
   href: string | UrlObject;
   className?: string;
@@ -22,6 +24,7 @@ type SparkleLinkProps = {
   target?: string;
   rel?: string;
   prefetch?: boolean;
+  disabled?: boolean;
 };
 
 export type SparkleContextLinkType = ComponentType<
@@ -34,12 +37,24 @@ export type SparkleContextType = {
   };
 };
 
+// To mimic disabled button behavior, we disable pointer events
+// if disabled is true.
 export const aLink: SparkleContextLinkType = React.forwardRef<
   HTMLAnchorElement,
   SparkleLinkProps
 >(
   (
-    { href, className, ariaCurrent, ariaLabel, onClick, children, target, rel },
+    {
+      href,
+      className,
+      ariaCurrent,
+      ariaLabel,
+      onClick,
+      children,
+      target,
+      rel,
+      disabled,
+    },
     ref
   ) => {
     const hrefAsString = typeof href !== "string" ? url.format(href) : href;
@@ -48,7 +63,7 @@ export const aLink: SparkleContextLinkType = React.forwardRef<
       <a
         ref={ref}
         href={hrefAsString}
-        className={className}
+        className={cn(className, disabled && "s-pointer-events-none")}
         aria-current={ariaCurrent}
         aria-label={ariaLabel}
         onClick={onClick}
@@ -64,10 +79,9 @@ export const aLink: SparkleContextLinkType = React.forwardRef<
 export const noHrefLink: SparkleContextLinkType = React.forwardRef<
   HTMLAnchorElement,
   SparkleLinkProps
->(({ className, ariaCurrent, ariaLabel, onClick, children }, ref) => (
+>(({ ariaCurrent, ariaLabel, onClick, children }, ref) => (
   <a
     ref={ref}
-    className={className}
     aria-current={ariaCurrent}
     aria-label={ariaLabel}
     onClick={onClick}

package/src/stories/Button.stories.tsx

@@ -120,6 +120,13 @@ const ButtonBySize = ({
         label="Button with href"
         href="hello"
       />
+      <Button
+        size={size}
+        variant="primary"
+        label="Button with href and disabled"
+        href="hello"
+        disabled={true}
+      />
     </div>
     <div className="s-flex s-items-center s-gap-4">
       <Button size={size} label="Button" isLoading />
@@ -140,10 +147,23 @@ const ButtonBySize = ({
 
 export const Gallery: Story = {
   render: () => (
-    <div className="s-flex s-flex-col s-gap-4">
-      <ButtonBySize size="xs" />
-      <ButtonBySize size="sm" />
-      <ButtonBySize size="md" />
+    <div className="s-flex s-flex-col s-gap-6">
+      <div className="s-flex s-flex-col s-gap-4">
+        <ButtonBySize size="xs" />
+        <ButtonBySize size="sm" />
+        <ButtonBySize size="md" />
+      </div>
+      <Separator />
+      <h3 className="s-text-primary dark:s-text-primary-50">With tooltip</h3>
+      <div className="s-flex s-gap-4">
+        <Button label="Button with tooltip" tooltip="Hello" />
+        <Button
+          label="Button as link with tooltip"
+          href="https://dust.tt"
+          target="_blank"
+          tooltip="Hello"
+        />
+      </div>
     </div>
   ),
 };

package/src/stories/EmptyCTA.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta } from "@storybook/react";
 import React from "react";
 
-import { Button, EmptyCTA, EmptyCTAButton } from "@sparkle/components";
-import { CloudArrowDownIcon, PlusIcon } from "@sparkle/icons/app";
+import { EmptyCTA, EmptyCTAButton } from "@sparkle/components";
+import { CloudArrowDownIcon } from "@sparkle/icons/app";
 
 const meta = {
   title: "Components/EmptyCTA",
@@ -12,7 +12,7 @@ export default meta;
 
 export const Demo = () => {
   return (
-    <div className="s-flex s-flex-col s-gap-4">
+    <div>
       <div className="s-flex s-items-center s-space-x-2">
         <EmptyCTA
           action={
@@ -24,9 +24,6 @@ export const Demo = () => {
           message="You don't have any spaces yet."
         />
       </div>
-      <div className="s-flex s-items-center s-space-x-2">
-        <EmptyCTA action={<Button icon={PlusIcon} label="Add domain" />} />
-      </div>
     </div>
   );
 };