Card converted to tailwind

0xsequence · Jan 6, 2025 · fb6b3f8 · fb6b3f8
1 parent 5beed55
commit fb6b3f8
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 94 deletions.
diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx
@@ -30,7 +30,6 @@ export const Default: Story = {
 }
 export const Clickable: Story = {
   args: {
-    as: 'button',
     clickable: true,
     onClick: () => console.log('Clicked!'),
     children: (
@@ -49,7 +48,6 @@ export const Clickable: Story = {
 }
 export const Disabled: Story = {
   args: {
-    as: 'button',
     clickable: true,
     disabled: true,
     children: (

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -1,48 +1,60 @@
-import { clsx } from 'clsx'
-import { ElementType, forwardRef } from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, VariantProps } from 'class-variance-authority'
+import { HTMLAttributes } from 'react'
 
-import {
-  Box,
-  PolymorphicComponent,
-  PolymorphicProps,
-  PolymorphicRef,
-} from '../Box'
+const cardVariants = cva(['overflow-hidden', 'rounded-md', 'p-4', 'w-full'], {
+  variants: {
+    clickable: {
+      true: 'hover:opacity-80 cursor-pointer focus:ring-2 focus:ring-focus focus:outline-none',
+    },
+    disabled: {
+      true: 'opacity-50 cursor-default pointer-events-none',
+    },
+    outlined: {
+      true: 'border border-border-normal bg-transparent',
+      false: 'bg-background-secondary',
+    },
+    blur: {
+      true: 'backdrop-blur',
+    },
+  },
+  defaultVariants: {
+    outlined: false,
+  },
+})
 
-import * as styles from './styles.css'
+interface CardProps
+  extends HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardVariants> {
+  asChild?: boolean
+}
 
-type CardProps = styles.CardVariants
+export const Card = (props: CardProps) => {
+  const {
+    className,
+    children,
+    clickable,
+    outlined,
+    disabled,
+    blur,
+    asChild,
+    ...rest
+  } = props
 
-export const Card: PolymorphicComponent<CardProps, 'div'> = forwardRef(
-  <T extends ElementType>(
-    props: PolymorphicProps<CardProps, T>,
-    ref: PolymorphicRef<T>
-  ) => {
-    const {
-      className,
-      children,
-      clickable,
-      outlined,
-      disabled,
-      blur,
-      width = 'full',
-      ...rest
-    } = props
-    return (
-      <Box
-        className={clsx(
-          className,
-          styles.cardVariants({ clickable, outlined, disabled, blur })
-        )}
-        background={outlined ? 'transparent' : 'backgroundSecondary'}
-        overflow="hidden"
-        borderRadius="md"
-        padding="4"
-        width={width}
-        ref={ref}
-        {...rest}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
+  const Comp = asChild ? Slot : 'div'
+
+  return (
+    <Comp
+      className={cardVariants({
+        clickable,
+        outlined,
+        disabled,
+        blur,
+        className,
+      })}
+      {...rest}
+    >
+      {children}
+    </Comp>
+  )
+}
diff --git a/src/components/Scroll/Scroll.stories.tsx b/src/components/Scroll/Scroll.stories.tsx
@@ -16,12 +16,11 @@ type Story = StoryObj<typeof Scroll>
 const StoryWrapper: StoryFn<typeof Scroll> = args => (
   <Card
     outlined
+    className="overflow-hidden p-0"
     style={{
       width: 200,
       height: 200,
     }}
-    overflow="hidden"
-    padding="0"
   >
     <Scroll {...args} />
   </Card>

diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
@@ -13,7 +13,7 @@ export default {
 type Story = StoryObj<typeof Tabs>
 
 const Content = ({ children }: any) => (
-  <Card marginTop="4">
+  <Card className="mt-4">
     <Text variant="normal" color="text80">
       {children}
     </Text>

diff --git a/src/components/ThemeProvider/ThemeProvider.stories.tsx b/src/components/ThemeProvider/ThemeProvider.stories.tsx
@@ -32,7 +32,7 @@ export const Nested = () => {
 
       <div id="app1">
         <ThemeProvider root="#app1" scope="application1" theme="light">
-          <Card background="backgroundPrimary" marginTop="4">
+          <Card className="bg-background-primary mt-4">
             <Collapsible label="Nested Application 1">
               <Text variant="normal" color="text100">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
@@ -50,7 +50,7 @@ export const Nested = () => {
 
               <div id="app2">
                 <ThemeProvider root="#app2" scope="application2" theme="dark">
-                  <Card background="backgroundPrimary" marginTop="4">
+                  <Card className="bg-background-primary mt-4">
                     <Collapsible label="Nested Application 2 (Dark)">
                       <Text variant="normal" color="text100">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit,
@@ -84,7 +84,7 @@ export const Nested = () => {
                     backgroundSecondary: 'navy',
                   }}
                 >
-                  <Card background="backgroundPrimary" marginTop="4">
+                  <Card className="bg-background-primary mt-4">
                     <Collapsible label="Nested Application 3 (Custom Theme)">
                       <Text variant="normal" color="text100">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit,
@@ -108,7 +108,7 @@ export const Nested = () => {
                   scope="application4"
                   prefersColorScheme
                 >
-                  <Card background="backgroundPrimary" marginTop="4">
+                  <Card className="bg-background-primary mt-4">
                     <Collapsible label="Nested Application 4 (Prefers Color Scheme)">
                       <Text variant="normal" color="text100">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit,

diff --git a/src/components/Toast/Toast.stories.tsx b/src/components/Toast/Toast.stories.tsx
@@ -25,7 +25,7 @@ const ToastStory = (args: ToastProps) => {
   const toast = useToast()
 
   return (
-    <Card position="relative">
+    <Card>
       <Button
         label="Raise a Toast"
         onClick={() => {

diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
@@ -120,54 +120,52 @@ export const Toast = (props: ToastProps) => {
       {...rest}
     >
       <Card
-        as={motion.li}
-        layoutId={id}
-        layout
-        initial={{ x: '100%' }}
-        animate={{ x: 0 }}
-        exit={{ y: '100%', opacity: 0 }}
-        borderRadius="md"
-        background="buttonGlass"
-        backdropFilter="blur"
-        position="relative"
-        width="full"
-        justifyContent="space-between"
+        className="rounder-md bg-button-glass backdrop-blur relative justify-between w-full"
+        asChild
       >
-        <Box gap="3" alignItems="center">
-          {renderIcon()}
-
-          <Box flexDirection="column" gap="1">
-            {title && (
-              <ToastPrimitive.Title>
+        <motion.li
+          layoutId={id}
+          layout
+          initial={{ x: '100%' }}
+          animate={{ x: 0 }}
+          exit={{ y: '100%', opacity: 0 }}
+        >
+          <Box gap="3" alignItems="center">
+            {renderIcon()}
+
+            <Box flexDirection="column" gap="1">
+              {title && (
+                <ToastPrimitive.Title>
+                  <Text
+                    as="div"
+                    variant="normal"
+                    fontWeight="bold"
+                    color="text80"
+                  >
+                    {title}
+                  </Text>
+                </ToastPrimitive.Title>
+              )}
+
+              <ToastPrimitive.Description>
                 <Text
                   as="div"
                   variant="normal"
-                  fontWeight="bold"
-                  color="text80"
+                  fontWeight="medium"
+                  color="text50"
                 >
-                  {title}
+                  {description}
                 </Text>
-              </ToastPrimitive.Title>
-            )}
-
-            <ToastPrimitive.Description>
-              <Text
-                as="div"
-                variant="normal"
-                fontWeight="medium"
-                color="text50"
-              >
-                {description}
-              </Text>
-            </ToastPrimitive.Description>
+              </ToastPrimitive.Description>
+            </Box>
           </Box>
-        </Box>
 
-        {isDismissible && (
-          <ToastPrimitive.Close aria-label="Close" asChild>
-            <IconButton icon={CloseIcon} size="xs" />
-          </ToastPrimitive.Close>
-        )}
+          {isDismissible && (
+            <ToastPrimitive.Close aria-label="Close" asChild>
+              <IconButton icon={CloseIcon} size="xs" />
+            </ToastPrimitive.Close>
+          )}
+        </motion.li>
       </Card>
     </ToastPrimitive.Root>
   )