feat(onboard/updates): create changelog page (#467)

packages/gatsby-github-release/gatsby-node.js

@@ -18,6 +18,7 @@ exports.sourceNodes = async ({
                 nodes{
                     tagName
                     publishedAt
+                    descriptionHTML
                 }
             }
         }
@@ -41,7 +42,7 @@ exports.sourceNodes = async ({
   const tags = data.data.repository.releases.nodes
 
   tags.forEach(tag => {
-    const { tagName, publishedAt } = tag
+    const { tagName, publishedAt, descriptionHTML } = tag
 
     let nodeId = createNodeId(`github-release-${tagName}`)
     let nodeData = Object.assign(
@@ -52,6 +53,7 @@ exports.sourceNodes = async ({
         tagName,
         isCurrent: tagName === `v${version.version}` ? true : false,
         publishedAt,
+        descriptionHTML,
         url:
           'https://' +
           tagName.replace(/\.|-/g, '') +

packages/gatsby-theme-styleguide/src/gatsby-components/Changelog/Changelog.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import { StaticQuery, graphql } from 'gatsby'
+
+const ChangelogContainer = styled.div`
+  h2 {
+    margin-top: 2em;
+  }
+
+  h2,
+  h3 {
+    margin-bottom: 1em !important;
+  }
+
+  h3 {
+    margin-top: 1.5em !important;
+    line-height: 1;
+  }
+`
+
+export const ChangelogItem = styled.div`
+  ${({ first }) =>
+    !first &&
+    css`
+      font-size: 0.8rem;
+    `}
+  padding-bottom: 2em;
+  border-bottom: solid 1px #c3c3c3;
+`
+
+const ChangelogComponent = ({ data }) => (
+  <ChangelogContainer>
+    {data.allGithubRelease.edges
+      .filter(release => release.node.descriptionHTML !== '')
+      .map((release, i) => (
+        <ChangelogItem
+          key={`release-${i}`}
+          first={i === 0}
+          dangerouslySetInnerHTML={{ __html: release.node.descriptionHTML }}
+        />
+      ))}
+  </ChangelogContainer>
+)
+
+const query = graphql`
+  query AllGitReleasesQuery2 {
+    allGithubRelease {
+      edges {
+        node {
+          descriptionHTML
+        }
+      }
+    }
+  }
+`
+
+const Changelog = () => (
+  <StaticQuery
+    query={query}
+    render={data => <ChangelogComponent data={data} />}
+  />
+)
+
+export default Changelog

packages/gatsby-theme-styleguide/src/gatsby-components/Changelog/__tests__/Changelog.test.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { StaticQuery } from 'gatsby'
+
+import Changelog, { ChangelogItem } from '../Changelog'
+
+const data = {
+  allGithubRelease: {
+    edges: [
+      {
+        node: {
+          descriptionHTML: '<div>v1.0.1-alpha.31</div>',
+        },
+      },
+      {
+        node: {
+          descriptionHTML: '<div>v1.0.1-alpha.30</div>',
+        },
+      },
+      {
+        node: {
+          descriptionHTML: '',
+        },
+      },
+      {
+        node: {
+          descriptionHTML: '<div>v1.0.1-alpha.28</div>',
+        },
+      },
+      {
+        node: {
+          descriptionHTML: '<div>v1.0.1-alpha.26</div>',
+        },
+      },
+    ],
+  },
+}
+
+beforeEach(() => {
+  StaticQuery.mockImplementationOnce(({ render }) => render(data))
+})
+
+describe('<Changelog />', () => {
+  it('render corectly', () => {
+    const tree = renderer.create(<Changelog />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('do not render releases with empty descriptions', () => {
+    const tree = renderer.create(<Changelog />)
+    expect(tree.root.findAllByType(ChangelogItem).length).toEqual(4)
+  })
+})

packages/gatsby-theme-styleguide/src/gatsby-components/Changelog/__tests__/__snapshots__/Changelog.test.js.snap

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Changelog /> render corectly 1`] = `
+.c0 h2 {
+  margin-top: 2em;
+}
+
+.c0 h2,
+.c0 h3 {
+  margin-bottom: 1em !important;
+}
+
+.c0 h3 {
+  margin-top: 1.5em !important;
+  line-height: 1;
+}
+
+.c1 {
+  padding-bottom: 2em;
+  border-bottom: solid 1px #c3c3c3;
+}
+
+.c2 {
+  font-size: 0.8rem;
+  padding-bottom: 2em;
+  border-bottom: solid 1px #c3c3c3;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<div>v1.0.1-alpha.31</div>",
+      }
+    }
+  />
+  <div
+    className="c2"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<div>v1.0.1-alpha.30</div>",
+      }
+    }
+  />
+  <div
+    className="c2"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<div>v1.0.1-alpha.28</div>",
+      }
+    }
+  />
+  <div
+    className="c2"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<div>v1.0.1-alpha.26</div>",
+      }
+    }
+  />
+</div>
+`;

packages/gatsby-theme-styleguide/src/gatsby-components/Changelog/index.js

@@ -0,0 +1 @@
+export { default } from './Changelog'

src/docs/Updates/PatternsStatus/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'Patterns Status'
-order: 5
+order: 1
 ---
 
 import PatternsStatus from '@mozaic-ds/gatsby-theme-styleguide/src/gatsby-components/PatternsStatus'

src/docs/Updates/Updates/index.mdx

@@ -0,0 +1,8 @@
+---
+title: 'Changelog'
+order: 2
+---
+
+import Changelog from '@mozaic-ds/gatsby-theme-styleguide/src/gatsby-components/Changelog'
+
+<Changelog />