@govtechsg/sgds-web-component 0.0.7 → 0.0.10

package/src/Footer/sgds-footer.ts

@@ -0,0 +1,121 @@
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import styles from "./sgds-footer.scss";
+import SgdsElement from "../utils/sgds-element";
+
+export type Links = {
+  href: string;
+  label: string;
+}
+export interface ColumnLinks {
+  title: string;
+  links: Links[]
+}
+@customElement("sgds-footer")
+export class SgdsFooter extends SgdsElement {
+  static styles = styles
+  @property()
+  title = ``;
+  @property()
+  description = ``;
+  @property({
+    type: Array,
+  })
+  links: ColumnLinks[] = [];
+
+  @property({ type: String })
+  lastUpdatedDate = "";
+
+  //href
+  @property({ type: String })
+  contactHref = "#";
+  @property({ type: String })
+  feedbackHref = "#";
+  @property({ type: String })
+  vulnerabilityHref = "#";
+  @property({ type: String })
+  privacyHref = "#";
+  @property({ type: String })
+  termsOfUseHref = "#";
+  
+  render() {
+    return html`
+      <footer class="sgds footer">
+        <section class="footer-top" part="footer-top">
+          <div class="container-fluid">
+            <div class="row footer-header">
+              <div class="col col-lg-6 col-md-12">
+                <div class="title">${this.title}</div>
+                <div class="description">${this.description}</div>
+              </div>
+            </div>
+            <div class="row footer-items">
+              ${this.links.map(
+                (item: ColumnLinks) =>
+                  html`
+                    <div class="col-xxl-2 col-md-4 mb-3">
+                      <div class="title">${item.title}</div>
+                      <ul class="links">
+                        ${item.links.map(
+                          (link: Links) =>
+                            html`
+                              <li><a href="${link.href}">${link.label}</a></li>
+                            `
+                        )}
+                      </ul>
+                    </div>
+                  `
+              )}
+            </div>
+            <div class="row footer-contact-links">
+              <div class="col">
+                <div class="d-flex justify-content-lg-end">
+                  <ul>
+                    <li><a href="${this.contactHref}">Contact</a></li>
+                    <li><a href="${this.feedbackHref}">Feedback</a></li>
+                    <li>
+                      <a
+                        href="https://www.reach.gov.sg/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        >Reach.gov.sg</a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+        <section class="footer-bottom" part="footer-bottom">
+          <div class="container-fluid">
+            <div class="row footer-mandatory-links">
+              <div class="col">
+                <ul>
+                  <li>
+                    <a
+                      href="${this.vulnerabilityHref}"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      >Report Vulnerability</a>
+                  </li>
+                  <li><a href="${this.privacyHref}">Privacy Statement</a></li>
+                  <li><a href="${this.termsOfUseHref}">Terms of use</a></li>
+                </ul>
+              </div>
+            </div>
+            <div class="row footer-copyrights">
+              <div class="col">
+                <div class="d-flex justify-content-lg-end text-end">
+                  © ${new Date().getFullYear()} Government of Singapore<br />
+                  Last Updated ${this.lastUpdatedDate}
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </footer>
+    `;
+  }
+}
+
+export default SgdsFooter;

package/src/Input/index.ts

@@ -0,0 +1 @@
+export { SgdsInput } from "./sgds-input";

package/src/Input/sgds-input.scss

@@ -0,0 +1,20 @@
+
+@import '../utils/base.scss';
+@import "~@govtechsg/sgds/sass/forms/labels"; 
+@import "~@govtechsg/sgds/sass/forms/form-text";
+@import "~@govtechsg/sgds/sass/forms/form-control"; 
+@import "~@govtechsg/sgds/sass/forms/form-control-group"; 
+@import "~@govtechsg/sgds/sass/forms/input-group"; 
+@import "~@govtechsg/sgds/sass/forms/validation";
+
+:host{
+    --sgds-body-line-height: 2rem;
+}
+
+.form{
+    &-label,
+    &-text
+    {
+        line-height: var(--sgds-body-line-height);
+    }
+}

package/src/Input/sgds-input.ts

@@ -0,0 +1,178 @@
+
+import { customElement, property,query, state } from "lit/decorators.js";
+import { html } from 'lit/static-html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import {classMap} from 'lit/directives/class-map.js';
+import { live } from 'lit/directives/live.js';
+import styles from "./sgds-input.scss";
+import SgdsElement from "../utils/sgds-element";
+import { defaultValue } from "../utils/defaultvalue";
+import { FormSubmitController } from "../utils/form";
+import genId from "../utils/generateId";
+import { watch } from "../utils/watch";
+@customElement("sgds-input")
+export class SgdsInput extends SgdsElement {
+  @query('input.form-control') input: HTMLInputElement;
+
+  @state() private hasFocus = false;
+
+  private readonly formSubmitController = new FormSubmitController(this);
+  
+  static styles = styles;
+  @property({ reflect: true }) type:
+    | 'date'
+    | 'datetime-local'
+    | 'email'
+    | 'number'
+    | 'password'
+    | 'search'
+    | 'tel'
+    | 'text'
+    | 'time'
+    | 'url' = 'text';
+  @property({  reflect: true }) label : string;
+  @property({  reflect: true}) hintText : string;
+  @property({ type:String, reflect: true }) inputId = genId("input", this.type);
+  @property({  reflect: true }) name : string;
+  @property({  reflect: true }) inputClasses : string;
+  @property({  reflect: true }) iconName: string;
+
+  @property({ type: String, reflect: true }) value = '';
+  @property({ type: String, reflect: true}) minlength;
+  @property({ type: String, reflect: true}) maxlength;
+
+  @property({ type: String, reflect: true }) placeholder = "Placeholder";
+  
+  @property({ type: String }) pattern;
+  @property({ type: String, reflect: true }) invalidFeedback = "default feedback";
+  
+  @property({ type: Boolean, reflect: true }) autofocus = false;
+  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true }) required = false;
+  /** Makes the input readonly. */
+  @property({ type: Boolean, reflect: true }) readonly = false;
+
+  @property({ type: Boolean, reflect: true }) invalid = false;
+  @property({ type: Boolean, reflect: true }) valid = 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()
+  defaultValue = '';
+
+  /** Sets focus on the input. */
+  focus(options?: FocusOptions) {
+    this.input.focus(options);
+  }
+
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.input.reportValidity();
+  }
+
+  handleInvalid() {
+    this.invalid = true;
+  }
+
+  handleChange(event: string){
+    this.value = this.input.value;
+    this.emit(event);
+  }
+
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit('sgds-focus');
+  }
+
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit('sgds-blur');
+  }
+
+  handleKeyDown(event: KeyboardEvent) {
+    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+
+    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before
+    // submitting to allow users to cancel the keydown event if they need to
+    if (event.key === 'Enter' && !hasModifier) {
+      setTimeout(() => {
+        if (!event.defaultPrevented) {
+          this.formSubmitController.submit();
+        }
+      });
+    }
+  }
+
+  @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('value', { waitUntilFirstUpdate: true })
+  handleValueChange() {
+    this.invalid = !this.input.checkValidity();
+    this.valid = this.input.checkValidity()
+  }
+
+  render() {
+    const input = html`
+      <input type="text"
+        class="form-control 
+        ${classMap(
+          { 
+            'is-invalid' : this.invalid,
+            'is-valid' : this.valid,
+            [`${this.inputClasses}`]: this.inputClasses
+          })}
+        " 
+        type=${this.type}
+        id=${this.inputId}
+        name=${ifDefined(this.name)}
+        placeholder=${ifDefined(this.placeholder)}
+        aria-invalid=${this.invalid ? 'true' : 'false'}
+        pattern=${ifDefined(this.pattern)}
+        ?autofocus=${this.autofocus}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?required=${this.required}
+        .value=${live(this.value)}
+        minlength=${ifDefined(this.minlength)}
+        maxlength=${ifDefined(this.maxlength)}
+        @input=${()=> this.handleChange('sgds-input')}
+        @change=${()=> this.handleChange('sgds-change')}
+        @keydown=${this.handleKeyDown}
+        @invalid=${this.handleInvalid}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      >
+      <div id="${this.inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>
+    `
+    // if iconName is defined
+    const inputWithIcon = html`
+      <div class="sgds form-control-group ${this.inputClasses}">
+        <span class="form-control-icon">
+          <sl-icon name=${this.iconName}></sl-icon>
+        </span>
+        ${input}
+      </div>
+    `
+    // if hintText is defined
+    const withHintText = html`
+    <small id="${ifDefined(this.inputId)}Help" class="text-muted form-text">${this.hintText}</small>
+    `
+
+    // if label is defined
+    const withLabel = html`
+    <label for=${ifDefined(this.inputId)} class="form-label">${this.label}</label>
+    `
+
+    return html`
+        ${this.label ? withLabel : undefined }
+        ${this.hintText ? withHintText : undefined }
+        ${this.iconName ? inputWithIcon : input}
+    `;
+  }
+}
+
+export default SgdsInput;

package/src/Mainnav/index.ts

@@ -0,0 +1,4 @@
+export { SgdsMainnav } from './sgds-mainnav'
+export type { MainnavExpandSize } from './sgds-mainnav'
+export { SgdsMainnavItem } from './sgds-mainnav-item'
+export { SgdsMainnavDropdown } from './sgds-mainnav-dropdown'

package/src/Mainnav/sgds-mainnav-dropdown.scss

@@ -0,0 +1,13 @@
+@import "./sgds-mainnav-item.scss";
+@import "../Dropdown/sgds-dropdown.scss";
+
+.nav-link {
+    gap: 1rem;
+}
+.dropdown-menu {
+    margin-top: 0;
+    border: 1px solid rgba($black, .1);
+    border-radius: 0 0 5px 5px;
+    background-color: $white;
+    box-shadow: 0 .5rem 1rem rgba($black, .15);
+}

package/src/Mainnav/sgds-mainnav-dropdown.ts

@@ -0,0 +1,45 @@
+import { html } from "lit";
+import { customElement} from "lit/decorators.js";
+import { ref } from "lit/directives/ref.js";
+import styles from "./sgds-mainnav-dropdown.scss";
+import { DropdownElement } from "../utils/dropdown-element";
+
+@customElement("sgds-mainnav-dropdown")
+export class SgdsMainnavDropdown extends DropdownElement {
+  static styles = styles;
+
+  render() {
+    return html`
+      <li class="nav-item">
+        <a
+          class="nav-link"
+          ?disabled=${this.disabled}
+          aria-expanded="${this.menuIsOpen}"
+          ${ref(this.myDropdown)}
+          @click=${() => this._onClickButton()}
+          id=${this.togglerId}
+          tabindex=${this.disabled ? '-1' : '0'}
+          role="button"
+          >
+          ${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>
+        </a>
+        <ul class="dropdown-menu" role="menu" part="menu">
+          <slot @click=${this._handleSelectSlot}></slot>
+        </ul>
+      </li>
+    `;
+  }
+}

package/src/Mainnav/sgds-mainnav-item.scss

@@ -0,0 +1,24 @@
+@import "../utils/base.scss";
+@import "~@govtechsg/sgds/sass/navbar";
+
+:host   {
+  --mainnav-item-theme-color: #5925DC;
+}
+
+li {
+  height: 100%;
+}
+
+a.nav-link {
+  display: flex;
+  color: #344054;
+  border-bottom: $navbar-border-bottom-height solid transparent;
+  min-height: 100%;
+  align-items: center;
+
+  &.active,
+  &:hover {
+    color: var(--mainnav-item-theme-color);
+    border-color: var(--mainnav-item-theme-color);
+  }
+}

package/src/Mainnav/sgds-mainnav-item.ts

@@ -0,0 +1,8 @@
+
+import { customElement } from "lit/decorators.js";
+import styles from "./sgds-mainnav-item.scss";
+import LinkElement from "../utils/link-element";
+@customElement("sgds-mainnav-item")
+export class SgdsMainnavItem extends LinkElement {
+  static styles = styles;
+}

package/src/Mainnav/sgds-mainnav.scss

@@ -0,0 +1,39 @@
+@import "../utils/base.scss";
+@import "~@govtechsg/sgds/sass/navbar";
+@import "~@govtechsg/sgds/sass/transitions";
+@import "~@govtechsg/sgds/sass/offcanvas";
+.navbar-nav {
+  display: flex;
+  align-self: center;
+  gap: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  height: 100%;
+  width: 100%;
+}
+
+.navbar-toggler {
+  border: none;
+}
+.navbar-toggler:focus {
+  box-shadow: none;
+}
+
+slot[name="non-collapsible"] {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.slot-end {
+    display: flex;
+    margin-left: auto;
+    align-items: stretch;
+    gap: 1rem;
+
+}
+
+// there is no wildcard selector for element tag names in css :/
+.slot-end::slotted(:not([name$="-mainnav-item"])){
+  align-self: center;
+}

package/src/Mainnav/sgds-mainnav.ts

@@ -0,0 +1,183 @@
+import { html, PropertyValueMap } from "lit";
+import { customElement, property, queryAssignedElements, state } from "lit/decorators.js";
+import styles from "./sgds-mainnav.scss";
+import { Collapse, Offcanvas } from "bootstrap";
+import { ref, createRef, Ref } from "lit/directives/ref.js";
+import genId from "../utils/generateId";
+import SgdsElement from "../utils/sgds-element";
+import {
+  SM_BREAKPOINT,
+  MD_BREAKPOINT,
+  LG_BREAKPOINT,
+  XL_BREAKPOINT,
+  XXL_BREAKPOINT,
+} from "../utils/breakpoints";
+import { classMap } from "lit/directives/class-map.js";
+
+export type MainnavExpandSize =
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl"
+  | "xxl"
+  | "always"
+  | "never";
+
+const SIZES = {
+  sm: SM_BREAKPOINT,
+  md: MD_BREAKPOINT,
+  lg: LG_BREAKPOINT,
+  xl: XL_BREAKPOINT,
+  XXL: XXL_BREAKPOINT,
+  never: Infinity,
+  always: -1,
+};
+@customElement("sgds-mainnav")
+export class SgdsMainnav extends SgdsElement {
+  static styles = styles;
+
+  constructor() {
+    super();
+    window.addEventListener("resize", () => {
+      const newBreakpointReachedValue =
+        window.innerWidth < SIZES[this.expand.toString()];
+      if (newBreakpointReachedValue !== this.breakpointReached) {
+        this.requestUpdate();
+      }
+    });
+  }
+
+  private myCollapse: Ref<HTMLElement> = createRef();
+  private bsCollapse: Collapse = null;
+  // TODO: stylings and slots are incomplete for offcanvas mode
+  private myOffcanvas: Ref<HTMLElement> = createRef();
+  private bsOffcanvas: Offcanvas = null;
+
+  private _onClickButton() {
+    if (this.mode === "offcanvas") {
+      return this.bsOffcanvas.toggle();
+    }
+    this.bsCollapse.toggle();
+  }
+
+  @property({ type: String })
+  brandHref = "";
+
+  @property({ type: String })
+  collapseId = genId("mainnav", "collapse");
+
+  @property()
+  expand: MainnavExpandSize = "lg";
+
+  @property({ type: String })
+  mode: "offcanvas" | "default" = "default";
+
+  @state()
+  breakpointReached: Boolean = false;
+
+  @state()
+  expanded: Boolean = false;
+
+  firstUpdated() {
+    
+    if (this.mode === "default") {
+      this.bsCollapse = new Collapse(this.myCollapse.value, {
+        toggle: false,
+      });
+      this.myCollapse.value.addEventListener("show.bs.collapse", () => {
+        this.expanded = true;
+      });
+      this.myCollapse.value.addEventListener("shown.bs.collapse", () => {
+        this.expanded = true;
+      });
+      this.myCollapse.value.addEventListener("hide.bs.collapse", () => {
+        this.expanded = false;
+      });
+      this.myCollapse.value.addEventListener("hidden.bs.collapse", () => {
+        this.expanded = false;
+      });
+    }
+
+    if (this.mode === "offcanvas") {
+      this.bsOffcanvas = new Offcanvas(this.myOffcanvas.value);
+      //add esc keyboard event for bsOffcanvas
+      this.addEventListener("keydown", (ev) => {
+        if (ev.key === "Escape") {
+          this.bsOffcanvas.hide();
+        }
+      });
+    }
+
+  }
+// assigning name attribute to elements added in slot="end", to use wildcard css selector to assign styles only to *-mainnav-item
+_handleSlotChange(e: Event){
+const childElements = (e.target as HTMLSlotElement).assignedElements({flatten: true})
+childElements.forEach(e => e.setAttribute('name', e.tagName.toLowerCase()))
+} 
+
+  render() {
+    this.breakpointReached = window.innerWidth < SIZES[this.expand.toString()];
+    const collapseClass = "collapse navbar-collapse order-4";
+    const offcanvasClass = "offcanvas offcanvas-start order-4";
+    return html`
+      <nav
+        class="sgds navbar navbar-light
+        ${this._expandClass()}"
+      >
+        <a class="navbar-brand me-auto order-1" href=${this.brandHref}>
+          <slot name="brand"></slot>
+        </a>
+        <slot
+          name="non-collapsible"
+          class="${this.breakpointReached ? "order-2" : "order-5"}"
+        ></slot>
+        <button
+          class="navbar-toggler order-3"
+          type="button"
+          @click=${() => this._onClickButton()}
+          aria-controls="${this.collapseId}"
+          aria-expanded="${this.expanded}"
+          aria-label="Toggle navigation"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="30"
+            height="30"
+            fill="currentColor"
+            class="bi bi-list"
+            viewBox="0 0 16 16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
+            />
+          </svg>
+        </button>
+        <div
+          class=${this.mode === "default" ? collapseClass : offcanvasClass}
+          ${this.mode === "default"
+            ? ref(this.myCollapse)
+            : ref(this.myOffcanvas)}
+          id=${this.collapseId}
+        >
+          <ul class="navbar-nav">
+            <slot></slot>
+            <slot name="end" class=${classMap({"slot-end": !this.breakpointReached})} @slotchange=${this._handleSlotChange}></slot>
+          </ul>
+        </div>
+      </nav>
+    `;
+  }
+  _expandClass() {
+    switch (this.expand) {
+      case "always":
+        return "navbar-expand";
+      case "never":
+        break;
+      default:
+        return `navbar-expand-${this.expand}`;
+    }
+  }
+}
+
+export default SgdsMainnav;

package/src/Masthead/index.ts

@@ -0,0 +1 @@
+export {SgdsMasthead} from './sgds-masthead';