Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

isom-1722 - fix infobar margin top #998

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 13 additions & 4 deletions apps/studio/public/assets/css/preview-tw.css
Original file line number Diff line number Diff line change
Expand Up @@ -2180,6 +2180,10 @@ video {
white-space: nowrap;
}

.whitespace-pre-wrap {
white-space: pre-wrap;
}

.text-pretty {
text-wrap: pretty;
}
Expand Down Expand Up @@ -4947,14 +4951,15 @@ video {
gap: 0.75rem;
}

.md\:gap-5 {
gap: 1.25rem;
}

.md\:gap-7 {
gap: 1.75rem;
}

.md\:gap-x-10 {
-moz-column-gap: 2.5rem;
column-gap: 2.5rem;
}

.md\:gap-x-16 {
-moz-column-gap: 4rem;
column-gap: 4rem;
Expand All @@ -4968,6 +4973,10 @@ video {
row-gap: 0.5rem;
}

.md\:gap-y-5 {
row-gap: 1.25rem;
}

.md\:p-16 {
padding: 4rem;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,74 +56,72 @@ const Infobar = ({
const hasSecondaryCTA = !!secondaryButtonLabel && !!secondaryButtonUrl

return (
<section>
<section
className={compoundStyles.outerContainer({ layout: simplifiedLayout })}
>
<div
className={compoundStyles.outerContainer({ layout: simplifiedLayout })}
className={compoundStyles.innerContainer({
layout: simplifiedLayout,
})}
>
<div
className={compoundStyles.innerContainer({
className={compoundStyles.headingContainer({
layout: simplifiedLayout,
})}
>
<h2 className={compoundStyles.title({ layout: simplifiedLayout })}>
{title}
</h2>

{description && (
<p
className={compoundStyles.description({
layout: simplifiedLayout,
})}
>
{description}
</p>
)}
</div>

{(hasPrimaryCTA || hasSecondaryCTA) && (
<div
className={compoundStyles.headingContainer({
className={compoundStyles.buttonContainer({
layout: simplifiedLayout,
})}
>
<h2 className={compoundStyles.title({ layout: simplifiedLayout })}>
{title}
</h2>
{hasPrimaryCTA && (
<LinkButton
href={getReferenceLinkHref(
buttonUrl,
site.siteMap,
site.assetsBaseUrl,
)}
size={simplifiedLayout === "homepage" ? "lg" : "base"}
LinkComponent={LinkComponent}
isWithFocusVisibleHighlight
>
{buttonLabel}
</LinkButton>
)}

{description && (
<p
className={compoundStyles.description({
layout: simplifiedLayout,
})}
{hasSecondaryCTA && (
<LinkButton
href={getReferenceLinkHref(
secondaryButtonUrl,
site.siteMap,
site.assetsBaseUrl,
)}
size={simplifiedLayout === "homepage" ? "lg" : "base"}
variant="outline"
LinkComponent={LinkComponent}
isWithFocusVisibleHighlight
>
{description}
</p>
{secondaryButtonLabel}
</LinkButton>
)}
</div>

{(hasPrimaryCTA || hasSecondaryCTA) && (
<div
className={compoundStyles.buttonContainer({
layout: simplifiedLayout,
})}
>
{hasPrimaryCTA && (
<LinkButton
href={getReferenceLinkHref(
buttonUrl,
site.siteMap,
site.assetsBaseUrl,
)}
size={simplifiedLayout === "homepage" ? "lg" : "base"}
LinkComponent={LinkComponent}
isWithFocusVisibleHighlight
>
{buttonLabel}
</LinkButton>
)}

{hasSecondaryCTA && (
<LinkButton
href={getReferenceLinkHref(
secondaryButtonUrl,
site.siteMap,
site.assetsBaseUrl,
)}
size={simplifiedLayout === "homepage" ? "lg" : "base"}
variant="outline"
LinkComponent={LinkComponent}
isWithFocusVisibleHighlight
>
{secondaryButtonLabel}
</LinkButton>
)}
</div>
)}
</div>
)}
</div>
</section>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2984,3 +2984,143 @@ export const MultipleAccordions: Story = {
],
},
}

export const MultipleInfobars: Story = {
args: {
layout: "content",
site: {
siteName: "Isomer Next",
siteMap: {
id: "1",
title: "Isomer Next",
permalink: "/",
lastModified: "",
layout: "homepage",
summary: "",
children: [
{
id: "2",
title: "Content page",
permalink: "/content",
lastModified: "",
layout: "content",
summary: "",
children: [
{
id: "3",
title: "Irrationality",
permalink: "/parent/rationality",
lastModified: "",
layout: "content",
summary: "",
children: [
{
id: "4",
title: "For Individuals",
permalink: "/parent/rationality/child-page-2",
lastModified: "",
layout: "content",
summary: "",
},
{
id: "5",
title: "Steven Pinker's Rationality",
permalink: "/parent/rationality/child-page-2",
lastModified: "",
layout: "content",
summary: "",
},
],
},
{
id: "6",
title: "Sibling",
permalink: "/parent/sibling",
lastModified: "",
layout: "content",
summary: "",
children: [
{
id: "7",
title: "Child that should not appear",
permalink: "/parent/sibling/child-page-2",
lastModified: "",
layout: "content",
summary: "",
},
],
},
],
},
{
id: "8",
title: "Aunt/Uncle that should not appear",
permalink: "/aunt-uncle",
lastModified: "",
layout: "content",
summary: "",
},
],
},
theme: "isomer-next",
isGovernment: true,
logoUrl: "https://www.isomer.gov.sg/images/isomer-logo.svg",
navBarItems: [],
footerItems: {
privacyStatementLink: "https://www.isomer.gov.sg/privacy",
termsOfUseLink: "https://www.isomer.gov.sg/terms",
siteNavItems: [],
},
lastUpdated: "1 Jan 2021",
search: {
type: "localSearch",
searchUrl: "/search",
},
},
meta: {
description: "A Next.js starter for Isomer",
},
page: {
permalink: "/content",
title: "Content page",
lastModified: "2024-05-02T14:12:57.160Z",
contentPageHeader: {
summary:
"Steven Pinker's exploration of rationality delves into the intricacies of human cognition, shedding light on the mechanisms behind our decision-making processes. Through empirical research and insightful analysis, Pinker illuminates the rationality that underpins human behavior, challenging conventional wisdom and offering new perspectives on the rational mind.",
buttonLabel: "Submit a proposal",
buttonUrl: "/submit-proposal",
},
},
content: [
{
type: "infobar",
title: "First item in the page - should not have a gap above",
description: "About a sentence worth of description here",
},
{
type: "prose",
content: [
{
type: "paragraph",
content: [
{
type: "text",
text: "should have a gap below",
},
],
},
],
},
{
type: "infobar",
title: "This is a place where you can put nice content",
description: "About a sentence worth of description here",
},
{
type: "infobar",
title: "Should have a gap above",
description: "About a sentence worth of description here",
},
],
},
}
Loading