Skip to content

Commit 921ded3

Browse files
Ibrahim-HaizelIbrahim-Haizel
committed
re draft page content and reorganise links
1 parent 3180046 commit 921ded3

File tree

3 files changed

+115
-134
lines changed

3 files changed

+115
-134
lines changed

‎src/routes/+layout.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@
111111
href: "/community/team-approach",
112112
},
113113
{ text: "Projects", href: "/community/projects" },
114-
{ text: "Community principles", href: "/community/principles" },
114+
// { text: "Community principles", href: "/community/principles" },
115115
{
116116
text: "Blog posts, videos and podcasts",
117117
href: "/community/blog-posts",

‎src/routes/community/develop-component/+page.svelte‎

Lines changed: 110 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@
1717
<h1 class="govuk-heading-xl">Develop a component or pattern</h1>
1818

1919
<p class="govuk-body-l">
20-
The Design System team focuses on developing prioritised components and
21-
patterns with the community. However, anyone can choose to work on
22-
something from our community backlog or GitHub discussions.
20+
Our team focuses on developing prioritised components and patterns with
21+
the community. However, anyone can choose to work on something from our
22+
community backlog or GitHub discussions.
2323
</p>
2424

2525
<WarningText
@@ -81,9 +81,9 @@
8181
<strong>Join the GitHub discussion</strong> for the component you want to
8282
work on
8383
</li>
84-
<li>
84+
<!-- <li>
8585
<strong>Mention your interest</strong> in our community channels
86-
</li>
86+
</li> -->
8787
</ul>
8888

8989
<h3 class="govuk-heading-m">What happens in the kick-off meeting</h3>
@@ -93,10 +93,10 @@
9393
</p>
9494

9595
<ul class="govuk-list govuk-list--bullet">
96-
<li>
96+
<!-- <li>
9797
<strong>Agree the scope</strong> - Define exactly what the component should
9898
and shouldn't do
99-
</li>
99+
</li> -->
100100
<li>
101101
<strong>Plan the work</strong> - Identify what design, content, code, and
102102
guidance needs developing
@@ -113,8 +113,7 @@
113113
from our team
114114
</li>
115115
<li>
116-
<strong>Set up regular check-ins</strong> - Schedule weekly catch-ups to
117-
track progress
116+
<strong>Set up regular check-ins</strong> - Schedule catch-ups to track progress
118117
</li>
119118
</ul>
120119

@@ -128,35 +127,12 @@
128127
</h2>
129128

130129
<p class="govuk-body">
131-
While developing your component or pattern, follow these principles to
132-
ensure it meets our Stage 2 criteria:
130+
During development, your component or pattern must meet our
131+
<a href="/community/contribution-criteria" class="govuk-link"
132+
>Stage 2 contribution criteria</a
133+
>. Focus on these key development principles:
133134
</p>
134135

135-
<h3 class="govuk-heading-m">Start with what exists</h3>
136-
137-
<p class="govuk-body">
138-
Before creating something new, research existing solutions:
139-
</p>
140-
141-
<ul class="govuk-list govuk-list--bullet">
142-
<li>
143-
<strong>Government examples</strong> - Ask the government design community
144-
for examples of similar components
145-
</li>
146-
<li>
147-
<strong>Other design systems</strong> - Look at how GOV.UK, NHS, MoJ, and
148-
other systems solve similar problems
149-
</li>
150-
<li>
151-
<strong>Commercial solutions</strong> - Research how other organisations
152-
approach the same user needs
153-
</li>
154-
<li>
155-
<strong>Academic research</strong> - Look for relevant UX research and best
156-
practices
157-
</li>
158-
</ul>
159-
160136
<h3 class="govuk-heading-m">Work with the community</h3>
161137

162138
<p class="govuk-body">
@@ -182,75 +158,130 @@
182158
</li>
183159
</ul>
184160

185-
<h3 class="govuk-heading-m">Follow our technical standards</h3>
161+
<h3 class="govuk-heading-m">Follow our standards</h3>
186162

187163
<p class="govuk-body">
188-
All components must meet our technical requirements:
164+
Your contribution must meet all requirements outlined in our contribution
165+
criteria:
189166
</p>
190167

191168
<ul class="govuk-list govuk-list--bullet">
192169
<li>
193-
<strong>Svelte 5 with runes</strong> - Use modern Svelte syntax and best
194-
practices
170+
<strong
171+
><a
172+
href="/community/contribution-criteria#technical-requirements"
173+
class="govuk-link">Technical requirements</a
174+
></strong
175+
> - Svelte 5, TypeScript, accessibility, performance, and testing standards
195176
</li>
196177
<li>
197-
<strong>TypeScript</strong> - Include comprehensive type definitions and
198-
JSDoc documentation
178+
<strong
179+
><a
180+
href="/community/contribution-criteria#data-visualisation-criteria"
181+
class="govuk-link">Data visualisation criteria</a
182+
></strong
183+
> - Additional requirements for charts, maps, and data components
199184
</li>
200185
<li>
201-
<strong>Accessibility first</strong> - Build with WCAG 2.1 AA compliance
202-
from the start
203-
</li>
204-
<li>
205-
<strong>Progressive enhancement</strong> - Ensure components work without
206-
JavaScript
207-
</li>
208-
<li>
209-
<strong>Performance optimised</strong> - Minimise bundle size and runtime
210-
overhead
211-
</li>
212-
<li>
213-
<strong>Testing</strong> - Include unit tests and accessibility tests
186+
<strong>Stage 2 essential criteria</strong> - Usable, Accessible, Consistent,
187+
and Versatile requirements
214188
</li>
215189
</ul>
216190

217-
<h3 class="govuk-heading-m">Test for accessibility and usability</h3>
191+
<InsetText>
192+
{#snippet content()}
193+
<strong>Detailed requirements:</strong> For comprehensive technical
194+
standards, testing requirements, and quality criteria, see our
195+
<a href="/community/contribution-criteria" class="govuk-link"
196+
>contribution criteria page</a
197+
>.
198+
{/snippet}
199+
</InsetText>
200+
201+
<h3 class="govuk-heading-m">Types of development work</h3>
218202

219203
<p class="govuk-body">
220-
Accessibility and usability testing are essential for meeting our Stage 2
221-
criteria:
204+
Depending on the component or pattern, development work might include:
222205
</p>
223206

224207
<div class="govuk-grid-row govuk-!-margin-top-4">
225208
<div class="govuk-grid-column-one-half">
226-
<h4 class="govuk-heading-s">Accessibility testing</h4>
209+
<h3 class="govuk-heading-s">Design work</h3>
210+
<ul class="govuk-list govuk-list--bullet">
211+
<li>User journey mapping</li>
212+
<li>Wireframing and prototyping</li>
213+
<li>Visual design and styling</li>
214+
<li>Interaction design</li>
215+
<li>Responsive design considerations</li>
216+
</ul>
217+
</div>
218+
<div class="govuk-grid-column-one-half">
219+
<h3 class="govuk-heading-s">Development work</h3>
227220
<ul class="govuk-list govuk-list--bullet">
228-
<li>Automated testing with tools like axe-core</li>
229-
<li>Manual testing with screen readers</li>
230-
<li>Keyboard navigation testing</li>
231-
<li>Colour contrast verification</li>
232-
<li>Testing with real assistive technology users</li>
221+
<li>Svelte component implementation</li>
222+
<li>TypeScript type definitions</li>
223+
<li>CSS styling and theming</li>
224+
<li>Unit and integration testing</li>
225+
<li>Performance optimisation</li>
233226
</ul>
234227
</div>
228+
</div>
229+
230+
<div class="govuk-grid-row">
235231
<div class="govuk-grid-column-one-half">
236-
<h4 class="govuk-heading-s">Usability testing</h4>
232+
<h3 class="govuk-heading-s">Research work</h3>
237233
<ul class="govuk-list govuk-list--bullet">
238-
<li>Testing with representative users</li>
239-
<li>Testing in realistic service contexts</li>
240-
<li>Cross-browser and device testing</li>
241-
<li>Performance testing with real data</li>
242-
<li>Edge case and error state testing</li>
234+
<li>User needs validation</li>
235+
<li>Usability testing</li>
236+
<li>Accessibility testing</li>
237+
<li>Cross-service validation</li>
238+
<li>Performance testing</li>
239+
</ul>
240+
</div>
241+
<div class="govuk-grid-column-one-half">
242+
<h3 class="govuk-heading-s">Documentation work</h3>
243+
<ul class="govuk-list govuk-list--bullet">
244+
<li>Usage guidance and examples</li>
245+
<li>API documentation</li>
246+
<li>Accessibility guidance</li>
247+
<li>Implementation notes</li>
248+
<li>Research findings summary</li>
243249
</ul>
244250
</div>
245251
</div>
246252

253+
<h3 class="govuk-heading-m">Development approach</h3>
254+
255+
<p class="govuk-body">We recommend an iterative approach to development:</p>
256+
257+
<ol class="govuk-list govuk-list--number">
258+
<li>
259+
<strong>Start with research</strong> - Look at existing solutions
260+
</li>
261+
<li>
262+
<strong>Create early prototypes</strong> - Build basic functionality to test
263+
concepts
264+
</li>
265+
<li>
266+
<strong>Test early and often</strong> - Get feedback from users and the community
267+
</li>
268+
<li>
269+
<strong>Iterate based on feedback</strong> - Refine your approach based on
270+
testing results
271+
</li>
272+
<li>
273+
<strong>Polish for production</strong> - Ensure all criteria are met before
274+
final review
275+
</li>
276+
</ol>
277+
247278
<h2 class="govuk-heading-l">Step 3: Regular check-ins and support</h2>
248279

249280
<p class="govuk-body">
250281
Throughout development, our team provides ongoing support:
251282
</p>
252283

253-
<h3 class="govuk-heading-m">Weekly catch-ups</h3>
284+
<h3 class="govuk-heading-m">Catch-ups</h3>
254285
<ul class="govuk-list govuk-list--bullet">
255286
<li>Review progress against milestones</li>
256287
<li>Discuss any blockers or challenges</li>
@@ -285,22 +316,22 @@
285316
<strong>Comprehensive documentation</strong> - Usage guidance, API documentation,
286317
and examples
287318
</li>
288-
<li>
319+
<!-- <li>
289320
<strong>User research evidence</strong> - Testing results showing the component
290321
works for users
291-
</li>
292-
<li>
322+
</li> -->
323+
<!-- <li>
293324
<strong>Accessibility testing results</strong> - Evidence of WCAG 2.1 AA
294325
compliance
295-
</li>
296-
<li>
326+
</li> -->
327+
<!-- <li>
297328
<strong>Cross-browser testing</strong> - Verification that it works across
298329
supported browsers and devices
299-
</li>
300-
<li>
330+
</li> -->
331+
<!-- <li>
301332
<strong>Performance benchmarks</strong> - Evidence that it meets our performance
302333
standards
303-
</li>
334+
</li> -->
304335
</ul>
305336

306337
<h3 class="govuk-heading-m">The review process</h3>
@@ -346,57 +377,7 @@
346377
{/snippet}
347378
</InsetText>
348379

349-
<h2 class="govuk-heading-l">Types of development work</h2>
350-
351-
<p class="govuk-body">
352-
Depending on the component or pattern, development work might include:
353-
</p>
354-
355-
<div class="govuk-grid-row govuk-!-margin-top-4">
356-
<div class="govuk-grid-column-one-half">
357-
<h3 class="govuk-heading-s">Design work</h3>
358-
<ul class="govuk-list govuk-list--bullet">
359-
<li>User journey mapping</li>
360-
<li>Wireframing and prototyping</li>
361-
<li>Visual design and styling</li>
362-
<li>Interaction design</li>
363-
<li>Responsive design considerations</li>
364-
</ul>
365-
</div>
366-
<div class="govuk-grid-column-one-half">
367-
<h3 class="govuk-heading-s">Development work</h3>
368-
<ul class="govuk-list govuk-list--bullet">
369-
<li>Svelte component implementation</li>
370-
<li>TypeScript type definitions</li>
371-
<li>CSS styling and theming</li>
372-
<li>Unit and integration testing</li>
373-
<li>Performance optimisation</li>
374-
</ul>
375-
</div>
376-
</div>
377380

378-
<div class="govuk-grid-row">
379-
<div class="govuk-grid-column-one-half">
380-
<h3 class="govuk-heading-s">Research work</h3>
381-
<ul class="govuk-list govuk-list--bullet">
382-
<li>User needs validation</li>
383-
<li>Usability testing</li>
384-
<li>Accessibility testing</li>
385-
<li>Cross-service validation</li>
386-
<li>Performance testing</li>
387-
</ul>
388-
</div>
389-
<div class="govuk-grid-column-one-half">
390-
<h3 class="govuk-heading-s">Documentation work</h3>
391-
<ul class="govuk-list govuk-list--bullet">
392-
<li>Usage guidance and examples</li>
393-
<li>API documentation</li>
394-
<li>Accessibility guidance</li>
395-
<li>Implementation notes</li>
396-
<li>Research findings summary</li>
397-
</ul>
398-
</div>
399-
</div>
400381

401382
<h2 class="govuk-heading-l">Get help and support</h2>
402383

‎src/routes/community/propose-component/+page.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@
118118
<h3 class="govuk-heading-m">What you don't need at this stage</h3>
119119
<p class="govuk-body">At the proposal stage, you don't need to provide:</p>
120120
<ul class="govuk-list govuk-list--bullet">
121-
<li>Detailed designs or prototypes</li>
121+
<li>Extensive designs or prototypes</li>
122122
<li>Working code implementations</li>
123123
<li>Comprehensive accessibility testing</li>
124124
<li>Full user research studies</li>
@@ -207,7 +207,7 @@
207207

208208
<InsetText>
209209
{#snippet content()}
210-
<strong>Annual prioritisation:</strong> Each year, our community prioritises
210+
<strong>Prioritisation:</strong> We and our community prioritises
211211
which components and patterns to work on. If your proposal isn't immediately
212212
prioritised, you can choose to develop it yourself or leave it for others
213213
to work on.
@@ -296,10 +296,10 @@
296296
<strong>Join community discussions</strong> - Connect with other government
297297
designers and developers
298298
</li>
299-
<li>
299+
<!-- <li>
300300
<strong>Attend our workshops</strong> - Join our regular community sessions
301301
for guidance and feedback
302-
</li>
302+
</li> -->
303303
</ul>
304304

305305
<p class="govuk-body">

0 commit comments

Comments
 (0)