refactor: replace Col component (#51322)

Co-authored-by: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com>

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

@@ -1,4 +1,4 @@
-import { Row, Col, Image, Button } from '@freecodecamp/react-bootstrap';
+import { Row, Image, Button } from '@freecodecamp/react-bootstrap';
 import { isEmpty } from 'lodash-es';
 import { QRCodeSVG } from 'qrcode.react';
 import React, { useEffect, useState } from 'react';
@@ -6,8 +6,8 @@ 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 } from '@freecodecamp/ui';
 import envData from '../../config/env.json';
 import { getLangCode } from '../../../shared/config/i18n';
 import FreeCodeCampLogo from '../assets/icons/freecodecamp';

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

@@ -4,7 +4,6 @@ import {
   FormGroup,
   ControlLabel,
   Button,
-  Col,
   Row
 } from '@freecodecamp/react-bootstrap';
 import React, { useState } from 'react';
@@ -13,6 +12,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 Login from '../components/Header/components/login';
 

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

@@ -1,5 +1,11 @@
-import { Modal, Button, Col, Row } from '@freecodecamp/react-bootstrap';
-import { Tabs, TabsContent, TabsTrigger, TabsList } from '@freecodecamp/ui';
+import { Modal, Button, Row } from '@freecodecamp/react-bootstrap';
+import {
+  Tabs,
+  TabsContent,
+  TabsTrigger,
+  TabsList,
+  Col
+} from '@freecodecamp/ui';
 import { WindowLocation } from '@reach/router';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -8,6 +14,7 @@ import { useFeature } from '@growthbook/growthbook-react';
 import { goToAnchor } from 'react-scrollable-anchor';
 import { bindActionCreators, Dispatch, AnyAction } from 'redux';
 import { createSelector } from 'reselect';
+
 import {
   PaymentContext,
   subscriptionAmounts,

client/src/components/Donation/donation.css

@@ -92,6 +92,15 @@
   margin-bottom: 0;
 }
 
+@media (min-width: 1200px) {
+  /*
+  This style allows multi columns in the same row.
+  It will become a functionality once the Grid system is updated. 
+  */
+  .donate-page-wrapper > div > div {
+    float: left;
+  }
+}
 .donate-input-element {
   padding-top: 8px;
 }

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

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

client/src/components/landing/components/certifications.tsx

@@ -1,5 +1,6 @@
-import { Col } from '@freecodecamp/react-bootstrap';
 import React from 'react';
+import { Col } from '@freecodecamp/ui';
+
 import Map from '../../Map/index';
 import { Spacer } from '../../helpers';
 import BigCallToAction from './big-call-to-action';

client/src/components/landing/components/faq.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Col } from '@freecodecamp/react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import { Col } from '@freecodecamp/ui';
+
 import { Spacer } from '../../helpers';
 import BigCallToAction from './big-call-to-action';
 

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

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

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

@@ -159,9 +159,3 @@ sections that need to stay left to right
 [dir='rtl'] [name='payment-method'] {
   font-family: 'NotoSansArabic';
 }
-
-@media (min-width: 980px) {
-  [dir='rtl'] .donate-page-wrapper > .row {
-    display: flex;
-  }
-}

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

@@ -18,7 +18,7 @@ exports[`<Profile/> renders correctly 1`] = `
         class="row"
       >
         <div
-          class="avatar-camper col-xs-12"
+          class="avatar-camper min-h-[1px] px-[15px] w-full         "
         >
           <div
             class="avatar-container default-border"
@@ -169,7 +169,7 @@ exports[`<Profile/> renders correctly 1`] = `
         class="row"
       >
         <div
-          class="text-center social-media-icons col-sm-6 col-sm-offset-3"
+          class="text-center social-media-icons min-h-[1px] px-[15px]  md:w-1/2    md:ml-[25%]    "
         >
           <a
             aria-label="aria.linkedin"

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

@@ -5,7 +5,7 @@ exports[`should check certification page consistency 1`] = `
   className="row"
 >
   <div
-    className="col-sm-8 col-sm-offset-2 col-xs-12"
+    className=" min-h-[1px] px-[15px] w-full md:w-2/3    md:ml-[16.6%]    "
   >
     <h2
       className="text-center"

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

@@ -4,14 +4,15 @@ import {
   faHeart
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Col, Row } from '@freecodecamp/react-bootstrap';
+import { Row } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
-import type { User } from '../../../redux/prop-types';
+import { Col } from '@freecodecamp/ui';
 
 import envData from '../../../../config/env.json';
 import { getLangCode } from '../../../../../shared/config/i18n';
+import type { User } from '../../../redux/prop-types';
 import { AvatarRenderer } from '../../helpers';
 import Link from '../../helpers/link';
 import SocialIcons from './social-icons';

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

@@ -1,8 +1,9 @@
-import { Col, Row } from '@freecodecamp/react-bootstrap';
+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 { certificatesByNameSelector } from '../../../redux/selectors';
 import type { CurrentCert } from '../../../redux/prop-types';

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

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

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

@@ -11,7 +11,7 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
     className="row"
   >
     <div
-      className="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12"
+      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%]   "
     >
       <div
         className="spacer"
@@ -127,7 +127,7 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
     data-cy="email-sign-up"
   >
     <div
-      className="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12"
+      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%]   "
     >
       <div
         className="spacer"
@@ -150,7 +150,7 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
       />
     </div>
     <div
-      className="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12"
+      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%]   "
     >
       <div
         className="spacer"
@@ -178,7 +178,7 @@ exports[`<EmailSignUp /> Non-Authenticated user "not accepted terms and conditio
       />
     </div>
     <div
-      className="col-xs-12"
+      className=" min-h-[1px] px-[15px] w-full         "
     >
       <div
         className="spacer"

client/src/pages/blocked.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Col, Row } from '@freecodecamp/react-bootstrap';
+import { Row } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';
+import { Container, Col } from '@freecodecamp/ui';
 
-import { Container } from '@freecodecamp/ui';
 import { Spacer } from '../components/helpers';
 
 function BlockedPage(): JSX.Element {

client/src/pages/donate.tsx

@@ -1,5 +1,5 @@
-import { Row, Col } from '@freecodecamp/react-bootstrap';
-import { Alert, Container } from '@freecodecamp/ui';
+import { Row } from '@freecodecamp/react-bootstrap';
+import { Alert, Container, Col } from '@freecodecamp/ui';
 import type { TFunction } from 'i18next';
 import React, { useEffect } from 'react';
 import Helmet from 'react-helmet';
@@ -68,57 +68,47 @@ function DonatePage({
     <>
       <Helmet title={`${t('donate.title')} | freeCodeCamp.org`} />
       <Container className='donate-page-wrapper'>
-        <Spacer size='large'>
-          <Row>
-            <>
-              <Col lg={6} lgOffset={0} md={8} mdOffset={2} sm={10} smOffset={1}>
-                <Row>
-                  <Col className={'text-center'} xs={12}>
-                    {isDonating ? (
-                      <h2 data-playwright-test-label='main-head'>
-                        {t('donate.thank-you')}
-                      </h2>
-                    ) : (
-                      <h2 data-playwright-test-label='main-head'>
-                        {t('donate.help-more')}
-                      </h2>
-                    )}
-                    <Spacer size='medium' />
-                  </Col>
-                </Row>
-                {isDonating ? (
-                  <Alert variant='info' data-cy='donate-alert'>
-                    <p data-cy='donate.thank-you'>{t('donate.thank-you')}</p>
-                    <br />
-                    <DonationOptionsAlertText />
-                  </Alert>
-                ) : null}
-                <DonationText />
-                <Row>
-                  <Col xs={12}>
-                    <DonateForm paymentContext={PaymentContext.DonatePage} />
-                  </Col>
-                </Row>
-                <Spacer size='exLarge' />
-                <Row className='donate-support' id='FAQ'>
-                  <Col className={'text-center'} xs={12}>
-                    <hr />
-                    <h2 data-playwright-test-label='faq-head'>
-                      {t('donate.faq')}
-                    </h2>
-                    <Spacer size='medium' />
-                  </Col>
-                  <Col xs={12}>
-                    <DonationFaqText />
-                  </Col>
-                </Row>
-              </Col>
-              <Col lg={6}>
-                <CampersImage pageName='donate' />
-              </Col>
-            </>
-          </Row>
-        </Spacer>
+        <Spacer size='medium' />
+        <Row>
+          <Col lg={6} lgOffset={0} md={8} mdOffset={2} sm={10} smOffset={1}>
+            {isDonating ? (
+              <h2
+                data-playwright-test-label='main-head'
+                className='text-center'
+              >
+                {t('donate.thank-you')}
+              </h2>
+            ) : (
+              <h2
+                data-playwright-test-label='main-head'
+                className='text-center'
+              >
+                {t('donate.help-more')}
+              </h2>
+            )}
+            <Spacer size='medium' />
+            {isDonating ? (
+              <Alert variant='info' data-cy='donate-alert'>
+                <p data-cy='donate.thank-you'>{t('donate.thank-you')}</p>
+                <br />
+                <DonationOptionsAlertText />
+              </Alert>
+            ) : null}
+            <DonationText />
+            <DonateForm paymentContext={PaymentContext.DonatePage} />
+            <Spacer size='exLarge' />
+            <hr />
+            <h2 data-playwright-test-label='faq-head' className={'text-center'}>
+              {t('donate.faq')}
+            </h2>
+            <Spacer size='medium' />
+            <DonationFaqText />
+          </Col>
+          <Col lg={6}>
+            <CampersImage pageName='donate' />
+          </Col>
+        </Row>
+        <Spacer size='medium' />
       </Container>
     </>
   );

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

@@ -1,4 +1,4 @@
-import { Row, Col, Button } from '@freecodecamp/react-bootstrap';
+import { Row, 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,8 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import type { Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container } from '@freecodecamp/ui';
+import { Container, Col } from '@freecodecamp/ui';
+
 import IntroDescription from '../components/Intro/components/intro-description';
 import createRedirect from '../components/create-redirect';
 import { Spacer, Loader, Link } from '../components/helpers';

client/src/pages/learn.tsx

@@ -1,4 +1,4 @@
-import { Row, Col } from '@freecodecamp/react-bootstrap';
+import { Row } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React from 'react';
 import Helmet from 'react-helmet';
@@ -6,8 +6,8 @@ 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 } from '@freecodecamp/ui';
 import Intro from '../components/Intro';
 import Map from '../components/Map';
 import { Spacer } from '../components/helpers';

client/src/pages/update-email.tsx

@@ -3,7 +3,6 @@ import {
   FormControl,
   ControlLabel,
   Row,
-  Col,
   Button
 } from '@freecodecamp/react-bootstrap';
 import { Link } from 'gatsby';
@@ -17,8 +16,8 @@ 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 } from '@freecodecamp/ui';
 import { Spacer } from '../components/helpers';
 import './update-email.css';
 import { userSelector } from '../redux/selectors';

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

@@ -1,5 +1,5 @@
 // Package Utilities
-import { Col, Row, Button } from '@freecodecamp/react-bootstrap';
+import { Row, 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, Alert } from '@freecodecamp/ui';
+import { Container, Col, 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 { Col, Row, Button } from '@freecodecamp/react-bootstrap';
+import { Row, 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, Alert } from '@freecodecamp/ui';
+import { Container, Col, Alert } from '@freecodecamp/ui';
 import { micromark } from 'micromark';
 
 // Local Utilities

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

@@ -1,5 +1,5 @@
 // Package Utilities
-import { Button, Col, Row } from '@freecodecamp/react-bootstrap';
+import { Button, Row } 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 } from '@freecodecamp/ui';
+import { Container, Col } from '@freecodecamp/ui';
 
 // Local Utilities
 import Loader from '../../../components/helpers/loader';

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

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 
-import { Col, Row } from '@freecodecamp/react-bootstrap';
+import { Row } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -10,8 +10,8 @@ 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 } from '@freecodecamp/ui';
 import Spacer from '../../../../components/helpers/spacer';
 import LearnLayout from '../../../../components/layouts/learn';
 import { isSignedInSelector } from '../../../../redux/selectors';

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

@@ -1,4 +1,4 @@
-import { Col, Row } from '@freecodecamp/react-bootstrap';
+import { Row } from '@freecodecamp/react-bootstrap';
 import { graphql } from 'gatsby';
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
@@ -8,8 +8,8 @@ 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 } from '@freecodecamp/ui';
 import Spacer from '../../../../components/helpers/spacer';
 import LearnLayout from '../../../../components/layouts/learn';
 import { ChallengeNode, ChallengeMeta } from '../../../../redux/prop-types';

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

@@ -1,5 +1,5 @@
 // Package Utilities
-import { Button, Col, Row } from '@freecodecamp/react-bootstrap';
+import { Button, Row } 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 } from '@freecodecamp/ui';
+import { Container, Col } from '@freecodecamp/ui';
 
 // Local Utilities
 import Loader from '../../../components/helpers/loader';

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

@@ -1,4 +1,4 @@
-import { Row, Col } from '@freecodecamp/react-bootstrap';
+import { Row } from '@freecodecamp/react-bootstrap';
 import { WindowLocation } from '@reach/router';
 import { graphql } from 'gatsby';
 import { uniq } from 'lodash-es';
@@ -9,8 +9,8 @@ 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 } from '@freecodecamp/ui';
 import { SuperBlocks } from '../../../../shared/config/superblocks';
 import { getSuperBlockTitleForMap } from '../../utils/superblock-map-titles';
 import DonateModal from '../../components/Donation/donation-modal';

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

@@ -11,7 +11,13 @@ describe('<Col />', () => {
       </Col>
     );
     expect(screen.getByText('Learn to code for free.')).toHaveClass(
-      'relative min-h-[1px] px-[15px] float-left sm:w-full md:w-[83.3%] min-[1200px]:w-[66.6%] md:ml-[8.3%] min-[1200px]:ml-[16.6%]'
+      'min-h-[1px] px-[15px] w-full md:w-5/6 min-[1200px]:w-2/3 md:ml-[8.3%] min-[1200px]:ml-[16.6%]'
+    );
+  });
+  it('should have lgOffSet 0 when it is passed to the component', () => {
+    render(<Col lgOffset={0}>Learn to code for free.</Col>);
+    expect(screen.getByText('Learn to code for free.')).toHaveClass(
+      'min-h-[1px] px-[15px] min-[1200px]:ml-0'
     );
   });
   it('should add className to it', () => {
@@ -19,7 +25,7 @@ describe('<Col />', () => {
       <Col className='certificate-outer-wrapper'>Learn to code for free.</Col>
     );
     expect(screen.getByText('Learn to code for free.')).toHaveClass(
-      'relative min-h-[1px] px-[15px] float-left certificate-outer-wrapper'
+      'min-h-[1px] px-[15px] certificate-outer-wrapper'
     );
   });
 });

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

@@ -3,10 +3,10 @@ import React from 'react';
 import { ColProps } from './types';
 
 const ExtraSmallClasses = {
-  6: 'sm:w-[50%]',
-  8: 'sm:w-[66.6%]',
-  10: 'sm:w-[83.3%]',
-  12: 'sm:w-full'
+  6: 'w-1/2',
+  8: 'w-2/3',
+  10: 'w-5/6',
+  12: 'w-full'
 };
 
 const ExtraSmallOffsetClasses = {
@@ -16,13 +16,13 @@ const ExtraSmallOffsetClasses = {
 };
 
 const SmallClasses = {
-  12: 'md:w-full',
-  10: 'md:w-[83.3%]',
-  8: 'md:w-[66.6%]',
-  6: 'md:w-[50%]',
-  5: 'md:w-[41.6%]',
-  4: 'md:w-[33.3%]',
-  2: 'md:w-[16.6%]'
+  2: 'md:w-1/6',
+  4: 'md:w-1/3',
+  5: 'md:w-5/12',
+  8: 'md:w-2/3',
+  6: 'md:w-1/2',
+  10: 'md:w-5/6',
+  12: 'md:w-full'
 };
 
 const SmallOffsetClasses = {
@@ -33,10 +33,10 @@ const SmallOffsetClasses = {
 };
 
 const MediumClasses = {
-  10: 'min-[992px]:w-[83.3%]',
-  8: 'min-[992px]:w-[66.6%]',
-  6: 'min-[992px]:w-[50%]',
-  4: 'min-[992px]:w-[33.3%]'
+  4: 'min-[992px]:w-1/3',
+  6: 'min-[992px]:w-1/2',
+  8: 'min-[992px]:w-2/3',
+  10: 'min-[992px]:w-5/6'
 };
 
 const MediumOffsetClasses = {
@@ -47,9 +47,9 @@ const MediumOffsetClasses = {
 };
 
 const LargeClasses = {
-  10: 'min-[1200px]:w-[83.3%]',
-  8: 'min-[1200px]:w-[66.6%]',
-  6: 'min-[1200px]:w-[50%]'
+  6: 'min-[1200px]:w-1/2',
+  8: 'min-[1200px]:w-2/3',
+  10: 'min-[1200px]:w-5/6'
 };
 
 const LargeOffsetClasses = {
@@ -80,13 +80,15 @@ export const Col = ({
   const mdClass = md ? MediumClasses[md] : '';
   const mdOffsetClass = mdOffset ? MediumOffsetClasses[mdOffset] : '';
   const lgClass = lg ? LargeClasses[lg] : '';
-  const lgOffsetClass = lgOffset ? LargeOffsetClasses[lgOffset] : '';
+  // we have to check condiontionally against undefined, because "lgOffset ?" clear the 0 value, maybe refactor LargeOffsetClasses[0] later to something isn't 0.
+  const lgOffsetClass =
+    lgOffset !== undefined ? LargeOffsetClasses[lgOffset] : '';
 
   return (
     <div
-      className={`relative min-h-[1px] px-[15px] float-left ${
+      className={`${
         className ?? ''
-      } ${xsClass} ${smClass} ${mdClass} ${lgClass} ${xsOffsetClass} ${smOffsetClass} ${mdOffsetClass} ${lgOffsetClass} ${smPushClass}`}
+      } min-h-[1px] px-[15px] ${xsClass} ${smClass} ${mdClass} ${lgClass} ${xsOffsetClass} ${smOffsetClass} ${mdOffsetClass} ${lgOffsetClass} ${smPushClass} `}
       {...props}
     >
       {children}

tools/ui-components/src/index.ts

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