@activecollab/components
Version:
ActiveCollab Components
33 lines • 1.83 kB
TypeScript
/**
* Shared building blocks for the System Settings presentation stories
* (`Presentation/System Settings/*`). The settings page header, the max-width
* body column and the "row" card (title + description on the left, a control on
* the right) are defined once here and reused by the Index, General and
* Security stories so the chrome stays identical and in one place.
*
* Mirrors the app: PageHeader.jsx + BackButton.js (header) and the repeated
* `Card variant="paper-2"` row pattern from the SystemSettings pages.
*/
import React, { ReactElement, ReactNode } from "react";
export interface SettingsHeaderProps {
title: string;
backTitle?: string;
}
export declare const SettingsHeader: ({ title, backTitle, }: SettingsHeaderProps) => ReactElement;
/** The page body, max-width 850px and left-aligned (mirrors the app Page). */
export declare const SettingsContent: import("styled-components").StyledComponent<"div", any, {}, never>;
/** A settings row card: title + description on the left, control on the right. */
export declare const StyledSettingRow: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement> & import("../..").ICardProps, "ref"> & React.RefAttributes<HTMLDivElement>>, any, {
$clickable?: boolean;
}, never>;
export declare const RowText: import("styled-components").StyledComponent<"div", any, {}, never>;
export interface SettingRowProps {
title: string;
description?: ReactNode;
control?: ReactNode;
onClick?: () => void;
/** Let a long description wrap onto multiple lines instead of truncating. */
wrapDescription?: boolean;
}
export declare const SettingRow: ({ title, description, control, onClick, wrapDescription, }: SettingRowProps) => ReactElement;
//# sourceMappingURL=settings.d.ts.map