@pnx-mixtape/mxds 0.0.1

package/src/Component/Navigation/_navigation-collapsible.css

@@ -0,0 +1,72 @@
+/**
+ * Collapsible Navigation
+ */
+
+@layer components {
+  .nav--collapsible {
+    & .nav__toggle {
+      inset-inline: auto var(--spacing-xxs);
+
+      @media (--medium-up) {
+        display: block;
+      }
+    }
+
+    & ul li {
+      position: relative;
+
+      & a {
+        display: block;
+        color: inherit;
+        border-block-end: var(--line-width, 1px) solid
+          var(--line-colour, var(--colour-border));
+        padding: var(--item-spacing, var(--spacing-xxs));
+
+        &:is(:focus, :focus-visible) {
+          outline-offset: -1px;
+        }
+      }
+    }
+
+    & .nav__level-1 > li > a {
+      font-weight: var(--font-weight-bold);
+    }
+
+    & .nav__level-2 > li > a {
+      padding-inline-start: var(--spacing-s);
+    }
+
+    & .nav__level-3 > li > a {
+      padding-inline-start: var(--spacing-m);
+    }
+
+    & :is([aria-current="page"], .is-active) > a {
+      background-color: var(
+        --nav-active-background,
+        var(--background, var(--colour-background-alt))
+      );
+      color: var(--nav-active-foreground, inherit);
+    }
+
+    & li > ul {
+      transition:
+        transform 0.2s var(--ease),
+        opacity 0.8s var(--ease);
+      transform-origin: top;
+      will-change: block-size;
+
+      &[inert] {
+        block-size: 0;
+        opacity: 0;
+        transform: scaleY(0);
+        transition:
+          transform 0.8s var(--ease),
+          opacity 0.2s var(--ease);
+      }
+    }
+
+    & li:is(.nav__has-subnav, :has(> ul)) > a {
+      padding-inline-end: var(--spacing-l);
+    }
+  }
+}

package/src/Component/Navigation/_navigation-dropdown.css

@@ -0,0 +1,152 @@
+/**
+ * Dropdown Navigation
+ */
+
+@layer components {
+  .nav--dropdown {
+    --nav-active-underline: none;
+
+    margin-block: var(--spacing-m);
+
+    @media (--global-nav-up) {
+      margin-block: 0;
+    }
+
+    & li {
+      margin: 0;
+
+      &:is(.nav__has-subnav, :has(> ul)) {
+        position: relative;
+
+        & > a {
+          --toggle-gap: var(--spacing-l);
+        }
+      }
+    }
+
+    & a {
+      display: block;
+
+      &[aria-expanded="true"] {
+        @media (--global-nav-up) {
+          background-color: var(
+            --nav-expanded-background,
+            var(--background, var(--colour-background-alt))
+          );
+          color: var(--nav-expanded-foreground, inherit);
+
+          & + .nav__toggle {
+            color: var(--nav-expanded-foreground, inherit);
+          }
+        }
+      }
+    }
+
+    & li > ul {
+      transition:
+        0.2s opacity var(--ease),
+        0.2s visibility var(--ease);
+
+      &[inert] {
+        block-size: 0;
+        opacity: 0;
+        visibility: hidden;
+        transition:
+          0.2s opacity var(--ease),
+          0.2s visibility var(--ease);
+
+        @media (--global-nav-up) {
+          block-size: auto;
+        }
+      }
+    }
+
+    & .nav__level-1 {
+      margin: 0;
+      overflow: hidden;
+
+      @media (--global-nav-up) {
+        overflow: visible;
+        flex-flow: row;
+        align-items: center;
+        justify-content: flex-start;
+      }
+
+      & > li {
+        border-block-start: var(--line-width, 1px) solid
+          var(--line-colour, var(--colour-border));
+
+        @media (--global-nav-up) {
+          border-block-start: 0;
+        }
+
+        & > a:where(:not(.button)) {
+          padding-block: var(--item-spacing, var(--spacing-xxs));
+          padding-inline-end: var(
+            --toggle-gap,
+            var(--item-spacing, var(--spacing-xxs))
+          );
+
+          @media (--global-nav-up) {
+            padding-inline-start: var(--item-spacing, var(--spacing-xxs));
+          }
+        }
+      }
+    }
+
+    & .nav__level-2 {
+      display: block;
+      position: relative;
+      inset-inline-start: 0;
+      inline-size: 100%;
+      margin: 0;
+
+      @media (--global-nav-up) {
+        position: absolute;
+        inline-size: var(--dropdown-width, 270px);
+        border-radius: var(--border-radius);
+        background-color: var(
+          --nav-expanded-background,
+          var(--background, var(--colour-background-alt))
+        );
+        color: var(--nav-expanded-foreground, inherit);
+
+        & .nav__toggle::before {
+          transform: rotate(-90deg);
+        }
+      }
+
+      & > li {
+        @media (--global-nav-down) {
+          border-block-start: var(--line-width, 1px) solid
+            var(--line-colour, var(--colour-border));
+        }
+
+        & > a {
+          &:where(:not(.button)) {
+            padding: var(--item-spacing, var(--spacing-xxs));
+
+            @media (--global-nav-down) {
+              padding-inline-start: var(--spacing-l);
+            }
+          }
+        }
+      }
+    }
+
+    & .nav--reverse .nav__level-2 {
+      @media (--global-nav-up) {
+        inset-inline: auto 0;
+
+        & .nav__toggle::before {
+          transform: rotate(90deg);
+        }
+      }
+    }
+
+    & .nav__separator {
+      border-block-start: var(--line-width, 1px) solid
+        var(--line-colour, var(--colour-border));
+    }
+  }
+}

package/src/Component/Navigation/_navigation-mega.css

@@ -0,0 +1,51 @@
+/**
+ * Dropdown Navigation - Mega Nav
+ */
+
+@layer components {
+  .nav--mega-nav {
+    @media (--global-nav-down) {
+      max-block-size: 100%;
+      overflow: auto;
+    }
+
+    & .nav__level-2 ul {
+      display: block;
+      position: relative;
+      padding-inline-start: var(--spacing-l);
+      border-block-start: 1px solid var(--border-colour);
+      inline-size: 100%;
+
+      @media (--global-nav-up) {
+        position: absolute;
+        inset-inline-start: var(--dropdown-width, 270px);
+        inset-block-start: 0;
+        inline-size: var(--dropdown-width, 270px);
+        min-block-size: 100%;
+        padding-inline-start: 0;
+        border-block-start: 0;
+        border-radius: 0 var(--border-radius) var(--border-radius) 0;
+        background-color: var(
+          --expanded-background,
+          var(--colour-background-alt)
+        );
+        color: var(--expanded-foreground, inherit);
+      }
+
+      & > li > a:where(:not(.button)) {
+        padding: var(--item-spacing, var(--spacing-xxs));
+
+        @media (--global-nav-down) {
+          padding-inline-start: var(--spacing-l);
+        }
+      }
+    }
+
+    & .nav--reverse .nav__level-2 ul {
+      @media (--global-nav-up) {
+        inset-inline-start: calc(var(--dropdown-width, 270px) * -1);
+        border-radius: var(--border-radius) 0 0 var(--border-radius);
+      }
+    }
+  }
+}

package/src/Component/Navigation/_navigation.css

@@ -0,0 +1,55 @@
+/**
+ * Navigation
+ */
+
+@layer components {
+  .nav {
+    & ul {
+      display: flex;
+      flex-direction: column;
+      list-style-type: none;
+      padding-inline-start: 0;
+      font-size: var(--nav-font-size, var(--font-size));
+    }
+
+    & a:where(:not([class])) {
+      text-decoration-line: none;
+      color: inherit;
+
+      &:hover {
+        text-decoration-line: var(--nav-active-underline, underline);
+      }
+    }
+  }
+
+  .nav--inline {
+    & > ul {
+      flex-flow: row wrap;
+      align-items: center;
+      gap: var(--nav-gap, var(--spacing-s));
+    }
+  }
+
+  .nav__toggle {
+    background: unset;
+    padding: 0;
+    border: 0;
+    appearance: none;
+    position: absolute;
+    color: var(
+      --toggle-foreground,
+      var(--foreground, var(--colour-foreground))
+    );
+    inline-size: var(--spacing-l);
+    block-size: var(--spacing-l);
+    inset-block-start: var(--toggle-top, 12px);
+    inset-inline-end: 0;
+    cursor: pointer;
+  }
+
+  .nav--open {
+    & > .nav__toggle::before {
+      transform: rotate(180deg);
+    }
+  }
+}

package/src/Component/Navigation/navigation-collapsible.twig

@@ -0,0 +1,7 @@
+<mx-nav>
+  <nav class="nav nav--collapsible">
+    {% block menu %}
+      {% include '@mixtape/Component/Navigation/twig/navigation-subnav-list.twig' %}
+    {% endblock %}
+  </nav>
+</mx-nav>

package/src/Component/Navigation/navigation-dropdown.twig

@@ -0,0 +1,7 @@
+<mx-nav flyout>
+  <nav class="nav nav--dropdown {{ modifier_class }}" aria-label="Primary menu">
+    {% block menu %}
+      {% include '@mixtape/Component/Navigation/twig/navigation-subnav-list.twig' %}
+    {% endblock %}
+  </nav>
+</mx-nav>

package/src/Component/Navigation/navigation-mega-nav.twig

@@ -0,0 +1,7 @@
+<mx-nav flyout edgeCheck>
+  <nav class="nav nav--dropdown nav--mega-nav {{ modifier_class }}">
+    {% block menu %}
+      {% include '@mixtape/Component/Navigation/twig/navigation-subnav-list.twig' with { 'mega' : true } %}
+    {% endblock %}
+  </nav>
+</mx-nav>

package/src/Component/Navigation/navigation.css

@@ -0,0 +1,4 @@
+@import "_navigation.css";
+@import "_navigation-dropdown.css";
+@import "_navigation-mega.css";
+@import "_navigation-collapsible.css";

package/src/Component/Navigation/navigation.twig

@@ -0,0 +1,9 @@
+<nav class="nav {{ modifier_class }}" aria-label="Navigation">
+  {% block menu %}
+  <ul>
+    <li><a href="#">Secondary Title</a></li>
+    <li><a href="#">Secondary Title</a></li>
+    <li><a href="#">Secondary Title</a></li>
+  </ul>
+  {% endblock %}
+</nav>

package/src/Component/Navigation/twig/navigation-subnav-list.twig

@@ -0,0 +1,108 @@
+<ul class="nav__level-1">
+  <li class="nav__has-subnav">
+    <a href="#" aria-current="page">{{ '1.1 ' ~ title|default('Level 1 Title') }}</a>
+    <button class="nav__toggle icon icon--chevron-down icon--only">Sub-navigation</button>
+    <ul class="nav__level-2" inert>
+      <li class="nav__has-subnav">
+        <a href="/">{{ '1.1.1 ' ~ l2_title|default('Level 2 Title') }}</a>
+        {% if mega %}
+          <button class="nav__toggle icon icon--chevron-down icon--only">Sub-navigation</button>
+          <ul class="nav__level-3">
+            <li><a href="/">{{ '1.1.1.1 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+            <li><a href="/">{{ '1.1.1.2 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+            <li><a href="/">{{ '1.1.1.3 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+            <li><a href="/">{{ '1.1.1.4 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+            <li><a href="/">{{ '1.1.1.5 ' ~ l3_title|default('Level 3 Title') ~ ' Longer' }}</a></li>
+            <li><a href="/">{{ '1.1.1.6 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+            <li><a href="/">{{ '1.1.1.7 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+            <li><a href="/">{{ '1.1.1.8 ' ~ l3_title|default('Level 3 Title') ~ ' Longer' }}</a></li>
+            <li><a href="/">{{ '1.1.1.9 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+          </ul>
+        {% endif %}
+      </li>
+      <li class="nav__has-subnav">
+        <a href="/">{{ '1.1.2 ' ~ l2_title|default('Level 2 Title') }}</a>
+        {% if mega %}
+          <button class="nav__toggle icon icon--chevron-down icon--only">Sub-navigation</button>
+          <ul class="nav__level-3">
+            <li><a href="/">{{ '1.1.2.1 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+            <li><a href="/">{{ '1.1.2.2 ' ~ l3_title|default('Level 3 Title') ~ ' Longer' }}</a></li>
+            <li><a href="/">{{ '1.1.2.3 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+          </ul>
+        {% endif %}
+      </li>
+      <li class="nav__has-subnav">
+        <a href="/">{{ '1.1.3 ' ~ l2_title|default('Level 2 Title') ~ ' Longer' }}</a>
+        {% if mega %}
+          <button class="nav__toggle icon icon--chevron-down icon--only">Sub-navigation</button>
+          <ul class="nav__level-3">
+            <li><a href="/">{{ '1.1.3.1 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+            <li><a href="/">{{ '1.1.3.2 ' ~ l3_title|default('Level 3 Title') ~ ' Longer' }}</a></li>
+            <li><a href="/">{{ '1.1.3.3 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+          </ul>
+        {% endif %}
+      </li>
+      <li class="nav__has-subnav">
+        <a href="/">{{ '1.1.4 ' ~ l2_title|default('Level 2 Title') }}</a>
+        {% if mega %}
+          <button class="nav__toggle icon icon--chevron-down icon--only">Sub-navigation</button>
+          <ul class="nav__level-3">
+            <li><a href="/">{{ '1.1.4.1 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+            <li><a href="/">{{ '1.1.4.2 ' ~ l3_title|default('Level 3 Title') ~ ' Longer' }}</a></li>
+            <li><a href="/">{{ '1.1.4.3 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+          </ul>
+        {% endif %}
+      </li>
+      <li class="nav__has-subnav">
+        <a href="/">{{ '1.1.5 ' ~ l2_title|default('Level 2 Title') }}</a>
+        {% if mega %}
+          <button class="nav__toggle icon icon--chevron-down icon--only">Sub-navigation</button>
+          <ul class="nav__level-3">
+            <li><a href="/">{{ '1.1.5.1 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+            <li><a href="/">{{ '1.1.5.2 ' ~ l3_title|default('Level 3 Title') ~ ' Longer' }}</a></li>
+            <li><a href="/">{{ '1.1.5.3 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+          </ul>
+        {% endif %}
+      </li>
+      {% if mega %}
+        <li class="nav__separator">
+          <a href="/">{{ '1.1.6 ' ~ l2_title|default('Level 2 Title') ~ ' Separator' }}</a>
+        </li>
+      {% endif %}
+    </ul>
+  </li>
+  <li class="nav__has-subnav">
+    <a href="/">{{ '1.2 ' ~ title|default('Level 1 Title') }}</a>
+    <button class="nav__toggle icon icon--chevron-down icon--only">Sub-navigation</button>
+    <ul class="nav__level-2" inert>
+      <li><a href="/">{{ '1.2.1 ' ~ l2_title|default('Level 2 Title') }}</a></li>
+      <li><a href="/">{{ '1.2.2 ' ~ l2_title|default('Level 2 Title') ~ ' Longer' }}</a></li>
+      <li><a href="/">{{ '1.2.1 ' ~ l2_title|default('Level 2 Title') }}</a></li>
+    </ul>
+  </li>
+  <li class="nav__has-subnav{% if mega %} nav--reverse{% endif %}">
+    <a href="/">{{ '1.3 ' ~ title|default('Level 1 Title') }}</a>
+    <button class="nav__toggle icon icon--chevron-down icon--only">Sub-navigation</button>
+    <ul class="nav__level-2" inert>
+      <li class="nav__has-subnav">
+        <a href="/">{{ '1.3.1 ' ~ l2_title|default('Level 2 Title') }}</a>
+        {% if mega %}
+          <button class="nav__toggle icon icon--chevron-down icon--only">Sub-navigation</button>
+          <ul class="nav__level-3">
+            <li><a href="/">{{ '1.3.1.1 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+            <li><a href="/">{{ '1.3.1.2 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+            <li><a href="/">{{ '1.3.1.3 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+            <li><a href="/">{{ '1.3.1.4 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+            <li><a href="/">{{ '1.3.1.5 ' ~ l3_title|default('Level 3 Title') ~ ' Longer' }}</a></li>
+            <li><a href="/">{{ '1.3.1.6 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+            <li><a href="/">{{ '1.3.1.7 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+            <li><a href="/">{{ '1.3.1.8 ' ~ l3_title|default('Level 3 Title') ~ ' Longer' }}</a></li>
+            <li><a href="/">{{ '1.3.1.9 ' ~ l3_title|default('Level 3 Title') }}</a></li>
+          </ul>
+        {% endif %}
+      </li>
+      <li><a href="/">{{ '1.3.2 ' ~ l2_title|default('Level 2 Title') }}</a></li>
+      <li><a href="/">{{ '1.3.3 ' ~ l2_title|default('Level 2 Title') }}</a></li>
+    </ul>
+  </li>
+</ul>

package/src/Component/Pagination/Components/PaginationContext.tsx

@@ -0,0 +1,188 @@
+/* eslint-disable consistent-return, no-unused-vars */
+import {
+  JSX,
+  PropsWithChildren,
+  RefObject,
+  useContext,
+  createContext,
+  useMemo,
+  useRef,
+  useEffect,
+} from "react"
+import useUrlParams from "../../../Utility/Hooks/useUrlParams"
+
+type PaginationContextValues = {
+  total: number
+  resultsPerPage: number
+  currentPage: number
+  showPager: boolean
+  lastPage: number
+  visiblePages: number[]
+  pageStart: number
+  pageEnd: number
+  showFirstEllipsis: boolean
+  showLastEllipsis: boolean
+  onClick?: (query: number) => void
+  onMouseOver?: (query: number) => void
+}
+
+const PaginationContext = createContext<PaginationContextValues>(null)
+export const usePagination = () => useContext(PaginationContext)
+
+type PaginationProviderProps = PropsWithChildren & {
+  total: number
+  resultsPerPage: number
+  currentPage: number
+  onClick?: (query: number) => void
+  onMouseOver?: (query: number) => void
+  scrollRef?: RefObject<HTMLElement>
+}
+
+const PaginationProvider = ({
+  total,
+  resultsPerPage,
+  currentPage,
+  children,
+  onClick,
+  onMouseOver,
+  scrollRef,
+}: PaginationProviderProps): JSX.Element => {
+  const onLoad = useRef<boolean>(false)
+  const previousPage = useRef<number>(1)
+
+  // Calculate the "from a to b of x" values.
+  const startVal = resultsPerPage * (currentPage - 1) + 1
+  const endVal = resultsPerPage * currentPage
+  const pageStart = useRef<number>(currentPage > 1 ? startVal : 1)
+  const pageEnd = useRef<number>(total > endVal ? endVal : total)
+
+  const showPager: boolean = useMemo(
+    () => total > resultsPerPage,
+    [total, resultsPerPage],
+  )
+
+  const lastPage: number = useMemo(
+    () => Math.ceil(total / resultsPerPage),
+    [total, resultsPerPage],
+  )
+
+  const visiblePages: number[] = useMemo(() => {
+    const pages: number[] = []
+
+    // If there's only 2 or less visible pages, we don't need this.
+    if (!total || resultsPerPage >= total) {
+      return pages
+    }
+
+    // If there's an issue with the currentPage counter being too high, return
+    // an array of all pages.
+    // This is probably more graceful than an error or returning the wrong
+    // number of pages.
+    if (currentPage > lastPage) {
+      let marker = 2
+      while (marker < lastPage) {
+        pages.push(marker)
+        marker += 1
+      }
+    }
+
+    // The start page is the current page - 2, or 2, what ever is larger.
+    const start = Math.max(currentPage - 2, 2)
+    // The end page is the current page + 2, or the page before the last page,
+    // what ever is smaller.
+    const end = Math.min(currentPage + 2, lastPage - 1)
+
+    // Build the array of visible pages.
+    let marker = start
+    while (marker <= end) {
+      pages.push(marker)
+      marker += 1
+    }
+
+    return pages
+  }, [total, lastPage, resultsPerPage, currentPage])
+
+  const showFirstEllipsis: boolean = useMemo(
+    () => visiblePages.length !== 0 && visiblePages[0] !== 2,
+    [visiblePages],
+  )
+
+  const showLastEllipsis: boolean = useMemo(
+    () =>
+      visiblePages.length !== 0 &&
+      visiblePages[visiblePages.length - 1] !== lastPage - 1,
+    [visiblePages, lastPage],
+  )
+
+  // Get relevant URL search params.
+  const { searchParams, pathname, history } = useUrlParams()
+
+  // Onload, go to page from URL ?page=x
+  useEffect(() => {
+    if (onLoad.current) return
+    // check url for page query.
+    const queryPage = parseInt(searchParams?.get("page")) || 1
+    if (queryPage && queryPage !== currentPage) onClick(queryPage)
+    return () => {
+      // Only use effect on initial load.
+      onLoad.current = true
+    }
+  }, [currentPage, onClick, searchParams])
+
+  // On page change, set URL ?page=x
+  useEffect(() => {
+    if (previousPage.current === currentPage) return
+    // scroll to the start.
+    scrollRef.current?.scrollIntoView()
+    // add page query to URL when page changes.
+    let paramString = ""
+    if (currentPage !== 1) {
+      searchParams?.set("page", currentPage.toString())
+      paramString = `?${searchParams?.toString()}`
+    }
+    history?.pushState(null, "", `${pathname}${paramString}`)
+    return () => {
+      // Only use effect when the page is changed.
+      previousPage.current = currentPage
+    }
+  }, [currentPage, scrollRef, previousPage, history, pathname, searchParams])
+
+  const values = useMemo<PaginationContextValues>(
+    () => ({
+      total,
+      resultsPerPage,
+      currentPage,
+      showPager,
+      lastPage,
+      visiblePages,
+      showFirstEllipsis,
+      showLastEllipsis,
+      pageStart: pageStart.current,
+      pageEnd: pageEnd.current,
+      onClick,
+      onMouseOver,
+    }),
+    [
+      total,
+      resultsPerPage,
+      currentPage,
+      showPager,
+      lastPage,
+      visiblePages,
+      showFirstEllipsis,
+      showLastEllipsis,
+      pageStart,
+      pageEnd,
+      onClick,
+      onMouseOver,
+    ],
+  )
+
+  return (
+    <PaginationContext.Provider value={values}>
+      {children}
+    </PaginationContext.Provider>
+  )
+}
+
+export default PaginationProvider