Skip to content

Details component addition #581

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.

Sign up for GitHub

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

Draft
savitris wants to merge 9 commits into
base: main
Choose a base branch
from
Draft

Details component addition #581

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
28448ec
feat: side scroll for accordion table added
scar055 Mar 21, 2024
642b9e4
fix: linting
scar055 Mar 21, 2024
e871d78
fix(vth-frontend): POC replace Accordion with Details
savitris Apr 4, 2024
9c0f817
fix(vth-frontend): POC details styling to resemble accordion
savitris Apr 4, 2024
2c8774d
fix(vth-frontend): POC improved details styling to resemble accordion
savitris Apr 4, 2024
8973f14
fix(vth-frontend): POC make details summary easier to test
savitris Apr 4, 2024
8470e9f
chore(vth-frontend): lint fixes
savitris Apr 4, 2024
073ebd2
chore(vth-frontend): lint fixes II
savitris Apr 4, 2024
78f2ecc
chore(vth-frontend): lint fixes III
savitris Apr 4, 2024
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
32 changes: 24 additions & 8 deletions apps/vth-frontend/src/app/[locale]/[navigationPageSlug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,14 +70,30 @@ const NavigationPage = async ({ params: { locale, navigationPageSlug } }: Params
) : null;
case 'ComponentComponentsUtrechtAccordion':
return (
<AccordionProvider
sections={component.item.map(({ id, label, body }: any) => ({
id,
label,
headingLevel: 3,
body: <Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>,
}))}
/>
<div>
<h2>Details/Summary</h2>
<div>
{component.item.map(({ id, label, body }: any) => (
<details key={id} className="utrecht-accordion">
<summary className="utrecht-accordion__section">
<h3 className="utrecht-button utrecht-button--subtle utrecht-accordion__button">{label}</h3>
</summary>
<div className="utrecht-accordion__panel">
<Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>
</div>
</details>
))}
</div>
<h2>Original AccordionProvider</h2>
<AccordionProvider
sections={component.item.map(({ id, label, body }: any) => ({
id,
label,
headingLevel: 3,
body: <Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>,
}))}
/>
</div>
);
default:
return null;
Expand Down
32 changes: 24 additions & 8 deletions apps/vth-frontend/src/app/[locale]/article/[articleSlug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,14 +126,30 @@ const ArticlePage = async ({ params: { locale, articleSlug } }: Params) => {
) : null;
case 'ComponentComponentsUtrechtAccordion':
return (
<AccordionProvider
sections={component.item.map(({ id, label, body }: any) => ({
id,
label,
headingLevel: 3,
body: <Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>,
}))}
/>
<div>
<h2>Details/Summary</h2>
<div>
{component.item.map(({ id, label, body }: any) => (
<details key={id} className="utrecht-accordion">
<summary className="utrecht-accordion__section">
<h3 className="utrecht-button utrecht-button--subtle utrecht-accordion__button">{label}</h3>
</summary>
<div className="utrecht-accordion__panel">
<Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>
</div>
</details>
))}
</div>
<h2>Original AccordionProvider</h2>
<AccordionProvider
sections={component.item.map(({ id, label, body }: any) => ({
id,
label,
headingLevel: 3,
body: <Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>,
}))}
/>
</div>
);
default:
return null;
Expand Down
33 changes: 24 additions & 9 deletions apps/vth-frontend/src/app/[locale]/print/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,15 +180,30 @@ const DynamicContent: React.FC<{
) : null;
case 'ComponentComponentsUtrechtAccordion':
return (
<AccordionProvider
key={index}
sections={component.item?.map(({ id, label, body }: any) => ({
id,
label,
headingLevel: 3,
body: <Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>,
}))}
/>
<div>
<h2>Details/Summary</h2>
<div>
{component.item.map(({ id, label, body }: any) => (
<details key={id} className="utrecht-accordion">
<summary className="utrecht-accordion__section">
<h3 className="utrecht-button utrecht-button--subtle utrecht-accordion__button">{label}</h3>
</summary>
<div className="utrecht-accordion__panel">
<Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>
</div>
</details>
))}
</div>
<h2>Original AccordionProvider</h2>
<AccordionProvider
sections={component.item.map(({ id, label, body }: any) => ({
id,
label,
headingLevel: 3,
body: <Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>,
}))}
/>
</div>
);
default:
return null;
Expand Down
32 changes: 24 additions & 8 deletions apps/vth-frontend/src/app/[locale]/theme/[themeSlug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,14 +107,30 @@ const ThemePage = async ({ params: { locale, themeSlug } }: Params) => {
) : null;
case 'ComponentComponentsUtrechtAccordion':
return (
<AccordionProvider
sections={component.item.map(({ id, label, body }: any) => ({
id,
label,
headingLevel: 3,
body: <Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>,
}))}
/>
<div>
<h2>Details/Summary</h2>
<div>
{component.item.map(({ id, label, body }: any) => (
<details key={id} className="utrecht-accordion">
<summary className="utrecht-accordion__section">
<h3 className="utrecht-button utrecht-button--subtle utrecht-accordion__button">{label}</h3>
</summary>
<div className="utrecht-accordion__panel">
<Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>
</div>
</details>
))}
</div>
<h2>Original AccordionProvider</h2>
<AccordionProvider
sections={component.item.map(({ id, label, body }: any) => ({
id,
label,
headingLevel: 3,
body: <Markdown imageUrl={getImageBaseUrl()}>{body}</Markdown>,
}))}
/>
</div>
);
default:
return null;
Expand Down
66 changes: 66 additions & 0 deletions apps/vth-frontend/src/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,29 @@ a {
margin-inline: 1rem;
}

.utrecht-accordion__panel {
background-attachment: local, local, scroll, scroll;
background-image:
/* Shadows */
linear-gradient(to right, white, white),
linear-gradient(to right, white, white),
/* Shadow covers */ linear-gradient(to right, rgba(0 0 0 / 25%), rgba(255 255 255 / 0%)),
linear-gradient(to left, rgba(0 0 0 / 25%), rgba(255 255 255 / 0%));
background-position:
left center,
right center,
left center,
right center;
background-repeat: no-repeat;
background-size:
/* left */
20px 100%,
/* right */ 20px 100%,
/* left */ 10px 100%,
/* right */ 10px 100%;
overflow: auto;
}

@media print {
.utrecht-accordion__panel {
display: block;
Expand Down Expand Up @@ -173,3 +196,46 @@ a {
--utrecht-navigation-toggle-button-padding-end: 32px;
}
}

/* Experiment */
details summary::-webkit-details-marker,
details summary::marker {
content: "";
display: none;
}

/* stylelint-disable property-disallowed-list */
/* stylelint-disable length-zero-no-unit */
summary h3 {
margin: 0px;
}

summary h3::after {
--utrecht-accordion-button-icon-background-color: #fc0;
--utrecht-accordion-button-icon-size: 24px;

background-color: var(--utrecht-accordion-button-icon-background-color);
background-image: var(
--utrecht-accordion-icon-arrow-down,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M15.866 4.135l-5.32 5.322-5.322-5.322'/%3E%3C/svg%3E")
);
background-position: 50%;
background-repeat: no-repeat;
block-size: var(--utrecht-accordion-button-icon-size);
content: " ";
display: block;
inline-size: var(--utrecht-accordion-button-icon-size);
inset-block-start: 0;
inset-inline-end: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
}

details[open] summary h3::after {
background-image: var(
--utrecht-accordion-icon-arrow-up,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M5.223 9.457l5.32-5.322 5.322 5.322'/%3E%3C/svg%3E")
);
}