Skip to content

Feat/system banner #475

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

Merged
clukhei merged 32 commits into from
Dec 17, 2025
Merged

Feat/system banner #475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
af1ebdb
feat(SystemBanner): initial html structure and styles
clukhei Oct 27, 2025
ad046bd
chore(SystemBanner): wip content layout
clukhei Oct 28, 2025
e6f15a4
chore(systembanner): wip
clukhei Nov 5, 2025
de5d406
chore(*): wip
clukhei Nov 6, 2025
71f460b
feat(system-banner): implement animation , pagination looping, varian…
clukhei Nov 10, 2025
16094d7
chore(*): rename component files to SystemBanner
clukhei Nov 11, 2025
26da131
feat(SystemBanner): refactor animation
clukhei Nov 11, 2025
0536553
docs(SystemBanner): add basic docs on storybook
clukhei Nov 12, 2025
950f870
test(SystemBanner): add test cases
clukhei Nov 12, 2025
a1e6c56
chore(*): update branch from master
clukhei Nov 12, 2025
09ecac6
chore(*): bring test utils file over to test folder
clukhei Nov 12, 2025
dfcc8f4
docs(SystemBanner): wip
clukhei Nov 12, 2025
bb5f8aa
chore(*): lint fixes
clukhei Nov 12, 2025
4682142
chore(system banner): update layout for desktop view
Nov 21, 2025
64a14bf
feat(SystemBanner): handle mobile layout
clukhei Nov 21, 2025
ea263f0
feat(SystemBanner): show more when line has clamped
clukhei Nov 21, 2025
fea5cd7
feat(SystemBanner): show more to dynamically appear and disappear whe…
clukhei Nov 24, 2025
c00300d
docs(SystemBanner): wip
clukhei Nov 24, 2025
b3e0430
docs(SystemBanner): complete
clukhei Nov 24, 2025
4fc011f
feat(SystemBanner): pause animation on keyboard focus for better acce…
clukhei Nov 24, 2025
bb218e9
feat(SystemBannerItem): give action div a height to ensure bottom hal…
clukhei Nov 24, 2025
8177ed0
feat(SystemBanner): handle when slot action is not filled
clukhei Dec 5, 2025
1fd095d
feat(SystemBannerItem): hasActionSlot prop for ssr support
clukhei Dec 5, 2025
0def408
docs(SystemBanner): jsdocs refining
clukhei Dec 5, 2025
da5e271
docs(SystemBanner): jsdocs refining
clukhei Dec 5, 2025
048ca6b
Merge branch 'master' into feat/system-banner
clukhei Dec 9, 2025
fc27f42
test(SystemBanner): against nuxt ssr
clukhei Dec 12, 2025
fb5ae44
chore(*): lint fix
clukhei Dec 12, 2025
f36791c
feat(SystemBanner): css refinements on the action link positioning
clukhei Dec 16, 2025
a9df76b
Merge branch 'master' into feat/system-banner
clukhei Dec 16, 2025
b6ea565
style(SystemBannerItem): change padding-right to margin-right on mess…
clukhei Dec 17, 2025
58e5013
style(SystemBanner): move margin-right to clamped container and reduc…
clukhei Dec 17, 2025
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
4 changes: 3 additions & 1 deletion cypress/apps/nuxt-app/app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<template>
<div>
<!-- <Masthead></Masthead>
<Mainnav></Mainnav>

<Subnav></Subnav>
<Drawer></Drawer>
<Button></Button>
Expand All @@ -15,6 +15,8 @@
<Select></Select>
<Combobox></Combobox>
<Skeleton></Skeleton>
<!-- <Mainnav></Mainnav> -->
<SystemBanner></SystemBanner>
<!-- <Card></Card>
<Table></Table>
<DescriptionList></DescriptionList> -->
Expand Down
39 changes: 39 additions & 0 deletions cypress/apps/nuxt-app/components/SystemBanner.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<script lang="ts" setup>
import "@govtechsg/sgds-web-component/components/SystemBanner/index.js"
import "@govtechsg/sgds-web-component/components/Link/index.js"
import "@govtechsg/sgds-web-component/components/Button/index.js"
</script>

<template>
<sgds-system-banner show="">
<sgds-system-banner-item>
<sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
<div>
Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
facilisis tellus.
</div>
<sgds-link size="sm" variant="light" slot="action"><a href="#">Action link<sgds-icon name="arrow-right" size="md"></sgds-icon></a></sgds-link>
</sgds-system-banner-item>
<sgds-system-banner-item>
<sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
<div>
Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus
</div>
<sgds-button href="#" slot="action" size="sm" tone="fixed-light" variant="outline">
Action button
<sgds-icon name="arrow-right" slot="rightIcon" size="md"></sgds-icon>
</sgds-button>
</sgds-system-banner-item>
<sgds-system-banner-item>
<sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
<div>
Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus
</div>
<sgds-link size="sm" variant="light" slot="action"><a href="#">Action link<sgds-icon name="arrow-right" size="md"></sgds-icon></a></sgds-link>
</sgds-system-banner-item>
</sgds-system-banner>
</template>
301 changes: 301 additions & 0 deletions playground/SystemBanner.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,301 @@
<script type="module" src="../src/index.ts"></script>
<link href="../src/themes/day.css" rel="stylesheet" type="text/css" />
<link href="../src/themes/night.css" rel="stylesheet" type="text/css" />
<link href="../src/css/sgds.css" rel="stylesheet" type="text/css" />

<h3> long message only</h3>
<sgds-system-banner show>
<sgds-system-banner-item>
<div>
1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus
</div>
</sgds-system-banner-item>
</sgds-system-banner>
<br/>
<h3> long message with close button</h3>
<sgds-system-banner show dismissible>
<sgds-system-banner-item>
<div>
1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus
</div>
</sgds-system-banner-item>
</sgds-system-banner>
<br/>
<h3> long message with close button and icon only</h3>
<sgds-system-banner show dismissible>
<sgds-system-banner-item>
<sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
<div>
1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus
</div>
</sgds-system-banner-item>
</sgds-system-banner>
<br/>
<h3> long message with close button , action link and icon</h3>
<sgds-system-banner show dismissible>
<sgds-system-banner-item>
<sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
<div>
1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus
</div>
<sgds-link size="sm" variant="light" slot="action"
><a href="#">Action link<sgds-icon name="arrow-right" size="md"></sgds-icon></a
></sgds-link>
</sgds-system-banner-item>
</sgds-system-banner>
<br/>
<h3> long message with action link and icon only </h3>
<sgds-system-banner show >
<sgds-system-banner-item>
<sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
<div>
1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus
</div>
<sgds-link size="sm" variant="light" slot="action"
><a href="#">Action link<sgds-icon name="arrow-right" size="md"></sgds-icon></a
></sgds-link>
</sgds-system-banner-item>
</sgds-system-banner>
<br/>
<h3> long message with action link, icon and pagination </h3>
<sgds-system-banner show >
<sgds-system-banner-item>
<sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
<div>
1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus
</div>
<sgds-link size="sm" variant="light" slot="action"
><a href="#">Action link<sgds-icon name="arrow-right" size="md"></sgds-icon></a
></sgds-link>
</sgds-system-banner-item>
<sgds-system-banner-item>
<sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
<div>
1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus
</div>
<sgds-link size="sm" variant="light" slot="action"
><a href="#">Action link<sgds-icon name="arrow-right" size="md"></sgds-icon></a
></sgds-link>
</sgds-system-banner-item>
</sgds-system-banner>
<br/>
<h3> long message with pagination only</h3>
<sgds-system-banner show >
<sgds-system-banner-item>
<div>
1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus
</div>
</sgds-system-banner-item>
<sgds-system-banner-item>
<sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
<div>
1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus
</div>
</sgds-system-banner-item>
</sgds-system-banner>
<br/>
<h3> long message with pagination and close button</h3>
<sgds-system-banner show dismissible>
<sgds-system-banner-item>
<div>
1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus
</div>
</sgds-system-banner-item>
<sgds-system-banner-item>
<sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
<div>
1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus
</div>
</sgds-system-banner-item>
</sgds-system-banner>
<br/>



<h3> short message only</h3>
<sgds-system-banner show>
<sgds-system-banner-item>
<div>
1 Etiam suscipit nisi eget porta cursus.
</div>
</sgds-system-banner-item>
</sgds-system-banner>
<br/>
<h3> short message with close button</h3>
<sgds-system-banner show dismissible>
<sgds-system-banner-item>
<div>
1 Etiam suscipit nisi eget porta cursus
</div>
</sgds-system-banner-item>
</sgds-system-banner>
<br/>
<h3> short message with close button and icon only</h3>
<sgds-system-banner show dismissible>
<sgds-system-banner-item>
<sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
<div>
1 Etiam suscipit nisi eget porta cursus.
</div>
</sgds-system-banner-item>
</sgds-system-banner>
<br/>
<h3> short message with close button , action link and icon</h3>
<sgds-system-banner show dismissible>
<sgds-system-banner-item>
<sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
<div>
1 Etiam suscipit nisi eget porta cursus.
</div>
<sgds-link size="sm" variant="light" slot="action"
><a href="#">Action link<sgds-icon name="arrow-right" size="md"></sgds-icon></a
></sgds-link>
</sgds-system-banner-item>
</sgds-system-banner>
<br/>
<h3> short message with action link and icon only </h3>
<sgds-system-banner show >
<sgds-system-banner-item>
<sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
<div>
1 Etiam suscipit nisi eget porta cursus.
</div>
<sgds-link size="sm" variant="light" slot="action"
><a href="#">Action link<sgds-icon name="arrow-right" size="md"></sgds-icon></a
></sgds-link>
</sgds-system-banner-item>
</sgds-system-banner>
<h3> short message with action link, icon and pagination </h3>
<sgds-system-banner show >
<sgds-system-banner-item>
<sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
<div>
1 Etiam suscipit nisi eget porta cursus.
</div>
<sgds-link size="sm" variant="light" slot="action"
><a href="#">Action link<sgds-icon name="arrow-right" size="md"></sgds-icon></a
></sgds-link>
</sgds-system-banner-item>
<sgds-system-banner-item>
<sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
<div>
1 Etiam suscipit nisi eget porta cursus.
</div>
<sgds-link size="sm" variant="light" slot="action"
><a href="#">Action link<sgds-icon name="arrow-right" size="md"></sgds-icon></a
></sgds-link>
</sgds-system-banner-item>
</sgds-system-banner>
<br/>
<h3> short message with pagination only</h3>
<sgds-system-banner show >
<sgds-system-banner-item>
<div>
1 Etiam suscipit nisi eget porta cursus.
</div>
</sgds-system-banner-item>
<sgds-system-banner-item>
<sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
<div>
1 Etiam suscipit nisi eget porta cursus.
</div>
</sgds-system-banner-item>
</sgds-system-banner>
<br/>
<h3> long message with pagination and close button</h3>
<sgds-system-banner show dismissible>
<sgds-system-banner-item>
<div>
1 Etiam suscipit nisi eget porta cursus.
</div>
</sgds-system-banner-item>
<sgds-system-banner-item>
<sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
<div>
1 Etiam suscipit nisi eget porta cursus.
</div>
</sgds-system-banner-item>
</sgds-system-banner>
<br/>
<h3> short message mix with pagination only</h3>
<sgds-system-banner show >
<sgds-system-banner-item>
<div>
1 Etiam suscipit nisi eget porta cursus.
</div>
</sgds-system-banner-item>
<sgds-system-banner-item>
<sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
<div>
1 Etiam suscipit nisi eget porta cursus.
</div>
</sgds-system-banner-item>
</sgds-system-banner>
<br/>
<h3> mix long and short message with pagination, action link and close button</h3>
<sgds-system-banner show dismissible>
<sgds-system-banner-item>
<div>
1 Etiam suscipit nisi eget porta cursus.
</div>
<sgds-link size="sm" variant="light" slot="action"
><a href="#">Action link<sgds-icon name="arrow-right" size="md"></sgds-icon></a
></sgds-link>
</sgds-system-banner-item>
<sgds-system-banner-item>
<sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
<div>
1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
congue sapien eu, rhoncus
</div>
<sgds-link size="sm" variant="light" slot="action"
><a href="#">Action link<sgds-icon name="arrow-right" size="md"></sgds-icon></a
></sgds-link>
</sgds-system-banner-item>
</sgds-system-banner>
<br/>

<div class="another-container">another container</div>
<script>
const banner = document.querySelector('sgds-system-banner');
banner.addEventListener("sgds-hide", () => {
console.log("Banner is hidden");
const anotherContainer = document.querySelector('.another-container');
anotherContainer.classList.add('no-banner');
})
</script>
2 changes: 1 addition & 1 deletion scripts/generateStories.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ for (const [key, value] of Object.entries(groupedComponents)) {

// Only add in the ArgType table when there is at least one attribute
const ArgsType = value.map(component =>
component.attributes
component.attributes || component.slots || component.events
? `### ${component.tagName}
<ArgTypes of="${component.tagName}"/>\n
`
Expand Down
2 changes: 1 addition & 1 deletion src/base/button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@
height: var(--sgds-dimension-40);
}
:host([size="xs"]) .btn {
font-size: var(--sgds-font-size-1);
font-size: var(--sgds-font-size-0);
line-height: var(--sgds-line-height-16);
padding: var(--sgds-padding-none) var(--sgds-padding-sm);
min-width: var(--sgds-dimension-64);
Expand Down
11 changes: 11 additions & 0 deletions src/components/SystemBanner/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { SgdsSystemBanner } from "./sgds-system-banner";
import SgdsSystemBannerItem from "./sgds-system-banner-item";

customElements.define("sgds-system-banner", SgdsSystemBanner);
customElements.define("sgds-system-banner-item", SgdsSystemBannerItem);

declare global {
interface HTMLElementTagNameMap {
"sgds-system-banner": SgdsSystemBanner;
}
}
Loading