Fix issue with hook steps not being rendered

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## [Unreleased]
 ### Fixed
 - Make keyword spacing look right ([#376](https://github.com/cucumber/react-components/pull/376))
+- Fix issue with hook steps not being rendered ([#379](https://github.com/cucumber/react-components/pull/379))
 
 ### Changed
 - Inherit font-size instead of setting at 14px ([#377](https://github.com/cucumber/react-components/pull/377))

src/components/gherkin/GherkinDocument.stories.tsx

@@ -6,6 +6,7 @@ import attachments from '../../../acceptance/attachments/attachments.feature.js'
 import dataTables from '../../../acceptance/data-tables/data-tables.feature.js'
 import examplesTables from '../../../acceptance/examples-tables/examples-tables.feature.js'
 import hooks from '../../../acceptance/hooks/hooks.feature.js'
+import hooksAttachments from '../../../acceptance/hooks-attachment/hooks-attachment.feature.js'
 import markdown from '../../../acceptance/markdown/markdown.feature.md.js'
 import minimal from '../../../acceptance/minimal/minimal.feature.js'
 import parameterTypes from '../../../acceptance/parameter-types/parameter-types.feature.js'
@@ -57,6 +58,11 @@ Hooks.args = {
   envelopes: hooks,
 }
 
+export const HooksWithAttachments = Template.bind({})
+HooksWithAttachments.args = {
+  envelopes: hooksAttachments,
+}
+
 export const Markdown = Template.bind({})
 Markdown.args = {
   envelopes: markdown,

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;
+    }
   }
 }