@pantheon-systems/pds-toolkit-react 2.0.0-alpha.27 → 2.0.0-alpha.29

package/dist/index.source.d.ts

@@ -28,7 +28,6 @@ export * from './components/charts/LineChart/LineChart';
 export * from './components/charts/shared/types';
 export * from './components/CodeBlock/CodeBlock';
 export * from './components/ComparisonList/ComparisonList';
-export * from './components/CTASlice/CTASlice';
 export * from './components/DashboardStat/DashboardStat';
 export * from './components/Dropdown/Dropdown';
 export * from './components/empty-states/CompactEmptyState/CompactEmptyState';
@@ -36,9 +35,6 @@ export * from './components/empty-states/HorizontalEmptyState/HorizontalEmptySta
 export * from './components/empty-states/VerticalEmptyState/VerticalEmptyState';
 export * from './components/FileDiff/FileDiff';
 export * from './components/FlowSteps/FlowSteps';
-export * from './components/footer/FooterHeading/FooterHeading';
-export * from './components/footer/FooterLinks/FooterLinks';
-export * from './components/footer/SiteFooter/SiteFooter';
 export * from './components/icons/Icon/Icon';
 export * from './components/icons/PaymentIcon/PaymentIcon';
 export * from './components/icons/PlatformIcon/PlatformIcon';
@@ -100,9 +96,8 @@ export * from './components/PantheonLogo/PantheonLogo';
 export * from './components/Popover/Popover';
 export * from './components/progress-indicators/ProgressBar/ProgressBar';
 export * from './components/progress-indicators/ProgressRing/ProgressRing';
-export * from './components/PullQuote/PullQuote';
 export * from './components/SiteDashboardHeading/SiteDashboardHeading';
-export * from './components/SocialLinks/SocialLinks';
+export * from './components/SiteFooter/SiteFooter';
 export * from './components/SortableList/SortableList';
 export * from './components/SortableList/SortableListHeader';
 export * from './components/SortableList/SortableRow';
@@ -116,9 +111,6 @@ export * from './components/TableOfContents/TableOfContents';
 export * from './components/Tabs/Tabs';
 export * from './components/Tag/Tag';
 export * from './components/ThemeSwitcher/ThemeSwitcher';
-export * from './components/tiles/AvatarTileList/AvatarTileList';
-export * from './components/tiles/Tile/Tile';
-export * from './components/tiles/TileGrid/TileGrid';
 export * from './components/Tooltip/Tooltip';
 export * from './components/UtilityBar/UtilityBar';
 export * from './libs/components/SiteOptionDisplay/SiteOptionDisplay';

package/dist/libs/types/navigation-types.d.ts

@@ -4,6 +4,10 @@ export type NavigationItem = {
      * A boolean indicating whether the item is the active item.
      */
     isActive?: boolean | null;
+    /**
+     * Renders a visual separator instead of a navigation item. When true, all other fields are ignored.
+     */
+    isSeparator?: boolean;
     /**
      * Link content — a fully-formed link element using the router of your choice. If a string is provided instead, the item will be rendered as a link that navigates to the first child item.
      */
@@ -18,6 +22,10 @@ export type FlattenedNavigationItem = {
      * A boolean indicating whether the item is the active item.
      */
     isActive?: boolean | null;
+    /**
+     * Renders a visual separator instead of a navigation item.
+     */
+    isSeparator?: boolean;
     /**
      * Nesting level of the item.
      */

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@pantheon-systems/pds-toolkit-react",
 	"technology": "React",
-	"version": "2.0.0-alpha.27",
+	"version": "2.0.0-alpha.29",
 	"description": "PDS toolkit built using the React framework",
 	"publishConfig": {
 		"access": "public",
@@ -101,7 +101,7 @@
 		"@babel/preset-typescript": "^7.28.5",
 		"@csstools/postcss-design-tokens": "^2.0.4",
 		"@csstools/postcss-global-data": "^1.0.3",
-		"@playwright/test": "1.56.1",
+		"@playwright/test": "^1.60.0",
 		"@storybook/addon-a11y": "^10.4.0",
 		"@storybook/addon-docs": "^10.4.0",
 		"@storybook/addon-links": "^10.4.0",
@@ -163,11 +163,11 @@
 		"@dnd-kit/utilities": "^3.2.2",
 		"@floating-ui/react": "^0.24.3",
 		"@floating-ui/react-dom": "~1.3.0",
-		"@pantheon-systems/pds-design-tokens": "^2.0.0-alpha.41",
+		"@pantheon-systems/pds-design-tokens": "^2.0.0-alpha.43",
 		"@reactuses/core": "^5.0.15",
 		"date-fns": "^4.1.0",
 		"downshift": "^9.3.2",
-		"express": "^4.22.2",
+		"express": "^5.0.0",
 		"express-rate-limit": "^8.5.2",
 		"focus-trap-react": "^10.2.1",
 		"hash-sum": "^2.0.0",

package/dist/components/CTASlice/CTASlice.d.ts

@@ -1,43 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { ContainerWidth, HeadingLevel } from '../../libs/types/custom-types';
-import './../buttons/Button/button.css';
-import './cta-slice.css';
-interface CTASliceProps extends ComponentPropsWithoutRef<'div'> {
-    /**
-     * Background color of slice
-     */
-    backgroundColor?: 'default' | 'secondary';
-    /**
-     * Additional class names
-     */
-    className?: string;
-    /**
-     * PDS container width.
-     */
-    containerWidth?: ContainerWidth;
-    /**
-     *  Heading level
-     */
-    headingLevel?: HeadingLevel;
-    /**
-     * Heading text
-     */
-    headingText: string;
-    /**
-     * Further explain block
-     */
-    leadText?: string;
-    /**
-     * Primary link content
-     */
-    primaryLinkContent: ReactNode;
-    /**
-     * Optional secondary link content
-     */
-    secondaryLinkContent?: ReactNode;
-}
-/**
- * CTA Slice UI component
- */
-export declare const CTASlice: ({ backgroundColor, className, containerWidth, headingLevel, headingText, leadText, primaryLinkContent, secondaryLinkContent, ...props }: CTASliceProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/PullQuote/PullQuote.d.ts

@@ -1,34 +0,0 @@
-import { ComponentPropsWithoutRef } from 'react';
-import './pull-quote.css';
-interface Attribution {
-    name: string;
-    org: string;
-    title: string;
-}
-interface PullQuoteProps extends ComponentPropsWithoutRef<'div'> {
-    /**
-     * Attribution for the quote
-     */
-    attribution?: Attribution;
-    /**
-     * Additional class names
-     */
-    className?: string;
-    /**
-     * Image src. For stand-alone layout only, will not render for inline layout.
-     */
-    image?: string;
-    /**
-     * The layout type for the pull quote
-     */
-    layoutType?: 'stand-alone' | 'inline';
-    /**
-     * The quote text
-     */
-    quote: string;
-}
-/**
- * PullQuote UI component
- */
-export declare const PullQuote: ({ attribution, className, image, layoutType, quote, ...props }: PullQuoteProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/SocialLinks/SocialLinks.d.ts

@@ -1,23 +0,0 @@
-import { ComponentPropsWithoutRef } from 'react';
-import { PDSIcon } from '../icons/Icon/Icon';
-import './social-links.css';
-interface SocialLinksProps extends ComponentPropsWithoutRef<'ul'> {
-    /**
-     * Additional class names
-     */
-    className?: string;
-    /**
-     * Array of social media links
-     */
-    linkItems?: (keyof typeof socialData)[];
-}
-declare const socialData: Record<string, {
-    icon: PDSIcon;
-    label: string;
-    url: string;
-}>;
-/**
- * SocialLinks UI component
- */
-export declare const SocialLinks: ({ className, linkItems, ...props }: SocialLinksProps) => import("react/jsx-runtime").JSX.Element;
-export {};

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

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

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

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

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

@@ -1 +0,0 @@
-export declare const docsFooterContent: import("react/jsx-runtime").JSX.Element;

package/dist/components/tiles/AvatarTileList/AvatarTileList.d.ts

@@ -1,28 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import '../tiles-common.css';
-import './avatar-tile-list.css';
-export type AvatarTileListItem = {
-    alt?: string;
-    image?: string;
-    linkContent?: ReactNode;
-    name?: string;
-    org?: string;
-    title?: string;
-};
-/**
- * Prop types for AvatarTileList
- */
-export interface AvatarTileListProps extends ComponentPropsWithoutRef<'div'> {
-    /**
-     * Additional class names
-     */
-    className?: string;
-    /**
-     * List of items for each tile.
-     */
-    listItems: AvatarTileListItem[];
-}
-/**
- * AvatarTileList UI component
- */
-export declare const AvatarTileList: ({ className, listItems, ...props }: AvatarTileListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/tiles/Tile/Tile.d.ts

@@ -1,42 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { HeadingLevelCommon } from '../../../libs/types/custom-types';
-import './../tiles-common.css';
-import './tile.css';
-export type TileDisplayType = 'border' | 'clean' | 'clean-static';
-/**
- * Prop types for Tile
- */
-export interface TileProps extends ComponentPropsWithoutRef<'div'> {
-    /**
-     * Additional class names
-     */
-    className?: string;
-    /**
-     * Display type.
-     */
-    displayType?: TileDisplayType;
-    /**
-     *  Heading level or `span`.
-     */
-    headingLevel?: HeadingLevelCommon;
-    /**
-     * Heading text.
-     */
-    headingText?: string;
-    /**
-     * Image source.
-     */
-    imageSrc?: string;
-    /**
-     * A link element using the router of your choice.
-     */
-    linkContent?: ReactNode;
-    /**
-     * Summary paragraph.
-     */
-    summary?: string;
-}
-/**
- * Tile UI component
- */
-export declare const Tile: ({ className, displayType, headingLevel, headingText, imageSrc, linkContent, summary, ...props }: TileProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/tiles/TileGrid/TileGrid.d.ts

@@ -1,29 +0,0 @@
-import { ComponentPropsWithoutRef } from 'react';
-import { HeadingLevelCommon } from '../../../libs/types/custom-types';
-import { TileDisplayType, TileProps } from '../../tiles/Tile/Tile';
-import './../tiles-common.css';
-/**
- * Prop types for TileGrid
- */
-export interface TileGridProps extends ComponentPropsWithoutRef<'div'> {
-    /**
-     * Additional class names
-     */
-    className?: string;
-    /**
-     * Display type.
-     */
-    displayType?: TileDisplayType;
-    /**
-     *  Heading level or `span`. All tiles in the grid will use this heading level.
-     */
-    headingLevel?: HeadingLevelCommon;
-    /**
-     * Array of Tiles.
-     */
-    tiles: TileProps[];
-}
-/**
- * TileGrid UI component
- */
-export declare const TileGrid: ({ className, displayType, headingLevel, tiles, ...props }: TileGridProps) => import("react/jsx-runtime").JSX.Element;

package/dist/css/component-css/pds-avatar-tile-list.css

@@ -1 +0,0 @@
-.pds-avatar-tile-list a{cursor:pointer;text-decoration:none}.pds-tile-list__image{margin-block-end:var(--pds-spacing-m)}.pds-tile-list__image--avatar img{border-radius:50%;height:auto;width:11rem}.pds-tile-list__name{color:var(--pds-color-fg-default);font-size:var(--pds-typography-size-xl);font-weight:var(--pds-typography-fw-bold)}.pds-tile-list__title{color:var(--pds-color-fg-default-secondary);font-size:var(--pds-typography-size-m);font-weight:var(--pds-typography-fw-semibold);margin-block-start:var(--pds-spacing-2xs)}.pds-tile-list__org{color:var(--pds-color-fg-default);font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-regular);margin-block-start:var(--pds-spacing-4xs)}.pds-tile-list__item:focus-visible{outline-width:var(--pds-border-width-outline)}

package/dist/css/component-css/pds-cta-slice.css

@@ -1 +0,0 @@
-.pds-cta-slice{background-color:var(--pds-color-bg-default)}.pds-cta-slice--secondary{background-color:var(--pds-color-bg-default-secondary)}.pds-cta-slice .pds-container{align-items:center;display:flex;flex-direction:column;justify-content:center;padding-block:var(--pds-spacing-3xl);text-align:center}@media (min-width:768px){.pds-cta-slice .pds-container{padding-block:var(--pds-spacing-4xl);padding-inline:var(--pds-spacing-4xl)}}@media (min-width:1280px){.pds-cta-slice .pds-container{padding-block:var(--pds-spacing-6xl);padding-inline:var(--pds-spacing-5xl)}}.pds-cta-slice__heading{color:var(--pds-color-fg-default);display:block;font-weight:var(--pds-typography-fw-bold);margin-block-end:0}.pds-cta-slice__lead-text{color:var(--pds-color-fg-default-secondary);margin-block-end:0;margin-block-start:var(--pds-spacing-xl)}.pds-cta-slice__links{margin-block-start:var(--pds-spacing-2xl)}

package/dist/css/component-css/pds-footer-heading.css

@@ -1 +0,0 @@
-.pds-footer-heading{color:var(--pds-color-fg-default);font-weight:var(--pds-typography-fw-semibold);line-height:var(--pds-typography-lh-s);margin-block-end:var(--pds-spacing-l);margin-block-start:0}

package/dist/css/component-css/pds-footer-links.css

@@ -1 +0,0 @@
-.pds-footer-links{color:var(--pds-color-fg-default);font-family:var(--pds-typography-ff-default)}.pds-footer-links__list{display:flex;flex-direction:column;font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-regular);list-style-type:none;margin:0;padding:0;row-gap:var(--pds-spacing-m)}.pds-footer-links__item a{color:var(--pds-color-fg-default);text-decoration:none}.pds-footer-links__item a:hover{color:var(--pds-color-interactive-ui-hover);text-decoration:underline}

package/dist/css/component-css/pds-pull-quote.css

@@ -1 +0,0 @@
-.pds-pull-quote{display:flex;flex-direction:column;gap:var(--pds-spacing-xl);padding-block:var(--pds-spacing-3xl) calc(var(--pds-spacing-3xl) + 1rem)}.pds-pull-quote__image img{height:auto;max-height:6rem;max-width:18rem;width:auto}.pds-pull-quote__quote-wrapper{column-gap:var(--pds-spacing-xl);display:flex;margin-inline:auto;width:92%}.pds-pull-quote--stand-alone{text-align:center}.pds-pull-quote__icon{color:var(--pds-color-brand-secondary-default)}.pds-pull-quote__text-wrapper{color:var(--pds-color-fg-default);display:flex;flex-direction:column;row-gap:var(--pds-spacing-xl)}.pds-pull-quote__attribution{font-family:var(--pds-typography-ff-default);font-size:var(--pds-typography-size-m);font-weight:var(--pds-typography-fw-regular);text-transform:uppercase}.pds-pull-quote__name{font-weight:var(--pds-typography-fw-semibold)}.pds-pull-quote--inline .pds-pull-quote__icon--after{display:none}@media (max-width:767px){.pds-pull-quote{padding-block:var(--pds-spacing-xl) calc(var(--pds-spacing-xl) + 1rem)}.pds-pull-quote__image img{display:none}.pds-pull-quote__quote-wrapper{flex-direction:column;width:100%}.pds-pull-quote__icon--after{display:none}.pds-pull-quote__icon{margin-block-end:var(--pds-spacing-s)}}

package/dist/css/component-css/pds-social-links.css

@@ -1 +0,0 @@
-.pds-social-links{column-gap:var(--pds-spacing-m);display:flex;list-style-type:none;margin:0;padding:0}.pds-social-links__item a{color:var(--pds-color-fg-default-secondary);display:flex}.pds-social-links__item a:hover{color:var(--pds-color-interactive-ui-hover)}.pds-social-links__item a:focus{outline-width:2px}

package/dist/css/component-css/pds-tile.css

@@ -1 +0,0 @@
-.pds-tile__image{margin-block-end:var(--pds-spacing-s)}.pds-tile__image img{height:auto;max-width:5rem}.pds-tile__summary p{color:var(--pds-color-fg-default-secondary);line-height:var(--pds-typography-lh-m);margin-block-end:0}.pds-tile__cta{margin-block-start:var(--pds-spacing-m)}.pds-tile__cta a:focus{outline:none}.pds-tile__cta a:before{border-radius:var(--pds-border-radius-container);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transition:var(--pds-animation-transition-button);z-index:1}.pds-tile__cta a:focus-visible:before{border:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);transition:var(--pds-animation-transition-button)}.dark-mode .pds-tile__image img{filter:grayscale(1) invert()}

package/dist/css/component-css/pds-tiles-common.css

@@ -1 +0,0 @@
-.pds-tile-grid,.pds-tile-list{display:grid;grid-row-gap:var(--pds-spacing-m)}@media (min-width:768px){.pds-tile-grid,.pds-tile-list{grid-column-gap:var(--pds-spacing-s);grid-row-gap:var(--pds-spacing-l);grid-template-columns:1fr 1px 1fr 1px 1fr}}@media (min-width:1280px){.pds-tile-grid,.pds-tile-list{grid-column-gap:var(--pds-spacing-l);grid-row-gap:var(--pds-spacing-2xl)}}@media (min-width:768px){.pds-tile-grid--two-column{grid-template-columns:1fr 1px 1fr}}.pds-tile,.pds-tile-list__item{align-items:center;background-color:var(--pds-color-bg-default);border-radius:var(--pds-border-radius-container);display:flex;flex-direction:column;padding:var(--pds-spacing-xl);position:relative;row-gap:var(--pds-spacing-3xs);text-align:center;transition:var(--pds-animation-transition-button);width:100%}@media (min-width:768px){.pds-tile,.pds-tile-list__item{padding:var(--pds-spacing-xl) var(--pds-spacing-m)}}@media (min-width:1280px){.pds-tile,.pds-tile-list__item{padding:var(--pds-spacing-xl)}}.pds-tile.pds-tile--clean:hover,a.pds-tile-list__item:hover{background-color:var(--pds-color-interactive-background-hover);text-decoration:none;transition:var(--pds-animation-transition-button)}.pds-tile.pds-tile--clean:hover .pds-cta-link__icon,a.pds-tile-list__item:hover .pds-cta-link__icon{color:var(--pds-color-interactive-ui-hover);left:var(--pds-spacing-s)}.pds-tile.pds-tile--border:active,.pds-tile.pds-tile--clean:active,a.pds-tile-list__item:active{background-color:var(--pds-color-interactive-background-active);transition:var(--pds-animation-transition-button)}.pds-tile--border{background-color:var(--pds-color-tile-background);box-shadow:var(--pds-elevation-raised)}.pds-tile.pds-tile--border:hover{box-shadow:var(--pds-elevation-overlay)}.pds-tile.pds-tile--border:hover .pds-cta-link__icon{color:var(--pds-color-interactive-ui-hover);left:var(--pds-spacing-s)}.pds-tile__separator{background-color:var(--pds-color-border-default);height:1px;margin:0 auto;width:65%}@media (min-width:768px){.pds-tile__separator{display:inline;height:80%;margin:auto 0;width:1px}}@media (min-width:1280px){.pds-tile__separator{height:70%}}.pds-tile__separator:last-child{display:none}@media (min-width:768px){.pds-tile__separator:nth-child(3n+3){display:none}}.pds-tile--border+.pds-tile__separator{background-color:var(--pds-color-bg-default)}.pds-tile__heading{color:var(--pds-color-fg-default);font-weight:var(--pds-typography-fw-bold);margin-block-end:var(--pds-spacing-xs)}.pds-tile__bodytext,.pds-tile__bodytext p{color:var(--pds-color-fg-default-secondary);line-height:var(--pds-typography-lh-m);margin-block-end:0}a.pds-tile__cta{color:var(--pds-color-brand-secondary-default);display:inline-flex;font-size:var(--pds-typography-size-m);font-weight:var(--pds-typography-fw-bold);gap:var(--pds-spacing-3xs);letter-spacing:var(--pds-typography-ls-s);line-height:var(--pds-typography-lh-s);margin-block-start:var(--pds-spacing-m);outline:none;text-decoration:none}.pds-tile__cta:focus-visible:before{border:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);transition:var(--pds-animation-transition-button)}.pds-tile__cta-icon{fill:var(--pds-color-brand-secondary-default);margin-inline-start:var(--pds-spacing-2xs);position:relative;top:.125rem}