@kickstartds/ds-agency-premium 1.6.70 → 1.6.71--canary.45.1758.0

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

@@ -0,0 +1,47 @@
+/// <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 {
+    ariaLabels?: {
+        /**
+         * Aria label for the previous page link
+         */
+        previousPage?: string;
+        /**
+         * Aria label for the next page link
+         */
+        nextPage?: string;
+        /**
+         * Aria label for the link to skip to the first page
+         */
+        skipToFirstPage?: string;
+        /**
+         * Aria label for the link to skip to the last page
+         */
+        skipToLastPage?: string;
+        /**
+         * Aria label for the link to go to a specific page (will be placed before the page number)
+         */
+        goToPage?: string;
+    };
+    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,52 @@
+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, ariaLabels }, ref) => {
+    return (jsxs("div", { className: "dsa-pagination", ref: ref, children: [pages.findIndex((page) => page.active) !== 0 && (jsxs(Fragment, { children: [jsx(Link, { "aria-label": ariaLabels.skipToFirstPage || "Skip to first page", 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, { "aria-label": ariaLabels.previousPage || "Go to previous page", 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" }) })] })), (() => {
+                const activeIndex = pages.findIndex((page) => page.active);
+                let lastRenderedIndex = -1;
+                const result = [];
+                pages.forEach((page, index) => {
+                    const isFirst = index === 0;
+                    const isLast = index === pages.length - 1;
+                    const isActive = page.active;
+                    const isBeforeActive = index === activeIndex - 1;
+                    const isAfterActive = index === activeIndex + 1;
+                    const shouldRender = isFirst || isLast || isActive || isBeforeActive || isAfterActive;
+                    if (!shouldRender) {
+                        if (index - lastRenderedIndex > 1 &&
+                            (result.length === 0 ||
+                                result[result.length - 1]?.type !== "div" ||
+                                result[result.length - 1]?.props?.className !==
+                                    "dsa-pagination__placeholder")) {
+                            result.push(jsx("div", { className: "dsa-pagination__placeholder", children: jsx("span", { children: "\u2026" }) }, `dsa-pagination__placeholder-${index}`));
+                        }
+                        return;
+                    }
+                    result.push(jsx(Link, { className: classnames("dsa-pagination__link", page.active && "dsa-pagination__link--active"), "aria-label": `${ariaLabels.goToPage} ${index + 1}` ||
+                            `Go to page ${index + 1}`, href: page.url, children: (index + 1).toString() }, index));
+                    lastRenderedIndex = index;
+                });
+                return result;
+            })(), 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", "aria-label": ariaLabels.nextPage || "Go to next page", 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, { "aria-label": ariaLabels.skipToLastPage || "Skip to last page", 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,66 @@
+.dsa-pagination {
+  --dsa-pagination--gap: var(--ks-spacing-stack-xs);
+  --dsa-pagination--background: transparent;
+  --dsa-pagination--background_hover: var(--ks-color-fg-alpha-8);
+  --dsa-pagination--color: var(--ks-text-color-interface-interactive);
+  --dsa-pagination--color_hover: var(--ks-text-color-interface-interactive);
+  --dsa-pagination--border-radius: var(--ks-border-radius-control);
+  --dsa-pagination--border: var(--ks-border-width-default) solid var(--ks-border-color-interface-interactive);
+  --dsa-pagination--width: 3.75em;
+  --dsa-pagination--font: var(--ks-font-interface-s);
+  --dsa-pagination--padding: 0.5em;
+  --dsa-pagination__icon--size: 1.25em;
+  --dsa-pagination--background_active: var(--ks-background-color-primary-interactive);
+  --dsa-pagination--background_active_hover: var(--ks-background-color-primary-interactive-hover);
+  --dsa-pagination--color_active: var(--dsa-text-color-on-primary);
+  --dsa-pagination--color_active_hover: var(--dsa-text-color-on-primary);
+}
+@media (min-width: 768px) {
+  .dsa-pagination {
+    --dsa-pagination--border: none;
+    --dsa-pagination--width: 3em;
+  }
+}
+
+.dsa-pagination {
+  display: flex;
+  gap: var(--dsa-pagination--gap, var(--ks-spacing-stack-xs));
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.dsa-pagination__link, .dsa-pagination__placeholder {
+  --g-link--background: var(--dsa-pagination--background, transparent);
+  --g-link--background-hover: var(--dsa-pagination--background_hover, var(--ks-color-fg-alpha-8));
+  --g-link--color: var(--dsa-pagination--color, var(--ks-text-color-interface-interactive));
+  --g-link--color-hover: var(--dsa-pagination--color_hover, var(--ks-text-color-interface-interactive));
+  --g-link--border-radius: var(--dsa-pagination--border-radius, var(--ks-border-radius-control));
+  border: var(--dsa-pagination--border, var(--ks-border-width-default) solid var(--ks-border-color-interface-interactive));
+  border-radius: var(--dsa-pagination--border-radius, var(--ks-border-radius-control));
+  width: var(--dsa-pagination--width, 4em);
+  font: var(--dsa-pagination--font, var(--ks-font-interface-s));
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--dsa-pagination--padding, 0.5em);
+  aspect-ratio: 1;
+}
+.dsa-pagination__link--icon .icon, .dsa-pagination__placeholder--icon .icon {
+  width: var(--dsa-pagination__icon--size, 1.25em);
+  height: var(--dsa-pagination__icon--size, 1.25em);
+}
+.dsa-pagination__link--active, .dsa-pagination__placeholder--active {
+  --g-link--background: var(--dsa-pagination--background_active, var(--ks-background-color-primary-interactive));
+  --g-link--background-hover: var(
+    --dsa-pagination--background_active,
+    var(--ks-background-color-primary-interactive-hover)
+  );
+  --g-link--color: var(--dsa-pagination--color_active, var(--dsa-text-color-on-primary));
+  --g-link--color-hover: var(--dsa-pagination--color_active_hover, var(--dsa-text-color-on-primary));
+}
+.dsa-pagination__placeholder {
+  line-height: 0.25;
+}
+.dsa-pagination__placeholder span {
+  transform: translateY(-0.15em);
+}

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

@@ -0,0 +1,64 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/pagination.schema.json",
+  "title": "Pagination",
+  "type": "object",
+  "properties": {
+    "ariaLabels": {
+      "type": "object",
+      "properties": {
+        "previousPage": {
+          "type": "string",
+          "description": "Aria label for the previous page link",
+          "default": "Go to previous page"
+        },
+        "nextPage": {
+          "type": "string",
+          "description": "Aria label for the next page link",
+          "default": "Go to next page"
+        },
+        "skipToFirstPage": {
+          "type": "string",
+          "description": "Aria label for the link to skip to the first page",
+          "default": "Skip to first page"
+        },
+        "skipToLastPage": {
+          "type": "string",
+          "description": "Aria label for the link to skip to the last page",
+          "default": "Skip to last page"
+        },
+        "goToPage": {
+          "type": "string",
+          "description": "Aria label for the link to go to a specific page (will be placed before the page number)",
+          "default": "Go to page"
+        }
+      },
+      "additionalProperties": false
+    },
+    "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,57 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/pagination.schema.json",
+  "title": "Pagination",
+  "type": "object",
+  "properties": {
+    "ariaLabels": {
+      "type": "object",
+      "properties": {
+        "previousPage": {
+          "type": "string",
+          "description": "Aria label for the previous page link",
+          "default": "Go to previous page"
+        },
+        "nextPage": {
+          "type": "string",
+          "description": "Aria label for the next page link",
+          "default": "Go to next page"
+        },
+        "skipToFirstPage": {
+          "type": "string",
+          "description": "Aria label for the link to skip to the first page",
+          "default": "Skip to first page"
+        },
+        "skipToLastPage": {
+          "type": "string",
+          "description": "Aria label for the link to skip to the last page",
+          "default": "Skip to last page"
+        },
+        "goToPage": {
+          "type": "string",
+          "description": "Aria label for the link to go to a specific page (will be placed before the page number)",
+          "default": "Go to page"
+        }
+      }
+    },
+    "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
+}