@prismicio/editor-ui 0.4.17 → 0.4.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ActionList/ActionList.d.ts +1 -1
- package/dist/components/AnimatedElement/AnimatedElement.d.ts +1 -2
- package/dist/components/Badge/Badge.css.d.ts +4 -1
- package/dist/components/Badge/Badge.d.ts +2 -2
- package/dist/components/Badge/Badge.stories.d.ts +2 -2
- package/dist/components/BaseInput/BaseInput.d.ts +16 -9
- package/dist/components/BlankSlate/BlankSlate.d.ts +31 -16
- package/dist/components/Button/Button.d.ts +17 -7
- package/dist/components/Button/Button.stories.d.ts +35 -7
- package/dist/components/ButtonGroup/ButtonGroup.d.ts +3 -4
- package/dist/components/ButtonGroup/ButtonGroup.stories.d.ts +44 -7
- package/dist/components/Card/Card.d.ts +11 -5
- package/dist/components/Checkbox/Checkbox.d.ts +2 -0
- package/dist/components/Checkbox/Checkbox.stories.d.ts +2 -0
- package/dist/components/ColorInput/ColorInput.d.ts +5 -6
- package/dist/components/ColorInput/ColorInput.stories.d.ts +2 -12
- package/dist/components/DateInput/DateInput.d.ts +2 -2
- package/dist/components/Dialog/Dialog.d.ts +2 -0
- package/dist/components/Dialog/Options/DialogOptions.d.ts +1 -1
- package/dist/components/DocumentCard/DocumentCard.d.ts +6 -21
- package/dist/components/DocumentCard/DocumentCard.stories.d.ts +29 -5
- package/dist/components/Dot/Dot.d.ts +6 -0
- package/dist/components/Dot/Dot.stories.d.ts +20 -0
- package/dist/components/Dot/index.d.ts +1 -0
- package/dist/components/DropdownMenu/DropdownMenu.css.d.ts +1 -0
- package/dist/components/DropdownMenu/DropdownMenu.d.ts +3 -2
- package/dist/components/EditableText/EditableText.d.ts +1 -0
- package/dist/components/ErrorBoundary/DefaultErrorMessage.d.ts +2 -0
- package/dist/components/Field/Field.d.ts +6 -7
- package/dist/components/Field/Field.stories.d.ts +1 -1
- package/dist/components/FileUpload/FileDropZone/FileDropZone.d.ts +3 -0
- package/dist/components/FileUpload/FileUpload.stories.d.ts +2 -2
- package/dist/components/FileUpload/FileUpload.utils.d.ts +8 -2
- package/dist/components/FileUpload/index.d.ts +0 -1
- package/dist/components/FileUploadButton/FileUploadButton.d.ts +19 -0
- package/dist/components/FileUploadButton/index.d.ts +1 -0
- package/dist/components/Form/Form.d.ts +1 -1
- package/dist/components/Form/FormDateInput.d.ts +2 -1
- package/dist/components/Form/FormField.d.ts +1 -1
- package/dist/components/Form/FormInput.d.ts +7 -1
- package/dist/components/Form/FormSearchInput.d.ts +11 -0
- package/dist/components/Form/index.d.ts +1 -0
- package/dist/components/Gradient/Gradient.d.ts +1 -1
- package/dist/components/Group/Group.d.ts +3 -2
- package/dist/components/Group/Group.stories.d.ts +6 -10
- package/dist/components/Group/GroupItem.css.d.ts +0 -1
- package/dist/components/HairlineButton/HairlineButton.d.ts +1 -1
- package/dist/components/HiddenLabel/HiddenLabel.d.ts +11 -0
- package/dist/components/HiddenLabel/index.d.ts +1 -0
- package/dist/components/Icon/Icon.d.ts +2 -3
- package/dist/components/Icon/iconNames.d.ts +1 -1
- package/dist/components/IconButton/IconButton.d.ts +2 -0
- package/dist/components/Image/Image.d.ts +3 -0
- package/dist/components/InvisibleButton/InvisibleButton.css.d.ts +1 -0
- package/dist/components/InvisibleButton/InvisibleButton.d.ts +1 -0
- package/dist/components/Line/Line.d.ts +6 -0
- package/dist/components/Line/Line.stories.d.ts +20 -0
- package/dist/components/Line/index.d.ts +1 -0
- package/dist/components/List/UnorderedList.d.ts +11 -0
- package/dist/components/List/UnorderedList.stories.d.ts +23 -0
- package/dist/components/List/index.d.ts +1 -0
- package/dist/components/Masonry/MasonryFile.d.ts +2 -3
- package/dist/components/MediaCard/MediaCard.d.ts +35 -0
- package/dist/components/MediaCard/MediaCard.stories.d.ts +54 -0
- package/dist/components/MediaCard/index.d.ts +1 -0
- package/dist/components/MediaProgress/MediaProgress.d.ts +6 -0
- package/dist/components/MediaProgress/MediaProgress.stories.d.ts +24 -0
- package/dist/components/MediaProgress/index.d.ts +1 -0
- package/dist/components/NumberInput/NumberInput.d.ts +4 -2
- package/dist/components/Portal/Portal.d.ts +9 -0
- package/dist/components/Portal/index.d.ts +1 -0
- package/dist/components/Radio/RadioGroup.d.ts +1 -1
- package/dist/components/ScrollArea/ScrollArea.d.ts +2 -2
- package/dist/components/ScrollArea/ScrollArea.stories.d.ts +3 -3
- package/dist/components/SearchInput/SearchInput.d.ts +1 -1
- package/dist/components/Select/Select.css.d.ts +2 -6
- package/dist/components/Select/Select.d.ts +9 -10
- package/dist/components/Select/SelectGhostTrigger.d.ts +11 -0
- package/dist/components/Select/index.d.ts +1 -0
- package/dist/components/Separator/Separator.d.ts +7 -2
- package/dist/components/Separator/Separator.stories.d.ts +31 -6
- package/dist/components/Skeleton/Skeleton.d.ts +11 -13
- package/dist/components/Switch/Switch.d.ts +3 -1
- package/dist/components/Table/Table.d.ts +1 -0
- package/dist/components/TagField/useTagFieldHeader.d.ts +1 -0
- package/dist/components/Text/Text.css.d.ts +2 -1
- package/dist/components/Text/Text.d.ts +3 -2
- package/dist/components/TextArea/TextArea.d.ts +3 -1
- package/dist/components/TextInput/TextInput.d.ts +6 -6
- package/dist/components/TextInput/index.d.ts +1 -1
- package/dist/components/Toast/Toast.d.ts +4 -0
- package/dist/components/Toast/Toast.stories.d.ts +2 -2
- package/dist/components/ToggleButton/ToggleButton.d.ts +2 -3
- package/dist/components/ToggleButton/ToggleButton.stories.d.ts +37 -7
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.d.ts +25 -15
- package/dist/components/ToggleButtonGroup/ToggleButtonGroup.stories.d.ts +64 -16
- package/dist/components/Toolbar/Toolbar.d.ts +3 -4
- package/dist/components/Tooltip/Tooltip.d.ts +1 -1
- package/dist/components/Video/Video.d.ts +6 -1
- package/dist/components/Video/Video.stories.d.ts +34 -7
- package/dist/index.d.ts +11 -6
- package/dist/index.es.js +12953 -12473
- package/dist/style.css +1 -1
- package/dist/theme/new/index.d.ts +3 -0
- package/dist/theme/new/sx.d.ts +12 -13
- package/dist/theme/new/theme.d.ts +21 -13
- package/dist/theme/new/utils.d.ts +1 -1
- package/dist/theme/selectors.d.ts +20 -20
- package/dist/theme/sprinkles.css.d.ts +932 -932
- package/package.json +4 -2
- package/dist/components/BaseInput/BaseInput.css.d.ts +0 -15
- package/dist/components/BlankSlate/BlankSlate.css.d.ts +0 -12
- package/dist/components/Button/Button.css.d.ts +0 -13
- package/dist/components/ButtonGroup/ButtonGroup.css.d.ts +0 -5
- package/dist/components/DocumentStatusBar/DocumentStatusBar.css.d.ts +0 -1
- package/dist/components/DocumentStatusBar/DocumentStatusBar.d.ts +0 -5
- package/dist/components/DocumentStatusBar/DocumentStatusBar.stories.d.ts +0 -10
- package/dist/components/DocumentStatusBar/index.d.ts +0 -1
- package/dist/components/DocumentStatusDot/DocumentStatusDot.css.d.ts +0 -1
- package/dist/components/DocumentStatusDot/DocumentStatusDot.d.ts +0 -5
- package/dist/components/DocumentStatusDot/DocumentStatusDot.stories.d.ts +0 -10
- package/dist/components/DocumentStatusDot/index.d.ts +0 -1
- package/dist/components/EditableText/EditableText.css.d.ts +0 -2
- package/dist/components/Field/Field.css.d.ts +0 -9
- package/dist/components/FileUpload/FileDropZone/FileDropZone.css.d.ts +0 -4
- package/dist/components/FileUpload/FileUploadTrigger/FileUploadTrigger.css.d.ts +0 -3
- package/dist/components/FileUpload/FileUploadTrigger/FileUploadTrigger.d.ts +0 -8
- package/dist/components/Image/Image.css.d.ts +0 -8
- package/dist/components/SearchInput/SearchInput.css.d.ts +0 -2
- package/dist/components/Separator/Separator.css.d.ts +0 -1
- package/dist/components/TextArea/TextArea.css.d.ts +0 -4
- package/dist/components/Tooltip/Tooltip.css.d.ts +0 -6
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type MouseEvent, type PropsWithChildren, type ReactNode } from "react";
|
|
2
2
|
import { type IconName } from "../Icon";
|
|
3
|
-
export type ActionListVariants = "
|
|
3
|
+
export type ActionListVariants = "borderless" | "bordered";
|
|
4
4
|
export interface ActionListProps extends PropsWithChildren {
|
|
5
5
|
variant?: ActionListVariants;
|
|
6
6
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type ReactElement } from "react";
|
|
2
|
-
import type { SX } from "../../theme/new
|
|
2
|
+
import type { SX } from "../../theme/new";
|
|
3
3
|
import { type Sprinkles } from "../../theme/sprinkles.css";
|
|
4
4
|
export interface AnimatedElementProps {
|
|
5
5
|
children: OnlyChild;
|
|
@@ -11,7 +11,6 @@ export interface AnimatedElementProps {
|
|
|
11
11
|
};
|
|
12
12
|
enterDuration?: Sprinkles["animationDuration"];
|
|
13
13
|
exitDuration?: Sprinkles["animationDuration"];
|
|
14
|
-
onAnimationEnd?: (animation: "enter" | "exit") => void;
|
|
15
14
|
sx?: SX;
|
|
16
15
|
}
|
|
17
16
|
/**
|
|
@@ -3,9 +3,9 @@ export declare const Badge: import("react").ForwardRefExoticComponent<Readonly<{
|
|
|
3
3
|
title: ReactNode;
|
|
4
4
|
color?: "green" | "grey" | "purple" | "tomato" | "amber" | undefined;
|
|
5
5
|
size?: "medium" | "large" | undefined;
|
|
6
|
-
|
|
6
|
+
maxWidth?: 150 | 250 | undefined;
|
|
7
7
|
onClose?: (() => void) | undefined;
|
|
8
|
-
icon?: "visibility" | "search" | "link" | "description" | "code" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
|
|
8
|
+
icon?: "visibility" | "search" | "link" | "description" | "code" | "block" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
|
|
9
9
|
onClick?: (() => void) | undefined;
|
|
10
10
|
selected?: boolean | undefined;
|
|
11
11
|
onMouseEnter?: (() => void) | undefined;
|
|
@@ -2,9 +2,9 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
|
|
|
2
2
|
title: import("react").ReactNode;
|
|
3
3
|
color?: "green" | "grey" | "purple" | "tomato" | "amber" | undefined;
|
|
4
4
|
size?: "medium" | "large" | undefined;
|
|
5
|
-
|
|
5
|
+
maxWidth?: 150 | 250 | undefined;
|
|
6
6
|
onClose?: (() => void) | undefined;
|
|
7
|
-
icon?: "visibility" | "search" | "link" | "description" | "code" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
|
|
7
|
+
icon?: "visibility" | "search" | "link" | "description" | "code" | "block" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
|
|
8
8
|
onClick?: (() => void) | undefined;
|
|
9
9
|
selected?: boolean | undefined;
|
|
10
10
|
onMouseEnter?: (() => void) | undefined;
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { type KeyboardEvent, type ReactNode } from "react";
|
|
2
|
-
import type { SX } from "../../theme/new
|
|
3
|
-
import * as styles from "./BaseInput.css";
|
|
2
|
+
import type { SX, ThemeKeys } from "../../theme/new";
|
|
4
3
|
export interface BaseInputProps {
|
|
5
4
|
autoComplete?: string;
|
|
6
|
-
className?: string;
|
|
7
5
|
id?: string;
|
|
8
6
|
inputMode?: "decimal" | "text";
|
|
9
7
|
name?: string;
|
|
@@ -11,15 +9,24 @@ export interface BaseInputProps {
|
|
|
11
9
|
readOnly?: boolean;
|
|
12
10
|
startAdornment?: ReactNode;
|
|
13
11
|
endAdornment?: ReactNode;
|
|
12
|
+
padding?: Padding;
|
|
14
13
|
value: string;
|
|
15
|
-
variant?:
|
|
14
|
+
variant?: "normal" | "link" | "success";
|
|
15
|
+
cursor?: "text" | "pointer";
|
|
16
|
+
maxLength?: number;
|
|
17
|
+
sx?: SX;
|
|
16
18
|
onFocus?: () => void;
|
|
17
19
|
onBlur?: () => void;
|
|
18
|
-
|
|
19
|
-
cursor?: keyof typeof styles.cursor;
|
|
20
|
+
onValueChange?: (value: string) => void;
|
|
20
21
|
onKeyDown?: (event: KeyboardEvent) => void;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
}
|
|
23
|
+
interface Padding {
|
|
24
|
+
input?: {
|
|
25
|
+
inline: ThemeKeys<"space">;
|
|
26
|
+
};
|
|
27
|
+
adornment?: {
|
|
28
|
+
inline: ThemeKeys<"space">;
|
|
29
|
+
};
|
|
24
30
|
}
|
|
25
31
|
export declare const BaseInput: import("react").ForwardRefExoticComponent<BaseInputProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
32
|
+
export {};
|
|
@@ -1,25 +1,40 @@
|
|
|
1
|
-
import type { CSSProperties,
|
|
2
|
-
import {
|
|
1
|
+
import type { CSSProperties, ReactNode } from "react";
|
|
2
|
+
import { type ThemeKeys } from "../../theme/new";
|
|
3
3
|
import { type IconName } from "../Icon";
|
|
4
|
-
|
|
5
|
-
export interface BlankSlateProps extends PropsWithChildren {
|
|
4
|
+
export interface BlankSlateProps {
|
|
6
5
|
style?: CSSProperties;
|
|
6
|
+
children?: ReactNode;
|
|
7
7
|
}
|
|
8
|
-
export declare
|
|
9
|
-
|
|
8
|
+
export declare function BlankSlate(props: BlankSlateProps): JSX.Element;
|
|
9
|
+
interface BlankSlateIconProps {
|
|
10
10
|
name: IconName;
|
|
11
|
-
lineColor?:
|
|
12
|
-
backgroundColor?:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
size?: keyof typeof styles.titleSizeVariant;
|
|
11
|
+
lineColor?: ThemeKeys<"color">;
|
|
12
|
+
backgroundColor?: ThemeKeys<"color">;
|
|
13
|
+
borderColor?: ThemeKeys<"color">;
|
|
14
|
+
borderStyle?: CSSProperties["borderStyle"];
|
|
15
|
+
size?: "medium" | "large";
|
|
17
16
|
}
|
|
18
|
-
export declare
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
export declare function BlankSlateIcon(props: BlankSlateIconProps): JSX.Element;
|
|
18
|
+
declare const titleSizeVariant: {
|
|
19
|
+
readonly regular: "normal";
|
|
20
|
+
readonly big: "h2";
|
|
21
|
+
};
|
|
22
|
+
export interface BlankSlateTitleProps {
|
|
23
|
+
size?: keyof typeof titleSizeVariant;
|
|
24
|
+
children?: ReactNode;
|
|
25
|
+
}
|
|
26
|
+
export declare function BlankSlateTitle(props: BlankSlateTitleProps): JSX.Element;
|
|
27
|
+
interface BlankSlateDescriptionProps {
|
|
28
|
+
width?: number;
|
|
29
|
+
children?: ReactNode;
|
|
30
|
+
}
|
|
31
|
+
export declare function BlankSlateDescription(props: BlankSlateDescriptionProps): JSX.Element;
|
|
32
|
+
interface BlankSlateImageProps {
|
|
21
33
|
fixedHeight?: boolean;
|
|
34
|
+
children?: ReactNode;
|
|
22
35
|
}
|
|
23
36
|
export declare function BlankSlateImage(props: BlankSlateImageProps): JSX.Element;
|
|
24
|
-
export declare
|
|
37
|
+
export declare function BlankSlateActions(props: {
|
|
38
|
+
children: ReactNode;
|
|
39
|
+
}): JSX.Element;
|
|
25
40
|
export {};
|
|
@@ -1,18 +1,28 @@
|
|
|
1
1
|
import { type MouseEvent, type ReactNode } from "react";
|
|
2
|
-
import type { SX } from "../../theme/new
|
|
2
|
+
import type { SX } from "../../theme/new";
|
|
3
3
|
import { type IconName } from "../Icon";
|
|
4
|
-
import * as styles from "./Button.css";
|
|
5
4
|
export interface ButtonProps {
|
|
6
5
|
children?: ReactNode;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
size?: keyof typeof styles.size;
|
|
6
|
+
color?: "grey" | "purple" | "dark" | "tomato" | "amber" | "green";
|
|
7
|
+
size?: "small" | "medium" | "large";
|
|
10
8
|
disabled?: boolean;
|
|
11
9
|
loading?: boolean;
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
textColor?: "placeholder";
|
|
11
|
+
/**
|
|
12
|
+
* Whether to make the text (children) content of the Button take all the available space.
|
|
13
|
+
* This can be useful when the Button's width is set from the outside instead of being "auto".
|
|
14
|
+
* If you set a large width from the outside but leave this prop to false/undefined,
|
|
15
|
+
* the button's children will be centered, which looks strange.
|
|
16
|
+
* Defaults to false.
|
|
17
|
+
*/
|
|
14
18
|
flexContent?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Buttons have a bold text by default. You can override this by passing "normal".
|
|
21
|
+
*/
|
|
22
|
+
textWeight?: "normal" | "bold";
|
|
15
23
|
sx?: SX;
|
|
24
|
+
startIcon?: IconName;
|
|
25
|
+
endIcon?: IconName;
|
|
16
26
|
renderStartIcon?: (icon: ReactNode) => ReactNode;
|
|
17
27
|
renderEndIcon?: (icon: ReactNode) => ReactNode;
|
|
18
28
|
onClick?: (event: MouseEvent) => void;
|
|
@@ -1,13 +1,41 @@
|
|
|
1
|
-
declare const
|
|
2
|
-
|
|
1
|
+
declare const meta: {
|
|
2
|
+
title: string;
|
|
3
|
+
component: import("react").ForwardRefExoticComponent<import("./Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
4
|
+
argTypes: {
|
|
5
|
+
onClick: {};
|
|
6
|
+
startIcon: {
|
|
7
|
+
control: {
|
|
8
|
+
type: string;
|
|
9
|
+
};
|
|
10
|
+
options: readonly ["add", "alert", "arrowBack", "arrowDownward", "arrowDropDown", "arrowDropDownCircle", "arrowForward", "arrowUpward", "autoFixHigh", "block", "calendarToday", "centerFocusWeak", "check", "checkBox", "checkBoxOutlinedBlank", "chevronLeft", "chevronRight", "close", "cloud", "cloudUpload", "code", "colorLens", "contentCopy", "crop", "cropLandscape", "cropPortrait", "dataObject", "database", "dateRange", "delete", "description", "desktopWindows", "dragIndicator", "driveFileMove", "edit", "event", "expandLess", "expandMore", "firstPage", "folder", "formatBold", "formatClear", "formatItalic", "formatListBulleted", "formatListNumbered", "formatTextDirectionRToL", "hideImage", "image", "imageSearch", "insertDriveFile", "inventory", "keyboardArrowDown", "keyboardArrowUp", "label", "link", "linkOff", "lock", "looks1", "looks2", "looks3", "looks4", "looks5", "looks6", "moreVert", "musicNote", "notes", "openInNew", "phoneIphone", "photo", "pin", "place", "preview", "prismic", "public", "refresh", "save", "schedule", "search", "smartDisplay", "tabletMac", "tag", "textFields", "toggleOff", "unfoldMore", "unsplash", "viewDay", "visibility", "zoomOutMap"];
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
export default meta;
|
|
3
15
|
export declare const Default: {
|
|
16
|
+
render: (args: {
|
|
17
|
+
children?: import("react").ReactNode;
|
|
18
|
+
color?: "dark" | "green" | "grey" | "purple" | "tomato" | "amber" | undefined;
|
|
19
|
+
size?: "small" | "medium" | "large" | undefined;
|
|
20
|
+
disabled?: boolean | undefined;
|
|
21
|
+
loading?: boolean | undefined;
|
|
22
|
+
textColor?: "placeholder" | undefined;
|
|
23
|
+
flexContent?: boolean | undefined;
|
|
24
|
+
textWeight?: "bold" | "normal" | undefined;
|
|
25
|
+
sx?: import("../../theme/new").SX | undefined;
|
|
26
|
+
startIcon?: "visibility" | "search" | "link" | "description" | "code" | "block" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
|
|
27
|
+
endIcon?: "visibility" | "search" | "link" | "description" | "code" | "block" | "add" | "alert" | "arrowBack" | "arrowDownward" | "arrowDropDown" | "arrowDropDownCircle" | "arrowForward" | "arrowUpward" | "autoFixHigh" | "calendarToday" | "centerFocusWeak" | "check" | "checkBox" | "checkBoxOutlinedBlank" | "chevronLeft" | "chevronRight" | "close" | "cloud" | "cloudUpload" | "colorLens" | "contentCopy" | "crop" | "cropLandscape" | "cropPortrait" | "dataObject" | "database" | "dateRange" | "delete" | "desktopWindows" | "dragIndicator" | "driveFileMove" | "edit" | "event" | "expandLess" | "expandMore" | "firstPage" | "folder" | "formatBold" | "formatClear" | "formatItalic" | "formatListBulleted" | "formatListNumbered" | "formatTextDirectionRToL" | "hideImage" | "image" | "imageSearch" | "insertDriveFile" | "inventory" | "keyboardArrowDown" | "keyboardArrowUp" | "label" | "linkOff" | "lock" | "looks1" | "looks2" | "looks3" | "looks4" | "looks5" | "looks6" | "moreVert" | "musicNote" | "notes" | "openInNew" | "phoneIphone" | "photo" | "pin" | "place" | "preview" | "prismic" | "public" | "refresh" | "save" | "schedule" | "smartDisplay" | "tabletMac" | "tag" | "textFields" | "toggleOff" | "unfoldMore" | "unsplash" | "viewDay" | "zoomOutMap" | undefined;
|
|
28
|
+
renderStartIcon?: ((icon: import("react").ReactNode) => import("react").ReactNode) | undefined;
|
|
29
|
+
renderEndIcon?: ((icon: import("react").ReactNode) => import("react").ReactNode) | undefined;
|
|
30
|
+
onClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
|
|
31
|
+
onMouseEnter?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
|
|
32
|
+
onMouseLeave?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
|
|
33
|
+
ref?: import("react").Ref<HTMLButtonElement> | undefined;
|
|
34
|
+
key?: import("react").Key | null | undefined;
|
|
35
|
+
}) => JSX.Element;
|
|
4
36
|
args: {
|
|
5
37
|
children: string;
|
|
6
|
-
|
|
7
|
-
loading: boolean;
|
|
8
|
-
size: string;
|
|
9
|
-
startIcon: string;
|
|
10
|
-
variant: string;
|
|
38
|
+
startIcon: "schedule";
|
|
11
39
|
};
|
|
12
40
|
name: string;
|
|
13
41
|
};
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { type ReactNode } from "react";
|
|
2
|
-
import type { SX } from "../../theme/new
|
|
2
|
+
import type { SX } from "../../theme/new";
|
|
3
3
|
export interface ButtonGroupProps {
|
|
4
4
|
children?: ReactNode;
|
|
5
|
-
className?: string;
|
|
6
5
|
disabled?: boolean;
|
|
7
6
|
size?: "small" | "medium" | "large";
|
|
8
|
-
|
|
7
|
+
color?: "grey" | "purple" | "dark";
|
|
9
8
|
density?: "regular" | "compact";
|
|
10
9
|
sx?: SX;
|
|
11
10
|
}
|
|
@@ -13,7 +12,7 @@ export declare const ButtonGroup: import("react").ForwardRefExoticComponent<Butt
|
|
|
13
12
|
interface ButtonGroupContextValue {
|
|
14
13
|
disabled?: boolean;
|
|
15
14
|
size: "small" | "medium" | "large";
|
|
16
|
-
|
|
15
|
+
color: "grey" | "dark" | "purple";
|
|
17
16
|
}
|
|
18
17
|
export declare function useButtonGroup(): ButtonGroupContextValue | undefined;
|
|
19
18
|
export {};
|
|
@@ -1,12 +1,49 @@
|
|
|
1
|
-
declare const
|
|
2
|
-
|
|
1
|
+
declare const meta: {
|
|
2
|
+
title: string;
|
|
3
|
+
component: import("react").ForwardRefExoticComponent<import("./ButtonGroup").ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
4
|
+
argTypes: {
|
|
5
|
+
children: {
|
|
6
|
+
control: {
|
|
7
|
+
disable: boolean;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
density: {
|
|
11
|
+
control: {
|
|
12
|
+
type: string;
|
|
13
|
+
};
|
|
14
|
+
options: string[];
|
|
15
|
+
};
|
|
16
|
+
size: {
|
|
17
|
+
control: {
|
|
18
|
+
type: string;
|
|
19
|
+
};
|
|
20
|
+
options: string[];
|
|
21
|
+
};
|
|
22
|
+
color: {
|
|
23
|
+
control: {
|
|
24
|
+
type: string;
|
|
25
|
+
};
|
|
26
|
+
options: string[];
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
export default meta;
|
|
3
31
|
export declare const Default: {
|
|
32
|
+
render: (args: {
|
|
33
|
+
children?: import("react").ReactNode;
|
|
34
|
+
disabled?: boolean | undefined;
|
|
35
|
+
size?: "small" | "medium" | "large" | undefined;
|
|
36
|
+
color?: "dark" | "grey" | "purple" | undefined;
|
|
37
|
+
density?: "compact" | "regular" | undefined;
|
|
38
|
+
sx?: import("../../theme/new").SX | undefined;
|
|
39
|
+
ref?: import("react").Ref<HTMLDivElement> | undefined;
|
|
40
|
+
key?: import("react").Key | null | undefined;
|
|
41
|
+
}) => JSX.Element;
|
|
4
42
|
args: {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
variant: string;
|
|
43
|
+
density: "regular";
|
|
44
|
+
disabled: false;
|
|
45
|
+
size: "medium";
|
|
46
|
+
color: "purple";
|
|
10
47
|
};
|
|
11
48
|
name: string;
|
|
12
49
|
};
|
|
@@ -1,15 +1,21 @@
|
|
|
1
1
|
import type { PropsWithChildren, ReactNode } from "react";
|
|
2
|
-
import type { SX } from "../../theme/new
|
|
3
|
-
import
|
|
2
|
+
import type { SX } from "../../theme/new";
|
|
3
|
+
import { type TextProps } from "../Text";
|
|
4
4
|
export interface CardProps {
|
|
5
5
|
children?: ReactNode;
|
|
6
|
-
color?:
|
|
7
|
-
variant?:
|
|
6
|
+
color?: "grey1" | "grey2" | "grey3" | "indigo2" | "purple1";
|
|
7
|
+
variant?: "dashed" | "elevated" | "outlined" | "selected";
|
|
8
|
+
radius?: 4 | 6;
|
|
9
|
+
padding?: 24;
|
|
8
10
|
sx?: SX;
|
|
9
11
|
}
|
|
10
12
|
export declare function Card(props: CardProps): JSX.Element;
|
|
11
13
|
export declare function CardHeader(props: PropsWithChildren): JSX.Element;
|
|
12
|
-
|
|
14
|
+
interface CardHeaderTitleProps {
|
|
15
|
+
children?: ReactNode;
|
|
16
|
+
variant?: TextProps["variant"];
|
|
17
|
+
}
|
|
18
|
+
export declare function CardHeaderTitle(props: CardHeaderTitleProps): JSX.Element;
|
|
13
19
|
interface CardHeaderActionsProps {
|
|
14
20
|
children?: ReactNode;
|
|
15
21
|
sx?: SX;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
+
import { type MouseEventHandler } from "react";
|
|
1
2
|
export interface CheckboxProps {
|
|
2
3
|
checked?: boolean;
|
|
3
4
|
disabled?: boolean;
|
|
4
5
|
onCheckedChange?: (checked: boolean) => void;
|
|
6
|
+
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
5
7
|
tabIndex?: number;
|
|
6
8
|
}
|
|
7
9
|
export declare function Checkbox(props: CheckboxProps): JSX.Element;
|
|
@@ -4,9 +4,11 @@ export declare const Default: import("@storybook/types").StoryAnnotations<import
|
|
|
4
4
|
checked?: boolean | undefined;
|
|
5
5
|
disabled?: boolean | undefined;
|
|
6
6
|
onCheckedChange?: ((checked: boolean) => void) | undefined;
|
|
7
|
+
onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
|
|
7
8
|
tabIndex?: number | undefined;
|
|
8
9
|
}, {
|
|
9
10
|
disabled?: boolean | undefined;
|
|
11
|
+
onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
|
|
10
12
|
tabIndex?: number | undefined;
|
|
11
13
|
checked?: boolean | undefined;
|
|
12
14
|
onCheckedChange?: ((checked: boolean) => void) | undefined;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
export interface ColorInputProps {
|
|
2
2
|
value?: string;
|
|
3
|
-
onValueChange: (value?: string) => void;
|
|
4
|
-
"aria-labelledby": string;
|
|
5
3
|
placeholder?: string;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
"aria-labelledby": string;
|
|
5
|
+
onValueChange: (value?: string) => void;
|
|
6
|
+
}
|
|
7
|
+
export declare function ColorInput(props: ColorInputProps): JSX.Element;
|
|
@@ -1,17 +1,7 @@
|
|
|
1
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R,
|
|
2
|
-
value?: string | undefined;
|
|
3
|
-
onValueChange: (value?: string | undefined) => void;
|
|
4
|
-
"aria-labelledby": string;
|
|
5
|
-
placeholder?: string | undefined;
|
|
6
|
-
}>;
|
|
1
|
+
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./ColorInput").ColorInputProps>;
|
|
7
2
|
export default _default;
|
|
8
3
|
export declare const Default: {
|
|
9
|
-
render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R,
|
|
10
|
-
value?: string | undefined;
|
|
11
|
-
onValueChange: (value?: string | undefined) => void;
|
|
12
|
-
"aria-labelledby": string;
|
|
13
|
-
placeholder?: string | undefined;
|
|
14
|
-
}>;
|
|
4
|
+
render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./ColorInput").ColorInputProps>;
|
|
15
5
|
args: {
|
|
16
6
|
value: string;
|
|
17
7
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { Time } from "@internationalized/date";
|
|
2
|
-
import type { SX } from "../../theme/new
|
|
2
|
+
import type { SX } from "../../theme/new";
|
|
3
3
|
export type DateInputProps = {
|
|
4
4
|
value?: Date;
|
|
5
5
|
mode: Mode;
|
|
6
6
|
defaultTime?: Time;
|
|
7
|
-
|
|
7
|
+
disabled?: boolean;
|
|
8
8
|
/**
|
|
9
9
|
* The minimum allowed date that a user may select.
|
|
10
10
|
*/
|
|
@@ -8,6 +8,7 @@ export interface DialogProps {
|
|
|
8
8
|
modal?: boolean;
|
|
9
9
|
trigger?: ReactNode;
|
|
10
10
|
children?: ReactNode;
|
|
11
|
+
renderTooltip?: (trigger: ReactNode) => ReactNode;
|
|
11
12
|
open?: boolean;
|
|
12
13
|
onOpenChange?: (open: boolean) => void;
|
|
13
14
|
onAnimationEnd?: () => void;
|
|
@@ -33,6 +34,7 @@ type ActionsProps = {
|
|
|
33
34
|
onClick: () => void;
|
|
34
35
|
loading?: boolean;
|
|
35
36
|
disabled?: boolean;
|
|
37
|
+
disabledTooltip?: string;
|
|
36
38
|
};
|
|
37
39
|
cancel?: {
|
|
38
40
|
text: string;
|
|
@@ -1,29 +1,14 @@
|
|
|
1
1
|
import type { FilterOption } from "../FilterField";
|
|
2
|
-
export interface DocumentCardProps
|
|
3
|
-
onSelect: () => void;
|
|
4
|
-
documentURL: string;
|
|
5
|
-
}
|
|
6
|
-
export declare function DocumentCard(props: DocumentCardProps): JSX.Element;
|
|
7
|
-
interface DocumentTypeBadgeProps {
|
|
2
|
+
export interface DocumentCardProps {
|
|
8
3
|
documentType: string;
|
|
9
|
-
|
|
10
|
-
}
|
|
11
|
-
interface TitleProps {
|
|
4
|
+
documentURL: string;
|
|
12
5
|
title: string;
|
|
13
|
-
|
|
14
|
-
status?: "published" | "release" | "archived" | "unclassified";
|
|
15
|
-
}
|
|
16
|
-
interface DescriptionProps {
|
|
17
|
-
description?: string;
|
|
18
|
-
loading?: boolean;
|
|
19
|
-
}
|
|
20
|
-
interface PreviewImageProps {
|
|
6
|
+
statusColor: "grey" | "green" | "amber" | "purple";
|
|
21
7
|
previewImageUrl?: string;
|
|
8
|
+
description?: string;
|
|
22
9
|
loading?: boolean;
|
|
23
|
-
}
|
|
24
|
-
interface FooterProps {
|
|
25
10
|
tags: string[];
|
|
26
|
-
loading?: boolean;
|
|
27
11
|
tagsFilter?: Set<FilterOption>;
|
|
12
|
+
onSelect: () => void;
|
|
28
13
|
}
|
|
29
|
-
export
|
|
14
|
+
export declare function DocumentCard(props: DocumentCardProps): JSX.Element;
|
|
@@ -1,16 +1,40 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { DocumentCard } from "./DocumentCard";
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: typeof DocumentCard;
|
|
5
|
+
argTypes: {
|
|
6
|
+
statusColor: {
|
|
7
|
+
control: {
|
|
8
|
+
type: string;
|
|
9
|
+
};
|
|
10
|
+
options: string[];
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
export default meta;
|
|
3
15
|
export declare const Default: {
|
|
4
|
-
render:
|
|
16
|
+
render: (args: {
|
|
17
|
+
documentType: string;
|
|
18
|
+
documentURL: string;
|
|
19
|
+
title: string;
|
|
20
|
+
statusColor: "green" | "grey" | "purple" | "amber";
|
|
21
|
+
previewImageUrl?: string | undefined;
|
|
22
|
+
description?: string | undefined;
|
|
23
|
+
loading?: boolean | undefined;
|
|
24
|
+
tags: string[];
|
|
25
|
+
tagsFilter?: Set<import("../FilterField").FilterOption> | undefined;
|
|
26
|
+
onSelect: () => void;
|
|
27
|
+
}) => JSX.Element;
|
|
5
28
|
args: {
|
|
6
29
|
documentType: string;
|
|
30
|
+
documentURL: string;
|
|
7
31
|
title: string;
|
|
8
32
|
description: string;
|
|
9
33
|
tags: string[];
|
|
10
34
|
previewImageUrl: string;
|
|
11
35
|
onSelect: () => undefined;
|
|
12
|
-
loading:
|
|
13
|
-
|
|
36
|
+
loading: false;
|
|
37
|
+
statusColor: "green";
|
|
14
38
|
};
|
|
15
39
|
name: string;
|
|
16
40
|
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { Dot } from "./Dot";
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: typeof Dot;
|
|
5
|
+
argTypes: {
|
|
6
|
+
color: {
|
|
7
|
+
control: {
|
|
8
|
+
type: string;
|
|
9
|
+
};
|
|
10
|
+
options: string[];
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
export default meta;
|
|
15
|
+
export declare const Default: {
|
|
16
|
+
name: string;
|
|
17
|
+
args: {
|
|
18
|
+
color: "green";
|
|
19
|
+
};
|
|
20
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Dot } from "./Dot";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
2
|
export interface DropdownMenuProps {
|
|
3
3
|
modal?: boolean;
|
|
4
4
|
children: ReactNode;
|
|
@@ -14,7 +14,8 @@ export interface DropdownMenuContentProps {
|
|
|
14
14
|
side?: "bottom" | "left" | "right" | "top";
|
|
15
15
|
minWidth?: 128 | 256;
|
|
16
16
|
children: ReactNode;
|
|
17
|
-
|
|
17
|
+
asPortal?: boolean;
|
|
18
|
+
maxHeight?: 256;
|
|
18
19
|
}
|
|
19
20
|
export declare function DropdownMenuContent(props: DropdownMenuContentProps): JSX.Element;
|
|
20
21
|
interface DropdownMenuItemProps {
|