[RELEASE] UI Changes and Fixes (#378)

* Minor change Fixes #173 * Remove Canada.ca link in footer Fixes #174 * Right align * feat: add google tag manager (#200) * feat: add google tag manager * chore: add plugin to nuxt config * ci: add google tag manager to terraform * ci: add tf vars to gh actions * ci: add google tag manager id to staging * Fix/ci issues (#204) * fix: add back removed div * ci: add staging branch to gh actions * ci: future proofing nuxt3 * fix: lint fixes * docs: add PR templates (#205) * fix: breadcrumbs accessibility * ci: add unsafe inline strict dynamic to support v-if (#203) * Copy of pull request template (#216) Copied from the PULL_REQUEST_TEMPLATE folder * ci: add google-analytics.com to the CSP (#217) * [Release] Minor changes after soft launch (#202) (#222) * Minor change Fixes #173 * Remove Canada.ca link in footer Fixes #174 * Right align * feat: add google tag manager (#200) * feat: add google tag manager * chore: add plugin to nuxt config * ci: add google tag manager to terraform * ci: add tf vars to gh actions * ci: add google tag manager id to staging * Fix/ci issues (#204) * fix: add back removed div * ci: add staging branch to gh actions * ci: future proofing nuxt3 * fix: lint fixes * docs: add PR templates (#205) Co-authored-by: Anik Brazeau <[email protected]> Co-authored-by: Dylan <[email protected]> Co-authored-by: Anik Brazeau <[email protected]> * Update issue templates * Update documentation (#225) * docs: update contentful vars * docs: adding scripts to make setting env vars easier * docs: update documentation on running the app * docs: update readme * docs: update readme * docs: add links * docs: update links * docs: add link to translation documentation * docs: small changes * docs: add conventional commit into the readme * docs: update info for pr preview url * Update issue templates * Update issue templates * docs: add new infra diagram * docs: update deloyment flowchart * feat: resource jump links * fix: lint issues * Update issue templates * Adding staging badge and link to main README * feat: resource collections * feat: resource collection - add section divider * fix: section divider render position * fix: linting * fix: collectionListItem border styling * Update release_template.md * Update .github/PULL_REQUEST_TEMPLATE/release_template.md Co-authored-by: Anik Brazeau <[email protected]> * Update app/locales/en.json Co-authored-by: Anik Brazeau <[email protected]> * fix: lint error due to missing comma * Update app/locales/en.json Co-authored-by: Anik Brazeau <[email protected]> * Update app/locales/fr.json Co-authored-by: Anik Brazeau <[email protected]> * feat: topic menu * fix: removed unused attrs * Collections copy edit (#244) * Change copy EN * Update content FR * fix: remove comments Co-authored-by: Daine Trinidad <[email protected]> * Copyedits for brevity * Make equivalent tweak in FR * chore: clean up comments * fix: menu logo overlap for mobile view * fix: lint issues * feat: add blank landing page for ux testing (#256) * fix: hot fix for linting * chore(deps): add renovate.json (#260) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Fix/menu ordering (#266) * fix: modify get topic query to sort by name ascending * chore: lint fixes * Adding content security header reporting directive to generate a report to the CDS CSP failures app. (#274) * Add sentry (#284) * feat: add sentry * feat: add sentry * chore: lint fix * chore: add sentry dsn env to tf plan and apply actions * Remove console log statement Co-authored-by: Daine Trinidad <[email protected]> * chore: remove renovate * docs: update diagram to include contentful pipeline (#287) * Change "Alpha banner" label for coherence with domain change (#312) * Change "Pilot" to "Alpha" to provide cohesive context * Make "Alpha" change in French too * Minor copyedit - change "Thèmes" to "Sujets" in FR (#311) * Fix french domain redirect to /fr path (#319) * chore: change subpath from themes to sujet * fix: redirect to /fr for french domain * chore: change sample gtag id * fix: currentLocale sometimes doesn't get set * chore: lint fixeS * refactor: removed ---> comments and frontend folder (#309) * fix: hide jump links section when there are no links (#315) * fix: hide jump links section when there are no links * fix: h1 smaller than body in mobile view * feat: add google fonts to the content security policy (#324) * feat: retrieve hyperlink data in page query * feat: render entry hyperlinks in resource * feat: flexible entry-hyperlink text * feat: add query for hyperlinks of type topic * feat: add query for hyperlinks of type collection * feat: render entry hyperlinks of type Topic and Collection * feat: add content types * fix: open menu tab order * Create testing-issue.md * Update issue templates Hiding instructions from published issue. * fix: menu text left-alignment * feat: add param for body links to render options * chore: lintfix * fix: paragraph spacing for about and contact pages * chore: lintfix * feat: add description to collection page * chore: lintfix * fix: set description width * feat: add links query to legalPageQuery * feat: add legal page content type to rich text rendering * feat: add method to get legal path prefix * feat: add LegalPage as content type * refactor: use common rich text render options * fix: linked draft resources breaking resource * refactor: remove log statements * fix: topic breaks when linked to draft resources * refactor: remove unused code * refactor: lintfix * fix: heading sizes and bullet spacing * fix: revert bullet rendering * refactor: consolidate rich text rendering options * refactor: remove commented out rich text render code * refactor: remove unused method myMethodCallback * refactor: remove commented code * fix: add check to verify callbackMethod in render options exists * refactor: rename method myCallback to addHeading * fix: add tailwind content configuration * refactor: remove unused code and console log statements * refactor: lintfix * refactor: rename component PageTitle as Heading1 * refactor: change prop name titleText to headingText * refactor: apply the heading1 component to the various pages * refactor: remove unused comments and whitespace * refactor: create lr-paragraph component * refactor: use lower case tag name * refactor: fix whitespace * refactor: rename Paragraph.vue to LrParagraph.vue * refactor: rename custom tags to follow 'r-' convention * fix: render breadcrumbs for about, contact, and legal pages * refactor: remove unused comments in Breadcrumbs.vue * fix: cmd-to-open resource changes current resource Co-authored-by: Anik Brazeau <[email protected]> Co-authored-by: Dylan <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: sylviamclaughlin <[email protected]> Co-authored-by: Hillary Lorimer <[email protected]>
cds-snc · Jan 24, 2023 · a02eec9 · a02eec9
1 parent afe7fc3
commit a02eec9
Show file tree

Hide file tree

Showing 21 changed files with 374 additions and 360 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -2,7 +2,7 @@
 name: Bug report
 about: Create a report to help us improve
 title: ''
-labels: Bug | Bogue
+labels: ''
 assignees: ''
 
 ---

diff --git a/.github/ISSUE_TEMPLATE/testing-issue.md b/.github/ISSUE_TEMPLATE/testing-issue.md
@@ -0,0 +1,39 @@
+---
+name: Issue from testing with users
+about: Report issue encountered by participants during evaluative research study
+title: ''
+labels: Research
+assignees: ''
+
+---
+
+<!-- Do not include any details that could be used to identify the participant. For example: names, participant ID #s, links to raw notes or workspaces, gender, department or team, specific role or project, location etc. If unsure please check with research lead or team lead. -->
+
+📆 **Study info**
+<!--_study name + Month + Year + lead_-->
+
+## 🚦 Issue severity 
+<!--_Was the participant able to reach their goal? Choose one._-->
+🟡 Minor - Yes, after overcoming minor difficulty and/or confusion.
+🔶 Moderate – Yes, after overcoming significant difficulty and/or confusion.
+🟥 Severe - No, the participant wasn't able to reach their goal or was unaware of an error that will prevent them from reaching their goal.
+
+💚 Enabler - This helped the participant do something more effectively or efficiently. 
+
+## 📝 What happened?
+<!--_Describe in as much detail as possible what happened during the research session relating to this issue._-->
+
+## 💬 In the participant's own words
+<!--_Include a quote from the participant on this issue (if available)._-->
+
+## 📗 User story
+
+As a ___, I need __, so that ___.
+
+
+## 📜 Recommendations
+<!-- Make one or recommendations on what might solve the problem. Even if the solution is ultimately something different, this is helpful for understanding what aspect of the product needs to change (e.g. content, information architecture, interactions)-->
+- [ ] 
+
+
+## ℹ️ More info
diff --git a/app/components/Breadcrumbs.vue b/app/components/Breadcrumbs.vue
@@ -8,7 +8,6 @@
           :to="localePath(homePath, breadcrumbs.locale)"
           class="font-medium text-xl hover:text-blue-800 hover:underline"
         >
-          <!-- {{ breadcrumbs.locale === 'en' ? 'Home' : 'Accueil' }} -->
           {{ $t('home') }}
         </nuxt-link>
         <font-awesome-icon
@@ -22,18 +21,6 @@
         :key="breadcrumb.name"
         class="whitespace-nowrap"
       >
-        <!-- For dynamic path -->
-        <!-- <nuxt-link
-          :to="
-            localePath({
-              name: 'topic-topic',
-              params: { topic: breadcrumb.urlSlug, name: breadcrumb.name },
-            })
-          "
-          class="font-medium hover:text-blue-800 hover:underline"
-        >-->
-
-        <!-- For full static site -->
         <nuxt-link
           :to="breadcrumb.path"
           class="font-medium text-xl hover:text-blue-800 hover:underline"

diff --git a/app/components/Header.vue b/app/components/Header.vue
@@ -42,9 +42,17 @@
           <div
             class="inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"
           >
-            <v-menu v-model="menuOpened" bottom :offset-y="true" class="mr-4">
+            <v-menu
+              v-model="menuOpened"
+              bottom
+              nudge-left="60"
+              :offset-y="true"
+              class="mr-6"
+              attach="#menuButton"
+            >
               <template #activator="{ on }">
                 <button
+                  id="menuButton"
                   class="p-3 text-xl rounded-lg hover:bg-gray-100"
                   v-on="on"
                 >
@@ -77,8 +85,12 @@
                   </nuxt-link>
                 </v-list-item>
               </v-list>
-              <v-list v-else>
-                <v-list-item v-for="(topic, index) in topicsFR" :key="index">
+              <v-list v-else class="w-max">
+                <v-list-item
+                  v-for="(topic, index) in topicsFR"
+                  :key="index"
+                  class="hover:bg-blue-100 cursor-pointer"
+                >
                   <nuxt-link
                     :to="localePath(`/sujet/${topic.urlSlug}`, 'fr')"
                     class="text-lg"
@@ -92,7 +104,7 @@
               v-for="locale in availableLocales"
               :key="locale.code"
               :href="switchLocalePath(locale.code)"
-              class="underline text-blue-900 hover:text-blue-700 text-xl ml-5"
+              class="underline text-blue-900 hover:text-blue-700 text-xl ml-12"
               :lang="locale.code"
               @click="switchLocale"
               >{{ locale.name }}

diff --git a/app/components/PageTitle.vue b/app/components/PageTitle.vue
diff --git a/app/components/ResourceListItem.vue b/app/components/ResourceListItem.vue
@@ -1,17 +1,12 @@
 <!-- Component View ================================================================================================-->
 
 <template>
-  <div
-    class="py-5 px-1.5 rounded-2xl mb-4 hover:bg-gray-100 cursor-pointer drop-shadow-2xl -mx-2 w-fit"
-    @click="navigateToResource()"
+  <nuxt-link
+    :to="localePath(resource.path, resource.locale)"
+    class="text-2xl font-medium text-blue-800 underline hover:text-blue-700 inline-block py-5 hover:bg-gray-100 px-1.5 rounded-2xl cursor-pointer mb-4 w-fit -mx-2"
   >
-    <nuxt-link
-      :to="localePath(resource.path, resource.locale)"
-      class="text-2xl font-medium text-blue-800 underline hover:text-blue-700"
-    >
-      {{ resource.title }}
-    </nuxt-link>
-  </div>
+    {{ resource.title }}
+  </nuxt-link>
 </template>
 
 <!-- Component Logic ===============================================================================================-->
@@ -43,15 +38,5 @@ export default {
       locale: String,
     },
   },
-
-  // Methods ----------------------------------------------------------------------------------------------------------
-
-  methods: {
-    navigateToResource() {
-      this.$router.push(
-        this.localePath(this.resource.path, this.resource.locale)
-      )
-    },
-  },
 }
 </script>
diff --git a/app/components/r-html-tags/rH1.vue b/app/components/r-html-tags/rH1.vue
@@ -0,0 +1,17 @@
+<template>
+  <h1 class="text-4xl sm:text-5xl font-bold">{{ headingText }}</h1>
+</template>
+
+<script>
+export default {
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: 'RH1',
+
+  props: {
+    headingText: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>
diff --git a/app/components/r-html-tags/rP.vue b/app/components/r-html-tags/rP.vue
@@ -0,0 +1,15 @@
+<!-- Component View ================================================================================================-->
+
+<template>
+  <p class="text-lg leading-relaxed tracking-wide text-gray-800 mt-5">
+    <slot></slot>
+  </p>
+</template>
+
+<!-- Component Logic ===============================================================================================-->
+
+<script>
+export default {
+  name: 'RP',
+}
+</script>
diff --git a/app/pages/about.vue b/app/pages/about.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="max-w-5xl mb-10">
-    <h1 class="font-bold text-4xl my-14">{{ aboutPage.title }}</h1>
+    <breadcrumbs
+      :breadcrumbs="breadcrumbs"
+      :current-page-title="aboutPage.title"
+    >
+    </breadcrumbs>
+    <r-h1 :heading-text="aboutPage.title" class="my-10"></r-h1>
     <div v-html="richText"></div>
   </div>
 </template>
@@ -12,8 +17,11 @@ import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
 import { aboutPageQuery } from '@/utils/queries'
 import { getHeadElement } from '@/utils/headElementAssembler'
 import { richTextRenderOptions } from '@/utils/richTextRenderOptions'
+import RH1 from '@/components/r-html-tags/rH1'
 
 export default {
+  name: 'About',
+  components: { RH1 },
   // Options ----------------------------------------------------------------------------------------------------------
 
   nuxtI18n: {
@@ -23,8 +31,6 @@ export default {
     },
   },
 
-  name: 'About',
-
   async asyncData({ $contentfulApi, payload }) {
     const locale = payload && payload.locale ? payload.locale : 'en-CA'
 
@@ -42,14 +48,17 @@ export default {
 
     const i18nLocaleCode = locale.substring(0, 2)
 
+    const breadcrumbs = []
+    breadcrumbs.locale = i18nLocaleCode
+
     const headElement = getHeadElement(aboutPage.title, i18nLocaleCode)
 
     const richText = documentToHtmlString(
       aboutPage.body.json,
-      richTextRenderOptions
+      richTextRenderOptions()
     )
 
-    return { aboutPage, richText, headElement }
+    return { aboutPage, richText, headElement, breadcrumbs }
   },
 
   head() {

diff --git a/app/pages/collection/_collection.vue b/app/pages/collection/_collection.vue
@@ -11,7 +11,8 @@
     <!-- Collection name & description - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  -->
 
     <div class="my-24 sm:my-28">
-      <PageTitle :title-text="collection.name"></PageTitle>
+      <r-h1 :heading-text="collection.name"></r-h1>
+      <div class="md:w-2/3" v-html="descriptionRichText"></div>
     </div>
 
     <!-- Resources - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  -->
@@ -61,6 +62,7 @@
 <!-- Page logic ====================================================================================================-->
 
 <script>
+import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
 import {
   generateBreadcrumbs,
   generateCollections,
@@ -70,10 +72,12 @@ import {
 import { getHeadElement } from '@/utils/headElementAssembler'
 import { getCollectionPageQuery } from '@/utils/queries'
 import CollectionListItem from '@/components/list-items/CollectionListItem'
+import { richTextRenderOptions } from '@/utils/richTextRenderOptions'
+import RH1 from '@/components/r-html-tags/rH1'
 
 export default {
   name: 'Collection',
-  components: { CollectionListItem },
+  components: { RH1, CollectionListItem },
   layout: 'expandedSearch',
 
   // Hooks ------------------------------------------------------------------------------------------------------------
@@ -141,12 +145,18 @@ export default {
       getLocaleCode(currentLocale)
     )
 
+    const descriptionRichText = documentToHtmlString(
+      collection.description?.json,
+      richTextRenderOptions()
+    )
+
     return {
       collection,
       breadcrumbs,
       resources,
       relatedCollections,
       headElement,
+      descriptionRichText,
     }
   },
 

diff --git a/app/pages/contact.vue b/app/pages/contact.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="max-w-5xl mb-10">
-    <h1 class="font-bold text-4xl my-14">{{ contactPage.title }}</h1>
+    <breadcrumbs
+      :breadcrumbs="breadcrumbs"
+      :current-page-title="contactPage.title"
+    >
+    </breadcrumbs>
+    <r-h1 :heading-text="contactPage.title" class="my-10"></r-h1>
     <div v-html="richText"></div>
   </div>
 </template>
@@ -12,8 +17,11 @@ import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
 import { aboutPageQuery } from '@/utils/queries'
 import { getHeadElement } from '@/utils/headElementAssembler'
 import { richTextRenderOptions } from '@/utils/richTextRenderOptions'
+import RH1 from '@/components/r-html-tags/rH1'
 
 export default {
+  name: 'Contact',
+  components: { RH1 },
   // Options ----------------------------------------------------------------------------------------------------------
 
   nuxtI18n: {
@@ -23,8 +31,6 @@ export default {
     },
   },
 
-  name: 'Contact',
-
   // Hooks ------------------------------------------------------------------------------------------------------------
 
   async asyncData({ $contentfulApi, payload }) {
@@ -45,14 +51,17 @@ export default {
 
     const i18nLocaleCode = locale.substring(0, 2)
 
+    const breadcrumbs = []
+    breadcrumbs.locale = i18nLocaleCode
+
     const headElement = getHeadElement(contactPage.title, i18nLocaleCode)
 
     const richText = documentToHtmlString(
       contactPage.body.json,
-      richTextRenderOptions
+      richTextRenderOptions()
     )
 
-    return { contactPage, richText, headElement }
+    return { contactPage, richText, headElement, breadcrumbs }
   },
 
   head() {