refactor: replace old tables with DataTable on documentation site (#…

…1859)

www/src/components/TableCells.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import MeasuredItem from './MeasuredItem';
+import measuredTypeProps from './typography-page/measuredTypeProps';
+
+export type CodeCellType = {
+  value: string | number | undefined,
+};
+
+export type DataTableRowType = {
+  row: {
+    original: {
+      name?: string,
+      size?: string,
+      className?: string,
+      text?: string,
+    }
+  },
+};
+
+export function ClassNameCell({ value }: CodeCellType) {
+  if (!value) {
+    return null;
+  }
+
+  return (
+    <code className="fs-16">
+      .{value}
+    </code>
+  );
+}
+
+export function TextCell({ value }: CodeCellType) {
+  return (
+    <p className="m-0 fs-16">
+      {value}
+    </p>
+  );
+}
+
+export function CodeCell({ value }: CodeCellType) {
+  return (
+    <code className="fs-16">
+      {value}
+    </code>
+  );
+}
+
+export function DesktopMeasuredCell({ row } : DataTableRowType) {
+  return (
+    <MeasuredItem {...measuredTypeProps}>
+      <p className={`m-0 ${row.original.className}`}>
+        {row.original.text}
+      </p>
+    </MeasuredItem>
+  );
+}
+
+export function MobileMeasuredCell({ row } : DataTableRowType) {
+  return (
+    <div className="mobile-type">
+      <MeasuredItem {...measuredTypeProps}>
+        <p className={`m-0 ${row.original.className}`}>
+          {row.original.text}
+        </p>
+      </MeasuredItem>
+    </div>
+  );
+}
+
+export function StyleCell({ row } : DataTableRowType) {
+  return (
+    <p className={`fs-16 ${row.original.className}`}>
+      {row.original.text}
+    </p>
+  );
+}

www/src/components/typography-page/Alignment.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+// @ts-ignore
+import { DataTable } from '~paragon-react';
+import { ClassNameCell, StyleCell } from '../TableCells';
+
+const alignmentClassesAndDescriptions = [
+  { className: 'text-left', text: 'left text.' },
+  { className: 'text-right', text: 'right text.' },
+  { className: 'text-center', text: 'center text.' },
+  {
+    className: 'text-justify',
+    text: 'The text-justify class specifies the justification method of text. '
+        + 'This text-justify class spreads the words into the complete line with equal spaces.',
+  },
+  {
+    className: 'text-wrap',
+    text: 'Use text-wrap to cause text to wrap normally within an element. Newlines and spaces will be collapsed.',
+  },
+  {
+    className: 'text-nowrap',
+    text: 'Use text-nowrap to prevent text from wrapping within an element. Newlines and spaces will be collapsed. '
+        + 'You can prevent line breaks and text wrapping for specific elements',
+  },
+];
+
+export default function Alignment() {
+  return (
+    <>
+      <h2 className="mb-4">Alignment</h2>
+      <div className="mb-4">
+        <DataTable
+          itemCount={6}
+          data={alignmentClassesAndDescriptions}
+          columns={[
+            {
+              Header: 'Style',
+              Cell: StyleCell,
+            },
+            {
+              Header: 'CSS Class',
+              accessor: 'className',
+              Cell: ClassNameCell,
+            },
+          ]}
+        >
+          <DataTable.Table />
+        </DataTable>
+      </div>
+    </>
+  );
+}

www/src/components/typography-page/Body.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import MeasuredItem from '../MeasuredItem';
+import measuredTypeProps from './measuredTypeProps';
+// @ts-ignore
+import { DataTable } from '~paragon-react';
+
+import { DesktopMeasuredCell, ClassNameCell } from '../TableCells';
+
+const bodyClassesAndDescriptions = [
+  { className: 'lead', text: 'Large Body' },
+  { className: '', text: 'Body' },
+  { className: 'small', text: 'Small Body' },
+  { className: 'x-small', text: 'Extra Small Body' },
+  { className: 'micro', text: 'Micro Body' },
+];
+
+export default function Body() {
+  return (
+    <>
+      <h2 className="mb-2">Body</h2>
+      <div className="mb-4">
+        <DataTable
+          itemCount={5}
+          data={bodyClassesAndDescriptions}
+          columns={[
+            {
+              Header: 'Desktop & Mobile',
+              Cell: DesktopMeasuredCell,
+            },
+            {
+              Header: 'CSS Class',
+              accessor: 'className',
+              Cell: ClassNameCell,
+            },
+          ]}
+        >
+          <DataTable.Table />
+        </DataTable>
+      </div>
+    </>
+  );
+}

www/src/components/typography-page/DecorationAndEmphasis.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+// @ts-ignore
+import { DataTable } from '~paragon-react';
+import { ClassNameCell, StyleCell } from '../TableCells';
+
+const decorationAndEmphasisClassesAndDescriptions = [
+  { className: 'text-lowercase', text: 'Lowercase text.' },
+  { className: 'text-uppercase', text: 'uppercase text.' },
+  { className: 'text-capitalize', text: 'capitalize text.' },
+  { className: 'text-decoration-none', text: 'No decorations.' },
+  { className: 'font-italic', text: 'Italic text.' },
+  { className: 'font-weight-bold', text: 'Bold text.' },
+  { className: 'font-weight-normal', text: 'Regular text.' },
+];
+
+export default function DecorationAndEmphasis() {
+  return (
+    <>
+      <h2 className="mb-2">Decoration and Emphasis</h2>
+      <div className="mb-4">
+        <DataTable
+          itemCount={7}
+          data={decorationAndEmphasisClassesAndDescriptions}
+          columns={[
+            {
+              Header: 'Style',
+              Cell: StyleCell,
+            },
+            {
+              Header: 'CSS Class',
+              accessor: 'className',
+              Cell: ClassNameCell,
+            },
+          ]}
+        >
+          <DataTable.Table />
+        </DataTable>
+      </div>
+    </>
+  );
+}

www/src/components/typography-page/Display.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+// @ts-ignore
+import { DataTable } from '~paragon-react';
+
+import { ClassNameCell, DesktopMeasuredCell, MobileMeasuredCell } from '../TableCells';
+
+const displaySizes = [1, 2, 3, 4];
+
+export default function Display() {
+  return (
+    <>
+      <h2 className="mb-2">Display</h2>
+      <div className="mb-4">
+        <DataTable
+          itemCount={4}
+          data={displaySizes.map((size) => ({ text: `Display ${size}`, className: `display-${size}` }))}
+          columns={[
+            {
+              Header: 'Desktop',
+              Cell: DesktopMeasuredCell,
+            },
+            {
+              Header: 'Mobile',
+              Cell: MobileMeasuredCell,
+            },
+            {
+              id: 'css-class',
+              Header: 'CSS Class',
+              accessor: 'className',
+              Cell: ClassNameCell,
+            },
+          ]}
+        >
+          <DataTable.Table />
+        </DataTable>
+      </div>
+    </>
+  );
+}

www/src/components/typography-page/Headings.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+// @ts-ignore
+import { DataTable } from '~paragon-react';
+
+import { MobileMeasuredCell, ClassNameCell, DesktopMeasuredCell } from '../TableCells';
+
+const headingSizes = [1, 2, 3, 4, 5, 6];
+
+export default function Headings() {
+  return (
+    <>
+      <h2 className="mb-2">Headings</h2>
+      <div className="mb-4">
+        <DataTable
+          itemCount={6}
+          data={headingSizes.map((size) => ({ text: `Heading ${size}`, className: `h${size}` }))}
+          columns={[
+            {
+              Header: 'Desktop',
+              Cell: DesktopMeasuredCell,
+            },
+            {
+              Header: 'Mobile',
+              Cell: MobileMeasuredCell,
+            },
+            {
+              Header: 'CSS Class',
+              accessor: 'className',
+              Cell: ClassNameCell,
+            },
+          ]}
+        >
+          <DataTable.Table />
+        </DataTable>
+      </div>
+    </>
+  );
+}

www/src/components/typography-page/Links.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+// @ts-ignore
+import { DataTable } from '~paragon-react';
+import { TextCell } from '../TableCells';
+
+const linksClassesAndDescriptions = [
+  {
+    example: <a href="/#">Standalone Link</a>,
+    description: <span>The default style for <code>a</code> tags that don`t appear in a <code>p</code> tag.</span>,
+  },
+  {
+    example: <span>An <a className="inline-link" href="/foundations/typography/">inline link</a> in a sentence.</span>,
+    description: <span>For links inside a <code>p</code> or with the <code>.inline-link</code> class name.</span>,
+  },
+  {
+    example: <a className="muted-link" href="/#">Muted, Standalone Link</a>,
+    description: <span><code>.muted-link</code> not in a <code>p</code> tag.</span>,
+  },
+  {
+    example: (
+      <span>
+        An <a className="muted-link inline-link" href="/foundations/typography/">muted, inline link</a> in a sentence.
+      </span>
+    ),
+    description: (
+      <span>
+        For <code>.muted-link</code> links inside a <code>p</code> or with the <code>.inline-link</code> class name.
+      </span>
+    ),
+  },
+];
+
+export default function Links() {
+  return (
+    <>
+      <h2 className="mb-2">Links</h2>
+      <div className="mb-4">
+        <DataTable
+          itemCount={4}
+          data={linksClassesAndDescriptions}
+          columns={[
+            { Header: 'Example', accessor: 'example', Cell: TextCell },
+            { Header: 'Description', accessor: 'description', Cell: TextCell },
+          ]}
+        >
+          <DataTable.Table />
+        </DataTable>
+      </div>
+    </>
+  );
+}

www/src/components/typography-page/index.tsx

@@ -0,0 +1,6 @@
+export { default as AlignmentTable } from './Alignment';
+export { default as BodyTable } from './Body';
+export { default as DecorationAndEmphasisTable } from './DecorationAndEmphasis';
+export { default as DisplayTable } from './Display';
+export { default as HeadingsTable } from './Headings';
+export { default as LinksTable } from './Links';

www/src/components/typography-page/measuredTypeProps.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+const weightLabels: Record<string, string> = {
+  200: 'Light',
+  300: 'Light',
+  400: 'Regular',
+  500: 'Medium',
+  600: 'Medium',
+  700: 'Bold',
+  800: 'Black',
+};
+
+const measuredTypeProps = {
+  properties: ['font-size', 'line-height', 'font-family', 'font-weight'],
+  renderAfter: (measurements: { [x: string]: string; }) => {
+    const fontFamily = measurements['font-family']
+      ? measurements['font-family'].split(',')[0]
+      : null;
+    const weight = weightLabels[measurements['font-weight']];
+    // only one significant digit if needed
+    const fontSize = Math.round(Number.parseFloat(measurements['font-size']) * 10) / 10;
+    const lineHeight = Math.round(Number.parseFloat(measurements['line-height']) * 10) / 10;
+
+    return (
+      <p className="m-0 text-muted">
+        <span className="mr-2">
+          {fontFamily} {weight}
+        </span>
+        {fontSize}px / {lineHeight}px
+      </p>
+    );
+  },
+};
+
+export default measuredTypeProps;