Skip to content

Commit 0898d18

Browse files
Ibrahim-HaizelIbrahim-Haizel
committed
add initial patterns route landing page and remove unsed side nav links for now
1 parent bce5994 commit 0898d18

File tree

2 files changed

+208
-14
lines changed

2 files changed

+208
-14
lines changed

‎src/routes/+layout.svelte‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -64,13 +64,13 @@
6464
: [];
6565
6666
const patternNavGroups: SideNavGroup[] = [
67-
{
68-
title: "Common patterns",
69-
items: [
70-
{ text: "Forms", href: "/patterns/forms" },
71-
{ text: "Tables", href: "/patterns/tables" },
72-
],
73-
},
67+
// {
68+
// title: "Common patterns",
69+
// items: [
70+
// { text: "Forms", href: "/patterns/forms" },
71+
// { text: "Tables", href: "/patterns/tables" },
72+
// ],
73+
// },
7474
];
7575
7676
const communityNavGroups: SideNavGroup[] = [
@@ -153,13 +153,13 @@
153153
title: "Patterns",
154154
href: "/patterns",
155155
items: [
156-
{
157-
title: "Common patterns",
158-
items: [
159-
{ text: "Forms", href: "/patterns/forms" },
160-
{ text: "Tables", href: "/patterns/tables" },
161-
],
162-
},
156+
// {
157+
// title: "Common patterns",
158+
// items: [
159+
// { text: "Forms", href: "/patterns/forms" },
160+
// { text: "Tables", href: "/patterns/tables" },
161+
// ],
162+
// },
163163
],
164164
},
165165
{

‎src/routes/patterns/+page.svelte‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<script lang="ts">
2+
import InsetText from "$lib/components/content/InsetText.svelte";
3+
import WarningText from "$lib/components/content/WarningText.svelte";
4+
import RelatedContent from "$lib/components/ui/RelatedContent.svelte";
5+
import type { RelatedContentSection } from "$lib/components/ui/RelatedContent.svelte";
6+
7+
const relatedSections: RelatedContentSection[] = [
8+
{
9+
type: "main",
10+
id: "related-main",
11+
title: "Related",
12+
links: [
13+
{ title: "Browse components", base_path: "/components/" },
14+
{ title: "Get started guide", base_path: "/get-started/" },
15+
{
16+
title: "About & Benefits",
17+
base_path: "/get-started/about-benefits/",
18+
},
19+
{ title: "Community", base_path: "/community/" },
20+
],
21+
},
22+
];
23+
</script>
24+
25+
{#snippet WarningSnippet()}
26+
Patterns are currently in development. Check back soon for proven design
27+
solutions for government services.
28+
{/snippet}
29+
30+
{#snippet ContributingSnippet()}
31+
<strong>Contributing patterns:</strong> If you have a proven design solution
32+
that could benefit other government teams, we'd love to hear from you.
33+
<a href="/community/" class="govuk-link">Get in touch with our community</a>
34+
to discuss contributing patterns to the library.
35+
{/snippet}
36+
37+
<svelte:head>
38+
<title>Patterns - MHCLG Svelte Component Library</title>
39+
<meta
40+
name="description"
41+
content="Design patterns for common user tasks in government services using the MHCLG Svelte Component Library."
42+
/>
43+
</svelte:head>
44+
45+
<div class="govuk-grid-row">
46+
<div class="govuk-grid-column-two-thirds">
47+
<h1 class="govuk-heading-xl">Patterns</h1>
48+
49+
<p class="govuk-body-l">
50+
Patterns are reusable solutions to common design problems. They show how
51+
to combine components and content to help users complete specific tasks.
52+
</p>
53+
54+
<WarningText text={WarningSnippet} />
55+
56+
<h2 class="govuk-heading-l">What are patterns?</h2>
57+
58+
<p class="govuk-body">
59+
Patterns are best practice design solutions for specific user-focused
60+
tasks and page types. They combine components, content design principles,
61+
and interaction design to solve common problems in government services.
62+
</p>
63+
64+
<p class="govuk-body">
65+
Unlike components, which are individual interface elements, patterns show
66+
how to use multiple components together to create complete user journeys
67+
and workflows.
68+
</p>
69+
70+
<h3 class="govuk-heading-m">Examples of patterns include:</h3>
71+
72+
<ul class="govuk-list govuk-list--bullet">
73+
<li>
74+
<strong>Form validation</strong> - How to validate user input and show error
75+
messages effectively
76+
</li>
77+
<li>
78+
<strong>Data entry workflows</strong> - Step-by-step processes for collecting
79+
complex information
80+
</li>
81+
<li>
82+
<strong>Dashboard layouts</strong> - Organising data visualisations and key
83+
metrics for different user needs
84+
</li>
85+
<li>
86+
<strong>Search and filtering</strong> - Helping users find and refine large
87+
datasets
88+
</li>
89+
<li>
90+
<strong>Progressive disclosure</strong> - Revealing information gradually
91+
to avoid overwhelming users
92+
</li>
93+
<li>
94+
<strong>Data export and sharing</strong> - Allowing users to download or
95+
share data in various formats
96+
</li>
97+
</ul>
98+
99+
<h2 class="govuk-heading-l govuk-!-margin-top-8">
100+
Patterns for data-rich services
101+
</h2>
102+
103+
<p class="govuk-body">
104+
The MHCLG Svelte Component Library will focus on patterns specifically
105+
designed for data-rich government services, including:
106+
</p>
107+
108+
<div class="govuk-grid-row govuk-!-margin-top-6">
109+
<div class="govuk-grid-column-one-half">
110+
<h3 class="govuk-heading-s">Data presentation patterns</h3>
111+
<ul class="govuk-list govuk-list--bullet">
112+
<li>Interactive charts and graphs</li>
113+
<li>Data tables with sorting and filtering</li>
114+
<li>Geographic data visualisation</li>
115+
<li>Real-time data displays</li>
116+
</ul>
117+
</div>
118+
<div class="govuk-grid-column-one-half">
119+
<h3 class="govuk-heading-s">User interaction patterns</h3>
120+
<ul class="govuk-list govuk-list--bullet">
121+
<li>Data exploration workflows</li>
122+
<li>Comparison and analysis tools</li>
123+
<li>Collaborative data annotation</li>
124+
<li>Accessibility-first data interaction</li>
125+
</ul>
126+
</div>
127+
</div>
128+
129+
<InsetText content={ContributingSnippet} />
130+
131+
<h2 class="govuk-heading-l govuk-!-margin-top-8">
132+
Using patterns with components
133+
</h2>
134+
135+
<p class="govuk-body">
136+
Patterns will show you how to combine our
137+
<a href="/components/" class="govuk-link">Svelte components</a> with content
138+
design and interaction principles to create effective user experiences.
139+
</p>
140+
141+
<p class="govuk-body">Each pattern will include:</p>
142+
143+
<ul class="govuk-list govuk-list--bullet">
144+
<li>
145+
<strong>When to use</strong> - Specific scenarios where the pattern is most
146+
effective
147+
</li>
148+
<li>
149+
<strong>How it works</strong> - Step-by-step guidance on implementing the
150+
pattern
151+
</li>
152+
<li>
153+
<strong>Code examples</strong> - Working Svelte implementations you can copy
154+
and adapt
155+
</li>
156+
<li>
157+
<strong>Accessibility considerations</strong> - How to ensure the pattern
158+
works for all users
159+
</li>
160+
<li>
161+
<strong>Research insights</strong> - Evidence and user research supporting
162+
the pattern
163+
</li>
164+
</ul>
165+
166+
<h2 class="govuk-heading-l govuk-!-margin-top-8">Stay updated</h2>
167+
168+
<p class="govuk-body">
169+
We're actively developing patterns based on real user needs and research
170+
from across government. Follow our progress and get notified when new
171+
patterns are released:
172+
</p>
173+
174+
<ul class="govuk-list govuk-list--bullet">
175+
<li>
176+
<a href="/community/" class="govuk-link">Join our community</a> for updates
177+
and discussions
178+
</li>
179+
<li>
180+
Check our
181+
<a href="/community/roadmap/" class="govuk-link">roadmap</a> to see what
182+
patterns are planned
183+
</li>
184+
<li>
185+
Follow our
186+
<a href="/" class="govuk-link">What's new</a> section for the latest releases
187+
</li>
188+
</ul>
189+
</div>
190+
191+
<div class="govuk-grid-column-one-third">
192+
<RelatedContent sections={relatedSections} />
193+
</div>
194+
</div>

0 commit comments

Comments
 (0)