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

package/react/components/Footer/sgds-footer.cjs.js

@@ -12,37 +12,19 @@ var footer = require('./footer.cjs.js');
 /**
  * @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["default"] {
     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
          */
@@ -51,6 +33,10 @@ class SgdsFooter extends sgdsElement["default"] {
          * 	href link for feedback
          */
         this.feedbackHref = "#";
+        /**
+         * 	href link for faq
+         */
+        this.faqHref = "#";
         /**
          * 	href link for privacy statement
          */
@@ -60,64 +46,64 @@ class SgdsFooter extends sgdsElement["default"] {
          */
         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 = lit.html ` <div class="description">${this.description}</div>`;
         return lit.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) => lit.html `
-                    <div class="col-xxl-2 col-md-4 mb-3">
-                      <div class="title">${item.title}</div>
-                      <ul class="links">
-                        ${item.links.map((link) => lit.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>
@@ -125,29 +111,18 @@ class SgdsFooter extends sgdsElement["default"] {
     }
 }
 SgdsFooter.styles = [...sgdsElement["default"].styles, footer["default"]];
-tslib.__decorate([
-    decorators_js.property({ type: String })
-], SgdsFooter.prototype, "title", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: String })
-], SgdsFooter.prototype, "description", void 0);
 tslib.__decorate([
     decorators_js.property({ type: String })
 ], SgdsFooter.prototype, "copyrightLiner", void 0);
-tslib.__decorate([
-    decorators_js.property({
-        type: Array
-    })
-], SgdsFooter.prototype, "links", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: String })
-], SgdsFooter.prototype, "lastUpdatedDate", void 0);
 tslib.__decorate([
     decorators_js.property({ type: String })
 ], SgdsFooter.prototype, "contactHref", void 0);
 tslib.__decorate([
     decorators_js.property({ type: String })
 ], SgdsFooter.prototype, "feedbackHref", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String })
+], SgdsFooter.prototype, "faqHref", void 0);
 tslib.__decorate([
     decorators_js.property({ type: String })
 ], SgdsFooter.prototype, "privacyHref", void 0);

package/react/components/Footer/sgds-footer.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-footer.cjs.js","sources":["../../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport footerStyle from \"./footer.css\";\nexport interface ColumnLinks {\n  title: string;\n  links: Links[];\n}\nexport interface Links {\n  href: string;\n  label: string;\n}\n\n/**\n * @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.\n *\n * @csspart footer-top - The component's footer-top section container.\n * @csspart footer-bottom - The component's footer-bottom section container.\n *\n * @cssproperty footer-top - The component's footer-top section container.\n * @cssproperty footer-bottom - The component's footer-bottom section container.\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerStyle];\n\n  /**\n   * \tSets title of SgdsFooter\n   */\n  @property({ type: String })\n  title = \"\";\n\n  /**\n   * \tSets description of SgdsFooter\n   */\n  @property({ type: String })\n  description = \"\";\n\n  /**\n   * \tSets copyrightLiner of SgdsFooter\n   */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\n   * Array of type\n   *\n   * `interface ColumnLinks { title: string; links : Links[] } interface Links { href: string; label: string; }`\n   */\n  @property({\n    type: Array\n  })\n  links: ColumnLinks[] = [];\n\n  /**\n   * String date for last updated date\n   */\n  @property({ type: String })\n  lastUpdatedDate = \"\";\n\n  /**\n   * \thref link for contacts\n   */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\n   * \thref link for feedback\n   */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\n   * \thref link for privacy statement\n   */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\n   * \thref link for terms of use\n   */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  render() {\n    // if description is defined\n    const hasDescription = html` <div class=\"description\">${this.description}</div>`;\n\n    return html`\n      <footer class=\"sgds footer\">\n        <section class=\"footer-top\" part=\"footer-top\">\n          <div class=\"container-fluid\">\n            <div class=\"row footer-header\">\n              <div class=\"col col-lg-6 col-md-12\">\n                <div class=\"title\">${this.title ? this.title : \"Footer title\"}</div>\n                ${this.description ? hasDescription : undefined}\n              </div>\n            </div>\n            <div class=\"row footer-items\">\n              ${this.links.map(\n                (item: ColumnLinks) =>\n                  html`\n                    <div class=\"col-xxl-2 col-md-4 mb-3\">\n                      <div class=\"title\">${item.title}</div>\n                      <ul class=\"links\">\n                        ${item.links.map((link: Links) => html` <li><a href=${link.href}>${link.label}</a></li> `)}\n                      </ul>\n                    </div>\n                  `\n              )}\n            </div>\n            <div class=\"row footer-contact-links\">\n              <div class=\"col\">\n                <div class=\"d-flex justify-content-lg-end\">\n                  <ul>\n                    <li><a href=${this.contactHref}>Contact</a></li>\n                    <li><a href=${this.feedbackHref}>Feedback</a></li>\n                  </ul>\n                </div>\n              </div>\n            </div>\n          </div>\n        </section>\n        <section class=\"footer-bottom\" part=\"footer-bottom\">\n          <div class=\"container-fluid\">\n            <div class=\"row footer-mandatory-links\">\n              <div class=\"col\">\n                <ul>\n                  <li>\n                    <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\"\n                      >Report Vulnerability</a\n                    >\n                  </li>\n                  <li><a href=${this.privacyHref}>Privacy Statement</a></li>\n                  <li><a href=${this.termsOfUseHref}>Terms of use</a></li>\n                </ul>\n              </div>\n            </div>\n            <div class=\"row footer-copyrights\">\n              <div class=\"col\">\n                <div class=\"d-flex justify-content-lg-end text-end\">\n                  © ${new Date().getFullYear()} ${this.copyrightLiner}<br />\n                  Last Updated ${this.lastUpdatedDate}\n                </div>\n              </div>\n            </div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["SgdsElement","html","footerStyle","__decorate","property"],"mappings":"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"}
+{"version":3,"file":"sgds-footer.cjs.js","sources":["../../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport footerStyle from \"./footer.css\";\n\n/**\n * @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.\n *\n * @slot title - The slot for title\n * @slot description - The slot for description\n * @slot items - The slot for the list of footer items\n * @slot social-media - The slot for the list of social media with icons\n *\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerStyle];\n\n  /**\n   * \tSets copyrightLiner of SgdsFooter\n   */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\n   * \thref link for contacts\n   */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\n   * \thref link for feedback\n   */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\n   * \thref link for faq\n   */\n  @property({ type: String })\n  faqHref = \"#\";\n\n  /**\n   * \thref link for privacy statement\n   */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\n   * \thref link for terms of use\n   */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  firstUpdated() {\n    const socialMediaSlot = this.shadowRoot.querySelector(\"slot[name='social-media']\") as HTMLSlotElement;\n    const footerTitleSlot = this.shadowRoot.querySelector(\"slot[name='title']\") as HTMLSlotElement;\n    const footerDescriptionSlot = this.shadowRoot.querySelector(\"slot[name='description']\") as HTMLSlotElement;\n    const footerItemsSlot = this.shadowRoot.querySelector(\"slot[name='items']\") as HTMLSlotElement;\n    const socialMediaChildNodes = socialMediaSlot.assignedNodes({ flatten: true });\n    const footerTitleChildNodes = footerTitleSlot.assignedNodes({ flatten: true });\n    const footerDescriptionChildNodes = footerDescriptionSlot.assignedNodes({ flatten: true });\n    const footerItemsChildNodes = footerItemsSlot.assignedNodes({ flatten: true });\n    if (socialMediaChildNodes.length === 0) {\n      const socialMediaContainer = this.shadowRoot.querySelector(\".social-media\") as HTMLDivElement;\n      socialMediaContainer.style.display = \"none\";\n    }\n\n    if (footerTitleChildNodes.length === 0 && footerDescriptionChildNodes.length === 0) {\n      const footerHeaderContainer = this.shadowRoot.querySelector(\".footer-header\") as HTMLDivElement;\n      footerHeaderContainer.style.display = \"none\";\n    }\n\n    if (footerItemsChildNodes.length === 0) {\n      const footerItemsContainer = this.shadowRoot.querySelector(\".footer-items\") as HTMLDivElement;\n      footerItemsContainer.style.display = \"none\";\n    }\n\n    if (\n      footerTitleChildNodes.length === 0 &&\n      footerDescriptionChildNodes.length === 0 &&\n      footerItemsChildNodes.length === 0\n    ) {\n      const footerTopContainer = this.shadowRoot.querySelector(\".footer-top\") as HTMLDivElement;\n      footerTopContainer.style.display = \"none\";\n    }\n  }\n\n  render() {\n    return html`\n      <footer class=\"footer\">\n        <section class=\"footer-top\">\n          <div class=\"footer-header\">\n            <slot name=\"title\"></slot>\n            <slot name=\"description\"></slot>\n          </div>\n          <div class=\"footer-items\">\n            <slot name=\"items\"></slot>\n          </div>\n        </section>\n        <section class=\"footer-bottom\">\n          <div class=\"social-media\">\n            <slot name=\"social-media\"></slot>\n          </div>\n          <div class=\"footer-mandatory-links\">\n            <ul>\n              <li><a href=${this.contactHref}>Contact</a></li>\n              <li><a href=${this.feedbackHref}>Feedback</a></li>\n              <li><a href=${this.faqHref}>FAQ</a></li>\n              <li>\n                <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\">\n                  Report Vulnerability\n                </a>\n              </li>\n              <li><a href=${this.privacyHref}>Privacy Statement</a></li>\n              <li><a href=${this.termsOfUseHref}>Terms of use</a></li>\n            </ul>\n            <div class=\"footer-copyrights\">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["SgdsElement","html","footerStyle","__decorate","property"],"mappings":"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"}

package/react/components/Footer/sgds-footer.js

@@ -8,37 +8,19 @@ import css_248z from './footer.js';
 /**
  * @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
          */
@@ -47,6 +29,10 @@ class SgdsFooter extends SgdsElement {
          * 	href link for feedback
          */
         this.feedbackHref = "#";
+        /**
+         * 	href link for faq
+         */
+        this.faqHref = "#";
         /**
          * 	href link for privacy statement
          */
@@ -56,64 +42,64 @@ class SgdsFooter extends SgdsElement {
          */
         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>
@@ -121,29 +107,18 @@ class SgdsFooter extends SgdsElement {
     }
 }
 SgdsFooter.styles = [...SgdsElement.styles, css_248z];
-__decorate([
-    property({ type: String })
-], SgdsFooter.prototype, "title", void 0);
-__decorate([
-    property({ type: String })
-], SgdsFooter.prototype, "description", void 0);
 __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);

package/react/components/Footer/sgds-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-footer.js","sources":["../../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport footerStyle from \"./footer.css\";\nexport interface ColumnLinks {\n  title: string;\n  links: Links[];\n}\nexport interface Links {\n  href: string;\n  label: string;\n}\n\n/**\n * @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.\n *\n * @csspart footer-top - The component's footer-top section container.\n * @csspart footer-bottom - The component's footer-bottom section container.\n *\n * @cssproperty footer-top - The component's footer-top section container.\n * @cssproperty footer-bottom - The component's footer-bottom section container.\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerStyle];\n\n  /**\n   * \tSets title of SgdsFooter\n   */\n  @property({ type: String })\n  title = \"\";\n\n  /**\n   * \tSets description of SgdsFooter\n   */\n  @property({ type: String })\n  description = \"\";\n\n  /**\n   * \tSets copyrightLiner of SgdsFooter\n   */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\n   * Array of type\n   *\n   * `interface ColumnLinks { title: string; links : Links[] } interface Links { href: string; label: string; }`\n   */\n  @property({\n    type: Array\n  })\n  links: ColumnLinks[] = [];\n\n  /**\n   * String date for last updated date\n   */\n  @property({ type: String })\n  lastUpdatedDate = \"\";\n\n  /**\n   * \thref link for contacts\n   */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\n   * \thref link for feedback\n   */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\n   * \thref link for privacy statement\n   */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\n   * \thref link for terms of use\n   */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  render() {\n    // if description is defined\n    const hasDescription = html` <div class=\"description\">${this.description}</div>`;\n\n    return html`\n      <footer class=\"sgds footer\">\n        <section class=\"footer-top\" part=\"footer-top\">\n          <div class=\"container-fluid\">\n            <div class=\"row footer-header\">\n              <div class=\"col col-lg-6 col-md-12\">\n                <div class=\"title\">${this.title ? this.title : \"Footer title\"}</div>\n                ${this.description ? hasDescription : undefined}\n              </div>\n            </div>\n            <div class=\"row footer-items\">\n              ${this.links.map(\n                (item: ColumnLinks) =>\n                  html`\n                    <div class=\"col-xxl-2 col-md-4 mb-3\">\n                      <div class=\"title\">${item.title}</div>\n                      <ul class=\"links\">\n                        ${item.links.map((link: Links) => html` <li><a href=${link.href}>${link.label}</a></li> `)}\n                      </ul>\n                    </div>\n                  `\n              )}\n            </div>\n            <div class=\"row footer-contact-links\">\n              <div class=\"col\">\n                <div class=\"d-flex justify-content-lg-end\">\n                  <ul>\n                    <li><a href=${this.contactHref}>Contact</a></li>\n                    <li><a href=${this.feedbackHref}>Feedback</a></li>\n                  </ul>\n                </div>\n              </div>\n            </div>\n          </div>\n        </section>\n        <section class=\"footer-bottom\" part=\"footer-bottom\">\n          <div class=\"container-fluid\">\n            <div class=\"row footer-mandatory-links\">\n              <div class=\"col\">\n                <ul>\n                  <li>\n                    <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\"\n                      >Report Vulnerability</a\n                    >\n                  </li>\n                  <li><a href=${this.privacyHref}>Privacy Statement</a></li>\n                  <li><a href=${this.termsOfUseHref}>Terms of use</a></li>\n                </ul>\n              </div>\n            </div>\n            <div class=\"row footer-copyrights\">\n              <div class=\"col\">\n                <div class=\"d-flex justify-content-lg-end text-end\">\n                  © ${new Date().getFullYear()} ${this.copyrightLiner}<br />\n                  Last Updated ${this.lastUpdatedDate}\n                </div>\n              </div>\n            </div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["footerStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-footer.js","sources":["../../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport footerStyle from \"./footer.css\";\n\n/**\n * @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.\n *\n * @slot title - The slot for title\n * @slot description - The slot for description\n * @slot items - The slot for the list of footer items\n * @slot social-media - The slot for the list of social media with icons\n *\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerStyle];\n\n  /**\n   * \tSets copyrightLiner of SgdsFooter\n   */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\n   * \thref link for contacts\n   */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\n   * \thref link for feedback\n   */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\n   * \thref link for faq\n   */\n  @property({ type: String })\n  faqHref = \"#\";\n\n  /**\n   * \thref link for privacy statement\n   */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\n   * \thref link for terms of use\n   */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  firstUpdated() {\n    const socialMediaSlot = this.shadowRoot.querySelector(\"slot[name='social-media']\") as HTMLSlotElement;\n    const footerTitleSlot = this.shadowRoot.querySelector(\"slot[name='title']\") as HTMLSlotElement;\n    const footerDescriptionSlot = this.shadowRoot.querySelector(\"slot[name='description']\") as HTMLSlotElement;\n    const footerItemsSlot = this.shadowRoot.querySelector(\"slot[name='items']\") as HTMLSlotElement;\n    const socialMediaChildNodes = socialMediaSlot.assignedNodes({ flatten: true });\n    const footerTitleChildNodes = footerTitleSlot.assignedNodes({ flatten: true });\n    const footerDescriptionChildNodes = footerDescriptionSlot.assignedNodes({ flatten: true });\n    const footerItemsChildNodes = footerItemsSlot.assignedNodes({ flatten: true });\n    if (socialMediaChildNodes.length === 0) {\n      const socialMediaContainer = this.shadowRoot.querySelector(\".social-media\") as HTMLDivElement;\n      socialMediaContainer.style.display = \"none\";\n    }\n\n    if (footerTitleChildNodes.length === 0 && footerDescriptionChildNodes.length === 0) {\n      const footerHeaderContainer = this.shadowRoot.querySelector(\".footer-header\") as HTMLDivElement;\n      footerHeaderContainer.style.display = \"none\";\n    }\n\n    if (footerItemsChildNodes.length === 0) {\n      const footerItemsContainer = this.shadowRoot.querySelector(\".footer-items\") as HTMLDivElement;\n      footerItemsContainer.style.display = \"none\";\n    }\n\n    if (\n      footerTitleChildNodes.length === 0 &&\n      footerDescriptionChildNodes.length === 0 &&\n      footerItemsChildNodes.length === 0\n    ) {\n      const footerTopContainer = this.shadowRoot.querySelector(\".footer-top\") as HTMLDivElement;\n      footerTopContainer.style.display = \"none\";\n    }\n  }\n\n  render() {\n    return html`\n      <footer class=\"footer\">\n        <section class=\"footer-top\">\n          <div class=\"footer-header\">\n            <slot name=\"title\"></slot>\n            <slot name=\"description\"></slot>\n          </div>\n          <div class=\"footer-items\">\n            <slot name=\"items\"></slot>\n          </div>\n        </section>\n        <section class=\"footer-bottom\">\n          <div class=\"social-media\">\n            <slot name=\"social-media\"></slot>\n          </div>\n          <div class=\"footer-mandatory-links\">\n            <ul>\n              <li><a href=${this.contactHref}>Contact</a></li>\n              <li><a href=${this.feedbackHref}>Feedback</a></li>\n              <li><a href=${this.faqHref}>FAQ</a></li>\n              <li>\n                <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\">\n                  Report Vulnerability\n                </a>\n              </li>\n              <li><a href=${this.privacyHref}>Privacy Statement</a></li>\n              <li><a href=${this.termsOfUseHref}>Terms of use</a></li>\n            </ul>\n            <div class=\"footer-copyrights\">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["footerStyle"],"mappings":"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"}

package/react/components/Icon/icon.cjs.js

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var lit = require('lit');
+
+var css_248z = lit.css`:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
+
+exports["default"] = css_248z;
+//# sourceMappingURL=icon.cjs.js.map

package/react/components/Icon/icon.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/Icon/icon.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
+
+export { css_248z as default };
+//# sourceMappingURL=icon.js.map

package/react/components/Icon/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/react/components/Icon/sgds-icon.cjs.js

@@ -0,0 +1,70 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var sgdsElement = require('../../base/sgds-element.cjs.js');
+var staticHtml_js = require('lit/static-html.js');
+var decorators_js = require('lit/decorators.js');
+var unsafeSvg_js = require('lit/directives/unsafe-svg.js');
+var icon = require('./icon.cjs.js');
+
+/**
+ * @summary Icons offer a form of visual shorthand that we are all familiar with. They can label, inform and aid navigation quickly and effectively in minimal space. Icons must first and foremost communicate meaning. By default, the icon component renders icons form SgdsIcon library set
+ *
+ * @event sgds-blur - Emitted when the button is blurred.
+ * @event sgds-focus - Emitted when the button is focused.
+ */
+class SgdsIcon extends sgdsElement["default"] {
+    constructor() {
+        super(...arguments);
+        /** Specifies a small, medium or large icon, the size is medium by default. */
+        this.size = "lg";
+        /** @internal */
+        this._svgContent = null;
+    }
+    async firstUpdated() {
+        if (this.name) {
+            this.loadSvg(this.name);
+        }
+    }
+    updated() {
+        this.style.display = this._svgContent ? "flex" : "none";
+    }
+    async loadSvg(name) {
+        if (name) {
+            // Dynamically import the SVG if not cached
+            try {
+                //TODO: This path is too specific to our repo, it won't work for users
+                const response = await fetch(`/src/icons/${name}.svg`);
+                if (response.ok) {
+                    const svgContent = await response.text();
+                    // Render the SVG
+                    // this.renderSvg(svgContent);
+                    this._svgContent = svgContent;
+                }
+            }
+            catch (error) {
+                console.error(`Error loading SVG: ${name}`, error);
+            }
+        }
+    }
+    render() {
+        return staticHtml_js.html `${unsafeSvg_js.unsafeSVG(this._svgContent)}`;
+    }
+}
+SgdsIcon.styles = [...sgdsElement["default"].styles, icon["default"]];
+tslib.__decorate([
+    decorators_js.property({ type: String, reflect: true })
+], SgdsIcon.prototype, "name", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String, reflect: true })
+], SgdsIcon.prototype, "size", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsIcon.prototype, "_svgContent", void 0);
+
+exports.SgdsIcon = SgdsIcon;
+exports["default"] = SgdsIcon;
+//# sourceMappingURL=sgds-icon.cjs.js.map