adds roadmap from coda table

next/components/thumbprint-roadmap/overview/overview.jsx

@@ -0,0 +1,87 @@
+/* eslint-disable import/prefer-default-export */
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Text, Pill } from '@thumbtack/thumbprint-react';
+import { tpColorGray300 } from '@thumbtack/thumbprint-tokens';
+import styles from './overview.module.scss';
+
+export const ComponentRow = ({ task, description, status, releaseDate}) => (
+    <>
+        <tr className="bb b-gray-300 bw-2 tl">
+            <td className="">
+                {task}
+            </td>
+            <td className="pa2">
+                {description}
+            </td>
+            <td className="pa2">
+                <Pill color="blue">{status}</Pill>
+            </td>
+            <td className="pa2">
+                {releaseDate}
+            </td>
+        </tr>
+    </>
+);
+
+ComponentRow.propTypes = {
+    task: String,
+    description: String,
+    status: String,
+    releaseDate: String,
+};
+
+export const ComponentTable = ({ children }) => (
+    <table className="w-100">
+        <thead className="tl">
+            <tr>
+                {/*
+                    The `boxShadow` is used instead of `border` because of:
+                    https://stackoverflow.com/q/41882616/316602
+                 */}
+                <th
+                    className="pt3 pr2 pb2 v-top top0 bg-white"
+                    style={{
+                        position: 'sticky',
+                        boxShadow: `0px 2px 0px 0px ${tpColorGray300}`,
+                    }}
+                >
+                    <Text size={2}>Name</Text>
+                </th>
+                <th
+                    className="pt3 ph2 pb2 v-top top0 bg-white"
+                    style={{
+                        position: 'sticky',
+                        boxShadow: `0px 2px 0px 0px ${tpColorGray300}`,
+                    }}
+                >
+                    <Text size={2}>Description</Text>
+                </th>
+                <th
+                    className="pt3 ph2 pb2 v-top top0 bg-white"
+                    style={{
+                        position: 'sticky',
+                        boxShadow: `0px 2px 0px 0px ${tpColorGray300}`,
+                    }}
+                >
+                    <Text size={2}>Status</Text>
+                </th>
+                <th
+                    className="pt3 ph2 pb2 v-top top0 bg-white"
+                    style={{
+                        position: 'sticky',
+                        boxShadow: `0px 2px 0px 0px ${tpColorGray300}`,
+                    }}
+                >
+                    <Text size={2}>Release date</Text>
+                </th>
+            </tr>
+        </thead>
+        <tbody>{children}</tbody>
+    </table>
+);
+
+ComponentTable.propTypes = {
+    children: PropTypes.node.isRequired,
+};

next/components/thumbprint-roadmap/overview/overview.module.scss

@@ -0,0 +1,28 @@
+@import '~@thumbtack/thumbprint-tokens/dist/scss/_index';
+
+.dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.dotDone {
+    background: $tp-color__green;
+}
+
+.dotInProgress {
+    border: 2px solid $tp-color__yellow;
+}
+
+.dotToDo {
+    border: 2px solid $tp-color__blue;
+}
+
+.dotNotApplicable {
+    background: $tp-color__gray;
+}
+
+.dotDeprecated {
+    background: $tp-color__red-300;
+}

next/pages/overview/roadmap.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import type { InferGetStaticPropsType } from 'next';
+import { groupBy, keyBy } from 'lodash-es';
+import { Text } from '@thumbtack/thumbprint-react';
+import getLayoutProps from '../../utils/get-layout-props';
+import Alert from '../../components/alert/alert';
+import InlineCode from '../../components/inline-code/inline-code';
+import {
+    ComponentRow,
+    ComponentTable,
+} from '../../components/thumbprint-roadmap/overview/overview';
+import { ContentPage } from '../../components/mdx/mdx';
+
+interface Implementation {
+    browserLink: string;
+    createdAt: string;
+    href: string;
+    id: string;
+    index: number;
+    name: string;
+    type: string;
+    updatedAt: string;
+    values: {
+        Component: string;
+        Platform: string;
+        'Ship date': string;
+        Source: string;
+        Design: string;
+        Documentation: string;
+        'Start date': string;
+        'Row ID': string;
+        'JIRA Ticket': string;
+        'Name used in implementation': string;
+        Developer: string;
+        'Start (in days)': string;
+        'Development status': string;
+        'Design status': string;
+        'Documentation status': string;
+    };
+}
+
+interface Roadmap {
+    browserLink: string;
+    createdAt: string;
+    href: string;
+    id: string;
+    index: number;
+    name: string;
+    type: string;
+    updatedAt: string;
+    values: {
+        Task: string;
+        Description: string;
+        Status: string;
+        'Release Date': string;
+    };
+}
+
+export default function Components({
+    roadmaps,
+    layoutProps,
+}: InferGetStaticPropsType<typeof getStaticProps>): JSX.Element {
+    return (
+        <ContentPage
+            title="Roadmap"
+            description="What's ahead for Thumbprint."
+            layoutProps={layoutProps}
+        >
+            {roadmaps.length === 0 && (
+                <Alert type="warning" title="Where are the components?">
+                    You’ll need to add <InlineCode>CODA_API_TOKEN</InlineCode> environment variable
+                    to a <InlineCode>www/.env</InlineCode> file in order to see the component
+                    statuses while developing locally. Read the{' '}
+                    <a
+                        href="https://github.com/thumbtack/thumbprint/blob/master/CONTRIBUTING.md"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        CONTRIBUTING.md
+                    </a>{' '}
+                    file for help.
+                </Alert>
+            )}
+
+            <ComponentTable>
+                {roadmaps.map(item => {
+
+                    return (
+                        <ComponentRow
+                            task={item.values.Task}
+                            description={item.values.Description}
+                            status={item.values.Status}
+                            releaseDate={item.values['Release Date']}
+                        />
+                    );
+                })}
+            </ComponentTable>
+        </ContentPage>
+    );
+}
+
+export const getStaticProps = async () => {
+    const listRowsRes = await fetch(
+        // https://coda.io/developers/apis/v1#operation/listRows
+        `https://coda.io/apis/v1/docs/bXyUQb2tJW/tables/PublicRoadmap/rows?useColumnNames=true`,
+        {
+            headers: {
+                Authorization: `Bearer ${process.env.CODA_API_TOKEN}`,
+            },
+        },
+    );
+
+    const data = listRowsRes.ok ? await listRowsRes.json() : null;
+    const roadmaps: Roadmap[] = data ? data.items : [];
+
+    // const groupedImplementations = groupBy(roadmaps, implementation => {
+    //     return implementation.values.Name;
+    // });
+
+    // const groupedAndSortedImplementations = Object.keys(groupedImplementations)
+    //     .sort()
+    //     .map(key => {
+    //         return groupedImplementations[key];
+    //     });
+
+    return {
+        props: {
+            layoutProps: getLayoutProps(),
+            roadmaps: roadmaps,
+        },
+    };
+};