feat(Section): support file field in section header (#1115)

* feat(Section): support file field in section header

* feat(Section): support file field in section header

Author: Lisa18289

packages/components/src/components/Section/components/SectionHeader/SectionHeader.tsx

@@ -23,6 +23,7 @@ export const SectionHeader: FC<SectionHeaderProps> = (props) => {
       size: "s",
       tunnelId: "actions",
     },
+    FileField: { tunnelId: "actions", Button: { size: "s" } },
     ContextMenuTrigger: {
       tunnelId: "actions",
       Button: {

packages/components/src/components/Section/stories/Default.stories.tsx

@@ -24,6 +24,7 @@ import {
 import ContextMenuTrigger from "@/components/ContextMenu/components/ContextMenuTrigger";
 import { ContextMenu } from "@/components/ContextMenu";
 import MenuItem from "@/components/MenuItem";
+import { FileField } from "@/components/FileField";
 
 const meta: Meta<typeof Section> = {
   title: "Structure/Section",
@@ -195,3 +196,20 @@ export const HideSeperator: Story = {
     </>
   ),
 };
+
+export const WithFileField: Story = {
+  render: (props) => (
+    <>
+      <Section {...props} hideSeparator>
+        <Header>
+          <Heading>Domains</Heading>
+          <FileField>
+            <Button>Import CSV</Button>
+          </FileField>
+          <Button>Add</Button>
+        </Header>
+        <Text>Add at least one domain.</Text>
+      </Section>
+    </>
+  ),
+};