Skip to content

Commit 45c022f

Browse files
matteasonmatteason
committed
Update docs for 1.0.0 release
1 parent 1c6958f commit 45c022f

31 files changed

+663
-310
lines changed

‎.generated-examples/content2componentspasswordinputExample0.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script setup lang="ts">
2+
import { ref } from 'vue'
3+
const eventName = ref('')
4+
</script>
5+
6+
<template>
7+
<gv-input label="What is the name of the event?" v-model="eventName" />
8+
<gv-inset-text v-if="eventName" aria-live="polite">
9+
'{{ eventName }}' will be printed on the poster for your event.
10+
</gv-inset-text>
11+
</template>

‎.generated-examples/content2componentspasswordinputExample1.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script setup lang="ts">
2+
import { ref } from 'vue'
3+
const password = ref('')
4+
</script>
5+
6+
<template>
7+
<gv-password-input label="Password" v-model="password" />
8+
<gv-inset-text v-if="password" aria-live="polite">
9+
Your password is {{password}}
10+
</gv-inset-text>
11+
</template>

‎.generated-examples/content2componentspasswordinputExample2.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script setup lang="ts">
2+
import { ref } from 'vue'
3+
const passwordVisible = ref(null)
4+
</script>
5+
6+
<template>
7+
<gv-password-input label="Password" v-model:password-visible="passwordVisible" />
8+
<gv-inset-text aria-live="polite">
9+
Your password is {{ passwordVisible ? '' : 'not ' }}visible
10+
</gv-inset-text>
11+
</template>

‎.generated-examples/content2componentsservicenavigationExample0.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<gv-service-navigation service-name="Service name">
3+
<gv-service-navigation-item>Navigation item 1</gv-service-navigation-item>
4+
</gv-service-navigation>
5+
</template>

‎.generated-examples/content2componentsservicenavigationExample1.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<gv-header/>
3+
<gv-service-navigation service-name="Service name">
4+
<gv-service-navigation-item href="/example-page">Navigation item 1</gv-service-navigation-item>
5+
<gv-service-navigation-item href="/example-page" :current="true">Navigation item 2</gv-service-navigation-item>
6+
<gv-service-navigation-item href="/example-page">Navigation item 3</gv-service-navigation-item>
7+
</gv-service-navigation>
8+
</template>

‎.generated-examples/content2componentsservicenavigationExample2.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script setup lang="ts">
2+
import { NuxtLink } from '#components';
3+
</script>
4+
5+
<gv-service-navigation service-name="Service name" se service-url="/example-page">
6+
<gv-service-navigation-item :component="NuxtLink" to="/example-page">Navigation item 1</gv-service-navigation-item>
7+
<gv-service-navigation-item :component="NuxtLink" to="/example-page" :current="true">Navigation item 2</gv-service-navigation-item>
8+
<gv-service-navigation-item :component="NuxtLink" to="/example-page">Navigation item 3</gv-service-navigation-item>
9+
</gv-service-navigation>

‎.generated-examples/content2componentstasklistExample0.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<gv-task-list>
3+
<gv-task-list-item>Company Directors</gv-task-list-item>
4+
</gv-task-list>
5+
</template>

‎.generated-examples/content2componentstasklistExample1.vue

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<template>
2+
<gv-task-list>
3+
<gv-task-list-item href="/example-page">
4+
Manager approval
5+
<template #status>
6+
<gv-tag class="govuk-tag--orange">Awaiting approval</gv-tag>
7+
</template>
8+
</gv-task-list-item>
9+
</gv-task-list>
10+
</template>

‎components/GvdCodeSample.vue

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,15 @@
1010
</template>
1111

1212
<style lang="scss">
13-
$govuk-is-ie8: false;
14-
15-
@import './node_modules/govuk-frontend/govuk/tools/ie8';
16-
@import './node_modules/govuk-frontend/govuk/settings/media-queries';
17-
@import './node_modules/govuk-frontend/govuk/helpers/media-queries';
18-
@import './node_modules/govuk-frontend/govuk/settings/colours-applied';
19-
@import './node_modules/govuk-frontend/govuk/settings/spacing';
20-
@import './node_modules/govuk-frontend/govuk/helpers/spacing';
21-
@import './node_modules/govuk-frontend/govuk/settings/typography-font';
22-
@import './node_modules/govuk-frontend/govuk/settings/typography-font-families';
23-
@import './node_modules/govuk-frontend/govuk/settings/typography-responsive';
24-
@import './node_modules/govuk-frontend/govuk/helpers/font-faces';
25-
@import './node_modules/govuk-frontend/govuk/helpers/typography';
13+
@import './node_modules/govuk-frontend/dist/govuk/settings/media-queries';
14+
@import './node_modules/govuk-frontend/dist/govuk/helpers/media-queries';
15+
@import './node_modules/govuk-frontend/dist/govuk/settings/colours-applied';
16+
@import './node_modules/govuk-frontend/dist/govuk/settings/spacing';
17+
@import './node_modules/govuk-frontend/dist/govuk/helpers/spacing';
18+
@import './node_modules/govuk-frontend/dist/govuk/settings/typography-font';
19+
@import './node_modules/govuk-frontend/dist/govuk/settings/typography-responsive';
20+
@import './node_modules/govuk-frontend/dist/govuk/helpers/font-faces';
21+
@import './node_modules/govuk-frontend/dist/govuk/helpers/typography';
2622
2723
.gvd-code-sample {
2824
border: 1px solid $govuk-border-colour;

‎components/GvdHeader.vue

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,15 @@ onBeforeRouteLeave((to, from, next) => {
2323
<svg
2424
aria-hidden="true"
2525
focusable="false"
26-
class="govuk-header__logotype-crown"
26+
class="govuk-header__logotype gvd-header__logotype-icon"
2727
xmlns="http://www.w3.org/2000/svg"
2828
viewBox="0 0 47 30"
2929
height="30"
3030
width="47"
3131
>
3232
<polygon points="46.79769 7.68277 32.97322 11.4032 35.04362 14.9896 41.13804 13.34242 37.98907 25.09613 23.5 0 9.01093 25.09613 5.86196 13.34242 11.95638 14.9896 14.02678 11.4032 .20231 7.68277 6.18155 29.99698 6.1796 30 13.10712 30 23.5 12.00043 33.89288 30 40.8204 30 40.81845 29.99698 46.79769 7.68277" fill="currentColor"/>
3333
</svg>
34-
<span class="govuk-header__logotype-text"> GOV.UK Vue </span>
34+
<span class="gvd-header__logotype-text"> GOV.UK Vue </span>
3535
</span>
3636
</a>
3737
</div>
@@ -48,18 +48,29 @@ onBeforeRouteLeave((to, from, next) => {
4848
// the full width of the page
4949
.gvd-header {
5050
border-bottom: 10px solid #42b883;
51+
52+
// Override the default 33% width on the logo in GOV.UK Frontend (prevents
53+
// unnecessary wrapping of "GOV.UK Design System" on smaller tablet / desktop
54+
// viewports)
55+
&__logo {
56+
width: auto;
57+
margin-bottom: 5px;
58+
}
59+
60+
&__logotype-icon {
61+
margin-top: 2px;
62+
}
63+
&__logotype-text {
64+
font-weight: bold;
65+
margin-left: 1px;
66+
}
5167
}
5268
5369
.gvd-header__container {
5470
margin-bottom: 0;
5571
border-bottom: 0;
5672
}
5773
58-
// Override the default 33% width on the logo in GOV.UK Frontend (prevents
59-
// unnecessary wrapping of "GOV.UK Design System" on smaller tablet / desktop
60-
// viewports)
61-
.gvd-header__logo {
62-
width: auto;
63-
}
74+
6475
6576
</style>

‎components/GvdMasthead.vue

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -29,23 +29,19 @@
2929
</template>
3030

3131
<style lang="scss" scoped>
32-
$govuk-is-ie8: false;
33-
34-
@import '../node_modules/govuk-frontend/govuk/settings/colours-applied';
35-
@import '../node_modules/govuk-frontend/govuk/settings/media-queries';
36-
@import '../node_modules/govuk-frontend/govuk/helpers/media-queries';
37-
@import '../node_modules/govuk-frontend/govuk/settings/typography-font';
38-
@import '../node_modules/govuk-frontend/govuk/settings/typography-font-families';
39-
@import '../node_modules/govuk-frontend/govuk/settings/typography-responsive';
40-
@import '../node_modules/govuk-frontend/govuk/helpers/font-faces';
41-
@import '../node_modules/govuk-frontend/govuk/helpers/typography';
42-
@import '../node_modules/govuk-frontend/govuk/settings/links';
43-
@import '../node_modules/govuk-frontend/govuk/helpers/links';
44-
@import '../node_modules/govuk-frontend/govuk/settings/measurements';
45-
@import '../node_modules/govuk-frontend/govuk/helpers/focused';
46-
@import '../node_modules/govuk-frontend/govuk/settings/spacing';
47-
@import '../node_modules/govuk-frontend/govuk/helpers/spacing';
48-
@import '../node_modules/govuk-frontend/govuk/tools/ie8';
32+
@import '../node_modules/govuk-frontend/dist/govuk/settings/colours-applied';
33+
@import '../node_modules/govuk-frontend/dist/govuk/settings/media-queries';
34+
@import '../node_modules/govuk-frontend/dist/govuk/helpers/media-queries';
35+
@import '../node_modules/govuk-frontend/dist/govuk/settings/typography-font';
36+
@import '../node_modules/govuk-frontend/dist/govuk/settings/typography-responsive';
37+
@import '../node_modules/govuk-frontend/dist/govuk/helpers/font-faces';
38+
@import '../node_modules/govuk-frontend/dist/govuk/helpers/typography';
39+
@import '../node_modules/govuk-frontend/dist/govuk/settings/links';
40+
@import '../node_modules/govuk-frontend/dist/govuk/helpers/links';
41+
@import '../node_modules/govuk-frontend/dist/govuk/settings/measurements';
42+
@import '../node_modules/govuk-frontend/dist/govuk/helpers/focused';
43+
@import '../node_modules/govuk-frontend/dist/govuk/settings/spacing';
44+
@import '../node_modules/govuk-frontend/dist/govuk/helpers/spacing';
4945
5046
.gvd-masthead {
5147
@include govuk-responsive-padding(6, "top");

‎components/GvdNavigation.vue

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -49,24 +49,19 @@ function toggleSection(path: string) {
4949
</template>
5050

5151
<style lang="scss" scoped>
52-
$govuk-is-ie8: false;
53-
$govuk-new-link-styles: true;
54-
55-
@import '../node_modules/govuk-frontend/govuk/settings/colours-applied';
56-
@import '../node_modules/govuk-frontend/govuk/settings/media-queries';
57-
@import '../node_modules/govuk-frontend/govuk/helpers/media-queries';
58-
@import './node_modules/govuk-frontend/govuk/settings/typography-font';
59-
@import './node_modules/govuk-frontend/govuk/settings/typography-font-families';
60-
@import './node_modules/govuk-frontend/govuk/settings/typography-responsive';
61-
@import './node_modules/govuk-frontend/govuk/helpers/font-faces';
62-
@import './node_modules/govuk-frontend/govuk/helpers/typography';
63-
@import './node_modules/govuk-frontend/govuk/settings/links';
64-
@import './node_modules/govuk-frontend/govuk/helpers/links';
65-
@import './node_modules/govuk-frontend/govuk/settings/measurements';
66-
@import './node_modules/govuk-frontend/govuk/helpers/focused';
67-
@import './node_modules/govuk-frontend/govuk/settings/spacing';
68-
@import './node_modules/govuk-frontend/govuk/helpers/spacing';
69-
@import '../node_modules/govuk-frontend/govuk/tools/ie8';
52+
@import '../node_modules/govuk-frontend/dist/govuk/settings/colours-applied';
53+
@import '../node_modules/govuk-frontend/dist/govuk/settings/media-queries';
54+
@import '../node_modules/govuk-frontend/dist/govuk/helpers/media-queries';
55+
@import './node_modules/govuk-frontend/dist/govuk/settings/typography-font';
56+
@import './node_modules/govuk-frontend/dist/govuk/settings/typography-responsive';
57+
@import './node_modules/govuk-frontend/dist/govuk/helpers/font-faces';
58+
@import './node_modules/govuk-frontend/dist/govuk/helpers/typography';
59+
@import './node_modules/govuk-frontend/dist/govuk/settings/links';
60+
@import './node_modules/govuk-frontend/dist/govuk/helpers/links';
61+
@import './node_modules/govuk-frontend/dist/govuk/settings/measurements';
62+
@import './node_modules/govuk-frontend/dist/govuk/helpers/focused';
63+
@import './node_modules/govuk-frontend/dist/govuk/settings/spacing';
64+
@import './node_modules/govuk-frontend/dist/govuk/helpers/spacing';
7065
7166
$app-light-grey: #f8f8f8;
7267

‎components/GvdPageWrapper.vue

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
<template>
22
<gvd-header/>
3-
<div class="gvd-phase-banner-wrapper">
4-
<gv-phase-banner tag="alpha" tag-colour="red" class="gvd-phase-banner">GOV.UK Vue is in alpha - your <nuxt-link to="/support" class="govuk-link">feedback</nuxt-link> will help to improve it.</gv-phase-banner>
5-
</div>
63
<slot name="content">
74
<div class="govuk-width-container gvd-width-container">
85
<main class="govuk-main-wrapper" id="main-content" role="main">
@@ -85,6 +82,11 @@ table {
8582
border-spacing: 0;
8683
}
8784
85+
/* Work round issue in warning text component in Frontend v5.6.0 */
86+
strong {
87+
font-weight: bold
88+
}
89+
8890
/* inter-regular - latin */
8991
@font-face {
9092
font-display: fallback;
@@ -104,8 +106,8 @@ table {
104106
105107
$govuk-font-family: 'Inter', arial, sans-serif;
106108
107-
@import '../node_modules/govuk-frontend/govuk/all';
108-
@import '../node_modules/govuk-frontend/govuk/settings/colours-palette';
109+
@import '../node_modules/govuk-frontend/dist/govuk/all';
110+
@import '../node_modules/govuk-frontend/dist/govuk/settings/colours-palette';
109111
110112
.gvd-width-container {
111113
@include govuk-width-container(1100px);

‎components/GvdSubNav.vue

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,19 @@
66
</template>
77

88
<style lang="scss">
9-
$govuk-is-ie8: false;
10-
11-
@import '../node_modules/govuk-frontend/govuk/settings/colours-applied';
12-
@import '../node_modules/govuk-frontend/govuk/settings/media-queries';
13-
@import '../node_modules/govuk-frontend/govuk/helpers/media-queries';
14-
@import '../node_modules/govuk-frontend/govuk/settings/typography-font';
15-
@import '../node_modules/govuk-frontend/govuk/settings/typography-font-families';
16-
@import '../node_modules/govuk-frontend/govuk/settings/typography-responsive';
17-
@import '../node_modules/govuk-frontend/govuk/helpers/font-faces';
18-
@import '../node_modules/govuk-frontend/govuk/helpers/typography';
19-
@import '../node_modules/govuk-frontend/govuk/settings/links';
20-
@import '../node_modules/govuk-frontend/govuk/helpers/links';
21-
@import '../node_modules/govuk-frontend/govuk/settings/measurements';
22-
@import '../node_modules/govuk-frontend/govuk/helpers/focused';
23-
@import '../node_modules/govuk-frontend/govuk/settings/spacing';
24-
@import '../node_modules/govuk-frontend/govuk/helpers/spacing';
25-
@import '../node_modules/govuk-frontend/govuk/tools/ie8';
9+
@import '../node_modules/govuk-frontend/dist/govuk/settings/colours-applied';
10+
@import '../node_modules/govuk-frontend/dist/govuk/settings/media-queries';
11+
@import '../node_modules/govuk-frontend/dist/govuk/helpers/media-queries';
12+
@import '../node_modules/govuk-frontend/dist/govuk/settings/typography-font';
13+
@import '../node_modules/govuk-frontend/dist/govuk/settings/typography-responsive';
14+
@import '../node_modules/govuk-frontend/dist/govuk/helpers/font-faces';
15+
@import '../node_modules/govuk-frontend/dist/govuk/helpers/typography';
16+
@import '../node_modules/govuk-frontend/dist/govuk/settings/links';
17+
@import '../node_modules/govuk-frontend/dist/govuk/helpers/links';
18+
@import '../node_modules/govuk-frontend/dist/govuk/settings/measurements';
19+
@import '../node_modules/govuk-frontend/dist/govuk/helpers/focused';
20+
@import '../node_modules/govuk-frontend/dist/govuk/settings/spacing';
21+
@import '../node_modules/govuk-frontend/dist/govuk/helpers/spacing';
2622
2723
.gvd-subnav {
2824
// Since the back to top link is outside the flow of the document we need to create a space for it.

‎components/GvdWhatsNew.vue

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div class="gvd-whats-new">
3+
<div class="gvd-width-container">
4+
<div class="govuk-main-wrapper govuk-main-wrapper--l">
5+
<div class="govuk-grid-row">
6+
<div class="govuk-grid-column-two-thirds-from-desktop">
7+
<h2 id="whats-new" class="govuk-heading-l">What’s new</h2>
8+
<slot/>
9+
</div>
10+
</div>
11+
</div>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<style lang="scss" scoped>
17+
@import '../node_modules/govuk-frontend/dist/govuk/settings/colours-applied';
18+
19+
$app-light-grey: #f8f8f8;
20+
21+
.gvd-whats-new {
22+
border-bottom: 1px solid $govuk-border-colour;
23+
background-color: $app-light-grey;
24+
}
25+
</style>

‎components/content/ProseCode.vue

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -34,19 +34,15 @@ export default defineComponent({
3434
</template>
3535

3636
<style lang="scss">
37-
$govuk-is-ie8: false;
38-
39-
@import './node_modules/govuk-frontend/govuk/tools/ie8';
40-
@import './node_modules/govuk-frontend/govuk/settings/media-queries';
41-
@import './node_modules/govuk-frontend/govuk/helpers/media-queries';
42-
@import './node_modules/govuk-frontend/govuk/settings/colours-applied';
43-
@import './node_modules/govuk-frontend/govuk/settings/spacing';
44-
@import './node_modules/govuk-frontend/govuk/helpers/spacing';
45-
@import './node_modules/govuk-frontend/govuk/settings/typography-font';
46-
@import './node_modules/govuk-frontend/govuk/settings/typography-font-families';
47-
@import './node_modules/govuk-frontend/govuk/settings/typography-responsive';
48-
@import './node_modules/govuk-frontend/govuk/helpers/font-faces';
49-
@import './node_modules/govuk-frontend/govuk/helpers/typography';
37+
@import './node_modules/govuk-frontend/dist/govuk/settings/media-queries';
38+
@import './node_modules/govuk-frontend/dist/govuk/helpers/media-queries';
39+
@import './node_modules/govuk-frontend/dist/govuk/settings/colours-applied';
40+
@import './node_modules/govuk-frontend/dist/govuk/settings/spacing';
41+
@import './node_modules/govuk-frontend/dist/govuk/helpers/spacing';
42+
@import './node_modules/govuk-frontend/dist/govuk/settings/typography-font';
43+
@import './node_modules/govuk-frontend/dist/govuk/settings/typography-responsive';
44+
@import './node_modules/govuk-frontend/dist/govuk/helpers/font-faces';
45+
@import './node_modules/govuk-frontend/dist/govuk/helpers/typography';
5046
5147
.gvd-code {
5248
color: white;

0 commit comments

Comments
 (0)