Replace FilteredResults with composition (#388)

Author: davidjgoss

.ladle/global.module.scss .ladle/components.module.scss.ladle/global.module.scss renamed to .ladle/components.module.scss

@@ -15,12 +15,12 @@ sans-serif,
 'Noto Color Emoji';
 $defaultMonoFamily: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
 
-body {
+.wrapper {
   font-family: $defaultSansFamily;
   background-color: white;
   color: #222;
-}
 
-pre, code {
-  font-family: $defaultMonoFamily;
+  pre, code {
+    font-family: $defaultMonoFamily;
+  }
 }

.ladle/components.tsx

@@ -1 +1,5 @@
-import './global.module.scss'
+import type { GlobalProvider } from '@ladle/react'
+import React from 'react'
+import styles from './components.module.scss'
+
+export const Provider: GlobalProvider = ({ children, globalState, storyMeta }) => <div className={styles.wrapper}>{children}</div>

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Add `<CustomRendering/>` to override presentation ([#382](https://github.com/cucumber/react-components/pull/382))
 - Add `<ControlledSearchProvider/>`, `<InMemorySearchProvider/>` and `<UrlSearchProvider/>` to provide search state ([#384](https://github.com/cucumber/react-components/pull/384))
 - Add `<UriProvider/>`, to provide document URI state ([#386](https://github.com/cucumber/react-components/pull/386))
+- Add `<FilteredDocuments/>`, to provide (optionally filtered) documents with no props ([#388](https://github.com/cucumber/react-components/pull/388))
 
 ### Fixed
 - Make keyword spacing look right ([#376](https://github.com/cucumber/react-components/pull/376))
@@ -29,6 +30,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - BREAKING CHANGE: Remove defunct `<CucumberReact/>` component ([#382](https://github.com/cucumber/react-components/pull/382))
 - BREAKING CHANGE: Remove `SearchQueryContext`, `<SearchWrapper/>` and related defunct symbols ([#384](https://github.com/cucumber/react-components/pull/384)) 
 - BREAKING CHANGE: Remove `GherkinQueryContext` and `CucumberQueryContext` from entry point ([#385](https://github.com/cucumber/react-components/pull/385))
+- BREAKING CHANGE: Remove `<FilteredResults/>` component in favour of composition ([#388](https://github.com/cucumber/react-components/pull/388))
 
 ## [22.4.1] - 2025-03-30
 ### Fixed

README.md

@@ -15,10 +15,10 @@ https://cucumber-react-preview.netlify.app/
 The source code for the screenshot above is:
 
 ```jsx
-import { EnvelopesProvider, GherkinDocumentList } from '@cucumber/react-components'
+import { EnvelopesProvider, FilteredDocuments } from '@cucumber/react-components'
 
 <EnvelopesProvider envelopes={envelopes}>
-  <GherkinDocumentList />
+  <FilteredDocuments />
 </EnvelopesProvider>
 ```
 
@@ -45,7 +45,9 @@ You can provide your own theme with a small amount of CSS. Target the element ab
 
 ```jsx
 <div className="dark-theme">
-  <GherkinDocument />
+  <EnvelopesProvider envelopes={envelopes}>
+    <FilteredDocuments />
+  </EnvelopesProvider>
 </div>
 ```
 
@@ -95,7 +97,9 @@ Then, you can provide an `overrides` prop to the `CustomRendering` component, in
     docString: 'acme-docstring'
   }
 }}>
-  <GherkinDocument />
+  <EnvelopesProvider envelopes={envelopes}>
+    <FilteredDocuments />
+  </EnvelopesProvider>
 </CustomRendering>
 ```
 
@@ -116,7 +120,9 @@ Staying with the doc string example, you can use the same `overrides` prop, but
     </>
   )
 }}>
-  <GherkinDocument />
+  <EnvelopesProvider envelopes={envelopes}>
+    <FilteredDocuments />
+  </EnvelopesProvider>
 </CustomRendering>
 ```