From e33005d4a08aeee1ab2bf2bbe101e539b20425bb Mon Sep 17 00:00:00 2001
From: David Goss <david@davidgoss.co>
Date: Mon, 29 Jul 2024 12:36:36 -0400
Subject: [PATCH] support multiple links

---
 src/components/customise/customRendering.tsx  |  2 +-
 .../gherkin/attachment/Attachment.module.scss | 15 +++++++++++---
 .../gherkin/attachment/Attachment.spec.tsx    | 19 ++++++++++++++++++
 .../gherkin/attachment/Attachment.stories.tsx | 11 ++++++++++
 .../gherkin/attachment/Attachment.tsx         |  4 ++--
 .../attachment/{Link.tsx => Links.tsx}        | 20 ++++++++++++-------
 6 files changed, 58 insertions(+), 13 deletions(-)
 rename src/components/gherkin/attachment/{Link.tsx => Links.tsx} (56%)

diff --git a/src/components/customise/customRendering.tsx b/src/components/customise/customRendering.tsx
index 248b4449..50195ffc 100644
--- a/src/components/customise/customRendering.tsx
+++ b/src/components/customise/customRendering.tsx
@@ -31,7 +31,7 @@ export interface AttachmentProps {
   attachment: messages.Attachment
 }
 
-export type AttachmentClasses = Styles<'text' | 'log' | 'icon' | 'image' | 'link'>
+export type AttachmentClasses = Styles<'text' | 'log' | 'icon' | 'image' | 'links'>
 
 export interface BackgroundProps {
   background: messages.Background
diff --git a/src/components/gherkin/attachment/Attachment.module.scss b/src/components/gherkin/attachment/Attachment.module.scss
index baca2c5c..8e2a7cec 100644
--- a/src/components/gherkin/attachment/Attachment.module.scss
+++ b/src/components/gherkin/attachment/Attachment.module.scss
@@ -38,9 +38,18 @@
   margin-top: 0.5em;
 }
 
-.link {
-  text-decoration: none;
-  color: $anchorColor;
+.links {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0;
+  margin: 0;
+
+  a {
+    text-decoration: none;
+    color: $anchorColor;
+  }
 
   svg {
     margin-right: 0.5em;
diff --git a/src/components/gherkin/attachment/Attachment.spec.tsx b/src/components/gherkin/attachment/Attachment.spec.tsx
index 78ab81f7..e6ed20b7 100644
--- a/src/components/gherkin/attachment/Attachment.spec.tsx
+++ b/src/components/gherkin/attachment/Attachment.spec.tsx
@@ -182,4 +182,23 @@ describe('<Attachment>', () => {
       'https://cucumber.io'
     )
   })
+
+  it('renders multiple links', () => {
+    const attachment: messages.Attachment = {
+      mediaType: 'text/uri-list',
+      contentEncoding: AttachmentContentEncoding.IDENTITY,
+      body: `https://github.com/cucumber/cucumber-js
+https://github.com/cucumber/cucumber-jvm
+https://github.com/cucumber/cucumber-ruby`,
+    }
+
+    render(<Attachment attachment={attachment} />)
+
+    expect(screen.getByRole('link', { name: 'https://github.com/cucumber/cucumber-js' })).to.be
+      .visible
+    expect(screen.getByRole('link', { name: 'https://github.com/cucumber/cucumber-jvm' })).to.be
+      .visible
+    expect(screen.getByRole('link', { name: 'https://github.com/cucumber/cucumber-ruby' })).to.be
+      .visible
+  })
 })
diff --git a/src/components/gherkin/attachment/Attachment.stories.tsx b/src/components/gherkin/attachment/Attachment.stories.tsx
index 9e3d8a14..5add243b 100644
--- a/src/components/gherkin/attachment/Attachment.stories.tsx
+++ b/src/components/gherkin/attachment/Attachment.stories.tsx
@@ -42,6 +42,17 @@ Link.args = {
   },
 } satisfies AttachmentProps
 
+export const MultipleLinks = Template.bind({})
+MultipleLinks.args = {
+  attachment: {
+    mediaType: 'text/uri-list',
+    contentEncoding: AttachmentContentEncoding.IDENTITY,
+    body: `https://github.com/cucumber/cucumber-js
+https://github.com/cucumber/cucumber-jvm
+https://github.com/cucumber/cucumber-ruby`,
+  },
+} satisfies AttachmentProps
+
 export const ExternalisedImage = Template.bind({})
 ExternalisedImage.storyName = 'Externalised image'
 ExternalisedImage.args = {
diff --git a/src/components/gherkin/attachment/Attachment.tsx b/src/components/gherkin/attachment/Attachment.tsx
index 65a0d252..32c9bfb7 100644
--- a/src/components/gherkin/attachment/Attachment.tsx
+++ b/src/components/gherkin/attachment/Attachment.tsx
@@ -10,7 +10,7 @@ import {
 import { ErrorMessage } from '../ErrorMessage.js'
 import defaultStyles from './Attachment.module.scss'
 import { Image } from './Image.js'
-import { Link } from './Link.js'
+import { Links } from './Links.js'
 import { Log } from './Log.js'
 import { Text } from './Text.js'
 import { Unknown } from './Unknown.js'
@@ -27,7 +27,7 @@ const DefaultRenderer: DefaultComponent<AttachmentProps, AttachmentClasses> = ({
   } else if (attachment.mediaType == 'text/x.cucumber.log+plain') {
     return <Log attachment={attachment} classes={styles} />
   } else if (attachment.mediaType == 'text/uri-list') {
-    return <Link attachment={attachment} classes={styles} />
+    return <Links attachment={attachment} classes={styles} />
   } else if (attachment.mediaType.match(/^text\//)) {
     return <Text attachment={attachment} classes={styles} />
   } else if (attachment.mediaType.match(/^application\/json/)) {
diff --git a/src/components/gherkin/attachment/Link.tsx b/src/components/gherkin/attachment/Links.tsx
similarity index 56%
rename from src/components/gherkin/attachment/Link.tsx
rename to src/components/gherkin/attachment/Links.tsx
index c5b8de8e..8f7f30c0 100644
--- a/src/components/gherkin/attachment/Link.tsx
+++ b/src/components/gherkin/attachment/Links.tsx
@@ -6,17 +6,23 @@ import React, { FC } from 'react'
 import { AttachmentClasses } from '../../customise/index.js'
 import { useText } from './useText.js'
 
-export const Link: FC<{
+export const Links: FC<{
   attachment: Attachment
   classes: AttachmentClasses
 }> = ({ attachment, classes }) => {
   const { content } = useText(attachment)
   return (
-    <div>
-      <a className={classes.link} href={content} target="_blank" rel="noreferrer">
-        <FontAwesomeIcon icon={faLink} />
-        {content}
-      </a>
-    </div>
+    <ul className={classes.links}>
+      {content.split('\n').map((line, index) => {
+        return (
+          <li key={index}>
+            <a href={line} target="_blank" rel="noreferrer">
+              <FontAwesomeIcon icon={faLink} />
+              {line}
+            </a>
+          </li>
+        )
+      })}
+    </ul>
   )
 }