@govtechsg/sgds-web-component 0.0.10 → 0.0.11

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";

package/src/Modal/sgds-modal.scss

@@ -1,128 +0,0 @@
-@import '../utils/base.scss';
-
-  :host {
-    --sgds-modal-width: 35rem;
-    --sgds-modal-z-index: 1055;
-    --sgds-modal-padding: 1.5rem;
-    --sgds-modal-border-radius: 5px;
-
-    --sgds-modal-border-width: 1px;
-    --sgds-modal-overlay-color:rgba(0,0,0,0.5);
-    display: contents;
-  }
-
-  [hidden] {
-    display: none !important;
-  }
-
-  .modal {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1050;
-    font-family: var(--sgds-body-font-family);
-  }
-
-  .modal-panel {
-    display: flex;
-    flex-direction: column;
-    z-index: var(--sgds-modal-z-index);
-    width: var(--sgds-modal-width);
-    max-width: calc(100% - 2.25rem);
-    max-height: calc(100% - 2.25rem);
-    background-color: white;
-    border-radius: var(--sgds-modal-border-radius);
-  }
-
-  .modal-panel:focus {
-    outline: none;
-  }
-
-  /* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */
-  @media screen and (max-width: 420px) {
-    .modal-panel {
-      max-height: 80vh;
-    }
-  }
-
-  .modal--open .modal-panel {
-    display: flex;
-    opacity: 1;
-    transform: none;
-  }
-
-  .modal-header {
-    flex: 0 0 auto;
-    display: flex;
-    padding: var(--sgds-modal-padding);
-    align-items: center;
-    border-bottom: var(--sgds-modal-border-width) solid var(--sgds-gray-400, #98a2b3);
-    &.centered{
-      @extend .border-bottom-0;
-      @extend .pb-0;
-      @extend .mb-0; 
-      
-    }
-  }
-
-  .modal-title {
-    flex: 1 1 auto;
-    @extend .h3;
-    @extend .gap-3;
-    margin: 0;
-    &.centered{
-      @extend .justify-content-center; 
-      @extend .flex-column; 
-      @extend .text-center; 
-      margin-left: 3rem;
-    }
-  }
-  
-  .modal-close {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    &.centered{
-      @extend .align-self-start;
-      margin-top: -0.5rem;
-    }
-  }
-
-  .modal-body {
-    flex: 1 1 auto;
-    padding: var(--sgds-modal-padding);
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .modal-footer {
-    flex: 0 0 auto;
-    text-align: right;
-    padding: var(--sgds-modal-padding);
-    padding-top:0;
-    &.centered{
-      text-align: center;
-    }
-  }
-
-  .modal-footer ::slotted(sgds-button) {
-    margin-inline-start: 0.5rem;
-  }
-
-  .modal:not(.modal--has-footer) .modal-footer {
-    display: none;
-  }
-
-  .modal-overlay {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: var(--sgds-modal-overlay-color);
-  }