feat(DataTable): add support for title and subtitle

.storybook/preview.js

@@ -29,6 +29,9 @@ export const parameters = {
     root: '#html-addon-root',
     removeEmptyComments: true,
   },
+  controls: {
+    hideNoControlsWarning: true,
+  },
   options: {
     storySort: (a, b) => {
       const defaultOrder = [

docs/content/drafts/DataTable.mdx

@@ -0,0 +1,92 @@
+---
+title: DataTable
+componentId: data_table
+status: Draft
+---
+
+import data from '../../../src/DataTable/DataTable.docs.json'
+
+## Examples
+
+```jsx
+<DataTable
+  title="Repositories"
+  data={[
+    {
+      id: 1,
+      name: 'codeql-dca-worker',
+      type: 'internal',
+      securityFeatures: {
+        dependabot: ['alerts', 'security updates'],
+      },
+    },
+    {
+      id: 2,
+      name: 'aegir',
+      type: 'public',
+      securityFeatures: {
+        dependabot: ['alerts'],
+      },
+    },
+    {
+      id: 3,
+      name: 'strapi',
+      type: 'public',
+      securityFeatures: {
+        dependabot: [],
+      },
+    },
+  ]}
+  columns={[
+    {
+      header: 'Repository',
+      field: 'name',
+      rowHeader: true,
+    },
+    {
+      header: 'Type',
+      field: 'type',
+      renderCell: row => {
+        return <Label>{uppercase(row.type)}</Label>
+      },
+    },
+    {
+      header: 'Dependabot',
+      renderCell: row => {
+        return row.securityFeatures.dependabot.length > 0 ? (
+          <LabelGroup>
+            {row.securityFeatures.dependabot.map(feature => {
+              return <Label key={feature}>{uppercase(feature)}</Label>
+            })}
+          </LabelGroup>
+        ) : null
+      },
+    },
+  ]}
+/>
+```
+
+## Props
+
+<ComponentProps data={data} />
+
+## Status
+
+<ComponentChecklist
+  items={{
+    propsDocumented: false,
+    noUnnecessaryDeps: false,
+    adaptsToThemes: false,
+    adaptsToScreenSizes: false,
+    fullTestCoverage: false,
+    usedInProduction: false,
+    usageExamplesDocumented: false,
+    hasStorybookStories: false,
+    designReviewed: false,
+    a11yReviewed: false,
+    stableApi: false,
+    addressedApiFeedback: false,
+    hasDesignGuidelines: false,
+    hasFigmaComponent: false,
+  }}
+/>

generated/components.json

@@ -2586,6 +2586,153 @@
       ],
       "subcomponents": []
     },
+    "data_table": {
+      "id": "data_table",
+      "name": "DataTable",
+      "status": "draft",
+      "a11yReviewed": false,
+      "stories": [],
+      "props": [
+        {
+          "name": "aria-describedby",
+          "type": "string",
+          "description": "Provide an id to an element which uniquely describes this table"
+        },
+        {
+          "name": "aria-labelledby",
+          "type": "string",
+          "description": "Provide an id to an element which uniquely labels this table"
+        },
+        {
+          "name": "data",
+          "type": "Array<Data>",
+          "description": "Provide a collection of the rows which will be rendered inside of the table"
+        },
+        {
+          "name": "columns",
+          "type": "Array<Column<Data>>",
+          "description": "Provide the columns for the table and the fields in `data` to which they correspond"
+        },
+        {
+          "name": "cellPadding",
+          "type": "'condensed' | 'normal' | 'spacious'",
+          "description": "Specify the amount of space that should be available around the contents of a cell"
+        }
+      ],
+      "subcomponents": [
+        {
+          "name": "Table",
+          "props": [
+            {
+              "name": "aria-describedby",
+              "type": "string",
+              "description": "Provide an id to an element which uniquely describes this table"
+            },
+            {
+              "name": "aria-labelledby",
+              "type": "string",
+              "description": "Provide an id to an element which uniquely labels this table"
+            },
+            {
+              "name": "children",
+              "type": "React.ReactNode"
+            },
+            {
+              "name": "cellPadding",
+              "type": "'condensed' | 'normal' | 'spacious'",
+              "description": "Specify the amount of space that should be available around the contents of a cell"
+            }
+          ]
+        },
+        {
+          "name": "TableHead",
+          "props": [
+            {
+              "name": "children",
+              "type": "React.ReactNode"
+            }
+          ]
+        },
+        {
+          "name": "TableBody",
+          "props": [
+            {
+              "name": "children",
+              "type": "React.ReactNode"
+            }
+          ]
+        },
+        {
+          "name": "TableRow",
+          "props": [
+            {
+              "name": "children",
+              "type": "React.ReactNode"
+            }
+          ]
+        },
+        {
+          "name": "TableHeader",
+          "props": [
+            {
+              "name": "children",
+              "type": "React.ReactNode"
+            }
+          ]
+        },
+        {
+          "name": "TableCell",
+          "props": [
+            {
+              "name": "children",
+              "type": "React.ReactNode"
+            },
+            {
+              "name": "scope",
+              "type": "string",
+              "description": "Provide the scope for a table cell, useful for defining a row header using `scope=\"row\"`"
+            }
+          ]
+        },
+        {
+          "name": "TableContainer",
+          "props": [
+            {
+              "name": "children",
+              "type": "React.ReactNode"
+            }
+          ]
+        },
+        {
+          "name": "TableTitle",
+          "props": [
+            {
+              "name": "children",
+              "type": "React.ReactNode"
+            },
+            {
+              "name": "id",
+              "type": "string",
+              "required": true
+            }
+          ]
+        },
+        {
+          "name": "TableSubtitle",
+          "props": [
+            {
+              "name": "children",
+              "type": "React.ReactNode"
+            },
+            {
+              "name": "id",
+              "type": "string",
+              "required": true
+            }
+          ]
+        }
+      ]
+    },
     "drafts_dialog": {
       "id": "drafts_dialog",
       "name": "Dialog",