From 139eecad25760621d42e482e34b6b57c980b6094 Mon Sep 17 00:00:00 2001 From: Muhammed Mustafa Date: Sat, 23 Sep 2023 12:15:29 +0300 Subject: [PATCH] feat: swap table component (#51524) --- client/src/client-only-routes/show-project-links.tsx | 4 ++-- client/src/components/layouts/global.css | 5 ----- client/src/components/layouts/rtl-layout.css | 6 ------ .../__snapshots__/timeline-buttons.test.js.snap | 2 +- client/src/components/profile/components/time-line.tsx | 3 ++- client/src/components/settings/certification.css | 9 --------- client/src/components/settings/certification.tsx | 3 ++- tools/ui-components/src/index.ts | 2 +- tools/ui-components/src/table/table.test.tsx | 9 --------- tools/ui-components/src/table/table.tsx | 1 - 10 files changed, 8 insertions(+), 36 deletions(-) diff --git a/client/src/client-only-routes/show-project-links.tsx b/client/src/client-only-routes/show-project-links.tsx index 5e65da87cdc..de0ff12a52b 100644 --- a/client/src/client-only-routes/show-project-links.tsx +++ b/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 diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css index da46e87c949..9d6a99a732d 100644 --- a/client/src/components/layouts/global.css +++ b/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; diff --git a/client/src/components/layouts/rtl-layout.css b/client/src/components/layouts/rtl-layout.css index 51cb69425c9..dccd7c4b194 100644 --- a/client/src/components/layouts/rtl-layout.css +++ b/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 */ diff --git a/client/src/components/profile/components/__snapshots__/timeline-buttons.test.js.snap b/client/src/components/profile/components/__snapshots__/timeline-buttons.test.js.snap index e0f44e5c27e..e79ca34813c 100644 --- a/client/src/components/profile/components/__snapshots__/timeline-buttons.test.js.snap +++ b/client/src/components/profile/components/__snapshots__/timeline-buttons.test.js.snap @@ -13,7 +13,7 @@ exports[`should check certification page consistency 1`] = ` profile.timeline diff --git a/client/src/components/profile/components/time-line.tsx b/client/src/components/profile/components/time-line.tsx index d94e5558c7e..68c1ea010f0 100644 --- a/client/src/components/profile/components/time-line.tsx +++ b/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'; diff --git a/client/src/components/settings/certification.css b/client/src/components/settings/certification.css index 428cfc95f03..c65e53f09d2 100644 --- a/client/src/components/settings/certification.css +++ b/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; } diff --git a/client/src/components/settings/certification.tsx b/client/src/components/settings/certification.tsx index 13c43caa3f9..71942a3cc77 100644 --- a/client/src/components/settings/certification.tsx +++ b/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'; diff --git a/tools/ui-components/src/index.ts b/tools/ui-components/src/index.ts index dbb739f7a97..b13d5bb5584 100644 --- a/tools/ui-components/src/index.ts +++ b/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'; diff --git a/tools/ui-components/src/table/table.test.tsx b/tools/ui-components/src/table/table.test.tsx index 486b01a1a9f..47096c9c7e4 100644 --- a/tools/ui-components/src/table/table.test.tsx +++ b/tools/ui-components/src/table/table.test.tsx @@ -4,15 +4,6 @@ import { render, screen } from '@testing-library/react'; import { Table } from '.'; describe('
', () => { - it('should contain class table by default', () => { - render(
); - - const table = screen.getByTestId('test'); - - expect(table).toHaveClass('table'); - expect(table).toBeInTheDocument(); - }); - it('should apply striped bg color to every odd element', () => { render(
); diff --git a/tools/ui-components/src/table/table.tsx b/tools/ui-components/src/table/table.tsx index 2bb717cea57..13db863a572 100644 --- a/tools/ui-components/src/table/table.tsx +++ b/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',