From 45d480de28f7fd2781193dbc9a1c0144c589f7a5 Mon Sep 17 00:00:00 2001
From: Igor Barato <igor.barato@gmail.com>
Date: Wed, 5 Feb 2025 18:15:53 -0300
Subject: [PATCH] D4G-211: Included the Style widget on CKEditor and enabled a
 button style option for editors.

---
 config/default/editor.editor.full.yml                 | 6 ++++++
 config/default/filter.format.full.yml                 | 2 +-
 docroot/themes/custom/drupal4gov/css/base/forms.css   | 2 +-
 docroot/themes/custom/drupal4gov/sass/base/forms.scss | 4 ++--
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/config/default/editor.editor.full.yml b/config/default/editor.editor.full.yml
index 60675b22..f0dc44fb 100644
--- a/config/default/editor.editor.full.yml
+++ b/config/default/editor.editor.full.yml
@@ -12,6 +12,7 @@ settings:
   toolbar:
     items:
       - heading
+      - style
       - bold
       - italic
       - underline
@@ -53,6 +54,11 @@ settings:
       multiBlock: true
     ckeditor5_sourceEditing:
       allowed_tags: {  }
+    ckeditor5_style:
+      styles:
+        -
+          label: Button
+          element: '<a class="button button--primary">'
 image_upload:
   status: true
   scheme: public
diff --git a/config/default/filter.format.full.yml b/config/default/filter.format.full.yml
index 0133a4f3..a2569c11 100644
--- a/config/default/filter.format.full.yml
+++ b/config/default/filter.format.full.yml
@@ -12,6 +12,6 @@ filters:
     status: false
     weight: -10
     settings:
-      allowed_html: ''
+      allowed_html: '<a class="button button--primary">'
       filter_html_help: true
       filter_html_nofollow: false
diff --git a/docroot/themes/custom/drupal4gov/css/base/forms.css b/docroot/themes/custom/drupal4gov/css/base/forms.css
index d76f8540..c7196a64 100644
--- a/docroot/themes/custom/drupal4gov/css/base/forms.css
+++ b/docroot/themes/custom/drupal4gov/css/base/forms.css
@@ -280,6 +280,7 @@ select[multiple] option {
   cursor: pointer;
   font-size: 18px;
   font-weight: 600;
+  text-decoration: none;
 }
 .button:hover {
   background-color: #e5e5e5;
@@ -305,7 +306,6 @@ select[multiple] option {
   border: 3px solid var(--blue-bright);
   border-radius: 26px;
   color: white;
-  text-decoration: none;
   padding-block: 2rem;
 }
 .button.button--outline:hover {
diff --git a/docroot/themes/custom/drupal4gov/sass/base/forms.scss b/docroot/themes/custom/drupal4gov/sass/base/forms.scss
index 79af68e7..08a70fd8 100644
--- a/docroot/themes/custom/drupal4gov/sass/base/forms.scss
+++ b/docroot/themes/custom/drupal4gov/sass/base/forms.scss
@@ -217,6 +217,7 @@ select {
   cursor: pointer;
   font-size: 18px;
   font-weight: 600;
+  text-decoration: none;
 
   &:hover {
     background-color: #e5e5e5;
@@ -247,7 +248,6 @@ select {
     border: 3px solid var(--blue-bright);
     border-radius: 26px;
     color: white;
-    text-decoration: none;
     padding-block: 2rem;
 
     &:hover {
@@ -297,7 +297,7 @@ select {
   }
 }
 
-.form-item-references { 
+.form-item-references {
   margin-top: 20px;
 
   label {