feat(quantity toggle): update styling

GovTechSG · Nov 20, 2024 · eb619be · eb619be
1 parent 45e332e
commit eb619be
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 20 deletions.
diff --git a/src/components/QuantityToggle/sgds-quantity-toggle.ts b/src/components/QuantityToggle/sgds-quantity-toggle.ts
@@ -40,15 +40,15 @@ export class SgdsQuantityToggle extends FormControlElement implements SgdsFormCo
   /** @internal */
   private readonly formSubmitController = new FormSubmitController(this);
 
-  /** Controls the size of the quantity toggle */
-  @property() size: "sm" | "md" = "md";
-
   /** The input's value. Set to 0 by default */
-  @property({ type: Number, reflect: true }) value = 0;
+  @property({ type: Number, reflect: true }) value;
 
   /** Disables the entire quantity toggle  */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  /** Makes the input a required field. */
+  @property({ type: Boolean, reflect: true }) required = false;
+
   /** The quantity toggle's button variants */
   @property({ type: String }) iconButtonVariant = "ghost";
 
@@ -59,6 +59,15 @@ export class SgdsQuantityToggle extends FormControlElement implements SgdsFormCo
   @defaultValue()
   defaultValue = 0;
 
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  public reportValidity() {
+    return this.input.reportValidity();
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity */
+  public setCustomValidity(err: string) {
+    return this.input.setCustomValidity(err);
+  }
+
   /** @internal The id forwarded to input element */
   private inputId: string = genId("quantity-toggle", "input");
 
@@ -132,32 +141,35 @@ export class SgdsQuantityToggle extends FormControlElement implements SgdsFormCo
         for=${this.inputId}
         id=${this.labelId}
         class=${classMap({
-          "form-label": true
+          "form-label": true,
+          required: this.required,
+          disabled: this.disabled
         })}
         >${this.label}</label
       >
     `;
     return this.label && labelTemplate;
   }
+
   protected _renderHintText() {
-    const hintTextTemplate = html` <div id="${this.inputId}Help" class="form-text">${this.hintText}</div> `;
+    const hintTextTemplate = html`
+      <div
+        id="${this.inputId}Help"
+        class="form-text ${classMap({
+          disabled: this.disabled
+        })}"
+      >
+        ${this.hintText}
+      </div>
+    `;
     return this.hintText && hintTextTemplate;
   }
 
   render() {
     return html`
       <div class="form-control-container">
         ${this._renderLabel()}
-        <div
-          part="base"
-          class="${classMap({
-            disabled: this.disabled,
-            "input-group": true,
-            [`input-group-${this.size}`]: this.size
-          })}"
-          variant="quantity-toggle"
-          size=${this.size}
-        >
+        <div part="base" class="input-group" variant="quantity-toggle">
           <sgds-icon-button
             variant=${this.iconButtonVariant}
             ariaLabel=${`decrease by ${this.step}`}
@@ -172,12 +184,13 @@ export class SgdsQuantityToggle extends FormControlElement implements SgdsFormCo
             step=${ifDefined(this.step)}
             min=${ifDefined(this.min)}
             max=${ifDefined(this.max)}
-            .value=${live(this.value.toString())}
+            .value=${live(this.value)}
             @sgds-change=${() => this._handleChange()}
             @sgds-input=${() => this._handleChange()}
             @keydown=${this._handleKeyDown}
             ?disabled=${this.disabled}
             ?invalid=${this.invalid}
+            ?required=${this.required}
             id=${this.inputId}
           ></sgds-input>
           <sgds-icon-button

diff --git a/test/quantitytoggle.test.ts b/test/quantitytoggle.test.ts
@@ -88,7 +88,7 @@ describe("when value change", () => {
     waitUntil(() => inputHandler.calledTwice);
     await sendKeys({ press: "Minus" });
     waitUntil(() => inputHandler.calledOnce);
-    expect(inputEl.value).to.equal("15");
+    expect(inputEl.value).to.equal(15);
   });
 
   it("resets value to 0 when delete the value", async () => {
@@ -99,11 +99,11 @@ describe("when value change", () => {
     el.addEventListener("sgds-input", inputHandler);
     await sendKeys({ press: "Backspace" });
     waitUntil(() => inputHandler.calledOnce);
-    expect(inputEl.value).to.equal("1");
+    expect(inputEl.value).to.equal(1);
 
     await sendKeys({ press: "Backspace" });
     waitUntil(() => inputHandler.calledOnce);
-    expect(inputEl.value).to.equal("0");
+    expect(inputEl.value).to.equal(0);
   });
 });