Skip to content

Commit 5af2f4c

Browse files
Ibrahim-HaizelIbrahim-Haizel
authored
Merge pull request #74 from communitiesuk/whats-new-component
Whats new component
2 parents 75008ba + 8a7e310 commit 5af2f4c

File tree

5 files changed

+798
-2
lines changed

5 files changed

+798
-2
lines changed

‎src/lib/components/ui/WhatsNew.svelte‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<script lang="ts">
2+
/**
3+
* Represents a single news item in the What's New section
4+
*/
5+
interface NewsItem {
6+
/** The date of the news item (e.g., "June 2025") */
7+
date: string;
8+
/** The main content/description of the news item */
9+
content: string;
10+
/** Optional URL to release notes or more information */
11+
releaseNotesUrl?: string;
12+
/** Optional version number for releases (e.g., "v0.1.16") */
13+
releaseVersion?: string;
14+
/** Optional array of component links to display as a bulleted list */
15+
componentLinks?: Array<{
16+
/** Display text for the link */
17+
text: string;
18+
/** URL/href for the link */
19+
href: string;
20+
}>;
21+
}
22+
23+
/**
24+
* WhatsNew Component
25+
*
26+
* A flexible component for displaying news, updates, and release information.
27+
* Commonly used on homepages or documentation sites to communicate recent changes,
28+
* new features, or important announcements to users.
29+
*
30+
* @example
31+
* ```svelte
32+
* <!-- Basic usage with defaults -->
33+
* <WhatsNew />
34+
*
35+
* <!-- Custom usage -->
36+
* <WhatsNew
37+
* title="Latest Updates"
38+
* titleId="updates"
39+
* componentLinksIntroText="New components available:"
40+
* newsItems={[
41+
* {
42+
* date: "June 2025",
43+
* content: "Released new component library",
44+
* releaseNotesUrl: "https://github.com/example/releases/tag/v1.0.0",
45+
* releaseVersion: "v1.0.0",
46+
* componentLinks: [
47+
* { text: "Button component", href: "/components/button" }
48+
* ]
49+
* }
50+
* ]}
51+
* />
52+
* ```
53+
*/
54+
55+
// Define component props with types and default values
56+
let {
57+
/** The main heading text for the news section */
58+
title = "What's new",
59+
/** The HTML id attribute for the heading element (useful for anchor links) */
60+
titleId = "whats-new",
61+
/**
62+
* Introductory text that appears before component links lists.
63+
* Set to empty string to hide this text entirely.
64+
*/
65+
componentLinksIntroText = "This the first step to refresh the GOV.UK brand. It includes updates to the:",
66+
/**
67+
* Array of news items to display. Each item can include:
68+
* - date: When the news occurred
69+
* - content: Main description
70+
* - releaseNotesUrl & releaseVersion: For linking to release notes
71+
* - componentLinks: For displaying related component links
72+
*/
73+
newsItems = [
74+
{
75+
date: "15 May 2025",
76+
content:
77+
"We released GOV.UK Frontend v5.10.1 with the correct colour for the dot in the refreshed GOV.UK logo, as well as small fixes to the implementation of the brand refresh.",
78+
releaseNotesUrl:
79+
"https://github.com/alphagov/govuk-frontend/releases/tag/v5.10.1",
80+
releaseVersion: "v5.10.1",
81+
},
82+
{
83+
date: "1 May 2025",
84+
content: "We released GOV.UK Frontend v5.10.0.",
85+
releaseNotesUrl:
86+
"https://github.com/alphagov/govuk-frontend/releases/tag/v5.10.0",
87+
releaseVersion: "v5.10.0",
88+
componentLinks: [
89+
{ text: "GOV.UK header component", href: "/components/header/" },
90+
{ text: "GOV.UK footer component", href: "/components/footer/" },
91+
{
92+
text: "Service navigation component",
93+
href: "/components/service-navigation/",
94+
},
95+
{
96+
text: "Cookie banner component",
97+
href: "/components/cookie-banner/",
98+
},
99+
],
100+
},
101+
] as NewsItem[],
102+
} = $props<{
103+
title?: string;
104+
titleId?: string;
105+
componentLinksIntroText?: string;
106+
newsItems?: NewsItem[];
107+
}>();
108+
</script>
109+
110+
<div class="app-whats-new">
111+
<div class="govuk-width-container">
112+
<div class="govuk-main-wrapper govuk-main-wrapper--l">
113+
<div class="govuk-grid-row">
114+
<div class="govuk-grid-column-two-thirds-from-desktop">
115+
<h2 id={titleId} class="govuk-heading-l">{title}</h2>
116+
117+
{#each newsItems as item, index}
118+
<p class="govuk-body">
119+
<strong>{item.date}:</strong>
120+
{item.content}
121+
</p>
122+
123+
{#if item.releaseNotesUrl && item.releaseVersion}
124+
<p class="govuk-body">
125+
Read the <a href={item.releaseNotesUrl} class="govuk-link"
126+
>release notes for {item.releaseVersion}</a
127+
> to see what's changed.
128+
</p>
129+
{/if}
130+
131+
{#if item.componentLinks && item.componentLinks.length > 0}
132+
<p class="govuk-body">
133+
{componentLinksIntroText}
134+
</p>
135+
<ul class="govuk-list govuk-list--bullet">
136+
{#each item.componentLinks as link}
137+
<li>
138+
<a href={link.href} class="govuk-link">{link.text}</a>
139+
</li>
140+
{/each}
141+
</ul>
142+
{/if}
143+
{/each}
144+
</div>
145+
</div>
146+
</div>
147+
</div>
148+
</div>
149+
150+
<style>
151+
.app-whats-new {
152+
border-bottom: 1px solid #b1b4b6;
153+
background-color: #f8f8f8;
154+
}
155+
</style>

‎src/routes/+page.svelte‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import DividerLine from "$lib/package-wrapping/DividerLine.svelte";
33
import Masthead from "$lib/components/ui/Masthead.svelte";
44
import mastheadIllustration from "$lib/assets/images/masthead-illustration.svg";
5+
import WhatsNew from "$lib/components/ui/WhatsNew.svelte";
56
67
// Keep only playground wrappers for the homepage
78
const wrappersPlaygroundsObject = import.meta.glob(
@@ -48,6 +49,25 @@ TODO
4849
imageSrc={mastheadIllustration}
4950
imageAlt="MHCLG Svelte Component Library"
5051
/>
52+
<WhatsNew
53+
title="What's new"
54+
componentLinksIntroText="This initial alpha release includes foundational components for building government services."
55+
newsItems={[
56+
{
57+
date: "June 2025",
58+
content:
59+
"We launched the MHCLG Svelte Component Library alpha version. This library provides Svelte 5 implementations of GOV.UK Design System components, as well as other custom components, specifically tailored for data-rich digital products and services within the Ministry of Housing, Communities and Local Government and beyond.",
60+
releaseNotesUrl:
61+
"https://github.com/communitiesuk/oflog_svelte_component_library/releases/tag/v0.1.16",
62+
releaseVersion: "v0.1.16",
63+
},
64+
{
65+
date: "January 2025",
66+
content:
67+
"Development began on the component library infrastructure, establishing the foundation for reusable Svelte components that maintain GOV.UK Design System compliance while supporting advanced data visualisation needs.",
68+
},
69+
]}
70+
/>
5171

5272
<div class="govuk-width-container govuk-main-wrapper govuk-main-wrapper--l">
5373
<div class="flex flex-col gap-6">
@@ -79,15 +99,15 @@ TODO
7999
<DividerLine margin="1rem 0rem"></DividerLine>
80100
</div>
81101

82-
<div>
102+
<!-- <div>
83103
<h2 class="govuk-heading-l mb-6 mt-10">Playground</h2>
84104
<p class="govuk-body">
85105
The playground is a sandbox space where developers can test code and
86106
practice combining components.
87107
</p>
88108
<p class="govuk-body">All our playground examples are listed below.</p>
89109
</div>
90-
<DividerLine margin="1rem 0rem"></DividerLine>
110+
<DividerLine margin="1rem 0rem"></DividerLine> -->
91111
</div>
92112
</div>
93113
</div>

0 commit comments

Comments
 (0)