test link addition in markup

.gitignore

@@ -21,6 +21,7 @@ DerivedData
 *.ipa
 *.xcuserstate
 project.xcworkspace
+.gradle
 
 # node.js
 #

packages/markup/fixtures/link.json

@@ -0,0 +1,91 @@
+{
+  "name": "paragraph",
+  "children": [
+    {
+      "name": "text",
+      "children": [],
+      "attributes": {
+        "value": "Before they became one of the bestselling pop groups in history Abba had to deal with the complaints of a canned fish company that shared their name. Mercifully the "
+      }
+    },
+    {
+      "name": "link",
+      "children": [
+        {
+          "name": "text",
+          "children": [],
+          "attributes": {
+            "value": "firm"
+          }
+        }
+      ],
+      "attributes": {
+        "href": "https://www.thetimes.com/culture/music"
+      }
+    },
+    {
+      "name": "text",
+      "children": [],
+      "attributes": {
+        "value": " relented and the band broke through in 1974 after winning the Eurovision Song Contest with "
+      }
+    },
+    {
+      "name": "emphasis",
+      "children": [
+        {
+          "name": "text",
+          "children": [],
+          "attributes": {
+            "value": "Waterloo"
+          }
+        }
+      ]
+    },
+    {
+      "name": "text",
+      "children": [],
+      "attributes": {
+        "value": ". Comprising two married couples, the Swedish group scored more than a dozen No 1s across the world and have the second highest-selling album in Britain, the compilation "
+      }
+    },
+    {
+      "name": "emphasis",
+      "children": [
+        {
+          "name": "text",
+          "children": [],
+          "attributes": {
+            "value": "Gold"
+          }
+        }
+      ]
+    },
+    {
+      "name": "text",
+      "children": [],
+      "attributes": {
+        "value": ". They split in 1982 after their marriages collapsed but reformed in 2021 for an album and holographic stage show called "
+      }
+    },
+    {
+      "name": "emphasis",
+      "children": [
+        {
+          "name": "text",
+          "children": [],
+          "attributes": {
+            "value": "Voyage"
+          }
+        }
+      ]
+    },
+    {
+      "name": "text",
+      "children": [],
+      "attributes": {
+        "value": "."
+      }
+    }
+  ]
+}

packages/markup/markup.showcase.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-array-index-key */
 /* eslint-env browser */
 import React from "react";
-import { TcText, TcView } from "@times-components/utils";
+import { TcText, TcTextLink, TcView } from "@times-components/utils";
 import { CenteredDecorator } from "@times-components/storybook";
 import { fontsWithFallback } from "@times-components/ts-styleguide";
 import renderTrees, { renderTree } from "@times-components/markup-forest";
@@ -13,6 +13,7 @@ const bio = require("./fixtures/bio.json");
 const ratings = require("./fixtures/ratings.json");
 const subscript = require("./fixtures/multiple-subscripts.json");
 const superscript = require("./fixtures/multiple-superscripts.json");
+const link = [require("./fixtures/link.json")];
 
 export default {
   children: [
@@ -33,18 +34,15 @@ export default {
         renderTree(mixture, {
           ...coreRenderers,
           block(key, attributes, renderedChildren) {
-            return {
-              element: <TcView key={key}>{renderedChildren}</TcView>
-            };
+            return <TcView key={key}>{renderedChildren}</TcView>;
           },
           link(key, attributes, renderedChildren) {
-            return {
-              element: (
-                <TcText href={attributes.href} key={key}>
-                  {renderedChildren}
-                </TcText>
-              )
-            };
+            const { href: url } = attributes;
+            return (
+              <TcTextLink href={url} key={key}>
+                {renderedChildren}
+              </TcTextLink>
+            );
           }
         }),
       name: "Mixture of tags",
@@ -55,6 +53,11 @@ export default {
       name: "Biography",
       type: "story"
     },
+    {
+      component: () => <TcView>{renderTrees(link, coreRenderers)}</TcView>,
+      name: "Link",
+      type: "story"
+    },
     {
       component: () => <TcView>{renderTrees(ratings, coreRenderers)}</TcView>,
       name: "Ratings",
@@ -78,20 +81,18 @@ export default {
           {renderTrees(multiParagraph, {
             ...coreRenderers,
             paragraph(key, attributes, children) {
-              return {
-                element: (
-                  <TcText
-                    key={key}
-                    style={{
-                      color: "red",
-                      fontFamily: fontsWithFallback.headline,
-                      margin: 10
-                    }}
-                  >
-                    {children}
-                  </TcText>
-                )
-              };
+              return (
+                <TcText
+                  key={key}
+                  style={{
+                    color: "red",
+                    fontFamily: fontsWithFallback.headline,
+                    margin: 10
+                  }}
+                >
+                  {children}
+                </TcText>
+              );
             }
           })}
         </TcView>

packages/markup/src/markup.js

@@ -31,6 +31,13 @@ export default {
   superscript(key, attributes, renderedChildren) {
     return <sup key={key}>{renderedChildren}</sup>;
   },
+  link(key, attributes, renderedChildren) {
+    return (
+      <a href={attributes.href} key={key}>
+        {renderedChildren}
+      </a>
+    );
+  },
   text(key, { value }) {
     return value;
   }