@pantheon-systems/pds-toolkit-react 2.0.0-alpha.3 → 2.0.0-alpha.5

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/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/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 {};