@dxc-technology/halstack-react 0.0.0-e961efe → 0.0.0-e9cf865
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/BackgroundColorContext.d.ts +10 -0
- package/BackgroundColorContext.js +48 -0
- package/ThemeContext.d.ts +15 -0
- package/ThemeContext.js +243 -0
- package/{dist/V3Select → V3Select}/V3Select.js +35 -129
- package/{dist/V3Select → V3Select}/index.d.ts +0 -0
- package/{dist/V3Textarea → V3Textarea}/V3Textarea.js +12 -16
- package/{dist/V3Textarea → V3Textarea}/index.d.ts +0 -0
- package/accordion/Accordion.d.ts +4 -0
- package/{dist/accordion → accordion}/Accordion.js +37 -132
- package/accordion/types.d.ts +68 -0
- package/accordion/types.js +5 -0
- package/accordion-group/AccordionGroup.d.ts +7 -0
- package/accordion-group/AccordionGroup.js +170 -0
- package/accordion-group/AccordionGroup.stories.tsx +225 -0
- package/accordion-group/types.d.ts +72 -0
- package/accordion-group/types.js +5 -0
- package/alert/Alert.d.ts +4 -0
- package/{dist/alert → alert}/Alert.js +40 -153
- package/alert/Alert.stories.tsx +170 -0
- package/alert/types.d.ts +49 -0
- package/alert/types.js +5 -0
- package/badge/Badge.js +59 -0
- package/box/Box.d.ts +4 -0
- package/{dist/box → box}/Box.js +15 -45
- package/box/Box.stories.tsx +132 -0
- package/box/types.d.ts +43 -0
- package/box/types.js +5 -0
- package/button/Button.d.ts +4 -0
- package/{dist/button → button}/Button.js +24 -83
- package/button/Button.stories.tsx +276 -0
- package/button/types.d.ts +57 -0
- package/button/types.js +5 -0
- package/card/Card.d.ts +4 -0
- package/{dist/card → card}/Card.js +34 -124
- package/card/Card.stories.tsx +201 -0
- package/card/ice-cream.jpg +0 -0
- package/card/types.d.ts +67 -0
- package/card/types.js +5 -0
- package/checkbox/Checkbox.d.ts +4 -0
- package/{dist/checkbox → checkbox}/Checkbox.js +15 -61
- package/checkbox/Checkbox.stories.tsx +192 -0
- package/checkbox/types.d.ts +60 -0
- package/checkbox/types.js +5 -0
- package/chip/Chip.d.ts +4 -0
- package/{dist/chip → chip}/Chip.js +18 -84
- package/chip/Chip.stories.tsx +121 -0
- package/chip/types.d.ts +53 -0
- package/chip/types.js +5 -0
- package/{dist/common → common}/OpenSans.css +0 -0
- package/{dist/common → common}/RequiredComponent.js +3 -11
- package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
- package/{dist/common → common}/utils.js +0 -0
- package/{dist/common → common}/variables.js +88 -88
- package/{dist/date → date}/Date.js +17 -23
- package/{dist/date → date}/index.d.ts +0 -0
- package/date-input/DateInput.d.ts +4 -0
- package/{dist/date-input → date-input}/DateInput.js +26 -68
- package/date-input/DateInput.stories.tsx +138 -0
- package/date-input/types.d.ts +100 -0
- package/date-input/types.js +5 -0
- package/dialog/Dialog.d.ts +4 -0
- package/{dist/dialog → dialog}/Dialog.js +22 -75
- package/dialog/Dialog.stories.tsx +212 -0
- package/dialog/types.d.ts +43 -0
- package/dialog/types.js +5 -0
- package/dropdown/Dropdown.d.ts +4 -0
- package/{dist/dropdown → dropdown}/Dropdown.js +45 -172
- package/dropdown/types.d.ts +89 -0
- package/dropdown/types.js +5 -0
- package/file-input/FileInput.d.ts +4 -0
- package/{dist/file-input → file-input}/FileInput.js +98 -221
- package/file-input/FileItem.d.ts +14 -0
- package/file-input/FileItem.js +184 -0
- package/file-input/types.d.ts +112 -0
- package/file-input/types.js +5 -0
- package/footer/Footer.d.ts +4 -0
- package/footer/Footer.js +260 -0
- package/footer/Footer.stories.tsx +130 -0
- package/footer/Icons.d.ts +2 -0
- package/{dist/footer → footer}/Icons.js +15 -15
- package/footer/types.d.ts +65 -0
- package/footer/types.js +5 -0
- package/header/Header.d.ts +7 -0
- package/{dist/header → header}/Header.js +58 -204
- package/header/Header.stories.tsx +162 -0
- package/header/Icons.d.ts +2 -0
- package/{dist/header → header}/Icons.js +7 -32
- package/header/types.d.ts +47 -0
- package/header/types.js +5 -0
- package/heading/Heading.d.ts +4 -0
- package/{dist/heading → heading}/Heading.js +25 -96
- package/heading/Heading.stories.tsx +53 -0
- package/heading/types.d.ts +33 -0
- package/heading/types.js +5 -0
- package/{dist/input-text → input-text}/Icons.js +2 -2
- package/{dist/input-text → input-text}/InputText.js +38 -132
- package/{dist/input-text → input-text}/index.d.ts +1 -1
- package/layout/ApplicationLayout.d.ts +10 -0
- package/{dist/layout → layout}/ApplicationLayout.js +39 -141
- package/layout/ApplicationLayout.stories.tsx +171 -0
- package/{dist/layout → layout}/Icons.js +7 -7
- package/layout/types.d.ts +57 -0
- package/layout/types.js +5 -0
- package/link/Link.d.ts +3 -0
- package/{dist/link → link}/Link.js +19 -95
- package/link/Link.stories.tsx +146 -0
- package/link/types.d.ts +74 -0
- package/link/types.js +5 -0
- package/list/List.d.ts +7 -0
- package/list/List.js +37 -0
- package/list/List.stories.tsx +70 -0
- package/main.d.ts +48 -0
- package/{dist/main.js → main.js} +118 -82
- package/number-input/NumberInput.d.ts +4 -0
- package/number-input/NumberInput.js +83 -0
- package/number-input/NumberInput.stories.tsx +115 -0
- package/number-input/NumberInputContext.d.ts +4 -0
- package/{dist/number-input → number-input}/NumberInputContext.js +5 -2
- package/number-input/numberInputContextTypes.d.ts +19 -0
- package/number-input/numberInputContextTypes.js +5 -0
- package/number-input/types.d.ts +117 -0
- package/number-input/types.js +5 -0
- package/package.json +20 -17
- package/{dist/paginator → paginator}/Icons.js +9 -9
- package/paginator/Paginator.d.ts +4 -0
- package/paginator/Paginator.js +192 -0
- package/paginator/Paginator.stories.tsx +63 -0
- package/paginator/types.d.ts +38 -0
- package/paginator/types.js +5 -0
- package/password-input/PasswordInput.d.ts +4 -0
- package/{dist/password-input → password-input}/PasswordInput.js +37 -77
- package/password-input/PasswordInput.stories.tsx +131 -0
- package/password-input/types.d.ts +107 -0
- package/password-input/types.js +5 -0
- package/progress-bar/ProgressBar.d.ts +4 -0
- package/{dist/progress-bar → progress-bar}/ProgressBar.js +22 -94
- package/progress-bar/ProgressBar.stories.jsx +58 -0
- package/progress-bar/types.d.ts +37 -0
- package/progress-bar/types.js +5 -0
- package/radio/Radio.d.ts +4 -0
- package/{dist/radio → radio}/Radio.js +17 -52
- package/radio/Radio.stories.tsx +192 -0
- package/radio/types.d.ts +54 -0
- package/radio/types.js +5 -0
- package/resultsetTable/ResultsetTable.d.ts +4 -0
- package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +39 -146
- package/resultsetTable/types.d.ts +67 -0
- package/resultsetTable/types.js +5 -0
- package/row/Row.d.ts +11 -0
- package/row/Row.js +124 -0
- package/row/Row.stories.tsx +223 -0
- package/{dist/select → select}/Select.js +254 -487
- package/select/Select.stories.tsx +572 -0
- package/select/index.d.ts +131 -0
- package/sidenav/Sidenav.d.ts +9 -0
- package/{dist/sidenav → sidenav}/Sidenav.js +21 -64
- package/sidenav/Sidenav.stories.tsx +165 -0
- package/sidenav/types.d.ts +50 -0
- package/sidenav/types.js +5 -0
- package/slider/Slider.d.ts +4 -0
- package/{dist/slider → slider}/Slider.js +74 -161
- package/slider/Slider.stories.tsx +177 -0
- package/slider/types.d.ts +78 -0
- package/slider/types.js +5 -0
- package/spinner/Spinner.d.ts +4 -0
- package/spinner/Spinner.js +250 -0
- package/spinner/Spinner.stories.jsx +102 -0
- package/spinner/types.d.ts +32 -0
- package/spinner/types.js +5 -0
- package/stack/Stack.d.ts +10 -0
- package/stack/Stack.js +94 -0
- package/stack/Stack.stories.tsx +150 -0
- package/switch/Switch.d.ts +4 -0
- package/{dist/switch → switch}/Switch.js +28 -71
- package/switch/Switch.stories.tsx +160 -0
- package/switch/types.d.ts +58 -0
- package/switch/types.js +5 -0
- package/table/Table.d.ts +4 -0
- package/{dist/table → table}/Table.js +12 -26
- package/table/Table.stories.jsx +276 -0
- package/table/types.d.ts +21 -0
- package/table/types.js +5 -0
- package/tabs/Tabs.d.ts +4 -0
- package/tabs/Tabs.js +213 -0
- package/tabs/Tabs.stories.tsx +121 -0
- package/tabs/types.d.ts +70 -0
- package/tabs/types.js +5 -0
- package/tag/Tag.d.ts +4 -0
- package/tag/Tag.js +193 -0
- package/tag/Tag.stories.tsx +145 -0
- package/tag/types.d.ts +60 -0
- package/tag/types.js +5 -0
- package/text/Text.d.ts +7 -0
- package/text/Text.js +30 -0
- package/text/Text.stories.tsx +19 -0
- package/text-input/TextInput.d.ts +4 -0
- package/{dist/text-input → text-input}/TextInput.js +269 -457
- package/text-input/TextInput.stories.tsx +456 -0
- package/text-input/types.d.ts +159 -0
- package/text-input/types.js +5 -0
- package/{dist/textarea → textarea}/Textarea.js +40 -95
- package/textarea/Textarea.stories.jsx +135 -0
- package/{dist/textarea → textarea}/index.d.ts +18 -8
- package/{dist/toggle → toggle}/Toggle.js +16 -50
- package/{dist/toggle → toggle}/index.d.ts +0 -0
- package/toggle-group/ToggleGroup.d.ts +4 -0
- package/{dist/toggle-group → toggle-group}/ToggleGroup.js +30 -140
- package/toggle-group/ToggleGroup.stories.tsx +178 -0
- package/toggle-group/types.d.ts +84 -0
- package/toggle-group/types.js +5 -0
- package/{dist/upload → upload}/Upload.js +11 -15
- package/upload/buttons-upload/ButtonsUpload.js +111 -0
- package/{dist/upload → upload}/buttons-upload/Icons.js +7 -7
- package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
- package/{dist/upload → upload}/dragAndDropArea/Icons.js +6 -6
- package/upload/file-upload/FileToUpload.js +115 -0
- package/{dist/upload → upload}/file-upload/Icons.js +13 -13
- package/{dist/upload → upload}/files-upload/FilesToUpload.js +13 -27
- package/{dist/upload → upload}/index.d.ts +0 -0
- package/{dist/upload → upload}/transaction/Icons.js +31 -31
- package/upload/transaction/Transaction.js +104 -0
- package/upload/transactions/Transactions.js +94 -0
- package/useTheme.d.ts +2 -0
- package/{dist/useTheme.js → useTheme.js} +1 -1
- package/{dist/wizard → wizard}/Icons.js +8 -8
- package/wizard/Wizard.d.ts +4 -0
- package/wizard/Wizard.js +231 -0
- package/wizard/Wizard.stories.jsx +224 -0
- package/wizard/types.d.ts +64 -0
- package/wizard/types.js +5 -0
- package/README.md +0 -66
- package/babel.config.js +0 -7
- package/dist/BackgroundColorContext.js +0 -46
- package/dist/ThemeContext.js +0 -250
- package/dist/accordion/index.d.ts +0 -28
- package/dist/accordion-group/AccordionGroup.js +0 -186
- package/dist/accordion-group/index.d.ts +0 -16
- package/dist/alert/index.d.ts +0 -51
- package/dist/badge/Badge.js +0 -63
- package/dist/box/index.d.ts +0 -25
- package/dist/button/index.d.ts +0 -24
- package/dist/card/index.d.ts +0 -22
- package/dist/checkbox/index.d.ts +0 -24
- package/dist/chip/index.d.ts +0 -22
- package/dist/date-input/index.d.ts +0 -95
- package/dist/dialog/index.d.ts +0 -18
- package/dist/dropdown/index.d.ts +0 -26
- package/dist/file-input/FileItem.js +0 -287
- package/dist/file-input/index.d.ts +0 -81
- package/dist/footer/Footer.js +0 -421
- package/dist/footer/index.d.ts +0 -25
- package/dist/header/index.d.ts +0 -25
- package/dist/heading/index.d.ts +0 -17
- package/dist/link/index.d.ts +0 -23
- package/dist/main.d.ts +0 -40
- package/dist/number-input/NumberInput.js +0 -136
- package/dist/number-input/index.d.ts +0 -113
- package/dist/paginator/Paginator.js +0 -305
- package/dist/paginator/index.d.ts +0 -20
- package/dist/password-input/index.d.ts +0 -94
- package/dist/progress-bar/index.d.ts +0 -18
- package/dist/radio/index.d.ts +0 -23
- package/dist/resultsetTable/index.d.ts +0 -19
- package/dist/select/index.d.ts +0 -53
- package/dist/sidenav/index.d.ts +0 -13
- package/dist/slider/index.d.ts +0 -29
- package/dist/spinner/Spinner.js +0 -381
- package/dist/spinner/index.d.ts +0 -17
- package/dist/stories/Button.js +0 -71
- package/dist/stories/Button.stories.js +0 -55
- package/dist/stories/Header.js +0 -67
- package/dist/stories/Header.stories.js +0 -31
- package/dist/stories/Introduction.stories.mdx +0 -211
- package/dist/stories/Page.js +0 -68
- package/dist/stories/Page.stories.js +0 -39
- package/dist/stories/assets/code-brackets.svg +0 -1
- package/dist/stories/assets/colors.svg +0 -1
- package/dist/stories/assets/comments.svg +0 -1
- package/dist/stories/assets/direction.svg +0 -1
- package/dist/stories/assets/flow.svg +0 -1
- package/dist/stories/assets/plugin.svg +0 -1
- package/dist/stories/assets/repo.svg +0 -1
- package/dist/stories/assets/stackalt.svg +0 -1
- package/dist/stories/button.css +0 -30
- package/dist/stories/header.css +0 -26
- package/dist/stories/page.css +0 -69
- package/dist/switch/index.d.ts +0 -24
- package/dist/table/index.d.ts +0 -13
- package/dist/tabs/Tabs.js +0 -343
- package/dist/tabs/index.d.ts +0 -19
- package/dist/tag/Tag.js +0 -282
- package/dist/tag/index.d.ts +0 -24
- package/dist/text-input/index.d.ts +0 -135
- package/dist/toggle-group/index.d.ts +0 -21
- package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
- package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
- package/dist/upload/file-upload/FileToUpload.js +0 -189
- package/dist/upload/transaction/Transaction.js +0 -148
- package/dist/upload/transactions/Transactions.js +0 -138
- package/dist/wizard/Wizard.js +0 -405
- package/dist/wizard/index.d.ts +0 -18
- package/test/Accordion.test.js +0 -33
- package/test/AccordionGroup.test.js +0 -125
- package/test/Alert.test.js +0 -53
- package/test/Box.test.js +0 -10
- package/test/Button.test.js +0 -18
- package/test/Card.test.js +0 -30
- package/test/Checkbox.test.js +0 -45
- package/test/Chip.test.js +0 -25
- package/test/Date.test.js +0 -395
- package/test/DateInput.test.js +0 -242
- package/test/Dialog.test.js +0 -23
- package/test/Dropdown.test.js +0 -145
- package/test/FileInput.test.js +0 -201
- package/test/Footer.test.js +0 -94
- package/test/Header.test.js +0 -34
- package/test/Heading.test.js +0 -83
- package/test/InputText.test.js +0 -239
- package/test/Link.test.js +0 -43
- package/test/NumberInput.test.js +0 -259
- package/test/Paginator.test.js +0 -181
- package/test/PasswordInput.test.js +0 -83
- package/test/ProgressBar.test.js +0 -35
- package/test/Radio.test.js +0 -37
- package/test/ResultsetTable.test.js +0 -330
- package/test/Select.test.js +0 -415
- package/test/Sidenav.test.js +0 -45
- package/test/Slider.test.js +0 -74
- package/test/Spinner.test.js +0 -32
- package/test/Switch.test.js +0 -45
- package/test/Table.test.js +0 -36
- package/test/Tabs.test.js +0 -109
- package/test/Tag.test.js +0 -32
- package/test/TextInput.test.js +0 -732
- package/test/Textarea.test.js +0 -193
- package/test/ToggleGroup.test.js +0 -85
- package/test/Upload.test.js +0 -60
- package/test/V3Select.test.js +0 -212
- package/test/V3TextArea.test.js +0 -51
- package/test/Wizard.test.js +0 -130
- package/test/mocks/pngMock.js +0 -1
- package/test/mocks/svgMock.js +0 -1
package/dist/radio/index.d.ts
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
|
|
2
|
-
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
|
-
type Margin = {
|
|
4
|
-
top?: Space;
|
|
5
|
-
bottom?: Space;
|
|
6
|
-
left?: Space;
|
|
7
|
-
right?: Space;
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
type Props = {
|
|
11
|
-
checked?: boolean;
|
|
12
|
-
value?: any;
|
|
13
|
-
label?: string;
|
|
14
|
-
labelPosition?: "before" | "after";
|
|
15
|
-
name?: string,
|
|
16
|
-
disabled?: boolean;
|
|
17
|
-
onClick?: void;
|
|
18
|
-
required?: boolean;
|
|
19
|
-
margin?: Space | Margin;
|
|
20
|
-
size?: Size;
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
export default function DxcRadio(props: Props): JSX.Element;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2
|
-
type Margin = {
|
|
3
|
-
top?: Space;
|
|
4
|
-
bottom?: Space;
|
|
5
|
-
left?: Space;
|
|
6
|
-
right?: Space;
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
type Props = {
|
|
10
|
-
columns?: any;
|
|
11
|
-
rows?: any;
|
|
12
|
-
itemsPerPage?: number;
|
|
13
|
-
itemsPerPageOptions?: number[];
|
|
14
|
-
itemsPerPageFunction?: void,
|
|
15
|
-
margin?: Space | Margin;
|
|
16
|
-
tabIndex?: number;
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
export default function DxcResultsetTable(props: Props): JSX.Element;
|
package/dist/select/index.d.ts
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
type SVG = string | (HTMLElement & SVGElement);
|
|
2
|
-
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
|
-
type Margin = {
|
|
4
|
-
top?: Space;
|
|
5
|
-
bottom?: Space;
|
|
6
|
-
left?: Space;
|
|
7
|
-
right?: Space;
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
type OptionGroup = {
|
|
11
|
-
label: string;
|
|
12
|
-
options: Option[];
|
|
13
|
-
};
|
|
14
|
-
type Option = {
|
|
15
|
-
icon?: string | SVG;
|
|
16
|
-
label: string;
|
|
17
|
-
value: string;
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
type Props = {
|
|
21
|
-
label?: string;
|
|
22
|
-
name?: string;
|
|
23
|
-
value?: string | string[];
|
|
24
|
-
options?: Option[] | OptionGroup[];
|
|
25
|
-
helperText?: string;
|
|
26
|
-
placeholder?: string;
|
|
27
|
-
disabled?: boolean;
|
|
28
|
-
optional?: boolean;
|
|
29
|
-
searchable?: boolean;
|
|
30
|
-
multiple?: boolean;
|
|
31
|
-
onChange?: (value: string | string[]) => void;
|
|
32
|
-
onBlur?: (val: { value: string | string[]; error: string }) => void;
|
|
33
|
-
error?: string;
|
|
34
|
-
/**
|
|
35
|
-
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
36
|
-
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
37
|
-
*/
|
|
38
|
-
margin?: Space | Margin;
|
|
39
|
-
/**
|
|
40
|
-
* Size of the component ('small' | 'medium' | 'large' | 'fillParent').
|
|
41
|
-
*/
|
|
42
|
-
size?: "small" | "medium" | "large" | "fillParent";
|
|
43
|
-
/**
|
|
44
|
-
* Value of the tabindex attribute.
|
|
45
|
-
*/
|
|
46
|
-
tabIndex?: number;
|
|
47
|
-
/**
|
|
48
|
-
* Reference to the component.
|
|
49
|
-
*/
|
|
50
|
-
ref?: React.RefObject<HTMLDivElement>;
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
export default function DxcSelect(props: Props): JSX.Element;
|
package/dist/sidenav/index.d.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2
|
-
type Padding = {
|
|
3
|
-
top?: Space;
|
|
4
|
-
bottom?: Space;
|
|
5
|
-
left?: Space;
|
|
6
|
-
right?: Space;
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
type Props = {
|
|
10
|
-
padding?: Space | Padding;
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
export default function DxcSidenav(props: Props): JSX.Element;
|
package/dist/slider/index.d.ts
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
type Size = "small" | "medium" | "large" | "fillParent";
|
|
2
|
-
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
|
-
type Margin = {
|
|
4
|
-
top?: Space;
|
|
5
|
-
bottom?: Space;
|
|
6
|
-
left?: Space;
|
|
7
|
-
right?: Space;
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
type Props = {
|
|
11
|
-
label?: string;
|
|
12
|
-
helperText?: string;
|
|
13
|
-
minValue?: number;
|
|
14
|
-
maxValue?: number;
|
|
15
|
-
step?: number;
|
|
16
|
-
value?: number;
|
|
17
|
-
showLimitsValues?: boolean;
|
|
18
|
-
showInput?: boolean;
|
|
19
|
-
name?: string;
|
|
20
|
-
onChange?: void;
|
|
21
|
-
onDragEnd?: void;
|
|
22
|
-
disabled?: boolean;
|
|
23
|
-
marks?: boolean;
|
|
24
|
-
labelFormatCallback?: void;
|
|
25
|
-
margin?: Space | Margin;
|
|
26
|
-
size?: Size;
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
export default function DxcSlider(props: Props): JSX.Element;
|
package/dist/spinner/Spinner.js
DELETED
|
@@ -1,381 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
|
-
|
|
7
|
-
Object.defineProperty(exports, "__esModule", {
|
|
8
|
-
value: true
|
|
9
|
-
});
|
|
10
|
-
exports["default"] = void 0;
|
|
11
|
-
|
|
12
|
-
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
13
|
-
|
|
14
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
15
|
-
|
|
16
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
17
|
-
|
|
18
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
-
|
|
20
|
-
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
21
|
-
|
|
22
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
23
|
-
|
|
24
|
-
var _variables = require("../common/variables.js");
|
|
25
|
-
|
|
26
|
-
var _useTheme = _interopRequireDefault(require("../useTheme.js"));
|
|
27
|
-
|
|
28
|
-
var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
|
|
29
|
-
|
|
30
|
-
function _templateObject12() {
|
|
31
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: ", ";\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n font-style: ", ";\n color: ", ";\n text-align: ", ";\n letter-spacing: ", ";\n"]);
|
|
32
|
-
|
|
33
|
-
_templateObject12 = function _templateObject12() {
|
|
34
|
-
return data;
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
return data;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
function _templateObject11() {
|
|
41
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n font-style: ", ";\n color: ", ";\n text-align: ", ";\n letter-spacing: ", ";\n"]);
|
|
42
|
-
|
|
43
|
-
_templateObject11 = function _templateObject11() {
|
|
44
|
-
return data;
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
return data;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
function _templateObject10() {
|
|
51
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: block;\n margin: 0 auto;\n position: absolute;\n text-align: center;\n width: 110px;\n"]);
|
|
52
|
-
|
|
53
|
-
_templateObject10 = function _templateObject10() {
|
|
54
|
-
return data;
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
return data;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
function _templateObject9() {
|
|
61
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n fill: transparent;\n stroke-linecap: initial;\n vector-effect: non-scaling-stroke;\n animation: ", ";\n stroke: ", ";\n transform-origin: ", ";\n stroke-dasharray: ", ";\n stroke-width: ", ";\n stroke-dashoffset: ", ";\n"]);
|
|
62
|
-
|
|
63
|
-
_templateObject9 = function _templateObject9() {
|
|
64
|
-
return data;
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
return data;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
function _templateObject8() {
|
|
71
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n height: inherit;\n width: inherit;\n transform: rotate(-90deg);\n top: 0;\n left: 0;\n transform-origin: center;\n overflow: visible;\n animation: ", ";\n"]);
|
|
72
|
-
|
|
73
|
-
_templateObject8 = function _templateObject8() {
|
|
74
|
-
return data;
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
return data;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
function _templateObject7() {
|
|
81
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n height: inherit;\n width: inherit;\n position: relative;\n z-index: 2;\n"]);
|
|
82
|
-
|
|
83
|
-
_templateObject7 = function _templateObject7() {
|
|
84
|
-
return data;
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
return data;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
function _templateObject6() {
|
|
91
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n animation: none;\n fill: transparent;\n stroke: ", ";\n stroke-dasharray: ", ";\n stroke-linecap: initial;\n stroke-width: ", ";\n transform-origin: 50% 50%;\n vector-effect: non-scaling-stroke;\n"]);
|
|
92
|
-
|
|
93
|
-
_templateObject6 = function _templateObject6() {
|
|
94
|
-
return data;
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
return data;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
function _templateObject5() {
|
|
101
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n height: inherit;\n width: inherit;\n"]);
|
|
102
|
-
|
|
103
|
-
_templateObject5 = function _templateObject5() {
|
|
104
|
-
return data;
|
|
105
|
-
};
|
|
106
|
-
|
|
107
|
-
return data;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
function _templateObject4() {
|
|
111
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n height: inherit;\n width: inherit;\n position: absolute;\n z-index: 1;\n"]);
|
|
112
|
-
|
|
113
|
-
_templateObject4 = function _templateObject4() {
|
|
114
|
-
return data;
|
|
115
|
-
};
|
|
116
|
-
|
|
117
|
-
return data;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
function _templateObject3() {
|
|
121
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 100vw;\n height: 100vh;\n opacity: 1;\n transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n position: fixed;\n top: 0;\n left: 0;\n background-color: ", ";\n opacity: ", ";\n"]);
|
|
122
|
-
|
|
123
|
-
_templateObject3 = function _templateObject3() {
|
|
124
|
-
return data;
|
|
125
|
-
};
|
|
126
|
-
|
|
127
|
-
return data;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
function _templateObject2() {
|
|
131
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n align-items: center;\n display: flex;\n height: ", ";\n width: ", ";\n justify-content: center;\n position: relative;\n background-color: transparent;\n\n @keyframes spinner-svg {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n }\n @keyframes svg-circle-large {\n 0% {\n stroke-dashoffset: 400;\n transform: rotate(0);\n }\n\n 50% {\n stroke-dashoffset: 75;\n transform: rotate(45deg);\n }\n\n 100% {\n stroke-dashoffset: 400;\n transform: rotate(360deg);\n }\n }\n @keyframes svg-circle-small {\n 0% {\n stroke-dashoffset: 35;\n transform: rotate(0);\n }\n\n 50% {\n stroke-dashoffset: 8;\n transform: rotate(45deg);\n }\n\n 100% {\n stroke-dashoffset: 35;\n transform: rotate(360deg);\n }\n }\n"]);
|
|
132
|
-
|
|
133
|
-
_templateObject2 = function _templateObject2() {
|
|
134
|
-
return data;
|
|
135
|
-
};
|
|
136
|
-
|
|
137
|
-
return data;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
function _templateObject() {
|
|
141
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n display: ", ";\n position: ", ";\n top: ", ";\n left: ", ";\n justify-content: ", ";\n align-items: ", ";\n z-index: ", ";\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
|
|
142
|
-
|
|
143
|
-
_templateObject = function _templateObject() {
|
|
144
|
-
return data;
|
|
145
|
-
};
|
|
146
|
-
|
|
147
|
-
return data;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
var DxcSpinner = function DxcSpinner(_ref) {
|
|
151
|
-
var _ref$label = _ref.label,
|
|
152
|
-
label = _ref$label === void 0 ? "" : _ref$label,
|
|
153
|
-
value = _ref.value,
|
|
154
|
-
_ref$showValue = _ref.showValue,
|
|
155
|
-
showValue = _ref$showValue === void 0 ? false : _ref$showValue,
|
|
156
|
-
_ref$mode = _ref.mode,
|
|
157
|
-
mode = _ref$mode === void 0 ? "large" : _ref$mode,
|
|
158
|
-
margin = _ref.margin;
|
|
159
|
-
var colorsTheme = (0, _useTheme["default"])();
|
|
160
|
-
var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
|
|
161
|
-
return _react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
162
|
-
theme: colorsTheme.spinner
|
|
163
|
-
}, _react["default"].createElement(DXCSpinner, {
|
|
164
|
-
margin: margin,
|
|
165
|
-
mode: mode
|
|
166
|
-
}, _react["default"].createElement(SpinnerContainer, {
|
|
167
|
-
backgroundType: backgroundType,
|
|
168
|
-
mode: mode
|
|
169
|
-
}, mode === "overlay" && _react["default"].createElement(BackOverlay, null), _react["default"].createElement(BackgroundSpinner, {
|
|
170
|
-
mode: mode
|
|
171
|
-
}, mode !== "small" && _react["default"].createElement(SVGBackground, {
|
|
172
|
-
viewBox: "0 0 140 140"
|
|
173
|
-
}, _react["default"].createElement(CircleBackground, {
|
|
174
|
-
cx: "70",
|
|
175
|
-
cy: "70",
|
|
176
|
-
r: "65",
|
|
177
|
-
mode: mode
|
|
178
|
-
})), mode === "small" && _react["default"].createElement(SVGBackground, {
|
|
179
|
-
viewBox: "0 0 16 16"
|
|
180
|
-
}, _react["default"].createElement(CircleBackground, {
|
|
181
|
-
cx: "8",
|
|
182
|
-
cy: "8",
|
|
183
|
-
r: "6",
|
|
184
|
-
mode: mode
|
|
185
|
-
}))), value >= 0 && value <= 100 ? _react["default"].createElement(Spinner, {
|
|
186
|
-
role: "progressbar",
|
|
187
|
-
mode: mode
|
|
188
|
-
}, mode !== "small" && _react["default"].createElement(SVGSpinner, {
|
|
189
|
-
viewBox: "0 0 140 140",
|
|
190
|
-
isDeterminated: true
|
|
191
|
-
}, _react["default"].createElement(CircleSpinner, {
|
|
192
|
-
cx: "70",
|
|
193
|
-
cy: "70",
|
|
194
|
-
r: "65",
|
|
195
|
-
backgroundType: backgroundType,
|
|
196
|
-
mode: mode,
|
|
197
|
-
isDeterminated: true,
|
|
198
|
-
value: value
|
|
199
|
-
})), mode === "small" && _react["default"].createElement(SVGSpinner, {
|
|
200
|
-
viewBox: "0 0 16 16",
|
|
201
|
-
isDeterminated: true
|
|
202
|
-
}, _react["default"].createElement(CircleSpinner, {
|
|
203
|
-
cx: "8",
|
|
204
|
-
cy: "8",
|
|
205
|
-
r: "6",
|
|
206
|
-
backgroundType: backgroundType,
|
|
207
|
-
mode: mode,
|
|
208
|
-
isDeterminated: true,
|
|
209
|
-
value: value
|
|
210
|
-
}))) : _react["default"].createElement(Spinner, {
|
|
211
|
-
role: "progressbar",
|
|
212
|
-
mode: mode
|
|
213
|
-
}, mode !== "small" && _react["default"].createElement(SVGSpinner, {
|
|
214
|
-
viewBox: "0 0 140 140",
|
|
215
|
-
isDeterminated: false
|
|
216
|
-
}, _react["default"].createElement(CircleSpinner, {
|
|
217
|
-
cx: "70",
|
|
218
|
-
cy: "70",
|
|
219
|
-
r: "65",
|
|
220
|
-
backgroundType: backgroundType,
|
|
221
|
-
mode: mode,
|
|
222
|
-
isDeterminated: false
|
|
223
|
-
})), mode === "small" && _react["default"].createElement(SVGSpinner, {
|
|
224
|
-
viewBox: "0 0 16 16",
|
|
225
|
-
isDeterminated: false
|
|
226
|
-
}, _react["default"].createElement(CircleSpinner, {
|
|
227
|
-
cx: "8",
|
|
228
|
-
cy: "8",
|
|
229
|
-
r: "6",
|
|
230
|
-
backgroundType: backgroundType,
|
|
231
|
-
mode: mode,
|
|
232
|
-
isDeterminated: false
|
|
233
|
-
}))), mode !== "small" && _react["default"].createElement(LabelsContainer, {
|
|
234
|
-
label: label,
|
|
235
|
-
value: value,
|
|
236
|
-
showValue: showValue
|
|
237
|
-
}, _react["default"].createElement(SpinnerLabel, {
|
|
238
|
-
backgroundType: backgroundType,
|
|
239
|
-
mode: mode
|
|
240
|
-
}, label), (value || value === 0) && showValue && _react["default"].createElement(SpinnerProgress, {
|
|
241
|
-
backgroundType: backgroundType,
|
|
242
|
-
mode: mode,
|
|
243
|
-
showValue: showValue
|
|
244
|
-
}, value, "%")))));
|
|
245
|
-
};
|
|
246
|
-
|
|
247
|
-
var determinatedValue = function determinatedValue(props, strokeDashArray) {
|
|
248
|
-
var val = 0;
|
|
249
|
-
|
|
250
|
-
if (props.value >= 0 && props.value <= 100) {
|
|
251
|
-
val = strokeDashArray * (1 - props.value / 100);
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
return val;
|
|
255
|
-
};
|
|
256
|
-
|
|
257
|
-
DxcSpinner.propTypes = {
|
|
258
|
-
label: _propTypes["default"].string,
|
|
259
|
-
value: _propTypes["default"].number,
|
|
260
|
-
showValue: _propTypes["default"].bool,
|
|
261
|
-
mode: _propTypes["default"].oneOf(["large", "small", "overlay"]),
|
|
262
|
-
margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
|
|
263
|
-
top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
264
|
-
bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
265
|
-
left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
266
|
-
right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
|
|
267
|
-
}), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
|
|
268
|
-
};
|
|
269
|
-
|
|
270
|
-
var DXCSpinner = _styledComponents["default"].div(_templateObject(), function (props) {
|
|
271
|
-
return props.mode === "overlay" ? "100vh" : "";
|
|
272
|
-
}, function (props) {
|
|
273
|
-
return props.mode === "overlay" ? "100vw" : "";
|
|
274
|
-
}, function (props) {
|
|
275
|
-
return props.mode === "overlay" ? "flex" : "";
|
|
276
|
-
}, function (props) {
|
|
277
|
-
return props.mode === "overlay" ? "fixed" : "";
|
|
278
|
-
}, function (props) {
|
|
279
|
-
return props.mode === "overlay" ? 0 : "";
|
|
280
|
-
}, function (props) {
|
|
281
|
-
return props.mode === "overlay" ? 0 : "";
|
|
282
|
-
}, function (props) {
|
|
283
|
-
return props.mode === "overlay" ? "center" : "";
|
|
284
|
-
}, function (props) {
|
|
285
|
-
return props.mode === "overlay" ? "center" : "";
|
|
286
|
-
}, function (props) {
|
|
287
|
-
return props.mode === "overlay" ? 1300 : "";
|
|
288
|
-
}, function (props) {
|
|
289
|
-
return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
|
|
290
|
-
}, function (props) {
|
|
291
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
|
|
292
|
-
}, function (props) {
|
|
293
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
|
|
294
|
-
}, function (props) {
|
|
295
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
|
|
296
|
-
}, function (props) {
|
|
297
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
|
|
298
|
-
});
|
|
299
|
-
|
|
300
|
-
var SpinnerContainer = _styledComponents["default"].div(_templateObject2(), function (props) {
|
|
301
|
-
return props.mode === "small" ? "16px" : "140px";
|
|
302
|
-
}, function (props) {
|
|
303
|
-
return props.mode === "small" ? "16px" : "140px";
|
|
304
|
-
});
|
|
305
|
-
|
|
306
|
-
var BackOverlay = _styledComponents["default"].div(_templateObject3(), function (props) {
|
|
307
|
-
return "".concat(props.theme.overlayBackgroundColor);
|
|
308
|
-
}, function (props) {
|
|
309
|
-
return "".concat(props.theme.overlayOpacity);
|
|
310
|
-
});
|
|
311
|
-
|
|
312
|
-
var BackgroundSpinner = _styledComponents["default"].div(_templateObject4());
|
|
313
|
-
|
|
314
|
-
var SVGBackground = _styledComponents["default"].svg(_templateObject5());
|
|
315
|
-
|
|
316
|
-
var CircleBackground = _styledComponents["default"].circle(_templateObject6(), function (props) {
|
|
317
|
-
return "".concat(props.theme.totalCircleColor);
|
|
318
|
-
}, function (props) {
|
|
319
|
-
return props.mode !== "small" ? "409" : "38";
|
|
320
|
-
}, function (props) {
|
|
321
|
-
return props.mode !== "small" ? "8.5px" : "2px";
|
|
322
|
-
});
|
|
323
|
-
|
|
324
|
-
var Spinner = _styledComponents["default"].div(_templateObject7());
|
|
325
|
-
|
|
326
|
-
var SVGSpinner = _styledComponents["default"].svg(_templateObject8(), function (props) {
|
|
327
|
-
return !props.isDeterminated ? "1.4s linear infinite both spinner-svg" : "";
|
|
328
|
-
});
|
|
329
|
-
|
|
330
|
-
var CircleSpinner = _styledComponents["default"].circle(_templateObject9(), function (props) {
|
|
331
|
-
return props.isDeterminated ? "none" : props.mode !== "small" ? "1.4s ease-in-out infinite both svg-circle-large" : "1.4s ease-in-out infinite both svg-circle-small";
|
|
332
|
-
}, function (props) {
|
|
333
|
-
return props.backgroundType === "dark" ? props.theme.trackCircleColorOnDark : props.theme.trackCircleColor;
|
|
334
|
-
}, function (props) {
|
|
335
|
-
return !props.isDeterminated ? "50% 50%" : "";
|
|
336
|
-
}, function (props) {
|
|
337
|
-
return props.mode !== "small" ? "409" : "38";
|
|
338
|
-
}, function (props) {
|
|
339
|
-
return props.mode !== "small" ? "8.5px" : "2px";
|
|
340
|
-
}, function (props) {
|
|
341
|
-
return props.isDeterminated ? props.mode !== "small" ? determinatedValue(props, 409) : determinatedValue(props, 38) : "";
|
|
342
|
-
});
|
|
343
|
-
|
|
344
|
-
var LabelsContainer = _styledComponents["default"].div(_templateObject10());
|
|
345
|
-
|
|
346
|
-
var SpinnerLabel = _styledComponents["default"].p(_templateObject11(), function (props) {
|
|
347
|
-
return props.mode === "overlay" ? props.theme.overlayLabelFontFamily : props.theme.labelFontFamily;
|
|
348
|
-
}, function (props) {
|
|
349
|
-
return props.mode === "overlay" ? props.theme.overlayLabelFontWeight : props.theme.labelFontWeight;
|
|
350
|
-
}, function (props) {
|
|
351
|
-
return props.mode === "overlay" ? props.theme.overlayLabelFontSize : props.theme.labelFontSize;
|
|
352
|
-
}, function (props) {
|
|
353
|
-
return props.mode === "overlay" ? props.theme.overlayLabelFontStyle : props.theme.labelFontStyle;
|
|
354
|
-
}, function (props) {
|
|
355
|
-
return props.mode === "overlay" ? props.theme.overlayLabelFontColor : props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
|
|
356
|
-
}, function (props) {
|
|
357
|
-
return props.mode === "overlay" ? props.theme.overlayLabelTextAlign : props.theme.labelTextAlign;
|
|
358
|
-
}, function (props) {
|
|
359
|
-
return props.mode === "overlay" ? props.theme.overlayLabelLetterSpacing : props.theme.labelLetterSpacing;
|
|
360
|
-
});
|
|
361
|
-
|
|
362
|
-
var SpinnerProgress = _styledComponents["default"].p(_templateObject12(), function (props) {
|
|
363
|
-
return props.value !== "" && props.showValue === true && "block" || "none";
|
|
364
|
-
}, function (props) {
|
|
365
|
-
return props.mode === "overlay" ? props.theme.overlayProgressValueFontFamily : props.theme.progressValueFontFamily;
|
|
366
|
-
}, function (props) {
|
|
367
|
-
return props.mode === "overlay" ? props.theme.overlayProgressValueFontWeight : props.theme.progressValueFontWeight;
|
|
368
|
-
}, function (props) {
|
|
369
|
-
return props.mode === "overlay" ? props.theme.overlayProgressValueFontSize : props.theme.progressValueFontSize;
|
|
370
|
-
}, function (props) {
|
|
371
|
-
return props.mode === "overlay" ? props.theme.overlayProgressValueFontStyle : props.theme.progressValueFontStyle;
|
|
372
|
-
}, function (props) {
|
|
373
|
-
return props.mode === "overlay" ? props.theme.overlayProgressValueFontColor : props.backgroundType === "dark" ? props.theme.progressValueFontColorOnDark : props.theme.progressValueFontColor;
|
|
374
|
-
}, function (props) {
|
|
375
|
-
return props.mode === "overlay" ? props.theme.overlayProgressValueTextAlign : props.theme.progressValueTextAlign;
|
|
376
|
-
}, function (props) {
|
|
377
|
-
return props.mode === "overlay" ? props.theme.overlayProgressValueLetterSpacing : props.theme.progressValueLetterSpacing;
|
|
378
|
-
});
|
|
379
|
-
|
|
380
|
-
var _default = DxcSpinner;
|
|
381
|
-
exports["default"] = _default;
|
package/dist/spinner/index.d.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2
|
-
type Margin = {
|
|
3
|
-
top?: Space;
|
|
4
|
-
bottom?: Space;
|
|
5
|
-
left?: Space;
|
|
6
|
-
right?: Space;
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
type Props = {
|
|
10
|
-
label?: string;
|
|
11
|
-
value?: number;
|
|
12
|
-
showValue?: boolean;
|
|
13
|
-
mode?: "large" | "small" | "overlay";
|
|
14
|
-
margin?: Space | Margin;
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
export default function DxcSpinner(props: Props): JSX.Element;
|
package/dist/stories/Button.js
DELETED
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.Button = void 0;
|
|
9
|
-
|
|
10
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
-
|
|
12
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
13
|
-
|
|
14
|
-
var _react = _interopRequireDefault(require("react"));
|
|
15
|
-
|
|
16
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
17
|
-
|
|
18
|
-
require("./button.css");
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* Primary UI component for user interaction
|
|
22
|
-
*/
|
|
23
|
-
var Button = function Button(_ref) {
|
|
24
|
-
var primary = _ref.primary,
|
|
25
|
-
backgroundColor = _ref.backgroundColor,
|
|
26
|
-
size = _ref.size,
|
|
27
|
-
label = _ref.label,
|
|
28
|
-
props = (0, _objectWithoutProperties2["default"])(_ref, ["primary", "backgroundColor", "size", "label"]);
|
|
29
|
-
var mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
|
|
30
|
-
return _react["default"].createElement("button", (0, _extends2["default"])({
|
|
31
|
-
type: "button",
|
|
32
|
-
className: ['storybook-button', "storybook-button--".concat(size), mode].join(' '),
|
|
33
|
-
style: backgroundColor && {
|
|
34
|
-
backgroundColor: backgroundColor
|
|
35
|
-
}
|
|
36
|
-
}, props), label);
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
exports.Button = Button;
|
|
40
|
-
Button.propTypes = {
|
|
41
|
-
/**
|
|
42
|
-
* Is this the principal call to action on the page?
|
|
43
|
-
*/
|
|
44
|
-
primary: _propTypes["default"].bool,
|
|
45
|
-
|
|
46
|
-
/**
|
|
47
|
-
* What background color to use
|
|
48
|
-
*/
|
|
49
|
-
backgroundColor: _propTypes["default"].string,
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* How large should the button be?
|
|
53
|
-
*/
|
|
54
|
-
size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
|
|
55
|
-
|
|
56
|
-
/**
|
|
57
|
-
* Button contents
|
|
58
|
-
*/
|
|
59
|
-
label: _propTypes["default"].string.isRequired,
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* Optional click handler
|
|
63
|
-
*/
|
|
64
|
-
onClick: _propTypes["default"].func
|
|
65
|
-
};
|
|
66
|
-
Button.defaultProps = {
|
|
67
|
-
backgroundColor: null,
|
|
68
|
-
primary: false,
|
|
69
|
-
size: 'medium',
|
|
70
|
-
onClick: undefined
|
|
71
|
-
};
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.Small = exports.Large = exports.Secondary = exports.Primary = exports["default"] = void 0;
|
|
9
|
-
|
|
10
|
-
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
|
-
var _Button = require("./Button");
|
|
13
|
-
|
|
14
|
-
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
|
|
15
|
-
var _default = {
|
|
16
|
-
title: 'Example/Button',
|
|
17
|
-
component: _Button.Button,
|
|
18
|
-
// More on argTypes: https://storybook.js.org/docs/react/api/argtypes
|
|
19
|
-
argTypes: {
|
|
20
|
-
backgroundColor: {
|
|
21
|
-
control: 'color'
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
}; // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
|
|
25
|
-
|
|
26
|
-
exports["default"] = _default;
|
|
27
|
-
|
|
28
|
-
var Template = function Template(args) {
|
|
29
|
-
return _react["default"].createElement(_Button.Button, args);
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
var Primary = Template.bind({}); // More on args: https://storybook.js.org/docs/react/writing-stories/args
|
|
33
|
-
|
|
34
|
-
exports.Primary = Primary;
|
|
35
|
-
Primary.args = {
|
|
36
|
-
primary: true,
|
|
37
|
-
label: 'Button'
|
|
38
|
-
};
|
|
39
|
-
var Secondary = Template.bind({});
|
|
40
|
-
exports.Secondary = Secondary;
|
|
41
|
-
Secondary.args = {
|
|
42
|
-
label: 'Button'
|
|
43
|
-
};
|
|
44
|
-
var Large = Template.bind({});
|
|
45
|
-
exports.Large = Large;
|
|
46
|
-
Large.args = {
|
|
47
|
-
size: 'large',
|
|
48
|
-
label: 'Button'
|
|
49
|
-
};
|
|
50
|
-
var Small = Template.bind({});
|
|
51
|
-
exports.Small = Small;
|
|
52
|
-
Small.args = {
|
|
53
|
-
size: 'small',
|
|
54
|
-
label: 'Button'
|
|
55
|
-
};
|