From 4acec500876f2ded25384bd768a86f607cb610db Mon Sep 17 00:00:00 2001
From: Ryan Coulson <ryan.coulson@ec.gc.ca>
Date: Mon, 13 Jan 2025 14:05:32 -0500
Subject: [PATCH] add colour picker for intro title, subtitle and button

---
 package-lock.json                             |  7 +-
 package.json                                  |  1 +
 .../helpers/colour-picker-input.vue           | 95 +++++++++++++++++++
 src/components/helpers/metadata-content.vue   | 37 +++++++-
 src/components/metadata-editor.vue            | 20 +++-
 src/definitions.ts                            |  6 ++
 src/lang/lang.csv                             |  5 +
 src/main.ts                                   |  4 +
 src/shims-vue.d.ts                            |  1 +
 9 files changed, 171 insertions(+), 5 deletions(-)
 create mode 100644 src/components/helpers/colour-picker-input.vue

diff --git a/package-lock.json b/package-lock.json
index c9c73e74..ed15d89e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
                 "url": "^0.11.3",
                 "uuid": "^9.0.0",
                 "vue": "^3.4.37",
+                "vue-accessible-color-picker": "^5.1.1",
                 "vue-class-component": "^8.0.0-rc.1",
                 "vue-final-modal": "^4.4.5",
                 "vue-i18n": "^9.2.2",
@@ -10087,9 +10088,9 @@
             }
         },
         "node_modules/vue-accessible-color-picker": {
-            "version": "5.0.1",
-            "resolved": "https://registry.npmjs.org/vue-accessible-color-picker/-/vue-accessible-color-picker-5.0.1.tgz",
-            "integrity": "sha512-IaxDTzW652blWmaNNbqQZzORQAbP19sdO7oJ5fvJIfVizWr2fVV+3z39ORI210Ee7l8YiD5FhpOY/XrToQCBwg==",
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/vue-accessible-color-picker/-/vue-accessible-color-picker-5.1.1.tgz",
+            "integrity": "sha512-vk+0OicECr58EnxaQ8h/MuYfzRLS7FgBGUkBVEiRy71j/XVPZ84QCwho2KsURGeoDSr16ELI1+Ao3Hqp2PPCHw==",
             "peerDependencies": {
                 "vue": "^3.2.x"
             }
diff --git a/package.json b/package.json
index bdd0525f..c22db456 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
         "url": "^0.11.3",
         "uuid": "^9.0.0",
         "vue": "^3.4.37",
+        "vue-accessible-color-picker": "^5.1.1",
         "vue-class-component": "^8.0.0-rc.1",
         "vue-final-modal": "^4.4.5",
         "vue-i18n": "^9.2.2",
diff --git a/src/components/helpers/colour-picker-input.vue b/src/components/helpers/colour-picker-input.vue
new file mode 100644
index 00000000..7b4bd382
--- /dev/null
+++ b/src/components/helpers/colour-picker-input.vue
@@ -0,0 +1,95 @@
+<template>
+    <div class="flex flex-col items-start relative">
+        <div class="metadata-input flex flex-col p-0 w-full">
+            <div class="flex">
+                <div
+                    @click="togglePicker"
+                    @keypress.enter="togglePicker"
+                    :style="{ 'background-color': selectedColour }"
+                    :class="!disabled ? 'cursor-pointer' : ''"
+                    class="flex flex-1 rounded w-10 mr-1"
+                    :tabindex="!disabled ? 0 : -1"
+                    v-tippy="{
+                        delay: '200',
+                        placement: 'top',
+                        content: !disabled
+                            ? isOpen
+                                ? $t('editor.colourPicker.close')
+                                : $t('editor.colourPicker.open')
+                            : '',
+                        animateFill: true
+                    }"
+                >
+                    <span v-if="isOpen" class="text-white mx-auto self-center font-bold mix-blend-difference">X</span>
+                </div>
+                <input
+                    :disabled="disabled"
+                    class="text-center my-2"
+                    :aria-label="name"
+                    :value="selectedColour"
+                    @input="(evt) => selectedColour = (evt.target as HTMLInputElement).value"
+                />
+            </div>
+            <ColorPicker
+                v-if="isOpen"
+                :color="value"
+                alpha-channel="hide"
+                :visible-formats="['hex']"
+                default-format="hex"
+                @color-change="(evt: any) => this.selectedColour = evt.cssColor"
+            >
+                <template #copy-button></template>
+            </ColorPicker>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Prop, Vue, Watch } from 'vue-property-decorator';
+
+export default class LoadingPageV extends Vue {
+    @Prop() value!: string;
+    @Prop() name!: string;
+    @Prop() disabled?: boolean;
+
+    isOpen: boolean = false;
+    selectedColour: string = '';
+
+    beforeMount(): void {
+        this.selectedColour = this.value;
+    }
+
+    /**
+     * If component is enabled, toggle the colour picker visibility.
+     */
+    togglePicker(): void {
+        if (!this.disabled) this.isOpen = !this.isOpen;
+    }
+
+    /**
+     * Watches the selectedColour property and emits a change event when it changes. The event emitted mimics an "HTMLInputEvent" so that
+     * we don't need to make any modifications to the `metadataChanged` event listener in `metadata-content.vue`.
+     * @param evt a string representing the new colour value.
+     */
+    @Watch('selectedColour')
+    colourChanged(evt: Event): void {
+        // If the value didn't change, don't fire the event.
+        if (this.value === this.selectedColour) return;
+
+        this.$emit('change', {
+            target: {
+                name: this.name,
+                value: this.selectedColour
+            }
+        });
+    }
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.vacp-color-inputs),
+:deep(.vacp-copy-button),
+:deep(.vacp-range-input-label-text--hue) {
+    display: none;
+}
+</style>
diff --git a/src/components/helpers/metadata-content.vue b/src/components/helpers/metadata-content.vue
index 7381ca9c..c780b686 100644
--- a/src/components/helpers/metadata-content.vue
+++ b/src/components/helpers/metadata-content.vue
@@ -177,6 +177,35 @@
                 </div>
                 <p v-if="!editing">{{ metadata.logoAltText || $t('editor.metadataForm.na') }}</p>
             </div>
+            <div class="flex flex-wrap gap-4">
+                <div class="metadata-item">
+                    <span class="metadata-label">{{ $t('editor.introTitleColour') }}</span>
+                    <ColourPickerInput
+                        name="titleColour"
+                        :value="metadata.titleColour"
+                        @change="metadataChanged"
+                        :disabled="!editing"
+                    />
+                </div>
+                <div class="metadata-item">
+                    <span class="metadata-label">{{ $t('editor.introSubtitleColour') }}</span>
+                    <ColourPickerInput
+                        name="subtitleColour"
+                        :value="metadata.subtitleColour"
+                        @change="metadataChanged"
+                        :disabled="!editing"
+                    />
+                </div>
+                <div class="metadata-item">
+                    <span class="metadata-label">{{ $t('editor.introButtonColour') }}</span>
+                    <ColourPickerInput
+                        name="buttonColour"
+                        :value="metadata.buttonColour"
+                        @change="metadataChanged"
+                        :disabled="!editing"
+                    />
+                </div>
+            </div>
         </section>
     </section>
     <!-- Section: End of page information -->
@@ -239,8 +268,14 @@
 
 <script lang="ts">
 import { MetadataContent } from '@/definitions';
-import { Prop, Vue } from 'vue-property-decorator';
+import { Options, Prop, Vue } from 'vue-property-decorator';
+import ColourPickerInput from './colour-picker-input.vue';
 
+@Options({
+    components: {
+        ColourPickerInput: ColourPickerInput
+    }
+})
 export default class MetadataEditorV extends Vue {
     @Prop() metadata!: MetadataContent;
     @Prop({ default: true }) editing!: boolean;
diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
index 9a1226a6..9fdc6863 100644
--- a/src/components/metadata-editor.vue
+++ b/src/components/metadata-editor.vue
@@ -680,6 +680,9 @@ export default class MetadataEditorV extends Vue {
         logoPreview: '',
         logoName: '',
         logoAltText: '',
+        titleColour: '#1f2937',
+        subtitleColour: '#6b7280',
+        buttonColour: '#00d2d3',
         contextLink: '',
         contextLabel: '',
         tocOrientation: '',
@@ -695,6 +698,9 @@ export default class MetadataEditorV extends Vue {
         logoPreview: '',
         logoName: '',
         logoAltText: '',
+        titleColour: '',
+        subtitleColour: '',
+        buttonColour: '',
         contextLink: '',
         contextLabel: '',
         tocOrientation: '',
@@ -917,7 +923,10 @@ export default class MetadataEditorV extends Vue {
                     src: ''
                 },
                 title: this.metadata.introTitle,
-                subtitle: this.metadata.introSubtitle
+                subtitle: this.metadata.introSubtitle,
+                titleColour: this.metadata.titleColour,
+                subtitleColour: this.metadata.subtitleColour,
+                buttonColour: this.metadata.buttonColour
             },
             slides: [],
             contextLabel: this.metadata.contextLabel,
@@ -1295,6 +1304,9 @@ export default class MetadataEditorV extends Vue {
         this.metadata.title = config.title;
         this.metadata.introTitle = config.introSlide.title;
         this.metadata.introSubtitle = config.introSlide.subtitle;
+        this.metadata.titleColour = config.introSlide.titleColour ?? '#1f2937';
+        this.metadata.subtitleColour = config.introSlide.subtitleColour ?? '#6b7280';
+        this.metadata.buttonColour = config.introSlide.buttonColour ?? '#00d2d3';
         this.metadata.contextLink = config.contextLink;
         this.metadata.contextLabel = config.contextLabel;
         this.metadata.tocOrientation = config.tocOrientation;
@@ -1510,6 +1522,9 @@ export default class MetadataEditorV extends Vue {
             config.title = this.metadata.title;
             config.introSlide.title = this.metadata.introTitle;
             config.introSlide.subtitle = this.metadata.introSubtitle;
+            config.introSlide.titleColour = this.metadata.titleColour;
+            config.introSlide.subtitleColour = this.metadata.subtitleColour;
+            config.introSlide.buttonColour = this.metadata.buttonColour;
             config.contextLink = this.metadata.contextLink;
             config.contextLabel = this.metadata.contextLabel;
             config.tocOrientation = this.metadata.tocOrientation;
@@ -1557,6 +1572,9 @@ export default class MetadataEditorV extends Vue {
             title: '',
             introTitle: '',
             introSubtitle: '',
+            titleColour: '',
+            subtitleColour: '',
+            buttonColour: '',
             contextLink: '',
             contextLabel: '',
             dateModified: '',
diff --git a/src/definitions.ts b/src/definitions.ts
index 2b67efd4..1d5cc433 100644
--- a/src/definitions.ts
+++ b/src/definitions.ts
@@ -36,6 +36,9 @@ export interface MetadataContent {
     logoPreview: string;
     logoName: string;
     logoAltText: string;
+    titleColour?: string;
+    subtitleColour?: string;
+    buttonColour?: string;
     contextLink: string;
     contextLabel: string;
     tocOrientation: string;
@@ -133,6 +136,9 @@ export interface Intro {
     title: string;
     subtitle: string;
     blurb?: string;
+    titleColour?: string;
+    subtitleColour?: string;
+    buttonColour?: string;
 }
 
 export interface Slide {
diff --git a/src/lang/lang.csv b/src/lang/lang.csv
index 09a71866..1dbaec05 100644
--- a/src/lang/lang.csv
+++ b/src/lang/lang.csv
@@ -104,6 +104,11 @@ editor.logoPreview,Logo preview,1,Aperçu du logo,1
 editor.logoPreviewAltText,Preview of product logo,1,Aperçu du logo du produit,0
 editor.logoAltText,Logo alt text,1,Lien contextuel,1
 editor.logoAltText.desc,"For accessibility purposes, provide description text for the logo.",1,"Pour des raisons d'accessibilité, fournissez un texte descriptif pour le logo.",0
+editor.introTitleColour,"Title colour",1,Couleur du titre,0
+editor.introSubtitleColour,"Subtitle colour",1,Couleur du sous-titre,0
+editor.introButtonColour,"Button colour",1,Couleur du bouton,0
+editor.colourPicker.open,Open colour picker,1,Ouvrir le sélecteur de couleur,0
+editor.colourPicker.close,Close colour picker,1,Fermer le sélecteur de couleur,0
 editor.contextLink,Context link,1,Lien contextuel,1
 editor.contextLink.info,Context link shows up at the bottom of the page to provide additional resources for interested users.,1,Le lien contextuel apparaît au bas de la page et fournit des ressources supplémentaires aux utilisateurs intéressés.,1
 editor.contextLabel,Context label,1,Étiquette de contexte,1
diff --git a/src/main.ts b/src/main.ts
index f907123e..b8ee47e9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -32,6 +32,9 @@ import HighchartsVue from 'highcharts-vue';
 import Message from 'vue-m-message';
 import 'vue-m-message/dist/style.css';
 
+import ColorPicker from 'vue-accessible-color-picker';
+import 'vue-accessible-color-picker/styles';
+
 import StorylinesViewer from 'ramp-storylines_demo-scenarios-pcar';
 import 'ramp-storylines_demo-scenarios-pcar/dist/style.css';
 
@@ -51,6 +54,7 @@ app.use(pinia)
     .use(Message)
     .use(StorylinesViewer)
     .use(VueMarkdownEditor)
+    .use(ColorPicker)
     .use(vfm);
 
 app.directive('focus-container', FocusContainer);
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index 5caf11ed..bf6385d9 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -18,3 +18,4 @@ declare module 'vue-m-message';
 declare module 'vue3-json-editor';
 declare module 'highcharts-vue';
 declare module 'vue-tippy';
+declare module 'vue-accessible-color-picker';