Skip to content

Commit 75008ba

Browse files
Ibrahim-HaizelIbrahim-Haizel
authored
Merge pull request #73 from communitiesuk/Masthead-component
Masthead component
2 parents 4a40a72 + 86b6f96 commit 75008ba

File tree

9 files changed

+1009
-39
lines changed

9 files changed

+1009
-39
lines changed

‎src/lib/assets/images/homepage-illustration.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/lib/assets/images/masthead-illustration.svg‎

Lines changed: 123 additions & 0 deletions
Loading

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

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
<script lang="ts">
2+
import homepageIllustration from "$lib/assets/images/homepage-illustration.svg";
3+
4+
// Define component props with types and default values
5+
let {
6+
title = "Design your service using GOV.UK styles, components and patterns",
7+
description = "Use this design system to make government services consistent with GOV.UK. Learn from the research and experience of other service teams and avoid repeating work that's already been done.",
8+
buttonText = "Get started",
9+
buttonHref = "/get-started/",
10+
imageSrc = homepageIllustration,
11+
imageAlt = "",
12+
backgroundColor = "#1d70b8", // GOV.UK blue by default
13+
} = $props<{
14+
title?: string;
15+
description?: string;
16+
buttonText?: string;
17+
buttonHref?: string;
18+
imageSrc?: string;
19+
imageAlt?: string;
20+
backgroundColor?: string;
21+
}>();
22+
</script>
23+
24+
<div
25+
class="app-masthead"
26+
style="background-color: {backgroundColor}; border-bottom-color: {backgroundColor};"
27+
>
28+
<div class="govuk-width-container">
29+
<div class="govuk-grid-row">
30+
<div class="govuk-grid-column-two-thirds-from-desktop">
31+
<h1 class="govuk-heading-xl app-masthead__title">{@html title}</h1>
32+
<p class="app-masthead__description">{description}</p>
33+
34+
<a
35+
href={buttonHref}
36+
role="button"
37+
draggable="false"
38+
class="govuk-button govuk-button--inverse govuk-!-margin-top-6 govuk-!-margin-bottom-0 govuk-button--start"
39+
data-module="govuk-button"
40+
>
41+
{buttonText}
42+
<svg
43+
class="govuk-button__start-icon"
44+
xmlns="http://www.w3.org/2000/svg"
45+
width="17.5"
46+
height="19"
47+
viewBox="0 0 33 40"
48+
aria-hidden="true"
49+
focusable="false"
50+
>
51+
<path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
52+
</svg>
53+
</a>
54+
</div>
55+
56+
<div class="govuk-grid-column-one-third-from-desktop">
57+
<img
58+
class="app-masthead__image"
59+
src={imageSrc}
60+
alt={imageAlt}
61+
role="presentation"
62+
/>
63+
</div>
64+
</div>
65+
</div>
66+
</div>
67+
68+
<style>
69+
/* Ensure our masthead styles take precedence over global GOV.UK styles using specificity */
70+
.app-masthead.app-masthead {
71+
/* @include govuk-responsive-padding(6, "top"); */
72+
padding-top: 20px;
73+
/* @include govuk-responsive-padding(6, "bottom"); */
74+
padding-bottom: 20px;
75+
/* border-bottom: 1px solid govuk-colour("blue"); - now set via inline style */
76+
border-bottom-width: 1px;
77+
border-bottom-style: solid;
78+
/* color: govuk-colour("white"); */
79+
color: #ffffff;
80+
/* background-color: govuk-colour("blue"); - now set via inline style */
81+
}
82+
83+
@media (min-width: 40.0625em) {
84+
.app-masthead.app-masthead {
85+
/* Responsive spacing unit 6: 30px on large screens */
86+
padding-top: 30px;
87+
padding-bottom: 30px;
88+
}
89+
}
90+
91+
.app-masthead .app-masthead__title.app-masthead__title {
92+
/* color: govuk-colour("white"); */
93+
color: #ffffff;
94+
/* @include govuk-responsive-margin(6, "bottom"); */
95+
margin-bottom: 20px;
96+
}
97+
98+
@media (min-width: 40.0625em) {
99+
.app-masthead .app-masthead__title.app-masthead__title {
100+
/* Responsive spacing unit 6: 30px on large screens */
101+
margin-bottom: 30px;
102+
}
103+
}
104+
105+
.app-masthead .app-masthead__description.app-masthead__description {
106+
/* @include govuk-font(24); - Font size 24 from the typography scale */
107+
font-family: "GDS Transport", arial, sans-serif;
108+
font-weight: 400;
109+
font-size: 1.25rem; /* 20px */
110+
line-height: 1.25;
111+
margin-bottom: 0;
112+
}
113+
114+
@media (min-width: 40.0625em) {
115+
.app-masthead .app-masthead__description.app-masthead__description {
116+
font-size: 1.5rem; /* 24px */
117+
line-height: 1.25;
118+
}
119+
}
120+
121+
.app-masthead .app-masthead__image.app-masthead__image {
122+
display: none;
123+
}
124+
125+
/* @include govuk-media-query($from: desktop) - Desktop breakpoint is 769px */
126+
@media (min-width: 48.0625em) {
127+
.app-masthead .app-masthead__image.app-masthead__image {
128+
display: block;
129+
width: 100%;
130+
/* margin-top: govuk-spacing(3); - Static spacing unit 3 is 15px */
131+
margin-top: 15px;
132+
}
133+
}
134+
135+
/* GOV.UK Button Styles - Scoped to our component with high specificity */
136+
.app-masthead .govuk-button.govuk-button {
137+
/* @include govuk-font($size: 19, $line-height: 19px); */
138+
font-family: "GDS Transport", arial, sans-serif;
139+
font-weight: 400;
140+
font-size: 1.1875rem; /* 19px */
141+
line-height: 1.1875; /* 19px line height */
142+
box-sizing: border-box;
143+
display: inline-block;
144+
position: relative;
145+
width: 100%;
146+
margin-top: 0;
147+
margin-right: 0;
148+
margin-left: 0;
149+
margin-bottom: 1.375rem; /* 22px - adjusted for shadow */
150+
/* Padding calculation: govuk-spacing(2) - border-width - shadow adjustment */
151+
padding: 0.4375rem 0.625rem 0.3125rem; /* 7px 10px 5px */
152+
border: 0.125rem solid transparent; /* 2px border */
153+
border-radius: 0;
154+
color: #ffffff; /* $govuk-button-text-colour */
155+
background-color: #00703c; /* $govuk-button-colour (green) */
156+
box-shadow: 0 0.125rem 0 #002d18; /* 2px shadow */
157+
text-align: center;
158+
vertical-align: top;
159+
cursor: pointer;
160+
text-decoration: none;
161+
-webkit-appearance: none;
162+
}
163+
164+
@media (min-width: 40.0625em) {
165+
.app-masthead .govuk-button.govuk-button {
166+
width: auto;
167+
margin-bottom: 1.375rem;
168+
}
169+
}
170+
171+
/* Link states for buttons */
172+
.app-masthead .govuk-button.govuk-button:link,
173+
.app-masthead .govuk-button.govuk-button:visited,
174+
.app-masthead .govuk-button.govuk-button:active {
175+
color: #ffffff;
176+
text-decoration: none;
177+
}
178+
179+
.app-masthead .govuk-button.govuk-button:hover {
180+
background-color: #005a30; /* $govuk-button-hover-colour */
181+
box-shadow: 0 0.25rem 0 #002d18; /* 4px shadow on hover */
182+
color: #ffffff;
183+
text-decoration: none;
184+
}
185+
186+
.app-masthead .govuk-button.govuk-button:active {
187+
top: 0.125rem; /* 2px - button pressed down */
188+
box-shadow: 0 0 0 #002d18; /* No shadow when pressed */
189+
}
190+
191+
.app-masthead .govuk-button.govuk-button:focus {
192+
border-color: #ffdd00; /* $govuk-focus-colour */
193+
outline: 0.1875rem solid transparent; /* 3px */
194+
box-shadow: inset 0 0 0 1px #ffdd00;
195+
}
196+
197+
.app-masthead .govuk-button.govuk-button:focus:not(:active):not(:hover) {
198+
border-color: #ffdd00;
199+
color: #0b0c0c; /* $govuk-focus-text-colour */
200+
background-color: #ffdd00;
201+
box-shadow: 0 0.125rem 0 #0b0c0c;
202+
}
203+
204+
/* Inverse button styles - white button with blue text */
205+
.app-masthead .govuk-button.govuk-button--inverse {
206+
background-color: #ffffff; /* $govuk-inverse-button-colour */
207+
box-shadow: 0 0.125rem 0 #0b0c0c; /* $govuk-inverse-button-shadow-colour */
208+
color: #1d70b8; /* $govuk-inverse-button-text-colour - BLUE text, not white! */
209+
}
210+
211+
.app-masthead .govuk-button.govuk-button--inverse:link,
212+
.app-masthead .govuk-button.govuk-button--inverse:visited,
213+
.app-masthead .govuk-button.govuk-button--inverse:active {
214+
color: #1d70b8; /* Blue text for all states */
215+
}
216+
217+
.app-masthead .govuk-button.govuk-button--inverse:hover {
218+
background-color: #f3f2f1; /* $govuk-inverse-button-hover-colour */
219+
color: #1d70b8; /* Keep blue text on hover */
220+
}
221+
222+
/* Start button styles */
223+
.app-masthead .govuk-button.govuk-button--start {
224+
/* @include govuk-typography-weight-bold; @include govuk-font-size($size: 24, $line-height: 1); */
225+
font-weight: 700;
226+
font-size: 1.5rem; /* 24px */
227+
line-height: 1;
228+
display: inline-flex;
229+
min-height: auto;
230+
justify-content: center;
231+
}
232+
233+
.app-masthead .govuk-button .govuk-button__start-icon {
234+
/* margin-left: govuk-spacing(1); on mobile, govuk-spacing(2) on desktop */
235+
margin-left: 0.3125rem; /* 5px - govuk-spacing(1) */
236+
vertical-align: middle;
237+
flex-shrink: 0;
238+
align-self: center;
239+
forced-color-adjust: auto;
240+
}
241+
242+
@media (min-width: 48.0625em) {
243+
.app-masthead .govuk-button .govuk-button__start-icon {
244+
margin-left: 0.625rem; /* 10px - govuk-spacing(2) */
245+
}
246+
}
247+
248+
/* GOV.UK Typography - Scoped to our component with high specificity */
249+
.app-masthead .govuk-heading-xl.govuk-heading-xl {
250+
color: #ffffff; /* Override to white for masthead */
251+
font-family: "GDS Transport", arial, sans-serif;
252+
font-weight: 700;
253+
font-size: 2rem;
254+
line-height: 1.09375;
255+
display: block;
256+
margin-top: 0;
257+
margin-bottom: 1.875rem;
258+
}
259+
260+
@media (min-width: 40.0625em) {
261+
.app-masthead .govuk-heading-xl.govuk-heading-xl {
262+
font-size: 3rem;
263+
line-height: 1.04167;
264+
margin-bottom: 3.125rem;
265+
}
266+
}
267+
</style>

‎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: 52 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script>
22
import DividerLine from "$lib/package-wrapping/DividerLine.svelte";
3-
3+
import Masthead from "$lib/components/ui/Masthead.svelte";
4+
import mastheadIllustration from "$lib/assets/images/masthead-illustration.svg";
45
56
// Keep only playground wrappers for the homepage
67
const wrappersPlaygroundsObject = import.meta.glob(
@@ -38,49 +39,62 @@ TODO
3839
<>
3940
-->
4041

41-
<div class="govuk-width-container govuk-main-wrapper govuk-main-wrapper--l">
42-
<div class="flex flex-col gap-6">
43-
<div>
44-
<h1 class="govuk-heading-xl mb-6">Introduction</h1>
45-
<p>
46-
This library has been developed by members of the MHCLG's Digital,
47-
Design and Development team to house components for use in the
48-
organisation's digital products.
49-
</p>
42+
<div class="homepage-layout">
43+
<Masthead
44+
title="MHCLG Svelte Component Library"
45+
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."
46+
buttonHref="/components"
47+
backgroundColor="#00625E"
48+
imageSrc={mastheadIllustration}
49+
imageAlt="MHCLG Svelte Component Library"
50+
/>
5051

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

58-
<div>
59-
<h2 class="govuk-heading-l mb-6 mt-10">Components</h2>
60-
<p class="govuk-body">
61-
Browse our collection of reusable UI components designed for consistency
62-
and accessibility.
63-
</p>
64-
<p class="govuk-body">
65-
<a href="/components" class="govuk-link">View all components</a> in the library.
66-
</p>
67-
<DividerLine margin="1rem 0rem"></DividerLine>
68-
</div>
69+
<div>
70+
<h2 class="govuk-heading-l mb-6 mt-10">Components</h2>
71+
<p class="govuk-body">
72+
Browse our collection of reusable UI components designed for
73+
consistency and accessibility.
74+
</p>
75+
<p class="govuk-body">
76+
<a href="/components" class="govuk-link">View all components</a> in the
77+
library.
78+
</p>
79+
<DividerLine margin="1rem 0rem"></DividerLine>
80+
</div>
6981

70-
<div>
71-
<h2 class="govuk-heading-l mb-6 mt-10">Playground</h2>
72-
<p class="govuk-body">
73-
The playground is a sandbox space where developers can test code and
74-
practice combining components.
75-
</p>
76-
<p class="govuk-body">All our playground examples are listed below.</p>
82+
<div>
83+
<h2 class="govuk-heading-l mb-6 mt-10">Playground</h2>
84+
<p class="govuk-body">
85+
The playground is a sandbox space where developers can test code and
86+
practice combining components.
87+
</p>
88+
<p class="govuk-body">All our playground examples are listed below.</p>
89+
</div>
90+
<DividerLine margin="1rem 0rem"></DividerLine>
7791
</div>
78-
<DividerLine margin="1rem 0rem"></DividerLine>
7992
</div>
8093
</div>
8194

8295
<style>
83-
/* .app-content {
84-
padding: 30px 0px 30px 30px;
85-
} */
96+
/* Allow masthead to break out of container and span full width */
97+
.homepage-layout :global(.app-masthead) {
98+
width: 100%;
99+
}
86100
</style>

0 commit comments

Comments
 (0)