Expose scheme and href props from InfoCard (#2045)

Author: hasparus

.changeset/eight-meals-change.md

@@ -0,0 +1,5 @@
+---
+'@theguild/components': minor
+---
+
+Expose `href` and `scheme` props from InfoCard

packages/components/src/components/info-card.stories.tsx

@@ -7,9 +7,17 @@ export default {
   title: 'Components/InfoCard',
   component: InfoCard,
   decorators: [hiveThemeDecorator],
+  argTypes: {
+    scheme: {
+      control: {
+        type: 'select',
+      },
+      options: ['neutral', 'green'],
+    },
+  },
 } satisfies Meta<InfoCardProps>;
 
-export const Default: StoryObj<InfoCardProps> = {
+export const Default: StoryObj<InfoCardProps.InfoCardInertProps> = {
   args: {
     icon: <AccountBox />,
     as: 'div',
@@ -18,3 +26,13 @@ export const Default: StoryObj<InfoCardProps> = {
       'Control user access with detailed, role-based permissions for enhanced security and flexibility.',
   },
 };
+
+export const Link: StoryObj<InfoCardProps.InfoCardLinkProps> = {
+  args: {
+    icon: <AccountBox />,
+    href: '#',
+    heading: 'Customizable User Roles and Permissions',
+    children:
+      'Control user access with detailed, role-based permissions for enhanced security and flexibility.',
+  },
+};

packages/components/src/components/info-card.tsx

@@ -1,26 +1,62 @@
 import { ReactNode } from 'react';
 import { cn } from '../cn';
+import { UnionToIntersection } from '../types/utility';
+import { Anchor, AnchorProps } from './anchor';
 import { Stud } from './stud';
 
-export interface InfoCardProps extends React.HTMLAttributes<HTMLElement> {
-  icon: ReactNode;
-  heading: ReactNode;
-  as?: 'div' | 'li';
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export declare namespace InfoCardProps {
+  interface InfoCardBaseProps {
+    icon: ReactNode;
+    heading: ReactNode;
+    scheme?: 'neutral' | 'green';
+  }
+
+  interface InfoCardLinkProps extends InfoCardBaseProps, Omit<AnchorProps, 'as'> {
+    href: AnchorProps['href'];
+  }
+
+  interface InfoCardInertProps extends InfoCardBaseProps, React.HTMLAttributes<HTMLElement> {
+    as: 'div' | 'li';
+  }
 }
 
+export type InfoCardProps = InfoCardProps.InfoCardLinkProps | InfoCardProps.InfoCardInertProps;
+
 export function InfoCard({
-  as: Root = 'div',
   icon,
   heading,
   className,
   children,
+  scheme = 'neutral',
   ...rest
 }: InfoCardProps) {
+  let Root: InfoCardProps.InfoCardInertProps['as'] | typeof Anchor;
+
+  if ('href' in rest) {
+    Root = Anchor;
+  } else {
+    Root = rest.as || 'div';
+    delete (rest as { as?: unknown }).as;
+  }
+
   return (
-    <Root className={cn('bg-beige-100 p-6 md:p-12', className)} {...rest}>
+    <Root
+      className={cn(
+        'p-6 md:p-12',
+        scheme === 'neutral' &&
+          'bg-beige-100 [--color-h:theme(colors.green.1000)] [--color-text:theme(colors.green.800)] [--hover-bg:theme(colors.beige.200)] dark:bg-neutral-900 dark:[--color-h:theme(colors.white)] dark:[--color-text:theme(colors.white)] dark:[--hover-bg:theme(colors.neutral.800)]',
+        scheme === 'green' &&
+          'bg-green-900 [--color-h:theme(colors.white)] [--color-text:theme(colors.white)] [--hover-bg:theme(colors.green.800)]',
+        Root === Anchor &&
+          'hive-focus block cursor-pointer duration-300 hover:bg-[--hover-bg] focus-visible:bg-[--hover-bg]',
+        className,
+      )}
+      {...(rest as UnionToIntersection<InfoCardProps>)}
+    >
       <Stud>{icon}</Stud>
-      <h3 className="mt-4 text-xl font-medium leading-[1.4] text-green-1000 md:mt-6">{heading}</h3>
-      <div className="mt-2 space-y-2 text-green-800 md:mt-4">{children}</div>
+      <h3 className="mt-4 text-xl font-medium leading-[1.4] text-[--color-h] md:mt-6">{heading}</h3>
+      <div className="mt-2 space-y-2 text-[--color-text] md:mt-4">{children}</div>
     </Root>
   );
 }

packages/components/src/next-types.ts

@@ -1,3 +1,5 @@
+import { UnionToIntersection } from './types/utility';
+
 /**
  * Next.js page props type.
  * @see https://nextjs.org/docs/app/api-reference/file-conventions/page#props
@@ -18,10 +20,3 @@ export interface NextPageProps<
   >;
   searchParams: Promise<{ [K in TSearchParams]?: string | string[] }>;
 }
-
-type Prettify<T> = { [K in keyof T]: T[K] } & {};
-
-type UnionToIntersection<T> = Prettify<
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (T extends any ? (x: T) => any : never) extends (x: infer R) => any ? R : never
->;

packages/components/src/types/utility.ts

@@ -0,0 +1,6 @@
+export type Prettify<T> = { [K in keyof T]: T[K] } & {};
+
+export type UnionToIntersection<T> = Prettify<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (T extends any ? (x: T) => any : never) extends (x: infer R) => any ? R : never
+>;