@uqds/react 1.0.0-alpha.1

package/dist/js/main.d.ts

@@ -0,0 +1,122 @@
+import { FC } from 'react';
+import { MouseEventHandler } from 'react';
+import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
+
+export declare const UqCard: FC<UqCardProps>;
+
+export declare const UqCardGrid: FC<UqCardGridProps>;
+
+declare interface UqCardGridProps extends PropsWithChildren {
+    target?: UqCardGridTarget;
+}
+
+export declare enum UqCardGridTarget {
+    x1 = "1x",
+    x2 = "2x",
+    x3 = "3x",
+    x4 = "4x"
+}
+
+declare interface UqCardProps {
+    title: ReactNode;
+    variant: UqCardVariant;
+    image?: ReactNode;
+    icon?: ReactNode;
+    description?: ReactNode;
+}
+
+export declare const enum UqCardVariant {
+    text = "text",
+    image = "image",
+    icon = "icon",
+    iconNav = "icon-nav"
+}
+
+export declare const UqContainer: FC<UqContainerProps>;
+
+declare interface UqContainerProps extends PropsWithChildren {
+}
+
+export declare const UqIcon: FC<UqIconProps>;
+
+declare interface UqIconProps {
+    name: string;
+    variant?: UqIconVariant;
+}
+
+export declare const enum UqIconVariant {
+    light = "light",
+    text = "text"
+}
+
+export declare const UqPagination: FC<UqPaginationProps>;
+
+export declare const UqPaginationItem: FC<UqPaginationItemProps>;
+
+declare interface UqPaginationItemProps {
+    As?: "button" | "a";
+    type?: UqPaginationItemType;
+    number?: number;
+    current?: boolean;
+    href?: string;
+    value?: string;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+export declare const enum UqPaginationItemType {
+    Previous = "previous",
+    Next = "next",
+    Ellipsis = "ellipsis"
+}
+
+declare interface UqPaginationProps {
+    As?: "button" | "a";
+    totalResults: number;
+    resultsPerPage: number;
+    currentPage: number;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+}
+
+export declare const UqPane: FC<UqPaneProps>;
+
+declare interface UqPaneProps {
+    title: string;
+    variant: UqPaneVariant;
+    image?: ReactNode;
+    icon?: ReactNode;
+    video?: ReactNode;
+    description?: ReactNode;
+    links?: ReactNode;
+}
+
+export declare const enum UqPaneVariant {
+    text = "text",
+    image = "image",
+    video = "video",
+    icon = "icon",
+    iconLarge = "icon-large",
+    textShaded = "text-shaded",
+    iconShaded = "icon-shaded"
+}
+
+export declare const UqStoryCard: FC<UqStoryCardProps>;
+
+declare interface UqStoryCardProps {
+    title: ReactNode;
+    variant: UqStoryCardVariant;
+    image?: ReactNode;
+    description?: ReactNode;
+    topLabel: string;
+    bottomLabel: string;
+}
+
+export declare const enum UqStoryCardVariant {
+    story = "story",
+    news = "news",
+    event = "event",
+    landscape = "landscape",
+    feature = "feature"
+}
+
+export { }

package/dist/js/main.js

@@ -0,0 +1,287 @@
+import { jsx as a, jsxs as u } from "react/jsx-runtime";
+import { useMemo as f } from "react";
+const B = ({ children: e }) => /* @__PURE__ */ a("div", { className: "uq-container", children: e });
+function y(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+var x = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+var q;
+function w() {
+  return q || (q = 1, function(e) {
+    (function() {
+      var i = {}.hasOwnProperty;
+      function r() {
+        for (var s = "", t = 0; t < arguments.length; t++) {
+          var m = arguments[t];
+          m && (s = c(s, n(m)));
+        }
+        return s;
+      }
+      function n(s) {
+        if (typeof s == "string" || typeof s == "number")
+          return s;
+        if (typeof s != "object")
+          return "";
+        if (Array.isArray(s))
+          return r.apply(null, s);
+        if (s.toString !== Object.prototype.toString && !s.toString.toString().includes("[native code]"))
+          return s.toString();
+        var t = "";
+        for (var m in s)
+          i.call(s, m) && s[m] && (t = c(t, m));
+        return t;
+      }
+      function c(s, t) {
+        return t ? s ? s + " " + t : s + t : s;
+      }
+      e.exports ? (r.default = r, e.exports = r) : window.classNames = r;
+    })();
+  }(x)), x.exports;
+}
+var E = w();
+const v = /* @__PURE__ */ y(E);
+var g = /* @__PURE__ */ ((e) => (e.text = "text", e.image = "image", e.icon = "icon", e.iconNav = "icon-nav", e))(g || {}), S = /* @__PURE__ */ ((e) => (e.x1 = "1x", e.x2 = "2x", e.x3 = "3x", e.x4 = "4x", e))(S || {}), j = /* @__PURE__ */ ((e) => (e.light = "light", e.text = "text", e))(j || {}), d = /* @__PURE__ */ ((e) => (e.Previous = "previous", e.Next = "next", e.Ellipsis = "ellipsis", e))(d || {}), M = /* @__PURE__ */ ((e) => (e.text = "text", e.image = "image", e.video = "video", e.icon = "icon", e.iconLarge = "icon-large", e.textShaded = "text-shaded", e.iconShaded = "icon-shaded", e))(M || {}), O = /* @__PURE__ */ ((e) => (e.story = "story", e.news = "news", e.event = "event", e.landscape = "landscape", e.feature = "feature", e))(O || {});
+const H = ({ children: e, target: i }) => /* @__PURE__ */ a(
+  "div",
+  {
+    className: v("uq-card-grid", {
+      [`uq-card-grid--target-${i}`]: i
+    }),
+    children: e
+  }
+), $ = ({ name: e, variant: i }) => /* @__PURE__ */ a(
+  "span",
+  {
+    className: v("uq-icon", `uq-icon--${e}`, {
+      [`uq-icon--${i}`]: i
+    })
+  }
+), J = ({
+  image: e,
+  icon: i,
+  title: r,
+  description: n,
+  variant: c
+}) => /* @__PURE__ */ u(
+  "div",
+  {
+    className: v("uq-card", `uq-card--${c}`),
+    "data-gtm-category": "Card",
+    children: [
+      e && /* @__PURE__ */ a("div", { className: "uq-card__image", children: e }),
+      /* @__PURE__ */ u("div", { className: "uq-card__content", children: [
+        i && /* @__PURE__ */ a("div", { className: "uq-card__icon", children: i }),
+        /* @__PURE__ */ a("h3", { className: "uq-card__title", children: r }),
+        n && /* @__PURE__ */ a("div", { className: "uq-card__description", children: n })
+      ] })
+    ]
+  }
+), K = ({
+  image: e,
+  icon: i,
+  title: r,
+  description: n,
+  variant: c,
+  links: s,
+  video: t
+}) => /* @__PURE__ */ u("div", { className: v("uq-pane", `uq-pane--${c}`), children: [
+  e && /* @__PURE__ */ a("div", { className: "uq-pane__image", children: e }),
+  t && /* @__PURE__ */ a("div", { className: "uq-pane__video", children: t }),
+  /* @__PURE__ */ u("div", { className: "uq-pane__content", children: [
+    i && /* @__PURE__ */ a("div", { className: "uq-pane__icon", children: i }),
+    /* @__PURE__ */ a("h3", { className: "uq-pane__title", children: r }),
+    n && /* @__PURE__ */ a("div", { className: "uq-pane__description", children: n }),
+    s && /* @__PURE__ */ a("div", { className: "uq-pane__actions", children: s })
+  ] })
+] }), L = ({
+  image: e,
+  title: i,
+  description: r,
+  variant: n,
+  topLabel: c,
+  bottomLabel: s
+}) => /* @__PURE__ */ u(
+  "div",
+  {
+    className: v("uq-story-card", `uq-story-card--${n}`),
+    "data-gtm-category": "StoryCard",
+    children: [
+      e && /* @__PURE__ */ a("div", { className: "uq-story-card__image", children: e }),
+      /* @__PURE__ */ u("div", { className: "uq-story-card__content", children: [
+        c && /* @__PURE__ */ a("div", { className: "uq-story-card__top-label", children: c }),
+        /* @__PURE__ */ a("h3", { className: "uq-story-card__title", children: i }),
+        r && /* @__PURE__ */ a("div", { className: "uq-story-card__description", children: r }),
+        s && /* @__PURE__ */ a("div", { className: "uq-story-card__bottom-label", children: s })
+      ] })
+    ]
+  }
+), h = ({
+  As: e = "button",
+  type: i,
+  number: r,
+  current: n = !1,
+  href: c,
+  value: s,
+  onClick: t
+}) => /* @__PURE__ */ a("li", { className: "uq-pagination__list-item", children: /* @__PURE__ */ u(
+  e,
+  {
+    className: v("uq-pagination__item", {
+      [`uq-pagination__${i}`]: i,
+      "uq-pagination__current": n
+    }),
+    "aria-current": n && "page",
+    onClick: t,
+    href: c,
+    value: s,
+    children: [
+      /* @__PURE__ */ u("span", { className: "visually-hidden", children: [
+        !i && "Page",
+        i === d.Previous && "Previous page",
+        i === d.Next && "Previous page",
+        i === d.Ellipsis && `Skip to page ${r}`
+      ] }),
+      !i && `${r}`,
+      i === d.Previous && /* @__PURE__ */ a($, { name: "standard--chevron-left" }),
+      i === d.Next && /* @__PURE__ */ a($, { name: "standard--chevron-right" }),
+      i === d.Ellipsis && "…"
+    ]
+  }
+) }), Q = ({
+  As: e = "button",
+  totalResults: i,
+  resultsPerPage: r,
+  currentPage: n,
+  onClick: c
+}) => {
+  const s = f(
+    () => Math.ceil(i / r),
+    [i, r]
+  ), t = f(() => {
+    const l = [];
+    if (!i || r >= i)
+      return l;
+    if (Math.ceil(i / r) < 6 || n > s) {
+      let o = 2;
+      for (; o < s; )
+        l.push(o), o += 1;
+      return l;
+    }
+    if (n === 1) {
+      let o = 2;
+      for (; o < 5; )
+        l.push(o), o += 1;
+      return l;
+    }
+    if (n === s) {
+      let o = s - 3;
+      for (; o < s; )
+        l.push(o), o += 1;
+      return l;
+    }
+    let p = Math.max(n - 1, 2), _ = Math.min(n + 1, s - 1);
+    p === 2 && (_ = p + 2), _ === s - 1 && (p = _ - 2);
+    let N = p;
+    for (; N <= _; )
+      l.push(N), N += 1;
+    return l;
+  }, [i, s, r, n]), m = f(
+    () => t.length !== 0 && t[0] !== 2,
+    [t]
+  ), b = f(
+    () => t.length !== 0 && t[t.length - 1] !== s - 1,
+    [t, s]
+  );
+  return /* @__PURE__ */ a("nav", { className: "uq-pagination", "aria-label": "Pagination", children: /* @__PURE__ */ u("ul", { className: "uq-pagination__list", children: [
+    n !== 1 && /* @__PURE__ */ a(
+      h,
+      {
+        As: e,
+        type: d.Previous,
+        onClick: c,
+        value: `${n - 1}`
+      }
+    ),
+    /* @__PURE__ */ a(
+      h,
+      {
+        As: e,
+        number: 1,
+        current: n === 1,
+        onClick: c,
+        value: "1"
+      }
+    ),
+    m && /* @__PURE__ */ a(
+      h,
+      {
+        As: e,
+        type: d.Ellipsis,
+        value: `${n - 3}`,
+        number: n - 3,
+        onClick: c
+      }
+    ),
+    t.map((l) => /* @__PURE__ */ a(
+      h,
+      {
+        As: e,
+        number: l,
+        current: n === l,
+        onClick: c,
+        value: `${l}`
+      },
+      l.toString()
+    )),
+    b && /* @__PURE__ */ a(
+      h,
+      {
+        As: e,
+        type: d.Ellipsis,
+        value: `${n + 3}`,
+        number: n + 3,
+        onClick: c
+      }
+    ),
+    s > 1 && /* @__PURE__ */ a(
+      h,
+      {
+        As: e,
+        number: s,
+        current: n === s,
+        onClick: c,
+        value: `${s}`
+      }
+    ),
+    n !== s && /* @__PURE__ */ a(
+      h,
+      {
+        As: e,
+        type: d.Next,
+        onClick: c,
+        value: `${n + 1}`
+      }
+    )
+  ] }) });
+};
+export {
+  J as UqCard,
+  H as UqCardGrid,
+  S as UqCardGridTarget,
+  g as UqCardVariant,
+  B as UqContainer,
+  $ as UqIcon,
+  j as UqIconVariant,
+  Q as UqPagination,
+  h as UqPaginationItem,
+  d as UqPaginationItemType,
+  K as UqPane,
+  M as UqPaneVariant,
+  L as UqStoryCard,
+  O as UqStoryCardVariant
+};

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@uqds/react",
+  "version": "1.0.0-alpha.1",
+  "description": "React components",
+  "keywords": [
+    "uqds",
+    "uq",
+    "University of Queensland",
+    "design system",
+    "scss",
+    "sass",
+    "css",
+    "accordion",
+    "react"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": {
+    "name": "University of Queensland",
+    "email": "webservices@uq.edu.au",
+    "url": "https://uq.edu.au"
+  },
+  "homepage": "https://github.com/uq-its-ss/design-system#readme",
+  "license": "ISC",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/js/main.js"
+    },
+    "./src/jsx/*": "./src/jsx/*",
+    "./src/scss/*": "./src/scss/*"
+  },
+  "style": "dist/css/main.css",
+  "main": "dist/js/main.js",
+  "types": "dist/js/main.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/uq-its-ss/design-system.git"
+  },
+  "scripts": {
+    "prepare": "gulp -f ../../gulpfile.js --cwd=. prepare && vite build",
+    "lint-tsc": "tsc"
+  },
+  "bugs": {
+    "url": "https://github.com/uq-its-ss/design-system/issues"
+  },
+  "dependencies": {
+    "@uqds/body": "^3.0.0-alpha.0",
+    "@uqds/card": "^3.0.0-alpha.1",
+    "@uqds/core": "^4.0.0-alpha.0",
+    "@uqds/icon": "^3.0.0-alpha.0",
+    "@uqds/layout": "6.0.0-alpha.0",
+    "@uqds/pagination": "^3.0.0-alpha.0",
+    "@uqds/pane": "^3.0.0-alpha.0",
+    "classnames": "^2.5.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.11",
+    "vite-plugin-dts": "^4.5.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "gitHead": "3cbffaa8ca0d7ab54ae1908bdd5feb5f05ecc5d2"
+}

package/src/jsx/components/UqCard/UqCard.tsx

@@ -0,0 +1,31 @@
+import type { FC, ReactNode } from "react";
+import classNames from "classnames";
+import { UqCardVariant } from "../../enum";
+
+export interface UqCardProps {
+  title: ReactNode;
+  variant: UqCardVariant;
+  image?: ReactNode;
+  icon?: ReactNode;
+  description?: ReactNode;
+}
+
+export const UqCard: FC<UqCardProps> = ({
+  image,
+  icon,
+  title,
+  description,
+  variant,
+}) => (
+  <div
+    className={classNames("uq-card", `uq-card--${variant}`)}
+    data-gtm-category="Card"
+  >
+    {image && <div className="uq-card__image">{image}</div>}
+    <div className="uq-card__content">
+      {icon && <div className="uq-card__icon">{icon}</div>}
+      <h3 className="uq-card__title">{title}</h3>
+      {description && <div className="uq-card__description">{description}</div>}
+    </div>
+  </div>
+);

package/src/jsx/components/UqIcon/UqIcon.tsx

@@ -0,0 +1,16 @@
+import type { FC } from "react";
+import classNames from "classnames";
+import { UqIconVariant } from "../../enum";
+
+export interface UqIconProps {
+  name: string;
+  variant?: UqIconVariant;
+}
+
+export const UqIcon: FC<UqIconProps> = ({ name, variant }) => (
+  <span
+    className={classNames("uq-icon", `uq-icon--${name}`, {
+      [`uq-icon--${variant}`]: variant,
+    })}
+  ></span>
+);

package/src/jsx/components/UqPagination/UqPagination.tsx

@@ -0,0 +1,180 @@
+import { type FC, type MouseEventHandler, useMemo } from "react";
+import { UqPaginationItem } from "./UqPaginationItem";
+import { UqPaginationItemType } from "../../enum";
+
+export interface UqPaginationProps {
+  As?: "button" | "a";
+  totalResults: number;
+  resultsPerPage: number;
+  currentPage: number;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+}
+
+export const UqPagination: FC<UqPaginationProps> = ({
+  As = "button",
+  totalResults,
+  resultsPerPage,
+  currentPage,
+  onClick,
+}) => {
+  /**
+   * The last page is the totalResults / resultsPerPage, rounded up.
+   */
+  const lastPage = useMemo<number>(
+    () => Math.ceil(totalResults / resultsPerPage),
+    [totalResults, resultsPerPage],
+  );
+
+  /**
+   * Create an array representation of the visible pages.
+   */
+  const visiblePages = useMemo<number[]>(() => {
+    const pages: number[] = [];
+
+    // If there's only 1 visible page go no further.
+    if (!totalResults || resultsPerPage >= totalResults) {
+      return pages;
+    }
+
+    const totalPages = Math.ceil(totalResults / resultsPerPage);
+
+    // Show all pages.
+    // Do this if there are less than 6 pages,
+    // or if incorrect props have been passed down.
+    if (totalPages < 6 || currentPage > lastPage) {
+      let marker = 2;
+      while (marker < lastPage) {
+        pages.push(marker);
+        marker += 1;
+      }
+      return pages;
+    }
+
+    // Show up to page 4 if we are on the first page.
+    if (currentPage === 1) {
+      let marker = 2;
+      while (marker < 5) {
+        pages.push(marker);
+        marker += 1;
+      }
+      return pages;
+    }
+
+    // Show the last 4 pages if we are on the last page.
+    if (currentPage === lastPage) {
+      let marker = lastPage - 3;
+      while (marker < lastPage) {
+        pages.push(marker);
+        marker += 1;
+      }
+      return pages;
+    }
+
+    // Show the current page plus and minus 1 page.
+    let start = Math.max(currentPage - 1, 2);
+    let end = Math.min(currentPage + 1, lastPage - 1);
+    // Unless we are on page 2, then show plus 2 pages.
+    if (start === 2) {
+      end = start + 2;
+    }
+    // Unless we are on the second last page, then show minus 2 pages.
+    if (end === lastPage - 1) {
+      start = end - 2;
+    }
+
+    // Build the array of visible pages.
+    let marker = start;
+    while (marker <= end) {
+      pages.push(marker);
+      marker += 1;
+    }
+
+    return pages;
+  }, [totalResults, lastPage, resultsPerPage, currentPage]);
+
+  /**
+   * The first ellipsis will show if the first visible page is > 2.
+   */
+  const showFirstEllipsis = useMemo<boolean>(
+    () => visiblePages.length !== 0 && visiblePages[0] !== 2,
+    [visiblePages],
+  );
+
+  /**
+   * The last ellipsis will show if the last visible page is -1 less than the
+   * last page.
+   */
+  const showLastEllipsis = useMemo<boolean>(
+    () =>
+      visiblePages.length !== 0 &&
+      visiblePages[visiblePages.length - 1] !== lastPage - 1,
+    [visiblePages, lastPage],
+  );
+
+  return (
+    <nav className="uq-pagination" aria-label="Pagination">
+      <ul className="uq-pagination__list">
+        {currentPage !== 1 && (
+          <UqPaginationItem
+            As={As}
+            type={UqPaginationItemType.Previous}
+            onClick={onClick}
+            value={`${currentPage - 1}`}
+          />
+        )}
+        <UqPaginationItem
+          As={As}
+          number={1}
+          current={currentPage === 1}
+          onClick={onClick}
+          value="1"
+        />
+        {showFirstEllipsis && (
+          <UqPaginationItem
+            As={As}
+            type={UqPaginationItemType.Ellipsis}
+            value={`${currentPage - 3}`}
+            number={currentPage - 3}
+            onClick={onClick}
+          />
+        )}
+        {visiblePages.map((page) => (
+          <UqPaginationItem
+            As={As}
+            key={page.toString()}
+            number={page}
+            current={currentPage === page}
+            onClick={onClick}
+            value={`${page}`}
+          />
+        ))}
+        {showLastEllipsis && (
+          <UqPaginationItem
+            As={As}
+            type={UqPaginationItemType.Ellipsis}
+            value={`${currentPage + 3}`}
+            number={currentPage + 3}
+            onClick={onClick}
+          />
+        )}
+        {lastPage > 1 && (
+          <UqPaginationItem
+            As={As}
+            number={lastPage}
+            current={currentPage === lastPage}
+            onClick={onClick}
+            value={`${lastPage}`}
+          />
+        )}
+        {currentPage !== lastPage && (
+          <UqPaginationItem
+            As={As}
+            type={UqPaginationItemType.Next}
+            onClick={onClick}
+            value={`${currentPage + 1}`}
+          />
+        )}
+      </ul>
+    </nav>
+  );
+};