Merge pull request linode#32 from linode/DLC-164

DLC-164 Add anchor link to changelog entries

Author: alioso

src/components/2_molecules/changelog-item.js

@@ -1,6 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 
+import Link from "../../images/svgs/link.svg";
+
 class ChangelogItem extends React.Component {
   componentDidMount() {
     const hash = document.location.hash;
@@ -11,7 +13,7 @@ class ChangelogItem extends React.Component {
         () =>
           document
             .getElementById(hash.substr(1))
-            .scrollIntoView({ block: "start", behavior: "smooth" }),
+            .scrollIntoView({ block: "start" }),
         50
       );
   }
@@ -52,7 +54,7 @@ class ChangelogItem extends React.Component {
             className="mt-0 text-2xl font-normal"
             itemProp="alternativeHeadline"
           >
-            {title}
+            <a href={`#${link}`} className="changelog-anchor-link"><Link /></a>{title}
           </h2>
           <div
             className="changelog-entry"

src/css/components/1_atoms/button.css

@@ -1,3 +1,18 @@
 .btn[aria-current="page"] {
   @apply bg-BaseBlue text-white;
 }
+
+.changelog-anchor-link svg {
+  width: 22px;
+  height: 22px;
+  padding: 4px;
+  margin-right: .5rem;
+  position: relative;
+  top: 3px;
+  @apply rounded;
+}
+
+.changelog-anchor-link svg:hover,
+.changelog-anchor-link svg:focus {
+  @apply bg-grey text-white;
+}

src/css/components/2_molecules/changelog-entry.css

@@ -8,6 +8,10 @@
   @apply my-4;
 }
 
+.changelog-entry ul p {
+  @apply mt-0;
+}
+
 .int-changelog .changelog-product {
   display: none;
 }