@uqds/react 1.0.0-alpha.1

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

@@ -0,0 +1,55 @@
+import type { FC, MouseEventHandler } from "react";
+import classNames from "classnames";
+import { UqIcon } from "../UqIcon/UqIcon.tsx";
+import { UqPaginationItemType } from "../../enum";
+
+export interface UqPaginationItemProps {
+  As?: "button" | "a";
+  type?: UqPaginationItemType;
+  number?: number;
+  current?: boolean;
+  href?: string;
+  value?: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+export const UqPaginationItem: FC<UqPaginationItemProps> = ({
+  As = "button",
+  type,
+  number,
+  current = false,
+  href,
+  value,
+  onClick,
+}) => {
+  return (
+    <li className="uq-pagination__list-item">
+      <As
+        className={classNames("uq-pagination__item", {
+          [`uq-pagination__${type}`]: type,
+          "uq-pagination__current": current,
+        })}
+        aria-current={current && "page"}
+        // @ts-expect-error Dynamic elements expect different attributes (a and button).
+        onClick={onClick}
+        href={href}
+        value={value}
+      >
+        <span className="visually-hidden">
+          {!type && "Page"}
+          {type === UqPaginationItemType.Previous && "Previous page"}
+          {type === UqPaginationItemType.Next && "Previous page"}
+          {type === UqPaginationItemType.Ellipsis && `Skip to page ${number}`}
+        </span>
+        {!type && `${number}`}
+        {type === UqPaginationItemType.Previous && (
+          <UqIcon name={"standard--chevron-left"} />
+        )}
+        {type === UqPaginationItemType.Next && (
+          <UqIcon name={"standard--chevron-right"} />
+        )}
+        {type === UqPaginationItemType.Ellipsis && "…"}
+      </As>
+    </li>
+  );
+};

package/src/jsx/components/UqPane/UqPane.tsx

@@ -0,0 +1,34 @@
+import type { FC, ReactNode } from "react";
+import classNames from "classnames";
+import { UqPaneVariant } from "../../enum";
+
+export interface UqPaneProps {
+  title: string;
+  variant: UqPaneVariant;
+  image?: ReactNode;
+  icon?: ReactNode;
+  video?: ReactNode;
+  description?: ReactNode;
+  links?: ReactNode;
+}
+
+export const UqPane: FC<UqPaneProps> = ({
+  image,
+  icon,
+  title,
+  description,
+  variant,
+  links,
+  video,
+}) => (
+  <div className={classNames("uq-pane", `uq-pane--${variant}`)}>
+    {image && <div className="uq-pane__image">{image}</div>}
+    {video && <div className="uq-pane__video">{video}</div>}
+    <div className="uq-pane__content">
+      {icon && <div className="uq-pane__icon">{icon}</div>}
+      <h3 className="uq-pane__title">{title}</h3>
+      {description && <div className="uq-pane__description">{description}</div>}
+      {links && <div className="uq-pane__actions">{links}</div>}
+    </div>
+  </div>
+);

package/src/jsx/components/UqStoryCard/UqStoryCard.tsx

@@ -0,0 +1,38 @@
+import type { FC, ReactNode } from "react";
+import classNames from "classnames";
+import { UqStoryCardVariant } from "../../enum";
+
+export interface UqStoryCardProps {
+  title: ReactNode;
+  variant: UqStoryCardVariant;
+  image?: ReactNode;
+  description?: ReactNode;
+  topLabel: string;
+  bottomLabel: string;
+}
+
+export const UqStoryCard: FC<UqStoryCardProps> = ({
+  image,
+  title,
+  description,
+  variant,
+  topLabel,
+  bottomLabel,
+}) => (
+  <div
+    className={classNames("uq-story-card", `uq-story-card--${variant}`)}
+    data-gtm-category="StoryCard"
+  >
+    {image && <div className="uq-story-card__image">{image}</div>}
+    <div className="uq-story-card__content">
+      {topLabel && <div className="uq-story-card__top-label">{topLabel}</div>}
+      <h3 className="uq-story-card__title">{title}</h3>
+      {description && (
+        <div className="uq-story-card__description">{description}</div>
+      )}
+      {bottomLabel && (
+        <div className="uq-story-card__bottom-label">{bottomLabel}</div>
+      )}
+    </div>
+  </div>
+);

package/src/jsx/enum/index.ts

@@ -0,0 +1,42 @@
+export const enum UqCardVariant {
+  text = "text",
+  image = "image",
+  icon = "icon",
+  iconNav = "icon-nav",
+}
+
+export enum UqCardGridTarget {
+  x1 = "1x",
+  x2 = "2x",
+  x3 = "3x",
+  x4 = "4x",
+}
+
+export const enum UqIconVariant {
+  light = "light",
+  text = "text",
+}
+
+export const enum UqPaginationItemType {
+  Previous = "previous",
+  Next = "next",
+  Ellipsis = "ellipsis",
+}
+
+export const enum UqPaneVariant {
+  text = "text",
+  image = "image",
+  video = "video",
+  icon = "icon",
+  iconLarge = "icon-large",
+  textShaded = "text-shaded",
+  iconShaded = "icon-shaded",
+}
+
+export const enum UqStoryCardVariant {
+  story = "story",
+  news = "news",
+  event = "event",
+  landscape = "landscape",
+  feature = "feature",
+}

package/src/jsx/layout/UqCardGrid/UqCardGrid.tsx

@@ -0,0 +1,17 @@
+import type { FC, PropsWithChildren } from "react";
+import classNames from "classnames";
+import { UqCardGridTarget } from "../../enum";
+
+export interface UqCardGridProps extends PropsWithChildren {
+  target?: UqCardGridTarget;
+}
+
+export const UqCardGrid: FC<UqCardGridProps> = ({ children, target }) => (
+  <div
+    className={classNames("uq-card-grid", {
+      [`uq-card-grid--target-${target}`]: target,
+    })}
+  >
+    {children}
+  </div>
+);

package/src/jsx/layout/UqContainer/UqContainer.tsx

@@ -0,0 +1,7 @@
+import type { FC, PropsWithChildren } from "react";
+
+export interface UqContainerProps extends PropsWithChildren {}
+
+export const UqContainer: FC<UqContainerProps> = ({ children }) => (
+  <div className="uq-container">{children}</div>
+);

package/src/jsx/main.tsx

@@ -0,0 +1,21 @@
+import { UqContainer } from "./layout/UqContainer/UqContainer";
+import { UqCardGrid } from "./layout/UqCardGrid/UqCardGrid";
+import { UqIcon } from "./components/UqIcon/UqIcon";
+import { UqCard } from "./components/UqCard/UqCard";
+import { UqPane } from "./components/UqPane/UqPane";
+import { UqStoryCard } from "./components/UqStoryCard/UqStoryCard";
+import { UqPagination } from "./components/UqPagination/UqPagination";
+import { UqPaginationItem } from "./components/UqPagination/UqPaginationItem";
+
+export {
+  UqContainer,
+  UqCardGrid,
+  UqCard,
+  UqIcon,
+  UqPane,
+  UqStoryCard,
+  UqPagination,
+  UqPaginationItem,
+};
+
+export * from "./enum/index";

package/src/scss/main.scss

@@ -0,0 +1,7 @@
+@use "@uqds/core/src/scss/main" as core;
+@use "@uqds/layout/src/scss/main" as layout;
+@use "@uqds/body/src/scss/main" as body;
+@use "@uqds/icon/src/scss/main" as icon;
+@use "@uqds/card/src/scss/main" as card;
+@use "@uqds/pane/src/scss/main" as pane;
+@use "@uqds/pagination/src/scss/main" as pagination;

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "declaration": true,
+    "verbatimModuleSyntax": true
+  },
+  "include": ["src"]
+}

package/vite.config.js

@@ -0,0 +1,25 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import react from "@vitejs/plugin-react";
+import dts from "vite-plugin-dts";
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      rollupTypes: true,
+      tsconfigPath: "./tsconfig.json",
+    }),
+  ],
+  build: {
+    lib: {
+      entry: resolve(import.meta.dirname, "src/jsx/main.tsx"),
+      fileName: "main",
+      formats: ["es"],
+    },
+    outDir: resolve(import.meta.dirname, "./dist/js"),
+    rollupOptions: {
+      external: ["react", "react/jsx-runtime"],
+    },
+  },
+});