Merge branch 'main' into DIM@6043---Unittests-toevoegen

src/assets/design-tokens.scss

@@ -50,6 +50,12 @@
   --outline-width: 1px;
   --outline-style: auto;
   --outline-offset: 3px;
+
+  // new categories colours
+  --new-color-category-website: hsl(212deg 71% 80%);
+  --new-color-category-smoelenboek: hsl(212deg 71% 89%);
+  --new-color-category-kennisartikel: hsl(0deg 0% 99%);
+  --new-color-category-vac: hsl(213deg 73% 94%);
 }
 
 .kiss-theme {

src/assets/icons/icons.scss

@@ -37,8 +37,8 @@
 
 .icon-large::after,
 .icon-large::before {
-  min-inline-size: 1.5rem;
-  min-block-size: 1.5rem;
+  min-inline-size: 1.5rem !important;
+  min-block-size: 1.5rem !important;
 }
 
 .icon-before.chevron-down::before,

src/assets/main.scss

@@ -195,15 +195,28 @@ menu {
 // categories
 [class^="category-"],
 [class*=" category-"] {
-  border-radius: 1.5rem;
+  // border-radius: 1.5rem;
+  border: black 1px solid;
   padding-inline: 0.75rem;
   padding-block: 0.5em;
   background-color: var(--color-category-default);
   display: inline-block;
 }
 
 .category-Website {
-  background-color: var(--color-category-website);
+  background-color: var(--new-color-category-website);
+}
+
+.category-Vac {
+  background-color: var(--new-color-category-vac);
+}
+
+.category-Smoelenboek {
+  background-color: var(--new-color-category-smoelenboek);
+}
+
+.category-Kennisartikel {
+  background-color: var(--new-color-category-kennisartikel);
 }
 
 // notities start

src/features/feedback/components/FeedbackForm.vue

@@ -73,7 +73,7 @@
 
       <li>
         <utrecht-button appearance="primary-action-button" type="submit">
-          Opslaan
+          Verzenden
         </utrecht-button>
       </li>
     </menu>

src/features/search/GlobalSearch.vue

@@ -1,15 +1,36 @@
 <template>
+  <button
+    type="button"
+    :class="[
+      'icon-after',
+      'chevron-down',
+      'expand-button',
+      'icon-large',
+      { isExpanded: state.isExpanded },
+    ]"
+    @click="state.isExpanded = !state.isExpanded"
+    v-if="searchResults.success && searchResults.data.page.length"
+  >
+    {{ buttonText }}
+  </button>
+
   <form
     method="get"
     enctype="application/x-www-form-urlencoded"
     @submit.prevent="applySearch"
     ref="searchBarRef"
   >
-    <fieldset class="bronnen" v-if="sources.success">
-      <label v-for="bron in sources.data" :key="bron.name + bron.index">
-        <input type="checkbox" v-model="state.selectedSources" :value="bron" />
-        {{ bron.name.replace(/(^\w+:|^)\/\//, "").replace("www.", "") }}
-      </label>
+    <fieldset class="bronnen">
+      <template v-if="sources.success">
+        <label v-for="bron in sources.data" :key="bron.name + bron.index">
+          <input
+            type="checkbox"
+            v-model="state.selectedSources"
+            :value="bron"
+          />
+          {{ bron.name.replace(/(^\w+:|^)\/\//, "").replace("www.", "") }}
+        </label>
+      </template>
     </fieldset>
     <div class="search-bar">
       <label for="global-search-input"> Zoekterm</label>
@@ -25,8 +46,8 @@
   </form>
   <template v-if="state.currentSearch">
     <section
+      v-if="state.isExpanded"
       :class="['search-results', { isExpanded: state.isExpanded }]"
-      :inert="!state.isExpanded"
     >
       <template v-if="searchResults.success">
         <p v-if="!hasResults" class="no-results">Geen resultaten gevonden</p>
@@ -57,7 +78,6 @@
                       documentUrl,
                     )
                   "
-                  class="icon-after chevron-down"
                 >
                   <span :class="`category-${source}`">{{ source }}</span>
                   <span v-if="source === 'Smoelenboek'">
@@ -170,19 +190,7 @@
         v-if="searchResults.state === 'loading'"
       />
     </section>
-    <button
-      type="button"
-      :class="[
-        'icon-after',
-        'chevron-down',
-        'expand-button',
-        { isExpanded: state.isExpanded },
-      ]"
-      @click="state.isExpanded = !state.isExpanded"
-      v-if="searchResults.success && searchResults.data.page.length"
-    >
-      {{ buttonText }}
-    </button>
+    <div v-else class="search-results">Zoekresultaten</div>
   </template>
 </template>
 
@@ -372,10 +380,12 @@ const listItems = mapServiceData(searchResults, (result) =>
 <style lang="scss" scoped>
 form {
   grid-area: bar;
+  padding-inline-start: var(--spacing-large);
   padding-block-start: var(--spacing-small);
   padding-block-end: var(--spacing-default);
   display: grid;
   gap: var(--spacing-small);
+  background-color: var(--color-primary);
 }
 
 .search-bar {
@@ -429,17 +439,16 @@ fieldset {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-default);
-  margin-inline-start: var(--spacing-large);
   color: var(--color-white);
+  min-height: 24px;
 }
 
 .search-results {
+  overflow: hidden;
   grid-area: results;
   display: grid;
   justify-items: stretch;
   padding-inline-start: var(--spacing-large);
-  padding-inline-end: var(--container-padding);
-  padding-block-end: var(--spacing-default);
   background-color: var(--color-secondary);
   gap: var(--spacing-default);
   position: relative;
@@ -448,6 +457,7 @@ fieldset {
     padding-block: var(--spacing-large);
     display: grid;
     gap: var(--spacing-default);
+    padding-inline-end: var(--container-padding);
   }
 
   &:not(.isExpanded) {
@@ -464,26 +474,26 @@ fieldset {
 
 .no-results {
   justify-self: center;
+  padding-block: var(--spacing-default);
 }
 
 .spinner {
   font-size: 2rem;
 }
 
+nav {
+  grid-column: 1 / 1;
+}
+
 .expand-button {
-  grid-area: expand;
-  padding-inline-end: var(--container-padding);
-  padding-inline-start: var(--spacing-large);
-  inline-size: 100%;
-  block-size: 1rem;
-  padding-block: var(--spacing-extrasmall);
-  white-space: nowrap;
-  display: flex;
+  position: sticky;
+  grid-area: scroll;
+  top: var(--spacing-large);
+  align-self: start;
+  margin-block-start: var(--spacing-default);
   justify-content: center;
-  background: var(--color-secondary);
 
   &:not(.isExpanded) {
-    margin-block-start: -1rem;
     background: none;
   }
 
@@ -492,6 +502,10 @@ fieldset {
   }
 }
 
+.expand-button::after {
+  position: absolute;
+}
+
 nav ul {
   display: grid;
 
@@ -503,11 +517,7 @@ nav ul {
     gap: var(--spacing-default);
     justify-items: start;
     padding-inline-end: var(--spacing-default);
-
-    &::after {
-      transform: rotate(-90deg);
-      margin-inline-start: auto;
-    }
+    align-items: center;
   }
 
   li {
@@ -523,5 +533,6 @@ nav ul {
 
 .pagination {
   margin-inline: auto;
+  margin-block-end: var(--spacing-default);
 }
 </style>

src/features/search/VacDetail.vue

@@ -16,11 +16,19 @@
       <div v-html="toelichtingSection.html" class="htmlcontent"></div>
     </section>
   </article>
+  <content-feedback
+    v-if="antwoordSection"
+    :name="antwoordSection.label"
+    :url="antwoordSection"
+    :current-section="idThing"
+  />
 </template>
 <script setup lang="ts">
 import { unescapedSanatizedWithIncreadesHeadingsHtml } from "@/helpers/html";
 import { Heading as UtrechtHeading } from "@utrecht/component-library-vue";
+import { ContentFeedback } from "../feedback/index";
 import { computed } from "vue";
+import type { CurrentFeedbackSection } from "../feedback/types";
 
 const knownSections = {
   toelichting: "toelichting",
@@ -33,6 +41,12 @@ const props = defineProps<{
   headingLevel: 2 | 3 | 4;
 }>();
 
+const idThing: CurrentFeedbackSection = {
+  label: props.title,
+  id: props.headingLevel.toString(),
+}
+
+
 const getSection = (
   sectionName: string,
   sectionLabel: string | undefined

src/layout/TheHeader.vue

@@ -114,14 +114,14 @@ const isRedacteur = computed(
 
 <style lang="scss" scoped>
 header {
-  background-color: var(--color-primary);
+  background-color: var(--color-secondary);
   display: grid;
   grid-template-areas:
     "bar bar"
-    "results results"
+    "results scroll"
     "expand expand"
     "nav nav";
-  grid-template-columns: auto auto;
+  grid-template-columns: auto 6rem;
   align-items: center;
 
   .log-out {
@@ -170,8 +170,4 @@ nav ul {
     border-radius: calc(var(--spacing-large) / 2);
   }
 }
-
-:deep(.search-bar) {
-  margin-inline-start: var(--spacing-large);
-}
 </style>

src/views/Beheer/BeheerLayout.vue

@@ -10,7 +10,7 @@
       >Gespreksresultaten</router-link
     >
     <router-link to="/Beheer/Contactverzoekformulieren"
-      >Contactverzoek formulieren</router-link
+      >Formulieren contactverzoek</router-link
     >
   </nav>
   <main>

src/views/Beheer/contactverzoek-formulieren/ContactverzoekFormulierBeheer.vue

@@ -5,7 +5,6 @@
     cancel-message="Nee"
     confirm-message="Ja"
   />
-
   <utrecht-heading :level="1">{{
     props.id ? "Formulier bewerken" : "Formulier aanmaken"
   }}</utrecht-heading>
@@ -27,7 +26,7 @@
   </div>
   <form class="container" @submit.prevent="submit">
     <label class="utrecht-form-label" for="titel"
-      ><span>Titel *</span>
+      ><span class="required">Titel </span>
       <input
         class="utrecht-textbox utrecht-textbox--html-input"
         required
@@ -38,7 +37,7 @@
     </label>
     <!-- dropdown for afdelingen -->
     <label class="utrecht-form-label">
-      <span>Afdeling *</span>
+      <span class="required">Afdeling </span>
       <select
         class="utrecht-select utrecht-select--html-select"
         v-model="selectedAfdeling"
@@ -106,7 +105,7 @@
       <!-- Conditional part for Dropdown -->
       <div v-if="isDropdownVraag(vraag)">
         <label>
-          <span>Antwoorden opties:</span>
+          <span>Antwoordopties:</span>
         </label>
         <template
           v-for="(option, optionIndex) in vraag.options"
@@ -159,7 +158,7 @@
       <!-- Conditional part for checkbox -->
       <div v-if="isCheckboxVraag(vraag)">
         <label>
-          <span>Answer Options:</span>
+          <span>Antwoordopties:</span>
         </label>
         <template
           v-for="(option, optionIndex) in vraag.options"
@@ -654,6 +653,6 @@ menu {
 }
 
 pre {
-    white-space: pre-line
+  white-space: pre-line;
 }
 </style>

src/views/Beheer/contactverzoek-formulieren/ContactverzoekFormulierenBeheer.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="header-wrapper">
-    <UtrechtHeading :level="1">Contactverzoek formulieren</UtrechtHeading>
+    <UtrechtHeading :level="1">Formulieren contactverzoek</UtrechtHeading>
     <router-link to="/Beheer/Contactverzoekformulier/"> Toevoegen </router-link>
   </div>
   <div v-if="loading"><SimpleSpinner /></div>
@@ -10,7 +10,7 @@
         <tr>
           <th>Titel</th>
           <th>Afdeling</th>
-          <th>edit/delete</th>
+          <th></th>
         </tr>
       </thead>
       <tbody>