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

package/README.md

@@ -1,7 +1,37 @@
 # pds-toolkit-react
 
-React Toolkit for the Pantheon Design System
+## React Toolkit for the Pantheon Design System
 
 This toolkit provides assets for use within a React project and a Storybook instance to preview the components.
 
 [Published Storybook](https://live-pds-toolkit-react.appa.pantheon.site/)
+
+## 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.
+
+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.
+
+Each component will contain a documentation page within Storybook that provides usage notes, implementation instructions, and expected data structure for that particular component.
+
+### Content within components
+
+Content should not live within components with a few exceptions — the Social Links component and the links in the legal section of the SiteFooter component. To maintain consistency between all of our digital properties, these links will originate from the design system.
+
+## Implementation instructions
+
+The toolkit consists of a global stylesheet and React components. Both are required for the toolkit to function as intended.
+
+The global stylesheet — `pds-core.css` — provides the base styles for the toolkit including foundations, utilities, and color variables. This stylesheet should be applied at the root of the application.
+
+The React components are imported and used within the application as needed. Component-specific styles are imported and applied automatically when the component is used.
+
+Components should be imported using named imports. For example:
+
+```js
+import { Container, SidebarLayout } from '@pantheon-systems/pds-toolkit-react';
+```
+
+### Avoid style conflicts
+
+This toolkit is not intended to be used in conjunction with other CSS frameworks. Doing so may result in unexpected behavior and/or visual conflicts.

package/_dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,37 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './avatar.css';
+interface AvatarProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Aria label for the avatar when used as a link. This is required if using a link.
+     */
+    ariaLabel?: string;
+    /**
+     * If true, a user icon will be displayed with the fallback gradient when an image is not provided.
+     */
+    hasUserFallback?: boolean;
+    /**
+     * Avatar image.
+     */
+    imageSrc?: string;
+    /**
+     * A link element using the router of your choice. Leave empty for no link.
+     */
+    linkContent?: ReactNode;
+    /**
+     * Avatar size.
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * Unique ID associated with the avatar. Can be workspace ID, user ID, email, etc.
+     */
+    uniqueId?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Avatar UI component
+ */
+export declare const Avatar: ({ ariaLabel, hasUserFallback, imageSrc, linkContent, size, uniqueId, className, ...props }: AvatarProps) => React.JSX.Element;
+export {};

package/_dist/components/BranchDiff/BranchDiff.d.ts

@@ -0,0 +1,35 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './branch-diff.css';
+/**
+ * Prop types for BranchDiff
+ */
+export interface BranchDiffProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * The number of commits the current branch is ahead of its upstream branch.
+     */
+    numberAhead: number;
+    /**
+     * A description for the `numberAhead` value.
+     */
+    numberAheadDescription?: string;
+    /**
+     * The number of commits the current branch is behind its upstream branch.
+     */
+    numberBehind: number;
+    /**
+     * A description for the `numberBehind` value.
+     */
+    numberBehindDescription?: string;
+    /**
+     * Custom width in rems for the component. This will override the default.
+     */
+    componentWidth?: number;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * BranchDiff UI component
+ */
+export declare const BranchDiff: ({ numberAhead, numberAheadDescription, numberBehind, numberBehindDescription, componentWidth, className, ...props }: BranchDiffProps) => React.JSX.Element;

package/_dist/components/CTALink/CTALink.d.ts

@@ -0,0 +1,20 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './cta-link.css';
+export interface CTALinkProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * A link element using the router of your choice.
+     */
+    linkContent?: ReactNode;
+    /**
+     * Size of link
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * CTA Link UI component
+ */
+export declare const CTALink: ({ linkContent, size, className, ...props }: CTALinkProps) => React.JSX.Element;

package/_dist/components/CTASlice/CTASlice.d.ts

@@ -0,0 +1,43 @@
+import React, { 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';
+    /**
+     * 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;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * CTA Slice UI component
+ */
+export declare const CTASlice: ({ backgroundColor, containerWidth, headingLevel, headingText, leadText, primaryLinkContent, secondaryLinkContent, className, ...props }: CTASliceProps) => React.JSX.Element;
+export {};

package/_dist/components/Callout/Callout.d.ts

@@ -0,0 +1,31 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './callout.css';
+type CalloutType = 'info' | 'success' | 'warning' | 'critical' | 'discovery' | 'code' | 'earlyAccess';
+type TypeLabels = Record<CalloutType, string>;
+export interface CalloutProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Callout main content.
+     */
+    children: React.ReactNode;
+    /**
+     * Callout title.
+     */
+    title: string;
+    /**
+     * Callout type.
+     */
+    type?: CalloutType;
+    /**
+     * Callout type labels. Provide translation strings if necessary.
+     */
+    typeLabels?: TypeLabels;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Callout UI component
+ */
+export declare const Callout: ({ children, title, type, typeLabels, className, ...props }: CalloutProps) => React.JSX.Element;
+export {};

package/_dist/components/Callout/sample-callout-content.d.ts

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

package/_dist/components/ComparisonList/ComparisonList.d.ts

@@ -0,0 +1,42 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './comparison-list.css';
+interface TypeLabels {
+    included: string;
+    notIncluded: string;
+    addon: string;
+}
+export interface ListItems {
+    text: string;
+    type: 'included' | 'notIncluded' | 'addon';
+}
+export interface ComparisonListProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Icon labels
+     */
+    typeLabels?: TypeLabels;
+    /**
+     * List items
+     */
+    listItems?: ListItems[];
+    /**
+     * Text preceding the list. Optional.
+     */
+    listLabel?: string;
+    /**
+     * A link element using the router of your choice. Will be displayed below the list. Optional.
+     */
+    moreLink?: ReactNode;
+    /**
+     * Render the icon labels for screen readers.
+     */
+    renderTypeLabels?: boolean;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * ComparisonList UI component
+ */
+export declare const ComparisonList: ({ listItems, listLabel, moreLink, renderTypeLabels, typeLabels, className, ...props }: ComparisonListProps) => React.JSX.Element;
+export {};

package/_dist/components/DashboardStat/DashboardStat.d.ts

@@ -0,0 +1,28 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './dashboard-stat.css';
+export type DashBoardStatStatus = 'success' | 'warning' | 'launch' | 'error' | 'ready' | 'notReady';
+/**
+ * Prop types for DashboardStat
+ */
+export interface DashboardStatProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Title of the stat, displayed as the main heading of the component.
+     */
+    title?: string;
+    /**
+     * Status of the stat, which determines the icon and icon color.
+     */
+    status?: DashBoardStatStatus;
+    /**
+     *  Value of the stat, displayed next to the status icon.
+     */
+    stat?: string | number;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+/**
+ * DashboardStat UI component
+ */
+export declare const DashboardStat: ({ title, status, stat, className, ...props }: DashboardStatProps) => React.JSX.Element;

package/_dist/components/FileDiff/FileDiff.d.ts

@@ -0,0 +1,35 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './file-diff.css';
+/**
+ * Prop types for FileDiff
+ */
+export interface FileDiffProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     *  Number of added lines (green bar).
+     */
+    additions: number;
+    /**
+     * Number of removed lines (red bar).
+     */
+    deletions: number;
+    /**
+     * Object with strings for tooltips and screen reader labels.
+     */
+    labelStrings?: {
+        linesChanged?: string;
+        additions?: string;
+        deletions?: string;
+    };
+    /**
+     * Custom width in rems for the component. This will override the default.
+     */
+    componentWidth?: number;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * FileDiff UI component
+ */
+export declare const FileDiff: ({ additions, deletions, labelStrings, className, componentWidth, ...props }: FileDiffProps) => React.JSX.Element;

package/_dist/components/Heading/Heading.d.ts

@@ -0,0 +1,15 @@
+export function Heading({ children, level, className, ...props }: {
+    [x: string]: any;
+    children: any;
+    level: any;
+    className: any;
+}): React.JSX.Element;
+export namespace Heading {
+    namespace propTypes {
+        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        let level: PropTypes.Validator<string>;
+        let className: PropTypes.Requireable<string>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';