@undrr/undrr-mangrove 1.2.1

package/dist/assets/js/tabs.js

@@ -0,0 +1,243 @@
+// mg-tabs
+/**
+ * Initialize tabs on a page
+ * @param {boolean} [activateDeepLinkOnLoad] - if deep linked tabs should be activated on page load, defaults to true
+ * @example mgTabs();
+ */
+export function mgTabs(scope, activateDeepLinkOnLoad = true) {
+  const tabContainers = scope || document.querySelectorAll("[data-mg-js-tabs]");
+  tabContainers.forEach((container) => {
+    mgTabsRuntime(container, activateDeepLinkOnLoad);
+  });
+}
+
+/**
+ * Finds all tabs on a page and activates them
+ * @param {object} [scope] - the html scope to process, optional, defaults to `document`
+ * @param {boolean} [activateDeepLinkOnLoad] - if deep linked tabs should be activated on page load, defaults to true
+ * @example mgTabs(document.querySelectorAll('.mg-component__container')[0]);
+ */
+export function mgTabsRuntime(scope, activateDeepLinkOnLoad) {
+  var scope = scope || document;
+  var activateDeepLinkOnLoad = activateDeepLinkOnLoad || true;
+
+  // Get relevant elements and collections
+  if (scope.hasAttribute("data-mg-js-tabs")) {
+    var tabsList = scope;
+  } else {
+    var tabsList =
+      scope.querySelectorAll("[data-mg-js-tabs]") || newTab.closest(".mg-tabs"); // compatibility with v1 tabs
+  }
+  const tabs = scope.querySelectorAll(".mg-tabs__link");
+  var panels = scope.querySelectorAll('[id^="mg-tabs__section"]');
+  // v1 compatibility
+  // If panels is empty, try finding them in data-mg-js-tabs-content
+  if (!panels.length) {
+    const tabContent = scope
+      .closest(".mg-tabs")
+      .querySelector("[data-mg-js-tabs-content]");
+    if (tabContent) {
+      panels = tabContent.querySelectorAll('[id^="mg-tabs__section"]');
+    }
+  }
+
+  // console.log("debug: All panels");
+  // console.log("Tab list: " , tabsList);
+  // console.log("Panel List: ", panelsList);
+  // console.log("Panels: ", panels);
+  // console.log("Tabs: ", tabs);
+  // console.log("End Debug: All panels");
+
+  if (!tabsList || !panels || !tabs) {
+    // exit: either tabs or tabbed content not found
+    return;
+  }
+  if (tabsList.length == 0 || panels.length == 0 || tabs.length == 0) {
+    // exit: either tabs or tabbed content not found
+    return;
+  }
+
+  // Check if tabs have already been initialized
+  if (tabsList.hasAttribute("data-mg-tabs-initialized")) {
+    return;
+  }
+  tabsList.setAttribute("data-mg-tabs-initialized", "true");
+  
+  // Add semantics are remove user focusability for each tab
+  Array.prototype.forEach.call(tabs, (tab, i) => {
+    const tabId = tab.href.split("#")[1]; // calculate an ID based off the tab href (todo: add support for a data-vf-js-tab-id, and if set use that)
+    tab.setAttribute("role", "tab");
+    tab.setAttribute("id", tabId);
+    tab.setAttribute("data-tabs__item", tabId);
+    tab.setAttribute("tabindex", "-1");
+    tab.parentNode.setAttribute("role", "presentation");
+
+    // Reset any active tabs from a previous JS call
+    tab.removeAttribute("aria-selected");
+    tab.setAttribute("tabindex", "-1");
+    tab.classList.remove("is-active");
+
+    // Handle clicking of tabs for mouse users
+    tab.addEventListener("click", (e) => {
+      e.preventDefault();
+      mgTabsSwitch(e.currentTarget, panels);
+    });
+
+    // Handle keydown events for keyboard users
+    tab.addEventListener("keydown", (e) => {
+      // Get the index of the current tab in the tabs node list
+      let index = Array.prototype.indexOf.call(tabs, e.currentTarget);
+      // Work out which key the user is pressing and
+      // Calculate the new tab's index where appropriate
+      let dir =
+        e.which === 37
+          ? index - 1
+          : e.which === 39
+            ? index + 1
+            : e.which === 40
+              ? "down"
+              : null;
+      if (dir !== null) {
+        e.preventDefault();
+        // If the down key is pressed, move focus to the open panel,
+        // otherwise switch to the adjacent tab
+        dir === "down"
+          ? panels[i].focus({ preventScroll: true })
+          : tabs[dir]
+            ? mgTabsSwitch(tabs[dir], panels)
+            : void 0;
+      }
+    });
+  });
+
+  // Add tab panel semantics and hide them all
+  Array.prototype.forEach.call(panels, (panel) => {
+    panel.setAttribute("role", "tabpanel");
+    panel.setAttribute("tabindex", "-1");
+    // let id = panel.getAttribute("id");
+    panel.setAttribute("aria-labelledby", panel.id);
+    panel.hidden = true;
+  });
+
+  // Add the tabsList role to the first <ul> in the .tabbed container
+  Array.prototype.forEach.call(tabsList, (tabsListset) => {
+    tabsListset.setAttribute("role", "tablist");
+    // Show the first tab (if the parent tabset is not stacked and screen is not narrow)
+    if (
+      tabsListset.dataset.mgJsTabsVariant != "stacked" &&
+      window.innerWidth >= 600
+    ) {
+      // Initially activate the first tab
+      let firstTab = tabsListset.querySelectorAll(".mg-tabs__link")[0];
+      firstTab.removeAttribute("tabindex");
+      firstTab.setAttribute("aria-selected", "true");
+      firstTab.classList.add("is-active");
+
+      // Initially reveal the first tab panel
+      const panelsList = tabsListset.querySelectorAll(
+        "[data-mg-js-tabs-content]",
+      );
+      Array.prototype.forEach.call(panelsList, (panel) => {
+        let firstPanel = tabsListset.querySelectorAll(".mg-tabs__section")[0];
+        firstPanel.hidden = false;
+      });
+    }
+  });
+
+  // Activate any deep links to a specific tab
+  if (activateDeepLinkOnLoad) {
+    mgTabsDeepLinkOnLoad(tabs, panels);
+  }
+}
+
+// The tab switching function
+const mgTabsSwitch = (newTab, panels) => {
+  // get the parent ul of the clicked tab
+  let parentTabContainer =
+    newTab.closest("[data-mg-js-tabs]") || newTab.closest(".mg-tabs"); // compatibility with v1 tabs
+  let oldTab = parentTabContainer.querySelector("[aria-selected]");
+  const behaveAsHorizontalTabs =
+    parentTabContainer.dataset.mgJsTabsVariant != "stacked" &&
+    window.innerWidth >= 600;
+
+  // if it is marked as stacked or small screen (this is not an inverse of behaveAsHorizontalTabs)
+  if (
+    parentTabContainer.dataset.mgJsTabsVariant == "stacked" ||
+    window.innerWidth <= 600
+  ) {
+    for (let item = 0; item < panels.length; item++) {
+      const panel = panels[item];
+      if (panel.id === newTab.id) {
+        panel.hidden = !panel.hidden;
+      }
+    }
+  }
+
+  if (oldTab) {
+    oldTab.removeAttribute("aria-selected");
+    oldTab.setAttribute("tabindex", "-1");
+    oldTab.classList.remove("is-active");
+
+    if (behaveAsHorizontalTabs) {
+      // normal horizontal tabs
+      for (let item = 0; item < panels.length; item++) {
+        const panel = panels[item];
+        if (panel.id === oldTab.id) {
+          panel.hidden = true;
+        }
+      }
+    }
+  }
+
+  newTab.focus({ preventScroll: true });
+  // Make the active tab focusable by the user (Tab key)
+  newTab.removeAttribute("tabindex");
+  // Set the selected state
+  newTab.setAttribute("aria-selected", "true");
+  newTab.classList.add("is-active");
+  newTab.classList.toggle("mg-tabs__stacked--open"); // we always track the user's open state, even if not stacked as we may switch to mobile view  // Get the indices of the new tab to find the correct tab panel to show
+  if (behaveAsHorizontalTabs) {
+    for (let item = 0; item < panels.length; item++) {
+      const panel = panels[item];
+      if (panel.id === newTab.id) {
+        panel.hidden = false;
+        break;
+      }
+    }
+  }};
+
+function mgTabsDeepLinkOnLoad(tabs, panels) {
+  var mgTabAnchorFound = false;
+
+  if (window.location.hash) {
+    // 1. See if there is a `#mg-tabs__section--88888`
+    var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
+
+    // 2. loop through all tabs, if a match then activate
+    Array.prototype.forEach.call(tabs, (tab) => {
+      let tabId = tab.getAttribute("data-tabs__item");
+      if (tabId == hash) {
+        document.getElementById(hash)?.scrollIntoView({ behavior: "smooth" });
+        mgTabsSwitch(tab, panels);
+        mgTabAnchorFound = true;
+        return true;
+      }
+    });
+  }
+
+  if (!mgTabAnchorFound) {
+    // No hash found - look for default tab
+    let defaultTabFound = false;
+    Array.from(tabs).forEach((tab) => {
+      if (tab.getAttribute("data-mg-js-tabs-default") === "true") {
+        mgTabsSwitch(tab, panels);
+        defaultTabFound = true;
+      }
+    });
+    
+    // If no default tab is found, activate the first tab
+    if (!defaultTabFound && tabs.length > 0) {
+      mgTabsSwitch(tabs[0], panels);
+    }
+  }
+}

package/dist/assets/js/undrr.js

@@ -0,0 +1,26 @@
+const UNDRR = window.UNDRR || {};
+
+UNDRR.keyCode = {
+  TAB: 9,
+  RETURN: 13,
+  ESC: 27,
+  SPACE: 32,
+  LEFT: 37,
+  UP: 38,
+  RIGHT: 39,
+  DOWN: 40,
+};
+
+UNDRR.breakpoints = {
+  TINY: 320,
+  SMALL: 767,
+  MEDIUM: 768,
+  LARGE: 1024,
+  EXTRALARGE: 1440,
+  MEDIUMTAB: 1439,
+  TABLET: 834,
+};
+
+window.UNDRR = window.UNDRR || UNDRR;
+
+export const desktopView = window.innerWidth > 1439;

package/dist/assets/scss/_breakpoints.scss

@@ -0,0 +1,28 @@
+@mixin devicebreak($point) {
+  @if $point == small {
+    /* small design */
+    @media (width <= 47.9375em) {
+      @content;
+    }
+  } @else if $point == mediumonlytab {
+    /* medium design tab */
+    @media (width <= 89.9375em) {
+      @content;
+    }
+  } @else if $point == medium {
+    /* medium design */
+    @media (width >= 48em) {
+      @content;
+    }
+  } @else if $point == large {
+    /* medium design */
+    @media (width >= 64em) {
+      @content;
+    }
+  } @else if $point == xlarge {
+    /* large design */
+    @media (width >= 90em) {
+      @content;
+    }
+  }
+}

package/dist/assets/scss/_components.scss

@@ -0,0 +1,69 @@
+// A rollup of all Mangrove components
+
+// Normalize
+@import "../../Utilities/Normalize/normalize";
+
+// Atom
+@import "../../Atom/BaseTypography/Abbr/abbr";
+@import "../../Atom/BaseTypography/Blockquote/blockquote";
+@import "../../Atom/BaseTypography/Cite/cite";
+@import "../../Atom/BaseTypography/Code/code";
+@import "../../Atom/BaseTypography/Mark/mark";
+@import "../../Atom/BaseTypography/Quotation/quotation";
+@import "../../Atom/BaseTypography/Small/small";
+@import "../../Atom/Colors/color";
+@import "../../Atom/Icons/icons";
+@import "../../Atom/Images/AuthorImage/author-image";
+@import "../../Atom/Images/Image/image";
+@import "../../Atom/Images/ImageCaptionCredit/image-caption-credit";
+@import "../../Atom/Images/ImageCredit/image-credit";
+@import "../../Atom/Layout/Container/container";
+@import "../../Atom/Layout/Grid/grid";
+@import "../../Atom/Layout/Spacing/spacing";
+@import "../../Atom/Navigation/Breadcrumb/breadcrumb";
+@import "../../Atom/Navigation/LanguageSwitcherRow/language-switcher-row";
+@import "../../Atom/Navigation/MenuItems/menu-items";
+@import "../../Atom/Navigation/ProgressBarNavigation/progress-bar-navigation";
+@import "../../Atom/Navigation/SidebarFirstLevel/sidebar-first-level";
+@import "../../Atom/ReachElement/Details/details";
+@import "../../Atom/ReachElement/Figcaption/figcaption";
+@import "../../Atom/Table/table";
+@import "../../Atom/Video/video";
+
+// Components
+@import "../../Components/Boilerplate/boilerplate";
+@import "../../Components/Forms/Checkbox/checkbox";
+@import "../../Components/Forms/Dropdowns/CustomSelect/custom-select";
+@import "../../Components/Forms/Dropdowns/Multiselect/multi-select";
+@import "../../Components/Forms/InputFields/input-fields";
+@import "../../Components/Forms/Radio/radio";
+@import "../../Components/Forms/Select/select";
+@import "../../Components/Breadcrumbs/breadcrumbs";
+@import "../../Components/Pagination/pagination";
+@import "../../Components/QuoteHighlight/quote-highlight";
+@import "../../Components/Sidebar/sidebar";
+@import "../../Components/Accordion/accordion";
+@import "../../Components/Buttons/Chips/chips";
+@import "../../Components/Buttons/CtaButton/buttons";
+@import "../../Components/Buttons/CtaLink/cta-link";
+@import "../../Components/Buttons/ShareButtons/share-buttons";
+@import "../../Components/MegaMenu/megamenu";
+@import "../../Components/PageHeader/page-header";
+@import "../../Components/Cards/Card/card";
+@import "../../Components/Cards/StatsCards/stats-cards";
+@import "../../Components/Snackbar/snackbar";
+@import "../../Components/Hero/hero";
+@import "../../Components/LanguageSwitcher/language-switcher";
+@import "../../Components/ScrollContainer/scroll-container";
+@import "../../Components/Tab/tab";
+@import "../../Components/TableOfContents/TableOfContents";
+@import "../../Components/BlockquoteComponent/blockquotecomp";
+
+// Molecules
+@import "../../Molecules/ImageCaption/image-caption";
+@import "../../Molecules/SidebarData/sidebar-data";
+
+// Utilities
+@import "../../Utilities/Loader/loader";
+@import "../../Utilities/FullWidth/FullWidth";
+@import "../../Utilities/ShowMore/ShowMore";

package/dist/assets/scss/_fonts.scss

@@ -0,0 +1,9 @@
+/* Roboto */
+$font-path-roboto: "../fonts/roboto/fonts" !default;
+
+@import "../fonts/roboto/roboto";
+
+/* Roboto Condensed */
+$font-path-roboto-condensed: "../fonts/roboto-condensed/fonts" !default;
+
+@import "../fonts/roboto-condensed/roboto-condensed";

package/dist/assets/scss/_foundational.scss

@@ -0,0 +1,322 @@
+/* typography start */
+
+html {
+  font-size: 10px;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  color: $mg-color-black;
+  font-family: $mg-font-family;
+  font-size: $mg-font-size-300;
+  line-height: $mg-font-line-height-500;
+
+  @include devicebreak(medium) {
+    font-size: $mg-font-size-300;
+  }
+}
+
+button {
+  font-family: $mg-font-family;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+caption {
+  margin: $mg-spacing-0;
+  margin-bottom: $mg-spacing-25;
+  padding: $mg-spacing-0;
+
+  @include devicebreak(medium) {
+    margin-bottom: $mg-font-size-300;
+  }
+}
+
+h1 {
+  font-family: $mg-font-family;
+  font-size: $mg-font-size-600;
+  letter-spacing: 0.06rem;
+  line-height: 1.08;
+  text-wrap: balance;
+
+  @include devicebreak(medium) {
+    font-size: 5.125rem;
+  }
+
+  @include devicebreak(large) {
+    font-size: 6.25rem;
+  }
+}
+
+h2 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  line-height: 1.1;
+
+  @include devicebreak(medium) {
+    font-size: 2.813rem;
+  }
+
+  @include devicebreak(large) {
+    font-size: 3.438rem;
+  }
+}
+
+h3 {
+  font-size: 1.875rem;
+  font-weight: 600;
+  line-height: 1.15;
+
+  @include devicebreak(medium) {
+    font-size: 2.188rem;
+  }
+}
+
+h4 {
+  font-size: 1.563rem;
+  font-weight: 400;
+  line-height: 1.15;
+
+  @include devicebreak(medium) {
+    font-size: 2.188rem;
+  }
+}
+
+h5 {
+  font-size: $mg-font-size-200;
+  font-weight: 400;
+  line-height: 1.15;
+
+  @include devicebreak(medium) {
+    font-size: 1.563rem;
+  }
+}
+
+h6 {
+  font-size: $mg-font-size-100;
+  font-weight: 700;
+  letter-spacing: 0.03rem;
+  line-height: 1.15;
+}
+
+p {
+  margin-top: 0;
+}
+
+ul,
+ol {
+  margin: 0;
+  padding-left: 1.125rem;
+
+  @include devicebreak(medium) {
+    padding-left: 1.313rem;
+  }
+
+  li {
+    margin-bottom: $mg-spacing-0;
+    padding-left: $mg-spacing-0;
+
+    @include devicebreak(medium) {
+      margin-bottom: $mg-spacing-0;
+      padding-left: $mg-spacing-25;
+    }
+  }
+}
+
+ul li::marker {
+  font-size: 1.125rem;
+
+  @include devicebreak(medium) {
+    font-size: 1.313rem;
+  }
+}
+
+ol {
+  li {
+    margin-bottom: 1.063rem;
+  }
+}
+
+dl {
+  font-size: 0.875rem;
+  line-height: 1.37;
+  margin: $mg-spacing-0;
+
+  @include devicebreak(medium) {
+    font-size: 1.25rem;
+  }
+}
+
+dt {
+  margin-bottom: $mg-spacing-25;
+}
+
+dd {
+  margin-bottom: $mg-spacing-50;
+  margin-inline-start: $mg-spacing-200;
+
+  @include devicebreak(medium) {
+    margin-bottom: $mg-spacing-100;
+    margin-inline-start: $mg-spacing-300;
+  }
+}
+
+hr {
+  // border-width: 2px;
+  border: 1px solid $mg-color-black;
+}
+
+// link animation
+@keyframes line-loop-animation {
+  0% {
+    background-position: 100% 100%, -30px 100%;
+    background-size: 100% 2px, 0 2px;
+  }
+
+  100% {
+    background-position: calc(100% + 30px) 100%, 0 100%;
+    background-size: 0 2px, 100% 2px;
+  }
+}
+
+a {
+  // @extend %paragraph-font-300 !optional;
+  // @extend %animate-link !optional;
+
+  color: $mg-color-interactive;
+  text-decoration: none;
+}
+
+a:hover {
+  color: $mg-color-interactive-active;
+  text-decoration: underline;
+}
+
+// burmese lang
+:lang(my) {
+  body {
+    font-family: $mg-font-family;
+    line-height: 1.7;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.7;
+  }
+
+  h1 {
+    font-family: $mg-font-family;
+    font-size: 2.625rem;
+
+    @include devicebreak(medium) {
+      font-size: 3.875rem;
+    }
+
+    @include devicebreak(large) {
+      font-size: 5rem;
+    }
+  }
+
+  h2 {
+    font-size: 2rem;
+
+    @include devicebreak(medium) {
+      font-size: 2.188rem;
+    }
+
+    @include devicebreak(large) {
+      font-size: 2.813rem;
+    }
+  }
+
+  h4 {
+    font-size: 1.3rem;
+
+    @include devicebreak(medium) {
+      font-size: 1.8rem;
+    }
+  }
+
+  h5 {
+    font-size: $mg-font-size-400;
+
+    @include devicebreak(medium) {
+      font-size: 1.375rem;
+    }
+  }
+
+  p {
+    font-size: $mg-font-size-200;
+    line-height: 1.7;
+
+    @include devicebreak(medium) {
+      font-size: $mg-font-size-300;
+    }
+  }
+
+  ul li,
+  ol li,
+  dl {
+    font-size: 0.875rem;
+    line-height: 1.9;
+
+    @include devicebreak(medium) {
+      font-size: 1.125rem;
+    }
+  }
+
+  .sbdocs {
+    .sbdocs-content,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p {
+      font-family: $mg-font-family;
+    }
+
+    .sbdocs-h1 {
+      font-size: $mg-spacing-150;
+    }
+  }
+}
+
+[dir="rtl"] {
+  ul,
+  ol {
+    padding-left: 0;
+    padding-right: 1.125rem;
+
+    @include devicebreak(medium) {
+      padding-right: 1.313rem;
+    }
+
+    li {
+      padding-left: 0;
+      padding-right: 0.875rem;
+
+      @include devicebreak(medium) {
+        padding-right: $mg-spacing-25;
+      }
+    }
+  }
+}
+
+/* Cyrillic scripts */
+#{$cyrillic} {
+  h1 {
+    font-family: $mg-font-family;
+  }
+}
+
+/* typography end */