Merge branch 'master' into momeraj/remove-percy

momentum-design · Aug 10, 2022 · c8c5553 · c8c5553
2 parents 408b491 + cf40391
commit c8c5553
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 6 deletions.
diff --git a/web-components/src/[sandbox]/examples/toggle-switch.ts b/web-components/src/[sandbox]/examples/toggle-switch.ts
@@ -26,4 +26,10 @@ export const toggleSwitchTemplate = html`
   <md-toggle-switch htmlId="toggleSwitch8" smaller checked>
     Checked Smaller Toggle Switch
   </md-toggle-switch>
+  <md-toggle-switch htmlId="toggleSwitch10" alignLabel="right">
+    Toggle Switch with label right aligned
+  </md-toggle-switch>
+  <md-toggle-switch htmlId="toggleSwitch9" alignLabel="left">
+    Toggle Switch with label left aligned
+  </md-toggle-switch>
 `;
diff --git a/web-components/src/components/dropdown/Dropdown.test.ts b/web-components/src/components/dropdown/Dropdown.test.ts
@@ -234,6 +234,25 @@ describe("Dropdown Component", () => {
     it("should render correct icon name", () => {
       expect(dropdown.shadowRoot!.querySelector("md-icon")!.getAttribute("name")).toEqual("icon-arrow-down_16");
     });
+
+    it("should change selectedKey on update of default option", async () => {
+      const dropdown = await fixture<Dropdown.ELEMENT>(
+        html`
+          <md-dropdown
+            .options="${dropdownObjectLongOptions}"
+            .defaultOption="${dropdownObjectLongOptions[10]}"
+            option-id="id"
+            option-value="country"
+          ></md-dropdown>
+        `
+      );
+      expect(dropdown["selectedKey"]).toEqual(dropdownObjectLongOptions[10].id);
+
+      dropdown["defaultOption"] = dropdownObjectLongOptions[1];
+      await elementUpdated(dropdown);
+
+      expect(dropdown["selectedKey"]).toEqual(dropdownObjectLongOptions[1].id);
+    });
   });
 
   describe("List", () => {

diff --git a/web-components/src/components/dropdown/Dropdown.ts b/web-components/src/components/dropdown/Dropdown.ts
@@ -104,6 +104,13 @@ export namespace Dropdown {
         if (name === "disabled") {
           this.setAttribute("tabindex", !this.disabled ? "0" : "-1");
         }
+        if (name === "defaultOption") {
+          if (this.defaultOption) {
+            const { key } = this.getOptionKeyValuePair(this.defaultOption);
+
+            this.selectedKey = key;
+          }
+        }
       });
     }
 

diff --git a/web-components/src/components/label/scss/label.scss b/web-components/src/components/label/scss/label.scss
@@ -2,6 +2,7 @@
   .md-label {
     @include form-label;
     display: flex;
+    align-items: center;
 
     &.right {
       @include form-label(right, false);

diff --git a/web-components/src/components/toggle-switch/ToggleSwitch.stories.ts b/web-components/src/components/toggle-switch/ToggleSwitch.stories.ts
@@ -8,8 +8,9 @@
 
 import "@/components/toggle-switch/ToggleSwitch";
 import "@/components/theme/Theme";
+import { alignLabel } from "@/components/toggle-switch/ToggleSwitch";
 import { withA11y } from "@storybook/addon-a11y";
-import { boolean, withKnobs } from "@storybook/addon-knobs";
+import { boolean, withKnobs, select } from "@storybook/addon-knobs";
 import { html } from "lit-element";
 
 export default {
@@ -33,11 +34,20 @@ export const ToggleSwitch = () => {
   const checked = boolean("Checked", false);
   const disabled = boolean("Disabled", false);
   const smaller = boolean("Smaller", false);
+  const align = select("Align Label", alignLabel, "right");
 
   return html`
-  <md-theme class="theme-toggle" id="toggle" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-    <md-toggle-switch htmlId="toggleSwitch" ?checked=${checked} ?disabled=${disabled} .smaller=${smaller}> Label Toggle Switch </md-toggle-switch>
-  </md-theme>
+    <md-theme class="theme-toggle" id="toggle" ?darkTheme=${darkTheme} ?lumos=${lumos}>
+      <md-toggle-switch
+        htmlId="toggleSwitch"
+        ?checked=${checked}
+        ?disabled=${disabled}
+        .smaller=${smaller}
+        ?alignLabel=${align}
+      >
+        Label Toggle Switch
+      </md-toggle-switch>
+    </md-theme>
   `;
 };
 
diff --git a/web-components/src/components/toggle-switch/ToggleSwitch.test.ts b/web-components/src/components/toggle-switch/ToggleSwitch.test.ts
@@ -57,4 +57,22 @@ describe("Toggle Switch Component", () => {
 
     expect(element.checked).toBeTruthy();
   });
+
+  test("should add class md-toggle-switch__label__container__left on align label left", async () => {
+    const div = element.shadowRoot!.querySelector(".md-toggle-switch") as HTMLInputElement;
+    element.alignLabel = "left";
+    await elementUpdated(element);
+    const span = div.querySelector("span") as HTMLSpanElement;
+
+    expect(span.classList.contains("md-toggle-switch__label__container__left")).toBeTruthy();
+  });
+
+  test("should not add class md-toggle-switch__label__container__left on align label right", async () => {
+    const div = element.shadowRoot!.querySelector(".md-toggle-switch") as HTMLInputElement;
+    element.alignLabel = "right";
+    await elementUpdated(element);
+    const span = div.querySelector("span") as HTMLSpanElement;
+
+    expect(span.classList.contains("md-toggle-switch__label__container__left")).toBeFalsy();
+  });
 });
diff --git a/web-components/src/components/toggle-switch/ToggleSwitch.ts b/web-components/src/components/toggle-switch/ToggleSwitch.ts
@@ -13,7 +13,10 @@ import { html, LitElement, property } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import styles from "./scss/module.scss";
 
+export const alignLabel = ["left", "right"] as const;
+
 export namespace ToggleSwitch {
+  export type alignLabel = typeof alignLabel[number];
   @customElementWithCheck("md-toggle-switch")
   export class ELEMENT extends FocusMixin(LitElement) {
     @property({ type: String }) htmlId = "";
@@ -22,6 +25,7 @@ export namespace ToggleSwitch {
     @property({ type: Boolean }) disabled = false;
     @property({ type: Boolean }) small = false;
     @property({ type: Boolean }) smaller = false;
+    @property({ type: String }) alignLabel: ToggleSwitch.alignLabel = "right";
     @property({ type: Boolean, reflect: true }) autofocus = false;
 
     handleClick() {
@@ -37,6 +41,20 @@ export namespace ToggleSwitch {
       };
     }
 
+    switchTemplate() {
+      if (this.alignLabel === "left") {
+        return html`
+          <slot></slot>
+          <span class="md-toggle-switch__label__container md-toggle-switch__label__container__left" part="toggle-label"></span>
+        `;
+      } else {
+        return html`
+          <span class="md-toggle-switch__label__container" part="toggle-label"></span>
+          <slot></slot>
+        `;
+      }
+    }
+
     render() {
       return html`
         <div
@@ -54,8 +72,7 @@ export namespace ToggleSwitch {
             tabindex=${this.disabled ? -1 : 0}
           />
           <md-label .htmlFor=${this.htmlId} class="md-toggle-switch__label">
-            <span class="md-toggle-switch__label__container"></span>
-            <slot></slot>
+            ${this.switchTemplate()}
           </md-label>
         </div>
       `;

diff --git a/web-components/src/components/toggle-switch/scss/toggle-switch.scss b/web-components/src/components/toggle-switch/scss/toggle-switch.scss
@@ -47,6 +47,11 @@
         transition: background 350ms;
         width: $toggle-switch__width;
 
+        &__left {
+          margin-right: 0;
+          margin-left: 0.75rem;
+        }
+
         @media screen and (-ms-high-contrast: active) {
           filter: brightness(1) contrast(1) saturate(1.5);
         }