Skip to content

Commit

Permalink
fix: Center grid items in SectionGroup (+ add attrs passing)
Browse files Browse the repository at this point in the history
  • Loading branch information
natemate90 committed Jan 9, 2025
1 parent 900064c commit 7af0cb1
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export default async function SolutionsDetailPage({
)}
{project_cards && (
<Container background="stone" padding="both-padding">
<SectionGroup title={project_cards.title}>
<SectionGroup title={project_cards.title} data-testid="project-cards">
<Text
markdown={project_cards.description}
className="text-center"
Expand Down Expand Up @@ -102,7 +102,7 @@ export default async function SolutionsDetailPage({
background={kpis.section_props.background}
padding={kpis.section_props.padding}
>
<SectionGroup title={kpis.title}>
<SectionGroup title={kpis.title} data-testid="kpis" align={"center"}>
<CardGroup>
{kpis.cards.map((item: any, i: number) => {
return (
Expand Down Expand Up @@ -133,6 +133,7 @@ export default async function SolutionsDetailPage({
<SectionGroup
title={start_your_journey.section_group_with_external_link.title}
align={"center"}
data-testid="start-your-journey"
>
<ButtonGroup
align={"center"}
Expand Down
7 changes: 4 additions & 3 deletions nextjs/src/components/sections/section-group.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const sectionGroupStyles = cva(["grid gap-12 lg:gap-16"], {
variants: {
align: {
start: "",
center: "justify-start lg:justify-center",
center: "justify-start lg:justify-center justify-items-center",
},
hasDividers: {
true: "section-group-dividers",
Expand Down Expand Up @@ -44,9 +44,10 @@ const SectionGroup: React.FC<SectionGroupProps> = ({
align,
hasDividers,
columns,
...attrs
}) => {
return (
<div className={sectionGroupStyles({ align })}>
<div className={sectionGroupStyles({ align })} data-component="section-group" {...attrs}>
{title && <Title align="center" boldness="light" markdown={title} />}
{text && (
<div
Expand All @@ -60,7 +61,7 @@ const SectionGroup: React.FC<SectionGroupProps> = ({
<Text markdown={text} className="text-justify lg:text-center" />
</div>
)}
<div className={sectionGroupStyles({ hasDividers, columns })}>
<div className={sectionGroupStyles({ hasDividers, columns, align })}>
{children}
</div>
</div>
Expand Down

0 comments on commit 7af0cb1

Please sign in to comment.