@govtechsg/sgds-web-component 3.0.0-rc.0 → 3.0.0-rc.2

package/components/Footer/index.umd.js

@@ -4075,7 +4075,7 @@
       (globalThis.litIssuedWarnings ??= new Set());
   }
 
-  var css_248z$1 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-heading);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}::slotted(a){color:var(--sgds-link);text-decoration:var(--sgds-link-decoration)}::slotted(a:hover){color:var(--sgds-link-hover-color)}::slotted(svg){vertical-align:middle}}`;
+  var css_248z$2 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-heading);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}::slotted(a){color:var(--sgds-link);text-decoration:var(--sgds-link-decoration)}::slotted(a:hover){color:var(--sgds-link-hover-color)}::slotted(svg){vertical-align:middle}}`;
 
   /**
    * @cssprop --sgds-{stateColor} - State colors in hexadecimal value
@@ -4093,44 +4093,26 @@
           return event;
       }
   }
-  SgdsElement.styles = [css_248z$1];
+  SgdsElement.styles = [css_248z$2];
 
-  var css_248z = css`*,:after,:before{box-sizing:border-box}.sgds.footer .footer-header .title{color:var(--sgds-heading-color);font-size:calc(1.275rem + .3vw);font-weight:700;line-height:1.2;margin-bottom:.5rem;margin-top:0}@media (min-width:1200px){.sgds.footer .footer-header .title{font-size:1.5rem}}.sgds.footer .footer-header .title{line-height:1.33}.container-fluid{margin-left:auto;margin-right:auto;padding-left:var(--sgds-gutter-x,1.5rem);padding-right:var(--sgds-gutter-x,1.5rem);width:100%}.row{--sgds-gutter-x:1.5rem;--sgds-gutter-y:0;display:flex;flex-wrap:wrap;margin-left:calc(var(--sgds-gutter-x)*-.5);margin-right:calc(var(--sgds-gutter-x)*-.5);margin-top:calc(var(--sgds-gutter-y)*-1)}.row>*{flex-shrink:0;margin-top:var(--sgds-gutter-y);max-width:100%;padding-left:calc(var(--sgds-gutter-x)*.5);padding-right:calc(var(--sgds-gutter-x)*.5);width:100%}.col{flex:1 0 0%}@media (min-width:768px){.col-md-4{flex:0 0 auto;width:33.33333333%}}@media (min-width:1400px){.col-xxl-2{flex:0 0 auto;width:16.66666667%}}.sgds.footer .footer-contact-links ul,.sgds.footer .footer-items ul,.sgds.footer .footer-mandatory-links ul{margin:0;padding:0}.sgds.footer .footer-contact-links ul li,.sgds.footer .footer-items ul li,.sgds.footer .footer-mandatory-links ul li{font-size:1rem;line-height:1.5;list-style-type:none}.sgds.footer .footer-contact-links ul li+li,.sgds.footer .footer-items ul li+li,.sgds.footer .footer-mandatory-links ul li+li{margin-top:1rem}.sgds.footer .footer-contact-links ul li a,.sgds.footer .footer-items ul li a,.sgds.footer .footer-mandatory-links ul li a{color:#d0d5dd;text-decoration:none}.sgds.footer,.sgds.footer .footer-contact-links ul li a:hover,.sgds.footer .footer-items ul li a:hover,.sgds.footer .footer-mandatory-links ul li a:hover{color:#f7f7f7}.sgds.footer{height:auto}.sgds.footer .footer-top{background-color:#111;padding:3rem 0 1.5rem}.sgds.footer .footer-header{margin-bottom:1.5rem}.sgds.footer .footer-header .title{margin-bottom:1rem}.sgds.footer .footer-header .description{color:#d0d5dd}@media (max-width:575.98px){.sgds.footer .footer-items>div[class*=col]+div[class*=col]{margin-top:2rem}}.sgds.footer .footer-items .title{font-weight:700}.sgds.footer .footer-items .links{margin-top:1rem}.sgds.footer .footer-contact-links{margin-top:2rem}@media (min-width:992px){.sgds.footer .footer-contact-links ul li{display:inline-block}.sgds.footer .footer-contact-links ul li+li{margin-left:1rem}}.sgds.footer .footer-bottom{background-color:#111;padding:1.5rem 0}@media (min-width:992px){.sgds.footer .footer-mandatory-links ul li{display:inline-block}.sgds.footer .footer-mandatory-links ul li+li{margin-left:1rem}}@media (max-width:991.98px){.sgds.footer .footer-copyrights{margin-top:1rem}}.d-flex{display:flex!important}.text-end{text-align:right!important}@media (min-width:992px){.justify-content-lg-end{justify-content:flex-end!important}}`;
+  var css_248z$1 = css`.footer{container:footer/inline-size;height:auto}.footer-top{background-color:var(--sgds-default-bg-emphasis);border-bottom:var(--sgds-border-width-1) solid var(--sgds-default-border-color);gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.footer-header,.footer-top{display:flex;flex-direction:column}.footer-header{gap:var(--sgds-gap-xs);margin:var(--sgds-margin-3-xs) 0}slot[name=title]::slotted(*){--sgds-header-color:var(--sgds-default-color-inverse);--sgds-font-size-6:var(--sgds-font-size-5);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-line-height-heading:var(--sgds-line-height-body);color:var(--sgds-header-color,--sgds-default-color-inverse);font-size:var(--sgds-font-size-6,--sgds-font-size-5);font-weight:var(--sgds-font-weight-bold);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-heading,--sgds-line-height-body);margin-bottom:var(--sgds-margin-2-xs,--sgds-margin-none);margin-top:var(--sgds-margin-none)}slot[name=description]::slotted(*){--sgds-font-size-2:var(--sgds-font-size-3);--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-default-color-muted);font-size:var(--sgds-font-size-2,--sgds-font-size-3);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none);margin-top:var(--sgds-margin-none)}.footer-items{display:grid;gap:var(--sgds-gap-md) var(--sgds-gap-lg);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.footer ul{margin:0;padding:0}.footer ul li{list-style-type:none}.footer-mandatory-links ul li a{color:var(--sgds-default-color-muted);text-decoration:none}.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:hover{color:var(--sgds-default-color-inverse)}.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.footer-bottom{background-color:var(--sgds-default-bg-emphasis);display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-xl) var(--sgds-padding-2-xl)}.social-media{display:flex;gap:var(--sgds-gap-sm)}slot[name=social-media]::slotted(a){--sgds-link-color:light-dark(var(--sgds-gray-000),var(--sgds-gray-900));--sgds-body-color:light-dark(var(--sgds-gray-000),var(--sgds-gray-900));color:var(--sgds-body-color,--sgds-link-color);display:inline-flex}slot[name=social-media]::slotted(a:hover){--sgds-link-color-emphasis:light-dark(var(--sgds-gray-000),var(--sgds-gray-900));color:var(--sgds-link-color-emphasis)}slot[name=social-media]::slotted(a:focus),slot[name=social-media]::slotted(a:focus-visible){--sgds-link-color-emphasis:light-dark(var(--sgds-gray-000),var(--sgds-gray-900));box-shadow:var(--sgds-box-shadow-focus);color:var(--sgds-link-color-emphasis);outline:0}.footer-mandatory-links{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xl) var(--sgds-gap-lg);justify-content:space-between}.footer-mandatory-links ul{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs) var(--sgds-gap-xl)}.footer-copyrights{color:var(--sgds-default-color-muted)}@container footer (max-width: 711px){.footer-bottom,.footer-top{padding:var(--sgds-padding-lg)}.footer-top{gap:var(--sgds-gap-lg)}.footer-mandatory-links,.footer-mandatory-links ul{flex-direction:column}}`;
 
   /**
    * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.
    *
-   * @csspart footer-top - The component's footer-top section container.
-   * @csspart footer-bottom - The component's footer-bottom section container.
+   * @slot title - The slot for title
+   * @slot description - The slot for description
+   * @slot items - The slot for the list of footer items
+   * @slot social-media - The slot for the list of social media with icons
    *
-   * @cssproperty footer-top - The component's footer-top section container.
-   * @cssproperty footer-bottom - The component's footer-bottom section container.
    */
   class SgdsFooter extends SgdsElement {
       constructor() {
           super(...arguments);
-          /**
-           * 	Sets title of SgdsFooter
-           */
-          this.title = "";
-          /**
-           * 	Sets description of SgdsFooter
-           */
-          this.description = "";
           /**
            * 	Sets copyrightLiner of SgdsFooter
            */
           this.copyrightLiner = "Government of Singapore";
-          /**
-           * Array of type
-           *
-           * `interface ColumnLinks { title: string; links : Links[] } interface Links { href: string; label: string; }`
-           */
-          this.links = [];
-          /**
-           * String date for last updated date
-           */
-          this.lastUpdatedDate = "";
           /**
            * 	href link for contacts
            */
@@ -4139,6 +4121,10 @@
            * 	href link for feedback
            */
           this.feedbackHref = "#";
+          /**
+           * 	href link for faq
+           */
+          this.faqHref = "#";
           /**
            * 	href link for privacy statement
            */
@@ -4148,94 +4134,83 @@
            */
           this.termsOfUseHref = "#";
       }
+      firstUpdated() {
+          const socialMediaSlot = this.shadowRoot.querySelector("slot[name='social-media']");
+          const footerTitleSlot = this.shadowRoot.querySelector("slot[name='title']");
+          const footerDescriptionSlot = this.shadowRoot.querySelector("slot[name='description']");
+          const footerItemsSlot = this.shadowRoot.querySelector("slot[name='items']");
+          const socialMediaChildNodes = socialMediaSlot.assignedNodes({ flatten: true });
+          const footerTitleChildNodes = footerTitleSlot.assignedNodes({ flatten: true });
+          const footerDescriptionChildNodes = footerDescriptionSlot.assignedNodes({ flatten: true });
+          const footerItemsChildNodes = footerItemsSlot.assignedNodes({ flatten: true });
+          if (socialMediaChildNodes.length === 0) {
+              const socialMediaContainer = this.shadowRoot.querySelector(".social-media");
+              socialMediaContainer.style.display = "none";
+          }
+          if (footerTitleChildNodes.length === 0 && footerDescriptionChildNodes.length === 0) {
+              const footerHeaderContainer = this.shadowRoot.querySelector(".footer-header");
+              footerHeaderContainer.style.display = "none";
+          }
+          if (footerItemsChildNodes.length === 0) {
+              const footerItemsContainer = this.shadowRoot.querySelector(".footer-items");
+              footerItemsContainer.style.display = "none";
+          }
+          if (footerTitleChildNodes.length === 0 &&
+              footerDescriptionChildNodes.length === 0 &&
+              footerItemsChildNodes.length === 0) {
+              const footerTopContainer = this.shadowRoot.querySelector(".footer-top");
+              footerTopContainer.style.display = "none";
+          }
+      }
       render() {
-          // if description is defined
-          const hasDescription = html ` <div class="description">${this.description}</div>`;
           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 ? this.title : "Footer title"}</div>
-                ${this.description ? hasDescription : undefined}
-              </div>
-            </div>
-            <div class="row footer-items">
-              ${this.links.map((item) => html `
-                    <div class="col-xxl-2 col-md-4 mb-3">
-                      <div class="title">${item.title}</div>
-                      <ul class="links">
-                        ${item.links.map((link) => 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>
-                  </ul>
-                </div>
-              </div>
-            </div>
+      <footer class="footer">
+        <section class="footer-top">
+          <div class="footer-header">
+            <slot name="title"></slot>
+            <slot name="description"></slot>
+          </div>
+          <div class="footer-items">
+            <slot name="items"></slot>
           </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="https://tech.gov.sg/report_vulnerability" 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()} ${this.copyrightLiner}<br />
-                  Last Updated ${this.lastUpdatedDate}
-                </div>
-              </div>
-            </div>
+        <section class="footer-bottom">
+          <div class="social-media">
+            <slot name="social-media"></slot>
+          </div>
+          <div class="footer-mandatory-links">
+            <ul>
+              <li><a href=${this.contactHref}>Contact</a></li>
+              <li><a href=${this.feedbackHref}>Feedback</a></li>
+              <li><a href=${this.faqHref}>FAQ</a></li>
+              <li>
+                <a href="https://tech.gov.sg/report_vulnerability" 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 class="footer-copyrights">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>
           </div>
         </section>
       </footer>
     `;
       }
   }
-  SgdsFooter.styles = [...SgdsElement.styles, css_248z];
-  __decorate([
-      property({ type: String })
-  ], SgdsFooter.prototype, "title", void 0);
-  __decorate([
-      property({ type: String })
-  ], SgdsFooter.prototype, "description", void 0);
+  SgdsFooter.styles = [...SgdsElement.styles, css_248z$1];
   __decorate([
       property({ type: String })
   ], SgdsFooter.prototype, "copyrightLiner", void 0);
-  __decorate([
-      property({
-          type: Array
-      })
-  ], SgdsFooter.prototype, "links", void 0);
-  __decorate([
-      property({ type: String })
-  ], SgdsFooter.prototype, "lastUpdatedDate", void 0);
   __decorate([
       property({ type: String })
   ], SgdsFooter.prototype, "contactHref", void 0);
   __decorate([
       property({ type: String })
   ], SgdsFooter.prototype, "feedbackHref", void 0);
+  __decorate([
+      property({ type: String })
+  ], SgdsFooter.prototype, "faqHref", void 0);
   __decorate([
       property({ type: String })
   ], SgdsFooter.prototype, "privacyHref", void 0);
@@ -4243,7 +4218,31 @@
       property({ type: String })
   ], SgdsFooter.prototype, "termsOfUseHref", void 0);
 
+  var css_248z = css`.footer-item{margin-bottom:var(--sgds-margin-3-xs)}.footer-item,.links{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}slot[name=title]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-default-color-inverse);font-weight:var(--sgds-font-weight-regular,--sgds-font-weight-semibold);margin:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}.links{margin:0;padding:0}.links slot::slotted(a){--sgds-link-color:var(--sgds-default-color-muted);color:var(--sgds-link-color,--sgds-default-color-muted);text-decoration:none!important;width:fit-content}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible),slot::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-default-color-inverse);color:var(--sgds-link-color-emphasis,--sgds-default-color-inverse)}.links slot::slotted(a:focus),.links slot::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus);outline:0}`;
+
+  /**
+   * @summary The footer item component organizes links under a clear, descriptive title within the footer. It helps users easily navigate to related resources or information, ensuring clarity and accessibility.
+   *
+   * @slot default - The slot for the list of link items
+   * @slot title - The slot for the title of the list of items
+   *
+   */
+  class SgdsFooterItem extends SgdsElement {
+      render() {
+          return html `
+      <div class="footer-item">
+        <slot name="title"></slot>
+        <div class="links">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+      }
+  }
+  SgdsFooterItem.styles = [...SgdsElement.styles, css_248z];
+
   customElements.define("sgds-footer", SgdsFooter);
+  customElements.define("sgds-footer-item", SgdsFooterItem);
 
 }));
 //# sourceMappingURL=index.umd.js.map