@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
271 lines • 14.9 kB
TypeScript
import * as React from 'react';
import { ExtractProps } from '@workday/canvas-kit-react/common';
import { Heading, TypeLevelProps } from '@workday/canvas-kit-react/text';
export interface SidePanelHeadingProps extends Omit<ExtractProps<typeof Heading, never>, 'size'> {
/**
* The size of the heading.
* @default 'small'
*/
size?: TypeLevelProps['size'];
children?: React.ReactNode;
}
export declare const sidePanelHeadingStencil: import("@workday/canvas-kit-styling").Stencil<{
origin: {
end: {
paddingInlineStart: string;
};
start: {};
};
}, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, import("@workday/canvas-kit-styling").Stencil<{
typeLevel: {
'title.large': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
fontSize: "var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem))";
lineHeight: "var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem))";
color: "--cnvs-sys-color-fg-strong";
};
'title.medium': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
fontSize: "var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem))";
lineHeight: "var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem))";
color: "--cnvs-sys-color-fg-strong";
};
'title.small': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
lineHeight: "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))";
fontSize: "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))";
color: "--cnvs-sys-color-fg-strong";
};
'heading.large': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
fontSize: "var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem))";
lineHeight: "var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem))";
color: "--cnvs-sys-color-fg-strong";
};
'heading.medium': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
fontSize: "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))";
lineHeight: "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))";
color: "--cnvs-sys-color-fg-strong";
};
'heading.small': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
fontSize: "var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem))";
lineHeight: "var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem))";
color: "--cnvs-sys-color-fg-strong";
};
'body.large': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
fontSize: "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))";
lineHeight: "var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem))";
color: "--cnvs-sys-color-fg-default";
};
'body.medium': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
fontSize: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))";
lineHeight: "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))";
color: "--cnvs-sys-color-fg-default";
};
'body.small': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
color: "--cnvs-sys-color-fg-default";
};
'subtext.large': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
color: "--cnvs-sys-color-fg-default";
};
'subtext.medium': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
color: "--cnvs-sys-color-fg-default";
};
'subtext.small': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
fontSize: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))";
color: "--cnvs-sys-color-fg-default";
};
};
variant: {
error: {
color: "var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
};
hint: {
color: "--cnvs-sys-color-fg-muted-default";
};
inverse: {
color: "--cnvs-sys-color-fg-inverse";
};
};
}, {}, {}, never, never>>, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
typeLevel: {
'title.large': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
fontSize: "var(--cnvs-sys-font-size-title-lg, var(--cnvs-sys-font-size-title-large, 3.5rem))";
lineHeight: "var(--cnvs-sys-line-height-title-lg, var(--cnvs-sys-line-height-title-large, 4rem))";
color: "--cnvs-sys-color-fg-strong";
};
'title.medium': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
fontSize: "var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem))";
lineHeight: "var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem))";
color: "--cnvs-sys-color-fg-strong";
};
'title.small': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
lineHeight: "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))";
fontSize: "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))";
color: "--cnvs-sys-color-fg-strong";
};
'heading.large': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
fontSize: "var(--cnvs-sys-font-size-heading-lg, var(--cnvs-sys-font-size-heading-large, 2rem))";
lineHeight: "var(--cnvs-sys-line-height-heading-lg, var(--cnvs-sys-line-height-heading-large, 2.5rem))";
color: "--cnvs-sys-color-fg-strong";
};
'heading.medium': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
fontSize: "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))";
lineHeight: "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))";
color: "--cnvs-sys-color-fg-strong";
};
'heading.small': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-bold";
fontSize: "var(--cnvs-sys-font-size-heading-sm, var(--cnvs-sys-font-size-heading-small, 1.5rem))";
lineHeight: "var(--cnvs-sys-line-height-heading-sm, var(--cnvs-sys-line-height-heading-small, 2rem))";
color: "--cnvs-sys-color-fg-strong";
};
'body.large': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
fontSize: "var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem))";
lineHeight: "var(--cnvs-sys-line-height-body-lg, var(--cnvs-sys-line-height-body-large, 1.75rem))";
color: "--cnvs-sys-color-fg-default";
};
'body.medium': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
fontSize: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))";
lineHeight: "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))";
color: "--cnvs-sys-color-fg-default";
};
'body.small': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
color: "--cnvs-sys-color-fg-default";
};
'subtext.large': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large))";
color: "--cnvs-sys-color-fg-default";
};
'subtext.medium': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
color: "--cnvs-sys-color-fg-default";
};
'subtext.small': {
fontFamily: "--cnvs-sys-font-family-default";
fontWeight: "--cnvs-sys-font-weight-normal";
fontSize: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))";
color: "--cnvs-sys-color-fg-default";
};
};
variant: {
error: {
color: "var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
};
hint: {
color: "--cnvs-sys-color-fg-muted-default";
};
inverse: {
color: "--cnvs-sys-color-fg-inverse";
};
};
}, {}, {}, never, never>, never>, never>;
/**
* Adds the necessary props to the SidePanelHeading subcomponent.
* This sets the `id` to the `labelId` from the model for accessibility purposes,
* and hides the heading when the panel is not expanded.
*/
export declare const useSidePanelHeading: import("@workday/canvas-kit-react/common").BehaviorHook<{
state: {
panelId: string;
labelId: string;
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
origin: "end" | "start";
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
};
events: {
expand(): void;
collapse(): void;
handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
handleAnimationStart(): undefined;
};
}, {
readonly id: string;
readonly hidden: boolean;
}>;
/**
* `SidePanel.Heading` is a styled heading component that provides the accessible name
* for the SidePanel. The heading's `id` is automatically set to the model's `labelId`,
* which is used by the panel's `aria-labelledby` attribute.
*
* The heading is automatically hidden when the panel is collapsed.
*/
export declare const SidePanelHeading: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"h2", TypeLevelProps>, SidePanelHeadingProps, {
state: {
panelId: string;
labelId: string;
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
origin: "end" | "start";
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
};
events: {
expand(): void;
collapse(): void;
handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
handleAnimationStart(): undefined;
};
}>;
//# sourceMappingURL=SidePanelHeading.d.ts.map