@pnx-mixtape/mxds 0.0.6 → 0.0.8

package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap

@@ -1,139 +1,357 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Layout/Footer Footer smoke-test 1`] = `
-<footer class="footer section section--top-l section--bottom-m background--reverse foreground--reverse">
-  <div class="grid">
-    <div class="footer__logo grid--3-col">
-      <a class="logo "
+exports[`Layout/Footer Everything smoke-test 1`] = `
+<div class="mx-page">
+  <footer class="mx-footer mx-section mx-section--top-l mx-section--bottom-m mx-background--reverse">
+    <div class="mx-footer__inner">
+      <a class="mx-logo"
          href="#"
       >
         <img alt="Mixtape"
              src="./mixtape-logo.png"
              width="120"
-             height="49"
+             height
         >
       </a>
-    </div>
-    <div class="footer__navigation grid--9-col">
-      <nav class="nav nav--footer ">
-        <ul class="nav__level-1">
-          <li class="nav__has-subnav">
-            <a href="#"
-               aria-current="page"
-            >
-              1.1 Level 1 Title
+      <nav class="mx-social-links"
+           aria-label="Social media links"
+      >
+        <a href="#">
+          <span class="mx-icon mx-icon--facebook  mx-icon--size-md">
+          </span>
+          <span class="sr-only">
+            Facebook
+          </span>
+        </a>
+        <a href="#">
+          <span class="mx-icon mx-icon--instagram  mx-icon--size-md">
+          </span>
+          <span class="sr-only">
+            Instagram
+          </span>
+        </a>
+        <a href="#">
+          <span class="mx-icon mx-icon--linkedin  mx-icon--size-md">
+          </span>
+          <span class="sr-only">
+            LinkedIn
+          </span>
+        </a>
+      </nav>
+      <nav class="mx-nav mx-nav--footer"
+           aria-label="Footer navigation"
+           id="footer-story"
+      >
+        <ul class="mx-nav__level-1">
+          <li class="mx-nav__has-subnav">
+            <a href="#">
+              News
             </a>
-            <button class="nav__toggle icon icon--chevron-down icon--only">
+            <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">
               Sub-navigation
             </button>
-            <ul class="nav__level-2"
-                inert
-            >
-              <li class="nav__has-subnav">
-                <a href="/">
-                  1.1.1 Level 2 Title
-                </a>
-              </li>
-              <li class="nav__has-subnav">
-                <a href="/">
-                  1.1.2 Level 2 Title
-                </a>
-              </li>
-              <li class="nav__has-subnav">
-                <a href="/">
-                  1.1.3 Level 2 Title Longer
-                </a>
-              </li>
-              <li class="nav__has-subnav">
-                <a href="/">
-                  1.1.4 Level 2 Title
+            <ul class="mx-nav__level-2">
+              <li>
+                <a href="#">
+                  Events
                 </a>
               </li>
-              <li class="nav__has-subnav">
-                <a href="/">
-                  1.1.5 Level 2 Title
+              <li>
+                <a href="#">
+                  Media Releases
                 </a>
               </li>
             </ul>
           </li>
-          <li class="nav__has-subnav">
-            <a href="/">
-              1.2 Level 1 Title
+          <li class="mx-nav__has-subnav">
+            <a href="#">
+              About us
             </a>
-            <button class="nav__toggle icon icon--chevron-down icon--only">
+            <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">
               Sub-navigation
             </button>
-            <ul class="nav__level-2"
-                inert
-            >
+            <ul class="mx-nav__level-2">
               <li>
-                <a href="/">
-                  1.2.1 Level 2 Title
+                <a href="#">
+                  Resources
                 </a>
               </li>
               <li>
-                <a href="/">
-                  1.2.2 Level 2 Title Longer
+                <a href="#">
+                  Who we are
                 </a>
               </li>
               <li>
-                <a href="/">
-                  1.2.1 Level 2 Title
+                <a href="#">
+                  Join us
                 </a>
               </li>
             </ul>
           </li>
-          <li class="nav__has-subnav">
-            <a href="/">
-              1.3 Level 1 Title
+          <li class="mx-nav__has-subnav">
+            <a href="#">
+              Contact
             </a>
-            <button class="nav__toggle icon icon--chevron-down icon--only">
+            <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">
               Sub-navigation
             </button>
-            <ul class="nav__level-2"
-                inert
-            >
-              <li class="nav__has-subnav">
-                <a href="/">
-                  1.3.1 Level 2 Title
-                </a>
-              </li>
+            <ul class="mx-nav__level-2">
               <li>
-                <a href="/">
-                  1.3.2 Level 2 Title
+                <a href="#">
+                  Enquiry form
                 </a>
               </li>
               <li>
-                <a href="/">
-                  1.3.3 Level 2 Title
+                <a href="#">
+                  Careers
                 </a>
               </li>
             </ul>
           </li>
         </ul>
       </nav>
+      <span class="mx-footer__copyright mx-text--s">
+        © 2025 Company Name
+      </span>
+      <nav class="mx-footer__links mx-nav mx-nav--inline mx-text--s"
+           aria-label="Footer subsidiary links"
+      >
+        <a href="#">
+          <span>
+            Accessibility
+          </span>
+        </a>
+        <a href="#">
+          <span>
+            Terms &amp; Conditions
+          </span>
+        </a>
+      </nav>
+    </div>
+  </footer>
+</div>
+`;
+
+exports[`Layout/Footer Footer smoke-test 1`] = `
+<div class="mx-page">
+  <footer class="mx-footer mx-section mx-section--top-l mx-section--bottom-m mx-background--reverse">
+    <div class="mx-footer__inner">
+      <a class="mx-logo"
+         href="#"
+      >
+        <img alt="Mixtape"
+             src="./mixtape-logo.png"
+             width="120"
+             height
+        >
+      </a>
+      <nav class="mx-nav mx-nav--footer"
+           aria-label="Footer navigation"
+           id="footer-story"
+      >
+        <ul class="mx-nav__level-1">
+          <li>
+            <a href="#">
+              News
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              About us
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              Contact
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              Resources
+            </a>
+          </li>
+        </ul>
+      </nav>
+      <span class="mx-footer__copyright mx-text--s">
+        © 2025 Company Name
+      </span>
+      <nav class="mx-footer__links mx-nav mx-nav--inline mx-text--s"
+           aria-label="Footer subsidiary links"
+      >
+        <a href="#">
+          <span>
+            Accessibility
+          </span>
+        </a>
+        <a href="#">
+          <span>
+            Terms &amp; Conditions
+          </span>
+        </a>
+      </nav>
+    </div>
+  </footer>
+</div>
+`;
+
+exports[`Layout/Footer Light smoke-test 1`] = `
+<div class="mx-page">
+  <footer class="mx-footer mx-section mx-section--top-l mx-section--bottom-m mx-background--alt">
+    <div class="mx-footer__inner">
+      <a class="mx-logo"
+         href="#"
+      >
+        <img alt="Mixtape"
+             src="./mixtape-logo.png"
+             width="120"
+             height
+        >
+      </a>
+      <nav class="mx-nav mx-nav--footer"
+           aria-label="Footer navigation"
+           id="footer-story"
+      >
+        <ul class="mx-nav__level-1">
+          <li>
+            <a href="#">
+              News
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              About us
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              Contact
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              Resources
+            </a>
+          </li>
+        </ul>
+      </nav>
+      <span class="mx-footer__copyright mx-text--s">
+        © 2025 Company Name
+      </span>
+      <nav class="mx-footer__links mx-nav mx-nav--inline mx-text--s"
+           aria-label="Footer subsidiary links"
+      >
+        <a href="#">
+          <span>
+            Accessibility
+          </span>
+        </a>
+        <a href="#">
+          <span>
+            Terms &amp; Conditions
+          </span>
+        </a>
+      </nav>
     </div>
-    <div class="footer__meta grid--12-col">
-      <span class="text--s">
-        © 2019 Company Name
+  </footer>
+</div>
+`;
+
+exports[`Layout/Footer NoMenu smoke-test 1`] = `
+<div class="mx-page">
+  <footer class="mx-footer mx-section mx-section--top-l mx-section--bottom-m mx-background--reverse">
+    <div class="mx-footer__inner">
+      <a class="mx-logo"
+         href="#"
+      >
+        <img alt="Mixtape"
+             src="./mixtape-logo.png"
+             width="120"
+             height
+        >
+      </a>
+      <span class="mx-footer__copyright mx-text--s">
+        © 2025 Company Name
       </span>
-      <nav class="nav nav--inline text--s"
+      <nav class="mx-footer__links mx-nav mx-nav--inline mx-text--s"
            aria-label="Footer subsidiary links"
       >
-        <ul>
+        <a href="#">
+          <span>
+            Accessibility
+          </span>
+        </a>
+        <a href="#">
+          <span>
+            Terms &amp; Conditions
+          </span>
+        </a>
+      </nav>
+    </div>
+  </footer>
+</div>
+`;
+
+exports[`Layout/Footer WithAcknowledgment smoke-test 1`] = `
+<div class="mx-page">
+  <footer class="mx-footer mx-section mx-section--top-l mx-section--bottom-m mx-background--reverse">
+    <div class="mx-footer__inner">
+      <div class="mx-footer__aoc mx-text--s">
+        We acknowledge the traditional owners and custodians of country throughout Australia and acknowledges their continuing connection to land, waters and community. We pay our respects to the people, the cultures and the elders past, present and emerging.
+      </div>
+      <a class="mx-logo"
+         href="#"
+      >
+        <img alt="Mixtape"
+             src="./mixtape-logo.png"
+             width="120"
+             height
+        >
+      </a>
+      <nav class="mx-nav mx-nav--footer"
+           aria-label="Footer navigation"
+           id="footer-story"
+      >
+        <ul class="mx-nav__level-1">
+          <li>
+            <a href="#">
+              News
+            </a>
+          </li>
           <li>
             <a href="#">
-              Sitemap
+              About us
             </a>
           </li>
           <li>
             <a href="#">
-              Privacy &amp; Terms
+              Contact
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              Resources
             </a>
           </li>
         </ul>
       </nav>
+      <span class="mx-footer__copyright mx-text--s">
+        © 2025 Company Name
+      </span>
+      <nav class="mx-footer__links mx-nav mx-nav--inline mx-text--s"
+           aria-label="Footer subsidiary links"
+      >
+        <a href="#">
+          <span>
+            Accessibility
+          </span>
+        </a>
+        <a href="#">
+          <span>
+            Terms &amp; Conditions
+          </span>
+        </a>
+      </nav>
     </div>
-  </div>
-</footer>
+  </footer>
+</div>
 `;

package/src/Layout/Footer/__snapshots__/Footer.stories.tsx.snap

@@ -1,70 +1,64 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Footer Default smoke-test 1`] = `
-<footer class="page section--top-l section--bottom-m">
-  <div class="grid">
-    <div class="grid--12-col footer__meta">
-      <span>
-        © 2022 Company Name
-      </span>
-      <nav class="nav nav--inline"
-           aria-label="Footer navigation"
-      >
-        <ul>
-          <li class>
-            <a href="http://example.com"
-               class
-            >
-              Sitemap
-            </a>
-          </li>
-          <li class>
-            <a href="http://example.com"
-               class
-            >
-              Privacy &amp; Terms
-            </a>
-          </li>
-        </ul>
-      </nav>
-    </div>
+<footer class="mx-footer mx-section--top-l mx-section--bottom-m">
+  <div class="mx-footer__inner">
+    <span class="mx-footer__copyright mx-text--s">
+      © 2022 Company Name
+    </span>
+    <nav class="mx-nav mx-nav--inline mx-footer__links mx-text--s"
+         aria-label="Footer subsidiary links"
+    >
+      <ul>
+        <li class>
+          <a href="http://example.com"
+             class
+          >
+            Sitemap
+          </a>
+        </li>
+        <li class>
+          <a href="http://example.com"
+             class
+          >
+            Privacy &amp; Terms
+          </a>
+        </li>
+      </ul>
+    </nav>
   </div>
 </footer>
 `;
 
 exports[`Layout/Footer WithChildren smoke-test 1`] = `
-<footer class="page section--top-l section--bottom-m">
-  <div class="grid">
-    <div class="grid--12-col">
-      <p>
-        Ullamcorper lobortis aliquam nulla nisl adipiscing cras fermentum dictumst netus felis semper elit adipiscing cum montes varius condimentum scelerisque condimentum diam a.
-      </p>
-    </div>
-    <div class="grid--12-col footer__meta">
-      <span>
-        © 2022 Company Name
-      </span>
-      <nav class="nav nav--inline"
-           aria-label="Footer navigation"
-      >
-        <ul>
-          <li class>
-            <a href="http://example.com"
-               class
-            >
-              Sitemap
-            </a>
-          </li>
-          <li class>
-            <a href="http://example.com"
-               class
-            >
-              Privacy &amp; Terms
-            </a>
-          </li>
-        </ul>
-      </nav>
+<footer class="mx-footer mx-section--top-l mx-section--bottom-m">
+  <div class="mx-footer__inner">
+    <div class="mx-footer__aoc mx-text--s">
+      Ullamcorper lobortis aliquam nulla nisl adipiscing cras fermentum dictumst netus felis semper elit adipiscing cum montes varius condimentum scelerisque condimentum diam a.
     </div>
+    <span class="mx-footer__copyright mx-text--s">
+      © 2022 Company Name
+    </span>
+    <nav class="mx-nav mx-nav--inline mx-footer__links mx-text--s"
+         aria-label="Footer subsidiary links"
+    >
+      <ul>
+        <li class>
+          <a href="http://example.com"
+             class
+          >
+            Sitemap
+          </a>
+        </li>
+        <li class>
+          <a href="http://example.com"
+             class
+          >
+            Privacy &amp; Terms
+          </a>
+        </li>
+      </ul>
+    </nav>
   </div>
 </footer>
 `;