Implement new color picker in listings category form, cleanup old code (#16770)

* remove old color picker initializer

* update listing category picker

* remove old color picker styles

app/assets/javascripts/initializePage.js

@@ -12,7 +12,7 @@
   initializeHeroBannerClose, initializeOnboardingTaskCard, initScrolling,
   nextPage:writable, fetching:writable, done:writable, adClicked:writable,
   initializePaymentPointers, initializeBroadcast, initializeDateHelpers,
-  initializeColorPicker, Runtime
+  Runtime
 */
 
 function callInitializers() {
@@ -35,7 +35,6 @@ function callInitializers() {
   initializeHeroBannerClose();
   initializeOnboardingTaskCard();
   initializeDateHelpers();
-  initializeColorPicker();
 }
 
 function initializePage() {

app/assets/javascripts/initializers/initializeColorPicker.js

@@ -1,21 +0,0 @@
-'use strict';
-
-function initializeColorPicker() {
-  var pickers = Array.from(document.getElementsByClassName('js-color-field'));
-
-  function colorValueChange(e) {
-    var field = e.target;
-    var sibling = '';
-    if (field.nextElementSibling) {
-      sibling = field.nextElementSibling;
-    } else {
-      sibling = field.previousElementSibling;
-    }
-
-    sibling.value = field.value;
-  }
-
-  pickers.forEach(function (picker) {
-    picker.addEventListener('change', colorValueChange);
-  });
-}

app/assets/stylesheets/components/forms.scss

@@ -253,31 +253,6 @@ textarea.crayons-textfield.crayons-textfield--ghost {
   white-space: pre-wrap;
 }
 
-///////////////////////////////////////////////////
-.crayons-color-selector {
-  --swatch-width: var(--su-6);
-  --swatch-height: var(--su-6);
-  @extend %form-styling;
-  padding: calc(0.5em - var(--border-width)) 0.5em;
-  height: 40px;
-
-  &::-webkit-color-swatch-wrapper {
-    padding: 0;
-    width: var(--swatch-width);
-    height: var(--swatch-height);
-  }
-
-  &::-webkit-color-swatch {
-    border: 0;
-  }
-
-  &--full {
-    width: 100%;
-    --swatch-width: 100%;
-  }
-}
-
-// TODO: cleanup duplicated .crayons-color-selector styles once usages have been replaced with the new component
 .c-color-picker {
   --swatch-width: var(--su-7);
   --swatch-height: var(--su-7);

app/views/admin/listing_categories/_form.html.erb

@@ -20,10 +20,11 @@
 
 <div class="form-group">
   <%= label_tag :social_preview_color, "Social preview color" %>
-  <%= color_field_tag :social_preview_color, @listing_category.social_preview_color, class: "form-control" %>
+  <%= text_field_tag :social_preview_color, @listing_category.social_preview_color || "#000000", class: "crayons-textfield", placeholder: "#000000", data: { color_picker: true, label_text: "Social preview color" } %>
 </div>
 
 <div class="form-group">
   <%= label_tag :social_preview_description, "Description" %>
   <%= text_area_tag :social_preview_description, @listing_category.social_preview_description, size: "100x10", class: "form-control" %>
 </div>
+<%= javascript_packs_with_chunks_tag "enhanceColorPickers", defer: true %>

cypress/integration/seededFlows/adminFlows/apps/editListingCategory.spec.js

@@ -0,0 +1,23 @@
+describe('Edit listing category', () => {
+  beforeEach(() => {
+    cy.testSetup();
+    cy.fixture('users/adminUser.json').as('user');
+
+    cy.get('@user').then((user) => {
+      cy.loginAndVisit(user, '/admin/apps/listings/categories/1/edit');
+    });
+  });
+
+  it('Changes the social preview color', () => {
+    // Both a button and an input should exist
+    cy.findByRole('button', { name: 'Social preview color' });
+    cy.findByRole('textbox', { name: 'Social preview color' })
+      .clear()
+      .type('#32a852')
+      .blur();
+    cy.findByRole('button', { name: 'Update Listing Category' }).click();
+    cy.findByText('Listing Category has been updated!').should('exist');
+    // Check the table entry reflects the new color
+    cy.findByRole('cell', { name: '#32a852' });
+  });
+});