Styles/to scss TwoColumn

CHANGELOG.md

@@ -177,7 +177,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - Wrapper
   - Decorations/Bracket
   - Decorations/Stick
-
+  - TwoColumn
 - Extracted :root from themes.scss to globals.scss
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
 - Updated SearchInput width to 100% for better styling

components/blog/BlogPostContainer/index.js

@@ -26,9 +26,11 @@ const BlogPostContainer = ({ post, relatedPosts, latestPosts }) => {
           content='Feel free to contact us.'
           image='/images/svg/square-brackets.svg'
           altTag=''
-          $contentType='questions'
+          color='var(--color-primary-content)'
+          bgColor='var(--color-white)'
           link='/contact'
           linkText='Contact us'
+          customInnerClass='questions'
           customBtnClass='inverted-grey'
         />
       </RevealContentContainer>

components/containers/TwoColumn/TwoColumn.module.scss

@@ -0,0 +1,234 @@
+@use '@/styles/index' as *;
+
+.wrapper {
+  align-self: stretch;
+
+  .inner {
+    padding: 5rem 0;
+    margin: 0 auto;
+    width: 90%;
+
+    .inner__content {
+      margin-bottom: 5rem;
+      @include desktop {
+        flex-basis: 50%;
+        margin-bottom: 0;
+      }
+
+      .title {
+        font-weight: bold;
+        margin: 0;
+      }
+
+      .content {
+        display: flex;
+        align-items: center;
+        margin: 3.875rem 0 2.5rem;
+        max-width: 39rem;
+        font-size: 1.5rem;
+        line-height: 1.938rem;
+
+        a {
+          text-decoration: underline;
+          text-underline-offset: 2px;
+
+          &:hover {
+            opacity: 0.6;
+            text-decoration: none;
+          }
+        }
+      }
+    }
+
+    .inner__image {
+      width: 100%;
+      height: 34rem;
+      position: relative;
+
+      @include desktop {
+        width: 25rem;
+      }
+
+      .img {
+        border-radius: 0.25rem;
+        object-fit: cover;
+      }
+    }
+
+    // Homepage
+
+    &.get-involved {
+      @include desktop-breakpoint-minus {
+        padding-bottom: 0;
+      }
+    }
+
+    &.non-profit {
+      @include desktop-breakpoint-minus {
+        .inner__content {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    // end Homepage
+
+    //About page
+
+    &.our-process,
+    &.peer-reviews,
+    &.get-started,
+    &.our-purpose,
+    &.our-background,
+    &.version-control,
+    &.questions {
+      .inner__image {
+        height: 10rem;
+        .img {
+          object-fit: contain;
+        }
+      }
+    }
+
+    &.our-background {
+      .inner__image {
+        @include desktop {
+          height: 15rem;
+        }
+      }
+    }
+
+    &.our-process {
+      .inner__image {
+        @include desktop {
+          height: 12rem;
+        }
+      }
+    }
+
+    &.our-purpose {
+      .inner__image {
+        @include desktop {
+          height: 18rem;
+        }
+      }
+    }
+
+    &.get-started {
+      .inner__image {
+        @include desktop {
+          height: 20rem;
+        }
+      }
+    }
+
+    &.questions {
+      .inner__image {
+        @include desktop {
+          height: 13rem;
+        }
+      }
+    }
+
+    &.wanna-learn-more {
+      .content {
+        margin: 0;
+      }
+
+      .inner__image {
+        height: 10rem;
+
+        @include desktop {
+          height: 15rem;
+        }
+
+        .img {
+          object-fit: contain;
+        }
+      }
+    }
+
+    &.two-text-columns {
+      justify-content: space-evenly;
+
+      .inner {
+        padding: 0;
+        margin: 0;
+      }
+
+      .inner__content {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      h2 {
+        font-size: 2rem;
+        line-height: 2.5rem;
+      }
+
+      .inner {
+        margin: 0;
+        padding: 0;
+      }
+
+      .inner__content {
+        flex-basis: unset;
+
+        @include desktop {
+          width: 25rem;
+        }
+      }
+    }
+
+    &.second-text-column {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .inner {
+        height: 100%;
+      }
+
+      .inner__content {
+        height: 100%;
+        display: flex;
+        position: relative;
+
+        @include desktop {
+          a {
+            position: absolute;
+            bottom: 0;
+          }
+        }
+      }
+    }
+
+    &.get-started,
+    &.questions {
+      padding-bottom: 0;
+      .inner__image {
+        display: none;
+
+        @include desktop {
+          display: unset;
+        }
+      }
+
+      @include desktop {
+        padding-bottom: 5rem;
+      }
+    }
+
+    // end About page
+
+    @include desktop {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+  }
+}

components/containers/TwoColumn/index.js

@@ -1,58 +1,61 @@
-import ButtonLink from '@/components/buttons/ButtonLink';
-import TwoColumnStyles from './styles';
-
-export default function TwoColumn({
-  image,
-  altTag,
-  title,
-  content,
-  rowOrder,
-  color,
-  bgColor,
-  link,
-  customBtnClass,
-  linkText = 'Learn more',
-  secondTextColumn,
-  openNewTab,
-  $contentType,
-}) {
-  //Set Styles based on content type
-  const S = TwoColumnStyles[$contentType]
-    ? TwoColumnStyles[$contentType]
-    : TwoColumnStyles.base;
-
-  // Add rowOrder="row-reverse" prop to the component to reverse its order on desktop
-  return (
-    <S.TwoColumnWrapper $color={color} $bgColor={bgColor}>
-      <S.InnerContainer
-        $contentType={$contentType}
-        styles={{ flexDirection: rowOrder }}
-      >
-        <S.InnerContent $contentType={$contentType}>
-          {title && <S.Title $color={color}>{title}</S.Title>}
-          <S.Content $contentType={$contentType}>{content}</S.Content>
-          {link && (
-            <ButtonLink
-              link={link}
-              customBtnClass={customBtnClass}
-              openNewTab={openNewTab}
-            >
-              {linkText}
-            </ButtonLink>
-          )}
-        </S.InnerContent>
-        {secondTextColumn && secondTextColumn}
-        {!secondTextColumn && image && (
-          <S.InnerImageWrapper $contentType={$contentType}>
-            <S.InnerImage
-              $contentType={$contentType}
-              src={image}
-              alt={altTag}
-              fill
-            />
-          </S.InnerImageWrapper>
-        )}
-      </S.InnerContainer>
-    </S.TwoColumnWrapper>
-  );
-}
+import styles from './TwoColumn.module.scss';
+import ButtonLink from '@/components/buttons/ButtonLink';
+import Container from '@/components/containers/Container';
+import Image from 'next/image';
+import { combineClasses } from '@/utils/classnames';
+
+export default function TwoColumn({
+  image,
+  altTag,
+  title,
+  content,
+  rowOrder,
+  color,
+  bgColor,
+  link,
+  customBtnClass,
+  customInnerClass,
+  linkText = 'Learn more',
+  secondTextColumn,
+  openNewTab,
+}) {
+  const styleProps = {
+    wrapper: {
+      color,
+      backgroundColor: bgColor,
+    },
+    container: {
+      flexDirection: rowOrder,
+    },
+  };
+
+  // Add rowOrder="row-reverse" prop to the component to reverse its order on desktop
+  return (
+    <section className={styles.wrapper} style={styleProps.wrapper}>
+      <Container
+        className={combineClasses(styles.inner, customInnerClass, styles)}
+        styles={styleProps.container}
+      >
+        <div className={styles.inner__content}>
+          {title && <h2 className={styles.title}>{title}</h2>}
+          <div className={styles.content}>{content}</div>
+          {link && (
+            <ButtonLink
+              link={link}
+              customBtnClass={customBtnClass}
+              openNewTab={openNewTab}
+            >
+              {linkText}
+            </ButtonLink>
+          )}
+        </div>
+        {secondTextColumn ||
+          (image && (
+            <div className={styles.inner__image}>
+              <Image className={styles.img} src={image} alt={altTag} fill />
+            </div>
+          ))}
+      </Container>
+    </section>
+  );
+}