@indico-data/design-system 2.60.15 → 3.0.1
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/lib/components/forms/date/inputDateRangePicker/InputDateRangePicker.d.ts +1 -1
- package/lib/components/index.d.ts +1 -1
- package/lib/components/modal/ConfirmationModal.d.ts +2 -0
- package/lib/components/modal/Modal.d.ts +1 -1
- package/lib/components/modal/Modal.stories.d.ts +3 -1
- package/lib/components/modal/index.d.ts +1 -0
- package/lib/components/modal/types.d.ts +18 -0
- package/lib/index.css +1827 -677
- package/lib/index.d.ts +22 -5
- package/lib/index.esm.css +1827 -677
- package/lib/index.esm.js +29 -6
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +29 -5
- package/lib/index.js.map +1 -1
- package/lib/types.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/badge/styles/Badge.scss +6 -6
- package/src/components/button/styles/Button.scss +7 -13
- package/src/components/button/styles/_variables.scss +47 -48
- package/src/components/card/styles/Card.scss +15 -6
- package/src/components/floatUI/styles/_variables.scss +3 -3
- package/src/components/forms/date/datePicker/styles/DatePicker.scss +15 -16
- package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.tsx +1 -1
- package/src/components/forms/form/styles/Form.scss +25 -25
- package/src/components/forms/select/__tests__/Select.test.tsx +11 -6
- package/src/components/forms/select/styles/Select.scss +9 -10
- package/src/components/index.ts +1 -1
- package/src/components/menu/styles/_variables.scss +8 -8
- package/src/components/modal/ConfirmationModal.mdx +69 -0
- package/src/components/modal/ConfirmationModal.tsx +132 -0
- package/src/components/modal/Modal.mdx +72 -42
- package/src/components/modal/Modal.stories.tsx +200 -40
- package/src/components/modal/Modal.tsx +20 -3
- package/src/components/modal/__tests__/Modal.test.tsx +12 -0
- package/src/components/modal/index.ts +1 -0
- package/src/components/modal/styles/Modal.scss +51 -20
- package/src/components/modal/types.ts +22 -0
- package/src/components/pill/Pill.stories.tsx +28 -14
- package/src/components/pill/Pill.tsx +7 -1
- package/src/components/pill/styles/Pill.scss +79 -55
- package/src/components/tanstackTable/styles/_variables.scss +23 -24
- package/src/components/tanstackTable/styles/table.scss +3 -3
- package/src/components/toast/Toast.mdx +32 -1
- package/src/components/toast/Toast.stories.tsx +32 -9
- package/src/components/toast/styles/Toast.scss +62 -12
- package/src/components/tooltip/Tooltip.tsx +6 -2
- package/src/components/tooltip/styles/Tooltip.scss +6 -2
- package/src/components/truncate/Truncate.tsx +1 -1
- package/src/index.ts +1 -1
- package/src/styles/_borders.scss +35 -4
- package/src/styles/_colors.scss +1 -1
- package/src/styles/globals.scss +107 -25
- package/src/styles/storybook.scss +23 -6
- package/src/styles/variables/_borders.scss +23 -7
- package/src/styles/variables/_padding.scss +0 -4
- package/src/styles/variables/themes/dark.scss +193 -133
- package/src/styles/variables/themes/light.scss +192 -133
- package/src/stylesAndAnimations/borders/BorderColor.tsx +87 -40
- package/src/stylesAndAnimations/colors/Swatch.tsx +0 -1
- package/src/stylesAndAnimations/colors/constants.ts +316 -193
- package/src/types.ts +5 -3
package/lib/index.d.ts
CHANGED
|
@@ -9,7 +9,6 @@ import { CSSObject } from 'styled-components';
|
|
|
9
9
|
import { Props as Props$4 } from 'react-select';
|
|
10
10
|
import { DateRange, OnSelectHandler, Mode, CustomComponents, Matcher, Formatters, MonthChangeEventHandler, DayEventHandler } from 'react-day-picker';
|
|
11
11
|
export { DateRange } from 'react-day-picker';
|
|
12
|
-
import { IconName as IconName$2 } from '@/types';
|
|
13
12
|
import { ColumnDef, Row as Row$1, SortingState } from '@tanstack/react-table';
|
|
14
13
|
export { ColumnDef, SortingFn, SortingState, Column as TanstackTableColumnType, Row as TanstackTableRowType, Table as TanstackTableType, flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
|
|
15
14
|
import { PlacesType } from 'react-tooltip';
|
|
@@ -232,7 +231,7 @@ type PermafrostComponent = {
|
|
|
232
231
|
'data-testid'?: string;
|
|
233
232
|
};
|
|
234
233
|
|
|
235
|
-
type SemanticColor = '
|
|
234
|
+
type SemanticColor = 'neutral' | 'info' | 'warning' | 'error' | 'success' | 'teal' | 'purple' | 'orange' | 'pending';
|
|
236
235
|
|
|
237
236
|
type ButtonVariants = 'solid' | 'outline' | 'link' | 'action' | 'destructive' | 'soft';
|
|
238
237
|
type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg';
|
|
@@ -467,7 +466,7 @@ interface InputDateRangePickerProps {
|
|
|
467
466
|
isOpen?: boolean;
|
|
468
467
|
setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
469
468
|
className?: string;
|
|
470
|
-
inputIconName?: IconName
|
|
469
|
+
inputIconName?: IconName;
|
|
471
470
|
inputPlaceholder?: string;
|
|
472
471
|
toErrorMessage?: string | undefined;
|
|
473
472
|
fromErrorMessage?: string | undefined;
|
|
@@ -559,9 +558,27 @@ interface ModalProps {
|
|
|
559
558
|
overlayElement?: (props: any, contentElement: React.ReactElement) => React.ReactElement;
|
|
560
559
|
position?: 'top' | 'center';
|
|
561
560
|
parentSelector?: () => HTMLElement;
|
|
561
|
+
title?: string;
|
|
562
|
+
subtitle?: string;
|
|
563
|
+
footer?: React.ReactNode;
|
|
564
|
+
maxWidthInPixels?: number;
|
|
562
565
|
}
|
|
566
|
+
interface ConfirmationModalProps extends ModalProps {
|
|
567
|
+
onConfirmRequest?: ({ dontShowAgain, }: {
|
|
568
|
+
dontShowAgain?: boolean;
|
|
569
|
+
}) => void | Promise<void> | Promise<boolean>;
|
|
570
|
+
onCancelRequest?: () => void | Promise<void> | Promise<boolean>;
|
|
571
|
+
hasDontShowAgainCheckbox?: boolean;
|
|
572
|
+
confirmationButtonVariant?: ButtonVariants;
|
|
573
|
+
confirmationButtonText?: string;
|
|
574
|
+
cancelButtonText?: string;
|
|
575
|
+
icon?: IconName;
|
|
576
|
+
status?: 'info' | 'success' | 'error';
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
declare const Modal: ({ className, children, isOpen, onRequestClose, portalClassName, overlayClassName, appElement, shouldCloseOnOverlayClick, shouldCloseOnEsc, testId, contentElement, overlayElement, position, parentSelector, title, subtitle, footer, maxWidthInPixels, ...rest }: ModalProps) => react_jsx_runtime.JSX.Element;
|
|
563
580
|
|
|
564
|
-
declare const
|
|
581
|
+
declare const ConfirmationModal: ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonText, cancelButtonText, confirmationButtonVariant, icon, title, status, maxWidthInPixels, hasDontShowAgainCheckbox, }: ConfirmationModalProps) => react_jsx_runtime.JSX.Element;
|
|
565
582
|
|
|
566
583
|
type WithPaginationProps = {
|
|
567
584
|
rowsPerPage: number;
|
|
@@ -682,4 +699,4 @@ interface TruncateProps {
|
|
|
682
699
|
|
|
683
700
|
declare const Truncate: ({ lineClamp, truncateString, hasTooltip, tooltipId, ...rest }: TruncateProps) => react_jsx_runtime.JSX.Element;
|
|
684
701
|
|
|
685
|
-
export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, Col, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, InputDateRangePicker, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, LabeledSelect as SelectInput, type SelectOption, SingleInputDatePicker, Skeleton, Stepper, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, Truncate, registerFontAwesomeIcons };
|
|
702
|
+
export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, Col, ConfirmationModal, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, InputDateRangePicker, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, LabeledSelect as SelectInput, type SelectOption, SingleInputDatePicker, Skeleton, Stepper, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, Truncate, registerFontAwesomeIcons };
|