refactor(ContentCardGroup): use vanilla extract (#5663)

Author: matthprost

.changeset/sour-candles-teach.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/plus": minor
+---
+
+Refactor `<ContentCardGroup />` to use vanilla extract

packages/plus/src/components/ContentCardGroup/Card.tsx

@@ -1,10 +1,15 @@
 'use client'
 
-import styled from '@emotion/styled'
 import { OpenInNewIcon } from '@ultraviolet/icons'
 import { Stack, Text } from '@ultraviolet/ui'
 import type { AnchorHTMLAttributes, ElementType, ReactNode } from 'react'
 import { forwardRef } from 'react'
+import {
+  customStack,
+  fullHeightStack,
+  iconWrapper,
+  styledWrapper,
+} from './styles.css'
 
 type CardProps = {
   title?: string
@@ -17,53 +22,6 @@ type CardProps = {
   target?: AnchorHTMLAttributes<HTMLAnchorElement>['target']
 }
 
-const StyledStack = styled(Stack)`
-  min-width: 0;
-`
-
-const IconWrapper = styled.div`
-  display: inline-flex;
-  background: ${({ theme }) => theme.colors.neutral.backgroundWeak};
-  padding: ${({ theme }) => theme.space['1']};
-  border-radius: ${({ theme }) => theme.radii.default};
-`
-
-const StyledWrapper = styled.a`
-  padding: ${({ theme }) => theme.space['3']};
-  text-decoration: none;
-  height: 100%;
-
-  &:not(:first-child) {
-    border-top: 1px solid ${({ theme }) => theme.colors.neutral.border};
-  }
-
-  &:first-child {
-    border-radius: ${({ theme }) => theme.radii.default}
-      ${({ theme }) => theme.radii.default} 0 0;
-  }
-
-  &:last-child {
-    border-radius: 0 0 ${({ theme }) => theme.radii.default}
-      ${({ theme }) => theme.radii.default};
-  }
-
-  & ${IconWrapper} {
-    background: ${({ theme }) => theme.colors.neutral.backgroundWeak};
-  }
-
-  &:hover {
-    background: ${({ theme }) => theme.colors.neutral.backgroundHover};
-
-    & ${IconWrapper} {
-      background: none;
-    }
-  }
-`
-
-const FullHeightStack = styled(Stack)`
-  height: 100%;
-`
-
 export const Card = forwardRef<HTMLAnchorElement, CardProps>(
   (
     {
@@ -78,14 +36,15 @@ export const Card = forwardRef<HTMLAnchorElement, CardProps>(
     },
     ref,
   ) => (
-    <StyledWrapper href={href} ref={ref} target={target}>
-      <FullHeightStack
+    <a className={styledWrapper} href={href} ref={ref} target={target}>
+      <Stack
         alignItems="center"
+        className={fullHeightStack}
         direction="row"
         gap={2}
         justifyContent="space-between"
       >
-        <StyledStack gap="0.5">
+        <Stack className={customStack} gap="0.5">
           <div>
             {subtitle ? (
               <Text
@@ -113,11 +72,11 @@ export const Card = forwardRef<HTMLAnchorElement, CardProps>(
             </Text>
           ) : null}
           {children}
-        </StyledStack>
-        <IconWrapper>
+        </Stack>
+        <div className={iconWrapper}>
           <OpenInNewIcon sentiment="neutral" />
-        </IconWrapper>
-      </FullHeightStack>
-    </StyledWrapper>
+        </div>
+      </Stack>
+    </a>
   ),
 )

packages/plus/src/components/ContentCardGroup/SkeletonCard.tsx

@@ -1,31 +1,17 @@
 'use client'
 
-import styled from '@emotion/styled'
 import { Skeleton, Stack } from '@ultraviolet/ui'
-
-const StyledWrapper = styled.div`
-  padding: ${({ theme }) => theme.space['3']};
-
-  &:not(:first-child) {
-    border-top: 1px solid ${({ theme }) => theme.colors.neutral.border};
-  }
-`
-
-const StyledSquareSkeleton = styled(Skeleton)`
-  height: 32px;
-  width: 32px;
-  border-radius: ${({ theme }) => theme.radii.default};
-`
+import { skeletonWrapper, squareSkeleton } from './styles.css'
 
 export const SkeletonCard = () => (
-  <StyledWrapper>
+  <div className={skeletonWrapper}>
     <Stack alignItems="center" direction="row" justifyContent="space-between">
       <Stack gap={2}>
         <Skeleton variant="line" />
         <Skeleton variant="line" />
         <Skeleton variant="line" />
       </Stack>
-      <StyledSquareSkeleton variant="square" />
+      <Skeleton className={squareSkeleton} variant="square" />
     </Stack>
-  </StyledWrapper>
+  </div>
 )