Move color pickers validation to a util function

What does this MR do?

This MR moves the color pickers validation to a util function and brings this component more inline with GitLab UI by using invalidFeedback and state to define the validity of the component.

This means that each color picker can either make use of the util or present it's own validation method and means future uses can control how the validation is calculated and rendered.

Screenshots (strongly suggested)

Screen_Recording_2021-01-19_at_13.09.04

Does this MR meet the acceptance criteria?

Conformity

• [-] Changelog entry
• [-] Documentation (if required)
• Code review guidelines
• Merge request performance guidelines
• Style guides
• [-] Database guides
• [-] Separation of EE specific content

Availability and Testing

Note: this is currently not in use anywhere in the codebase so...

1. Find a suitable Vue component to embed this in locally
2. Import the util and color picker into the Vue component
3. Add to the template and create a method to save the color and validate it

For instance, this patch would make it appear on the compliance dashboard

Index: ee/app/assets/javascripts/compliance_dashboard/components/dashboard.vue
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/dashboard.vue b/ee/app/assets/javascripts/compliance_dashboard/components/dashboard.vue
--- a/ee/app/assets/javascripts/compliance_dashboard/components/dashboard.vue	(revision 89fc1dd8d539fa93b638c0a7029f88de8a604970)
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/dashboard.vue	(date 1611061835616)
@@ -2,6 +2,8 @@
 import Cookies from 'js-cookie';
 import { GlTabs, GlTab } from '@gitlab/ui';
 import { __ } from '~/locale';
+import { validateHexColor } from '~/lib/utils/color_utils';
+import ColorPicker from '~/vue_shared/components/color_picker/color_picker.vue';
 import MergeRequestsGrid from './merge_requests/grid.vue';
 import EmptyState from './empty_state.vue';
 import MergeCommitsExportButton from './merge_requests/merge_commits_export_button.vue';
@@ -15,6 +17,7 @@
     GlTab,
     GlTabs,
     MergeCommitsExportButton,
+    ColorPicker,
   },
   props: {
     emptyStateSvgPath: {
@@ -36,6 +39,11 @@
       default: '',
     },
   },
+  data() {
+    return {
+      color: null,
+    };
+  },
   computed: {
     hasMergeRequests() {
       return this.mergeRequests.length > 0;
@@ -43,11 +51,17 @@
     hasMergeCommitsCsvExportPath() {
       return this.mergeCommitsCsvExportPath !== '';
     },
+    validColor() {
+      return validateHexColor(this.color);
+    },
   },
   methods: {
     showTabs() {
       return Cookies.get(COMPLIANCE_TAB_COOKIE_KEY) === 'true';
     },
+    saveColor(color) {
+      this.color = color;
+    },
   },
   strings: {
     heading: __('Compliance Dashboard'),
@@ -59,6 +73,14 @@
 
 <template>
   <div v-if="hasMergeRequests" class="compliance-dashboard">
+    <color-picker
+      :invalid-feedback="__('Please enter a valid hex (#RRGGBB or #RGB) color value')"
+      :label="__('Background color')"
+      set-color="#FF0000"
+      :state="validColor"
+      @input="saveColor"
+    />
+
     <header>
       <div class="gl-mt-5 d-flex">
         <h4 class="gl-flex-grow-1 gl-my-0">{{ $options.strings.heading }}</h4>

• [-] Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.
• [-] Tested in all supported browsers
• [-] Informed Infrastructure department of a default or new setting change, if applicable per definition of done

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

• [-] Label as security and @ mention @gitlab-com/gl-security/appsec
• [-] The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
• [-] Security reports checked/validated by a reviewer from the AppSec team