-
-
- <>
-
-
-
- {isDonating ? (
-
- {t('donate.thank-you')}
-
- ) : (
-
- {t('donate.help-more')}
-
- )}
-
-
-
- {isDonating ? (
-
- {t('donate.thank-you')}
-
-
-
- ) : null}
-
-
-
-
-
-
-
-
-
-
-
- {t('donate.faq')}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ {isDonating ? (
+
+ {t('donate.thank-you')}
+
+ ) : (
+
+ {t('donate.help-more')}
+
+ )}
+
+ {isDonating ? (
+
+ {t('donate.thank-you')}
+
+
+
+ ) : null}
+
+
+
+
+
+ {t('donate.faq')}
+
+
+
+
+
+
+
+
+
);
diff --git a/client/src/pages/email-sign-up.tsx b/client/src/pages/email-sign-up.tsx
index 7a22fbf3418..cfb5d9c0ba4 100644
--- a/client/src/pages/email-sign-up.tsx
+++ b/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';
diff --git a/client/src/pages/learn.tsx b/client/src/pages/learn.tsx
index b00690ae90f..ade46ff8d8b 100644
--- a/client/src/pages/learn.tsx
+++ b/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';
diff --git a/client/src/pages/update-email.tsx b/client/src/pages/update-email.tsx
index 077a6143b13..dd2912e55db 100644
--- a/client/src/pages/update-email.tsx
+++ b/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';
diff --git a/client/src/templates/Challenges/codeally/show.tsx b/client/src/templates/Challenges/codeally/show.tsx
index a8e493f9bad..020e1f5c7f8 100644
--- a/client/src/templates/Challenges/codeally/show.tsx
+++ b/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';
diff --git a/client/src/templates/Challenges/exam/show.tsx b/client/src/templates/Challenges/exam/show.tsx
index df3ab1ea7ed..740b5a233f9 100644
--- a/client/src/templates/Challenges/exam/show.tsx
+++ b/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
diff --git a/client/src/templates/Challenges/odin/show.tsx b/client/src/templates/Challenges/odin/show.tsx
index 29380b4312e..1084aba620c 100644
--- a/client/src/templates/Challenges/odin/show.tsx
+++ b/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';
diff --git a/client/src/templates/Challenges/projects/backend/show.tsx b/client/src/templates/Challenges/projects/backend/show.tsx
index 43833e55da6..9d98ed22f12 100644
--- a/client/src/templates/Challenges/projects/backend/show.tsx
+++ b/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';
diff --git a/client/src/templates/Challenges/projects/frontend/show.tsx b/client/src/templates/Challenges/projects/frontend/show.tsx
index 2f12cbc12aa..7ad7e566eaa 100644
--- a/client/src/templates/Challenges/projects/frontend/show.tsx
+++ b/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';
diff --git a/client/src/templates/Challenges/video/show.tsx b/client/src/templates/Challenges/video/show.tsx
index d274410e68e..8a696479b16 100644
--- a/client/src/templates/Challenges/video/show.tsx
+++ b/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';
diff --git a/client/src/templates/Introduction/super-block-intro.tsx b/client/src/templates/Introduction/super-block-intro.tsx
index 0f273d06dd0..9dbacdf45f9 100644
--- a/client/src/templates/Introduction/super-block-intro.tsx
+++ b/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';
diff --git a/tools/ui-components/src/col/col.test.tsx b/tools/ui-components/src/col/col.test.tsx
index c023a118635..526da0387f7 100644
--- a/tools/ui-components/src/col/col.test.tsx
+++ b/tools/ui-components/src/col/col.test.tsx
@@ -11,7 +11,13 @@ describe('
', () => {
);
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(
Learn to code for free.);
+ 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('
', () => {
Learn to code for free.
);
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'
);
});
});
diff --git a/tools/ui-components/src/col/col.tsx b/tools/ui-components/src/col/col.tsx
index 40b5588be0f..68654318cb5 100644
--- a/tools/ui-components/src/col/col.tsx
+++ b/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 (
{children}
diff --git a/tools/ui-components/src/index.ts b/tools/ui-components/src/index.ts
index eced7d488e2..c21c5330911 100644
--- a/tools/ui-components/src/index.ts
+++ b/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';