refactor: faq vanilla extract

Author: lisalupi

.changeset/cute-carrots-smell.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/plus": minor
+---
+
+Refactor component `FAQ` to use vanilla extract instead of Emotion

packages/plus/src/components/FAQ/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,16 +2,11 @@
 
 exports[`fAQ > should work with default props 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  padding: 1rem;
-  text-align: left;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
-      class="emotion-0 emotion-1 uv_1p7tz3i1"
+      class="styles__5imqkb0 uv_1p7tz3i1"
       data-disabled="false"
       data-is-active="false"
     >
@@ -39,16 +34,11 @@ exports[`fAQ > should work with default props 1`] = `
 
 exports[`fAQ > should work with illustrationTest 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  padding: 1rem;
-  text-align: left;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
-      class="emotion-0 emotion-1 uv_1p7tz3i1"
+      class="styles__5imqkb0 uv_1p7tz3i1"
       data-disabled="false"
       data-is-active="false"
     >
@@ -82,16 +72,11 @@ exports[`fAQ > should work with illustrationTest 1`] = `
 
 exports[`fAQ > should work with notes 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  padding: 1rem;
-  text-align: left;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
-      class="emotion-0 emotion-1 uv_1p7tz3i1"
+      class="styles__5imqkb0 uv_1p7tz3i1"
       data-disabled="false"
       data-is-active="false"
     >
@@ -124,16 +109,11 @@ exports[`fAQ > should work with notes 1`] = `
 
 exports[`fAQ > should work with productIconName 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  padding: 1rem;
-  text-align: left;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
-      class="emotion-0 emotion-1 uv_1p7tz3i1"
+      class="styles__5imqkb0 uv_1p7tz3i1"
       data-disabled="false"
       data-is-active="false"
     >

packages/plus/src/components/FAQ/index.tsx

@@ -1,14 +1,9 @@
 'use client'
 
-import styled from '@emotion/styled'
 import * as ProductIcon from '@ultraviolet/icons/product'
 import { Bullet, Card, Stack, Text } from '@ultraviolet/ui'
 import type { PascalToCamelCaseWithoutSuffix } from '../../types'
-
-const StyledCard = styled(Card)`
-  padding: ${({ theme }) => theme.space['2']};
-  text-align: left;
-`
+import { faq } from './styles.css'
 
 type FAQProps = {
   description: string
@@ -37,7 +32,7 @@ export const FAQ = ({
     : null
 
   return (
-    <StyledCard>
+    <Card className={faq}>
       <Stack direction="row" gap={2}>
         <div>
           {!productIconName && illustrationText ? (
@@ -59,6 +54,6 @@ export const FAQ = ({
           </Text>
         </div>
       </Stack>
-    </StyledCard>
+    </Card>
   )
 }

packages/plus/src/components/FAQ/styles.css.ts

@@ -0,0 +1,7 @@
+import { theme } from '@ultraviolet/themes'
+import { style } from '@vanilla-extract/css'
+
+export const faq = style({
+  padding: theme.space[2],
+  textAlign: 'left',
+})