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>

0 commit comments

Comments
 (0)