Skip to content

Commit 5d03e48

Browse files
oluwatobissoluwatobiss
authored
Merge branch 'main' into refactor/to-scss-snippets-title
2 parents 1ab017d + 00115fa commit 5d03e48

15 files changed

Lines changed: 399 additions & 512 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
177177
- Container
178178
- Wrapper
179179
- Title
180-
- Extracted :root from themes.scss to globals.scss
180+
- Decorations/Bracket
181+
- Decorations/Stick
182+
- TwoColumn
183+
- Extracted :root from themes.scss to globals.scss
181184
- Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
182185
- Updated SearchInput width to 100% for better styling
183186
- Updated the prop name to propStyles in Container component to fix the name conflict that introduced a styling bug

‎components/blog/BlogPostContainer/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,11 @@ const BlogPostContainer = ({ post, relatedPosts, latestPosts }) => {
2626
content='Feel free to contact us.'
2727
image='/images/svg/square-brackets.svg'
2828
altTag=''
29-
$contentType='questions'
29+
color='var(--color-primary-content)'
30+
bgColor='var(--color-white)'
3031
link='/contact'
3132
linkText='Contact us'
33+
customInnerClass='questions'
3234
customBtnClass='inverted-grey'
3335
/>
3436
</RevealContentContainer>

‎components/containers/TwoColumn/TwoColumn.module.scss‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
@use '@/styles/index' as *;
2+
3+
.wrapper {
4+
align-self: stretch;
5+
6+
.inner {
7+
padding: 5rem 0;
8+
margin: 0 auto;
9+
width: 90%;
10+
11+
.inner__content {
12+
margin-bottom: 5rem;
13+
@include desktop {
14+
flex-basis: 50%;
15+
margin-bottom: 0;
16+
}
17+
18+
.title {
19+
font-weight: bold;
20+
margin: 0;
21+
}
22+
23+
.content {
24+
display: flex;
25+
align-items: center;
26+
margin: 3.875rem 0 2.5rem;
27+
max-width: 39rem;
28+
font-size: 1.5rem;
29+
line-height: 1.938rem;
30+
31+
a {
32+
text-decoration: underline;
33+
text-underline-offset: 2px;
34+
35+
&:hover {
36+
opacity: 0.6;
37+
text-decoration: none;
38+
}
39+
}
40+
}
41+
}
42+
43+
.inner__image {
44+
width: 100%;
45+
height: 34rem;
46+
position: relative;
47+
48+
@include desktop {
49+
width: 25rem;
50+
}
51+
52+
.img {
53+
border-radius: 0.25rem;
54+
object-fit: cover;
55+
}
56+
}
57+
58+
// Homepage
59+
60+
&.get-involved {
61+
@include desktop-breakpoint-minus {
62+
padding-bottom: 0;
63+
}
64+
}
65+
66+
&.non-profit {
67+
@include desktop-breakpoint-minus {
68+
.inner__content {
69+
margin-bottom: 0;
70+
}
71+
}
72+
}
73+
74+
// end Homepage
75+
76+
//About page
77+
78+
&.our-process,
79+
&.peer-reviews,
80+
&.get-started,
81+
&.our-purpose,
82+
&.our-background,
83+
&.version-control,
84+
&.questions {
85+
.inner__image {
86+
height: 10rem;
87+
.img {
88+
object-fit: contain;
89+
}
90+
}
91+
}
92+
93+
&.our-background {
94+
.inner__image {
95+
@include desktop {
96+
height: 15rem;
97+
}
98+
}
99+
}
100+
101+
&.our-process {
102+
.inner__image {
103+
@include desktop {
104+
height: 12rem;
105+
}
106+
}
107+
}
108+
109+
&.our-purpose {
110+
.inner__image {
111+
@include desktop {
112+
height: 18rem;
113+
}
114+
}
115+
}
116+
117+
&.get-started {
118+
.inner__image {
119+
@include desktop {
120+
height: 20rem;
121+
}
122+
}
123+
}
124+
125+
&.questions {
126+
.inner__image {
127+
@include desktop {
128+
height: 13rem;
129+
}
130+
}
131+
}
132+
133+
&.wanna-learn-more {
134+
.content {
135+
margin: 0;
136+
}
137+
138+
.inner__image {
139+
height: 10rem;
140+
141+
@include desktop {
142+
height: 15rem;
143+
}
144+
145+
.img {
146+
object-fit: contain;
147+
}
148+
}
149+
}
150+
151+
&.two-text-columns {
152+
justify-content: space-evenly;
153+
154+
.inner {
155+
padding: 0;
156+
margin: 0;
157+
}
158+
159+
.inner__content {
160+
display: flex;
161+
flex-direction: column;
162+
align-items: flex-start;
163+
}
164+
165+
h2 {
166+
font-size: 2rem;
167+
line-height: 2.5rem;
168+
}
169+
170+
.inner {
171+
margin: 0;
172+
padding: 0;
173+
}
174+
175+
.inner__content {
176+
flex-basis: unset;
177+
178+
@include desktop {
179+
width: 25rem;
180+
}
181+
}
182+
}
183+
184+
&.second-text-column {
185+
height: 100%;
186+
width: 100%;
187+
display: flex;
188+
align-items: center;
189+
justify-content: center;
190+
191+
.inner {
192+
height: 100%;
193+
}
194+
195+
.inner__content {
196+
height: 100%;
197+
display: flex;
198+
position: relative;
199+
200+
@include desktop {
201+
a {
202+
position: absolute;
203+
bottom: 0;
204+
}
205+
}
206+
}
207+
}
208+
209+
&.get-started,
210+
&.questions {
211+
padding-bottom: 0;
212+
.inner__image {
213+
display: none;
214+
215+
@include desktop {
216+
display: unset;
217+
}
218+
}
219+
220+
@include desktop {
221+
padding-bottom: 5rem;
222+
}
223+
}
224+
225+
// end About page
226+
227+
@include desktop {
228+
display: flex;
229+
align-items: center;
230+
justify-content: space-between;
231+
flex-wrap: wrap;
232+
}
233+
}
234+
}

‎components/containers/TwoColumn/index.js‎

Lines changed: 61 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,61 @@
1-
import ButtonLink from '@/components/buttons/ButtonLink';
2-
import TwoColumnStyles from './styles';
3-
4-
export default function TwoColumn({
5-
image,
6-
altTag,
7-
title,
8-
content,
9-
rowOrder,
10-
color,
11-
bgColor,
12-
link,
13-
customBtnClass,
14-
linkText = 'Learn more',
15-
secondTextColumn,
16-
openNewTab,
17-
$contentType,
18-
}) {
19-
//Set Styles based on content type
20-
const S = TwoColumnStyles[$contentType]
21-
? TwoColumnStyles[$contentType]
22-
: TwoColumnStyles.base;
23-
24-
// Add rowOrder="row-reverse" prop to the component to reverse its order on desktop
25-
return (
26-
<S.TwoColumnWrapper $color={color} $bgColor={bgColor}>
27-
<S.InnerContainer
28-
$contentType={$contentType}
29-
styles={{ flexDirection: rowOrder }}
30-
>
31-
<S.InnerContent $contentType={$contentType}>
32-
{title && <S.Title $color={color}>{title}</S.Title>}
33-
<S.Content $contentType={$contentType}>{content}</S.Content>
34-
{link && (
35-
<ButtonLink
36-
link={link}
37-
customBtnClass={customBtnClass}
38-
openNewTab={openNewTab}
39-
>
40-
{linkText}
41-
</ButtonLink>
42-
)}
43-
</S.InnerContent>
44-
{secondTextColumn && secondTextColumn}
45-
{!secondTextColumn && image && (
46-
<S.InnerImageWrapper $contentType={$contentType}>
47-
<S.InnerImage
48-
$contentType={$contentType}
49-
src={image}
50-
alt={altTag}
51-
fill
52-
/>
53-
</S.InnerImageWrapper>
54-
)}
55-
</S.InnerContainer>
56-
</S.TwoColumnWrapper>
57-
);
58-
}
1+
import styles from './TwoColumn.module.scss';
2+
import ButtonLink from '@/components/buttons/ButtonLink';
3+
import Container from '@/components/containers/Container';
4+
import Image from 'next/image';
5+
import { combineClasses } from '@/utils/classnames';
6+
7+
export default function TwoColumn({
8+
image,
9+
altTag,
10+
title,
11+
content,
12+
rowOrder,
13+
color,
14+
bgColor,
15+
link,
16+
customBtnClass,
17+
customInnerClass,
18+
linkText = 'Learn more',
19+
secondTextColumn,
20+
openNewTab,
21+
}) {
22+
const styleProps = {
23+
wrapper: {
24+
color,
25+
backgroundColor: bgColor,
26+
},
27+
container: {
28+
flexDirection: rowOrder,
29+
},
30+
};
31+
32+
// Add rowOrder="row-reverse" prop to the component to reverse its order on desktop
33+
return (
34+
<section className={styles.wrapper} style={styleProps.wrapper}>
35+
<Container
36+
className={combineClasses(styles.inner, customInnerClass, styles)}
37+
styles={styleProps.container}
38+
>
39+
<div className={styles.inner__content}>
40+
{title && <h2 className={styles.title}>{title}</h2>}
41+
<div className={styles.content}>{content}</div>
42+
{link && (
43+
<ButtonLink
44+
link={link}
45+
customBtnClass={customBtnClass}
46+
openNewTab={openNewTab}
47+
>
48+
{linkText}
49+
</ButtonLink>
50+
)}
51+
</div>
52+
{secondTextColumn ||
53+
(image && (
54+
<div className={styles.inner__image}>
55+
<Image className={styles.img} src={image} alt={altTag} fill />
56+
</div>
57+
))}
58+
</Container>
59+
</section>
60+
);
61+
}

0 commit comments

Comments
 (0)