refactor: replace Row component (#51317)

client/src/client-only-routes/show-certification.tsx

@@ -1,4 +1,4 @@
-import { Row, Image, Button } from '@freecodecamp/react-bootstrap';
+import { Image, Button } from '@freecodecamp/react-bootstrap';
 import { isEmpty } from 'lodash-es';
 import { QRCodeSVG } from 'qrcode.react';
 import React, { useEffect, useState } from 'react';
@@ -6,7 +6,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 import envData from '../../config/env.json';
 import { getLangCode } from '../../../shared/config/i18n';

client/src/client-only-routes/show-user.tsx

@@ -3,8 +3,7 @@ import {
   FormControl,
   FormGroup,
   ControlLabel,
-  Button,
-  Row
+  Button
 } from '@freecodecamp/react-bootstrap';
 import React, { useState } from 'react';
 import Helmet from 'react-helmet';
@@ -12,7 +11,7 @@ import type { TFunction } from 'i18next';
 import { Trans, withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { Col } from '@freecodecamp/ui';
+import { Col, Row } from '@freecodecamp/ui';
 
 import Login from '../components/Header/components/login';
 

client/src/components/Donation/donation-modal.tsx

@@ -1,10 +1,11 @@
-import { Modal, Button, Row } from '@freecodecamp/react-bootstrap';
+import { Modal, Button } from '@freecodecamp/react-bootstrap';
 import {
   Tabs,
   TabsContent,
   TabsTrigger,
   TabsList,
-  Col
+  Col,
+  Row
 } from '@freecodecamp/ui';
 import { WindowLocation } from '@reach/router';
 import React, { useEffect, useState } from 'react';

client/src/components/SolutionViewer/exam-results-modal.tsx

@@ -1,8 +1,10 @@
-import { Button, Modal, Row } from '@freecodecamp/react-bootstrap';
+import { Button, Modal } from '@freecodecamp/react-bootstrap';
 import { connect } from 'react-redux';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { GeneratedExamResults } from '../../redux/prop-types';
+import { Row } from '@freecodecamp/ui';
+
+import type { GeneratedExamResults } from '../../redux/prop-types';
 import { closeModal } from '../../templates/Challenges/redux/actions';
 import { isExamResultsModalOpenSelector } from '../../templates/Challenges/redux/selectors';
 import { formatSecondsToTime } from '../../utils/format-seconds';

client/src/components/helpers/full-width-row.tsx

@@ -1,5 +1,4 @@
-import { Row } from '@freecodecamp/react-bootstrap';
-import { Col } from '@freecodecamp/ui';
+import { Col, Row } from '@freecodecamp/ui';
 import React from 'react';
 
 interface FullWidthRowProps {

client/src/components/landing/components/landing-top.tsx

@@ -1,7 +1,6 @@
-import { Row } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 import { clientLocale } from '../../../../config/env.json';
 import {

client/src/components/layouts/global.css

@@ -45,7 +45,7 @@ body {
 }
 
 /*
-  Row from @freecodecamp/react-bootstrap adds some negative margin which causes
+  Row from @freecodecamp/ui adds some negative margin which causes
   a little bit of horizontal overflow on certain pages. This eliminates that
   for those pages.
 */

client/src/components/profile/__snapshots__/profile.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`<Profile/> renders correctly 1`] = `
     />
     <div>
       <div
-        class="row"
+        class="mx-[-15px] "
       >
         <div
           class="avatar-camper min-h-[1px] px-[15px] w-full         "
@@ -166,7 +166,7 @@ exports[`<Profile/> renders correctly 1`] = `
         </div>
       </div>
       <div
-        class="row"
+        class="mx-[-15px] "
       >
         <div
           class="text-center social-media-icons min-h-[1px] px-[15px]  md:w-1/2    md:ml-[25%]    "
@@ -279,7 +279,7 @@ exports[`<Profile/> renders correctly 1`] = `
       style="padding: 15px 0px;"
     />
     <div
-      class="text-center row"
+      class="mx-[-15px] text-center"
     >
       <a
         href="/user/string/report-user"

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

@@ -2,7 +2,7 @@
 
 exports[`should check certification page consistency 1`] = `
 <div
-  className="row"
+  className="mx-[-15px] "
 >
   <div
     className=" min-h-[1px] px-[15px] w-full md:w-2/3    md:ml-[16.6%]    "

client/src/components/profile/components/camper.tsx

@@ -4,11 +4,10 @@ import {
   faHeart
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Row } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
-import { Col } from '@freecodecamp/ui';
+import { Col, Row } from '@freecodecamp/ui';
 
 import envData from '../../../../config/env.json';
 import { getLangCode } from '../../../../../shared/config/i18n';

client/src/components/profile/components/certifications.tsx

@@ -1,9 +1,8 @@
-import { Row } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { Col } from '@freecodecamp/ui';
+import { Col, Row } from '@freecodecamp/ui';
 
 import { certificatesByNameSelector } from '../../../redux/selectors';
 import type { CurrentCert } from '../../../redux/prop-types';

client/src/components/profile/components/heat-map.tsx

@@ -1,4 +1,3 @@
-import { Row } from '@freecodecamp/react-bootstrap';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import CalendarHeatMap from '@freecodecamp/react-calendar-heatmap';
@@ -10,6 +9,7 @@ import React, { Component } from 'react';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import ReactTooltip from 'react-tooltip';
+import { Row } from '@freecodecamp/ui';
 
 import '@freecodecamp/react-calendar-heatmap/dist/styles.css';
 import './heatmap.css';

client/src/components/profile/components/social-icons.tsx

@@ -5,10 +5,9 @@ import {
 } from '@fortawesome/free-brands-svg-icons';
 import { faLink } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Row } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Col } from '@freecodecamp/ui';
+import { Col, Row } from '@freecodecamp/ui';
 
 import './social-icons.css';
 

client/src/components/profile/profile.tsx

@@ -1,10 +1,9 @@
-import { Row } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import Helmet from 'react-helmet';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 
-import { Container } from '@freecodecamp/ui';
+import { Container, Row } from '@freecodecamp/ui';
 import { FullWidthRow, Link, Spacer } from '../helpers';
 import { User } from './../../redux/prop-types';
 import Timeline from './components/time-line';

client/src/pages/__snapshots__/email-sign-up.test.js.snap

@@ -8,7 +8,7 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
 >
   
   <div
-    className="row"
+    className="mx-[-15px] "
   >
     <div
       className=" min-h-[1px] px-[15px] w-full md:w-5/6 min-[992px]:w-2/3   md:ml-[8.3%] min-[992px]:ml-[16.6%]   "
@@ -123,7 +123,7 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
     </div>
   </div>
   <div
-    className="email-sign-up row"
+    className="mx-[-15px] email-sign-up"
     data-cy="email-sign-up"
   >
     <div

client/src/pages/blocked.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Row } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 import { Spacer } from '../components/helpers';
 

client/src/pages/donate.tsx

@@ -1,5 +1,4 @@
-import { Row } from '@freecodecamp/react-bootstrap';
-import { Alert, Container, Col } from '@freecodecamp/ui';
+import { Alert, Container, Col, Row } from '@freecodecamp/ui';
 import type { TFunction } from 'i18next';
 import React, { useEffect } from 'react';
 import Helmet from 'react-helmet';
@@ -15,7 +14,6 @@ import {
   DonationOptionsAlertText,
   DonationFaqText
 } from '../components/Donation/donation-text-components';
-
 import { Spacer, Loader } from '../components/helpers';
 import CampersImage from '../components/landing/components/campers-image';
 import { executeGA } from '../redux/actions';

client/src/pages/email-sign-up.tsx

@@ -1,4 +1,4 @@
-import { Row, Button } from '@freecodecamp/react-bootstrap';
+import { Button } from '@freecodecamp/react-bootstrap';
 import React, { useEffect, useRef } from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation, Trans } from 'react-i18next';
@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 import IntroDescription from '../components/Intro/components/intro-description';
 import createRedirect from '../components/create-redirect';

client/src/pages/learn.tsx

@@ -1,4 +1,3 @@
-import { Row } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React from 'react';
 import Helmet from 'react-helmet';
@@ -6,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { bindActionCreators, Dispatch } from 'redux';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 import Intro from '../components/Intro';
 import Map from '../components/Map';

client/src/pages/update-email.tsx

@@ -2,7 +2,6 @@ import {
   FormGroup,
   FormControl,
   ControlLabel,
-  Row,
   Button
 } from '@freecodecamp/react-bootstrap';
 import { Link } from 'gatsby';
@@ -16,7 +15,7 @@ import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
 import isEmail from 'validator/lib/isEmail';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 import { Spacer } from '../components/helpers';
 import './update-email.css';

client/src/templates/Challenges/codeally/show.tsx

@@ -1,5 +1,5 @@
 // Package Utilities
-import { Row, Button } from '@freecodecamp/react-bootstrap';
+import { Button } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component, RefObject } from 'react';
 import Helmet from 'react-helmet';
@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Alert } from '@freecodecamp/ui';
+import { Container, Col, Row, Alert } from '@freecodecamp/ui';
 
 // Local Utilities
 import Spacer from '../../../components/helpers/spacer';

client/src/templates/Challenges/exam/show.tsx

@@ -1,5 +1,5 @@
 // Package Utilities
-import { Row, Button } from '@freecodecamp/react-bootstrap';
+import { Button } from '@freecodecamp/react-bootstrap';
 import { graphql, navigate } from 'gatsby';
 
 import React, { Component, RefObject } from 'react';
@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Alert } from '@freecodecamp/ui';
+import { Container, Col, Alert, Row } from '@freecodecamp/ui';
 import { micromark } from 'micromark';
 
 // Local Utilities

client/src/templates/Challenges/odin/show.tsx

@@ -1,5 +1,5 @@
 // Package Utilities
-import { Button, Row } from '@freecodecamp/react-bootstrap';
+import { Button } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 // Local Utilities
 import Loader from '../../../components/helpers/loader';

client/src/templates/Challenges/projects/backend/show.tsx

@@ -2,7 +2,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 
-import { Row } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -10,7 +9,7 @@ import { withTranslation } from 'react-i18next';
 import type { TFunction } from 'i18next';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 import Spacer from '../../../../components/helpers/spacer';
 import LearnLayout from '../../../../components/layouts/learn';

client/src/templates/Challenges/projects/frontend/show.tsx

@@ -1,4 +1,3 @@
-import { Row } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -8,7 +7,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 import Spacer from '../../../../components/helpers/spacer';
 import LearnLayout from '../../../../components/layouts/learn';

client/src/templates/Challenges/video/show.tsx

@@ -1,5 +1,5 @@
 // Package Utilities
-import { Button, Row } from '@freecodecamp/react-bootstrap';
+import { Button } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 // Local Utilities
 import Loader from '../../../components/helpers/loader';

client/src/templates/Introduction/super-block-intro.tsx

@@ -1,4 +1,3 @@
-import { Row } from '@freecodecamp/react-bootstrap';
 import { WindowLocation } from '@reach/router';
 import { graphql } from 'gatsby';
 import { uniq } from 'lodash-es';
@@ -9,7 +8,7 @@ import { connect } from 'react-redux';
 import { configureAnchors } from 'react-scrollable-anchor';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col } from '@freecodecamp/ui';
+import { Container, Col, Row } from '@freecodecamp/ui';
 
 import { SuperBlocks } from '../../../../shared/config/superblocks';
 import { getSuperBlockTitleForMap } from '../../utils/superblock-map-titles';

tools/ui-components/src/index.ts

@@ -10,3 +10,4 @@ export { MenuItem } from './drop-down/menu-item';
 export { Container } from './container';
 export { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
 export { Col } from './col';
+export { Row } from './row';