Skip to content

Commit c63e2cf

Browse files
Ibrahim-HaizelIbrahim-Haizel
committed
Add background color prop
Remove redundent classes Add component to hompage and add global style to overide govukwidth container from layout file
1 parent 1839ea5 commit c63e2cf

File tree

4 files changed

+75
-84
lines changed

4 files changed

+75
-84
lines changed

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

Lines changed: 12 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,23 @@
99
buttonHref = "/get-started/",
1010
imageSrc = homepageIllustration,
1111
imageAlt = "",
12+
backgroundColor = "#1d70b8", // GOV.UK blue by default
1213
} = $props<{
1314
title?: string;
1415
description?: string;
1516
buttonText?: string;
1617
buttonHref?: string;
1718
imageSrc?: string;
1819
imageAlt?: string;
20+
backgroundColor?: string;
1921
}>();
2022
</script>
2123

22-
<div class="app-masthead">
23-
<div class="app-width-container">
24+
<div
25+
class="app-masthead"
26+
style="background-color: {backgroundColor}; border-bottom-color: {backgroundColor};"
27+
>
28+
<div class="govuk-width-container">
2429
<div class="govuk-grid-row">
2530
<div class="govuk-grid-column-two-thirds-from-desktop">
2631
<h1 class="govuk-heading-xl app-masthead__title">{@html title}</h1>
@@ -67,12 +72,12 @@
6772
padding-top: 20px;
6873
/* @include govuk-responsive-padding(6, "bottom"); */
6974
padding-bottom: 20px;
70-
/* border-bottom: 1px solid govuk-colour("blue"); */
71-
border-bottom: 1px solid #1d70b8;
75+
/* border-bottom: 1px solid govuk-colour("blue"); - now set via inline style */
76+
border-bottom-width: 1px;
77+
border-bottom-style: solid;
7278
/* color: govuk-colour("white"); */
7379
color: #ffffff;
74-
/* background-color: govuk-colour("blue"); */
75-
background-color: #1d70b8;
80+
/* background-color: govuk-colour("blue"); - now set via inline style */
7681
}
7782
7883
@media (min-width: 40.0625em) {
@@ -127,45 +132,12 @@
127132
}
128133
}
129134
130-
/* GOV.UK Grid System Classes - Scoped to our component with high specificity */
131-
.app-masthead .app-width-container.app-width-container {
132-
max-width: 960px;
133-
margin: 0 auto;
134-
padding: 0 15px;
135-
}
136135
137-
@media (min-width: 40.0625em) {
138-
.app-masthead .app-width-container.app-width-container {
139-
padding: 0 30px;
140-
}
141-
}
142136
143-
.app-masthead .govuk-grid-row.govuk-grid-row {
144-
display: flex;
145-
flex-wrap: wrap;
146-
margin: 0 -15px;
147-
}
148137
149-
.app-masthead
150-
.govuk-grid-column-two-thirds-from-desktop.govuk-grid-column-two-thirds-from-desktop,
151-
.app-masthead
152-
.govuk-grid-column-one-third-from-desktop.govuk-grid-column-one-third-from-desktop {
153-
box-sizing: border-box;
154-
width: 100%;
155-
padding: 0 15px;
156-
}
157138
158-
@media (min-width: 48.0625em) {
159-
.app-masthead
160-
.govuk-grid-column-two-thirds-from-desktop.govuk-grid-column-two-thirds-from-desktop {
161-
width: 66.6666%;
162-
}
163139
164-
.app-masthead
165-
.govuk-grid-column-one-third-from-desktop.govuk-grid-column-one-third-from-desktop {
166-
width: 33.3333%;
167-
}
168-
}
140+
169141
170142
/* GOV.UK Button Styles - Scoped to our component with high specificity */
171143
.app-masthead .govuk-button.govuk-button {

‎src/routes/+layout.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,10 @@
171171
tagText="Alpha"
172172
linkHref="mailto:[email protected]"
173173
/>
174-
<div class="app-pane__body govuk-width-container">
174+
<div
175+
class="app-pane__body"
176+
class:govuk-width-container={currentSection !== "Home"}
177+
>
175178
<div class={currentSection !== "Home" ? "app-split-pane" : ""}>
176179
<!-- Side navigation - only shown if not Home -->
177180
{#if currentSection !== "Home"}

‎src/routes/+page.svelte‎

Lines changed: 47 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -38,56 +38,60 @@ TODO
3838
<>
3939
-->
4040

41-
<Masthead
42-
title="MHCLG Component Library"
43-
description="A comprehensive collection of reusable UI components designed for consistency, accessibility, and ease of use across MHCLG's digital products."
44-
buttonText="Browse Components"
45-
buttonHref="/components"
46-
/>
41+
<div class="homepage-layout">
42+
<Masthead
43+
title="MHCLG Svelte Component Library"
44+
description="Bring your service or page to life with dynamic content, layout, UI, charts, maps and data visualisations. The well tested and trusted GDS components are coded here in Svelte for data rich digital products."
45+
buttonHref="/components"
46+
backgroundColor="#00625E"
47+
/>
4748

48-
<div class="govuk-width-container govuk-main-wrapper govuk-main-wrapper--l">
49-
<div class="flex flex-col gap-6">
50-
<div>
51-
<h1 class="govuk-heading-xl mb-6">Introduction</h1>
52-
<p>
53-
This library has been developed by members of the MHCLG's Digital,
54-
Design and Development team to house components for use in the
55-
organisation's digital products.
56-
</p>
49+
<div class="govuk-width-container govuk-main-wrapper govuk-main-wrapper--l">
50+
<div class="flex flex-col gap-6">
51+
<div>
52+
<!-- <h1 class="govuk-heading-xl mb-6">Introduction</h1>
53+
<p>
54+
This library has been developed by members of the MHCLG's Digital,
55+
Design and Development team to house components for use in the
56+
organisation's digital products.
57+
</p> -->
58+
<!--
59+
<p class="govuk-body">
60+
Check out our <a href="/user-guide" class="govuk-link">user guide</a> for
61+
guidance on how to build components for this library.
62+
</p> -->
63+
<DividerLine margin="1rem 0rem"></DividerLine>
64+
</div>
5765

58-
<p class="govuk-body">
59-
Check out our <a href="/user-guide" class="govuk-link">user guide</a> for
60-
guidance on how to build components for this library.
61-
</p>
62-
<DividerLine margin="1rem 0rem"></DividerLine>
63-
</div>
66+
<div>
67+
<h2 class="govuk-heading-l mb-6 mt-10">Components</h2>
68+
<p class="govuk-body">
69+
Browse our collection of reusable UI components designed for
70+
consistency and accessibility.
71+
</p>
72+
<p class="govuk-body">
73+
<a href="/components" class="govuk-link">View all components</a> in the
74+
library.
75+
</p>
76+
<DividerLine margin="1rem 0rem"></DividerLine>
77+
</div>
6478

65-
<div>
66-
<h2 class="govuk-heading-l mb-6 mt-10">Components</h2>
67-
<p class="govuk-body">
68-
Browse our collection of reusable UI components designed for consistency
69-
and accessibility.
70-
</p>
71-
<p class="govuk-body">
72-
<a href="/components" class="govuk-link">View all components</a> in the library.
73-
</p>
79+
<div>
80+
<h2 class="govuk-heading-l mb-6 mt-10">Playground</h2>
81+
<p class="govuk-body">
82+
The playground is a sandbox space where developers can test code and
83+
practice combining components.
84+
</p>
85+
<p class="govuk-body">All our playground examples are listed below.</p>
86+
</div>
7487
<DividerLine margin="1rem 0rem"></DividerLine>
7588
</div>
76-
77-
<div>
78-
<h2 class="govuk-heading-l mb-6 mt-10">Playground</h2>
79-
<p class="govuk-body">
80-
The playground is a sandbox space where developers can test code and
81-
practice combining components.
82-
</p>
83-
<p class="govuk-body">All our playground examples are listed below.</p>
84-
</div>
85-
<DividerLine margin="1rem 0rem"></DividerLine>
8689
</div>
8790
</div>
8891

8992
<style>
90-
/* .app-content {
91-
padding: 30px 0px 30px 30px;
92-
} */
93+
/* Allow masthead to break out of container and span full width */
94+
.homepage-layout :global(.app-masthead) {
95+
width: 100%;
96+
}
9397
</style>

‎src/wrappers/components/ui/MastheadWrapper.svelte‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -257,6 +257,18 @@
257257
],
258258
},
259259
},
260+
{
261+
name: "backgroundColor",
262+
category: "Visual",
263+
value: "#1d70b8",
264+
description: {
265+
markdown: true,
266+
arr: [
267+
"The background color of the masthead section.",
268+
"Use GOV.UK blue (#1d70b8) by default, or customise to match your service branding. Ensure sufficient contrast with white text.",
269+
],
270+
},
271+
},
260272
]),
261273
);
262274

0 commit comments

Comments
 (0)