Add new Report component (#410)

Author: davidjgoss

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))

src/components/app/Report.module.scss

@@ -0,0 +1,5 @@
+.layout {
+  > section:not(:last-child) {
+    margin-bottom: 1.5em;
+  }
+}

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

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>
+  )
+}

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'