<CallToAction as="span"> and type="submit" (#2057)

Author: hasparus

.changeset/silent-crabs-protect.md

@@ -0,0 +1,5 @@
+---
+'@theguild/components': minor
+---
+
+<CallToAction as="span"> and type="submit"

packages/components/src/components/call-to-action.stories.ts renamed to packages/components/src/components/call-to-action.stories.tsx

@@ -10,6 +10,16 @@ export default {
     children: 'Click me',
     onClick: () => alert('Clicked!'),
   },
+  argTypes: {
+    as: {
+      control: 'select',
+      options: [undefined, 'span', 'div'],
+    },
+    variant: {
+      control: 'select',
+      options: ['primary', 'primary-inverted', 'secondary', 'secondary-inverted', 'tertiary'],
+    },
+  },
   parameters: {
     padding: true,
   },
@@ -44,3 +54,38 @@ export const Tertiary: StoryObj<CallToActionProps> = {
     variant: 'tertiary',
   },
 };
+
+export const AsSpan: StoryObj<CallToActionProps> = {
+  args: {
+    as: 'span',
+    children: 'Show More',
+    onClick: () => {
+      // no alert
+    },
+  },
+  decorators: [
+    (Story: React.FC) => (
+      <details>
+        <summary className="list-none pb-4">
+          <Story />
+        </summary>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+      </details>
+    ),
+  ],
+};
+
+export const Link: StoryObj<CallToActionProps> = {
+  args: {
+    href: 'https://the-guild.dev/graphql/hive/ecosystem',
+    children: 'Explore the Ecosystem',
+    variant: 'secondary-inverted',
+  },
+};
+
+export const Submit: StoryObj<CallToActionProps> = {
+  args: {
+    type: 'submit',
+    children: 'Submit',
+  },
+};

packages/components/src/components/call-to-action.tsx

@@ -1,3 +1,4 @@
+import { HTMLAttributes } from 'react';
 import { cn } from '../cn';
 import { Anchor } from './anchor';
 
@@ -29,21 +30,38 @@ export declare namespace CallToActionProps {
 
   export interface AnchorProps extends BaseProps, React.ComponentPropsWithoutRef<typeof Anchor> {
     href: string;
+    as?: never;
   }
 
   export interface ButtonProps
     extends BaseProps,
       React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     href?: never;
-    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    as?: never;
+  }
+
+  /**
+   * Use inside `<summary>` or as visual part of bigger interactive element.
+   * Prefer using `href` prop using CallToAction as `<button>` in other cases.
+   */
+  export interface NonInteractiveProps
+    extends BaseProps,
+      React.DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
+    href?: never;
+    as: 'span' | 'div';
   }
 }
 
-export type CallToActionProps = CallToActionProps.AnchorProps | CallToActionProps.ButtonProps;
+export type CallToActionProps =
+  | CallToActionProps.AnchorProps
+  | CallToActionProps.ButtonProps
+  | CallToActionProps.NonInteractiveProps;
 
 /**
  * This is called `Button` in Figma in the new Hive brand design system.
- * It's a styled variant of {@link Anchor}.
+ * It's a styled variant of {@link Anchor}. Based on the presence of the
+ * `href` prop or `as` prop, it renders a `button`, `a` or `props.as`
+ * (for non-interactive elements) element.
  *
  * // TODO: Consider renaming it to `Button`.
  */
@@ -54,22 +72,38 @@ export function CallToAction(props: CallToActionProps) {
     props.className,
   );
 
+  const growingBorderBox = (
+    <span className="absolute inset-0 rounded-lg border border-green-800 dark:border-neutral-200" />
+  );
+
   if ('href' in props && typeof props.href === 'string') {
     const { className: _1, variant: _2, children, ...rest } = props;
 
     return (
       <Anchor className={className} {...rest}>
-        <div className="absolute inset-0 rounded-lg border border-green-800 dark:border-neutral-200" />
+        {growingBorderBox}
         {children}
       </Anchor>
     );
   }
 
+  if (props.as) {
+    const { className: _1, variant: _2, children, as, ...rest } = props;
+    // for this use case HTMLElement is enough, we don't need to use the more specific HTMLDivElement
+    const Root = as as 'span';
+    return (
+      <Root className={className} {...rest}>
+        {growingBorderBox}
+        {children}
+      </Root>
+    );
+  }
+
   const { className: _1, variant: _2, children, ...rest } = props;
 
   return (
     <button className={className} {...rest}>
-      <div className="absolute inset-0 rounded-lg border border-green-800 dark:border-neutral-200" />
+      {growingBorderBox}
       {children}
     </button>
   );