@pantheon-systems/pds-toolkit-react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/README.md

@@ -8,11 +8,11 @@ This toolkit provides assets for use within a React project and a Storybook inst
 
 ## Toolkit philosophy and scope
 
-The intent of this toolkit is to provide a React-based implementation of the Pantheon Design System (PDS) with a focus on semantics, accessibility, visual design, and user-interface design.
+The toolkit provides a React implementation of the Pantheon Design System (PDS) focused on semantics, accessibility, visual design, and user-interface design.
 
-This toolkit should not contain processes or mechanisms used for data manipulation, business logic, or similar. Therefore, processes such as form handling, routing, and language translation should be handled within the application that is consuming the toolkit.
+The toolkit does not include data manipulation, business logic, form handling, routing, or language translation. These concerns are handled by the consuming application.
 
-Each component will contain a documentation page within Storybook that provides usage notes, implementation instructions, and expected data structure for that particular component.
+Each component has a documentation page within Storybook that provides usage notes, implementation instructions, and expected data structure.
 
 ### Content within components
 

package/dist/components/Avatar/Avatar.d.ts

@@ -24,7 +24,7 @@ export interface AvatarProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Avatar size.
      */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    size?: 'xs' | 's' | 'm' | 'l';
     /**
      * Unique ID associated with the avatar. Can be workspace ID, user ID, email, etc.
      */

package/dist/components/ComparisonList/ComparisonList.d.ts

@@ -30,6 +30,10 @@ export interface ComparisonListProps extends ComponentPropsWithoutRef<'div'> {
      * Render the icon labels for screen readers.
      */
     renderTypeLabels?: boolean;
+    /**
+     * Whether to show the border on list items.
+     */
+    showBorder?: boolean;
     /**
      * Icon labels
      */
@@ -38,5 +42,5 @@ export interface ComparisonListProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * ComparisonList UI component
  */
-export declare const ComparisonList: ({ className, listItems, listLabel, moreLink, renderTypeLabels, typeLabels, ...props }: ComparisonListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ComparisonList: ({ className, listItems, listLabel, moreLink, renderTypeLabels, showBorder, typeLabels, ...props }: ComparisonListProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,58 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './drawer.css';
+export type DrawerPlacement = 'left' | 'right';
+export type DrawerSize = 's' | 'm' | 'l';
+export interface DrawerProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Aria label that describes the drawer. Will default to the title if not provided.
+     */
+    ariaLabel?: string;
+    /**
+     * Main content for the drawer.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Text for close button aria-label attribute.
+     */
+    closeButtonLabel?: string;
+    /**
+     * If true, clicking outside the drawer will not close it.
+     */
+    disableOutsideClick?: boolean;
+    /**
+     * Indicates if the built-in close button will be shown.
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Is the drawer open?
+     */
+    isOpen?: boolean;
+    /**
+     * Which edge of the screen the drawer slides in from.
+     */
+    placement?: DrawerPlacement;
+    /**
+     * Function to set the drawer open state.
+     */
+    setIsOpen?: (isOpen: boolean) => void;
+    /**
+     * Preset width of the drawer. Overridden by the `width` prop if provided.
+     */
+    size?: DrawerSize;
+    /**
+     * Text for the drawer title. Leave empty for no title.
+     */
+    title?: string;
+    /**
+     * Custom width for the drawer. Accepts any valid CSS value (e.g. '50vw', '800px', '40rem'). Overrides the `size` prop.
+     */
+    width?: string;
+}
+/**
+ * Drawer UI component
+ */
+export declare const Drawer: ({ ariaLabel, children, className, closeButtonLabel, disableOutsideClick, hasCloseButton, isOpen: isOpenProp, placement, setIsOpen: setIsOpenProp, size, title, width, ...props }: DrawerProps) => any;

package/dist/components/Modal/Modal.d.ts

@@ -42,7 +42,7 @@ export interface ModalProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * The width of the modal.
      */
-    size?: 'sm' | 'md' | 'lg' | 'xl';
+    size?: 's' | 'm' | 'l' | 'xl';
     /**
      * Text for modal title
      */

package/dist/components/SiteDashboardHeading/SiteDashboardHeading.d.ts

@@ -36,7 +36,7 @@ export interface SiteDashboardHeadingProps extends ComponentPropsWithoutRef<'div
     /**
      * Site plan level.
      */
-    sitePlanLevel?: SitePlanLevel;
+    sitePlanLevel?: SitePlanLevel | (string & {});
     /**
      * Site type.
      */

package/dist/components/StatusIndicator/StatusIndicator.d.ts

@@ -13,11 +13,11 @@ export interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Sets the size
      */
-    size?: 'sm' | 'md';
+    size?: 'xs' | 's';
     /**
      * Sets status type
      */
-    type: Exclude<StatusType, 'discovery'> | 'neutral' | 'new' | 'working';
+    type: StatusType | 'disabled' | 'neutral' | 'working';
 }
 /**
  * StatusIndicator UI component

package/dist/components/Table/Table.d.ts

@@ -13,7 +13,7 @@ interface TableProps extends ComponentPropsWithoutRef<'table'> {
      */
     headers?: Array<{
         sortable?: boolean;
-        title: string;
+        title: ReactNode;
     }>;
     /**
      * Table row data - array of rows, where each row is an array of cell values

package/dist/components/badges/Badge/Badge.d.ts

@@ -0,0 +1,28 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './badge.css';
+export type BadgeColor = 'aether' | 'aether-secondary' | 'amber' | 'amber-secondary' | 'apollo' | 'apollo-secondary' | 'critical' | 'critical-secondary' | 'discovery' | 'discovery-secondary' | 'gaia' | 'gaia-secondary' | 'hypnos' | 'hypnos-secondary' | 'indigo' | 'indigo-secondary' | 'info' | 'info-secondary' | 'iris' | 'iris-secondary' | 'lime' | 'lime-secondary' | 'mint' | 'mint-secondary' | 'orange' | 'orange-secondary' | 'rose' | 'rose-secondary' | 'sand' | 'sand-secondary' | 'silver' | 'silver-secondary' | 'sky' | 'sky-secondary' | 'slate' | 'slate-secondary' | 'stone' | 'stone-secondary' | 'success' | 'success-secondary' | 'teal' | 'teal-secondary' | 'warning' | 'warning-secondary' | 'feature';
+/**
+ * Badge component props
+ */
+export interface BadgeProps extends ComponentPropsWithoutRef<'span'> {
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Badge color
+     */
+    color: BadgeColor;
+    /**
+     * Badge text or content.
+     */
+    label: ReactNode;
+    /**
+     * Badge size
+     */
+    size?: 'xs' | 's' | 'm';
+}
+/**
+ * Badge UI component
+ */
+export declare const Badge: ({ className, color, label, size, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/CloseButton/CloseButton.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 import './close-button.css';
 /**
  * Prop types for CloseButton
@@ -13,15 +13,15 @@ export interface CloseButtonProps extends ComponentPropsWithoutRef<'button'> {
      */
     className?: string;
     /**
-     * Size of the icon.
+     * Click event callback function.
      */
-    iconSize?: 'm' | 'l' | 'xl';
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     /**
-     * Click event callback function.
+     * Size of the icon.
      */
-    onClick?: () => void;
+    size?: 'm' | 'l' | 'xl';
 }
 /**
  * CloseButton UI component
  */
-export declare const CloseButton: ({ ariaLabel, className, iconSize, onClick, ...props }: CloseButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CloseButton: ({ ariaLabel, className, onClick, size, ...props }: CloseButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/cards/Card/Card.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { GridGapOptions } from '../../../libs/types/layout-types';
 import './card.css';
-export type CardBackground = 'default' | 'mint-gradient' | 'sundown-gradient' | 'yellow-gradient' | 'transparent';
+export type CardBackground = 'default' | 'transparent';
 /**
  * Prop types for Card
  */

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

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactElement } from 'react';
-import { BadgeColor } from '../../../libs/types/custom-types';
+import { BadgeColor } from '../../badges/Badge/Badge';
 import './new-site-card.css';
 interface BadgeValueType {
     color: BadgeColor;

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

@@ -1,4 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
+import { HeadingLevelCommon } from '../../../libs/types/custom-types';
 import { ListItems } from '../../ComparisonList/ComparisonList';
 import './pricing-card.css';
 interface PrimaryCallToAction {
@@ -54,6 +55,10 @@ interface PricingCardProps extends ComponentPropsWithoutRef<'div'> {
      * Add corresponding `comparisonListId` to each planPricingData object.
      */
     hasComparisonList?: boolean;
+    /**
+     * Heading level for the plan name.
+     */
+    headingLevel?: HeadingLevelCommon;
     /**
      * Optional function to handle the change event of the select input. Only valid when multiple tiers of planPricingData are present.
      */
@@ -86,5 +91,5 @@ interface PricingCardProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * PricingCard UI component
  */
-export declare const PricingCard: ({ actionPrimary, actionSecondary, className, hasComparisonList, onTierChange, planDescription, planName, planPricingData, selectLabel, statusBadgeLabels, statusBadgeType, ...props }: PricingCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PricingCard: ({ actionPrimary, actionSecondary, className, hasComparisonList, headingLevel, onTierChange, planDescription, planName, planPricingData, selectLabel, statusBadgeLabels, statusBadgeType, ...props }: PricingCardProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,6 +2,10 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { ContainerWidth } from '../../../libs/types/custom-types';
 import './site-footer.css';
 interface SiteFooterProps extends ComponentPropsWithoutRef<'footer'> {
+    /**
+     * HTML element to render. Use 'footer' for standalone usage or 'div' when nested inside another footer landmark.
+     */
+    as?: 'footer' | 'div';
     /**
      * Footer content.
      */
@@ -26,5 +30,5 @@ interface SiteFooterProps extends ComponentPropsWithoutRef<'footer'> {
 /**
  * SiteFooter UI component
  */
-export declare const SiteFooter: ({ children, className, containerWidth, hasTopBorder, legalLinks, ...props }: SiteFooterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SiteFooter: ({ as: Element, children, className, containerWidth, hasTopBorder, legalLinks, ...props }: SiteFooterProps) => import("react/jsx-runtime").JSX.Element;
 export {};