@govtechsg/sgds-web-component 0.0.7 → 0.0.10

package/src/Masthead/sgds-masthead.scss

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

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

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

package/src/Modal/sgds-modal.scss

@@ -0,0 +1,128 @@
+@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);
+  }