@pantheon-systems/pds-toolkit-react 1.0.0-dev.21 → 1.0.0-dev.211

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

@@ -0,0 +1,60 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './card-select-group.css';
+export interface CardOption {
+    /**
+     * Unique ID for the option
+     * @default ''
+     */
+    id?: string;
+    /**
+     * Option label
+     */
+    label: string | ReactNode;
+    /**
+     * Option description
+     */
+    description?: string | ReactNode;
+    /**
+     * Option value
+     */
+    value: string;
+}
+export interface CardSelectGroupProps extends Omit<ComponentPropsWithoutRef<'fieldset'>, 'onChange'> {
+    /**
+     * Optional initial selected option value
+     */
+    defaultValue?: string;
+    /**
+     * Unique ID for the card select group
+     */
+    id: string;
+    /**
+     * Label for the card select group
+     */
+    label: string;
+    /**
+     * Display of the component label. `hidden` visually hides the label but keeps it accessible to screen readers.
+     */
+    labelDisplay?: 'left' | 'center' | 'hidden';
+    /**
+     * Column layout of the cards at breakpoints medium and above.
+     */
+    layout?: 'auto' | 'twoAcross' | 'threeAcross';
+    /**
+     * Callback function that will return the updated value from the instance when it changes.
+     * Function should have the shape of: `(value) => { <do stuff here> } `.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Array of card options
+     */
+    options?: CardOption[];
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * CardSelectGroup UI component
+ */
+export declare const CardSelectGroup: ({ id, defaultValue, label, labelDisplay, layout, onChange, options, className, ...props }: CardSelectGroupProps) => React.JSX.Element;

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

@@ -0,0 +1,29 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { HeadingLevel } from '@libs/types/custom-types';
+import './links-card.css';
+/**
+ * Prop types for LinksCard
+ */
+interface LinksCardProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Heading level
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * 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/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 { HeadingLevel } 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?: HeadingLevel;
+    /**
+     * 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/footer/FooterHeading/FooterHeading.d.ts

@@ -0,0 +1,22 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './footer-heading.css';
+import type { HeadingLevel } from '@libs/types/custom-types';
+interface FooterHeadingProps {
+    /**
+     *  Heading level
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Heading text
+     */
+    headingText: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Footer Heading UI component
+ */
+export declare const FooterHeading: ({ headingLevel, headingText, className, ...props }: FooterHeadingProps & ComponentPropsWithoutRef<HeadingLevel>) => 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 { HeadingLevel } from '@libs/types/custom-types';
+interface FooterLinksProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     *  Heading level
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * 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,26 @@
+import React, { ComponentPropsWithoutRef } 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?: React.ReactNode;
+    /**
+     * 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, 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;

package/_dist/components/inputs/Checkbox/Checkbox.d.ts

@@ -0,0 +1,96 @@
+import React, { ComponentPropsWithoutRef, ChangeEvent, FocusEvent, ReactNode } from 'react';
+import { ValidationStatus } from '../input-types';
+import './checkbox.css';
+/**
+ * Prop types for Checkbox
+ */
+export interface CheckboxProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Checked state of the input. Used to set the checked status of the input field when controlled. Cannot be used in conjunction with the `defaultChecked` prop.
+     */
+    checked?: boolean;
+    /**
+     * Default checked state. Setting this prop automatically makes the input uncontrolled. Cannot be used with the checked prop.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Is the field disabled?
+     */
+    disabled?: boolean;
+    /**
+     * The ID of the checkbox.
+     */
+    id: string;
+    /**
+     * Indeterminate state
+     */
+    indeterminate?: boolean;
+    /**
+     * Additional props for the `<input>` element.
+     */
+    inputProps?: ComponentPropsWithoutRef<'input'>;
+    /**
+     * Width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
+     */
+    inputWidth?: number;
+    /**
+     * Input label.
+     */
+    label: string;
+    /**
+     * Input message. Used to provide supplemental text. Will be displayed below the input field.
+     */
+    message?: string | ReactNode;
+    /**
+     * Name attribute of the checkbox.
+     */
+    name?: string;
+    /**
+     * Indent level of the checkbox. Visual styles for creating nested checkboxes. Styles are only applied when the checkbox is an ancestor of a div with the class `pds-checkbox-group`.
+     */
+    nestingLevel?: 0 | 1 | 2;
+    /**
+     * onBlur event handler
+     */
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * onChange event handler
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * onFocus event handler
+     */
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Is the field required?
+     */
+    required?: boolean;
+    /**
+     * Should the label be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Size of the label and checkbox. Defaults to 'M'.
+     */
+    size?: 'S' | 'M';
+    /**
+     * Validation message for the input field based on the validation status.
+     */
+    validationMessage?: string;
+    /**
+     * Validation status of the input field.
+     */
+    validationStatus?: ValidationStatus;
+    /**
+     * Value attribute of the checkbox.
+     */
+    value?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Checkbox UI component
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/_dist/components/inputs/CheckboxFieldset/CheckboxFieldset.d.ts

@@ -0,0 +1,60 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ValidationStatus } from '../input-types';
+import '../CheckboxGroup/checkbox-group.css';
+/**
+ * Prop types for CheckboxFieldset
+ */
+export interface CheckboxGroupWrapperProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Individual checkboxes to be rendered within the group.
+     */
+    children: React.ReactNode;
+    /**
+     * Is the field disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Additional props for the `<fieldset>` element.
+     */
+    fieldsetProps?: ComponentPropsWithoutRef<'fieldset'>;
+    /**
+     * The ID of the checkbox group.
+     */
+    id: string;
+    /**
+     * Width of the field. Accepts a number in pixels. Leave blank for width: 100%.
+     */
+    inputWidth?: number;
+    /**
+     * Field label. Will be rendered as the fieldset legend.
+     */
+    label: string;
+    /**
+     * Input message. Used to provide supplemental text. Will be displayed below the field.
+     */
+    message?: string | ReactNode;
+    /**
+     * Is the field required?
+     */
+    required?: boolean;
+    /**
+     * Should the label (legend) be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Validation message for the input field based on the validation status.
+     */
+    validationMessage?: string;
+    /**
+     * Validation status of the input field.
+     */
+    validationStatus?: ValidationStatus;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * CheckboxFieldset UI component
+ */
+export declare const CheckboxFieldset: ({ children, disabled, fieldsetProps, id, inputWidth, label, message, required, showLabel, validationMessage, validationStatus, className, ...props }: CheckboxGroupWrapperProps) => React.JSX.Element;

package/_dist/components/inputs/CheckboxGroup/CheckboxGroup.d.ts

@@ -0,0 +1,76 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ValidationStatus } from '../input-types';
+import './checkbox-group.css';
+export type CheckboxOption = {
+    checked?: boolean;
+    disabled?: boolean;
+    id?: string;
+    label: string;
+    name?: string;
+    value: string;
+};
+/**
+ * Prop types for CheckboxGroup
+ */
+export interface CheckboxGroupProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Is the field disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Additional props for the `<fieldset>` element.
+     */
+    fieldsetProps?: ComponentPropsWithoutRef<'fieldset'>;
+    /**
+     * The ID of the checkbox group.
+     */
+    id: string;
+    /**
+     * Width of the field. Accepts a number in pixels. Leave blank for width: 100%.
+     */
+    inputWidth?: number;
+    /**
+     * Field label. Will be rendered as the fieldset legend.
+     */
+    label: string;
+    /**
+     * Input message. Used to provide supplemental text. Will be displayed below the field.
+     */
+    message?: string | ReactNode;
+    /**
+     * onGroupBlur function. Called when all checkboxes have lost focus. Provides an array of checked values.
+     */
+    onGroupBlur?: (checkedOptions: string[]) => void;
+    /**
+     * onValueChange function. Called when the value of any checkbox changes. Provides an array of checked values.
+     */
+    onValueChange?: (updatedOptions: string[]) => void;
+    /**
+     * Array of checkbox options for group.
+     */
+    options: CheckboxOption[];
+    /**
+     * Is the field required?
+     */
+    required?: boolean;
+    /**
+     * Should the label (legend) be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Validation message for the input field based on the validation status.
+     */
+    validationMessage?: string;
+    /**
+     * Validation status of the input field.
+     */
+    validationStatus?: ValidationStatus;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * CheckboxGroup UI component
+ */
+export declare const CheckboxGroup: ({ disabled, fieldsetProps, id, inputWidth, label, message, onGroupBlur, onValueChange, options, required, showLabel, validationMessage, validationStatus, className, ...props }: CheckboxGroupProps) => React.JSX.Element;