chore(www): adds a description to the overview of features (#21306)

Author: b0nbon1

docs/features/gatsby-features-specs.csv

@@ -1,7 +1,7 @@
 Category,Gatsby,Jamstack,Cms,Description
-Performance,3,3,2,
-Developer Experience,3,3,2,
-Governance,3,2,3,
-Accessibility,2,2,3,
-Documentation,3,3,3,
-Ecosystem,3,2,2,
+Performance,3,3,2,"Builds a site that is fast with small response time, completely accessible and responsive to user input."
+Developer Experience,3,3,2,"Delivering robust functionality that is stable, speedy, and visually intuitive to developers"
+Governance,3,2,3,"Provides monitor, measure, management and security to your site"
+Accessibility,2,2,3,Enables access to site content and functionality to literally anyone
+Documentation,3,3,3,Detailed technical guides with tutorials and examples.
+Ecosystem,3,2,2,Resources that facilitate development as they integrate with each other

www/src/components/features/simple-evaluation-table.js

@@ -1,44 +1,92 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
-import React from "react"
-
+import { Component } from "react"
 import SectionTitle from "./evaluation-table-section-title"
 import SectionHeaderTop from "./evaluation-table-section-header-top"
 import { renderCell } from "./evaluation-cell"
+import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 
-const SimpleEvaluationTable = ({ title, headers, data }) => (
-  <React.Fragment>
-    {title && <SectionTitle text={title} />}
-    <table>
-      <tbody>
-        <SectionHeaderTop columnHeaders={headers.map(h => h.display)} />
-        {data.map((node, idx) => (
-          <tr key={`feature-row-${idx}`}>
-            {headers.map((header, i) => (
+class SimpleEvaluationTable extends Component {
+  constructor() {
+    super()
+    this.state = {}
+  }
+  render() {
+    const showTooltip = (row) => this.state[`feature-cell-${row}`]
+    const { title, headers, data } = this.props
+    return (
+      <div>
+        {title && <SectionTitle text={title} />}
+        <table>
+          <tbody>
+            <SectionHeaderTop columnHeaders={headers.map(h => h.display)} />
+            {data.map((node, idx) =>
+            [].concat([
+              <tr key={`feature-first-row-${idx}`}>
+                {headers.map((header, i) => (
+                  <td
+                  key={`feature-cell-${idx}-${i}`}
+                  sx={{
+                    display: `table-cell`,
+                    "&:hover": {
+                      cursor: `pointer`,
+                    },
+                    borderBottom: t =>
+                      !showTooltip(idx)
+                        ? `1px solid ${t.colors.ui.border}`
+                        : `none`,
+                    minWidth: 40,
+                    paddingRight: 0,
+                    paddingLeft: 0,
+                    textAlign: `left`,
+                    verticalAlign: `middle`,
+                    fontSize: 1,
+                    lineHeight: `solid`,
+                  }}
+                  onClick={() => {
+                    this.setState({
+                      [`feature-cell-${idx}`]: !showTooltip(idx),
+                    })
+                  }}
+                  >
+                    {renderCell(node[header.nodeFieldProperty], i)}
+                  </td>
+                ))}
+              </tr>,
+              // table row containing details of each feature
+              <tr
+              style={{
+                display: showTooltip(idx) ? `table-row` : `none`,
+              }}
+              key={`feature-second-row-${idx}`}
+            >
               <td
-                key={`feature-cell-${idx}-${i}`}
                 sx={{
-                  display: `table-cell`,
-                  "&:hover": {
-                    cursor: `pointer`,
+                  paddingBottom: t => `calc(${t.space[5]} - 1px)`,
+                  "&&": {
+                    [mediaQueries.xs]: {
+                      px: 3,
+                    },
                   },
-                  borderBottom: t => `1px solid ${t.colors.ui.border}`,
-                  minWidth: 40,
-                  px: 0,
-                  textAlign: `left`,
-                  verticalAlign: `middle`,
-                  fontSize: 1,
-                  lineHeight: `solid`,
                 }}
+                colSpan="5"
               >
-                {renderCell(node[header.nodeFieldProperty], i)}
+                {
+                  <span
+                    dangerouslySetInnerHTML={{
+                      __html: node.Description,
+                    }}
+                  />
+                }
               </td>
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  </React.Fragment>
-)
+            </tr>,
+            ]))}
+          </tbody>
+        </table>
+      </div>
+    )
+  }
+}
 
 export default SimpleEvaluationTable
+