Fixed typos in npm.php template.

PublicisSapient · Jan 25, 2023 · 3ab0173 · 3ab0173
1 parent c780723
commit 3ab0173
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 68 deletions.
diff --git a/content/body/textbox.php b/content/body/textbox.php
@@ -95,70 +95,6 @@
 }
 </script>
 
-<!--
-<h2>HTML version with character count</h2>
-
-<?php includeStats(array('isForNewBuilds' => true)) ?>
-
-
-
-<div id="charcount-example" class="enable-example">
-  <form class="enable-form-example">
-    <fieldset>
-      <legend>Payment information</legend>
-
-      <div class="enable-form-example__fieldset-inner-container">
-        <div>
-          <label for="ccinfo--example2">Billing Address:</label>
-          <input type="text" name="ccinfo--example2" id="ccinfo--example2">
-        </div>
-
-        <div>
-          <label for="notes--example2" class="textarea-label">Delivery Notes:</label>
-          <textarea id="notes--example2" data-has-character-count="true" name="notes--example2" maxlength="100" data-announce-after-space="true"></textarea>
-        </div>
-
-        <div>
-          <label for="gift-card-text--example2" class="textarea-label">Gift Card:</label>
-          <textarea id="gift-card-text--example2" data-has-character-count="true" name="gift-card-text--example2" maxlength="150"  data-screen-reader-text="${charsRemaining} characters remaining." aria-describedby="gift-card__desc" data-announce-after-escape="true"></textarea>
-          <label id="gift-card__desc" class="desc">Write a personalized message on the gift card for the recipient.</label>
-        </div>
-      </div>
-    </fieldset>
-
-
-    <button type="submit">Submit</button>
-  </form>
-
-</div>
-
-<?php includeShowcode("charcount-example")?>
--->
-<script type="application/json" id="charcount-example-props">
-{
-  "replaceHtmlRules": {},
-  "steps": [
-
-    {
-      "label": "Place an aria-describedby for instructions",
-      "highlight": "%INLINE%charcount-example ||| aria-describedby"
-    },
-    {
-      "label": "Code the instructions for this component.",
-      "highlight": "%INLINE%enable-character-count__global ||| id=\"character-count__desc\"",
-      "notes": "This is the target of the <code>aria-describedby</code> in the previous step."
-    },
-    {
-      "label": "Have an ARIA live region to announce when user starts approaching character count limit",
-      "highlight": "%INLINE%enable-character-count__global ||| %OPENCLOSECONTENTTAG%output",
-      "notes": ""
-    }
-  ]
-}
-</script>
-
-
-
 <h2>ARIA example</h2>
 
 <?php includeStats(array('isForNewBuilds' => false, 'comment' => "Recommended only if you needed to create a JavaScript WYSIWYG editor.")) ?>
@@ -279,12 +215,39 @@
 
 </div>
 
+<p>The character counter uses a JavaScript library to implement it.  Below is the HTML markup needed for it to work, as well as instructions on how to load the library in your own projects.</p>
+
+<?php includeShowcode("charcount-example")?>
+
+<script type="application/json" id="charcount-example-props">
+{
+  "replaceHtmlRules": {},
+  "steps": [
+
+    {
+      "label": "Place an aria-describedby for instructions",
+      "highlight": "%INLINE%charcount-example ||| aria-describedby"
+    },
+    {
+      "label": "Code the instructions for this component.",
+      "highlight": "%INLINE%enable-character-count__global ||| id=\"character-count__desc\"",
+      "notes": "This is the target of the <code>aria-describedby</code> in the previous step."
+    },
+    {
+      "label": "Have an ARIA live region to announce when user starts approaching character count limit",
+      "highlight": "%INLINE%enable-character-count__global ||| %OPENCLOSECONTENTTAG%output",
+      "notes": ""
+    }
+  ]
+}
+</script>
+
 
 
 <?= includeNPMInstructions(
     'enable-character-count', 
     array(),
-    'enable-character-count',
+    '',
     false, 
     array(
       'noCSS' => true

diff --git a/templates/includes/npm.php b/templates/includes/npm.php
@@ -221,13 +221,23 @@
       href="https://github.com/PublicisSapient/enable-a11y">cloning the enable source code</a> from github.
   </li>
   <li>
-    If you want to load the module as a native ES6 module, copy <code>js/modules/<?= $moduleName ?>.js</code>,
+    If you want to load the module as a native ES6 module, copy <code>js/modules/<?= $moduleName ?>.js</code>
     <?php
+       if (!($other["noCSS"] ?? false)) {
+         echo ",";
+       }
+
        foreach ($supportingModuleNames as $name) {
          echo '<code>' . $name . '</code>';
        }
-    ?> and <code>css/<?= $moduleName ?>.css</code> from the repo and put
-    them
+
+       if (!($other["noCSS"] ?? false)) {
+    ?>
+      and <code>css/<?= $moduleName ?>.css</code>
+    <?php
+       }
+    ?>
+    from the repo and put them
     in the appropriate directories in your project (all JS files must be in the same directory).
   </li>
   <li>