@orangesk/orange-design-system 2.0.0-beta.30 → 2.0.0-beta.32

package/src/components/Footer/static.ts

@@ -0,0 +1,59 @@
+import Footer from "./Footer.static";
+import moduleFactory, {
+  initModulesWithin,
+  destroyModulesWithin,
+} from "../../scripts/lib/moduleFactory";
+import "./styles/style.scss";
+
+export const customFooterModuleSelectorPairs = [
+  {
+    Module: Footer,
+    name: "Footer",
+    selector: "[data-footer]",
+  },
+];
+
+declare global {
+  interface Window {
+    ODSFooter: {
+      Footer: typeof Footer;
+      instances: Footer[];
+      init: () => void;
+      destroy: () => void;
+      initModulesWithin: (container: any) => {};
+      destroyModulesWithin: (
+        container: any,
+        removeOrphanedNodes?: boolean | undefined,
+      ) => {};
+    };
+  }
+}
+
+window.ODSFooter = window.ODSFooter || {
+  Footer,
+  instances: [],
+  init: () => {
+    window.ODSFooter.instances = moduleFactory(Footer, "[data-footer]");
+  },
+  destroy: () => {
+    window.ODSFooter.instances.forEach((instance) => {
+      if (instance && typeof instance.destroy === "function") {
+        instance.destroy();
+      }
+    });
+    window.ODSFooter.instances = [];
+  },
+  initModulesWithin,
+  destroyModulesWithin,
+};
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", () => {
+    window.ODSFooter.init();
+  });
+} else {
+  window.ODSFooter.init();
+}
+
+export { Footer };
+export default Footer;

package/src/components/Footer/styles/mixins.scss

@@ -7,6 +7,7 @@
 @use "../../../styles/tools/generate";
 @use "../../../styles/tools/visibility" as visibility;
 @use "../../Container/styles/mixins" as container;
+@use "../../Accordion/styles/mixins" as accordionMixins;
 @use "../../../styles/typography/mixins" as typography;
 @use "../../../styles/typography/config" as typographyConfig;
 
@@ -48,8 +49,6 @@
 
   * {
     box-sizing: border-box;
-    letter-spacing: convert.to-rem(-0.1px);
-    line-height: convert.to-rem(18px);
   }
 
   ::selection {
@@ -62,17 +61,18 @@
     margin-bottom: convert.to-rem(30px);
     border: 0;
     border-top: 1px solid var(--color-border-subtle);
-  }
 
-  p,
-  ul {
-    font-size: convert.to-rem(14px);
-    line-height: convert.to-rem(17.5px);
+    @include breakpoint.get("xs", "down") {
+      margin-top: convert.to-rem(15px);
+      margin-bottom: convert.to-rem(15px);
+    }
   }
 }
 
 @mixin base {
   font-size: 1rem;
+  letter-spacing: convert.to-rem(-0.1px);
+  line-height: convert.to-rem(18px);
   color: var(--color-text-default);
   background-color: var(--color-surface-primary);
   box-sizing: border-box;
@@ -82,6 +82,12 @@
   @include breakpoint.get("md", "down") {
     padding: convert.to-rem(30px) 0;
   }
+
+  :where(p),
+  :where(ul) {
+    font-size: convert.to-rem(14px);
+    line-height: convert.to-rem(17.5px);
+  }
 }
 
 @mixin container {
@@ -91,19 +97,23 @@
   margin-bottom: 0;
 }
 
-@mixin grid {
+@mixin menu {
   display: grid;
-  gap: convert.to-rem(30px);
-  row-gap: convert.to-rem(40px);
+  row-gap: convert.to-rem(30px);
   grid-template-columns: repeat(1, 1fr);
 
+  @include breakpoint.get("xs", "down") {
+    row-gap: 0;
+    margin-bottom: convert.to-rem(30px);
+  }
+
   @include breakpoint.get("sm") {
     grid-template-columns: repeat(2, 1fr);
   }
 
   @include breakpoint.get("md") {
     grid-template-columns: repeat(3, 1fr);
-    gap: convert.to-rem(15px);
+    gap: convert.to-rem(20px);
     row-gap: convert.to-rem(20px);
   }
 
@@ -114,15 +124,28 @@
   }
 }
 
-@mixin logo {
-  display: inline-flex;
-  margin-bottom: convert.to-rem(60px);
+@mixin menu-section {
+  @include breakpoint.get("xs", "down") {
+    @include accordionMixins.item;
 
-  @include breakpoint.get("md", "down") {
-    margin-bottom: convert.to-rem(30px);
+    &:first-child {
+      border-top: 0;
+    }
+
+    &:last-child {
+      border-bottom: 1px solid var(--color-border-strong);
+    }
+
+    .footer__list {
+      margin-top: convert.to-rem(10px) !important;
+    }
   }
 }
 
+@mixin logo {
+  display: inline-flex;
+}
+
 @mixin title {
   @include generate.responsive-css-map(map.get(typographyConfig.$headings, 5));
   margin-top: 0;
@@ -135,6 +158,46 @@
   }
 }
 
+@mixin accordion-toggle {
+  margin: 0;
+  margin-bottom: convert.to-rem(30px);
+  padding: 0;
+  border: 0;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+
+  @include breakpoint.get("sm") {
+    display: block;
+    pointer-events: none;
+  }
+
+  @include breakpoint.get("xs", "down") {
+    @include accordionMixins.button-base;
+    gap: convert.to-rem(12px);
+    padding: convert.to-rem(15px) 0;
+    margin-bottom: 0;
+
+    .footer__title {
+      margin: 0;
+    }
+  }
+}
+
+@mixin accordion-icon {
+  @include accordionMixins.icon;
+
+  @include breakpoint.get("sm") {
+    display: none;
+  }
+}
+
+@mixin accordion-list {
+  @include breakpoint.get("xs", "down") {
+    @include accordionMixins.body;
+  }
+}
+
 @mixin list {
   @include typography.list-unstyled;
 
@@ -143,22 +206,62 @@
   }
 }
 
+@mixin list-space-small {
+  gap: convert.to-rem(10px);
+}
+
 @mixin list-inline {
   display: flex;
   flex-wrap: wrap;
-  gap: convert.to-rem(10px);
+  gap: convert.to-rem(20px);
+  row-gap: convert.to-rem(10px);
 
   li {
     margin: 0;
   }
 }
 
-@mixin socials {
+@mixin list-stack-sm-down {
+  @include breakpoint.get("sm", "down") {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: convert.to-rem(10px);
+  }
+}
+
+@mixin list-break-sm-down() {
+  display: none;
+  flex-basis: 100%;
+  width: 100%;
+  height: 0;
+  margin: 0 !important;
+  padding: 0 !important;
+  list-style: none;
+
+  @include breakpoint.get("sm", "down") {
+    display: block;
+  }
+}
+
+@mixin list-item-lead {
+  margin-right: convert.to-rem(10px) !important;
+
+  @include breakpoint.get("sm", "down") {
+    margin-right: 0 !important;
+  }
+}
+
+@mixin bar {
   display: flex;
   gap: space.get();
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
+
+  @include breakpoint.get("sm", "down") {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 }
 
 @mixin bottom {
@@ -175,6 +278,7 @@
 
 @mixin bottom-copyright {
   text-align: right;
+  @include generate.css-map(map.get(typographyConfig.$caption, "small"));
 
   @include breakpoint.get("md", "down") {
     text-align: inherit;

package/src/components/Footer/styles/style.scss

@@ -1,5 +1,7 @@
 @use "./config";
 @use "./mixins";
+@use "../../../styles/tools/convert";
+@use "../../../styles/tokens/breakpoint";
 @use "../../Megamenu/styles/mixins" as megamenuMixins;
 
 #{config.$class-root} {
@@ -22,8 +24,12 @@
     @include mixins.container;
   }
 
-  &__grid {
-    @include mixins.grid;
+  &__menu {
+    @include mixins.menu;
+  }
+
+  &__menu-section {
+    @include mixins.menu-section;
   }
 
   &__logo {
@@ -34,6 +40,31 @@
     @include mixins.title;
   }
 
+  &__accordion-toggle {
+    @include mixins.accordion-toggle;
+  }
+
+  &__accordion-icon {
+    @include mixins.accordion-icon;
+    transition: none;
+  }
+
+  &__divider {
+    &--hide-xs-down {
+      @include breakpoint.get("xs", "down") {
+        display: none;
+      }
+    }
+  }
+
+  [data-footer-toggle][aria-expanded="false"] > &__accordion-icon {
+    transform: rotate(0deg);
+  }
+
+  [data-footer-toggle][aria-expanded="true"] > &__accordion-icon {
+    transform: rotate(180deg);
+  }
+
   &__list {
     @include mixins.list;
 
@@ -41,14 +72,42 @@
       @include mixins.list-inline;
       align-items: center;
     }
+
+    &-break--sm-down {
+      @include mixins.list-break-sm-down;
+    }
+
+    &--space-small {
+      @include mixins.list-space-small;
+    }
+
+    &--stack-sm-down {
+      @include mixins.list-stack-sm-down;
+    }
+  }
+
+  &__menu-section > &__list {
+    @include mixins.accordion-list;
   }
 
-  &__socials {
-    @include mixins.socials;
+  &__list-item--lead {
+    @include mixins.list-item-lead;
+  }
+
+  &__bar {
+    @include mixins.bar;
   }
 
   &__bottom {
     @include mixins.bottom;
     @include mixins.bottom-copyright;
   }
+
+  &--mb-xlarge {
+    margin-bottom: convert.to-rem(60px);
+
+    @include breakpoint.get("md", "down") {
+      margin-bottom: convert.to-rem(30px);
+    }
+  }
 }

package/src/components/Footer/tests/Footer.unit.test.js

@@ -73,12 +73,12 @@ describe("Footer", () => {
     const { container } = render(<Footer />);
     const footer = container.querySelector("footer");
     const container_ = footer?.querySelector(".footer__container");
-    const grid = container_?.querySelector(".footer__grid");
+    const menu = container_?.querySelector(".footer__menu");
     const bottom = container_?.querySelector(".footer__bottom");
 
     expect(footer).toBeInTheDocument();
     expect(container_).toBeInTheDocument();
-    expect(grid).toBeInTheDocument();
+    expect(menu).toBeInTheDocument();
     expect(bottom).toBeInTheDocument();
   });