Skip to content

Commit e5b713c

Browse files
matteasonmatteason
committed
Update generated examples
1 parent 45c022f commit e5b713c

14 files changed

+98
-54
lines changed

‎.generated-examples/content1getstarted10installinggovukvueExample1.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<template>
2-
<gv-header />
2+
<div class="govuk-heading-xl">GDS Transport test</div>
33
</template>

‎.generated-examples/content2componentsdateinputExample0.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const month = ref('')
66
const year = ref('')
77
88
const formattedDate = computed(() => {
9-
const parsedDate = Date.parse(`${year.value}-${month.value}-${day.value}`)
9+
const parsedDate = Date.parse(`${year.value}-${month.value.padStart(2, '0')}-${day.value.padStart(2, '0')}`)
1010
1111
if(!isNaN(parsedDate)) {
1212
const date = new Date(parsedDate)

‎.generated-examples/content2componentsdateinputExample1.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const month = ref('')
66
const year = ref('')
77
88
const formattedDate = computed(() => {
9-
const parsedDate = Date.parse(`${year.value}-${month.value}-${day.value}`)
9+
const parsedDate = Date.parse(`${year.value}-${month.value.padStart(2, '0')}-${day.value.padStart(2, '0')}`)
1010
1111
if(!isNaN(parsedDate)) {
1212
const date = new Date(parsedDate)

‎.generated-examples/content2componentsdateinputExample2.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ function validateDate() {
6666
}
6767
6868
// Check if whole date is valid (eg 31-2-2023 would pass previous checks but fail here)
69-
const parsedDate = Date.parse(`${year.value}-${month.value}-${day.value}`)
69+
const parsedDate = Date.parse(`${year.value}-${month.value.padStart(2, '0')}-${day.value.padStart(2, '0')}`)
7070
7171
if(isNaN(parsedDate)) {
7272
dayHasError.value = true

‎.generated-examples/content2componentsheaderExample4.vue

+21-17
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,32 @@
33
<template #logo>
44
<div class="govuk-header__logo app-header__logo">
55
<a href="/" class="govuk-header__link govuk-header__link--homepage">
6-
<span class="govuk-header__logotype">
7-
<svg
8-
aria-hidden="true"
9-
focusable="false"
10-
class="govuk-header__logotype-crown"
11-
xmlns="http://www.w3.org/2000/svg"
12-
viewBox="0 0 47 30"
13-
height="30"
14-
width="47"
15-
>
16-
<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"/>
17-
</svg>
18-
<span class="govuk-header__logotype-text"> GOV.UK Vue </span>
19-
</span>
6+
<svg
7+
focusable="false"
8+
role="img"
9+
class="govuk-header__logotype"
10+
xmlns="http://www.w3.org/2000/svg"
11+
viewBox="0 0 47 30"
12+
height="30"
13+
width="47"
14+
>
15+
<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"/>
16+
</svg>
17+
<span class="app-header__logotype-text"> GOV.UK Vue </span>
2018
</a>
2119
</div>
2220
</template>
2321
</gv-header>
2422
</template>
2523

26-
<style>
27-
.app-header__logo {
28-
width: 100%;
24+
<style lang="scss">
25+
.app-header {
26+
&__logo {
27+
width: 100%;
28+
}
29+
30+
&__logotype-text {
31+
font-weight: 700;
32+
}
2933
}
3034
</style>

‎.generated-examples/content2componentspasswordinputExample0.vue

+12-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
<script setup lang="ts">
22
import { ref } from 'vue'
3-
const eventName = ref('')
3+
const password = ref('')
4+
5+
const length = computed(() => {
6+
return `${password.value.length} character${password.value.length > 1 ? 's' : ''}`
7+
})
48
</script>
59

610
<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.
11+
<gv-password-input label="Password" v-model="password">
12+
<template #hint>
13+
Must be at least 10 characters
14+
</template>
15+
</gv-password-input>
16+
<gv-inset-text v-if="password" aria-live="polite">
17+
Your password is {{ length }} long
1018
</gv-inset-text>
1119
</template>

‎.generated-examples/content2componentspasswordinputExample1.vue

+1-9
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
1-
<script setup lang="ts">
2-
import { ref } from 'vue'
3-
const password = ref('')
4-
</script>
5-
61
<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>
2+
<gv-password-input autocomplete="new-password" label="New password"/>
113
</template>

‎.generated-examples/content2componentsservicenavigationExample0.vue

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<template>
2-
<gv-service-navigation service-name="Service name">
3-
<gv-service-navigation-item>Navigation item 1</gv-service-navigation-item>
2+
<gv-service-navigation service-name="Service name" service-url="/example-page">
3+
<gv-service-navigation-item href="/example-page">Navigation item 1</gv-service-navigation-item>
4+
<gv-service-navigation-item href="/example-page" :current="true">Navigation item 2</gv-service-navigation-item>
5+
<gv-service-navigation-item href="/example-page">Navigation item 3</gv-service-navigation-item>
46
</gv-service-navigation>
57
</template>

‎.generated-examples/content2componentsservicenavigationExample1.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<gv-header/>
2+
<gv-header class="govuk-header--full-width-border"/>
33
<gv-service-navigation service-name="Service name">
44
<gv-service-navigation-item href="/example-page">Navigation item 1</gv-service-navigation-item>
55
<gv-service-navigation-item href="/example-page" :current="true">Navigation item 2</gv-service-navigation-item>

‎.generated-examples/content2componentsservicenavigationExample2.vue

+7-5
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22
import { NuxtLink } from '#components';
33
</script>
44

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>
5+
<template>
6+
<gv-service-navigation service-name="Service name" :service-name-link-component="NuxtLink" service-url="/example-page">
7+
<gv-service-navigation-item :component="NuxtLink" to="/example-page">Navigation item 1</gv-service-navigation-item>
8+
<gv-service-navigation-item :component="NuxtLink" to="/example-page" :current="true">Navigation item 2</gv-service-navigation-item>
9+
<gv-service-navigation-item :component="NuxtLink" to="/example-page">Navigation item 3</gv-service-navigation-item>
10+
</gv-service-navigation>
11+
</template>

‎.generated-examples/content2componentstagExample0.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<template>
2-
<gv-tag>completed</gv-tag>
2+
<gv-tag>Completed</gv-tag>
33
</template>

‎.generated-examples/content2componentstagExample1.vue

+10-9
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
<script setup lang="ts">
22
const options = [
3-
{ colour: 'grey', text: 'inactive' },
4-
{ colour: 'green', text: 'new' },
5-
{ colour: 'turquoise', text: 'active' },
6-
{ colour: 'blue', text: 'pending' },
7-
{ colour: 'purple', text: 'received' },
8-
{ colour: 'pink', text: 'sent' },
9-
{ colour: 'red', text: 'rejected' },
10-
{ colour: 'orange', text: 'declined' },
11-
{ colour: 'yellow', text: 'delayed' },
3+
{ colour: 'grey', text: 'Inactive' },
4+
{ colour: 'green', text: 'New' },
5+
{ colour: 'turquoise', text: 'Active' },
6+
{ colour: 'blue', text: 'Pending' },
7+
{ colour: 'light-blue', text: 'In progress' },
8+
{ colour: 'purple', text: 'Received' },
9+
{ colour: 'pink', text: 'Sent' },
10+
{ colour: 'red', text: 'Rejected' },
11+
{ colour: 'orange', text: 'Declined' },
12+
{ colour: 'yellow', text: 'Delayed' },
1213
]
1314
</script>
1415

‎.generated-examples/content2componentstasklistExample0.vue

+21-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,25 @@
11
<template>
22
<gv-task-list>
3-
<gv-task-list-item>Company Directors</gv-task-list-item>
3+
<gv-task-list-item href="/example-page" status="Completed">
4+
Company Directors
5+
</gv-task-list-item>
6+
<gv-task-list-item href="/example-page">
7+
Registered company details
8+
<template #status>
9+
<gv-tag colour="light-blue">In progress</gv-tag>
10+
</template>
11+
</gv-task-list-item>
12+
<gv-task-list-item href="/example-page">
13+
Application details
14+
<template #status>
15+
<gv-tag>Not yet started</gv-tag>
16+
</template>
17+
</gv-task-list-item>
18+
<gv-task-list-item status="Cannot start yet" :cannot-start-yet="true">
19+
Funds applied to
20+
<template #hint>
21+
The funds will be announced in January
22+
</template>
23+
</gv-task-list-item>
424
</gv-task-list>
525
</template>

‎.generated-examples/content2componentstasklistExample1.vue

+16-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,24 @@
11
<template>
22
<gv-task-list>
3+
<gv-task-list-item href="/example-page" status="Completed">
4+
Request details
5+
</gv-task-list-item>
6+
<gv-task-list-item href="/example-page">
7+
Team lead approval
8+
<template #status>
9+
<gv-tag colour="green">Approved</gv-tag>
10+
</template>
11+
</gv-task-list-item>
312
<gv-task-list-item href="/example-page">
413
Manager approval
514
<template #status>
6-
<gv-tag class="govuk-tag--orange">Awaiting approval</gv-tag>
15+
<gv-tag colour="orange">Awaiting approval</gv-tag>
16+
</template>
17+
</gv-task-list-item>
18+
<gv-task-list-item status="Cannot start yet" :cannot-start-yet="true">
19+
Final sign-off
20+
<template #hint>
21+
Your team lead and manager need to approve before final sign-off
722
</template>
823
</gv-task-list-item>
924
</gv-task-list>

0 commit comments

Comments
 (0)