@pantheon-systems/pds-toolkit-react 1.0.0-dev.208 → 1.0.0-dev.209

package/_dist/components/CTASlice/CTASlice.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { ContainerWidth, HeadingLevel } from '@libs/types/custom-types';
 import './../buttons/Button/button.css';
 import './cta-slice.css';
@@ -24,21 +24,13 @@ interface CTASliceProps extends ComponentPropsWithoutRef<'div'> {
      */
     leadText?: string;
     /**
-     * Primary link.
+     * Primary link content
      */
-    primaryLink: {
-        text: string;
-        url: string;
-        target: '_self' | '_blank';
-    };
+    primaryLinkContent: ReactNode;
     /**
-     * Optional secondary link
+     * Optional secondary link content
      */
-    secondaryLink?: {
-        text: string;
-        url: string;
-        target: '_self' | '_blank';
-    };
+    secondaryLinkContent?: ReactNode;
     /**
      * Additional class names
      */
@@ -47,5 +39,5 @@ interface CTASliceProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * CTA Slice UI component
  */
-export declare const CTASlice: ({ backgroundColor, containerWidth, headingLevel, headingText, leadText, primaryLink, secondaryLink, className, ...props }: CTASliceProps) => React.JSX.Element;
+export declare const CTASlice: ({ backgroundColor, containerWidth, headingLevel, headingText, leadText, primaryLinkContent, secondaryLinkContent, className, ...props }: CTASliceProps) => React.JSX.Element;
 export {};

package/_dist/components/Icon/Icon.d.ts

@@ -1,8 +1,6 @@
 import React from 'react';
 /**
- * @remarks To replace the PDSIcon in customPropTypes.js
- * when we refactor the dependent components to typescript.
- * If we use this now, storybook won't compile.
+ * PDS Icon type.
  */
 export type PDSIcon = keyof typeof svgData;
 /**
@@ -660,5 +658,5 @@ declare const svgData: {
         readonly width: "576";
     };
 };
-export declare const iconList: ("code" | "table" | "video" | "circle" | "angleDown" | "angleLeft" | "angleRight" | "angleUp" | "anglesLeft" | "anglesRight" | "arrowDownToLine" | "arrowLeft" | "arrowRight" | "asterisk" | "banBug" | "bars" | "barsFilter" | "billboard" | "bitbucket" | "bolt" | "book" | "books" | "bracketRight" | "broomWide" | "building" | "buildings" | "calendarDays" | "ccAmex" | "ccDiscover" | "ccGeneric" | "ccMC" | "ccVisa" | "chartSimple" | "cloud" | "cloudArrowUp" | "cloudPlus" | "codeBranch" | "codeMerge" | "caretDown" | "caretLeft" | "caretRight" | "caretUp" | "chartLine" | "chartNetwork" | "check" | "circleExclamation" | "circleCheck" | "circleInfo" | "circleMinus" | "circleMinusOutline" | "circleNotch" | "circlePlus" | "circlePlusOutline" | "circleQuestion" | "circleXmark" | "command" | "comment" | "copy" | "diamondExclamation" | "diamonds4" | "discourse" | "download" | "drupal" | "ellipsis" | "ellipsisVertical" | "emptySet" | "envelope" | "exclamation" | "externalLink" | "eye" | "eyeSlash" | "facebook" | "file" | "fileContract" | "fileCSV" | "fileDiff" | "fileExport" | "fileImport" | "fileLines" | "filePDF" | "folder" | "gear" | "github" | "gitlab" | "globe" | "globeLine" | "graduationCap" | "grid" | "gripDots" | "gripDotsVertical" | "heart" | "house" | "idCard" | "instagram" | "keySkeleton" | "laptopCode" | "leaf" | "lifeRing" | "linkedin" | "linkSimple" | "linkSimpleSlash" | "magnifyingGlass" | "messages" | "minus" | "moon" | "paperclip" | "paperPlane" | "pen" | "phone" | "play" | "plus" | "quotesLeft" | "quotesRight" | "rectangleList" | "rocketLaunch" | "robot" | "rotate" | "rotateClock" | "rss" | "save" | "server" | "shield" | "shovel" | "siren" | "sitemap" | "slack" | "slashForward" | "slidersSimple" | "snowflake" | "sparkles" | "squareCheck" | "squareCode" | "squareMinus" | "squarePen" | "squareQuestion" | "squareTerminal" | "star" | "sun" | "terminal" | "threads" | "thumbsDown" | "thumbsUp" | "trash" | "triangleExclamation" | "twitter" | "upload" | "user" | "userGear" | "userPlus" | "users" | "wavePulse" | "windowRestore" | "wordpress" | "wrench" | "xmark" | "xmarkLarge" | "xTwitter" | "youtube")[];
+export declare const iconList: ("angleDown" | "angleLeft" | "angleRight" | "angleUp" | "anglesLeft" | "anglesRight" | "arrowDownToLine" | "arrowLeft" | "arrowRight" | "asterisk" | "banBug" | "bars" | "barsFilter" | "billboard" | "bitbucket" | "bolt" | "book" | "books" | "bracketRight" | "broomWide" | "building" | "buildings" | "calendarDays" | "ccAmex" | "ccDiscover" | "ccGeneric" | "ccMC" | "ccVisa" | "chartSimple" | "cloud" | "cloudArrowUp" | "cloudPlus" | "code" | "codeBranch" | "codeMerge" | "caretDown" | "caretLeft" | "caretRight" | "caretUp" | "chartLine" | "chartNetwork" | "check" | "circle" | "circleExclamation" | "circleCheck" | "circleInfo" | "circleMinus" | "circleMinusOutline" | "circleNotch" | "circlePlus" | "circlePlusOutline" | "circleQuestion" | "circleXmark" | "command" | "comment" | "copy" | "diamondExclamation" | "diamonds4" | "discourse" | "download" | "drupal" | "ellipsis" | "ellipsisVertical" | "emptySet" | "envelope" | "exclamation" | "externalLink" | "eye" | "eyeSlash" | "facebook" | "file" | "fileContract" | "fileCSV" | "fileDiff" | "fileExport" | "fileImport" | "fileLines" | "filePDF" | "folder" | "gear" | "github" | "gitlab" | "globe" | "globeLine" | "graduationCap" | "grid" | "gripDots" | "gripDotsVertical" | "heart" | "house" | "idCard" | "instagram" | "keySkeleton" | "laptopCode" | "leaf" | "lifeRing" | "linkedin" | "linkSimple" | "linkSimpleSlash" | "magnifyingGlass" | "messages" | "minus" | "moon" | "paperclip" | "paperPlane" | "pen" | "phone" | "play" | "plus" | "quotesLeft" | "quotesRight" | "rectangleList" | "rocketLaunch" | "robot" | "rotate" | "rotateClock" | "rss" | "save" | "server" | "shield" | "shovel" | "siren" | "sitemap" | "slack" | "slashForward" | "slidersSimple" | "snowflake" | "sparkles" | "squareCheck" | "squareCode" | "squareMinus" | "squarePen" | "squareQuestion" | "squareTerminal" | "star" | "sun" | "table" | "terminal" | "threads" | "thumbsDown" | "thumbsUp" | "trash" | "triangleExclamation" | "twitter" | "upload" | "user" | "userGear" | "userPlus" | "users" | "video" | "wavePulse" | "windowRestore" | "wordpress" | "wrench" | "xmark" | "xmarkLarge" | "xTwitter" | "youtube")[];
 export {};

package/_dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,54 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { HeadingLevel } from '@libs/types/custom-types';
+import './pagination.css';
+/**
+ * Prop types for Pagination
+ */
+export interface PaginationProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Minimum number of page buttons to buffer on either side of the current page.
+     * This will change the number of page buttons shown in total.
+     */
+    bufferCount?: number;
+    /**
+     * Current page number.
+     */
+    currentPage: number;
+    /**
+     *  Heading level. Defaults to `h2`.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Heading text for the pagination component. Will only be accessible to screen readers.
+     */
+    headingText?: string;
+    /**
+     * Number of items per page.
+     */
+    itemsPerPage?: number;
+    /**
+     * Label strings for previous and next buttons.
+     */
+    labelStrings?: {
+        previous: string;
+        next: string;
+    };
+    /**
+     * Callback to handle page change.
+     * Use a state hook to update the current page in a parent component.
+     * For example: `onPageChange={(page) => setCurrentPage(page)}`
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Total number of items to paginate.
+     */
+    totalItemCount: number;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+/**
+ * Pagination UI component
+ */
+export declare const Pagination: ({ bufferCount, currentPage, headingLevel, headingText, itemsPerPage, labelStrings, onPageChange, totalItemCount, className, ...props }: PaginationProps) => React.JSX.Element;

package/_dist/components/Pagination/usePagination.d.ts

@@ -0,0 +1,7 @@
+export declare const ELLIPSIS = "...";
+export declare const usePagination: ({ bufferCount, currentPage, itemsPerPage, totalItemCount, }: {
+    bufferCount?: number;
+    currentPage: any;
+    itemsPerPage: any;
+    totalItemCount: any;
+}) => (string | number)[];

package/_dist/components/buttons/MenuButton/MenuButton.d.ts

@@ -5,7 +5,7 @@ import './menu-button.css';
 /**
  * Prop types for MenuButton
  */
-interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
+export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
     /**
      * Is the button disabled?
      */
@@ -71,4 +71,3 @@ interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
  * MenuButton UI component
  */
 export declare const MenuButton: ({ disabled, displayType, iconName, id, isSplitButton, label, menuItems, menuPosition, onClick, size, testId, undefinedLabel, variant, withinNavbar, className, ...props }: MenuButtonProps) => React.JSX.Element;
-export {};

package/_dist/css/component-css/pds-card-select-group.css

@@ -1 +1 @@
-.pds-card-select-group{border:none;color:var(--pds-color-foreground-default);font-family:Poppins,sans-serif;margin-inline:0;padding:0;padding-block-start:.328rem}.pds-card-select-group__legend{display:block;font-size:1.2rem;font-weight:600;margin-block-end:.8rem;text-align:left}.pds-card-select-group__legend--center{text-align:center}.pds-card-select-group__option input[type=radio]{appearance:none}.pds-card-select-group__option-label{background-color:var(--pds-color-background-default);border-radius:.375rem;box-shadow:var(--pds-elevation-raised);box-sizing:border-box;column-gap:.8rem;display:inline-flex;font-size:1.2rem;font-weight:600;height:100%;margin-block-end:0;padding:1rem;width:100%}.pds-card-select-group__option-label--selected,.pds-card-select-group__option-label:hover{background-color:var(--pds-color-interactive-background-hover);cursor:pointer}.pds-card-select-group__option-icon{color:var(--pds-color-border-input)}.pds-card-select-group__option-icon--selected{color:var(--pds-color-semantic-success-foreground)}.pds-card-select-group__option-description{color:var(--pds-color-foreground-default-secondary);font-size:1rem;font-weight:400;line-height:140%;margin-block-start:.328rem}
+.pds-card-select-group{border:none;color:var(--pds-color-foreground-default);font-family:Poppins,sans-serif;margin-inline:0;padding:0;padding-block-start:.328rem}.pds-card-select-group__legend{display:block;font-size:1.2rem;font-weight:600;margin-block-end:.8rem;text-align:left}.pds-card-select-group__legend--center{text-align:center}.pds-card-select-group__option input[type=radio]{appearance:none}.pds-card-select-group__option-label{background-color:var(--pds-color-background-default);border-radius:.375rem;box-shadow:var(--pds-elevation-card-default);box-sizing:border-box;column-gap:.8rem;display:inline-flex;font-size:1.2rem;font-weight:600;height:100%;margin-block-end:0;padding:1rem;width:100%}.pds-card-select-group__option-label--selected,.pds-card-select-group__option-label:hover{background-color:var(--pds-color-interactive-background-hover);cursor:pointer}.pds-card-select-group__option-icon{color:var(--pds-color-border-input)}.pds-card-select-group__option-icon--selected{color:var(--pds-color-semantic-success-foreground)}.pds-card-select-group__option-description{color:var(--pds-color-foreground-default-secondary);font-size:1rem;font-weight:400;line-height:140%;margin-block-start:.328rem}

package/_dist/css/component-css/pds-card.css

@@ -1 +1 @@
-.pds-card{background-color:var(--pds-color-background-default);border-radius:.375rem;box-shadow:var(--pds-elevation-raised);color:var(--pds-color-foreground-default);display:flex;flex-direction:column;min-height:10rem}.pds-card__image{border-radius:.375rem .375rem 0 0;display:block;overflow:hidden}.pds-card__image img{display:block;width:100%}.pds-card__main{flex-grow:1;padding:1.25rem 1.563rem}.pds-card--transparent{background-color:transparent}.pds-card--pad-narrow .pds-card__main{padding:1rem}.pds-card--pad-wide .pds-card__main{padding:1.563rem 1.953rem}
+.pds-card{background-color:var(--pds-color-background-default);border-radius:.375rem;box-shadow:var(--pds-elevation-card-default);color:var(--pds-color-foreground-default);display:flex;flex-direction:column;min-height:8rem}.pds-card__image{border-radius:.375rem .375rem 0 0;display:block;overflow:hidden}.pds-card__image img{display:block;width:100%}.pds-card__main{flex-grow:1;padding:1.25rem 1.563rem}.pds-card--transparent{background-color:transparent}.pds-card--pad-narrow .pds-card__main{padding:1rem}.pds-card--pad-wide .pds-card__main{padding:1.563rem 1.953rem}