@pnx-mixtape/mxds 0.0.1

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

@@ -0,0 +1,48 @@
+import { JSX } from "react"
+import classNames from "classnames"
+
+type PaginationItemProps = {
+  as?: "item" | "previous" | "next" | "ellipsis"
+  number?: number
+  active?: boolean
+  disabled?: boolean
+}
+
+const PaginationItem = ({
+  as = "item",
+  number,
+  active = false,
+  disabled = false,
+}: PaginationItemProps): JSX.Element => (
+  <li
+    className={classNames(`pagination__${as}`)}
+    aria-current={active ? "step" : null}
+    aria-hidden={disabled ? "true" : null}
+  >
+    {as === "ellipsis" && <>...</>}
+    {as === "item" && (
+      <>
+        {active && <>{number}</>}
+        {!active && (
+          <button type="button" data-page={number}>
+            {number}
+          </button>
+        )}
+      </>
+    )}
+    {(as === "next" || as === "previous") && (
+      <button
+        type="button"
+        disabled={disabled}
+        data-page={number}
+        className={classNames("icon", {
+          "icon--arrow-left": as === "previous",
+          "icon--arrow-right": as === "next",
+        })}
+      >
+        {as}
+      </button>
+    )}
+  </li>
+)
+export default PaginationItem

package/src/Component/Pagination/Pagination.stories.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./pagination.twig"
+import "./pagination.css"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Pagination: Story = {
+  args: {},
+}

package/src/Component/Pagination/Pagination.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./Components/PaginationContext"
+import PaginationComponent from "./Pagination"
+import "./pagination.css"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  argTypes: {
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    total: 100,
+    currentPage: 1,
+    resultsPerPage: 10,
+    children: <PaginationComponent />,
+  },
+}
+
+export default meta
+export const Pagination: StoryObj<typeof meta> = {}

package/src/Component/Pagination/Pagination.tsx

@@ -0,0 +1,75 @@
+import { JSX, MouseEventHandler } from "react"
+import { usePagination } from "./Components/PaginationContext"
+import PaginationItem from "./Components/PaginationItem"
+
+const Pagination = (): JSX.Element => {
+  const {
+    currentPage,
+    showPager,
+    lastPage,
+    visiblePages,
+    showFirstEllipsis,
+    showLastEllipsis,
+    onClick,
+    onMouseOver,
+  } = usePagination()
+
+  const handleClick: MouseEventHandler = e => {
+    const target = e.target as HTMLElement
+    const page: string = target.getAttribute("data-page")
+    if (!page) return
+    onClick(parseInt(page))
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  const handleMouseOver: MouseEventHandler = e => {
+    const target = e.target as HTMLElement
+    const page: string = target.getAttribute("data-page")
+    if (page) onMouseOver(parseInt(page))
+  }
+
+  return (
+    <>
+      {showPager && (
+        <nav className={"pagination"} aria-label="Pagination">
+          <ul
+            className={"pagination__items"}
+            onClick={handleClick}
+            onMouseEnter={handleMouseOver}
+          >
+            <PaginationItem
+              as="previous"
+              number={currentPage > 1 ? currentPage - 1 : null}
+              disabled={currentPage === 1}
+            />
+            <PaginationItem as="item" number={1} active={currentPage === 1} />
+            {showFirstEllipsis && <PaginationItem as="ellipsis" />}
+            {visiblePages.map(page => (
+              <PaginationItem
+                key={page.toString()}
+                as="item"
+                number={page}
+                active={currentPage === page}
+              />
+            ))}
+            {showLastEllipsis && <PaginationItem as="ellipsis" />}
+            <PaginationItem
+              as="item"
+              number={lastPage}
+              active={currentPage === lastPage}
+            />
+            <PaginationItem
+              as="next"
+              number={currentPage < lastPage ? currentPage + 1 : null}
+              disabled={currentPage === lastPage}
+            />
+          </ul>
+        </nav>
+      )}
+    </>
+  )
+}
+
+export default Pagination
+export { PaginationItem }

package/src/Component/Pagination/README.md

@@ -0,0 +1,19 @@
+# Pagination
+
+### How to use
+
+**CSS**
+
+`@import '@pnx-mixtape/mxds/pagination.css';`
+
+**Twig**
+
+You can setup a twig namespace in your project if you wish to use the twig files directly.
+
+- Eg: `{% extends '@mixtape/Components/Pagination/pagination.twig' %}`
+
+Alternatively copy/paste the file for more control.
+
+**JSX Components**
+
+- JSX import: `import { PaginationContext, Pagination } from '@pnx-mixtape/mxds/react';`

package/src/Component/Pagination/__snapshots__/Pagination.stories.ts.snap

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Navigation/Pagination Pagination smoke-test 1`] = `
+<nav aria-label="Pagination"
+     class="pagination"
+     role="navigation"
+>
+  <ul class="pagination__items">
+    <li class="pagination__previous">
+      <a href="#"
+         class="icon icon--arrow-left"
+      >
+        Previous
+      </a>
+    </li>
+    <li aria-current="page"
+        class="pagination__item"
+    >
+      1
+    </li>
+    <li class="pagination__item">
+      <a href="#">
+        2
+      </a>
+    </li>
+    <li class="pagination__item">
+      <a href="#">
+        3
+      </a>
+    </li>
+    <li class="pagination__item">
+      <a href="#">
+        4
+      </a>
+    </li>
+    <li class="pagination__item">
+      <a href="#">
+        5
+      </a>
+    </li>
+    <li class="pagination__ellipsis">
+      …
+    </li>
+    <li class="pagination__item">
+      <a href="#">
+        12
+      </a>
+    </li>
+    <li class="pagination__next">
+      <a href="#"
+         class="icon icon--arrow-right"
+      >
+        Next
+      </a>
+    </li>
+  </ul>
+</nav>
+`;

package/src/Component/Pagination/__snapshots__/Pagination.stories.tsx.snap

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Navigation/Pagination Pagination smoke-test 1`] = `
+<nav class="pagination"
+     aria-label="Pagination"
+>
+  <ul class="pagination__items">
+    <li class="pagination__previous"
+        aria-hidden="true"
+    >
+      <button type="button"
+              disabled
+              class="icon icon--arrow-left"
+      >
+        previous
+      </button>
+    </li>
+    <li class="pagination__item"
+        aria-current="step"
+    >
+      1
+    </li>
+    <li class="pagination__item">
+      <button type="button"
+              data-page="2"
+      >
+        2
+      </button>
+    </li>
+    <li class="pagination__item">
+      <button type="button"
+              data-page="3"
+      >
+        3
+      </button>
+    </li>
+    <li class="pagination__ellipsis">
+      ...
+    </li>
+    <li class="pagination__item">
+      <button type="button"
+              data-page="10"
+      >
+        10
+      </button>
+    </li>
+    <li class="pagination__next">
+      <button type="button"
+              data-page="2"
+              class="icon icon--arrow-right"
+      >
+        next
+      </button>
+    </li>
+  </ul>
+</nav>
+`;

package/src/Component/Pagination/pagination.css

@@ -0,0 +1,112 @@
+/**
+ * Pagination
+ */
+
+@layer elements {
+  .pagination {
+    margin-inline: 0;
+    padding: 0;
+
+    & button {
+      all: unset;
+      cursor: pointer;
+      box-sizing: border-box;
+
+      &:focus {
+        outline: var(--outline-width, var(--outline-size))
+          var(--outline-style, solid) var(--outline-color, currentcolor);
+        outline-offset: var(--outline-offset, var(--outline-size));
+      }
+    }
+
+    & :is(a, button, [aria-current="page"], [aria-current="step"]) {
+      text-decoration-line: none;
+      color: var(
+        --pagination-foreground,
+        var(--foreground, var(--colour-foreground))
+      );
+      display: block;
+      block-size: var(--spacing-l);
+      line-height: var(--spacing-l);
+      padding-block: 0;
+      padding-inline: var(--spacing-xs);
+    }
+
+    & :is([aria-current="page"], [aria-current="step"], .is-active) {
+      font-weight: var(--font-weight-bold);
+      text-decoration-line: var(--active-underline, underline);
+      text-decoration-thickness: 2px;
+      text-decoration-skip-ink: auto;
+      text-underline-offset: 0.15em;
+    }
+
+    & .icon:not(.icon--only) {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-xxs);
+    }
+
+    & .pagination__items {
+      display: flex;
+      place-content: center;
+      padding-inline-start: 0;
+      list-style-type: none;
+      text-align: center;
+    }
+
+    & .pagination__ellipsis {
+      padding-block: 0;
+      padding-inline: var(--spacing-xs);
+    }
+
+    & :is(.pagination__previous, .pagination__next) .icon:not(.icon--only) {
+      font-weight: var(--font-weight-bold);
+      text-transform: capitalize;
+
+      @media (--small-down) {
+        overflow: hidden;
+        inline-size: var(--spacing-s);
+        position: relative;
+        text-indent: 100%;
+
+        &::before {
+          position: absolute;
+        }
+      }
+    }
+
+    & .pagination__previous {
+      margin-inline-end: auto;
+
+      @media (--small-up) {
+        & :is(button, a) {
+          padding-inline-start: 0;
+        }
+      }
+    }
+
+    & .pagination__next {
+      margin-inline-start: auto;
+
+      @media (--small-up) {
+        & :is(button, a) {
+          padding-inline-end: 0;
+
+          &::before {
+            order: 2;
+          }
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Print stylesheet
+ */
+
+@media print {
+  .pagination {
+    display: none;
+  }
+}

package/src/Component/Pagination/pagination.twig

@@ -0,0 +1,44 @@
+{% set items = items|default({
+  "previous": {
+    "href": "#",
+    "text": "Previous"
+  },
+  "next": {
+    "href": "#",
+    "text": "Next"
+  },
+  "pages": {
+    "1": {"href": "#"},
+    "2": {"href": "#"},
+    "3": {"href": "#"},
+    "4": {"href": "#"},
+    "5": {"href": "#"},
+    "ellipsis": {},
+    "12": {"href": "#"}
+  }
+}) %}
+<nav aria-label="Pagination" class="pagination" role="navigation">
+  <ul class="pagination__items">
+    {% if items.previous %}
+      <li class="pagination__previous">
+        <a href="{{ items.previous.href }}" class="icon icon--arrow-left" {{ items.previous.attributes }}>{{ items.previous.text }}</a>
+      </li>
+    {% endif %}
+    {% for key, item in items.pages %}
+      {% if current|default("1") == key %}
+        <li aria-current="page" class="pagination__item">{{ key }}</li>
+      {% elseif key == "ellipsis" %}
+        <li class="pagination__ellipsis">&hellip;</li>
+      {% else %}
+        <li class="pagination__item">
+          <a href="{{ item.href }}" {{ item.attributes }}>{{ key }}</a>
+        </li>
+      {% endif %}
+    {% endfor %}
+    {% if items.next %}
+      <li class="pagination__next">
+        <a href="{{ items.next.href }}" class="icon icon--arrow-right" {{ item.next.attributes }}>{{ items.next.text }}</a>
+      </li>
+    {% endif %}
+  </ul>
+</nav>

package/src/Component/SocialShare/SocialShare.stories.tsx

@@ -0,0 +1,26 @@
+import SocialShare from "./SocialShare"
+
+export default {
+  title: "Elements/Social Share",
+  component: SocialShare,
+  args: {
+    shareUrl: "https://previousnext.com.au",
+    text: "Hello World!!",
+  },
+}
+
+export const Facebook = {
+  args: {
+    type: "facebook",
+  },
+}
+export const Twitter = {
+  args: {
+    type: "twitter",
+  },
+}
+export const LinkedIn = {
+  args: {
+    type: "linkedin",
+  },
+}

package/src/Component/SocialShare/SocialShare.tsx

@@ -0,0 +1,53 @@
+import { JSX, useMemo } from "react"
+import { ButtonLink } from "../../Atom/Button/Button"
+import { Icons, SocialShareTypes } from "../../enums"
+import { ButtonModifiers } from "@pnx-mixtape/ids-shape"
+
+type SocialShareProps = {
+  type: SocialShareTypes
+  shareUrl?: string
+  text?: string
+}
+
+const twitterUrl: string = "https://twitter.com/intent/tweet/"
+const facebookUrl: string = "https://www.facebook.com/sharer/sharer.php"
+const linkedInUrl: string = "https://www.linkedin.com/sharing/share-offsite/"
+
+const SocialShare = ({
+  type,
+  shareUrl = window.location.href,
+  text = "",
+}: SocialShareProps): JSX.Element => {
+  const socialShareUrl: string = useMemo(() => {
+    if (type === SocialShareTypes.TWITTER)
+      return encodeURI(`${twitterUrl}?url=${shareUrl}&text=${text}`)
+    if (type === SocialShareTypes.FACEBOOK)
+      return encodeURI(`${facebookUrl}?url=${shareUrl}`)
+    if (type === SocialShareTypes.LINKEDIN)
+      return encodeURI(`${linkedInUrl}/?url=${shareUrl}`)
+    return ""
+  }, [type])
+
+  const socialIcon: Icons = useMemo(() => {
+    if (type === SocialShareTypes.TWITTER) return Icons.TWITTER
+    if (type === SocialShareTypes.FACEBOOK) return Icons.FACEBOOK
+    if (type === SocialShareTypes.LINKEDIN) return Icons.LINKEDIN
+    return Icons.HEART
+  }, [type])
+
+  return (
+    <ButtonLink
+      iconOnly
+      icon={socialIcon}
+      modifiers={[ButtonModifiers.DARK]}
+      to={socialShareUrl}
+      onClick={() => {
+        window.open(socialShareUrl, "popup", "width=600,height=480")
+      }}
+    >
+      Share on {type}
+    </ButtonLink>
+  )
+}
+
+export default SocialShare

package/src/Component/SocialShare/__snapshots__/SocialShare.stories.tsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Elements/Social Share Facebook smoke-test 1`] = `
+<a href="https://www.facebook.com/sharer/sharer.php?url=https://previousnext.com.au"
+   class="button button--dark button--icon-only icon icon--facebook"
+>
+  Share on facebook
+</a>
+`;
+
+exports[`Elements/Social Share LinkedIn smoke-test 1`] = `
+<a href="https://www.linkedin.com/sharing/share-offsite//?url=https://previousnext.com.au"
+   class="button button--dark button--icon-only icon icon--linkedin"
+>
+  Share on linkedin
+</a>
+`;
+
+exports[`Elements/Social Share Twitter smoke-test 1`] = `
+<a href="https://twitter.com/intent/tweet/?url=https://previousnext.com.au&amp;text=Hello%20World!!"
+   class="button button--dark button--icon-only icon icon--twitter"
+>
+  Share on twitter
+</a>
+`;

package/src/Component/Sticky/Elements/Sticky.ts

@@ -0,0 +1,93 @@
+/**
+ * Sticky "is-stuck" and offset handler.
+ */
+
+import { createElement } from "../../../Utility/utilities"
+
+type IOOptions = {
+  root: IntersectionObserver["root"]
+  rootMargin: IntersectionObserver["rootMargin"]
+  thresholds: IntersectionObserver["thresholds"]
+}
+
+export default class Sticky extends HTMLElement {
+  internals_: ElementInternals
+  iO: IntersectionObserver
+  rO?: ResizeObserver
+  offsetPropName?: string
+  root?: IOOptions["root"] = null
+  rootMargin?: IOOptions["rootMargin"] = "0px 0px 0px 0px"
+  thresholds?: IOOptions["thresholds"] = [0]
+
+  constructor() {
+    super()
+    this.internals_ = this.attachInternals()
+  }
+
+  connectedCallback(): void {
+    this.offsetPropName = this.getAttribute("offsetpropname")
+    const options: IOOptions = {
+      root: this.root,
+      rootMargin: this.rootMargin,
+      thresholds: this.thresholds,
+    }
+
+    // Toggle "is-stuck" and emit event.
+    this.iO = new IntersectionObserver(([{ boundingClientRect }]) => {
+      const isSticky: boolean = boundingClientRect.y < 0
+      this.classList.toggle("is-stuck", isSticky)
+      const newEvent: CustomEvent<{
+        isSticky: boolean
+        options: IOOptions
+        target: Sticky
+      }> = new CustomEvent("sticky-toggle", {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+          isSticky,
+          options,
+          target: this,
+        },
+      })
+      this.dispatchEvent(newEvent)
+    }, options)
+    this.iO.observe(this.trigger)
+
+    // If offsetPropName, record its height.
+    if (!this.offsetPropName) return
+    this.rO = new ResizeObserver(entries => {
+      entries.forEach(({ borderBoxSize }) => {
+        const [{ blockSize }] = borderBoxSize
+        document.body.style.setProperty(
+          this.offsetPropName,
+          `${blockSize.toFixed(1)}px`,
+        )
+      })
+    })
+    this.rO.observe(this)
+  }
+
+  disconnectedCallback(): void {
+    this.iO.unobserve(this.trigger)
+    this.rO.disconnect()
+  }
+
+  get trigger(): HTMLDivElement {
+    let trigger: HTMLDivElement | null = this.querySelector(".sticky__trigger")
+    if (!trigger) {
+      trigger = createElement(
+        '<div class="sticky__trigger"></div>',
+      ) as HTMLDivElement
+      this.insertAdjacentElement("beforebegin", trigger)
+    }
+    return trigger
+  }
+}
+
+customElements.define("mx-sticky", Sticky)
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mx-sticky": Sticky
+  }
+}

package/src/Component/Sticky/README.md

@@ -0,0 +1,23 @@
+# Sticky
+
+### How to use
+
+**CSS**
+
+`@import '@pnx-mixtape/mxds/sticky.css';`
+
+**Twig**
+
+You can setup a twig namespace in your project if you wish to use the twig files directly.
+
+- Eg: `{% extends '@mixtape/Components/Sticky/twig/sticky.twig' %}`
+
+Alternatively copy/paste the file for more control.
+
+**JSX Components**
+
+`import { Sticky } from '@pnx-mixtape/mxds/react';`
+
+**JS**
+
+`import Sticky from '@pnx-mixtape/mxds';`