@google-psat/design-system 0.9.0-1

package/dist-types/components/landingPage/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * External dependencies.
+ */
+import React, { ReactNode } from 'react';
+import { PSInfoKeyType } from './infoCard/fetchPSInfo';
+interface LandingPageProps {
+    title?: string;
+    children?: ReactNode;
+    psInfoKey?: PSInfoKeyType;
+    iframeSrc?: string;
+    contentPanel?: ReactNode;
+    iframeBorderClass?: string;
+    extraClasses?: string;
+}
+declare const LandingPage: ({ title, psInfoKey, iframeSrc, iframeBorderClass, children, extraClasses, contentPanel, }: LandingPageProps) => React.JSX.Element;
+export default LandingPage;

package/dist-types/components/landingPage/infoCard/fetchPSInfo.d.ts

@@ -0,0 +1,26 @@
+export declare enum PSInfoKey {
+    'Topics' = "topics",
+    'AttributionReporting' = "attribution-reporting",
+    'ProtectedAudience' = "protected-audience",
+    'BounceTracking' = "bounce-tracking",
+    'UserAgentReduction' = "user-agent-reduction",
+    'RelatedWebsiteSets' = "related-website-sets",
+    'Chips' = "chips"
+}
+export type PSInfoKeyType = (typeof PSInfoKey)[keyof typeof PSInfoKey];
+export type PSInfo = {
+    name: string;
+    description: string;
+    useI18n: boolean;
+    proposal: string;
+    publicExplainer: string;
+    publicDiscussion: string;
+    videoOverview: string;
+    devDocumentation: string;
+};
+/**
+ * Fetch PSInfo from local data folder.
+ * @param infoKey {PSInfoKeyType} PSInfo key to fetch
+ * @returns {Promise<PSInfo>} PSInfo data object
+ */
+export declare function fetchPSInfo(infoKey: PSInfoKeyType): Promise<PSInfo>;

package/dist-types/components/landingPage/infoCard/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+import { type PSInfoKeyType } from './fetchPSInfo';
+interface InfoCardProps {
+    infoKey: PSInfoKeyType;
+    className?: string;
+}
+declare const InfoCard: ({ infoKey, className }: InfoCardProps) => React.JSX.Element;
+export default InfoCard;

package/dist-types/components/landingPage/infoCard/learnMoreDropdown.d.ts

@@ -0,0 +1,14 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+/**
+ * Internal dependencies.
+ */
+import type { PSInfo as PSInfoType } from './fetchPSInfo';
+interface LearnMoreDropdownProps {
+    PSInfo: PSInfoType;
+    hasSeparator?: boolean;
+}
+declare const LearnMoreDropdown: ({ PSInfo: { proposal, publicExplainer, publicDiscussion, videoOverview, devDocumentation, }, }: LearnMoreDropdownProps) => React.JSX.Element;
+export default LearnMoreDropdown;

package/dist-types/components/landingPage/infoCard/renderLink.d.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+interface RenderLinkProps {
+    label: string;
+    link: string;
+    linkLabel: string;
+}
+declare const RenderLink: ({ label, link, linkLabel }: RenderLinkProps) => React.JSX.Element;
+export default RenderLink;

package/dist-types/components/landingPage/quickLinksList.d.ts

@@ -0,0 +1,6 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+declare const QuickLinksList: () => React.JSX.Element;
+export default QuickLinksList;

package/dist-types/components/matrix/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+/**
+ * Internal dependencies.
+ */
+import { type MatrixComponentProps } from './matrixComponent';
+interface MatrixProps {
+    dataComponents: MatrixComponentProps[];
+    expand?: boolean;
+}
+declare const Matrix: ({ dataComponents, expand }: MatrixProps) => React.JSX.Element | null;
+export default Matrix;

package/dist-types/components/matrix/matrixComponent/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+export interface MatrixComponentProps {
+    color: string;
+    title: string;
+    description?: string;
+    onClick?: (title: string) => void;
+    count: number;
+    isExpanded?: boolean;
+    countClassName: string;
+    containerClasses?: string;
+}
+declare const MatrixComponent: ({ color, title, description, count, isExpanded, countClassName, }: MatrixComponentProps) => React.JSX.Element;
+export default MatrixComponent;

package/dist-types/components/matrix/matrixComponent/matrixComponentHorizontal.d.ts

@@ -0,0 +1,13 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+export interface MatrixComponentHorizontalProps {
+    title: string;
+    description: string;
+    count: number;
+    expand?: boolean;
+    containerClasses?: string;
+}
+declare const MatrixComponentHorizontal: ({ title, description, count, expand, containerClasses, }: MatrixComponentHorizontalProps) => React.JSX.Element;
+export default MatrixComponentHorizontal;

package/dist-types/components/matrix/matrixComponent/stories/MatrixComponent.stories.d.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies.
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+/**
+ * Internal dependencies.
+ */
+import MatrixComponent from '..';
+declare const meta: Meta<typeof MatrixComponent>;
+export default meta;
+export declare const Primary: StoryObj<typeof meta>;

package/dist-types/components/matrix/matrixComponent/stories/matrixComponentHorizontal.stories.d.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies.
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+/**
+ * Internal dependencies.
+ */
+import MatrixComponentHorizontal from '../matrixComponentHorizontal';
+declare const meta: Meta<typeof MatrixComponentHorizontal>;
+export default meta;
+export declare const Default: StoryObj<typeof meta>;

package/dist-types/components/matrix/stories/matrix.stories.d.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies.
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+/**
+ * Internal dependencies.
+ */
+import Matrix from '..';
+declare const meta: Meta<typeof Matrix>;
+export default meta;
+export declare const Primary: StoryObj<typeof meta>;

package/dist-types/components/matrixContainer/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+import { MatrixComponentHorizontalProps } from '../matrix/matrixComponent/matrixComponentHorizontal';
+import { MatrixComponentProps } from '../matrix/matrixComponent';
+interface MatrixContainerProps {
+    matrixData?: MatrixComponentProps[];
+    horizontalMatrixData?: MatrixComponentHorizontalProps[];
+    title?: string;
+    description?: string;
+    showMatrix?: boolean;
+    count?: number | null;
+    allowExpand?: boolean;
+    highlightTitle?: boolean;
+    capitalizeTitle?: boolean;
+    infoIconTitle?: string;
+}
+declare const MatrixContainer: ({ matrixData, horizontalMatrixData, title, description, showMatrix, count, allowExpand, highlightTitle, capitalizeTitle, infoIconTitle, }: MatrixContainerProps) => React.JSX.Element;
+export default MatrixContainer;

package/dist-types/components/menuBar/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+export type MenuData = Array<{
+    name: string;
+    link: string;
+}>;
+interface MenuBarProps {
+    disableReportDownload?: boolean;
+    downloadReport?: () => void;
+    menuData: MenuData;
+    extraClasses?: string;
+    scrollContainerId: string;
+}
+declare const MenuBar: ({ disableReportDownload, downloadReport, menuData, extraClasses, scrollContainerId, }: MenuBarProps) => React.JSX.Element;
+export default MenuBar;

package/dist-types/components/menuBar/utils/index.d.ts

@@ -0,0 +1 @@
+export { default as isElementInView } from './isElementInView';

package/dist-types/components/menuBar/utils/isElementInView.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Determines if an HTMLElement hasn't been scrolled more than a 3/4th of its height out of viewport's 1/4th quarter.
+ * @param element - The HTMLElement to check for vertical centering.
+ * @returns True if the element is in view, false otherwise.
+ */
+export default function isElementInView(element: HTMLElement): boolean;

package/dist-types/components/messageBox/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+interface MessageBoxProps {
+    headerText: string;
+    bodyText: string;
+}
+declare const MessageBox: ({ headerText, bodyText }: MessageBoxProps) => React.JSX.Element;
+export default MessageBox;

package/dist-types/components/messageBox/stories/messageBox.stories.d.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies.
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+/**
+ * Internal dependencies.
+ */
+import MessageBox from '..';
+declare const meta: Meta<typeof MessageBox>;
+export default meta;
+export declare const Primary: StoryObj<typeof meta>;

package/dist-types/components/progressBar/borderProgressbar.d.ts

@@ -0,0 +1,9 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+interface BorderProgressBarProps {
+    additionalStyles?: string;
+}
+declare const BorderProgressBar: ({ additionalStyles, }: BorderProgressBarProps) => React.JSX.Element;
+export default BorderProgressBar;

package/dist-types/components/progressBar/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+interface ProgressBarProps {
+    additionalStyles?: string;
+}
+declare const ProgressBar: ({ additionalStyles }: ProgressBarProps) => React.JSX.Element;
+export default ProgressBar;

package/dist-types/components/progressBar/stories/progressBar.stories.d.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies.
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+/**
+ * Internal dependencies.
+ */
+import ProgressBar from '..';
+declare const meta: Meta<typeof ProgressBar>;
+export default meta;
+export declare const Primary: StoryObj<typeof meta>;

package/dist-types/components/refreshButton/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+interface RefreshButtonProps {
+    onClick?: () => void;
+    title?: string;
+}
+declare const RefreshButton: ({ onClick, title }: RefreshButtonProps) => React.JSX.Element;
+export default RefreshButton;

package/dist-types/components/searchInput/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+interface SearchInputProps {
+    value: string;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    clearInput: () => void;
+}
+declare const SearchInput: ({ value, onChange, clearInput }: SearchInputProps) => React.JSX.Element;
+export default SearchInput;

package/dist-types/components/sidebar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useSidebar';
+export * from './useSidebar/constants';
+export { default as Sidebar } from './sidebar';

package/dist-types/components/sidebar/sidebar.d.ts

@@ -0,0 +1,9 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+interface SidebarProps {
+    visibleWidth?: number;
+}
+declare const Sidebar: ({ visibleWidth }: SidebarProps) => React.JSX.Element;
+export default Sidebar;

package/dist-types/components/sidebar/sidebarChild.d.ts

@@ -0,0 +1,15 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+import { SidebarItemValue } from './useSidebar';
+interface SidebarItemProps {
+    didUserInteract: boolean;
+    setDidUserInteract: (didUserInteract: boolean) => void;
+    itemKey: string;
+    sidebarItem: SidebarItemValue;
+    recursiveStackIndex?: number;
+    visibleWidth?: number;
+}
+declare const SidebarChild: ({ didUserInteract, setDidUserInteract, itemKey, sidebarItem, recursiveStackIndex, visibleWidth, }: SidebarItemProps) => React.JSX.Element;
+export default SidebarChild;

package/dist-types/components/sidebar/useSidebar/constants.d.ts

@@ -0,0 +1,18 @@
+export declare enum SIDEBAR_ITEMS_KEYS {
+    COOKIES = "cookies",
+    COOKIES_WITH_ISSUES = "cookie-issues",
+    TECHNOLOGIES = "technologies",
+    PRIVACY_SANDBOX = "privacy-sandbox",
+    SITE_BOUNDARIES = "site-boundaries",
+    CHIPS = "chips",
+    RELATED_WEBSITE_SETS = "related-website-sets",
+    PRIVATE_ADVERTISING = "private-advertising",
+    TOPICS = "topics",
+    ATTRIBUTION = "attribution",
+    PROTECTED_AUDIENCE = "protected-audience",
+    ANTI_COVERT_TRACKING = "anti-covert-tracking",
+    BOUNCE_TRACKING = "bounce-tracking",
+    FINGERPRINTING = "fingerprinting",
+    FACILITATED_TESTING = "facilitated-testing",
+    SETTINGS = "settings"
+}

package/dist-types/components/sidebar/useSidebar/context.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+/**
+ * Internal dependencies.
+ */
+import { SidebarComponent, SidebarItems } from './types';
+export interface SidebarStoreContext {
+    state: {
+        activePanel: {
+            panel: SidebarComponent;
+            query?: string;
+            clearQuery?: () => void;
+        };
+        selectedItemKey: string | null;
+        currentItemKey: string | null;
+        sidebarItems: SidebarItems;
+        isSidebarFocused: boolean;
+    };
+    actions: {
+        setIsSidebarFocused: React.Dispatch<boolean>;
+        updateSelectedItemKey: (key: string | null, queryString?: string) => void;
+        onKeyNavigation: (event: React.KeyboardEvent<HTMLDivElement>, key: string | null) => void;
+        toggleDropdown: (action: boolean, key: string) => void;
+        isKeyAncestor: (key: string) => boolean;
+        isKeySelected: (key: string) => boolean;
+    };
+}
+export declare const initialState: SidebarStoreContext;
+export declare const SidebarContext: import("use-context-selector").Context<SidebarStoreContext>;

package/dist-types/components/sidebar/useSidebar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './provider';
+export * from './types';
+export * from './useSidebar';

package/dist-types/components/sidebar/useSidebar/provider.d.ts

@@ -0,0 +1,6 @@
+/**
+ * External dependencies.
+ */
+import React, { PropsWithChildren } from 'react';
+import { useSidebarProps } from './types';
+export declare const SidebarProvider: ({ data, defaultSelectedItemKey, children, }: PropsWithChildren<useSidebarProps>) => React.JSX.Element;

package/dist-types/components/sidebar/useSidebar/types.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export type SidebarComponent = {
+    Element?: (props: any) => React.JSX.Element;
+    props?: Record<string, unknown>;
+};
+export type SidebarItemValue = {
+    title: (() => string) | string;
+    children: SidebarItems;
+    popupTitle?: string;
+    infoIconDescription?: string;
+    extraInterfaceToTitle?: SidebarComponent;
+    dropdownOpen?: boolean;
+    panel?: SidebarComponent;
+    icon?: SidebarComponent;
+    selectedIcon?: SidebarComponent;
+    isBlurred?: boolean;
+};
+export type SidebarItems = {
+    [key: string]: SidebarItemValue;
+};
+export interface useSidebarProps {
+    data: SidebarItems;
+    defaultSelectedItemKey?: string | null;
+}

package/dist-types/components/sidebar/useSidebar/useSidebar.d.ts

@@ -0,0 +1,3 @@
+import { SidebarStoreContext } from './context';
+export declare function useSidebar(): SidebarStoreContext;
+export declare function useSidebar<T>(selector: (state: SidebarStoreContext) => T): T;

package/dist-types/components/sidebar/useSidebar/utils/createKeyPath.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import { SidebarItems } from '../types';
+/**
+ * Create a key path to the given key in the sidebar items.
+ * @param items Sidebar items.
+ * @param key Key up to which the path should be created.
+ * @param keyPath Prefix key path to start with.
+ * @returns Key path.
+ */
+declare const createKeyPath: (items: SidebarItems, key: string, keyPath?: string[]) => string[];
+export default createKeyPath;

package/dist-types/components/sidebar/useSidebar/utils/findItem.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import { SidebarItemValue, SidebarItems } from '../types';
+/**
+ * Find an item in the sidebar items by key.
+ * The SidebarItems are assumed to be a tree structure.
+ * Tree traversal is done in a depth-first manner to find the item.
+ * @param items Sidebar items.
+ * @param key Key to find.
+ * @returns Sidebar item.
+ */
+declare const findItem: (items: SidebarItems, key: string | null) => SidebarItemValue | null;
+export default findItem;

package/dist-types/components/sidebar/useSidebar/utils/findKeyParent.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Find the parent key of the given key path.
+ * Eg if the key path is ['a', 'b', 'c'], the parent key is 'b'.
+ * @param keyPath Key path array.
+ * @returns Parent key.
+ */
+declare const findKeyParent: (keyPath: string[]) => string | null;
+export default findKeyParent;

package/dist-types/components/sidebar/useSidebar/utils/findNextItem.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import { SidebarItems } from '../types';
+/**
+ * Find the next item in the sidebar based on the key path.
+ * The SidebarItems are assumed to be a tree structure.
+ * The key path is an array of keys that represent the path to the current item.
+ * Tree traversal is done in a depth-first manner to find the parent of the current item.
+ * And then the next sibling of the current item.
+ * @param items Sidebar items.
+ * @param keyPath Key path.
+ * @param skipDropdown Skip dropdown if parent has only one child, so find parent's sibling.
+ * @returns Next item key.
+ */
+declare const findNextItem: (items: SidebarItems, keyPath: string[], skipDropdown?: boolean) => string | null;
+export default findNextItem;

package/dist-types/components/sidebar/useSidebar/utils/findPrevItem.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import { SidebarItems } from '../types';
+/**
+ * Find the previous item in the sidebar based on the key path.
+ * The SidebarItems are assumed to be a tree structure.
+ * The key path is an array of keys that represent the path to the current item.
+ * Tree traversal is done in a depth-first manner to find the parent of the current item.
+ * And then the previous sibling of the current item.
+ * @param items Sidebar items.
+ * @param keyPath Key path.
+ * @returns Previous item key.
+ */
+declare const findPrevItem: (items: SidebarItems, keyPath: string[]) => string | null;
+export default findPrevItem;

package/dist-types/components/sidebar/useSidebar/utils/index.d.ts

@@ -0,0 +1,6 @@
+export { default as createKeyPath } from './createKeyPath';
+export { default as findItem } from './findItem';
+export { default as findKeyParent } from './findKeyParent';
+export { default as matchKey } from './matchKey';
+export { default as findNextItem } from './findNextItem';
+export { default as findPrevItem } from './findPrevItem';

package/dist-types/components/sidebar/useSidebar/utils/matchKey.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Match toMatch key with the last key in the chained key.
+ * @param key chained key to match with.
+ * @param toMatch String to match.
+ * @returns Boolean.
+ */
+declare const matchKey: (key: string, toMatch: string) => boolean;
+export default matchKey;

package/dist-types/components/table/components/columnMenu/columnList.d.ts

@@ -0,0 +1,10 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+interface ColumnListProps {
+    toggleVisibility: (key: string) => void;
+    handleClose: () => void;
+}
+declare const ColumnList: ({ toggleVisibility, handleClose }: ColumnListProps) => React.JSX.Element;
+export default ColumnList;

package/dist-types/components/table/components/columnMenu/columnListItem.d.ts

@@ -0,0 +1,16 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+/**
+ * Internal dependencies.
+ */
+import type { TableColumn } from '../../useTable';
+interface ColumnListItemProps {
+    column: TableColumn;
+    isColumnHidden: boolean;
+    toggleVisibility: (key: string) => void;
+    handleClose: () => void;
+}
+declare const ColumnListItem: ({ column, isColumnHidden, toggleVisibility, handleClose, }: ColumnListItemProps) => React.JSX.Element;
+export default ColumnListItem;

package/dist-types/components/table/components/columnMenu/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+interface ColumnMenuProps {
+    position: {
+        x: number;
+        y: number;
+    };
+    open: boolean;
+    onClose: (value: boolean) => void;
+}
+declare const ColumnMenu: ({ position, open, onClose }: ColumnMenuProps) => React.JSX.Element;
+export default ColumnMenu;

package/dist-types/components/table/components/filtersSidebar/chips/chip.d.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+interface ChipProps {
+    filterTitle: string;
+    value: string;
+    toggleFilterSelection: () => void;
+}
+declare const Chip: ({ filterTitle, value, toggleFilterSelection }: ChipProps) => React.JSX.Element;
+export default Chip;

package/dist-types/components/table/components/filtersSidebar/chips/chipList.d.ts

@@ -0,0 +1,6 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+declare const ChipList: () => React.JSX.Element;
+export default ChipList;

package/dist-types/components/table/components/filtersSidebar/chips/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+declare const ChipsBar: () => React.JSX.Element;
+export default ChipsBar;

package/dist-types/components/table/components/filtersSidebar/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+declare const FiltersSidebar: () => React.JSX.Element | null;
+export default FiltersSidebar;

package/dist-types/components/table/components/filtersSidebar/listItem.d.ts

@@ -0,0 +1,14 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+import { TableFilter } from '../../useTable';
+interface ListItemProps {
+    filter: TableFilter[keyof TableFilter];
+    filterKey: string;
+    expandAll: boolean;
+    isSelectAllFilterSelected: boolean;
+    toggleFilterExpansion: (filterKey: string, expand?: boolean) => void;
+}
+declare const ListItem: ({ filter, filterKey, expandAll, toggleFilterExpansion, isSelectAllFilterSelected, }: ListItemProps) => React.JSX.Element;
+export default ListItem;

package/dist-types/components/table/components/filtersSidebar/option.d.ts

@@ -0,0 +1,13 @@
+/**
+ * External dependencies.
+ */
+import React from 'react';
+interface OptionProps {
+    filterKey: string;
+    filterValue: string;
+    selected: boolean;
+    toggleFilterSelection: (filterKey: string, filterValue: string) => void;
+    isExpanded: boolean;
+}
+declare const Option: ({ filterKey, filterValue, selected, toggleFilterSelection, isExpanded, }: OptionProps) => React.JSX.Element;
+export default Option;