Fix issue with hook steps not being rendered (#379)

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]
+### Fixed
+- Fix issue with hook steps not being rendered ([#379](https://github.com/cucumber/react-components/pull/379))
 
 ## [22.4.1] - 2025-03-30
 ### Fixed

src/components/gherkin/HookStep.tsx

@@ -39,7 +39,7 @@ const DefaultRenderer: React.FunctionComponent<HookStepProps> = ({ step }) => {
     )
   }
 
-  if (attachments) {
+  if (attachments?.length) {
     return (
       <StepItem>
         {attachments.map((attachment, i) => (

src/components/gherkin/HookSteps.tsx

@@ -10,12 +10,11 @@ interface IProps {
 export const HookSteps: React.FunctionComponent<IProps> = ({ hookSteps }) => {
   return (
     <>
-      {hookSteps
-        .map((step, index) => <HookStep key={index} step={step} />)
-        .filter((el) => !!el.props.children?.length)
-        .map((el, index) => (
-          <li key={index}>{el}</li>
-        ))}
+      {hookSteps.map((step, index) => (
+        <li key={index}>
+          <HookStep key={index} step={step} />
+        </li>
+      ))}
     </>
   )
 }

src/components/gherkin/StepsList.module.scss

@@ -1,12 +1,12 @@
 .steps {
   padding: 0;
-  margin: 1em;
+  margin: 0.875em 1em;
 
   > li {
     list-style: none;
-  }
 
-  > li + li {
-    margin-top: 0.25em;
+    &:not(:empty) {
+      padding: 0.125em 0;
+    }
   }
 }