@indico-data/design-system 2.13.0 → 2.14.0
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/index.css +37 -0
- package/lib/index.d.ts +62 -53
- package/lib/index.esm.css +37 -0
- package/lib/index.esm.js +10 -1
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +10 -0
- package/lib/index.js.map +1 -1
- package/lib/src/components/index.d.ts +1 -0
- package/lib/src/components/skeleton/Skeleton.d.ts +9 -0
- package/lib/src/components/skeleton/Skeleton.stories.d.ts +9 -0
- package/lib/src/components/skeleton/__tests__/Skeleton.test.d.ts +1 -0
- package/lib/src/components/skeleton/index.d.ts +1 -0
- package/lib/src/index.d.ts +1 -0
- package/package.json +1 -1
- package/src/components/index.ts +1 -0
- package/src/components/skeleton/Skeleton.mdx +44 -0
- package/src/components/skeleton/Skeleton.stories.tsx +132 -0
- package/src/components/skeleton/Skeleton.tsx +20 -0
- package/src/components/skeleton/__tests__/Skeleton.test.tsx +25 -0
- package/src/components/skeleton/index.ts +1 -0
- package/src/components/skeleton/styles/Skeleton.scss +41 -0
- package/src/index.ts +1 -0
- package/src/styles/index.scss +1 -0
- package/src/styles/storybook.scss +12 -0
package/lib/index.css
CHANGED
|
@@ -1522,6 +1522,43 @@ form {
|
|
|
1522
1522
|
margin-left: var(--pf-margin-2);
|
|
1523
1523
|
}
|
|
1524
1524
|
|
|
1525
|
+
:root,
|
|
1526
|
+
:root [data-theme=light],
|
|
1527
|
+
:root [data-theme=dark] {
|
|
1528
|
+
--pf-skeleton-color-one: var(--pf-gray-color-200);
|
|
1529
|
+
--pf-skeleton-color-two: var(--pf-gray-color-100);
|
|
1530
|
+
}
|
|
1531
|
+
|
|
1532
|
+
:root [data-theme=dark] {
|
|
1533
|
+
--pf-skeleton-color-one: var(--pf-primary-color-200);
|
|
1534
|
+
--pf-skeleton-color-two: var(--pf-primary-color-100);
|
|
1535
|
+
}
|
|
1536
|
+
|
|
1537
|
+
.skeleton {
|
|
1538
|
+
border-radius: var(--pf-rounded);
|
|
1539
|
+
background-color: var(--pf-gray-color-100);
|
|
1540
|
+
opacity: 0.7;
|
|
1541
|
+
animation: skeleton-loading 1s linear infinite alternate;
|
|
1542
|
+
display: flex;
|
|
1543
|
+
flex-direction: column;
|
|
1544
|
+
width: 100%;
|
|
1545
|
+
height: 30px;
|
|
1546
|
+
}
|
|
1547
|
+
.skeleton.skeleton--full-height {
|
|
1548
|
+
height: 100%;
|
|
1549
|
+
}
|
|
1550
|
+
.skeleton.skeleton--circle {
|
|
1551
|
+
border-radius: var(--pf-rounded-circle);
|
|
1552
|
+
}
|
|
1553
|
+
@keyframes skeleton-loading {
|
|
1554
|
+
0% {
|
|
1555
|
+
background-color: var(--pf-skeleton-color-one);
|
|
1556
|
+
}
|
|
1557
|
+
100% {
|
|
1558
|
+
background-color: var(--pf-skeleton-color-two);
|
|
1559
|
+
}
|
|
1560
|
+
}
|
|
1561
|
+
|
|
1525
1562
|
:root {
|
|
1526
1563
|
--pf-font-family-base: "Mulish", sans-serif;
|
|
1527
1564
|
--pf-font-size-base: 1rem;
|
package/lib/index.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ import { AriaRadioProps, RadioGroupProps as RadioGroupProps$1, AriaRadioGroupPro
|
|
|
7
7
|
import { DateRange } from 'react-day-picker';
|
|
8
8
|
import { ContainerProps, RowProps, ColProps } from 'react-grid-system';
|
|
9
9
|
import { TableProps as TableProps$1, Direction as Direction$1, Alignment as Alignment$1 } from 'react-data-table-component';
|
|
10
|
-
import { Props as Props$
|
|
10
|
+
import { Props as Props$q } from 'react-select';
|
|
11
11
|
|
|
12
12
|
declare const GlobalStyles: () => react_jsx_runtime.JSX.Element;
|
|
13
13
|
|
|
@@ -221,25 +221,25 @@ declare const allColors: {
|
|
|
221
221
|
readonly backgroundColor: "#182432";
|
|
222
222
|
};
|
|
223
223
|
|
|
224
|
-
type Props$
|
|
224
|
+
type Props$p = PermafrostComponent$1 & {
|
|
225
225
|
content: React$1.ReactNode;
|
|
226
226
|
header?: React$1.ReactNode | string;
|
|
227
227
|
open?: boolean;
|
|
228
228
|
};
|
|
229
|
-
declare const Accordion: (props: Props$
|
|
229
|
+
declare const Accordion: (props: Props$p) => react_jsx_runtime.JSX.Element;
|
|
230
230
|
|
|
231
|
-
type Props$
|
|
231
|
+
type Props$o = PermafrostComponent$1 & {
|
|
232
232
|
style?: object;
|
|
233
233
|
children: React$1.ReactNode;
|
|
234
234
|
};
|
|
235
|
-
declare const Section: (props: Props$
|
|
235
|
+
declare const Section: (props: Props$o) => react_jsx_runtime.JSX.Element;
|
|
236
236
|
|
|
237
|
-
type Props$
|
|
237
|
+
type Props$n = PermafrostComponent$1 & {
|
|
238
238
|
title?: string;
|
|
239
239
|
style?: object;
|
|
240
240
|
children: React$1.ReactNode;
|
|
241
241
|
};
|
|
242
|
-
declare const SectionBlock: (props: Props$
|
|
242
|
+
declare const SectionBlock: (props: Props$n) => react_jsx_runtime.JSX.Element;
|
|
243
243
|
|
|
244
244
|
type SectionBodyProps = PermafrostComponent$1 & {
|
|
245
245
|
style?: object;
|
|
@@ -247,12 +247,12 @@ type SectionBodyProps = PermafrostComponent$1 & {
|
|
|
247
247
|
};
|
|
248
248
|
declare const SectionBody: (props: SectionBodyProps) => react_jsx_runtime.JSX.Element;
|
|
249
249
|
|
|
250
|
-
type Props$
|
|
250
|
+
type Props$m = PermafrostComponent$1 & {
|
|
251
251
|
style?: object;
|
|
252
252
|
children?: React$1.ReactNode;
|
|
253
253
|
};
|
|
254
254
|
declare const SectionHeader: {
|
|
255
|
-
(props: Props$
|
|
255
|
+
(props: Props$m): react_jsx_runtime.JSX.Element;
|
|
256
256
|
defaultProps: {
|
|
257
257
|
className: string;
|
|
258
258
|
style: {};
|
|
@@ -284,7 +284,7 @@ declare function Button$1(props: ButtonProps$1): React$1.ReactElement;
|
|
|
284
284
|
type IconButtonVariant = 'default' | 'primary' | 'destructive' | 'outline';
|
|
285
285
|
type ButtonSize = 'normal' | 'large';
|
|
286
286
|
|
|
287
|
-
type Props$
|
|
287
|
+
type Props$l = PermafrostComponent$1 & {
|
|
288
288
|
/**
|
|
289
289
|
* Adjusts vertical alignment of the text label, in relation to the icon
|
|
290
290
|
*/
|
|
@@ -310,9 +310,9 @@ type Props$k = PermafrostComponent$1 & {
|
|
|
310
310
|
*
|
|
311
311
|
* @see {@link https://react-spectrum.adobe.com/blog/building-a-button-part-1.html}
|
|
312
312
|
*/
|
|
313
|
-
declare function IconButton(props: Props$
|
|
313
|
+
declare function IconButton(props: Props$l): react_jsx_runtime.JSX.Element;
|
|
314
314
|
|
|
315
|
-
type Props$
|
|
315
|
+
type Props$k = PermafrostComponent$1 & {
|
|
316
316
|
defaultValue?: string;
|
|
317
317
|
disabled?: boolean;
|
|
318
318
|
horizontal?: boolean;
|
|
@@ -327,7 +327,7 @@ type Props$j = PermafrostComponent$1 & {
|
|
|
327
327
|
value?: string | number;
|
|
328
328
|
validationErrors?: string[];
|
|
329
329
|
};
|
|
330
|
-
declare const BorderSelect: (props: Props$
|
|
330
|
+
declare const BorderSelect: (props: Props$k) => react_jsx_runtime.JSX.Element;
|
|
331
331
|
|
|
332
332
|
type ComboboxProps = {
|
|
333
333
|
'aria-label'?: string;
|
|
@@ -375,7 +375,7 @@ type ComboboxOption = {
|
|
|
375
375
|
type ComboboxSize = 'small' | 'medium';
|
|
376
376
|
type ComboboxVariant = 'default' | 'light';
|
|
377
377
|
|
|
378
|
-
type Props$
|
|
378
|
+
type Props$j = PermafrostComponent$1 & {
|
|
379
379
|
disabled?: boolean;
|
|
380
380
|
initialText?: string;
|
|
381
381
|
options: {
|
|
@@ -389,7 +389,7 @@ type Props$i = PermafrostComponent$1 & {
|
|
|
389
389
|
onChange(e: React$1.ChangeEvent<HTMLSelectElement>): void;
|
|
390
390
|
onClick?(e: React$1.MouseEvent<HTMLDivElement, MouseEvent>): void;
|
|
391
391
|
};
|
|
392
|
-
declare const Select$1: (props: Props$
|
|
392
|
+
declare const Select$1: (props: Props$j) => react_jsx_runtime.JSX.Element;
|
|
393
393
|
|
|
394
394
|
/**
|
|
395
395
|
* Multiselect combobox component. If selections are not bound to outside state
|
|
@@ -430,7 +430,7 @@ declare const SingleCombobox: React$1.ForwardRefExoticComponent<PermafrostCompon
|
|
|
430
430
|
onChange: (selectedOption: ComboboxOption) => void;
|
|
431
431
|
} & React$1.RefAttributes<unknown>>;
|
|
432
432
|
|
|
433
|
-
type Props$
|
|
433
|
+
type Props$i = PermafrostComponent$1 & {
|
|
434
434
|
children: React$1.ReactNode | string;
|
|
435
435
|
minLength?: number;
|
|
436
436
|
onUpdate?(newValue: string): void;
|
|
@@ -439,9 +439,9 @@ type Props$h = PermafrostComponent$1 & {
|
|
|
439
439
|
* Wrapper component which enables text editing in place directly on a child component,
|
|
440
440
|
* element, or plain text.
|
|
441
441
|
*/
|
|
442
|
-
declare function EditableInput(props: Props$
|
|
442
|
+
declare function EditableInput(props: Props$i): react_jsx_runtime.JSX.Element;
|
|
443
443
|
|
|
444
|
-
type Props$
|
|
444
|
+
type Props$h = PermafrostComponent$1 & {
|
|
445
445
|
autoFocus?: boolean;
|
|
446
446
|
decrement?(): void;
|
|
447
447
|
disabled?: boolean;
|
|
@@ -461,9 +461,9 @@ type Props$g = PermafrostComponent$1 & {
|
|
|
461
461
|
* Basic numeric input field. A label is required, but may be visually hidden
|
|
462
462
|
* using the `hiddenLabel` property.
|
|
463
463
|
*/
|
|
464
|
-
declare function NumberInput(props: Props$
|
|
464
|
+
declare function NumberInput(props: Props$h): React$1.ReactElement;
|
|
465
465
|
|
|
466
|
-
type Props$
|
|
466
|
+
type Props$g = PermafrostComponent$1 & {
|
|
467
467
|
inputBorder?: boolean;
|
|
468
468
|
showClearInputIcon?: boolean;
|
|
469
469
|
showSearchIcon?: boolean;
|
|
@@ -477,13 +477,13 @@ type Props$f = PermafrostComponent$1 & {
|
|
|
477
477
|
value?: string;
|
|
478
478
|
};
|
|
479
479
|
declare const SearchInput: {
|
|
480
|
-
(props: Props$
|
|
480
|
+
(props: Props$g): react_jsx_runtime.JSX.Element;
|
|
481
481
|
defaultProps: {
|
|
482
482
|
className: string;
|
|
483
483
|
};
|
|
484
484
|
};
|
|
485
485
|
|
|
486
|
-
type Props$
|
|
486
|
+
type Props$f = PermafrostComponent$1 & {
|
|
487
487
|
autoComplete?: 'email' | 'current-password' | 'new-password' | string;
|
|
488
488
|
autoFocus?: boolean;
|
|
489
489
|
defaultValue?: string;
|
|
@@ -504,9 +504,9 @@ type Props$e = PermafrostComponent$1 & {
|
|
|
504
504
|
value?: string;
|
|
505
505
|
readOnly?: boolean;
|
|
506
506
|
};
|
|
507
|
-
declare function TextInput(props: Props$
|
|
507
|
+
declare function TextInput(props: Props$f): React$1.ReactElement;
|
|
508
508
|
|
|
509
|
-
type Props$
|
|
509
|
+
type Props$e = {
|
|
510
510
|
['aria-label']: string;
|
|
511
511
|
children?: React$1.ReactNode;
|
|
512
512
|
hideFocusRing: boolean;
|
|
@@ -522,7 +522,7 @@ type Props$d = {
|
|
|
522
522
|
* A group label must be included: either pass a string or markup into the
|
|
523
523
|
* `label` prop, or include an `aria-label` or `aria-labelledby` attribute.
|
|
524
524
|
*/
|
|
525
|
-
declare function RadioGroup$1({ children, ...props }: Props$
|
|
525
|
+
declare function RadioGroup$1({ children, ...props }: Props$e): react_jsx_runtime.JSX.Element;
|
|
526
526
|
/**
|
|
527
527
|
* A single radio button and its label.
|
|
528
528
|
*/
|
|
@@ -551,7 +551,7 @@ declare function Radio$1(props: AriaRadioProps & {
|
|
|
551
551
|
isVisuallySelected?: (selectedValue: string) => void;
|
|
552
552
|
}): react_jsx_runtime.JSX.Element;
|
|
553
553
|
|
|
554
|
-
type Props$
|
|
554
|
+
type Props$d = PermafrostComponent$1 & {
|
|
555
555
|
ariaLabel?: string;
|
|
556
556
|
disableBeforeDate?: Date;
|
|
557
557
|
disableAfterDate?: Date;
|
|
@@ -563,9 +563,9 @@ type Props$c = PermafrostComponent$1 & {
|
|
|
563
563
|
selected?: Date | undefined;
|
|
564
564
|
value: Date | undefined;
|
|
565
565
|
};
|
|
566
|
-
declare const DatePicker: (props: Props$
|
|
566
|
+
declare const DatePicker: (props: Props$d) => react_jsx_runtime.JSX.Element;
|
|
567
567
|
|
|
568
|
-
type Props$
|
|
568
|
+
type Props$c = PermafrostComponent$1 & {
|
|
569
569
|
ariaLabel?: string;
|
|
570
570
|
disableBeforeDate?: Date;
|
|
571
571
|
disableAfterDate?: Date;
|
|
@@ -582,32 +582,32 @@ type Props$b = PermafrostComponent$1 & {
|
|
|
582
582
|
isOpen?: boolean;
|
|
583
583
|
clearOnClose?: boolean;
|
|
584
584
|
};
|
|
585
|
-
declare const NoInputDatePicker: (props: Props$
|
|
585
|
+
declare const NoInputDatePicker: (props: Props$c) => react_jsx_runtime.JSX.Element;
|
|
586
586
|
|
|
587
|
-
type Props$
|
|
587
|
+
type Props$b = PermafrostComponent$1 & {
|
|
588
588
|
ariaLabel?: string;
|
|
589
589
|
size?: IconSizes$1;
|
|
590
590
|
style?: React$1.CSSProperties;
|
|
591
591
|
fill?: string;
|
|
592
592
|
};
|
|
593
|
-
declare function CircleSpinner(props: Props$
|
|
593
|
+
declare function CircleSpinner(props: Props$b): React$1.ReactElement;
|
|
594
594
|
|
|
595
|
-
type Props$
|
|
595
|
+
type Props$a = PermafrostComponent$1 & {
|
|
596
596
|
width?: string;
|
|
597
597
|
};
|
|
598
|
-
declare function BarSpinner(props: Props$
|
|
598
|
+
declare function BarSpinner(props: Props$a): React$1.ReactElement;
|
|
599
599
|
|
|
600
|
-
type Props$
|
|
600
|
+
type Props$9 = PermafrostComponent$1 & {
|
|
601
601
|
color?: string;
|
|
602
602
|
overallSize?: string | number;
|
|
603
603
|
rippleSize?: string | number;
|
|
604
604
|
showRandomMessage?: boolean;
|
|
605
605
|
};
|
|
606
|
-
declare function CirclePulse(props: Props$
|
|
606
|
+
declare function CirclePulse(props: Props$9): React$1.ReactElement;
|
|
607
607
|
|
|
608
608
|
declare const RandomLoadingMessage: () => react_jsx_runtime.JSX.Element;
|
|
609
609
|
|
|
610
|
-
type Props$
|
|
610
|
+
type Props$8 = PermafrostComponent$1 & {
|
|
611
611
|
backgroundColor?: string;
|
|
612
612
|
foregroundColor?: string;
|
|
613
613
|
ringRadius?: number;
|
|
@@ -616,11 +616,11 @@ type Props$7 = PermafrostComponent$1 & {
|
|
|
616
616
|
value: number;
|
|
617
617
|
valueFontSize?: number;
|
|
618
618
|
};
|
|
619
|
-
declare function PercentageRing(props: Props$
|
|
619
|
+
declare function PercentageRing(props: Props$8): react_jsx_runtime.JSX.Element;
|
|
620
620
|
|
|
621
621
|
declare const LoadingList: () => react_jsx_runtime.JSX.Element;
|
|
622
622
|
|
|
623
|
-
type Props$
|
|
623
|
+
type Props$7 = PermafrostComponent$1 & {
|
|
624
624
|
accordion?: boolean;
|
|
625
625
|
accordionDefaultOpen?: boolean;
|
|
626
626
|
emptyListMessage?: string;
|
|
@@ -657,9 +657,9 @@ type Props$6 = PermafrostComponent$1 & {
|
|
|
657
657
|
title: string;
|
|
658
658
|
totalCount?: number;
|
|
659
659
|
};
|
|
660
|
-
declare const ListTable: (props: Props$
|
|
660
|
+
declare const ListTable: (props: Props$7) => react_jsx_runtime.JSX.Element;
|
|
661
661
|
|
|
662
|
-
type Props$
|
|
662
|
+
type Props$6 = PermafrostComponent$1 & {
|
|
663
663
|
currentPage: number;
|
|
664
664
|
limit: number;
|
|
665
665
|
pageInfo: {
|
|
@@ -674,9 +674,9 @@ type Props$5 = PermafrostComponent$1 & {
|
|
|
674
674
|
getNextPage(cursor: number): void;
|
|
675
675
|
getPreviousPage(cursor: number): void;
|
|
676
676
|
};
|
|
677
|
-
declare function Pagination(props: Props$
|
|
677
|
+
declare function Pagination(props: Props$6): react_jsx_runtime.JSX.Element;
|
|
678
678
|
|
|
679
|
-
type Props$
|
|
679
|
+
type Props$5 = PermafrostComponent$1 & {
|
|
680
680
|
actionLink?: string;
|
|
681
681
|
actionText?: string;
|
|
682
682
|
buttonAction?(): void;
|
|
@@ -686,7 +686,7 @@ type Props$4 = PermafrostComponent$1 & {
|
|
|
686
686
|
'data-cy': string;
|
|
687
687
|
};
|
|
688
688
|
};
|
|
689
|
-
declare function Shrug(props: Props$
|
|
689
|
+
declare function Shrug(props: Props$5): React$1.ReactElement;
|
|
690
690
|
|
|
691
691
|
type ModalBaseProps = PermafrostComponent$1 & {
|
|
692
692
|
children: React$1.ReactNode | React$1.ReactNode[];
|
|
@@ -714,7 +714,7 @@ type ModalBaseProps = PermafrostComponent$1 & {
|
|
|
714
714
|
*/
|
|
715
715
|
declare function ModalBase(props: ModalBaseProps): react_jsx_runtime.JSX.Element;
|
|
716
716
|
|
|
717
|
-
type Props$
|
|
717
|
+
type Props$4 = PermafrostComponent$1 & Pick<ModalBaseProps, 'open'> & {
|
|
718
718
|
describedBy?: string;
|
|
719
719
|
clickOutsideHandler(e?: React$1.SyntheticEvent): void;
|
|
720
720
|
confirmText?: string;
|
|
@@ -726,9 +726,9 @@ type Props$3 = PermafrostComponent$1 & Pick<ModalBaseProps, 'open'> & {
|
|
|
726
726
|
title?: string | React$1.ReactNode;
|
|
727
727
|
width?: number;
|
|
728
728
|
};
|
|
729
|
-
declare function ConfirmModal(props: Props$
|
|
729
|
+
declare function ConfirmModal(props: Props$4): react_jsx_runtime.JSX.Element;
|
|
730
730
|
|
|
731
|
-
type Props$
|
|
731
|
+
type Props$3 = {
|
|
732
732
|
children: React$1.ReactNode | React$1.ReactNode[];
|
|
733
733
|
className?: string;
|
|
734
734
|
isLoading?: boolean;
|
|
@@ -740,7 +740,7 @@ type Props$2 = {
|
|
|
740
740
|
*
|
|
741
741
|
* todo: this is an extremely simple version of this component; as I get more familiar with LoadingIndicator use cases, this will be refactored. - jm 9/1/2020
|
|
742
742
|
*/
|
|
743
|
-
declare function LoadingAwareContainer(props: Props$
|
|
743
|
+
declare function LoadingAwareContainer(props: Props$3): React$1.ReactElement;
|
|
744
744
|
|
|
745
745
|
interface TextTruncateProps {
|
|
746
746
|
string: string;
|
|
@@ -750,7 +750,7 @@ interface TextTruncateProps {
|
|
|
750
750
|
}
|
|
751
751
|
declare function TextTruncate({ string, maxChars, children, noTitle }: TextTruncateProps): react_jsx_runtime.JSX.Element;
|
|
752
752
|
|
|
753
|
-
type Props$
|
|
753
|
+
type Props$2 = {
|
|
754
754
|
disabled: boolean;
|
|
755
755
|
onChange: any;
|
|
756
756
|
value: boolean;
|
|
@@ -759,9 +759,9 @@ type Props$1 = {
|
|
|
759
759
|
checkedIconName?: IconName$1;
|
|
760
760
|
notCheckedIconName?: IconName$1;
|
|
761
761
|
} & PermafrostComponent$1;
|
|
762
|
-
declare const Toggle$1: (props: Props$
|
|
762
|
+
declare const Toggle$1: (props: Props$2) => react_jsx_runtime.JSX.Element;
|
|
763
763
|
|
|
764
|
-
type Props = PermafrostComponent$1 & {
|
|
764
|
+
type Props$1 = PermafrostComponent$1 & {
|
|
765
765
|
questionMark?: boolean;
|
|
766
766
|
for?: string | null;
|
|
767
767
|
place?: string;
|
|
@@ -772,7 +772,7 @@ type Props = PermafrostComponent$1 & {
|
|
|
772
772
|
children: React$1.ReactNode;
|
|
773
773
|
block?: boolean;
|
|
774
774
|
};
|
|
775
|
-
declare const Tooltip: (props: Props) => react_jsx_runtime.JSX.Element;
|
|
775
|
+
declare const Tooltip: (props: Props$1) => react_jsx_runtime.JSX.Element;
|
|
776
776
|
|
|
777
777
|
declare const mix: (color_1: string, color_2: string, weight: number) => string;
|
|
778
778
|
declare const shade: (color: string, percentage: number) => string;
|
|
@@ -1026,7 +1026,7 @@ interface PasswordInputProps {
|
|
|
1026
1026
|
}
|
|
1027
1027
|
declare const PasswordInput: React$1.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
1028
1028
|
|
|
1029
|
-
interface SelectProps<OptionType extends SelectOption> extends Props$
|
|
1029
|
+
interface SelectProps<OptionType extends SelectOption> extends Props$q<OptionType> {
|
|
1030
1030
|
options: OptionType[];
|
|
1031
1031
|
}
|
|
1032
1032
|
declare const Select: <OptionType extends SelectOption>({ classNamePrefix, className, components: customComponents, ...props }: SelectProps<OptionType>) => react_jsx_runtime.JSX.Element;
|
|
@@ -1045,4 +1045,13 @@ interface FormProps {
|
|
|
1045
1045
|
}
|
|
1046
1046
|
declare const Form: ({ children, onSubmit, action, method, target, autocomplete, noValidate, enctype, rel, ...rest }: FormProps) => react_jsx_runtime.JSX.Element;
|
|
1047
1047
|
|
|
1048
|
-
|
|
1048
|
+
type Props = {
|
|
1049
|
+
className?: string;
|
|
1050
|
+
height?: number;
|
|
1051
|
+
width?: number;
|
|
1052
|
+
isCircle?: boolean;
|
|
1053
|
+
isFullHeight?: boolean;
|
|
1054
|
+
};
|
|
1055
|
+
declare const Skeleton: ({ className, height, width, isCircle, isFullHeight, ...rest }: Props) => react_jsx_runtime.JSX.Element;
|
|
1056
|
+
|
|
1057
|
+
export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, Form, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PasswordInput, PercentageRing, Radio$2 as Radio, RadioGroup$1 as RadioGroup, Radio as RadioInput, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select$1 as Select, Select as SelectInput, Shrug, SingleCombobox, Skeleton, typography as TYPOGRAPHY, Table, TextInput, TextTruncate, Textarea, Toggle$1 as Toggle, Toggle as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
|
package/lib/index.esm.css
CHANGED
|
@@ -1522,6 +1522,43 @@ form {
|
|
|
1522
1522
|
margin-left: var(--pf-margin-2);
|
|
1523
1523
|
}
|
|
1524
1524
|
|
|
1525
|
+
:root,
|
|
1526
|
+
:root [data-theme=light],
|
|
1527
|
+
:root [data-theme=dark] {
|
|
1528
|
+
--pf-skeleton-color-one: var(--pf-gray-color-200);
|
|
1529
|
+
--pf-skeleton-color-two: var(--pf-gray-color-100);
|
|
1530
|
+
}
|
|
1531
|
+
|
|
1532
|
+
:root [data-theme=dark] {
|
|
1533
|
+
--pf-skeleton-color-one: var(--pf-primary-color-200);
|
|
1534
|
+
--pf-skeleton-color-two: var(--pf-primary-color-100);
|
|
1535
|
+
}
|
|
1536
|
+
|
|
1537
|
+
.skeleton {
|
|
1538
|
+
border-radius: var(--pf-rounded);
|
|
1539
|
+
background-color: var(--pf-gray-color-100);
|
|
1540
|
+
opacity: 0.7;
|
|
1541
|
+
animation: skeleton-loading 1s linear infinite alternate;
|
|
1542
|
+
display: flex;
|
|
1543
|
+
flex-direction: column;
|
|
1544
|
+
width: 100%;
|
|
1545
|
+
height: 30px;
|
|
1546
|
+
}
|
|
1547
|
+
.skeleton.skeleton--full-height {
|
|
1548
|
+
height: 100%;
|
|
1549
|
+
}
|
|
1550
|
+
.skeleton.skeleton--circle {
|
|
1551
|
+
border-radius: var(--pf-rounded-circle);
|
|
1552
|
+
}
|
|
1553
|
+
@keyframes skeleton-loading {
|
|
1554
|
+
0% {
|
|
1555
|
+
background-color: var(--pf-skeleton-color-one);
|
|
1556
|
+
}
|
|
1557
|
+
100% {
|
|
1558
|
+
background-color: var(--pf-skeleton-color-two);
|
|
1559
|
+
}
|
|
1560
|
+
}
|
|
1561
|
+
|
|
1525
1562
|
:root {
|
|
1526
1563
|
--pf-font-family-base: "Mulish", sans-serif;
|
|
1527
1564
|
--pf-font-size-base: 1rem;
|
package/lib/index.esm.js
CHANGED
|
@@ -18713,6 +18713,15 @@ const Form = (_a) => {
|
|
|
18713
18713
|
return (jsx("form", Object.assign({ onSubmit: handleSubmit, action: action, method: method, target: target, autoComplete: autocomplete, noValidate: noValidate, encType: enctype, rel: rel }, rest, { children: children })));
|
|
18714
18714
|
};
|
|
18715
18715
|
|
|
18716
|
+
const Skeleton = (_a) => {
|
|
18717
|
+
var { className, height, width, isCircle, isFullHeight } = _a, rest = __rest$1(_a, ["className", "height", "width", "isCircle", "isFullHeight"]);
|
|
18718
|
+
const dynamicStyle = Object.assign(Object.assign({}, (height && { height: `${height}px` })), (width && { width: `${width}px` }));
|
|
18719
|
+
const circleClass = isCircle ? 'skeleton--circle' : '';
|
|
18720
|
+
const fullHeightClass = isFullHeight ? 'skeleton--full-height' : '';
|
|
18721
|
+
const combinedClassName = `skeleton ${circleClass} ${fullHeightClass} ${className || ''}`.trim();
|
|
18722
|
+
return jsx("div", Object.assign({ className: combinedClassName, style: dynamicStyle }, rest));
|
|
18723
|
+
};
|
|
18724
|
+
|
|
18716
18725
|
const StyledAccordion = styled.details `
|
|
18717
18726
|
summary {
|
|
18718
18727
|
display: inherit;
|
|
@@ -41534,5 +41543,5 @@ const Tooltip = (props) => {
|
|
|
41534
41543
|
openOnClick: props.clickToShow, id: props.for, delayShow: props.delayShow, delayHide: props.delayHide, children: props.children })] }));
|
|
41535
41544
|
};
|
|
41536
41545
|
|
|
41537
|
-
export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$2 as Button, allColors as COLORS, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, Form, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PasswordInput, PercentageRing, Radio, RadioGroup, Radio$2 as RadioInput, RandomLoadingMessage, Row$1 as Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Select$1 as SelectInput, Shrug, SingleCombobox, typography as TYPOGRAPHY, Table$1 as Table, TextInput, TextTruncate, Textarea, Toggle, Toggle$1 as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
|
|
41546
|
+
export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button$2 as Button, allColors as COLORS, Checkbox, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, EditableInput, Form, GlobalStyles, Icon, IconButton, Input, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PasswordInput, PercentageRing, Radio, RadioGroup, Radio$2 as RadioInput, RandomLoadingMessage, Row$1 as Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Select$1 as SelectInput, Shrug, SingleCombobox, Skeleton, typography as TYPOGRAPHY, Table$1 as Table, TextInput, TextTruncate, Textarea, Toggle, Toggle$1 as ToggleInput, Tooltip, color as colorUtils, number as numberUtils, string as stringUtils };
|
|
41538
41547
|
//# sourceMappingURL=index.esm.js.map
|