From 1996d7df142c812f7d367b0671498c0ed108f3d5 Mon Sep 17 00:00:00 2001
From: anitavincent <paes.anita@gmail.com>
Date: Wed, 29 Nov 2023 15:10:06 -0300
Subject: [PATCH] feat(modal): reuse general header

---
 packages/components/src/header/stories/header.stories.tsx  | 1 -
 .../tests/{header.vitest.test.tsx => header.test.tsx}      | 4 +---
 packages/components/src/modal/modal-header.css             | 6 ------
 packages/components/src/modal/modal-header.tsx             | 7 +++----
 packages/components/src/page/stories/page.stories.tsx      | 1 -
 .../src/page/tests/{page.vitest.test.tsx => page.test.tsx} | 4 +---
 6 files changed, 5 insertions(+), 18 deletions(-)
 rename packages/components/src/header/tests/{header.vitest.test.tsx => header.test.tsx} (71%)
 delete mode 100644 packages/components/src/modal/modal-header.css
 rename packages/components/src/page/tests/{page.vitest.test.tsx => page.test.tsx} (70%)

diff --git a/packages/components/src/header/stories/header.stories.tsx b/packages/components/src/header/stories/header.stories.tsx
index 457f5909d7..29e21419f6 100644
--- a/packages/components/src/header/stories/header.stories.tsx
+++ b/packages/components/src/header/stories/header.stories.tsx
@@ -1,4 +1,3 @@
-import '../header.css'
 import './styles.css'
 import React from 'react'
 
diff --git a/packages/components/src/header/tests/header.vitest.test.tsx b/packages/components/src/header/tests/header.test.tsx
similarity index 71%
rename from packages/components/src/header/tests/header.vitest.test.tsx
rename to packages/components/src/header/tests/header.test.tsx
index f6d8d94249..29ef4933ac 100644
--- a/packages/components/src/header/tests/header.vitest.test.tsx
+++ b/packages/components/src/header/tests/header.test.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
-import { describe, expect, test } from 'vitest'
-import { render } from '@testing-library/react'
+import { describe, expect, test, render } from '@vtex/shoreline-test-utils'
 
 import { Header } from '../header'
 
@@ -11,4 +10,3 @@ describe('header', () => {
     expect(container.querySelector('[data-sl-header]')).toBeInTheDocument()
   })
 })
-
diff --git a/packages/components/src/modal/modal-header.css b/packages/components/src/modal/modal-header.css
deleted file mode 100644
index 6f2551c5ab..0000000000
--- a/packages/components/src/modal/modal-header.css
+++ /dev/null
@@ -1,6 +0,0 @@
-@layer sl-components {
-  [data-sl-modal-title] {
-    font: var(--sl-text-display-1-font);
-    letter-spacing: var(--sl-text-display-1-letter-spacing);
-  }
-}
diff --git a/packages/components/src/modal/modal-header.tsx b/packages/components/src/modal/modal-header.tsx
index b0d255f07a..828be7002b 100644
--- a/packages/components/src/modal/modal-header.tsx
+++ b/packages/components/src/modal/modal-header.tsx
@@ -5,15 +5,14 @@ import { Flex } from '../flex'
 import { IconButton } from '../icon-button'
 import { IconX } from '@vtex/shoreline-icons'
 import { Bleed } from '../bleed'
-import { Content } from '../content'
-import './modal-header.css'
+import { Header } from '../header'
 
 export const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
   function Modal(props, ref) {
     const { children, ...otherProps } = props
 
     return (
-      <Content data-sl-modal-header narrow {...otherProps} ref={ref}>
+      <Header data-sl-modal-header narrow {...otherProps} ref={ref}>
         <Flex justify="space-between">
           <DialogHeading data-sl-modal-title>{children}</DialogHeading>
           <Bleed vertical horizontal>
@@ -24,7 +23,7 @@ export const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
             </IconButton>
           </Bleed>
         </Flex>
-      </Content>
+      </Header>
     )
   }
 )
diff --git a/packages/components/src/page/stories/page.stories.tsx b/packages/components/src/page/stories/page.stories.tsx
index b1542e0f28..cadf053542 100644
--- a/packages/components/src/page/stories/page.stories.tsx
+++ b/packages/components/src/page/stories/page.stories.tsx
@@ -1,4 +1,3 @@
-import '../page.css'
 import './styles.css'
 import React from 'react'
 
diff --git a/packages/components/src/page/tests/page.vitest.test.tsx b/packages/components/src/page/tests/page.test.tsx
similarity index 70%
rename from packages/components/src/page/tests/page.vitest.test.tsx
rename to packages/components/src/page/tests/page.test.tsx
index 892d10dc38..b9c954d634 100644
--- a/packages/components/src/page/tests/page.vitest.test.tsx
+++ b/packages/components/src/page/tests/page.test.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
-import { describe, expect, test } from 'vitest'
-import { render } from '@testing-library/react'
+import { describe, expect, test, render } from '@vtex/shoreline-test-utils'
 
 import { Page } from '../page'
 
@@ -11,4 +10,3 @@ describe('page', () => {
     expect(container.querySelector('[data-sl-page]')).toBeInTheDocument()
   })
 })
-