allow showing detail of every example, simplify examples table

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### Changed
+- Allow showing detail of every example, simplify examples table ([#159](https://github.com/cucumber/react-components/pull/159))
 
 ## [20.0.2] - 2022-04-14
 ### Fixed

src/components/customise/customRendering.tsx

@@ -1,4 +1,5 @@
 import * as messages from '@cucumber/messages'
+import { Pickle, PickleStep } from '@cucumber/messages'
 import React, { useContext } from 'react'
 
 function mixinStyles<Classes>(
@@ -35,14 +36,12 @@ export interface BackgroundProps {
   background: messages.Background
 }
 
-export type BackgroundClasses = Styles<'steps'>
-
 export type ChildrenProps = Record<string, unknown>
 
 export type ChildrenClasses = Styles<'children'>
 
 export interface DataTableProps {
-  dataTable: messages.DataTable
+  dataTable: messages.DataTable | messages.PickleTable
 }
 
 export type DataTableClasses = Styles<'table'>
@@ -54,7 +53,7 @@ export interface DescriptionProps {
 export type DescriptionClasses = Styles<'content'>
 
 export interface DocStringProps {
-  docString: messages.DocString
+  docString: messages.DocString | messages.PickleDocString
 }
 
 export type DocStringClasses = Styles<'docString'>
@@ -74,7 +73,7 @@ export interface ExamplesTableProps {
   tableBody: readonly messages.TableRow[]
 }
 
-export type ExamplesTableClasses = Styles<'examplesTable' | 'detailRow'>
+export type ExamplesTableClasses = Styles<'examplesTable'>
 
 export interface FeatureProps {
   feature: messages.Feature
@@ -87,6 +86,7 @@ export interface GherkinDocumentProps {
 
 export interface GherkinStepProps {
   step: messages.Step
+  pickleStep?: PickleStep
   hasExamples: boolean
 }
 
@@ -100,6 +100,7 @@ export type KeywordClasses = Styles<'keyword'>
 
 export interface ParameterProps {
   parameterTypeName: string
+  value: string
 }
 
 export type ParameterClasses = Styles<'parameter'>
@@ -116,17 +117,16 @@ export interface ScenarioProps {
   scenario: messages.Scenario
 }
 
-export type ScenarioClasses = Styles<'steps'>
-
 export type StatusIconClasses = Styles<'icon'>
 
-export interface StepListProps {
+export interface GherkinStepsProps {
   steps: readonly messages.Step[]
+  pickle?: Pickle
   hasExamples: boolean
 }
 
 export interface TagsProps {
-  tags: readonly messages.Tag[]
+  tags: readonly messages.Tag[] | readonly messages.PickleTag[]
 }
 
 export type TagsClasses = Styles<'tags' | 'tag'>
@@ -159,7 +159,7 @@ export declare type Customised<Props, Classes = Record<string, string>> =
 
 export interface CustomRenderingSupport {
   Anchor?: Customised<AnchorProps, AnchorClasses>
-  Background?: Customised<BackgroundProps, BackgroundClasses>
+  Background?: Customised<BackgroundProps>
   Attachment?: Customised<AttachmentProps, AttachmentClasses>
   Children?: Customised<ChildrenProps, ChildrenClasses>
   DataTable?: Customised<DataTableProps, DataTableClasses>
@@ -171,13 +171,13 @@ export interface CustomRenderingSupport {
   Feature?: Customised<FeatureProps>
   GherkinDocument?: Customised<GherkinDocumentProps>
   GherkinStep?: Customised<GherkinStepProps>
+  GherkinSteps?: Customised<GherkinStepsProps>
   HookStep?: Customised<HookStepProps>
   Keyword?: Customised<unknown, KeywordClasses>
   Parameter?: Customised<ParameterProps, ParameterClasses>
   Rule?: Customised<RuleProps>
-  Scenario?: Customised<ScenarioProps, ScenarioClasses>
+  Scenario?: Customised<ScenarioProps>
   StatusIcon?: Customised<StatusIconProps, StatusIconClasses>
-  StepList?: Customised<StepListProps>
   Tags?: Customised<TagsProps, TagsClasses>
   Title?: Customised<TitleProps, TitleClasses>
 }

src/components/gherkin/Background.tsx

@@ -1,40 +1,28 @@
 import React from 'react'
 
-import {
-  BackgroundClasses,
-  BackgroundProps,
-  DefaultComponent,
-  useCustomRendering,
-} from '../customise'
-import defaultStyles from './Background.module.scss'
+import { BackgroundProps, DefaultComponent, useCustomRendering } from '../customise'
 import { Description } from './Description'
+import { GherkinSteps } from './GherkinSteps'
 import { Keyword } from './Keyword'
-import { StepList } from './StepList'
+import { StepsList } from './StepsList'
 import { Title } from './Title'
 
-const DefaultRenderer: DefaultComponent<BackgroundProps, BackgroundClasses> = ({
-  background,
-  styles,
-}) => {
+const DefaultRenderer: DefaultComponent<BackgroundProps> = ({ background }) => {
   return (
     <section>
       <Title header="h2" id={background.id}>
         <Keyword>{background.keyword}:</Keyword>
         <span>{background.name}</span>
       </Title>
       <Description description={background.description} />
-      <ol className={styles.steps}>
-        <StepList steps={background.steps || []} hasExamples={false} />
-      </ol>
+      <StepsList>
+        <GherkinSteps steps={background.steps || []} hasExamples={false} />
+      </StepsList>
     </section>
   )
 }
 
 export const Background: React.FunctionComponent<BackgroundProps> = (props) => {
-  const ResolvedRenderer = useCustomRendering<BackgroundProps, BackgroundClasses>(
-    'Background',
-    defaultStyles,
-    DefaultRenderer
-  )
+  const ResolvedRenderer = useCustomRendering<BackgroundProps>('Background', {}, DefaultRenderer)
   return <ResolvedRenderer {...props} />
 }

src/components/gherkin/DataTable.module.scss

@@ -1,41 +1,5 @@
-@import '../../styles/theming';
-
-@mixin cucumber-table-style {
-  border-collapse: collapse;
-  margin: 0;
-
-  thead tr {
-    border-bottom: 6px solid transparent;
-  }
-
-  tr + tr {
-    border-top: 6px solid transparent;
-  }
-
-  th, td {
-    padding: 0.4em 0.6em;
-    border-width: 2px;
-    border-style: solid;
-    border-top: none;
-    border-bottom: none;
-    border-color: $keywordColor;
-    color: $parameterColor;
-  }
-}
+@import '../../styles/tables';
 
 .table {
   @include cucumber-table-style;
 }
-
-.examplesTable {
-  @include cucumber-table-style;
-
-  th:first-child, td:first-child {
-    border-left: none;
-  }
-}
-
-.detailRow.detailRow {
-  border-top: none;
-}
-

src/components/gherkin/DataTable.tsx

@@ -12,7 +12,7 @@ import defaultStyles from './DataTable.module.scss'
 import isNumber from './isNumber'
 
 const TableBody: React.FunctionComponent<{
-  rows: readonly messages.TableRow[]
+  rows: readonly messages.TableRow[] | readonly messages.PickleTableRow[]
 }> = ({ rows }) => {
   return (
     <tbody>

src/components/gherkin/ExampleDetail.module.scss

@@ -0,0 +1,24 @@
+@import '../../styles/theming';
+
+.backButton {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    background-color: transparent;
+    color: $anchorColor;
+    font-family: inherit;
+    font-size: inherit;
+    padding: 0;
+    border: 0;
+    margin: 0 0 0.5em 0;
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+        text-decoration: underline;
+    }
+
+    svg {
+        transform: rotate(45deg);
+    }
+}

src/components/gherkin/ExampleDetail.tsx

@@ -0,0 +1,50 @@
+import { Pickle, Scenario } from '@cucumber/messages'
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React, { useContext, VoidFunctionComponent } from 'react'
+
+import CucumberQueryContext from '../../CucumberQueryContext'
+import GherkinQueryContext from '../../GherkinQueryContext'
+import { HighLight } from '../app/HighLight'
+import { Description } from './Description'
+import styles from './ExampleDetail.module.scss'
+import { GherkinSteps } from './GherkinSteps'
+import { HookSteps } from './HookSteps'
+import { Keyword } from './Keyword'
+import { StepsList } from './StepsList'
+import { Tags } from './Tags'
+import { Title } from './Title'
+
+export const ExampleDetail: VoidFunctionComponent<{
+  scenario: Scenario
+  pickleId: string
+  onBack: () => void
+}> = ({ scenario, pickleId, onBack }) => {
+  const gherkinQuery = useContext(GherkinQueryContext)
+  const cucumberQuery = useContext(CucumberQueryContext)
+  const pickle: Pickle = gherkinQuery.getPickles().find((item) => item.id === pickleId) as Pickle
+  const beforeHooks = cucumberQuery.getBeforeHookSteps(pickleId)
+  const afterHooks = cucumberQuery.getAfterHookSteps(pickleId)
+  const examplesCount = scenario.examples.flatMap((examples) => examples.tableBody).length
+  return (
+    <>
+      <button className={styles.backButton} onClick={onBack}>
+        <FontAwesomeIcon icon={faArrowLeft} />
+        Back to outline and all {examplesCount} examples
+      </button>
+      <section>
+        <Tags tags={pickle.tags} />
+        <Title header="h2" id={scenario.id}>
+          <Keyword>Example:</Keyword>
+          <HighLight text={pickle.name} />
+        </Title>
+        <Description description={scenario.description} />
+        <StepsList>
+          <HookSteps hookSteps={beforeHooks} />
+          <GherkinSteps steps={scenario.steps || []} pickle={pickle} hasExamples={false} />
+          <HookSteps hookSteps={afterHooks} />
+        </StepsList>
+      </section>
+    </>
+  )
+}

src/components/gherkin/ExamplesContext.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+
+export const ExamplesContext = createContext<{
+  setSelectedExample: (pickleId?: string) => void
+}>({
+  setSelectedExample: () => undefined,
+})

src/components/gherkin/ExamplesTable.module.scss

@@ -0,0 +1,14 @@
+@import '../../styles/theming';
+@import '../../styles/tables';
+
+.examplesTable {
+    @include cucumber-table-style;
+
+    th:first-child, td:first-child {
+        border-left: none;
+    }
+
+    tbody tr {
+        cursor: pointer;
+    }
+}