feat: swap table component (#51524)

client/src/client-only-routes/show-project-links.tsx

@@ -1,12 +1,12 @@
-import { Table } from '@freecodecamp/react-bootstrap';
 import { find } from 'lodash-es';
 import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
+import { Table } from '@freecodecamp/ui';
 
 import { Link, Spacer } from '../components/helpers';
 import ProjectModal from '../components/SolutionViewer/project-modal';
-import { CompletedChallenge, User } from '../redux/prop-types';
+import type { CompletedChallenge, User } from '../redux/prop-types';
 import {
   certsToProjects,
   type CertTitle

client/src/components/layouts/global.css

@@ -487,11 +487,6 @@ hr {
   color: var(--secondary-background);
 }
 
-.table-striped > tbody > tr:nth-child(2n + 1) > td,
-.table-striped > tbody > tr:nth-child(2n + 1) > th {
-  background-color: var(--tertiary-background);
-}
-
 .challenge-instructions table {
   display: inline-block;
   overflow: auto;

client/src/components/layouts/rtl-layout.css

@@ -95,12 +95,6 @@ New RWD project challenge
   gap: 10px;
 }
 
-/* Align the the Arabic head with the corresponding English word */
-
-[dir='rtl'] .table thead:first-child tr:first-child th {
-  text-align: right;
-}
-
 /* 
 sections that need to stay left to right
 */

client/src/components/profile/components/__snapshots__/timeline-buttons.test.js.snap

@@ -13,7 +13,7 @@ exports[`should check certification page consistency 1`] = `
       profile.timeline
     </h2>
     <table
-      className="table table-striped table-condensed"
+      className="table-auto w-full max-w-full border-collapse text-left text-foreground-tertiary [&_th]:font-normal [&_td]:p-1 [&_th]:p-1 [&>tbody>tr:nth-of-type(odd)]:bg-background-tertiary"
     >
       <thead>
         <tr>

client/src/components/profile/components/time-line.tsx

@@ -1,4 +1,4 @@
-import { Button, Modal, Table } from '@freecodecamp/react-bootstrap';
+import { Button, Modal } from '@freecodecamp/react-bootstrap';
 import Loadable from '@loadable/component';
 import { graphql, useStaticQuery } from 'gatsby';
 import { reverse, sortBy } from 'lodash-es';
@@ -6,6 +6,7 @@ import React, { useMemo, useState } from 'react';
 import type { TFunction } from 'i18next';
 import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
+import { Table } from '@freecodecamp/ui';
 
 import envData from '../../../../config/env.json';
 import { getLangCode } from '../../../../../shared/config/i18n';

client/src/components/settings/certification.css

@@ -6,15 +6,6 @@
   line-height: 40px;
 }
 
-.table > thead > tr > th,
-.table > tbody > tr > th,
-.table > tfoot > tr > th,
-.table > thead > tr > td,
-.table > tbody > tr > td,
-.table > tfoot > tr > td {
-  border: none;
-}
-
 .modal {
   overflow-y: auto;
 }

client/src/components/settings/certification.tsx

@@ -1,4 +1,4 @@
-import { Table, Button } from '@freecodecamp/react-bootstrap';
+import { Button } from '@freecodecamp/react-bootstrap';
 import { Link, navigate } from 'gatsby';
 import { find } from 'lodash-es';
 import React, { MouseEvent, useState } from 'react';
@@ -7,6 +7,7 @@ import type { TFunction } from 'i18next';
 import { createSelector } from 'reselect';
 import ScrollableAnchor, { configureAnchors } from 'react-scrollable-anchor';
 import { connect } from 'react-redux';
+import { Table } from '@freecodecamp/ui';
 
 import { regeneratePathAndHistory } from '../../../../shared/utils/polyvinyl';
 import ProjectPreviewModal from '../../templates/Challenges/components/project-preview-modal';

tools/ui-components/src/index.ts

@@ -2,7 +2,7 @@
 // export { Button } from './button';
 // export { Alert } from './alert';
 // export { Image } from './image';
-// export { Table } from './table';
+export { Table } from './table';
 // export { ToggleButton } from './toggle-button';
 export { Dropdown } from './drop-down';
 export { MenuItem } from './drop-down/menu-item';

tools/ui-components/src/table/table.test.tsx

@@ -4,15 +4,6 @@ import { render, screen } from '@testing-library/react';
 import { Table } from '.';
 
 describe('<Table />', () => {
-  it('should contain class table by default', () => {
-    render(<Table data-testid='test' />);
-
-    const table = screen.getByTestId('test');
-
-    expect(table).toHaveClass('table');
-    expect(table).toBeInTheDocument();
-  });
-
   it('should apply striped bg color to every odd <tr> element', () => {
     render(<Table data-testid='test' striped />);
 

tools/ui-components/src/table/table.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { TableProps } from './types';
 
 const defaultClassNames = [
-  'table',
   'table-auto',
   'w-full',
   'max-w-full',