danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/ripple-framework. Ripple is the presentation layer for building websites on the DPC Single Digital Presence platform.
3.5 kB
118 lines
1<script setup lang="ts">
2import { onMounted, ref } from 'vue'
3
4interface Props {
5 siteSectionName: string
6}
7
8withDefaults(defineProps<Props>(), {
9 siteSectionName: ''
10})
11
12// This is an actual webform that exists in drupal
13const contentRatingFormId = 'tide_webform_content_rating'
14
15const isMounted = ref(false)
16const pageUrl = ref('')
17
18onMounted(() => {
19 isMounted.value = true
20 pageUrl.value = window.location.href
21})
22</script>
23
24<template>
25 <div class="tide-content-rating rpl-u-screen-only">
26 <div class="rpl-container">
27 <div class="rpl-grid">
28 <div class="rpl-col-12 rpl-col-7-m">
29 <TideLandingPageWebForm
30 v-if="isMounted"
31 :formId="contentRatingFormId"
32 hideFormOnSubmit
33 successMessageTitle=""
34 successMessageHTML="Thank you! Your response has been submitted."
35 errorMessageHTML="We are experiencing a server error. Please try again, otherwise contact us."
36 >
37 <template #default="{ value }">
38 <div class="tide-content-rating__rating">
39 <FormKit type="hidden" name="url" :value="pageUrl" />
40 <FormKit
41 type="hidden"
42 name="site_section_name"
43 :value="siteSectionName"
44 />
45 <FormKit
46 id="was_this_page_helpful"
47 name="was_this_page_helpful"
48 type="RplFormRadioGroup"
49 label="Was this page helpful?"
50 layout="inline"
51 class="wow"
52 :options="[
53 { id: 'Yes', label: 'Yes', value: 'Yes' },
54 { id: 'No', label: 'No', value: 'No' }
55 ]"
56 />
57 </div>
58 <RplExpandable :expanded="!!value.was_this_page_helpful">
59 <div class="tide-content-rating__expanded">
60 <FormKit
61 id="comments"
62 type="RplFormTextarea"
63 name="comments"
64 label="Enter your comments"
65 :maxlength="5000"
66 :rows="4"
67 counter="word"
68 :counterMax="500"
69 :validation="[['matches', '/^\\W*(\\w+(\\W+|$)){1,500}$/']]"
70 :validationMessages="{
71 matches: 'You must enter between 1 and 500 words'
72 }"
73 />
74 <RplContent>
75 <p>
76 If you need a response, please use our
77 <RplLink href="/contact-us">contact us form</RplLink>.
78 </p>
79 </RplContent>
80 <FormKit type="RplFormActions" />
81 </div>
82 </RplExpandable>
83 </template>
84 </TideLandingPageWebForm>
85 </div>
86 </div>
87 </div>
88 </div>
89</template>
90
91<style>
92.tide-content-rating {
93 border-top: var(--rpl-border-1) solid var(--rpl-clr-neutral-300);
94 padding-top: var(--rpl-sp-6);
95}
96
97.tide-content-rating__rating .rpl-form-label {
98 @media (--rpl-bp-m) {
99 float: left;
100 margin: 0;
101 margin-right: var(--rpl-sp-6);
102 }
103}
104
105.tide-content-rating__rating {
106 margin-bottom: var(--rpl-sp-6);
107}
108
109.tide-content-rating__expanded {
110 padding-top: var(--rpl-sp-1);
111 padding-bottom: var(--rpl-sp-6);
112
113 @media (--rpl-bp-m) {
114 padding-top: var(--rpl-sp-2);
115 padding-bottom: var(--rpl-sp-8);
116 }
117}
118</style>