eschweitzer78/2024-06-13-0900 (#366)

* Add comments * Fix a11y issue * Fix a11y issue * Fix missing markup * Versioning * A11y issue with form steps titles * Fixes to tests and icons * Remove unncessary template * Fix NSW DS SideNav test
eschweitzer78 · Jun 13, 2024 · 29ca3e8 · 29ca3e8
1 parent 7888b94
commit 29ca3e8
Show file tree

Hide file tree

Showing 27 changed files with 866 additions and 88 deletions.
diff --git a/sfGpsDs/main/default/lwc/sfGpsDsFormBlockOsN/sfGpsDsFormBlockOsN.html b/sfGpsDs/main/default/lwc/sfGpsDsFormBlockOsN/sfGpsDsFormBlockOsN.html
diff --git a/sfGpsDs/main/default/lwc/sfGpsDsOnClickOutside/sfGpsDsOnClickOutside.js b/sfGpsDs/main/default/lwc/sfGpsDsOnClickOutside/sfGpsDsOnClickOutside.js
@@ -38,7 +38,18 @@ function processArguments(value) {
 export default class {
   _sfGpsDsOnClickOutside = {};
 
-  /* bind must be called only once in the renderedCallback method */
+  /* bind must be called only once in the renderedCallback method
+     pass "this" as the first argument, 
+     the name of an lwc:ref in your template as the second argument (string)
+     your callback as the third argument, function or object
+      if it's a function it will be called when a click occurs outside (event in param)
+      if it's an object, have the following attributes
+        - handler is the function that will be called backed
+        - middleware (optional) is the function that will transform the event
+        - events (optional) is the array of event types that are to be monitored
+        - active (optional) indicates whether the handler is active
+
+   */
   bind(pel, ref, value) {
     const uuid = window.crypto
       ? crypto.randomUUID()
@@ -80,7 +91,7 @@ export default class {
     }
   }
 
-  /* unbind must be call only once in the disconnectedCallback method */
+  /* unbind must be called only once in the disconnectedCallback method */
   unbind(pel, ref) {
     const el = pel.refs[ref];
 

diff --git a/...t/lwc/sfGpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarousel/sfGpsDsAuNswCardCarousel.html b/...t/lwc/sfGpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarousel/sfGpsDsAuNswCardCarousel.html
@@ -14,6 +14,7 @@
       <div lwc:ref="wrapper" class="nsw-carousel__wrapper js-carousel__wrapper">
         <ol
           lwc:ref="list"
+          id="nsw-carousel__list"
           class={computedListClassName}
           style={computedListStyle}
           ontransitionend={handleListTransitionEnd}

diff --git a/...ain/default/lwc/sfGpsDsAuNswForm/lwc/sfGpsDsAuNswFormStepOsN/sfGpsDsAuNswFormStepOsN.html b/...ain/default/lwc/sfGpsDsAuNswForm/lwc/sfGpsDsAuNswFormStepOsN/sfGpsDsAuNswFormStepOsN.html
@@ -1,6 +1,8 @@
 <template>
   <template lwc:if={jsonDef.bAccordionActive}>
-    <h2 class="nsw-h2 slds-m-top_medium os-step-label">{mergedLabel}</h2>
+    <h2 lwc:if={mergedLabel} class="nsw-h2 slds-m-top_medium os-step-label">
+      {mergedLabel}
+    </h2>
     <!-- slds-p-horizontal_medium  -->
 
     <div class="vlc-separator slds-m-top_medium slds-m-bottom_medium"></div>

diff --git a/...ult/lwc/sfGpsDsAuNswSideNav/lwc/sfGpsDsAuNswSideNav/__tests__/sfGpsDsAuNswSideNav.test.js b/...ult/lwc/sfGpsDsAuNswSideNav/lwc/sfGpsDsAuNswSideNav/__tests__/sfGpsDsAuNswSideNav.test.js
@@ -51,15 +51,15 @@ describe("c-sf-gps-ds-au-nsw-side-nav", () => {
 
     const ulLis = element.querySelectorAll("ul > li");
 
-    expect(ulLis.length).toBe(3);
+    expect(ulLis.length).toBe(8);
     expect(ulLis[0].classList).not.toContain("active");
 
     const ulLiAs = element.querySelectorAll("ul > li > a");
-    expect(ulLiAs.length).toBe(3);
+    expect(ulLiAs.length).toBe(8);
     expect(ulLiAs[0].classList).not.toContain("current");
     expect(ulLiAs[0].href).toBe(`javascript${":"}void(0)`);
     expect(ulLiAs[1].classList).not.toContain("current");
-    expect(ulLiAs[1].href).toContain(SIMPLE_NAV[1].url);
+    expect(ulLiAs[1].href).toContain(SIMPLE_NAV[0].subNav[0].url);
   });
 
   it("is accessible", async () => {

diff --git a/...Nsw/main/default/lwc/sfGpsDsAuNswSideNav/lwc/sfGpsDsAuNswSideNav/sfGpsDsAuNswSideNav.html b/...Nsw/main/default/lwc/sfGpsDsAuNswSideNav/lwc/sfGpsDsAuNswSideNav/sfGpsDsAuNswSideNav.html
@@ -21,42 +21,49 @@
           >
             {navItem.text}
           </a>
-          <template
-            lwc:if={navItem.subNav}
-            for:each={navItem.subNav}
-            for:item="subNavItem"
-          >
-            <!-- level 3-->
-            <li key={subNavItem.index} class={subNavItem.className}>
-              <a
-                href={subNavItem.url}
-                data-ndx={subNavItem.index}
-                class={subNavItem.anchorClassName}
-                aria-current={subNavItem.ariaCurrent}
-                onclick={handleClick}
-              >
-                {subNavItem.text}
-              </a>
-              <template
-                lwc:if={subNavItem.subNav}
-                for:each={subNavItem.subNav}
-                for:item="subSubNavItem"
-              >
-                <!-- level 4 -->
-                <li key={subSubNavItem.index} class={subSubNavItem.className}>
-                  <a
-                    href={subSubNavItem.url}
-                    data-ndx={subSubNavItem.index}
-                    class={subSubNavItem.anchorClassName}
-                    aria-current={subNavNavItem.ariaCurrent}
-                    onclick={handleClick}
+          <ul>
+            <template
+              lwc:if={navItem.subNav}
+              for:each={navItem.subNav}
+              for:item="subNavItem"
+            >
+              <!-- level 3-->
+              <li key={subNavItem.index} class={subNavItem.className}>
+                <a
+                  href={subNavItem.url}
+                  data-ndx={subNavItem.index}
+                  class={subNavItem.anchorClassName}
+                  aria-current={subNavItem.ariaCurrent}
+                  onclick={handleClick}
+                >
+                  {subNavItem.text}
+                </a>
+                <ul>
+                  <template
+                    lwc:if={subNavItem.subNav}
+                    for:each={subNavItem.subNav}
+                    for:item="subSubNavItem"
                   >
-                    {subSubNavItem.text}
-                  </a>
-                </li>
-              </template>
-            </li>
-          </template>
+                    <!-- level 4 -->
+                    <li
+                      key={subSubNavItem.index}
+                      class={subSubNavItem.className}
+                    >
+                      <a
+                        href={subSubNavItem.url}
+                        data-ndx={subSubNavItem.index}
+                        class={subSubNavItem.anchorClassName}
+                        aria-current={subNavNavItem.ariaCurrent}
+                        onclick={handleClick}
+                      >
+                        {subSubNavItem.text}
+                      </a>
+                    </li>
+                  </template>
+                </ul>
+              </li>
+            </template>
+          </ul>
         </li>
       </template>
     </ul>

diff --git a/sfGpsDsAuNswS/main/default/lwc/sfGpsDsAuNswSFormStepOsN/sfGpsDsAuNswSFormStepOsN.html b/sfGpsDsAuNswS/main/default/lwc/sfGpsDsAuNswSFormStepOsN/sfGpsDsAuNswSFormStepOsN.html
@@ -2,7 +2,9 @@
   <template lwc:if={jsonDef.bAccordionActive}>
     <div class="page-header page-header--bottom">
       <div class="snsw-container">
-        <h1 class="snsw-h1 os-step-label">{mergedLabel}</h1>
+        <h1 lwc:if={mergedLabel} class="snsw-h1 os-step-label">
+          {mergedLabel}
+        </h1>
 
         <p lwc:if={_propSetMap.chartLabel}>{mergedChartLabel}</p>
       </div>

diff --git a/sfGpsDsAuVic/main/default/lwc/sfGpsDsAuVicFormStepOsN/sfGpsDsAuVicFormStepOsN.html b/sfGpsDsAuVic/main/default/lwc/sfGpsDsAuVicFormStepOsN/sfGpsDsAuVicFormStepOsN.html
@@ -1,7 +1,10 @@
 <template>
   <template if:true={jsonDef.bAccordionActive}>
     <div class="rpl-form">
-      <h3 class="rpl-form__title slds-m-top_medium os-step-label">
+      <h3
+        lwc:if={mergedLabel}
+        class="rpl-form__title slds-m-top_medium os-step-label"
+      >
         {mergedLabel}
       </h3>
       <!-- slds-p-horizontal_medium  -->

diff --git a/...Vic2Accordion/lwc/sfGpsDsAuVic2AccordionItem/__tests__/sfGpsDsAuVic2AccordionItem.test.js b/...Vic2Accordion/lwc/sfGpsDsAuVic2AccordionItem/__tests__/sfGpsDsAuVic2AccordionItem.test.js
@@ -0,0 +1,25 @@
+import { createElement } from "lwc";
+import SfGpsDsAuVic2AccordionItem from "c/sfGpsDsAuVic2AccordionItem";
+
+describe("c-sf-gps-ds-au-vic2-accordion-item", () => {
+  afterEach(() => {
+    // The jsdom instance is shared across test cases in a single file so reset the DOM
+    while (document.body.firstChild) {
+      document.body.removeChild(document.body.firstChild);
+    }
+  });
+
+  it("TODO: test case generated by CLI command, please fill in test logic", () => {
+    // Arrange
+    const element = createElement("c-sf-gps-ds-au-vic2-accordion-item", {
+      is: SfGpsDsAuVic2AccordionItem
+    });
+
+    // Act
+    document.body.appendChild(element);
+
+    // Assert
+    // const div = element.shadowRoot.querySelector('div');
+    expect(1).toBe(1);
+  });
+});
diff --git a/...lwc/sfGpsDsAuVic2Accordion/lwc/sfGpsDsAuVic2AccordionItem/sfGpsDsAuVic2AccordionItem.html b/...lwc/sfGpsDsAuVic2Accordion/lwc/sfGpsDsAuVic2AccordionItem/sfGpsDsAuVic2AccordionItem.html
@@ -0,0 +1,34 @@
+<template>
+  <button
+    id="button"
+    class="rpl-accordion__item-toggle rpl-u-focusable-block"
+    type="button"
+    onclick={handleToggle}
+    aria-expanded={active}
+    aria-controls="content"
+  >
+    <span class="rpl-accordion__item-heading-wrapper">
+      <span aria-hidden="true" class="rpl-accordion__item-number rpl-type-h4"
+        >{indexP1}</span
+      >
+      <span class="rpl-accordion__item-heading rpl-type-h4">{title}</span>
+    </span>
+
+    <span class="rpl-accordion__item-icon rpl-u-screen-only" aria-hidden="true">
+      <c-sf-gps-ds-au-vic2-icon name="icon-chevron-down">
+      </c-sf-gps-ds-au-vic2-icon>
+    </span>
+  </button>
+
+  <c-sf-gps-ds-au-vic2-expandable
+    id="content"
+    expanded={active}
+    labelledby="button"
+    hidden={inactive}
+    class-name="rpl-accordion__item-content"
+  >
+    <div class="rpl-accordion__item-content-inner">
+      <slot></slot>
+    </div>
+  </c-sf-gps-ds-au-vic2-expandable>
+</template>
diff --git a/...t/lwc/sfGpsDsAuVic2Accordion/lwc/sfGpsDsAuVic2AccordionItem/sfGpsDsAuVic2AccordionItem.js b/...t/lwc/sfGpsDsAuVic2Accordion/lwc/sfGpsDsAuVic2AccordionItem/sfGpsDsAuVic2AccordionItem.js
@@ -0,0 +1,38 @@
+import { LightningElement, api } from "lwc";
+
+export default class extends LightningElement {
+  @api title;
+  @api active;
+
+  _indexOriginal;
+  _index;
+
+  @api
+  get index() {
+    return this._indexOriginal;
+  }
+
+  set index(value) {
+    this._indexOriginal = value;
+    this._index = Number(value);
+  }
+
+  get inactive() {
+    return !this.active;
+  }
+
+  get indexP1() {
+    return this._index + 1;
+  }
+
+  handleToggle() {
+    this.dispatchEvent(
+      new CustomEvent("toggle", {
+        detail: {
+          index: this._index,
+          active: !this.active
+        }
+      })
+    );
+  }
+}
diff --git a/...psDsAuVic2Accordion/lwc/sfGpsDsAuVic2AccordionItem/sfGpsDsAuVic2AccordionItem.js-meta.xml b/...psDsAuVic2Accordion/lwc/sfGpsDsAuVic2AccordionItem/sfGpsDsAuVic2AccordionItem.js-meta.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+  <apiVersion>60.0</apiVersion>
+  <isExposed>false</isExposed>
+</LightningComponentBundle>