@govtechsg/sgds-web-component 0.0.8 → 0.0.10

package/src/Button/sgds-button.ts

@@ -0,0 +1,153 @@
+import { customElement, property, state, query} from "lit/decorators.js";
+import { html, literal } from 'lit/static-html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import {classMap} from 'lit/directives/class-map.js';
+import { FormSubmitController } from "../utils/form";
+import SgdsElement from "../utils/sgds-element";
+import styles from "./sgds-button.scss";
+
+export type ButtonVariant = 
+"primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link" | "icon" |
+"outline-primary" | "outline-secondary" | "outline-success" | "outline-danger" | "outline-warning" | "outline-info" | "outline-light" | "outline-dark"
+
+@customElement("sgds-button")
+export class SgdsButton extends SgdsElement {
+  static styles = styles;
+
+  @query('.btn') button: HTMLButtonElement | HTMLLinkElement;
+
+  private readonly formSubmitController = new FormSubmitController(this, {
+    form: (input: HTMLInputElement) => {
+      // Buttons support a form attribute that points to an arbitrary form, so if this attribute it set we need to query
+      // the form from the same root using its id
+      if (input.hasAttribute('form')) {
+        const doc = input.getRootNode() as Document | ShadowRoot;
+        const formId = input.getAttribute('form')!;
+        return doc.getElementById(formId) as HTMLFormElement;
+      }
+
+      // Fall back to the closest containing form
+      return input.closest('form');
+    }
+  });
+
+  @state() private hasFocus = false;
+
+  /** The button's variant. */
+  @property({ reflect: true }) variant: ButtonVariant = "primary";
+  
+  @property({ reflect: true }) buttonClasses? : string;
+
+  /** Button sizes */
+  @property({ reflect: true }) size : 'sm' | 'lg' ;
+
+  /** Button active state */
+  @property({ type: Boolean, reflect: true }) active = false ;
+
+  /** Button disabled state */
+  @property({ type: Boolean, reflect: true }) disabled = false ;
+
+  @property() type: 'button' | 'submit' | 'reset' = 'button' ;
+
+  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
+  @property() href?: string;
+
+  /** Tells the browser where to open the link. Only used when `href` is set. */
+  @property() target?: '_blank' | '_parent' | '_self' | '_top';
+
+  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */
+  @property({ reflect: true }) download?: string;
+
+  /**
+   * The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The
+   * value of this attribute must be an id of a form in the same document or shadow root as the button.
+   */
+   @property() form: string;
+
+   /** Used to override the form owner's `action` attribute. */
+   @property({ attribute: 'formaction' }) formAction: string;
+ 
+   /** Used to override the form owner's `method` attribute.  */
+   @property({ attribute: 'formmethod' }) formMethod: 'post' | 'get';
+ 
+   /** Used to override the form owner's `novalidate` attribute. */
+   @property({ attribute: 'formnovalidate', type: Boolean }) formNoValidate: boolean;
+ 
+   /** Used to override the form owner's `target` attribute. */
+   @property({ attribute: 'formtarget' }) formTarget: '_self' | '_blank' | '_parent' | '_top' | string;
+
+  /** Sets focus on the button. */
+  focus(options?: FocusOptions) {
+    this.button.focus(options);
+  }
+
+  /** Simulates a click on the button. */
+  click() {
+    this.button.click();
+  }
+
+  /** Removes focus from the button. */
+  blur() {
+    this.button.blur();
+  }
+
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit('sgds-blur');
+  }
+
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit('sgds-focus');
+  }
+
+  handleClick(event: MouseEvent) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+
+    if (this.type === 'submit') {
+      this.formSubmitController.submit(this);
+    }
+
+    if (this.type === 'reset') {
+      this.formSubmitController.reset(this);
+    }
+  }
+
+  render() {
+    const isLink = this.href;
+    const tag = isLink ? literal`a` : literal`button`;
+    return html`
+      <${tag}
+        class="sgds btn ${classMap(
+          {
+            'disabled': isLink && this.disabled,
+            'active': this.active, 
+            [`btn-${this.variant}`]: this.variant,
+            [`btn-${this.size}`]: this.size,
+            [`${this.buttonClasses}`]: this.buttonClasses
+          }
+        )}"
+        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
+        type=${ifDefined(isLink ? undefined : this.type)}
+        href=${ifDefined(isLink ? this.href : undefined)}
+        target=${ifDefined(isLink ? this.target : undefined)}
+        download=${ifDefined(isLink ? this.download : undefined)}
+        rel=${ifDefined(isLink && this.target === "_blank" ? 'noreferrer noopener' : undefined)}
+        role=${ifDefined(isLink ? 'button': undefined )}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        tabindex=${this.disabled ? '-1' : '0'}
+        @click=${this.handleClick}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      >
+          <slot></slot>
+      </${tag}>
+    `;
+  }
+}
+
+export default SgdsButton;

package/src/Card/index.ts

@@ -0,0 +1 @@
+export { SgdsActionCard } from "./sgds-action-card";

package/src/Card/sgds-action-card.scss

@@ -0,0 +1,27 @@
+@import "../utils/base.scss";
+@import "~@govtechsg/sgds/sass/card/";
+
+:host {
+  .sgds {
+    &.card {
+      &[variant*="card-action"] {
+        .card-body {
+          sl-icon {
+            font-size: 1.5rem;
+            margin-right: 1rem;
+          }
+        }
+      }
+    }
+    @each $color, $value in $theme-colors {
+      &.text-#{$color} {
+        color: $value !important;
+      }
+    }
+    @each $color, $value in $theme-colors {
+      &.bg-#{$color} {
+        background-color: $value !important;
+      }
+    }
+  }
+}

package/src/Card/sgds-action-card.ts

@@ -0,0 +1,115 @@
+import { customElement, property, state, query } from "lit/decorators.js";
+import { html, literal } from "lit/static-html.js";
+import { classMap } from "lit/directives/class-map.js";
+import styles from "./sgds-action-card.scss";
+import { CardElement } from "../utils/card-element";
+import { ref, createRef, Ref } from "lit/directives/ref.js";
+
+export type CardVariant = "card-action" | "card-action-quantity-toggle";
+
+export type TypeVariant = "checkbox" | "radio";
+
+@customElement("sgds-action-card")
+export class SgdsActionCard extends CardElement {
+  static styles = styles;
+
+  // @query("sgds-checkbox") // Define the query
+  // inputEl!: HTMLInputElement; // Declare the prop
+
+  inputRef: Ref<HTMLInputElement> = createRef();
+
+  @property({ type: String, reflect: true }) type?: TypeVariant = "checkbox";
+
+  /** Use on actionable cards like SelectableCard and Quantity Toggle Card' */
+  @property({ reflect: true }) variant?: CardVariant = "card-action";
+
+  /** The card's subtitle iconName. */
+  @property({ reflect: true }) iconName?: string;
+
+  /** The input's id. */
+  @property({ reflect: true }) inputId?: string;
+
+  @property({ reflect: true, type: Boolean })
+  active = false;
+
+  // Declare the click event listener
+  onInputChange() {
+    this.inputRef.value.click();
+    if (this.inputRef.value.checked && (!this.inputRef.value.disabled)) this.active = true;
+    else if (!this.inputRef.value.checked) {
+      this.active = false;
+    }
+  }
+
+  handleKeyDown(event: KeyboardEvent) {
+    const hasModifier =
+      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+    if (event.key === "Enter" && !hasModifier) {
+      this.onInputChange();
+    }
+  }
+  // handleChange(event: string){
+  //   this.checked = this.inputRef.value.checked;
+  //   this.emit(event);
+  // }
+
+  render() {
+    const checkbox = html`<sgds-checkbox
+      ${ref(this.inputRef)}
+      ?disabled=${this.disabled}
+      checkboxId=${this.inputId}
+      @click=${this.onInputChange}
+      @keydown=${this.handleKeyDown}
+    ></sgds-checkbox>`;
+
+    const radio = html`<sgds-radio
+      ${ref(this.inputRef)}
+      ?disabled=${this.disabled}
+      radioId=${this.inputId}
+      @click=${this.onInputChange}
+      @keydown=${this.handleKeyDown}
+    ></sgds-radio>`;
+
+    const icon = html`<sl-icon name="${this.iconName}"></sl-icon>`;
+
+    return html`
+      <div
+      tabindex=${this.disabled ? "-1" : "0"}
+      @click=${this.onInputChange}
+     @keydown=${this.handleKeyDown}
+     
+        variant="card-action"
+        class="sgds card
+        ${classMap({
+          [`text-${this.textColor}`]: this.textColor,
+          [`bg-${this.bgColor}`]: this.bgColor,
+          [`border-${this.borderColor}`]: this.borderColor,
+          ["is-active"]: this.active,
+        })}
+        "
+      >
+        <div class="card-body">
+          <h6 class="text-muted card-subtitle">
+            <div>
+              ${this.iconName == undefined ? undefined : icon}
+              <slot name="card-subtitle"></slot></slot>
+            </div>
+            <div class="card-input">
+            ${
+              this.type == "checkbox" && this.variant == "card-action"
+                ? checkbox
+                : this.type == "radio" && this.variant == "card-action"
+                ? radio
+                : undefined
+            }
+            </div>
+          </h6>
+          <h5 class="card-title"><slot name="card-title"></slot></h5>
+          <p class="card-text"><slot name="card-text"></slot></p>
+        </div>
+      </div>
+    `;
+  }
+}
+
+export default SgdsActionCard;

package/src/Checkbox/index.ts

@@ -0,0 +1 @@
+export {SgdsCheckbox} from './sgds-checkbox';

package/src/Checkbox/sgds-checkbox.scss

@@ -0,0 +1,4 @@
+@import "../utils/base.scss";
+@import "~@govtechsg/sgds/sass/forms/form-check";
+@import "~@govtechsg/sgds/sass/forms/validation";
+

package/src/Checkbox/sgds-checkbox.ts

@@ -0,0 +1,149 @@
+import { LitElement, html } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { live } from "lit/directives/live.js";
+import styles from "./sgds-checkbox.scss";
+import { ifDefined } from "lit/directives/if-defined.js";
+import SgdsElement from "../utils/sgds-element";
+import { classMap } from "lit/directives/class-map.js";
+import genId from "../utils/generateId";
+import { defaultValue } from "../utils/defaultvalue";
+import { FormSubmitController } from "../utils/form";
+import { watch } from "../utils/watch";
+
+@customElement("sgds-checkbox")
+export class SgdsCheckbox extends SgdsElement {
+  static styles = styles;
+
+  @query('input[type="checkbox"]') input: HTMLInputElement;
+
+  private readonly formSubmitController = new FormSubmitController(this, {
+    value: (control: SgdsCheckbox) =>
+      control.checked ? control.value : undefined,
+    defaultValue: (control: SgdsCheckbox) => control.defaultChecked,
+    setValue: (control: SgdsCheckbox, checked: boolean) =>
+      (control.checked = checked),
+  });
+
+  /** Name of the HTML form control. Submitted with the form as part of a name/value pair. */
+  @property({reflect: true }) name: string;
+
+  /** For Id/For pair of the HTML form control. */
+  @property({ type: String, reflect: true }) checkboxId = genId("checkbox");
+
+  /** For aria-label when there is no appropriate text label visible */
+  @property({ type: String, reflect: true }) ariaLabel = "checkbox";
+
+  /** Manually style the input as valid */
+  @property({ type: Boolean, reflect: true }) valid = false;
+
+  /** Manually style the input as invalid */
+  @property({ type: Boolean, reflect: true }) invalid = false;
+
+  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */
+  @property() value: string;
+
+  /** Makes the checkbox a required field. */
+  @property({ type: Boolean, reflect: true }) required = false;
+
+  /** Draws the checkbox in a checked state. */
+  @property({ type: Boolean, reflect: true }) checked = false;
+
+  /** Disables the checkbox (so the user can't check / uncheck it). */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
+  @defaultValue("checked")
+  defaultChecked = false;
+
+
+  /** Simulates a click on the checkbox. */
+  click() {
+    this.input.click();
+  }
+
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    if (!this.input.reportValidity()) {
+      this.invalid = !this.input.checkValidity();
+    }
+    return this.input.reportValidity();
+  }
+
+  handleChange() {
+    // console.log(
+    //   "when this.click() is fired, input detects a change --> handleChange runs"
+    // );
+    this.checked = !this.checked;
+    this.value = this.input.value;
+    this.emit("sgds-change");
+  }
+
+  handleKeyDown(event: KeyboardEvent) {
+    const hasModifier =
+      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+    if (event.key === "Enter" && !hasModifier) {
+      // console.log(
+      //   "so here we are trying to mimick keydown enter event like a mousclick event"
+      // );
+      this.click();
+    }
+  }
+
+  @watch("disabled", { waitUntilFirstUpdate: true })
+  handleDisabledChange() {
+    // Disabled form controls are always valid, so we need to recheck validity when the state changes
+    this.input.disabled = this.disabled;
+    this.invalid = !this.input.checkValidity();
+  }
+
+  @watch("checked", { waitUntilFirstUpdate: true })
+  handleStateChange() {
+    this.invalid = !this.input.checkValidity();
+    if (this.required) this.valid = this.input.checkValidity();
+  }
+
+  render() {
+    return html`
+      <div part="base" class="form-check">
+        <input
+          part="control"
+          class=${classMap({
+            "form-check-input": true,
+            "is-invalid": this.invalid,
+            "is-valid": this.valid,
+          })}
+          type="checkbox"
+          id=${ifDefined(this.checkboxId)}
+          aria-invalid=${this.invalid ? "true" : "false"}
+          name=${ifDefined(this.name)}
+          value=${ifDefined(this.value)}
+          .checked=${live(this.checked)}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          aria-disabled=${this.disabled ? "true" : "false"}
+          aria-checked=${this.checked ? "true" : "false"}
+          @change=${this.handleChange}
+          @keydown=${this.handleKeyDown}
+        />
+        <label
+          part="label"
+          for="${ifDefined(this.checkboxId)}"
+          aria-label=${ifDefined(this.ariaLabel)}
+          class="form-check-label"
+          ><slot></slot
+        ></label>
+        ${this.invalid
+          ? html`<slot
+              name="feedback"
+              part="feedback"
+              class=${classMap({
+                "invalid-feedback": true,
+              })}
+            ></slot>`
+          : undefined}
+      </div>
+    `;
+  }
+}
+
+export default SgdsCheckbox;

package/src/Dropdown/index.ts

@@ -0,0 +1,3 @@
+export { SgdsDropdown } from './sgds-dropdown'
+export { SgdsDropdownItem } from './sgds-dropdown-item'
+export type { DropdownButtonVariant, DropDirection} from '../utils/dropdown-element'

package/src/Dropdown/sgds-dropdown-item.ts

@@ -0,0 +1,39 @@
+import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import LinkElement from "../utils/link-element";
+import styles from "./sgds-dropdown.scss";
+import {classMap} from 'lit/directives/class-map.js';
+
+@customElement("sgds-dropdown-item")
+export class SgdsDropdownItem extends LinkElement {
+  static styles = styles
+
+  @query('a')
+  anchor: HTMLElement
+  firstUpdated(){
+     //required when navigate with ArrowDown/ArrowUp
+    this.addEventListener('keydown', (e:KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        this.anchor.click()
+      }
+    })
+  }
+
+  render() {
+    return html`
+      <li>
+        <a
+          href="${this.href}"
+          class="dropdown-item ${classMap({
+            'disabled': this.disabled,
+            'active': this.active
+          })}"
+          ?disabled=${this.disabled}
+          aria-disabled=${this.disabled ? 'true' : 'false'}
+          tabindex=${this.disabled ? '-1': '0'}
+          ><slot></slot
+        ></a>
+      </li>
+    `;
+  }
+}

package/src/Dropdown/sgds-dropdown.scss

@@ -0,0 +1,5 @@
+@import "../utils/base.scss";
+@import "~@govtechsg/sgds/sass/dropdown";
+
+
+  

package/src/Dropdown/sgds-dropdown.ts

@@ -0,0 +1,54 @@
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+import {  ref } from "lit/directives/ref.js";
+import styles from "./sgds-dropdown.scss";
+import { DropdownElement } from "../utils/dropdown-element";
+
+export type DropDirection = "left" | "right" | "up" | "down";
+@customElement("sgds-dropdown")
+export class SgdsDropdown extends DropdownElement {
+  static styles = styles;
+  constructor(){
+    super()
+    this.modifierOpt = [
+      {
+        name: "offset",
+        options: {
+          offset: [0, 10],
+        },
+      },
+    ];
+  }
+  render() {
+    return html`
+      <div>
+        <sgds-button
+          variant="outline-${this.variant}"
+          ?disabled=${this.disabled}
+          aria-expanded="${this.menuIsOpen}"
+          ${ref(this.myDropdown)}
+          @click=${() => this._onClickButton()}
+          id=${this.togglerId}
+        >
+          ${this.togglerText}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-chevron-down"
+            viewBox="0 0 16 16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
+            />
+          </svg>
+        </sgds-button>
+        <ul class="dropdown-menu" role="menu" part="menu">
+          <slot @click=${this._handleSelectSlot}></slot>
+        </ul>
+      </div>
+    `;
+  }
+}

package/src/Footer/index.ts

@@ -0,0 +1,3 @@
+
+export {SgdsFooter} from './sgds-footer'
+export type { ColumnLinks, Links } from './sgds-footer' 

package/src/Footer/sgds-footer.scss

@@ -0,0 +1,5 @@
+@import "../utils/base.scss";
+@import "~@govtechsg/sgds/sass/containers";
+@import "~@govtechsg/sgds/sass/grid";
+@import "~@govtechsg/sgds/sass/footer";
+