@uniformdev/design-system 16.2.0 → 16.2.1-alpha.320
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/esm/index.js +492 -185
- package/dist/index.d.ts +232 -5
- package/dist/index.js +492 -185
- package/package.json +7 -6
package/dist/index.d.ts
CHANGED
|
@@ -36,6 +36,15 @@ declare const breakpoints: breakpointsProps;
|
|
|
36
36
|
* @example `${mq('md')} { background: red; }`
|
|
37
37
|
*/
|
|
38
38
|
declare const mq: (size: breakpointSizeProps) => string;
|
|
39
|
+
/**
|
|
40
|
+
* Media Query Helper Function
|
|
41
|
+
* @function
|
|
42
|
+
* @param {string} cssProp - The css property you want to check support
|
|
43
|
+
* @returns {string} - compiled supports query e.g. supports (display: grid) {}
|
|
44
|
+
* @example `${supports('display: grid)} { display: grid; }`
|
|
45
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
|
|
46
|
+
*/
|
|
47
|
+
declare const supports: (cssProp: string) => string;
|
|
39
48
|
|
|
40
49
|
declare const labelText: _emotion_react.SerializedStyles;
|
|
41
50
|
declare const input: _emotion_react.SerializedStyles;
|
|
@@ -90,6 +99,17 @@ declare type ButtonProps = ButtonProps$1 & {
|
|
|
90
99
|
*/
|
|
91
100
|
declare const Button: React$1.ForwardRefExoticComponent<Pick<ButtonProps, "form" | "slot" | "style" | "title" | "className" | "key" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "focusable" | "buttonType" | "size" | "unstable_system" | "disabled" | "unstable_clickOnEnter" | "unstable_clickOnSpace" | "wrapElement" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "rounded"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
92
101
|
|
|
102
|
+
declare const button: _emotion_react.SerializedStyles;
|
|
103
|
+
declare const buttonRippleEffect: (props: {
|
|
104
|
+
hoverColor: string;
|
|
105
|
+
activeColor?: string;
|
|
106
|
+
}) => _emotion_react.SerializedStyles;
|
|
107
|
+
declare const buttonPrimary: _emotion_react.SerializedStyles;
|
|
108
|
+
declare const buttonSecondary: _emotion_react.SerializedStyles;
|
|
109
|
+
declare const buttonUnimportant: _emotion_react.SerializedStyles;
|
|
110
|
+
declare const buttonGhost: _emotion_react.SerializedStyles;
|
|
111
|
+
declare const buttonTertiary: _emotion_react.SerializedStyles;
|
|
112
|
+
|
|
93
113
|
declare const iconNames: readonly ["add-r", "add", "airplane", "alarm", "album", "align-bottom", "align-center", "align-left", "align-middle", "align-right", "align-top", "anchor", "apple-watch", "arrange-back", "arrange-front", "arrow-align-h", "arrow-align-v", "arrow-bottom-left-o", "arrow-bottom-left-r", "arrow-bottom-left", "arrow-bottom-right-o", "arrow-bottom-right-r", "arrow-bottom-right", "arrow-down-o", "arrow-down-r", "arrow-down", "arrow-left-o", "arrow-left-r", "arrow-left", "arrow-long-down-c", "arrow-long-down-e", "arrow-long-down-l", "arrow-long-down-r", "arrow-long-down", "arrow-long-left-c", "arrow-long-left-e", "arrow-long-left-l", "arrow-long-left-r", "arrow-long-left", "arrow-long-right-c", "arrow-long-right-e", "arrow-long-right-l", "arrow-long-right-r", "arrow-long-right", "arrow-long-up-c", "arrow-long-up-e", "arrow-long-up-l", "arrow-long-up-r", "arrow-long-up", "arrow-right-o", "arrow-right-r", "arrow-right", "arrow-top-left-o", "arrow-top-left-r", "arrow-top-left", "arrow-top-right-o", "arrow-top-right-r", "arrow-top-right", "arrow-up-o", "arrow-up-r", "arrow-up", "arrows-breake-h", "arrows-breake-v", "arrows-exchange-alt-v", "arrows-exchange-alt", "arrows-exchange-v", "arrows-exchange", "arrows-expand-down-left", "arrows-expand-down-right", "arrows-expand-left-alt", "arrows-expand-left", "arrows-expand-right-alt", "arrows-expand-right", "arrows-expand-up-left", "arrows-expand-up-right", "arrows-h-alt", "arrows-h", "arrows-merge-alt-h", "arrows-merge-alt-v", "arrows-scroll-h", "arrows-scroll-v", "arrows-shrink-h", "arrows-shrink-v", "arrows-v-alt", "arrows-v", "assign", "asterisk", "attachment", "attribution", "awards", "backspace", "band-aid", "battery-empty", "battery-full", "battery", "bee", "bell", "bitbucket", "block", "board", "bolt", "bookmark", "border-all", "border-bottom", "border-left", "border-right", "border-style-dashed", "border-style-dotted", "border-style-solid", "border-top", "bot", "bowl", "box", "boy", "briefcase", "browse", "browser", "brush", "bulb", "c-plus-plus", "calculator", "calendar-dates", "calendar-due", "calendar-next", "calendar-today", "calendar-two", "calendar", "calibrate", "camera", "cap", "captions", "card-clubs", "card-diamonds", "card-hearts", "card-spades", "carousel", "cast", "chart", "check-o", "check-r", "check", "chevron-double-down-o", "chevron-double-down-r", "chevron-double-down", "chevron-double-left-o", "chevron-double-left-r", "chevron-double-left", "chevron-double-right-o", "chevron-double-right-r", "chevron-double-right", "chevron-double-up-o", "chevron-double-up-r", "chevron-double-up", "chevron-down-o", "chevron-down-r", "chevron-down", "chevron-left-o", "chevron-left-r", "chevron-left", "chevron-right-o", "chevron-right-r", "chevron-right", "chevron-up-o", "chevron-up-r", "chevron-up", "clapper-board", "clipboard", "close-o", "close-r", "close", "cloud", "code-slash", "code", "coffee", "collage", "color-bucket", "color-picker", "comment", "community", "components", "compress-left", "compress-right", "compress-v", "compress", "controller", "copy", "copyright", "corner-double-down-left", "corner-double-down-right", "corner-double-left-down", "corner-double-left-up", "corner-double-right-down", "corner-double-right-up", "corner-double-up-left", "corner-double-up-right", "corner-down-left", "corner-down-right", "corner-left-down", "corner-left-up", "corner-right-down", "corner-right-up", "corner-up-left", "corner-up-right", "credit-card", "crop", "cross", "crown", "danger", "dark-mode", "data", "database", "debug", "desktop", "details-less", "details-more", "dialpad", "dice-1", "dice-2", "dice-3", "dice-4", "dice-5", "dice-6", "disc", "display-flex", "display-fullwidth", "display-grid", "display-spacing", "distribute-horizontal", "distribute-vertical", "dock-bottom", "dock-left", "dock-right", "dock-window", "dollar", "drive", "drop-invert", "drop-opacity", "drop", "duplicate", "edit-black-point", "edit-contrast", "edit-exposure", "edit-fade", "edit-flip-h", "edit-flip-v", "edit-highlight", "edit-markup", "edit-mask", "edit-noise", "edit-shadows", "edit-straight", "edit-unmask", "eject", "enter", "erase", "ereader", "ericsson", "ethernet", "euro", "expand", "export", "extension-add", "extension-alt", "extension-remove", "extension", "external", "eye-alt", "eye", "feed", "file-add", "file-document", "file-remove", "file", "film", "filters", "flag-alt", "flag", "folder-add", "folder-remove", "folder", "font-height", "font-spacing", "format-bold", "format-center", "format-color", "format-heading", "format-indent-decrease", "format-indent-increase", "format-italic", "format-justify", "format-left", "format-line-height", "format-right", "format-separator", "format-slash", "format-strike", "format-text", "format-underline", "format-uppercase", "games", "gender-female", "gender-male", "ghost-character", "gift", "girl", "git-branch", "git-commit", "git-fork", "git-pull", "glass-alt", "glass", "globe-alt", "globe", "gym", "hashtag", "headset", "heart", "home-alt", "home-screen", "home", "icecream", "image", "import", "inbox", "infinity", "info", "inpicture", "insert-after-o", "insert-after-r", "insert-after", "insert-before-o", "insert-before-r", "insert-before", "insights", "internal", "key", "keyboard", "keyhole", "laptop", "layout-grid-small", "layout-grid", "layout-list", "layout-pin", "link", "list-tree", "list", "live-photo", "loadbar-alt", "loadbar-doc", "loadbar-sound", "loadbar", "lock-unlock", "lock", "log-in", "log-off", "log-out", "loupe", "magnet", "mail-forward", "mail-open", "mail-reply", "mail", "math-divide", "math-equal", "math-minus", "math-percent", "math-plus", "maximize-alt", "maximize", "media-live", "media-podcast", "menu-boxed", "menu-cake", "menu-cheese", "menu-grid-o", "menu-grid-r", "menu-hotdog", "menu-left-alt", "menu-left", "menu-motion", "menu-oreos", "menu-right-alt", "menu-right", "menu-round", "menu", "merge-horizontal", "merge-vertical", "mic", "mini-player", "minimize-alt", "minimize", "modem", "moon", "more-alt", "more-o", "more-r", "more-vertical-alt", "more-vertical-o", "more-vertical-r", "more-vertical", "more", "mouse", "move-down", "move-left", "move-right", "move-task", "move-up", "music-note", "music-speaker", "music", "nametag", "notes", "notifications", "options", "organisation", "password", "path-back", "path-crop", "path-divide", "path-exclude", "path-front", "path-intersect", "path-outline", "path-trim", "path-unite", "pen", "pentagon-bottom-left", "pentagon-bottom-right", "pentagon-down", "pentagon-left", "pentagon-right", "pentagon-top-left", "pentagon-top-right", "pentagon-up", "performance", "phone", "photoscan", "piano", "pill", "pin-alt", "pin-bottom", "pin-top", "pin", "play-backwards", "play-button-o", "play-button-r", "play-button", "play-forwards", "play-list-add", "play-list-check", "play-list-remove", "play-list-search", "play-list", "play-pause-o", "play-pause-r", "play-pause", "play-stop-o", "play-stop-r", "play-stop", "play-track-next-o", "play-track-next-r", "play-track-next", "play-track-prev-o", "play-track-prev-r", "play-track-prev", "plug", "polaroid", "poll", "presentation", "printer", "profile", "pull-clear", "push-chevron-down-o", "push-chevron-down-r", "push-chevron-down", "push-chevron-left-o", "push-chevron-left-r", "push-chevron-left", "push-chevron-right-o", "push-chevron-right-r", "push-chevron-right", "push-chevron-up-o", "push-chevron-up-r", "push-chevron-up", "push-down", "push-left", "push-right", "push-up", "qr", "quote-o", "quote", "radio-check", "radio-checked", "ratio", "read", "readme", "record", "redo", "remote", "remove-r", "remove", "rename", "reorder", "repeat", "ring", "row-first", "row-last", "ruler", "sand-clock", "scan", "screen-mirror", "screen-shot", "screen-wide", "screen", "scroll-h", "scroll-v", "search-found", "search-loading", "search", "select-o", "select-r", "select", "server", "shape-circle", "shape-half-circle", "shape-hexagon", "shape-rhombus", "shape-square", "shape-triangle", "shape-zigzag", "share", "shield", "shopping-bag", "shopping-cart", "shortcut", "sidebar-open", "sidebar-right", "sidebar", "signal", "size", "sleep", "smart-home-boiler", "smart-home-cooker", "smart-home-heat", "smart-home-light", "smart-home-refrigerator", "smart-home-wash-machine", "smartphone-chip", "smartphone-ram", "smartphone-shake", "smartphone", "smile-mouth-open", "smile-neutral", "smile-no-mouth", "smile-none", "smile-sad", "smile-upside", "smile", "software-download", "software-upload", "sort-az", "sort-za", "space-between-v", "space-between", "spinner-alt", "spinner-two-alt", "spinner-two", "spinner", "stack", "stopwatch", "stories", "style", "sun", "support", "swap-vertical", "swap", "sweden", "swiss", "sync", "tab", "tag", "tap-double", "tap-single", "template", "tennis", "terminal", "terrain", "thermometer", "thermostat", "tikcode", "time", "timelapse", "timer", "today", "toggle-off", "toggle-on", "toggle-square-off", "toggle-square", "toolbar-bottom", "toolbar-left", "toolbar-right", "toolbar-top", "toolbox", "touchpad", "track", "transcript", "trash-empty", "trash", "tree", "trees", "trending-down", "trending", "trophy", "tv", "ui-kit", "umbrella", "unavailable", "unblock", "undo", "unsplash", "usb-c", "usb", "user-add", "user-list", "user-remove", "user", "view-cols", "view-comfortable", "view-day", "view-grid", "view-list", "view-month", "view-split", "vinyl", "voicemail-o", "voicemail-r", "voicemail", "volume", "webcam", "website", "work-alt", "yinyang", "zoom-in", "zoom-out"];
|
|
94
114
|
/** A list of available icon names that can be used with the Uniform brand */
|
|
95
115
|
declare type IconName = typeof iconNames[number];
|
|
@@ -309,12 +329,16 @@ declare type InputToggleProps = React$1.HTMLAttributes<HTMLInputElement> & {
|
|
|
309
329
|
caption?: string;
|
|
310
330
|
/** (optional) sets shows the the error message value */
|
|
311
331
|
errorMessage?: string;
|
|
332
|
+
/** (optional) sets the font weight of the label text
|
|
333
|
+
* @default 'bold'
|
|
334
|
+
*/
|
|
335
|
+
fontWeight?: 'normal' | 'medium' | 'bold';
|
|
312
336
|
};
|
|
313
337
|
/**
|
|
314
338
|
* Component that creates a checkbox or radio input field
|
|
315
339
|
* @example <InputToggle label="Do you like ice cream?" type="checkbox" name="ice-cream" />
|
|
316
340
|
*/
|
|
317
|
-
declare const InputToggle: ({ label, type, disabled, checked, name, caption, errorMessage, ...props }: InputToggleProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
341
|
+
declare const InputToggle: ({ label, type, disabled, checked, name, caption, errorMessage, fontWeight, ...props }: InputToggleProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
318
342
|
|
|
319
343
|
declare type TextareaProps = React$1.TextareaHTMLAttributes<HTMLTextAreaElement> & {
|
|
320
344
|
/** (optional) sets the label value */
|
|
@@ -370,6 +394,7 @@ declare const useMenuContext: () => MenuStateReturn;
|
|
|
370
394
|
*/
|
|
371
395
|
declare const Menu: ({ menuLabel, menuTrigger, placement, menuItemsContainerCssClasses, children, }: MenuProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
372
396
|
|
|
397
|
+
declare type MenuItemTextThemeProps = 'base' | 'red';
|
|
373
398
|
declare type MenuItemProps = MenuItemHTMLProps & {
|
|
374
399
|
/** sets child elements within the component */
|
|
375
400
|
children: ChildFunction | React$1.ReactNode;
|
|
@@ -379,6 +404,10 @@ declare type MenuItemProps = MenuItemHTMLProps & {
|
|
|
379
404
|
icon?: React$1.ReactElement;
|
|
380
405
|
/** When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set. */
|
|
381
406
|
focusable?: boolean;
|
|
407
|
+
/** (optional) set the menu item text color
|
|
408
|
+
* @default 'base'
|
|
409
|
+
*/
|
|
410
|
+
textColor?: MenuItemTextThemeProps;
|
|
382
411
|
};
|
|
383
412
|
declare type ChildFunction = (menuItemProps: MenuItemHTMLProps) => React$1.ReactElement | null;
|
|
384
413
|
/**
|
|
@@ -453,8 +482,10 @@ declare type HeadingProps = {
|
|
|
453
482
|
declare const Heading: ({ level, children, ...hAttributes }: HeadingProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
454
483
|
|
|
455
484
|
declare type ParagraphProps = {
|
|
456
|
-
/** adds child elements to the paragraph tag */
|
|
457
|
-
children
|
|
485
|
+
/** (optional) adds child elements to the paragraph tag */
|
|
486
|
+
children?: React$1.ReactNode;
|
|
487
|
+
/** (optional) sets raw html values */
|
|
488
|
+
htmlContent?: string | string[];
|
|
458
489
|
/** (optional) allows user to set overriding class names or emotion styles */
|
|
459
490
|
className?: SerializedStyles | string;
|
|
460
491
|
} & React$1.HTMLAttributes<HTMLParagraphElement>;
|
|
@@ -462,7 +493,20 @@ declare type ParagraphProps = {
|
|
|
462
493
|
* Component for generic paragraph tags
|
|
463
494
|
* @example <Paragraph>This is the text that was be inside the paragraph tag.</Paragraph>
|
|
464
495
|
*/
|
|
465
|
-
declare const Paragraph: ({ className, children, ...pAttributes }: ParagraphProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
496
|
+
declare const Paragraph: ({ className, htmlContent, children, ...pAttributes }: ParagraphProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
497
|
+
|
|
498
|
+
interface RouteProps {
|
|
499
|
+
as: string;
|
|
500
|
+
href: string;
|
|
501
|
+
}
|
|
502
|
+
declare type PageHeaderSectionProps = React$1.HTMLAttributes<HTMLElement> & {
|
|
503
|
+
title: string | undefined;
|
|
504
|
+
desc?: React$1.ReactNode;
|
|
505
|
+
children?: React$1.ReactNode;
|
|
506
|
+
linkProps?: RouteProps;
|
|
507
|
+
linkText?: string;
|
|
508
|
+
};
|
|
509
|
+
declare const PageHeaderSection: ({ title, desc, children, linkText, linkProps, ...htmlProps }: PageHeaderSectionProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
466
510
|
|
|
467
511
|
declare type LinkColorProps = 'currentColor' | 'red' | 'green';
|
|
468
512
|
declare type LinkProps = React$1.AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
@@ -474,8 +518,35 @@ declare type LinkProps = React$1.AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
|
474
518
|
linkColor?: LinkColorProps;
|
|
475
519
|
/** (optional) sets whether the link is external or not adding an icon to the link */
|
|
476
520
|
external?: boolean;
|
|
521
|
+
/** (optional) For supporting inside next/link component */
|
|
522
|
+
ref?: React$1.ForwardedRef<HTMLAnchorElement>;
|
|
477
523
|
};
|
|
478
524
|
declare const Link: ({ external, text, linkColor, ...props }: LinkProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
525
|
+
declare const LinkWithRef: React$1.ForwardRefExoticComponent<Pick<LinkProps, "text" | "external" | keyof React$1.AnchorHTMLAttributes<HTMLAnchorElement> | "linkColor"> & React$1.RefAttributes<HTMLAnchorElement>>;
|
|
526
|
+
|
|
527
|
+
declare type IntegrationHeaderSectionProps = React$1.HtmlHTMLAttributes<HTMLDivElement> & {
|
|
528
|
+
/** sets the title text of the integration */
|
|
529
|
+
title: string;
|
|
530
|
+
/** sets the description text of the integration */
|
|
531
|
+
description: string | string[];
|
|
532
|
+
/** (optional) sets the icon of the integration */
|
|
533
|
+
icon?: string | React$1.ComponentType<{
|
|
534
|
+
className?: string;
|
|
535
|
+
}>;
|
|
536
|
+
/** (optional) sets the react child elements*/
|
|
537
|
+
children?: React$1.ReactNode;
|
|
538
|
+
/** (optional) sets an external link to documentation */
|
|
539
|
+
docsLink?: string;
|
|
540
|
+
/** (optional) sets the badge text of the integration */
|
|
541
|
+
badgeText?: string;
|
|
542
|
+
/** (optional) location for the menu options to be positioned */
|
|
543
|
+
menu?: React$1.ReactNode;
|
|
544
|
+
};
|
|
545
|
+
/**
|
|
546
|
+
* Uniform Integration Header Section Component
|
|
547
|
+
* @Example <IntegrationHeaderSection title="custom integration" description="custom integration description text" />
|
|
548
|
+
*/
|
|
549
|
+
declare const IntegrationHeaderSection: ({ title, description, icon, docsLink, badgeText, menu, children, ...props }: IntegrationHeaderSectionProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
479
550
|
|
|
480
551
|
declare type ScrollableListProps = {
|
|
481
552
|
/** (optional) sets the label value */
|
|
@@ -692,4 +763,160 @@ declare type LimitsBarProps = {
|
|
|
692
763
|
*/
|
|
693
764
|
declare const LimitsBar: ({ current, max, label }: LimitsBarProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
694
765
|
|
|
695
|
-
|
|
766
|
+
declare type ArrowPositionProps = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom';
|
|
767
|
+
declare type InlineAlertProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
768
|
+
/** sets the id of the popup and the aria-controls attibute on the close button
|
|
769
|
+
* @example 'my-alert-box'
|
|
770
|
+
*/
|
|
771
|
+
id: string;
|
|
772
|
+
/** sets the title of the inline alert message */
|
|
773
|
+
title: string;
|
|
774
|
+
/** sets the text of the inline alert message */
|
|
775
|
+
text: string;
|
|
776
|
+
/** (optional) sets the position of the arrow
|
|
777
|
+
* @default 'left-top'
|
|
778
|
+
*/
|
|
779
|
+
arrowPosition?: ArrowPositionProps;
|
|
780
|
+
/** (optional) allows to position alert using direct css */
|
|
781
|
+
positionCss?: SerializedStyles;
|
|
782
|
+
};
|
|
783
|
+
/**
|
|
784
|
+
* Uniform Inline Alert Component
|
|
785
|
+
* @example <InlineAlert id="my-alert-box" title="my alert box" text="some description text" />
|
|
786
|
+
*/
|
|
787
|
+
declare const InlineAlert: ({ id, title, text, arrowPosition, positionCss, ...btnProps }: InlineAlertProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
788
|
+
|
|
789
|
+
interface IntegrationTileFields {
|
|
790
|
+
icon?: string | React.ComponentType<{
|
|
791
|
+
className?: string;
|
|
792
|
+
}> | undefined;
|
|
793
|
+
name: string;
|
|
794
|
+
}
|
|
795
|
+
|
|
796
|
+
declare type IntegrationTileProps = IntegrationTileFields & React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
797
|
+
id: string;
|
|
798
|
+
requiedEntitlement?: boolean | undefined;
|
|
799
|
+
onAddIntegration: () => void;
|
|
800
|
+
isPublic?: boolean;
|
|
801
|
+
isInstalled?: boolean;
|
|
802
|
+
authorIcon?: string | React$1.ComponentType<{
|
|
803
|
+
className?: string;
|
|
804
|
+
}> | undefined;
|
|
805
|
+
};
|
|
806
|
+
declare const IntegrationTile: ({ id, icon, name, requiedEntitlement, onAddIntegration, isPublic, isInstalled, authorIcon, ...btnProps }: IntegrationTileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
807
|
+
|
|
808
|
+
declare type CreateTeamIntegrationTileProps = {
|
|
809
|
+
/** (optional) sets the title value
|
|
810
|
+
* @default 'Create a custom integration'
|
|
811
|
+
*/
|
|
812
|
+
title?: string;
|
|
813
|
+
/** (optional) sets the button text value
|
|
814
|
+
* @default 'Add Integration'
|
|
815
|
+
*/
|
|
816
|
+
buttonText?: string;
|
|
817
|
+
/** sets the button function call */
|
|
818
|
+
onClick: () => void;
|
|
819
|
+
/** (optional) sets the icon position and icon type
|
|
820
|
+
* @default 'false'
|
|
821
|
+
*/
|
|
822
|
+
asDeepLink?: boolean;
|
|
823
|
+
};
|
|
824
|
+
declare const CreateTeamIntegrationTile: ({ title, buttonText, onClick, asDeepLink, }: CreateTeamIntegrationTileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
825
|
+
|
|
826
|
+
declare type EditTeamIntegrationTileProps = IntegrationTileFields & {
|
|
827
|
+
/** sets the id value */
|
|
828
|
+
id: string;
|
|
829
|
+
/** sets the function call for the button */
|
|
830
|
+
onEdit: () => void;
|
|
831
|
+
/** (optional) sets whether the integration is public or not */
|
|
832
|
+
isPublic?: boolean;
|
|
833
|
+
/** displays the edit button component */
|
|
834
|
+
canEdit: boolean;
|
|
835
|
+
};
|
|
836
|
+
/** Uniform Edit Team Integration Tile
|
|
837
|
+
* @example <EditTeamIntegrationTile id="example" onEdit={() => func()} canEdit={true} isPublis={true} name="example" icon="./image.svg" />
|
|
838
|
+
*/
|
|
839
|
+
declare const EditTeamIntegrationTile: ({ id, icon, name, onEdit, isPublic, canEdit, }: EditTeamIntegrationTileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
840
|
+
|
|
841
|
+
declare type TileContainerProps = React$1.HtmlHTMLAttributes<HTMLDivElement> & {
|
|
842
|
+
/** sets react child elements */
|
|
843
|
+
children: React$1.ReactNode;
|
|
844
|
+
};
|
|
845
|
+
/**
|
|
846
|
+
* Uniform Tile Container Component
|
|
847
|
+
* @example <TileContainer><div>child content</div></TileContainer>
|
|
848
|
+
*/
|
|
849
|
+
declare const TileContainer: ({ children, ...props }: TileContainerProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
850
|
+
|
|
851
|
+
declare type IntegrationComingSoonProps = IntegrationTileFields & {
|
|
852
|
+
/** sets the id and data-testid value */
|
|
853
|
+
id: string;
|
|
854
|
+
/** click event used for tracking analytics data */
|
|
855
|
+
onUpVoteClick: () => void;
|
|
856
|
+
/** (optional) sets the thank you message visibility duration
|
|
857
|
+
* @default 1000
|
|
858
|
+
*/
|
|
859
|
+
timing?: number;
|
|
860
|
+
};
|
|
861
|
+
/**
|
|
862
|
+
* Uniform Integration Coming Soon Component
|
|
863
|
+
* @example <IntegrationComingSoon id="piedpiper" name="Pied Piper" icon="./piedpiper.svg" onUpVoteClick={() => someFunc()} />
|
|
864
|
+
*/
|
|
865
|
+
declare const IntegrationComingSoon: ({ name, icon, id, onUpVoteClick, timing, }: IntegrationComingSoonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
866
|
+
|
|
867
|
+
declare type ClassNameOptions = 'logo' | 'author';
|
|
868
|
+
declare type ResolveIconProps = IntegrationTileFields & React__default.SVGAttributes<SVGElement> & React__default.ImgHTMLAttributes<HTMLImageElement> & {
|
|
869
|
+
/** sets the emotion styles for the rendered image
|
|
870
|
+
* @default 'logo'
|
|
871
|
+
*/
|
|
872
|
+
styleType?: ClassNameOptions;
|
|
873
|
+
};
|
|
874
|
+
/** Uniform Resolve Icon Component
|
|
875
|
+
* @example <ResolveIcon icon="/my-image.png" name="my image" />
|
|
876
|
+
*/
|
|
877
|
+
declare const ResolveIcon: ({ icon, name, styleType, ...props }: ResolveIconProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
|
|
878
|
+
|
|
879
|
+
declare type IntegrationModalIconProps = React$1.ImgHTMLAttributes<HTMLImageElement> & {
|
|
880
|
+
/** sets the icon as inline svg or img tag */
|
|
881
|
+
icon: string | React$1.ComponentType<{
|
|
882
|
+
className?: string;
|
|
883
|
+
}> | undefined;
|
|
884
|
+
/** sets the alt text of the image */
|
|
885
|
+
name: string;
|
|
886
|
+
};
|
|
887
|
+
/**
|
|
888
|
+
* Uniform Integration Modal Icon
|
|
889
|
+
* @example <IntegrationModalIcon name="name" icon="/my-icon.svg" />
|
|
890
|
+
*/
|
|
891
|
+
declare const IntegrationModalIcon: ({ icon, name, ...imgProps }: IntegrationModalIconProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
892
|
+
|
|
893
|
+
declare type BadgeProps = {
|
|
894
|
+
/** sets the text of the badge */
|
|
895
|
+
text: string;
|
|
896
|
+
};
|
|
897
|
+
/**
|
|
898
|
+
* Uniform Badge Component
|
|
899
|
+
* @example <Badge text="My badge" />
|
|
900
|
+
*/
|
|
901
|
+
declare const Badge: ({ text }: BadgeProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
902
|
+
|
|
903
|
+
declare type IntegrationModalHeaderProps = {
|
|
904
|
+
/** sets the icon as inline svg or img tag */
|
|
905
|
+
icon: string | React$1.ComponentType<{
|
|
906
|
+
className?: string;
|
|
907
|
+
}> | undefined | null;
|
|
908
|
+
/** sets the alt text of the image */
|
|
909
|
+
name: string | undefined;
|
|
910
|
+
/** (optional) sets react child elements */
|
|
911
|
+
children?: React$1.ReactNode;
|
|
912
|
+
/** (optional) sets child elements in */
|
|
913
|
+
menu?: React$1.ReactNode;
|
|
914
|
+
};
|
|
915
|
+
declare type HexModalBackgroundProps = React$1.SVGAttributes<SVGElement>;
|
|
916
|
+
declare const HexModalBackground: ({ ...props }: HexModalBackgroundProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
917
|
+
/** Uniform Integration Modal Header
|
|
918
|
+
* @example <IntegrationModalHeader icon="/icon.svg" name="name" />
|
|
919
|
+
*/
|
|
920
|
+
declare const IntegrationModalHeader: ({ icon, name, menu, children }: IntegrationModalHeaderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
921
|
+
|
|
922
|
+
export { ActionButtonsProps, AddButton, AddButtonProps, AddListButton, AddListButtonProps, ArrowPositionProps, Badge, BadgeProps, BoxHeightProps, Button, ButtonProps, ButtonSizeProps, ButtonThemeProps$1 as ButtonThemeProps, ButtonWithMenu, ButtonWithMenuProps, Callout, CalloutProps, CalloutType, Caption, CaptionProps, ChildFunction, ComboBoxGroupBase, CreateTeamIntegrationTile, CreateTeamIntegrationTileProps, DashedBox, DashedBoxProps, EditTeamIntegrationTile, EditTeamIntegrationTileProps, ErrorMessage, ErrorMessageProps, Heading, HeadingProps, HexModalBackground, Icon, IconColor, IconName, IconProps, IconType, IconsProvider, InlineAlert, InlineAlertProps, Input, InputComboBox, InputComboBoxOption, InputComboBoxProps, InputInlineSelect, InputInlineSelectOption, InputInlineSelectProps, InputKeywordSearch, InputKeywordSearchProps, InputProps, InputSelect, InputSelectProps, InputToggle, InputToggleProps, IntegrationComingSoon, IntegrationComingSoonProps, IntegrationHeaderSection, IntegrationHeaderSectionProps, IntegrationModalHeader, IntegrationModalHeaderProps, IntegrationModalIcon, IntegrationModalIconProps, IntegrationTile, IntegrationTileProps, Label, LabelProps, LevelProps, LimitsBar, LimitsBarProps, Link, LinkColorProps, LinkProps, LinkWithRef, LoadingIcon, LoadingIconProps, LoadingIndicator, LoadingOverlay, LoadingOverlayProps, Menu, MenuContext, MenuItem, MenuItemProps, MenuItemTextThemeProps, MenuProps, PageHeaderSection, PageHeaderSectionProps, Paragraph, ParagraphProps, ResolveIcon, ResolveIconProps, ScrollableList, ScrollableListItem, ScrollableListItemProps, ScrollableListProps, ShortcutContext, ShortcutRevealer, Switch, SwitchProps, Table, TableBody, TableBodyProps, TableCellData, TableCellDataProps, TableCellHead, TableCellHeadProps, TableFoot, TableFootProps, TableHead, TableHeadProps, TableProps, TableRow, TableRowProps, TextAlignProps, Textarea, TextareaProps, Theme, ThemeProps, TileContainer, TileContainerProps, UniformBadge, UniformLogo, UniformLogoProps, breakpointSizeProps, breakpoints, breakpointsProps, button, buttonGhost, buttonPrimary, buttonRippleEffect, buttonSecondary, buttonTertiary, buttonUnimportant, input, inputError, inputSelect, labelText, mq, scrollbarStyles, supports, useIconContext, useMenuContext };
|