Add support for externalised attachments (#353)

Author: davidjgoss

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]
+### Added
+- Support for externalised attachments ([#353](https://github.com/cucumber/react-components/pull/353))
 
 ## [22.1.0] - 2024-03-15
 ### Added

package-lock.json

@@ -42,6 +42,7 @@
     "highlight-words": "1.2.2",
     "mime": "^3.0.0",
     "react-accessible-accordion": "5.0.0",
+    "react-error-boundary": "^4.0.13",
     "react-markdown": "6.0.3",
     "rehype-raw": "5.1.0",
     "rehype-sanitize": "4.0.0",

package.json

@@ -11,7 +11,7 @@ interface IProps {
 
 export const CucumberReact: FunctionComponent<PropsWithChildren<IProps>> = ({
   children,
-  theme = 'light',
+  theme = 'auto',
   customRendering = {},
   className,
 }) => {

src/components/CucumberReact.tsx

@@ -31,7 +31,7 @@ export interface AttachmentProps {
   attachment: messages.Attachment
 }
 
-export type AttachmentClasses = Styles<'text' | 'icon' | 'image'>
+export type AttachmentClasses = Styles<'text' | 'log' | 'icon' | 'image'>
 
 export interface BackgroundProps {
   background: messages.Background

src/components/customise/customRendering.tsx

@@ -14,7 +14,7 @@ import GherkinQueryContext from '../../GherkinQueryContext.js'
 import { HighLight } from '../app/HighLight.js'
 import { DefaultComponent, GherkinStepProps, useCustomRendering } from '../customise/index.js'
 import { TestStepResultDetails } from '../results/index.js'
-import { Attachment } from './Attachment.js'
+import { Attachment } from './attachment/index.js'
 import { DataTable as DataTableComponent } from './DataTable.js'
 import { DocString as DocStringComponent } from './DocString.js'
 import { Keyword } from './Keyword.js'

src/components/gherkin/Attachment.tsx

@@ -5,7 +5,7 @@ import React from 'react'
 import CucumberQueryContext from '../../CucumberQueryContext.js'
 import { HookStepProps, useCustomRendering } from '../customise/index.js'
 import { TestStepResultDetails } from '../results/index.js'
-import { Attachment } from './Attachment.js'
+import { Attachment } from './attachment/index.js'
 import { StepItem } from './StepItem.js'
 import { Title } from './Title.js'
 

src/components/gherkin/GherkinStep.tsx

@@ -1,6 +1,7 @@
-@import '../../styles/theming';
+@import '../../../styles/theming';
 
 .text {
+  position: relative;
   white-space: pre-wrap;
   font-family: $monoFamily;
   font-size: 0.875em;
@@ -12,6 +13,21 @@
   color: $codeTextColor;
 }
 
+.log {
+  padding-left: 3.25em;
+
+  &::before {
+    content: 'Log';
+    position: absolute;
+    top: 0.666em;
+    left: 0.75em;
+    text-transform: uppercase;
+    font-weight: bold;
+    color: $parameterColor;
+    opacity: 0.75;
+  }
+}
+
 .icon {
   margin-right: 0.75em;
   opacity: 0.333;