From f9127cb6df683431ef153d9606ccba14e1187a15 Mon Sep 17 00:00:00 2001
From: David Goss <david@davidgoss.co>
Date: Mon, 10 Nov 2025 13:34:35 +0000
Subject: [PATCH 1/3] add new Report component

---
 src/components/app/Report.module.scss |  5 ++++
 src/components/app/Report.stories.tsx | 37 +++++++++++++++++++++++++++
 src/components/app/Report.tsx         | 20 +++++++++++++++
 src/components/app/index.ts           |  1 +
 4 files changed, 63 insertions(+)
 create mode 100644 src/components/app/Report.module.scss
 create mode 100644 src/components/app/Report.stories.tsx
 create mode 100644 src/components/app/Report.tsx

diff --git a/src/components/app/Report.module.scss b/src/components/app/Report.module.scss
new file mode 100644
index 00000000..dcbf6b24
--- /dev/null
+++ b/src/components/app/Report.module.scss
@@ -0,0 +1,5 @@
+.layout {
+  > section:not(:last-child) {
+    margin-bottom: 1.5em;
+  }
+}
\ No newline at end of file
diff --git a/src/components/app/Report.stories.tsx b/src/components/app/Report.stories.tsx
new file mode 100644
index 00000000..6983da36
--- /dev/null
+++ b/src/components/app/Report.stories.tsx
@@ -0,0 +1,37 @@
+import { Envelope } from '@cucumber/messages'
+import { Story } from '@ladle/react'
+import React from 'react'
+
+import examplesTablesSample from '../../../acceptance/examples-tables/examples-tables.js'
+import globalHooksSample from '../../../acceptance/global-hooks/global-hooks.js'
+import { EnvelopesProvider } from './EnvelopesProvider.js'
+import { InMemorySearchProvider } from './InMemorySearchProvider.js'
+import { Report } from './Report.js'
+
+type TemplateArgs = {
+  envelopes: readonly Envelope[]
+}
+
+const Template: Story<TemplateArgs> = ({ envelopes }) => {
+  return (
+    <EnvelopesProvider envelopes={envelopes}>
+      <InMemorySearchProvider>
+        <Report />
+      </InMemorySearchProvider>
+    </EnvelopesProvider>
+  )
+}
+
+export default {
+  title: 'App/Report',
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  envelopes: examplesTablesSample,
+} as TemplateArgs
+
+export const WithGlobalHooks = Template.bind({})
+WithGlobalHooks.args = {
+  envelopes: globalHooksSample,
+} as TemplateArgs
\ No newline at end of file
diff --git a/src/components/app/Report.tsx b/src/components/app/Report.tsx
new file mode 100644
index 00000000..1da25be0
--- /dev/null
+++ b/src/components/app/Report.tsx
@@ -0,0 +1,20 @@
+import React, { FC } from 'react'
+
+import { ExecutionSummary } from './ExecutionSummary.js'
+import { FilteredDocuments } from './FilteredDocuments.js'
+import styles from './Report.module.scss'
+import { SearchBar } from './SearchBar.js'
+
+export const Report: FC = () => {
+  return (
+    <article className={styles.layout}>
+      <section>
+        <ExecutionSummary/>
+        <SearchBar/>
+      </section>
+      <section>
+        <FilteredDocuments />
+      </section>
+    </article>
+  )
+}
diff --git a/src/components/app/index.ts b/src/components/app/index.ts
index bae27ae0..69014e14 100644
--- a/src/components/app/index.ts
+++ b/src/components/app/index.ts
@@ -8,6 +8,7 @@ export * from './HighLight.js'
 export * from './InMemorySearchProvider.js'
 export * from './NoMatchResult.js'
 export * from './QueriesProvider.js'
+export * from './Report.js'
 export * from './SearchBar.js'
 export * from './StatusesSummary.js'
 export * from './UrlSearchProvider.js'

From 96cb8776d15e0dbf17c74497f23191a2ced8a7b4 Mon Sep 17 00:00:00 2001
From: David Goss <david@davidgoss.co>
Date: Mon, 10 Nov 2025 14:09:02 +0000
Subject: [PATCH 2/3] CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1214d55a..e308623e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Added
 - Include duration for each test step ([#396](https://github.com/cucumber/react-components/pull/396))
 - Include pass rate in execution summary ([#397](https://github.com/cucumber/react-components/pull/397))
+- Add new `<Report/>` component ([#410](https://github.com/cucumber/react-components/pull/410))
 
 ### Changed
 - Render a more test case-centric report ([#396](https://github.com/cucumber/react-components/pull/396))

From ff4b2402425c1e35ac132aef74f845e2f7265874 Mon Sep 17 00:00:00 2001
From: David Goss <david@davidgoss.co>
Date: Mon, 10 Nov 2025 14:10:52 +0000
Subject: [PATCH 3/3] fix lint issues

---
 src/components/app/Report.module.scss | 2 +-
 src/components/app/Report.stories.tsx | 2 +-
 src/components/app/Report.tsx         | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/app/Report.module.scss b/src/components/app/Report.module.scss
index dcbf6b24..d414738c 100644
--- a/src/components/app/Report.module.scss
+++ b/src/components/app/Report.module.scss
@@ -2,4 +2,4 @@
   > section:not(:last-child) {
     margin-bottom: 1.5em;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/app/Report.stories.tsx b/src/components/app/Report.stories.tsx
index 6983da36..835c98c8 100644
--- a/src/components/app/Report.stories.tsx
+++ b/src/components/app/Report.stories.tsx
@@ -34,4 +34,4 @@ Default.args = {
 export const WithGlobalHooks = Template.bind({})
 WithGlobalHooks.args = {
   envelopes: globalHooksSample,
-} as TemplateArgs
\ No newline at end of file
+} as TemplateArgs
diff --git a/src/components/app/Report.tsx b/src/components/app/Report.tsx
index 1da25be0..f7f5d7d4 100644
--- a/src/components/app/Report.tsx
+++ b/src/components/app/Report.tsx
@@ -9,8 +9,8 @@ export const Report: FC = () => {
   return (
     <article className={styles.layout}>
       <section>
-        <ExecutionSummary/>
-        <SearchBar/>
+        <ExecutionSummary />
+        <SearchBar />
       </section>
       <section>
         <FilteredDocuments />