Skip to content

Commit 740c64a

Browse files
authored
Remove CucumberReact, add CustomRendering (#382)
1 parent 512cf5f commit 740c64a

28 files changed

+116
-201
lines changed

.ladle/components.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './global.module.scss'

.ladle/global.module.scss

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
$defaultSansFamily: 'Inter var',
2+
ui-sans-serif,
3+
system-ui,
4+
-apple-system,
5+
BlinkMacSystemFont,
6+
'Segoe UI',
7+
Roboto,
8+
'Helvetica Neue',
9+
Arial,
10+
'Noto Sans',
11+
sans-serif,
12+
'Apple Color Emoji',
13+
'Segoe UI Emoji',
14+
'Segoe UI Symbol',
15+
'Noto Color Emoji';
16+
$defaultMonoFamily: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
17+
18+
body {
19+
font-family: $defaultSansFamily;
20+
background-color: white;
21+
color: #222;
22+
}
23+
24+
pre, code {
25+
font-family: $defaultMonoFamily;
26+
}

CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
66
and this project adheres to [Semantic Versioning](http://semver.org/).
77

88
## [Unreleased]
9+
### Added
10+
- Add `<CustomRendering/>` to override presentation ([#382](https://github.com/cucumber/react-components/pull/382))
11+
912
### Fixed
1013
- Make keyword spacing look right ([#376](https://github.com/cucumber/react-components/pull/376))
1114
- Fix issue with hook steps not being rendered ([#379](https://github.com/cucumber/react-components/pull/379))
@@ -18,6 +21,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
1821

1922
### Removed
2023
- BREAKING CHANGE: Remove `EnvelopesQuery` and its React context ([#374](https://github.com/cucumber/react-components/pull/374))
24+
- BREAKING CHANGE: Remove defunct `<CucumberReact/>` component ([#382](https://github.com/cucumber/react-components/pull/382))
2125

2226
## [22.4.1] - 2025-03-30
2327
### Fixed

README.md

+15-38
Original file line numberDiff line numberDiff line change
@@ -50,40 +50,24 @@ Attachments from test runs are shown with their corresponding steps. The baselin
5050

5151
## Styling
5252

53-
The standard styling comes from wrapping your top-level usage with the `CucumberReact` component (sans-props). There are several ways you can apply different styling to the components.
53+
The standard styling comes without any extra providers or configuration. There are several ways you can apply different styling to the components.
5454

55-
### Built-in themes
55+
### Theming
5656

57-
These are the built-in themes:
58-
59-
- `light` (default)
60-
- `dark`
61-
- `auto` (honours your operating system preference for either light or dark)
62-
63-
You can activate one of these by passing the `theme` prop to the `CucumberReact` component:
57+
You can also provide your own theme with a small amount of CSS. Target the element above your highest-level usage of the components:
6458

6559
```jsx
66-
<CucumberReact theme="dark">
60+
<div className="dark-theme">
6761
<GherkinDocument />
68-
</CucumberReact>
62+
</div>
6963
```
7064

71-
### Custom themes
72-
73-
You can also provide your own theme with a small amount of CSS. Pass the `CucumberReact` component a class name instead of a theme name:
74-
75-
```jsx
76-
<CucumberReact className="acme-widgets">
77-
<GherkinDocument />
78-
</CucumberReact>
79-
```
80-
81-
In your CSS for the `acme-widgets` class, you can override the supported [custom property](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) values as desired. Here's the CSS that drives the built-in "dark" theme:
65+
In your CSS, you can set the background and text colors, and override the supported [custom property](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) values as desired:
8266

8367
```css
84-
.darkTheme {
85-
--cucumber-background-color: #1d1d26;
86-
--cucumber-text-color: #c9c9d1;
68+
.dark-theme {
69+
background-color: #1d1d26;
70+
color: #c9c9d1;
8771
--cucumber-anchor-color: #4caaee;
8872
--cucumber-keyword-color: #d89077;
8973
--cucumber-parameter-color: #4caaee;
@@ -99,13 +83,6 @@ In your CSS for the `acme-widgets` class, you can override the supported [custom
9983
}
10084
```
10185

102-
### Fonts
103-
104-
By default, web-safe default font stacks are used, but you can override these so the components use your preferred fonts. These custom properties are supported:
105-
106-
- `--cucumber-sans-font-family` - the font used for the text
107-
- `--cucumber-mono-font-family` - the font used for doc strings and attachments
108-
10986
### Custom styles
11087

11188
For more control over the styling, you can override the CSS used by individual components.
@@ -123,16 +100,16 @@ Let's say you want to do something totally different with the typography of doc
123100
}
124101
```
125102

126-
Then, you can provide a `customRendering` prop to the `CucumberReact` component, in the form of an object that declares which class names you're going to override and what with:
103+
Then, you can provide an `overrides` prop to the `CustomRendering` component, in the form of an object that declares which class names you're going to override and what with:
127104

128105
```jsx
129-
<CucumberReact customRendering={{
106+
<CustomRendering overrides={{
130107
DocString: {
131108
docString: 'acme-docstring'
132109
}
133110
}}>
134111
<GherkinDocument />
135-
</CucumberReact>
112+
</CustomRendering>
136113
```
137114

138115
Some components have multiple styling hooks - e.g. the `<Tags>` component has the `tags` class name for the list, and the `tag` class name for each item. In these cases, you can provide custom class names for just the ones you want to change, and any you omit will pick up the built-in styling like normal.
@@ -141,10 +118,10 @@ Some components have multiple styling hooks - e.g. the `<Tags>` component has th
141118

142119
To change the rendering of some components entirely, you can selectively provide your own component implementations to be used instead of the built-in ones.
143120

144-
Staying with the doc string example, you can use the same `customRendering` prop, but this time instead of an object with class names, you provide a React functional component, giving you full control over the rendering:
121+
Staying with the doc string example, you can use the same `overrides` prop, but this time instead of an object with class names, you provide a React functional component, giving you full control over the rendering:
145122

146123
```jsx
147-
<CucumberReact customRendering={{
124+
<CustomRendering overrides={{
148125
DocString: (props) => (
149126
<>
150127
<p>I am going to render this doc string in a textarea:</p>
@@ -153,7 +130,7 @@ Staying with the doc string example, you can use the same `customRendering` prop
153130
)
154131
}}>
155132
<GherkinDocument />
156-
</CucumberReact>
133+
</CustomRendering>
157134
```
158135

159136
In each case where you provide your own component, it will receive the same props as the default component, plus two more:

src/components/CucumberReact.tsx

-26
This file was deleted.

src/components/app/ExecutionSummary.stories.tsx

+3-6
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { Story } from '@ladle/react'
44
import React from 'react'
55

66
import examplesTablesFeature from '../../../acceptance/examples-tables/examples-tables.feature.js'
7-
import { CucumberReact } from '../CucumberReact.js'
87
import { EnvelopesWrapper } from './EnvelopesWrapper.js'
98
import { ExecutionSummary } from './ExecutionSummary.js'
109

@@ -50,11 +49,9 @@ type TemplateArgs = {
5049

5150
const Template: Story<TemplateArgs> = ({ envelopes }) => {
5251
return (
53-
<CucumberReact>
54-
<EnvelopesWrapper envelopes={envelopes}>
55-
<ExecutionSummary />
56-
</EnvelopesWrapper>
57-
</CucumberReact>
52+
<EnvelopesWrapper envelopes={envelopes}>
53+
<ExecutionSummary />
54+
</EnvelopesWrapper>
5855
)
5956
}
6057

src/components/app/FilteredResults.stories.tsx

+5-8
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import React from 'react'
44

55
import testData from '../../../acceptance/examples-tables/examples-tables.feature.js'
66
import targetedRun from '../../../samples/targeted-run.js'
7-
import { CucumberReact } from '../CucumberReact.js'
87
import { EnvelopesWrapper } from './EnvelopesWrapper.js'
98
import { FilteredResults } from './FilteredResults.js'
109
import { SearchWrapper } from './SearchWrapper.js'
@@ -19,13 +18,11 @@ type TemplateArgs = {
1918

2019
const Template: Story<TemplateArgs> = ({ envelopes }) => {
2120
return (
22-
<CucumberReact>
23-
<EnvelopesWrapper envelopes={envelopes}>
24-
<SearchWrapper>
25-
<FilteredResults />
26-
</SearchWrapper>
27-
</EnvelopesWrapper>
28-
</CucumberReact>
21+
<EnvelopesWrapper envelopes={envelopes}>
22+
<SearchWrapper>
23+
<FilteredResults />
24+
</SearchWrapper>
25+
</EnvelopesWrapper>
2926
)
3027
}
3128

src/components/app/Header.module.scss

-4
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,6 @@
3131
a {
3232
color: $anchorColor;
3333
}
34-
35-
code {
36-
font-family: $monoFamily;
37-
}
3834
}
3935

4036
.subItem {

src/components/app/HealthChart.stories.tsx

+3-6
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Story } from '@ladle/react'
33
import React from 'react'
44

55
import examplesTablesFeature from '../../../acceptance/examples-tables/examples-tables.feature.js'
6-
import { CucumberReact } from '../CucumberReact.js'
76
import { EnvelopesWrapper } from './EnvelopesWrapper.js'
87
import { HealthChart } from './HealthChart.js'
98

@@ -17,11 +16,9 @@ type TemplateArgs = {
1716

1817
const Template: Story<TemplateArgs> = ({ envelopes }) => {
1918
return (
20-
<CucumberReact>
21-
<EnvelopesWrapper envelopes={envelopes}>
22-
<HealthChart />
23-
</EnvelopesWrapper>
24-
</CucumberReact>
19+
<EnvelopesWrapper envelopes={envelopes}>
20+
<HealthChart />
21+
</EnvelopesWrapper>
2522
)
2623
}
2724

src/components/app/SearchBar.module.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
font-family: inherit;
1212
font-size: inherit;
1313
background-color: transparent;
14-
color: $textColor;
14+
color: inherit;
1515
border: 1px solid transparent;
1616
}
1717

src/components/app/StatusesSummary.stories.tsx

+3-6
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Story } from '@ladle/react'
33
import React from 'react'
44

55
import examplesTablesFeature from '../../../acceptance/examples-tables/examples-tables.feature.js'
6-
import { CucumberReact } from '../CucumberReact.js'
76
import { EnvelopesWrapper } from './EnvelopesWrapper.js'
87
import { StatusesSummary } from './StatusesSummary.js'
98

@@ -17,11 +16,9 @@ type TemplateArgs = {
1716

1817
const Template: Story<TemplateArgs> = ({ envelopes }) => {
1918
return (
20-
<CucumberReact>
21-
<EnvelopesWrapper envelopes={envelopes}>
22-
<StatusesSummary />
23-
</EnvelopesWrapper>
24-
</CucumberReact>
19+
<EnvelopesWrapper envelopes={envelopes}>
20+
<StatusesSummary />
21+
</EnvelopesWrapper>
2522
)
2623
}
2724

src/components/customise/Classes.stories.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import './custom-classes.stories.scss'
1+
import './CustomRendering.stories.scss'
22

33
import * as messages from '@cucumber/messages'
44
import { Story } from '@ladle/react'
55
import React from 'react'
66

7-
import { CucumberReact } from '../CucumberReact.js'
87
import { DocString } from '../gherkin/index.js'
9-
import { CustomRenderingSupport } from './customRendering.js'
8+
import { CustomRendering, CustomRenderingSupport } from './CustomRendering.js'
109

1110
export default {
1211
title: 'Customisation/Classes',
@@ -21,9 +20,9 @@ export const Classes: Story<{ support: CustomRenderingSupport; docString: messag
2120
<h2>Default DocString:</h2>
2221
<DocString docString={docString} />
2322
<h2>With Custom Classes:</h2>
24-
<CucumberReact customRendering={support}>
23+
<CustomRendering overrides={support}>
2524
<DocString docString={docString} />
26-
</CucumberReact>
25+
</CustomRendering>
2726
</>
2827
)
2928
}

src/components/customise/Components.stories.tsx

+5-6
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@ import * as messages from '@cucumber/messages'
22
import { Story } from '@ladle/react'
33
import React from 'react'
44

5-
import { CucumberReact } from '../CucumberReact.js'
65
import { Feature, Tags } from '../gherkin/index.js'
7-
import { CustomRenderingSupport, TagsProps } from './customRendering.js'
6+
import { CustomRendering, CustomRenderingSupport, TagsProps } from './CustomRendering.js'
87

98
export default {
109
title: 'Customisation/Components',
@@ -17,9 +16,9 @@ export const CustomTagComponent: Story<{
1716
return (
1817
<>
1918
<h2>Tags with JIRA linking</h2>
20-
<CucumberReact customRendering={support}>
19+
<CustomRendering overrides={support}>
2120
<Tags tags={tags} />
22-
</CucumberReact>
21+
</CustomRendering>
2322
</>
2423
)
2524
}
@@ -76,9 +75,9 @@ export const CustomFeatureComponent: Story<{
7675
return (
7776
<>
7877
<h2>Feature with button on top</h2>
79-
<CucumberReact customRendering={support}>
78+
<CustomRendering overrides={support}>
8079
<Feature feature={feature} />
81-
</CucumberReact>
80+
</CustomRendering>
8281
</>
8382
)
8483
}

0 commit comments

Comments
 (0)