@govtechsg/sgds-web-component 0.0.10 → 0.0.12

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

@@ -1,8 +0,0 @@
-
-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

@@ -1,39 +0,0 @@
-@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

@@ -1,183 +0,0 @@
-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

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

package/src/Masthead/sgds-masthead.scss

@@ -1,217 +0,0 @@
-@import "../utils/base.scss";
-@import "~@govtechsg/sgds/sass/containers";
-@import "~@govtechsg/sgds/sass/grid";
-
-:host{
-    --masthead-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
-    --masthead-text-color: hsl(0, 0%, 28%);
-    --masthead-link-color: hsl(222, 63%, 50%);
-    --masthead-link-color-hover: hsl(221, 64%, 55%);
-    --masthead-mobile-font-size: 0.6875rem;
-    --masthead-mobile-padding-x: 0.75rem;
-    --masthead-fluid-padding-x: 0.75rem;
-    --masthead-crest-color: rgb(239, 51, 32);
-    
-}
-
-.sgds-masthead{
-    font-size: 0.875rem;
-    background-color: hsl(0, 0%, 94%);
-    font-family: var(--masthead-font-family);
-    color: var(--masthead-text-color);
-    @media screen and (max-width: 1023px){
-        font-size: var(--masthead-mobile-font-size);
-        .col,.row{
-            padding-left:0;
-            padding-right: 0;
-        }
-        .row{
-            margin-right:0;
-            margin-left:0;
-        }
-    }
-}
-
-.sg-crest {
-    width: 1.25rem;
-    height: 1.75rem;
-    path{
-        fill: var(--masthead-crest-color);
-    }
-}
-
-.masthead-layout{
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-}
-
-
-
-.sgds-masthead-identify-icon {
-    width: 12px;
-    height: 21px;
-    display: block;
-    transform: rotate(180deg);
-    user-select: none;
-    transition: all 0.3s ease-in-out 0s;
-    align-self: center;
-    &.show{
-        transform: rotate(0deg);
-    }
-}
-
-.sgds-masthead-button {
-    display: flex;
-    color: var(--masthead-link-color);
-    align-items: center;
-    cursor: pointer;
-    &-text{
-        text-decoration: underline;
-        &:hover{
-            color: var(--masthead-link-color-hover);
-        }
-    }
-}
-
-.sgds-masthead-content{
-    padding-top: 2.5rem;
-    padding-bottom: 3rem;
-    display: none;
-    @media screen and (max-width: 1023px) {
-        padding-top: 1rem;
-        padding-bottom: 2rem;
-    }
-    .content-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-        gap: 10rem;
-        @media screen and (max-width: 1023px){
-            grid-template-columns: 1fr;
-            gap: 1.5rem;
-            .banner-icon-inline {
-                width: 0.6rem;
-                height: 0.6rem;
-                margin-bottom: 0.1875rem;
-                
-            }
-        }
-        .icon{
-            margin-top: -0.1em;
-
-        }
-    }
-
-    
-    .wrapper {
-        display: flex;
-        gap: 1rem;
-        font-size: 1rem;
-        @media screen and (max-width: 1023px){
-            font-size: var(--masthead-mobile-font-size);
-            gap: 0.5rem;
-        }
-        .content {
-            .title {
-                font-weight: 600;
-                margin-bottom: 0.5rem;
-                @media screen and (max-width: 1023px) {
-                    margin-bottom: 0.25rem;
-                }
-            }
-            article{
-                line-height: 1.5rem;
-                @media screen and (max-width: 1023px) {
-                    line-height: 1.2rem;
-                }
-            }
-        }
-        .banner-icon{
-            width: 1.125rem;
-            path{
-                fill: var(--masthead-text-color);
-            }
-            
-            @media screen and (max-width: 1023px) {
-                width: 0.75rem;
-            }
-            svg{
-                line-height: 1.5rem;
-                @media screen and (max-width: 1023px) {
-                    width: 1.25rem;
-                }
-            }
-        }
-        .banner-icon-inline{
-            path{
-                fill: var(--masthead-text-color);
-            }
-            @media screen and (max-width: 1023px){
-                    width: 0.6rem;
-                    height: 0.6rem;
-                    margin-bottom: 0.1875rem;
-            }
-        }
-
-    }
-
-    &.show{
-        display: block;
-    }
-}
-
-a[target="_blank"]{
-    text-decoration: none;
-    &::after{
-        content: none;
-    }
-}
-
-
-a.trusted-websites-link{
-    display: inline-flex;
-    align-items: center;
-    color: var(--masthead-link-color);
-    margin-left: 0.125rem;
-    svg{
-        margin-left: 0.125rem;
-        fill: var(--masthead-link-color);
-    }
-    &:hover{
-        color: var(--masthead-link-color-hover); 
-        svg{
-            fill: var(--masthead-link-color-hover); 
-        }
-    }
-}
-
-@media screen and (max-width: 1023px){
-    .trusted-websites-icon{
-        width:0.75rem;
-    }
-}
-
-.sgds-masthead{
-    > .container{
-        @media screen and (max-width: 1023px){
-            padding-left: var(--masthead-mobile-padding-x);
-            padding-right: var(--masthead-mobile-padding-x);
-        }
-    }
-    > .container-fluid{
-        padding-left: var(--masthead-fluid-padding-x);
-        padding-right: var(--masthead-fluid-padding-x);
-        @media screen and (max-width: 1023px){
-            padding-left: var(--masthead-mobile-padding-x);
-            padding-right: var(--masthead-mobile-padding-x);
-        }
-    }
-    
-    &:not([fluid]){
-        @media screen and (max-width: 1023px){
-            .container{
-                margin: 0;
-            }
-        }
-    }
-}

package/src/Masthead/sgds-masthead.ts

@@ -1,189 +0,0 @@
-import { html } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import styles from "./sgds-masthead.scss";
-import SgdsElement from "../utils/sgds-element";
-
-/**
- * @property fluid - Include this attribute for full width container
- */
-
-@customElement("sgds-masthead")
-export class SgdsMasthead extends SgdsElement {
-  static styles = styles;
-
-  @property({ type: Boolean, reflect: true })
-  fluid: boolean = false;
-
-  @state()
-  toggleVisibility = false;
-
-  private _toggleVisibility() {
-    this.toggleVisibility = !this.toggleVisibility;
-  }
-
-  render() {
-    return html`
-      <div
-        id="sgds-masthead"
-        class="sgds-masthead"
-        aria-label="A Singapore Government Agency Website"
-      >
-        <div class="${this.fluid ? "container-fluid" : "container"}">
-          <div class="row">
-            <div class="col">
-              <div class="masthead-layout">
-                <svg
-                  version="1.1"
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="32"
-                  height="32"
-                  viewBox="0 0 32 32"
-                  class="sg-crest"
-                >
-                  <title>sg-crest</title>
-                  <path
-                    d="M5.896 11.185c0 0-0.949 1.341 0.294 3.075 0 0 0.196-0.883 2.159-0.883h2.356c2.225 0 3.893-2.126 2.846-4.319 0 0 1.57 0.164 2.095-0.818 0.523-0.981-0.033-1.374-0.818-1.374h-3.959c0 0.704-1.341 0.802-1.341 0h-2.225c0 0-1.669 0-1.701 1.407 0 0 0.377-0.229 0.752-0.261v0.375c0 0-0.458 0.082-0.671 0.197-0.212 0.114-0.523 0.425-0.228 1.227 0.294 0.801 0.409 1.079 0.409 1.079s0.475-0.41 1.244-0.41h0.9c1.602 0 1.308 1.554-0.295 1.554s-1.815-0.85-1.815-0.85z"
-                  ></path>
-                  <path
-                    d="M14.255 9.566c0 0 0.54 0.033 0.932-0.31 0 0 3.55 2.765-1.717 8.326-5.268 5.562-1.195 9.162-1.195 9.162s-0.948 0.915-0.409 2.699c0 0-2.191-1.237-3.867-3.338-2.422-3.036-3.902-7.681 2.749-11.386 0 0 4.389-2.208 3.506-5.153z"
-                  ></path>
-                  <path
-                    d="M8.829 6.343c0 0 0.709-1.265 2.355-1.265 1.298 0 1.594-0.666 1.594-0.666s0.566-1.079 3.424-1.079c2.619 0 4.384 0.873 5.812 2.039 0 0-3.85-2.388-7.645 0.971h-5.54z"
-                  ></path>
-                  <path
-                    d="M24.839 14.348c-0.109-3.948-3.163-8.179-9.728-7.939 6.413-5.431 17.537 6.695 8.375 13.066 0 0 1.533-2.186 1.353-5.126z"
-                  ></path>
-                  <path
-                    d="M16.093 6.845c8.005-0.24 10.863 9.357 5.693 13.676l-5.191 2.509c0 0-0.676-2.181 1.833-4.734 2.509-2.551 4.929-7.328-2.006-10.469 0 0 0.131-0.654-0.327-0.981z"
-                  ></path>
-                  <path
-                    d="M15.678 9.004c0 0 0.393-0.371 0.524-0.676 5.954 2.486 5.017 6.697 1.461 10.23-2.181 2.246-1.505 4.668-1.505 4.668s-2.66 1.657-3.577 3.097c0 0-3.852-3.28 1.483-8.724 5.235-5.344 1.614-8.594 1.614-8.594z"
-                  ></path>
-                </svg>
-                <span>A Singapore Government Agency Website</span>
-                <div
-                  class="sgds-masthead-button"
-                  id="sgds-masthead-identify"
-                  role="button"
-                  aria-expanded="${this.toggleVisibility}"
-                  aria-controls="sgds-masthead-content"
-                  @click=${() => this._toggleVisibility()}
-                >
-                  <span class="sgds-masthead-button-text"
-                    >How to identify</span
-                  >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="20"
-                    height="20"
-                    viewBox="0 0 20 20"
-                    fill="none"
-                    class="sgds-masthead-identify-icon ${!this.toggleVisibility ? null : "show"}"
-                  >
-                    <path
-                      d="M8.65188 6.85L8.64813 6.84625L10.0031 5.49125L17.0744 12.5625L15.7194 13.9175L10.0075 8.20562L4.2875 13.9256L2.9325 12.5706L8.6525 6.85062L8.65188 6.85Z"
-                      fill="#2F60CE"
-                    ></path>
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div id="sgds-masthead-content" class="container sgds-masthead-content ${this.toggleVisibility ? "show" : null }">
-          <div class="row">
-            <div class="col">
-              <div class="content-grid">
-                <div class="wrapper">
-                  <div class="icon">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="17"
-                      height="17"
-                      viewBox="0 0 17 17"
-                      fill="none"
-                      class="banner-icon"
-                    >
-                      <path
-                        d="M0.166016 5.6665V9.00067H0.999349V13.9998H0.166016V16.4998H0.999349H3.49935H5.16602H7.66601H9.33268H11.8327H13.4993L15.9993 16.5007V16.4998H16.8327V13.9998H15.9993V9.00067H16.8327V5.6665L8.49935 0.666504L0.166016 5.6665ZM3.49935 13.9998V9.00067H5.16602V13.9998H3.49935ZM7.66601 13.9998V9.00067H9.33268V13.9998H7.66601ZM13.4993 13.9998H11.8327V9.00067H13.4993V13.9998ZM10.166 5.6665C10.166 6.58651 9.41935 7.33317 8.49935 7.33317C7.57935 7.33317 6.83268 6.58651 6.83268 5.6665C6.83268 4.7465 7.57935 3.99984 8.49935 3.99984C9.41935 3.99984 10.166 4.7465 10.166 5.6665Z"
-                        fill="#242425"
-                      ></path>
-                    </svg>
-                  </div>
-                  <div class="content">
-                    <div class="title">
-                      Official website links end with .gov.sg
-                    </div>
-                    <article>
-                      Government agencies communicate via .gov.sg websites (e.g.
-                      go.gov.sg/open).<a
-                        href="https://www.gov.sg/trusted-sites#govsites"
-                        class="trusted-websites-link"
-                        rel="noreferrer"
-                        target="_blank"
-                        >Trusted websites<svg
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="18"
-                          height="18"
-                          viewBox="0 0 32 32"
-                          class="trusted-websites-icon"
-                        >
-                          <title>Trusted websites</title>
-                          <path
-                            d="M18.667 4v2.667h4c0.186-0.020 0.374-0.020 0.56 0l-2.667 2.667-6.973 6.987 1.88 1.88 9.733-9.667c0.092 0.257 0.137 0.528 0.133 0.8v4h2.667v-9.333h-9.333z"
-                          ></path>
-                          <path
-                            d="M22.667 25.333h-16v-16h8v-2.667h-8c-1.473 0-2.667 1.194-2.667 2.667v16c0 1.473 1.194 2.667 2.667 2.667h16c1.473 0 2.667-1.194 2.667-2.667v-8h-2.667v8z"
-                          ></path></svg
-                      ></a>
-                    </article>
-                  </div>
-                </div>
-                <div class="wrapper">
-                  <div class="icon">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="15"
-                      height="18"
-                      viewBox="0 0 15 18"
-                      fill="none"
-                      class="banner-icon"
-                    >
-                      <path
-                        d="M14.1663 9.00008C14.1663 8.08091 13.4188 7.33342 12.4997 7.33342H11.6663V4.83342C11.6663 2.53591 9.79717 0.666748 7.49967 0.666748C5.20217 0.666748 3.33301 2.53591 3.33301 4.83342V7.33342H2.49967C1.58051 7.33342 0.833008 8.08091 0.833008 9.00008V15.6667C0.833008 16.5859 1.58051 17.3334 2.49967 17.3334H12.4997C13.4188 17.3334 14.1663 16.5859 14.1663 15.6667V9.00008ZM4.99967 4.83342C4.99967 3.45508 6.12134 2.33341 7.49967 2.33341C8.87801 2.33341 9.99967 3.45508 9.99967 4.83342V7.33342H4.99967V4.83342Z"
-                        fill="#242425"
-                      ></path>
-                    </svg>
-                  </div>
-                  <div class="content">
-                    <div class="title">Secure websites use HTTPS</div>
-                    <article>
-                      Look for a<b> lock </b>(<svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="15"
-                        height="18"
-                        viewBox="0 0 15 18"
-                        fill="none"
-                        class="banner-icon-inline"
-                      >
-                        <path
-                          d="M14.1663 9.00008C14.1663 8.08091 13.4188 7.33342 12.4997 7.33342H11.6663V4.83342C11.6663 2.53591 9.79717 0.666748 7.49967 0.666748C5.20217 0.666748 3.33301 2.53591 3.33301 4.83342V7.33342H2.49967C1.58051 7.33342 0.833008 8.08091 0.833008 9.00008V15.6667C0.833008 16.5859 1.58051 17.3334 2.49967 17.3334H12.4997C13.4188 17.3334 14.1663 16.5859 14.1663 15.6667V9.00008ZM4.99967 4.83342C4.99967 3.45508 6.12134 2.33341 7.49967 2.33341C8.87801 2.33341 9.99967 3.45508 9.99967 4.83342V7.33342H4.99967V4.83342Z"
-                          fill="#242425"
-                        ></path></svg
-                      >) or https:// as an added precaution. Share sensitive
-                      information only on official, secure websites.
-                    </article>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-export default SgdsMasthead;

package/src/Modal/index.ts

@@ -1 +0,0 @@
-export { SgdsModal } from "./sgds-modal";