support multiple links

cucumber · Jul 29, 2024 · e33005d · e33005d
1 parent f6a2fd1
commit e33005d
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 → src/components/gherkin/attachment/Links.tsx b/src/components/gherkin/attachment/Link.tsx → 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>
   )
 }