@kickstartds/ds-agency-premium 1.6.68 → 1.6.69--canary.45.1732.0

package/dist/components/pagination/index.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { HTMLAttributes } from "react";
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+interface PaginationProps {
+    pages?: {
+        /**
+         * The URL to the page
+         */
+        url: string;
+        /**
+         * Indicates if the page is currently active
+         */
+        active?: boolean;
+    }[];
+}
+declare const PaginationContextDefault: import("react").ForwardRefExoticComponent<PaginationProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const PaginationContext: import("react").Context<import("react").ForwardRefExoticComponent<PaginationProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export type { PaginationProps };
+export { PaginationContextDefault, PaginationContext, Pagination };

package/dist/components/pagination/index.js

@@ -0,0 +1,26 @@
+import "./pagination.css";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { forwardRef, createContext, useContext } from 'react';
+import { Icon } from '@kickstartds/base/lib/icon';
+import { Link } from '@kickstartds/base/lib/link';
+
+const PaginationContextDefault = forwardRef(({ pages }, ref) => {
+    return (jsxs("div", { className: "dsa-pagination", ref: ref, children: [pages.findIndex((page) => page.active) !== 0 && (jsxs(Fragment, { children: [jsx(Link, { className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--skip-back", href: pages[0]?.url, children: jsx(Icon, { icon: "skip-back" }) }), jsx(Link, { className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--prev", href: (() => {
+                            const activeIndex = pages.findIndex((page) => page.active);
+                            // Use the url of the next item after the active one, or "#" if at the end
+                            return pages[activeIndex - 1]?.url || "#";
+                        })(), children: jsx(Icon, { icon: "chevron-left" }) })] })), pages.map((page, index) => (jsx(Link, { className: classnames("dsa-pagination__link", page.active && "dsa-pagination__link--active"), href: page.url, children: (index + 1).toString() }, index))), pages.findIndex((page) => page.active) !== pages.length - 1 && (jsxs(Fragment, { children: [jsx(Link, { className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--next", href: (() => {
+                            const activeIndex = pages.findIndex((page) => page.active);
+                            // Use the url of the next item after the active one, or "#" if at the end
+                            return pages[activeIndex + 1]?.url || "#";
+                        })(), children: jsx(Icon, { icon: "chevron-right" }) }), jsx(Link, { className: "dsa-pagination__link dsa-pagination__link--icon dsa-pagination__link--skip-forward", href: pages[pages.length - 1]?.url, children: jsx(Icon, { icon: "skip-forward" }) })] }))] }));
+});
+const PaginationContext = createContext(PaginationContextDefault);
+const Pagination = forwardRef((props, ref) => {
+    const Component = useContext(PaginationContext);
+    return jsx(Component, { ...props, ref: ref });
+});
+Pagination.displayName = "Pagination";
+
+export { Pagination, PaginationContext, PaginationContextDefault };

package/dist/components/pagination/pagination.css

@@ -0,0 +1,30 @@
+.dsa-pagination {
+  display: flex;
+  gap: var(--dsa-pagination--gap, var(--ks-spacing-stack-xs));
+}
+.dsa-pagination__link {
+  --g-link--background: transparent;
+  --g-link--background-hover: var(--ks-color-fg-alpha-8);
+  --g-link--color: var(--ks-text-color-interface-interactive);
+  --g-link--color-hover: var(--ks-text-color-interface-interactive);
+  --g-link--border-radius: var(--ks-border-radius-control);
+  font: var(--ks-font-interface-s);
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3em;
+  padding: 0.5em;
+  aspect-ratio: 1;
+}
+.dsa-pagination__link--icon .icon {
+  width: 1.25em;
+  height: 1.25em;
+  fill: var(--g-link--color);
+}
+.dsa-pagination__link--active {
+  --g-link--background: var(--ks-background-color-primary-interactive);
+  --g-link--background-hover: var(--ks-background-color-primary-interactive-hover);
+  --g-link--color: var(--dsa-text-color-on-primary);
+  --g-link--color-hover: var(--dsa-text-color-on-primary);
+}

package/dist/components/pagination/pagination.schema.dereffed.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/pagination.schema.json",
+  "title": "Pagination",
+  "type": "object",
+  "properties": {
+    "pages": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "url": {
+            "type": "string",
+            "description": "The URL to the page"
+          },
+          "active": {
+            "type": "boolean",
+            "description": "Indicates if the page is currently active",
+            "default": false
+          }
+        },
+        "required": [
+          "url"
+        ],
+        "additionalProperties": false
+      }
+    },
+    "type": {
+      "const": "pagination"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/pagination/pagination.schema.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/pagination.schema.json",
+  "title": "Pagination",
+  "type": "object",
+  "properties": {
+    "pages": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "url": {
+            "type": "string",
+            "description": "The URL to the page"
+          },
+          "active": {
+            "type": "boolean",
+            "description": "Indicates if the page is currently active",
+            "default": false
+          }
+        },
+        "required": ["url"]
+      }
+    }
+  },
+  "additionalProperties": false
+}