DEV: use dasherize, update user-input classnames to data-attrs (#33)

discourse · Sep 22, 2023 · 68b9972 · 68b9972
1 parent d44bccd
commit 68b9972
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 18 deletions.
diff --git a/javascripts/discourse/components/custom-footer.hbs b/javascripts/discourse/components/custom-footer.hbs
@@ -13,13 +13,19 @@
         <div class="links">
           {{#each this.linkSections as |section|}}
             <div class="list">
-              <span class={{section.className}} title={{section.title}}>
+              <span
+                data-easyfooter-section={{section.dataName}}
+                title={{section.title}}
+              >
                 {{section.text}}
               </span>
 
               <ul>
                 {{#each section.childLinks as |link|}}
-                  <li class="footer-section-link-wrapper {{link.className}}">
+                  <li
+                    class="footer-section-link-wrapper"
+                    data-easyfooter-link={{link.dataName}}
+                  >
                     <a
                       class="footer-section-link"
                       title={{link.title}}
@@ -39,7 +45,8 @@
         <div class="footer-links">
           {{#each this.smallLinks as |link|}}
             <a
-              class="small-link {{link.className}}"
+              class="small-link"
+              data-easyfooter-small-link={{link.dataName}}
               title={{link.title}}
               target={{link.target}}
               href={{link.href}}
@@ -52,7 +59,8 @@
         <div class="social">
           {{#each this.socialLinks as |link|}}
             <a
-              class="social-link {{link.className}}"
+              class="social-link"
+              data-easyfooter-social-link={{link.dataName}}
               title={{link.title}}
               target={{link.target}}
               href={{link.href}}

diff --git a/javascripts/discourse/components/custom-footer.js b/javascripts/discourse/components/custom-footer.js
@@ -1,9 +1,5 @@
 import Component from "@glimmer/component";
-
-// Used instead of dasherize for backwards compatibility with stable
-const getClassName = (text) => {
-  return text.toLowerCase().replace(/\s/g, "-");
-};
+import { dasherize } from "@ember/string";
 
 export default class extends Component {
   mainHeading = settings.Heading;
@@ -15,15 +11,15 @@ export default class extends Component {
       const fragments = link.split(",").map((fragment) => fragment.trim());
       const parent = fragments[0].toLowerCase();
       const text = fragments[1];
-      const className = getClassName(text);
+      const dataName = dasherize(text);
       const href = fragments[2];
       const target = fragments[3] === "blank" ? "_blank" : "";
       const title = fragments[4];
 
       return {
         parent,
         text,
-        className,
+        dataName,
         href,
         target,
         title,
@@ -36,14 +32,14 @@ export default class extends Component {
       const fragments = section.split(",").map((fragment) => fragment.trim());
       const parentFor = fragments[0].toLowerCase();
       const text = fragments[0];
-      const className = getClassName(text);
+      const dataName = dasherize(text);
       const childLinks = this.linkArray.filter(
         (link) => link.parent === parentFor
       );
 
       return {
         text,
-        className,
+        dataName,
         childLinks,
       };
     });
@@ -53,13 +49,13 @@ export default class extends Component {
     .map((link) => {
       const fragments = link.split(",").map((fragment) => fragment.trim());
       const text = fragments[0];
-      const className = getClassName(text);
+      const dataName = dasherize(text);
       const href = fragments[1];
       const target = fragments[2] === "blank" ? "_blank" : "";
 
       return {
         text,
-        className,
+        dataName,
         href,
         target,
       };
@@ -70,15 +66,15 @@ export default class extends Component {
     .map((link) => {
       const fragments = link.split(",").map((fragment) => fragment.trim());
       const text = fragments[0];
-      const className = getClassName(text);
+      const dataName = dasherize(text);
       const title = fragments[1];
       const href = fragments[2];
       const target = fragments[3] === "blank" ? "_blank" : "";
       const icon = fragments[4].toLowerCase();
 
       return {
         text,
-        className,
+        dataName,
         title,
         href,
         target,

diff --git a/test/acceptance/easy-footer-test.js b/test/acceptance/easy-footer-test.js
@@ -2,7 +2,7 @@ import { visit } from "@ember/test-helpers";
 import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 import { test } from "qunit";
 
-acceptance("easy-footer", function (needs) {
+acceptance("Easy Footer - enabled", function (needs) {
   needs.user();
 
   test("shows the footer", async function (assert) {
@@ -17,3 +17,14 @@ acceptance("easy-footer", function (needs) {
     assert.dom(".below-footer-outlet .third-box .social").exists();
   });
 });
+
+acceptance("Easy Footer - login required", function (needs) {
+  needs.settings({ login_required: true });
+
+  test("hides the footer on the login required page", async function (assert) {
+    settings.Show_footer_on_login_required_page = false;
+    await visit("/");
+
+    assert.dom(".below-footer-outlet.custom-footer .wrap").doesNotExist();
+  });
+});