@pantheon-systems/pds-toolkit-react 1.0.0-dev.99 → 1.0.0-dev.9999

package/_dist/components/cards/LinksCard/LinksCard.d.ts

@@ -0,0 +1,29 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { HeadingLevelCommon } from '@libs/types/custom-types';
+import './links-card.css';
+/**
+ * Prop types for LinksCard
+ */
+interface LinksCardProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Heading level
+     */
+    headingLevel?: HeadingLevelCommon;
+    /**
+     * Link Card heading
+     */
+    headingText: string;
+    /**
+     * Array of links
+     */
+    linkItems?: ReactNode[];
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Links Card UI component
+ */
+export declare const LinksCard: ({ linkItems, headingLevel, headingText, className, ...props }: LinksCardProps) => React.JSX.Element;
+export {};

package/_dist/components/cards/LinksCard/links-card-sample-data.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare const fiveItems: ReactNode[];

package/_dist/components/cards/NewSiteCard/NewSiteCard.d.ts

@@ -0,0 +1,57 @@
+import React, { ComponentPropsWithoutRef, ReactElement } from 'react';
+import { BadgeColor } from '@libs/types/custom-types';
+import './new-site-card.css';
+interface BadgeValueType {
+    label: string;
+    color: BadgeColor;
+}
+export declare const badgeTypes: {
+    [key: string]: BadgeValueType;
+};
+type IconType = 'drupal' | 'wordpress' | 'gatsby' | 'next' | 'import-custom' | 'next-drupal' | 'gatsby-wp' | 'next-wp';
+/**
+ * Prop types for NewSiteCard
+ */
+interface NewSiteCardProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Optional indicator badge type. Choose from only early-access at this time.
+     */
+    badge?: 'early-access';
+    /**
+     * Icon. Choose from only Platform Icons at this time.
+     */
+    icon?: IconType;
+    /**
+     * Text for screen readers when link opens in new window
+     */
+    newWindowString?: string;
+    /**
+     * Card title
+     */
+    title: string;
+    /**
+     * Card subtitle
+     */
+    subtitle?: string;
+    /**
+     * Card summary
+     */
+    summary?: string;
+    /**
+     * The primary link for the selection card.
+     */
+    selectionLink: ReactElement;
+    /**
+     * Array of supplemental links. Maximum of 2.
+     */
+    supplementalLinks?: ReactElement[];
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * NewSiteCard UI component
+ */
+export declare const NewSiteCard: ({ badge, icon, newWindowString, title, subtitle, summary, selectionLink, supplementalLinks, className, ...props }: NewSiteCardProps) => React.JSX.Element;
+export {};

package/_dist/components/cards/PaymentCard/PaymentCard.d.ts

@@ -0,0 +1,47 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './payment-card.css';
+/**
+ * Prop types for PaymentCard
+ */
+export interface PaymentCardProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * The type of payment icon to display.
+     */
+    cardType?: 'visa' | 'mastercard' | 'amex' | 'discover';
+    /**
+     * The last four digits of the card number.
+     */
+    cardNumber?: number;
+    /**
+     * The name of the cardholder.
+     */
+    cardholderName?: string;
+    /**
+     * Expiration date of the card in MM/YY format.
+     */
+    expDate?: string;
+    /**
+     * A string for the lower left corner.
+     */
+    cardUsage?: string;
+    /**
+     * Translation string for “view details”
+     */
+    detailsLabel?: string;
+    /**
+     * Function for when “view details” is clicked
+     */
+    detailsCallback?: () => void;
+    /**
+     * Function for when this card is selected
+     */
+    selectionCallback?: () => void;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * PaymentCard UI component
+ */
+export declare const PaymentCard: ({ cardType, cardNumber, cardholderName, expDate, cardUsage, detailsLabel, detailsCallback, selectionCallback, className, ...props }: PaymentCardProps) => React.JSX.Element;

package/_dist/components/cards/PricingCard/PricingCard.d.ts

@@ -0,0 +1,90 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { ListItems } from '@components/ComparisonList/ComparisonList';
+import './pricing-card.css';
+interface PrimaryCallToAction {
+    type?: 'button' | 'link';
+    variant?: 'primary' | 'secondary';
+    label?: string;
+    buttonAction?: () => void;
+    linkUrl?: string;
+    linkTarget?: string;
+    disabled?: boolean;
+}
+interface SecondaryCallToAction {
+    type?: 'button' | 'link';
+    label?: string;
+    buttonAction?: () => void;
+    linkUrl?: string;
+    linkTarget?: string;
+}
+interface PlanPricingData {
+    customActionLabel?: string;
+    label?: string;
+    pricePrefix?: string;
+    price?: string;
+    priceDetails?: string;
+    savingsBadgeLabel?: string;
+    savingsDetails?: string;
+    listLabel?: string;
+    listItems?: ListItems[];
+}
+interface StatusBadgeLabels {
+    currentPlan?: string;
+    mostPopular?: string;
+}
+interface PricingCardProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * The primary call to action.
+     */
+    actionPrimary?: PrimaryCallToAction;
+    /**
+     * An optional secondary call to action.
+     */
+    actionSecondary?: SecondaryCallToAction;
+    /**
+     * Has comparison list. Will be rendered below the card if true.
+     * Add corresponding `comparisonListId` to each planPricingData object.
+     */
+    hasComparisonList?: boolean;
+    /**
+     * Optional function to handle the change event of the select input. Only valid when multiple tiers of planPricingData are present.
+     */
+    onTierChange?: (value: any) => void;
+    /**
+     * A brief description of the plan.
+     */
+    planDescription?: string;
+    /**
+     * The name of the plan.
+     */
+    planName?: string;
+    /**
+     * Plan pricing data. An array of objects.
+     */
+    planPricingData: PlanPricingData[];
+    /**
+     * Label for the plan size select dropdown. Available to screen readers only. Provide translation string if needed.
+     */
+    selectLabel?: string;
+    /**
+     * Status badge labels. Provide translation strings if needed.
+     */
+    statusBadgeLabels: StatusBadgeLabels;
+    /**
+     * Status badge type. Leave empty for no badge. Only one badge of each type should be used in a group of Pricing Cards.
+     */
+    statusBadgeType?: 'currentPlan' | 'mostPopular';
+    /**
+     * Additional class names for the card item.
+     */
+    className?: string;
+    /**
+     * Additional class names for the card container.
+     */
+    containerClassName?: string;
+}
+/**
+ * PricingCard UI component
+ */
+export declare const PricingCard: ({ actionPrimary, actionSecondary, hasComparisonList, onTierChange, planDescription, planName, planPricingData, statusBadgeLabels, selectLabel, statusBadgeType, className, ...props }: PricingCardProps) => React.JSX.Element;
+export {};

package/_dist/components/cards/SiteCard/SiteCard.d.ts

@@ -0,0 +1,45 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { HeadingLevelCommon } from '@libs/types/custom-types';
+import { SiteStatus } from '@libs/types/custom-types';
+import './site-card.css';
+/**
+ * Prop types for SiteCard
+ */
+export interface SiteCardProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Translatable text for the "Go to" link.
+     */
+    gotoText?: string;
+    /**
+     * Heading level of the card title.
+     */
+    headingLevel?: HeadingLevelCommon;
+    /**
+     * Image URL for the site.
+     */
+    siteImage?: string;
+    /**
+     * Link to the site dashboard.
+     */
+    siteLink: ReactNode;
+    /**
+     * Name of the site.
+     */
+    siteName?: string;
+    /**
+     * Plan of the site.
+     */
+    sitePlan?: string;
+    /**
+     * Status of the site.
+     */
+    siteStatus?: SiteStatus;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * SiteCard UI component
+ */
+export declare const SiteCard: ({ gotoText, headingLevel, siteImage, siteLink, siteName, sitePlan, siteStatus, className, ...props }: SiteCardProps) => React.JSX.Element;

package/_dist/components/empty-states/CompactEmptyState/CompactEmptyState.d.ts

@@ -0,0 +1,37 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { PDSIcon } from '@components/icons/Icon/Icon';
+import { HeadingLevelCommon } from '@libs/types/custom-types';
+import './compact-empty-state.css';
+/**
+ * Prop types for CompactEmptyState
+ */
+export interface CompactEmptyStateProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * heading to explain the empty state.
+     */
+    heading: string;
+    /**
+     *  Heading level.
+     */
+    headingLevel?: HeadingLevelCommon;
+    /**
+     * Icon to display above the heading.
+     */
+    iconName: PDSIcon;
+    /**
+     * A link element using the router of your choice. Leave empty for no link.
+     */
+    linkContent?: ReactNode;
+    /**
+     * Message to display below the heading.
+     */
+    message?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * CompactEmptyState UI component
+ */
+export declare const CompactEmptyState: ({ iconName, linkContent, message, heading, headingLevel, className, ...props }: CompactEmptyStateProps) => React.JSX.Element;

package/_dist/components/empty-states/HorizontalEmptyState/HorizontalEmptyState.d.ts

@@ -0,0 +1,69 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { VideoEmbedProps } from '@components/VideoEmbed/VideoEmbed';
+import { HeadingLevel } from '@libs/types/custom-types';
+import './horizontal-empty-state.css';
+/**
+ * Prop types for HorizontalEmptyState
+ */
+export interface HorizontalEmptyStateProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Vertical alignment of the content.
+     */
+    alignment?: 'top' | 'center';
+    /**
+     * A call-to-action region.
+     * This should be a Button, ButtonLink, or two items wrapped in a `pds-button-group` div.
+     */
+    ctaRegion?: ReactNode;
+    /**
+     * Pantheon collage image to display next to the main content.
+     * Can be a string (image path/URL) or a React node (e.g., <Picture />).
+     * If a video is provided, this will be ignored.
+     */
+    image?: string | React.ReactNode;
+    /**
+     * Will this be rendered within a panel?
+     * If true, the image and heading will be scaled down to fit within the panel.
+     */
+    isWithinPanel?: boolean;
+    /**
+     * heading to explain the empty state.
+     */
+    heading: string;
+    /**
+     *  Heading level.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Message to display below the heading.
+     */
+    message?: string | ReactNode;
+    /**
+     * A video to display next to the main content.
+     *
+     * This is an object with the following properties:
+     * - `platform`: The video hosting platform, either 'youtube' or 'vimeo'.
+     * - `videoId`: The ID of the video to embed.
+     *
+     * If a video is provided, the image will be ignored.
+     */
+    video?: VideoEmbedProps;
+    /**
+     * Width of the image container (CSS value, e.g., '40%', '30%', '300px').
+     * Default is '40%'.
+     */
+    imageWidth?: string;
+    /**
+     * Margin left of the image container (CSS value, e.g., '0', '10px', '20%').
+     * Default is '0'.
+     */
+    imageMarginLeft?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * HorizontalEmptyState UI component
+ */
+export declare const HorizontalEmptyState: ({ alignment, ctaRegion, image, isWithinPanel, heading, headingLevel, message, video, imageWidth, imageMarginLeft, className, ...props }: HorizontalEmptyStateProps) => React.JSX.Element;

package/_dist/components/empty-states/VerticalEmptyState/VerticalEmptyState.d.ts

@@ -0,0 +1,47 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { HeadingLevel } from '@libs/types/custom-types';
+import './vertical-empty-state.css';
+/**
+ * Prop types for VerticalEmptyState
+ */
+export interface VerticalEmptyStateProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * A call-to-action region.
+     * This should be a Button, ButtonLink, or two items wrapped in a `pds-button-group` div.
+     */
+    ctaRegion?: ReactNode;
+    /**
+     * PDS illustration image to display above the heading.
+     * Should be a link to an SVG file, either from Brandfolder or local.
+     * See full documentation for details.
+     */
+    image?: string;
+    /**
+     * Height of the image (CSS value like '200px', '50%', etc.)
+     */
+    imageHeight?: string;
+    /**
+     * Width of the image (CSS value like '200px', '50%', etc.)
+     */
+    imageWidth?: string;
+    /**
+     * heading to explain the empty state.
+     */
+    heading: string;
+    /**
+     *  Heading level.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Message to display below the heading.
+     */
+    message?: string | ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * VerticalEmptyState UI component
+ */
+export declare const VerticalEmptyState: ({ ctaRegion, image, imageHeight, imageWidth, heading, headingLevel, message, className, ...props }: VerticalEmptyStateProps) => React.JSX.Element;

package/_dist/components/footer/FooterHeading/FooterHeading.d.ts

@@ -0,0 +1,22 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './footer-heading.css';
+import type { HeadingLevelCommon } from '@libs/types/custom-types';
+interface FooterHeadingProps {
+    /**
+     *  Heading level
+     */
+    headingLevel?: HeadingLevelCommon;
+    /**
+     * Heading text
+     */
+    headingText: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Footer Heading UI component
+ */
+export declare const FooterHeading: ({ headingLevel, headingText, className, ...props }: FooterHeadingProps & ComponentPropsWithoutRef<HeadingLevelCommon>) => React.JSX.Element;
+export {};

package/_dist/components/footer/FooterLinks/FooterLinks.d.ts

@@ -0,0 +1,26 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './footer-links.css';
+import type { HeadingLevelCommon } from '@libs/types/custom-types';
+interface FooterLinksProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     *  Heading level
+     */
+    headingLevel?: HeadingLevelCommon;
+    /**
+     * Heading text
+     */
+    headingText: string;
+    /**
+     * Array of links
+     */
+    linkItems?: ReactNode[];
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Footer Links UI component
+ */
+export declare const FooterLinks: ({ headingLevel, headingText, linkItems, className, ...props }: FooterLinksProps) => React.JSX.Element;
+export {};

package/_dist/components/footer/SiteFooter/SiteFooter.d.ts

@@ -0,0 +1,30 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ContainerWidth } from '@libs/types/custom-types';
+import './site-footer.css';
+interface SiteFooterProps extends ComponentPropsWithoutRef<'footer'> {
+    /**
+     * PDS container width.
+     */
+    containerWidth?: ContainerWidth;
+    /**
+     * Footer content.
+     */
+    children?: ReactNode;
+    /**
+     * Should the footer have a top border?
+     */
+    hasTopBorder?: boolean;
+    /**
+     * Legal policy links.
+     */
+    legalLinks?: Array<'privacy' | 'dataSubjectRequest' | 'cookiePolicy' | 'termsOfUse' | 'acceptableUse' | 'accessibilityStatement'>;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * SiteFooter UI component
+ */
+export declare const SiteFooter: ({ containerWidth, children, hasTopBorder, legalLinks, className, ...props }: SiteFooterProps) => React.JSX.Element;
+export {};

package/_dist/components/footer/SiteFooter/footer-content.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const docsFooterContent: React.JSX.Element;