react: new design for report header (#1855)

* start adding FilteredResults stories

* weird hack to fix storybook temporarily?

* use better test data

* restyle StatusesSummary, add test and story

* improve story a bit

* categorise stories

* rationalise customisation stories

* start to build a story

* FIXUP start to build a story

* spin out helpers for stories with envelopes

* better padding and center align on status items

* uppercase

* add a story including ci

* start to rewrite ExecutionSummary

* show duration, get some styling in

* some refactoring

* add passed rate and execution count

* refactoring

* fix story props

* add back other stuff for now

* a bit of styling

* get the collapsing borders (ish)

* add another row

* implementation

* operating system

* runtime

* use node logo

* styling

* more styling tweaks

* cleanup

* refactor existing search bar tests

* increase tests for search bar

* add ci back in at bottom

* clumnky first pass at ci and git

* strip back searchbar styling

* start to style the query field

* finish styling search part

* work ci stuff into exec summary

* remove redundant component

* rename for clarity

* cleanup imports

* pull some testing up to `FilteredResults`

* split statuses filter out, move context orchestration up

* move timestamp conversion down - rendering concern

* fix date handling in story

* style filters, style rest of header, fix some minor styling issues

* animate the chevron

* spacing between header and content

* put search and filters back in a single thing

* tweak accordion styling

* tweak exec summary styles

* fix logic and styling for no match message

* tweak search styling a bit

* redistribute some logic from the component

* pull `pre` styles into components

* move default styling, theming and custom rendering under `CucumberReact` component

* add EnvelopesWrapper

* add useQueries hook for brevity

* update check in html formatter

* improve testing of filtered results

* fix coloring on node logo

* make dark theme work for whole app

* consistently use `em` for units

* fix issues with lists in Background and MDG

* style the html formatter sensibly

* use cpy-cli from local install

* add auto theme, use in html formatter

* add hook for useSearch

* remove some code we dont need

* break search wrapper away from queries

* clean up a bit

* tweak search wording

* update theme css vars example

* improve logic for os and runtime matching

* unused import

* changelogs

Co-authored-by: Aslak Hellesøy <[email protected]>

Author: davidjgoss

CHANGELOG.md

@@ -9,15 +9,26 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Added
 
+* Add `<EnvelopesWrapper/>` component to succinctly populate query contexts from an array of messages.
+* Add 'auto' theme, honouring platform light/dark preference.
+* Add `useQueries` and `useSearch` hooks to avoid accessing many contexts directly.
+
 ### Changed
 
+* New `<CucumberReact/>` component is used as root component in consuming projects, replacing. `<CustomRendering/>`.
+* New visual designs for report-related components.
+* Move search-related props from `<QueriesWrapper/>` to new `<SearchWrapper/>` component.
+
 ### Deprecated
 
 ### Removed
 
+* Remove global stylesheet, all styles are now encapsulated in appropriate components.
+
 ### Fixed
 
 * Import correct stylesheet in the Children component. This also allows to override it using `CustomRendering`.
+* Display step list items correctly (i.e. without bullets) in Backgrounds and in MDX documents.
 
 ## [18.1.2] - 2021-09-08
 

javascript/README.md

@@ -11,9 +11,9 @@ Cucumber-React is a set of React components for rendering Gherkin documents and
 The source code for screenshots above is:
 
 ```jsx
-<Wrapper envelopes={envelopes}>
+<EnvelopesWrapper envelopes={envelopes}>
   <GherkinDocumentList />
-</Wrapper>
+</EnvelopesWrapper>
 ```
 
 The [`<GherkinDocumentList>`](src/components/app/GherkinDocumentList.tsx) React component,
@@ -36,36 +36,38 @@ To render a `<GherkinDocument>` with results and highlighted [Cucumber Expressio
 
 ## Styling
 
-There are several ways you can apply different styling to the components.
+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.
 
 ### Built-in themes
 
-Besides the default, we have a few other built-in themes:
+These are the built-in themes:
 
+- `light` (default)
 - `dark`
+- `auto` (honours your operating system preference for either light or dark)
 
-You can activate one of these by wrapping your top-level usage with the `Theme` component:
+You can activate one of these by passing the `theme` prop to the `CucumberReact` component:
 
 ```jsx
-<Theme theme="dark">
+<CucumberReact theme="dark">
   <GherkinDocument />
-</Theme>
+</CucumberReact>
 ```
 
 ### Custom themes
 
-You can also provide your own theme with a small amount of CSS. Pass the `Theme` component an appropriate name:
+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:
 
 ```jsx
-<Theme theme="acme-widgets">
+<CucumberReact className="acme-widgets">
   <GherkinDocument />
-</Theme>
+</CucumberReact>
 ```
 
-That name will act as a suffix for a classname `cucumber-theme--acme-widgets`, against which 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:
+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:
 
 ```css
-.cucumber-theme--dark {
+.darkTheme {
   --cucumber-background-color: #1d1d26;
   --cucumber-text-color: #c9c9d1;
   --cucumber-anchor-color: #4caaee;
@@ -77,6 +79,9 @@ That name will act as a suffix for a classname `cucumber-theme--acme-widgets`, a
   --cucumber-error-text-color: #222;
   --cucumber-code-background-color: #282a36;
   --cucumber-code-text-color: #f8f8f2;
+  --cucumber-panel-background-color: #282a36;
+  --cucumber-panel-accent-color: #313442;
+  --cucumber-panel-text-color: #f8f8f2;
 }
 ```
 
@@ -97,16 +102,16 @@ Let's say you want to do something totally different with the typography of doc
 }
 ```
 
-Then, you can wrap your usage in the `CustomRendering` component and provide an object that declares which class names you're going to override and what with:
+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:
 
 ```jsx
-<CustomRendering support={{
+<CucumberReact customRendering={{
   DocString: {
     docString: 'acme-docstring'
   }
 }}>
   <GherkinDocument />
-</CustomRendering>
+</CucumberReact>
 ```
 
 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.
@@ -115,10 +120,10 @@ Some components have multiple styling hooks - e.g. the `<Tags>` component has th
 
 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.
 
-Staying with the doc string example, you can use the same `CustomRendering` wrapper, but this time instead of an object with class names, you provide a React functional component, giving you full control over the rendering:
+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:
 
 ```jsx
-<CustomRendering support={{
+<CucumberReact customRendering={{
   DocString: (props) => (
     <>
       <p>I am going to render this doc string in a textarea:</p>
@@ -127,7 +132,7 @@ Staying with the doc string example, you can use the same `CustomRendering` wrap
   )
 }}>
   <GherkinDocument />
-</CustomRendering>
+</CucumberReact>
 ```
 
 In each case where you provide your own component, it will receive the same props as the default component, plus two more:

javascript/package.json

@@ -11,7 +11,7 @@
   "author": "Aslak Hellesøy",
   "license": "MIT",
   "scripts": {
-    "prepare": "make .codegen && npx -y cpy-cli '**/*.scss' '../dist/src' --cwd='src' --parents",
+    "prepare": "make .codegen && cpy '**/*.scss' '../dist/src' --cwd='src' --parents",
     "test": "mocha",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
@@ -28,6 +28,7 @@
     "@types/elasticlunr": "0.9.4",
     "ansi-to-html": "0.7.2",
     "color": "4.1.0",
+    "date-fns": "2.27.0",
     "elasticlunr": "0.9.5",
     "hast-util-sanitize": "3.0.2",
     "highlight-words": "1.2.0",
@@ -53,6 +54,7 @@
     "@storybook/manager-webpack5": "6.4.9",
     "@storybook/react": "6.4.9",
     "@testing-library/react": "12.1.2",
+    "@testing-library/user-event": "13.5.0",
     "@types/color": "3.0.2",
     "@types/glob": "7.2.0",
     "@types/jsdom": "16.2.14",

javascript/src/EnvelopesQueryContext.ts

@@ -15,6 +15,18 @@ export class EnvelopesQuery {
   public filter(predicate: (envelope: messages.Envelope) => boolean): messages.Envelope[] {
     return this.envelopes.filter(predicate)
   }
+
+  public getMeta(): messages.Meta {
+    return this.find((envelope) => !!envelope.meta)?.meta
+  }
+
+  public getTestRunStarted(): messages.TestRunStarted {
+    return this.find((envelope) => !!envelope.testRunStarted)?.testRunStarted
+  }
+
+  public getTestRunFinished(): messages.TestRunFinished {
+    return this.find((envelope) => !!envelope.testRunFinished)?.testRunFinished
+  }
 }
 
 export default React.createContext(new EnvelopesQuery())

javascript/src/components/CucumberReact.module.scss

@@ -0,0 +1,35 @@
+@import '../styles/theming';
+
+.cucumberReact {
+    font-size: 14px;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    color: $textColor;
+    background: $backgroundColor;
+}
+
+@mixin dark-theme {
+    --cucumber-background-color: #1d1d26;
+    --cucumber-text-color: #c9c9d1;
+    --cucumber-anchor-color: #4caaee;
+    --cucumber-keyword-color: #d89077;
+    --cucumber-parameter-color: #4caaee;
+    --cucumber-tag-color: #85a658;
+    --cucumber-docstring-color: #66a565;
+    --cucumber-error-background-color: #cf6679;
+    --cucumber-error-text-color: #222;
+    --cucumber-code-background-color: #282a36;
+    --cucumber-code-text-color: #f8f8f2;
+    --cucumber-panel-background-color: #282a36;
+    --cucumber-panel-accent-color: #313442;
+    --cucumber-panel-text-color: #f8f8f2;
+}
+
+.darkTheme {
+    @include dark-theme;
+}
+
+.autoTheme {
+    @media all and (prefers-color-scheme: dark) {
+        @include dark-theme;
+    }
+}

javascript/src/components/CucumberReact.tsx

@@ -0,0 +1,25 @@
+import React, { FunctionComponent } from 'react'
+import { CustomRenderingContext, CustomRenderingSupport, IncludedTheme } from './customise'
+import styles from './CucumberReact.module.scss'
+
+interface IProps {
+  theme?: IncludedTheme
+  customRendering?: CustomRenderingSupport
+  className?: string
+}
+
+export const CucumberReact: FunctionComponent<IProps> = ({
+  children,
+  theme = 'light',
+  customRendering = {},
+  className,
+}) => {
+  const classes = [styles.cucumberReact, styles[`${theme}Theme`], className]
+  return (
+    <CustomRenderingContext.Provider value={customRendering}>
+      <div data-testid="cucumber-react" className={classes.filter((c) => !!c).join(' ')}>
+        {children}
+      </div>
+    </CustomRenderingContext.Provider>
+  )
+}

javascript/src/components/app/CICommitLink.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import * as messages from '@cucumber/messages'
 import ciCommitLink from '../../ciCommitLink'
+import { faLink } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 interface IProps {
   ci: messages.Ci
@@ -10,7 +12,16 @@ export const CICommitLink: React.FunctionComponent<IProps> = ({ ci: ci }) => {
   const commitLink = ciCommitLink(ci)
 
   if (commitLink) {
-    return <a href={commitLink}>#{ci.git.revision}</a>
+    return (
+      <>
+        <FontAwesomeIcon icon={faLink} />
+        <a href={commitLink}>{ci.git.revision.substring(0, 7)}</a>
+      </>
+    )
   }
-  return <span>#{ci.git.revision}</span>
+  return (
+    <>
+      <FontAwesomeIcon icon={faLink} /> {ci.git.revision.substring(0, 7)}
+    </>
+  )
 }

javascript/src/components/app/Duration.tsx

@@ -0,0 +1,33 @@
+import React, { FunctionComponent, useMemo } from 'react'
+import * as messages from '@cucumber/messages'
+import { Query as GherkinQuery } from '@cucumber/gherkin-utils'
+import { Query as CucumberQuery } from '@cucumber/query'
+import { QueriesWrapper } from './QueriesWrapper'
+import { EnvelopesQuery } from '../../EnvelopesQueryContext'
+
+interface IProps {
+  envelopes: readonly messages.Envelope[]
+}
+
+export const EnvelopesWrapper: FunctionComponent<IProps> = ({ envelopes, children }) => {
+  const { gherkinQuery, cucumberQuery, envelopesQuery } = useMemo(() => {
+    const gherkinQuery = new GherkinQuery()
+    const cucumberQuery = new CucumberQuery()
+    const envelopesQuery = new EnvelopesQuery()
+    for (const envelope of envelopes) {
+      gherkinQuery.update(envelope)
+      cucumberQuery.update(envelope)
+      envelopesQuery.update(envelope)
+    }
+    return { gherkinQuery, cucumberQuery, envelopesQuery }
+  }, [envelopes])
+  return (
+    <QueriesWrapper
+      gherkinQuery={gherkinQuery}
+      cucumberQuery={cucumberQuery}
+      envelopesQuery={envelopesQuery}
+    >
+      {children}
+    </QueriesWrapper>
+  )
+}

javascript/src/components/app/EnvelopesWrapper.tsx

@@ -0,0 +1,59 @@
+@import '../../styles/theming';
+
+.backdrop {
+    background-color: $panelAccentColor;
+    border: 1px solid transparent;
+}
+
+.list {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-template-rows: 1fr 1fr;
+    gap: 1px;
+    margin: 0;
+    text-align: center;
+}
+
+.item {
+    grid-column-end: span 4;
+    display: flex;
+    flex-direction: column-reverse;
+    justify-content: center;
+    padding: 1.5em;
+    background-color: $backgroundColor;
+    color: $textColor;
+
+    &Ci,
+    &Ci ~ & {
+        grid-column-end: span 3;
+    }
+}
+
+.value {
+    font-weight: bold;
+    font-size: 1.25em;
+    margin: 0;
+
+    svg {
+        max-width: 2em;
+    }
+}
+
+.suffix {
+    font-size: 1em;
+    margin-top: 0.25em;
+    color: $codeTextColor;
+}
+
+.gitItem {
+    display: inline-flex;
+    gap: 0.25em;
+
+    & + & {
+        margin-left: 1em;
+    }
+
+    a {
+        color: $anchorColor;
+    }
+}