rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add description to cookie banner preference panel

Browse Source 
Adds a short description under the preference panel title:
"Choose which cookie categories to allow. Necessary cookies are
always active as they are needed for the site to work."

Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-04-22 18:05:34 +04:00
parent 50c0be6652
commit 4678c58ab0
2 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/cookie-banner/src/themed-banner/styles.ts
View File

@@ -164,11 +164,19 @@ export const THEMED_STYLES = `
} }
.panel-header { .panel-header {
padding: 24px;
border-bottom: 1px solid var(--_border);
}
.panel-header .description {
margin: 0;
}
.panel-header-title {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 24px; margin: 0 0 8px;
border-bottom: 1px solid var(--_border);
} }
.panel-close { .panel-close {

13
packages/cookie-banner/src/themed-banner/themed-banner.ts
View File

@@ -67,12 +67,15 @@ export class ProboThemedBanner extends HTMLElement {
<probo-preference-panel> <probo-preference-panel>
<div class="floating" data-position="${this.esc(position)}"> <div class="floating" data-position="${this.esc(position)}">
<div class="card" role="dialog" aria-modal="true" aria-labelledby="probo-panel-title"> <div class="card" role="dialog" aria-modal="true" aria-labelledby="probo-panel-title" aria-describedby="probo-panel-desc">
<div class="panel-header"> <div class="panel-header">
<p class="title" id="probo-panel-title" style="margin:0">Preferences</p> <div class="panel-header-title">
<button class="panel-close" data-action="back" aria-label="Close"> <p class="title" id="probo-panel-title" style="margin:0">Customise Preferences</p>
${CLOSE_ICON} <button class="panel-close" data-action="back" aria-label="Close">
</button> ${CLOSE_ICON}
</button>
</div>
<p class="description" id="probo-panel-desc">Choose which cookie categories to allow. Necessary cookies are always active as they are needed for the site to work.</p>
</div> </div>
<probo-category-list> <probo-category-list>
<template> <template>