@dxc-technology/halstack-react 0.0.0-0ddd74a → 0.0.0-0e90110
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/select/Select.js → V3Select/V3Select.js} +40 -134
- package/V3Select/index.d.ts +27 -0
- package/{dist/V3Textarea → V3Textarea}/V3Textarea.js +12 -16
- package/V3Textarea/index.d.ts +27 -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 +25 -84
- 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 +18 -65
- 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 +162 -153
- package/{dist/date → date}/Date.js +22 -28
- package/date/index.d.ts +27 -0
- package/date-input/DateInput.d.ts +4 -0
- package/{dist/date-input → date-input}/DateInput.js +23 -62
- 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 +70 -203
- package/file-input/FileItem.d.ts +14 -0
- package/file-input/FileItem.js +184 -0
- package/file-input/types.d.ts +87 -0
- package/file-input/types.js +5 -0
- package/footer/Footer.d.ts +4 -0
- package/{dist/footer → footer}/Footer.js +40 -195
- package/footer/Footer.stories.jsx +151 -0
- package/{dist/footer → footer}/Icons.js +13 -13
- package/footer/types.d.ts +69 -0
- package/footer/types.js +5 -0
- package/header/Header.d.ts +7 -0
- package/header/Header.js +324 -0
- package/header/Header.stories.tsx +162 -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 +31 -90
- 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/input-text/index.d.ts +36 -0
- package/layout/ApplicationLayout.d.ts +10 -0
- package/{dist/layout → layout}/ApplicationLayout.js +38 -141
- 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/main.d.ts +44 -0
- package/{dist/main.js → main.js} +94 -98
- package/number-input/NumberInput.d.ts +4 -0
- package/number-input/NumberInput.js +86 -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 +32 -25
- package/{dist/paginator → paginator}/Icons.js +9 -9
- package/paginator/Paginator.d.ts +4 -0
- package/paginator/Paginator.js +198 -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 +31 -65
- 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/select/Select.js +865 -0
- 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/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-input/TextInput.d.ts +4 -0
- package/{dist/text-input → text-input}/TextInput.js +265 -448
- 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 +35 -88
- 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/toggle/index.d.ts +21 -0
- package/toggle-group/ToggleGroup.d.ts +4 -0
- package/{dist/toggle-group → toggle-group}/ToggleGroup.js +29 -139
- 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 +14 -18
- 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/upload/dragAndDropArea/Icons.js +39 -0
- package/upload/file-upload/FileToUpload.js +115 -0
- package/upload/file-upload/Icons.js +66 -0
- package/{dist/upload → upload}/files-upload/FilesToUpload.js +13 -27
- package/upload/index.d.ts +15 -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/{dist/wizard → wizard}/Wizard.js +33 -207
- 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 -8
- package/dist/BackgroundColorContext.js +0 -46
- package/dist/ThemeContext.js +0 -248
- package/dist/accordion-group/AccordionGroup.js +0 -186
- package/dist/alert/index.d.ts +0 -51
- package/dist/badge/Badge.js +0 -63
- package/dist/checkbox/Checkbox.stories.js +0 -144
- package/dist/checkbox/readme.md +0 -116
- package/dist/date/Date.stories.js +0 -205
- package/dist/date/readme.md +0 -73
- package/dist/date-input/index.d.ts +0 -95
- package/dist/file-input/FileItem.js +0 -280
- package/dist/file-input/index.d.ts +0 -81
- package/dist/header/Header.js +0 -434
- package/dist/link/readme.md +0 -51
- package/dist/main.d.ts +0 -8
- package/dist/new-select/NewSelect.js +0 -836
- package/dist/new-select/index.d.ts +0 -53
- package/dist/number-input/NumberInput.js +0 -136
- package/dist/number-input/index.d.ts +0 -113
- package/dist/paginator/Paginator.js +0 -283
- package/dist/password-input/index.d.ts +0 -94
- package/dist/progress-bar/ProgressBar.stories.js +0 -280
- package/dist/progress-bar/readme.md +0 -63
- package/dist/radio/Radio.stories.js +0 -166
- package/dist/radio/readme.md +0 -70
- package/dist/slider/readme.md +0 -64
- package/dist/spinner/Spinner.js +0 -381
- package/dist/spinner/Spinner.stories.js +0 -183
- package/dist/spinner/readme.md +0 -65
- package/dist/switch/Switch.stories.js +0 -134
- package/dist/switch/readme.md +0 -133
- package/dist/tabs/Tabs.js +0 -343
- package/dist/tabs/Tabs.stories.js +0 -130
- package/dist/tabs/readme.md +0 -78
- package/dist/tabs-for-sections/TabsForSections.js +0 -92
- package/dist/tabs-for-sections/readme.md +0 -78
- package/dist/tag/Tag.js +0 -282
- package/dist/text-input/index.d.ts +0 -135
- package/dist/toggle/Toggle.stories.js +0 -297
- package/dist/toggle/readme.md +0 -80
- package/dist/upload/Upload.stories.js +0 -72
- package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
- package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
- package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
- package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
- package/dist/upload/file-upload/FileToUpload.js +0 -184
- package/dist/upload/file-upload/audio-icon.svg +0 -4
- package/dist/upload/file-upload/close.svg +0 -4
- package/dist/upload/file-upload/file-icon.svg +0 -4
- package/dist/upload/file-upload/video-icon.svg +0 -4
- package/dist/upload/readme.md +0 -37
- package/dist/upload/transaction/Transaction.js +0 -148
- package/dist/upload/transactions/Transactions.js +0 -138
- 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 -397
- 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 -35
- package/test/InputText.test.js +0 -248
- package/test/Link.test.js +0 -43
- package/test/NumberInput.test.js +0 -259
- package/test/Paginator.test.js +0 -177
- 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 -329
- package/test/Select.test.js +0 -212
- 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/TabsForSections.test.js +0 -34
- 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/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
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
4
|
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
@@ -21,151 +21,48 @@ var _main = require("../main");
|
|
|
21
21
|
|
|
22
22
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
23
23
|
|
|
24
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
25
|
-
|
|
26
24
|
var _variables = require("../common/variables.js");
|
|
27
25
|
|
|
28
26
|
var _Icons = require("./Icons");
|
|
29
27
|
|
|
30
|
-
var _useTheme = _interopRequireDefault(require("../useTheme
|
|
31
|
-
|
|
32
|
-
function _templateObject10() {
|
|
33
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: sticky;\n top: 45vh;\n width: 42px;\n min-height: 42px;\n background-color: ", ";\n border-radius: 50%;\n transform: ", ";\n transition: transform 0.4s ease-in-out;\n z-index: 1250;\n cursor: pointer;\n & > svg {\n fill: ", ";\n }\n"]);
|
|
34
|
-
|
|
35
|
-
_templateObject10 = function _templateObject10() {
|
|
36
|
-
return data;
|
|
37
|
-
};
|
|
28
|
+
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
38
29
|
|
|
39
|
-
|
|
40
|
-
}
|
|
30
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
41
31
|
|
|
42
|
-
|
|
43
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n height: calc(100vh - 64px);\n left: 279px;\n"]);
|
|
32
|
+
var _excluded = ["displayArrow", "mode"];
|
|
44
33
|
|
|
45
|
-
|
|
46
|
-
return data;
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
return data;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
function _templateObject8() {
|
|
53
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n z-index: 1200;\n transform: ", ";\n transition: transform 0.4s ease-in-out;\n height: calc(100vh - 64px);\n position: sticky;\n top: 64px;\n"]);
|
|
54
|
-
|
|
55
|
-
_templateObject8 = function _templateObject8() {
|
|
56
|
-
return data;
|
|
57
|
-
};
|
|
34
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
58
35
|
|
|
59
|
-
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
function _templateObject7() {
|
|
63
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n flex-grow: 1;\n position: relative;\n min-height: calc(100vh - 184px);\n margin-left: ", ";\n transition: margin 0.4s ease-in-out;\n"]);
|
|
64
|
-
|
|
65
|
-
_templateObject7 = function _templateObject7() {
|
|
66
|
-
return data;
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
return data;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
function _templateObject6() {
|
|
73
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: ", ";\n transition: margin 0.4s ease-in-out;\n"]);
|
|
74
|
-
|
|
75
|
-
_templateObject6 = function _templateObject6() {
|
|
76
|
-
return data;
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
return data;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
function _templateObject5() {
|
|
83
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n min-width: 0;\n display: flex;\n flex-direction: column;\n"]);
|
|
84
|
-
|
|
85
|
-
_templateObject5 = function _templateObject5() {
|
|
86
|
-
return data;
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
return data;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
function _templateObject4() {
|
|
93
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex: 1 1 auto;\n align-items: flex-start;\n"]);
|
|
94
|
-
|
|
95
|
-
_templateObject4 = function _templateObject4() {
|
|
96
|
-
return data;
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
return data;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
function _templateObject3() {
|
|
103
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n flex: 1;\n display: flex;\n flex-direction: column;\n"]);
|
|
104
|
-
|
|
105
|
-
_templateObject3 = function _templateObject3() {
|
|
106
|
-
return data;
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
return data;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
function _templateObject2() {
|
|
113
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 1250;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n"]);
|
|
114
|
-
|
|
115
|
-
_templateObject2 = function _templateObject2() {
|
|
116
|
-
return data;
|
|
117
|
-
};
|
|
118
|
-
|
|
119
|
-
return data;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
function _templateObject() {
|
|
123
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 64px;\n bottom: 0;\n left: 0;\n right: 0;\n"]);
|
|
124
|
-
|
|
125
|
-
_templateObject = function _templateObject() {
|
|
126
|
-
return data;
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
return data;
|
|
130
|
-
}
|
|
36
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
131
37
|
|
|
132
38
|
var year = new Date().getFullYear();
|
|
133
39
|
|
|
134
40
|
var Header = function Header(_ref) {
|
|
135
41
|
var children = _ref.children;
|
|
136
|
-
return _react["default"].createElement(_react["default"].Fragment, null, children);
|
|
42
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
|
|
137
43
|
};
|
|
138
44
|
|
|
139
45
|
var Main = function Main(_ref2) {
|
|
140
46
|
var children = _ref2.children;
|
|
141
|
-
return _react["default"].createElement(_react["default"].Fragment, null, children);
|
|
47
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
|
|
142
48
|
};
|
|
143
49
|
|
|
144
50
|
var Footer = function Footer(_ref3) {
|
|
145
51
|
var children = _ref3.children;
|
|
146
|
-
return _react["default"].createElement(_react["default"].Fragment, null, children);
|
|
52
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
|
|
147
53
|
};
|
|
148
54
|
|
|
149
55
|
var SideNav = function SideNav(props) {
|
|
150
|
-
var displayArrow = props.displayArrow,
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
SideNav.propTypes = {
|
|
157
|
-
mode: _propTypes["default"].oneOf(["overlay", "push", ""]),
|
|
158
|
-
displayArrow: _propTypes["default"].bool,
|
|
159
|
-
padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
|
|
160
|
-
top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
161
|
-
bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
162
|
-
left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
163
|
-
right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
|
|
164
|
-
})])
|
|
56
|
+
var _props$displayArrow = props.displayArrow,
|
|
57
|
+
displayArrow = _props$displayArrow === void 0 ? true : _props$displayArrow,
|
|
58
|
+
_props$mode = props.mode,
|
|
59
|
+
mode = _props$mode === void 0 ? "overlay" : _props$mode,
|
|
60
|
+
childProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
|
61
|
+
return /*#__PURE__*/_react["default"].createElement(_main.DxcSidenav, childProps, childProps.children);
|
|
165
62
|
};
|
|
166
63
|
|
|
167
64
|
var defaultFooter = function defaultFooter() {
|
|
168
|
-
return _react["default"].createElement(_main.DxcFooter, {
|
|
65
|
+
return /*#__PURE__*/_react["default"].createElement(_main.DxcFooter, {
|
|
169
66
|
copyright: "\xA9 DXC Technology ".concat(year, "\u200B\u200B\u200B\u200B. All rights reserved."),
|
|
170
67
|
bottomLinks: [{
|
|
171
68
|
href: "https://www.linkedin.com/company/dxctechnology",
|
|
@@ -191,7 +88,7 @@ var defaultFooter = function defaultFooter() {
|
|
|
191
88
|
};
|
|
192
89
|
|
|
193
90
|
var defaultHeader = function defaultHeader() {
|
|
194
|
-
return _react["default"].createElement(_main.DxcHeader, {
|
|
91
|
+
return /*#__PURE__*/_react["default"].createElement(_main.DxcHeader, {
|
|
195
92
|
underlined: true
|
|
196
93
|
});
|
|
197
94
|
};
|
|
@@ -212,7 +109,7 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
|
|
|
212
109
|
isSideNavVisible = _useState2[0],
|
|
213
110
|
setIsSideNavVisible = _useState2[1];
|
|
214
111
|
|
|
215
|
-
var _useState3 = (0, _react.useState)(),
|
|
112
|
+
var _useState3 = (0, _react.useState)(false),
|
|
216
113
|
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
217
114
|
isResponsive = _useState4[0],
|
|
218
115
|
setIsResponsive = _useState4[1];
|
|
@@ -227,12 +124,12 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
|
|
|
227
124
|
var sideNavMode = sideNav && sideNav.props && sideNav.props.mode;
|
|
228
125
|
|
|
229
126
|
var ArrowIcon = function ArrowIcon() {
|
|
230
|
-
return _react["default"].createElement("svg", {
|
|
127
|
+
return /*#__PURE__*/_react["default"].createElement("svg", {
|
|
231
128
|
xmlns: "http://www.w3.org/2000/svg",
|
|
232
129
|
width: "15.995",
|
|
233
130
|
height: "10.01",
|
|
234
131
|
viewBox: "0 0 15.995 10.01"
|
|
235
|
-
}, _react["default"].createElement("path", {
|
|
132
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
236
133
|
"data-testid": "arrow-to-right",
|
|
237
134
|
d: "M17.71,11.29l-4-4a1,1,0,0,0-1.42,1.42L14.59,11H3a1,1,0,0,0,0,2H14.59l-2.3,2.29a1,1,0,1,0,1.42,1.42l4-4a1.034,1.034,0,0,0,0-1.42Z",
|
|
238
135
|
transform: "translate(-2 -6.996)"
|
|
@@ -241,7 +138,7 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
|
|
|
241
138
|
|
|
242
139
|
var handleResize = function handleResize(width) {
|
|
243
140
|
if (width) {
|
|
244
|
-
|
|
141
|
+
setIsResponsive(width <= _variables.responsiveSizes.tablet);
|
|
245
142
|
setIsSideNavVisible(true);
|
|
246
143
|
}
|
|
247
144
|
};
|
|
@@ -265,21 +162,21 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
|
|
|
265
162
|
setIsSideNavVisible(!isSideNavVisible);
|
|
266
163
|
};
|
|
267
164
|
|
|
268
|
-
return _react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
165
|
+
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
269
166
|
theme: colorsTheme.sidenav
|
|
270
|
-
}, _react["default"].createElement(ApplicationLayoutContainer, {
|
|
167
|
+
}, /*#__PURE__*/_react["default"].createElement(ApplicationLayoutContainer, {
|
|
271
168
|
ref: ref
|
|
272
|
-
}, _react["default"].createElement(HeaderContainer, null, header), _react["default"].createElement(BodyContainer, null, _react["default"].createElement(ContentContainer, null, _react["default"].createElement(SideNavArrowContainer, {
|
|
169
|
+
}, /*#__PURE__*/_react["default"].createElement(HeaderContainer, null, header), /*#__PURE__*/_react["default"].createElement(BodyContainer, null, /*#__PURE__*/_react["default"].createElement(ContentContainer, null, /*#__PURE__*/_react["default"].createElement(SideNavArrowContainer, {
|
|
273
170
|
isSideNavVisible: isSideNavVisible
|
|
274
|
-
}, sideNav, _react["default"].createElement(ArrowContainer, null, sideNav && (displayArrow || isResponsive) && _react["default"].createElement(ArrowTrigger, {
|
|
171
|
+
}, sideNav, /*#__PURE__*/_react["default"].createElement(ArrowContainer, null, sideNav && (displayArrow || isResponsive) && /*#__PURE__*/_react["default"].createElement(ArrowTrigger, {
|
|
275
172
|
tabIndex: 0,
|
|
276
173
|
onClick: handleSidenav,
|
|
277
174
|
isSideNavVisible: isSideNavVisible
|
|
278
|
-
}, _react["default"].createElement(ArrowIcon, null)))), _react["default"].createElement(MainBodyContainer, null, _react["default"].createElement(MainContent, {
|
|
175
|
+
}, /*#__PURE__*/_react["default"].createElement(ArrowIcon, null)))), /*#__PURE__*/_react["default"].createElement(MainBodyContainer, null, /*#__PURE__*/_react["default"].createElement(MainContent, {
|
|
279
176
|
sideNav: sideNav,
|
|
280
177
|
mode: isResponsive ? "overlay" : sideNavMode,
|
|
281
178
|
isSideNavVisible: isSideNavVisible
|
|
282
|
-
}, main), _react["default"].createElement(FooterContainer, {
|
|
179
|
+
}, main), /*#__PURE__*/_react["default"].createElement(FooterContainer, {
|
|
283
180
|
sideNav: sideNav,
|
|
284
181
|
mode: isResponsive ? "overlay" : sideNavMode,
|
|
285
182
|
isSideNavVisible: isSideNavVisible
|
|
@@ -291,31 +188,31 @@ DxcApplicationLayout.Main = Main;
|
|
|
291
188
|
DxcApplicationLayout.Footer = Footer;
|
|
292
189
|
DxcApplicationLayout.SideNav = SideNav;
|
|
293
190
|
|
|
294
|
-
var ApplicationLayoutContainer = _styledComponents["default"].div(_templateObject());
|
|
191
|
+
var ApplicationLayoutContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 64px;\n bottom: 0;\n left: 0;\n right: 0;\n"])));
|
|
295
192
|
|
|
296
|
-
var HeaderContainer = _styledComponents["default"].div(_templateObject2());
|
|
193
|
+
var HeaderContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 1250;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n"])));
|
|
297
194
|
|
|
298
|
-
var BodyContainer = _styledComponents["default"].div(_templateObject3());
|
|
195
|
+
var BodyContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n flex: 1;\n display: flex;\n flex-direction: column;\n"])));
|
|
299
196
|
|
|
300
|
-
var ContentContainer = _styledComponents["default"].div(_templateObject4());
|
|
197
|
+
var ContentContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex: 1 1 auto;\n align-items: flex-start;\n"])));
|
|
301
198
|
|
|
302
|
-
var MainBodyContainer = _styledComponents["default"].div(_templateObject5());
|
|
199
|
+
var MainBodyContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n min-width: 0;\n display: flex;\n flex-direction: column;\n"])));
|
|
303
200
|
|
|
304
|
-
var FooterContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
|
|
201
|
+
var FooterContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: ", ";\n transition: margin 0.4s ease-in-out;\n"])), function (props) {
|
|
305
202
|
return props.sideNav ? props.mode === "push" && !props.isSideNavVisible || props.mode === "overlay" ? "-300px" : "" : "";
|
|
306
203
|
});
|
|
307
204
|
|
|
308
|
-
var MainContent = _styledComponents["default"].div(_templateObject7(), function (props) {
|
|
205
|
+
var MainContent = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n flex-grow: 1;\n position: relative;\n min-height: calc(100vh - 184px);\n margin-left: ", ";\n transition: margin 0.4s ease-in-out;\n"])), function (props) {
|
|
309
206
|
return props.sideNav ? props.mode === "push" && props.isSideNavVisible ? "" : "-297px" : "";
|
|
310
207
|
});
|
|
311
208
|
|
|
312
|
-
var SideNavArrowContainer = _styledComponents["default"].div(_templateObject8(), function (props) {
|
|
209
|
+
var SideNavArrowContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n z-index: 1200;\n transform: ", ";\n transition: transform 0.4s ease-in-out;\n height: calc(100vh - 64px);\n position: sticky;\n top: 64px;\n"])), function (props) {
|
|
313
210
|
return props.isSideNavVisible ? "translateX(0)" : !props.isSideNavVisible ? "translateX(-100%)" : "";
|
|
314
211
|
});
|
|
315
212
|
|
|
316
|
-
var ArrowContainer = _styledComponents["default"].div(_templateObject9());
|
|
213
|
+
var ArrowContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n height: calc(100vh - 64px);\n left: 279px;\n"])));
|
|
317
214
|
|
|
318
|
-
var ArrowTrigger = _styledComponents["default"].div(_templateObject10(), function (props) {
|
|
215
|
+
var ArrowTrigger = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: sticky;\n top: 45vh;\n width: 42px;\n min-height: 42px;\n background-color: ", ";\n border-radius: 50%;\n transform: ", ";\n transition: transform 0.4s ease-in-out;\n z-index: 1250;\n cursor: pointer;\n & > svg {\n fill: ", ";\n }\n"])), function (props) {
|
|
319
216
|
return "".concat(props.theme.arrowContainerColor);
|
|
320
217
|
}, function (props) {
|
|
321
218
|
return props.isSideNavVisible ? "rotate(-180deg)" : "rotate(0deg)";
|
|
@@ -5,11 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.
|
|
8
|
+
exports.twitterLogo = exports.linkedinLogo = exports.facebookLogo = void 0;
|
|
9
9
|
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
11
|
|
|
12
|
-
var facebookLogo = _react["default"].createElement("svg", {
|
|
12
|
+
var facebookLogo = /*#__PURE__*/_react["default"].createElement("svg", {
|
|
13
13
|
version: "1.1",
|
|
14
14
|
id: "Capa_1",
|
|
15
15
|
x: "0px",
|
|
@@ -18,13 +18,13 @@ var facebookLogo = _react["default"].createElement("svg", {
|
|
|
18
18
|
height: "438.536px",
|
|
19
19
|
viewBox: "0 0 438.536 438.536",
|
|
20
20
|
fill: "#FFFFFF"
|
|
21
|
-
}, _react["default"].createElement("g", null, _react["default"].createElement("path", {
|
|
21
|
+
}, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
|
|
22
22
|
d: "M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123 C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126 h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225 C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402 c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401 c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
|
|
23
23
|
})));
|
|
24
24
|
|
|
25
25
|
exports.facebookLogo = facebookLogo;
|
|
26
26
|
|
|
27
|
-
var twitterLogo = _react["default"].createElement("svg", {
|
|
27
|
+
var twitterLogo = /*#__PURE__*/_react["default"].createElement("svg", {
|
|
28
28
|
version: "1.1",
|
|
29
29
|
id: "Capa_1",
|
|
30
30
|
x: "0px",
|
|
@@ -33,13 +33,13 @@ var twitterLogo = _react["default"].createElement("svg", {
|
|
|
33
33
|
height: "438.536px",
|
|
34
34
|
viewBox: "0 0 438.536 438.536",
|
|
35
35
|
fill: "#FFFFFF"
|
|
36
|
-
}, _react["default"].createElement("g", null, _react["default"].createElement("path", {
|
|
36
|
+
}, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
|
|
37
37
|
d: "M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123 C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126 h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225 C438.532,59.576,430.49,40.204,414.41,24.123z M335.471,168.735c0.191,1.713,0.288,4.278,0.288,7.71 c0,15.989-2.334,32.025-6.995,48.104c-4.661,16.087-11.8,31.504-21.416,46.254c-9.606,14.749-21.074,27.791-34.396,39.115 c-13.325,11.32-29.311,20.365-47.968,27.117c-18.648,6.762-38.637,10.143-59.953,10.143c-33.116,0-63.76-8.952-91.931-26.836 c4.568,0.568,9.329,0.855,14.275,0.855c27.6,0,52.439-8.565,74.519-25.7c-12.941-0.185-24.506-4.179-34.688-11.991 c-10.185-7.803-17.273-17.699-21.271-29.691c4.947,0.76,8.658,1.137,11.132,1.137c4.187,0,9.042-0.76,14.56-2.279 c-13.894-2.669-25.598-9.562-35.115-20.697c-9.519-11.136-14.277-23.84-14.277-38.114v-0.571 c10.085,4.755,19.602,7.229,28.549,7.422c-17.321-11.613-25.981-28.265-25.981-49.963c0-10.66,2.758-20.747,8.278-30.264 c15.035,18.464,33.311,33.213,54.816,44.252c21.507,11.038,44.54,17.227,69.092,18.558c-0.95-3.616-1.427-8.186-1.427-13.704 c0-16.562,5.853-30.692,17.56-42.399c11.703-11.706,25.837-17.561,42.394-17.561c17.515,0,32.079,6.283,43.688,18.846 c13.134-2.474,25.892-7.33,38.26-14.56c-4.757,14.652-13.613,25.788-26.55,33.402c12.368-1.716,23.88-4.95,34.537-9.708 C357.458,149.793,347.462,160.166,335.471,168.735z"
|
|
38
38
|
})));
|
|
39
39
|
|
|
40
40
|
exports.twitterLogo = twitterLogo;
|
|
41
41
|
|
|
42
|
-
var linkedinLogo = _react["default"].createElement("svg", {
|
|
42
|
+
var linkedinLogo = /*#__PURE__*/_react["default"].createElement("svg", {
|
|
43
43
|
version: "1.1",
|
|
44
44
|
id: "Capa_1",
|
|
45
45
|
x: "0px",
|
|
@@ -48,7 +48,7 @@ var linkedinLogo = _react["default"].createElement("svg", {
|
|
|
48
48
|
height: "438.536px",
|
|
49
49
|
viewBox: "0 0 438.536 438.536",
|
|
50
50
|
fill: "#FFFFFF"
|
|
51
|
-
}, _react["default"].createElement("g", null, _react["default"].createElement("path", {
|
|
51
|
+
}, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
|
|
52
52
|
d: "M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123 C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126 h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225 C438.532,59.576,430.49,40.204,414.41,24.123z M133.618,367.157H67.666V169.016h65.952V367.157z M127.626,132.332 c-6.851,6.567-15.893,9.851-27.124,9.851h-0.288c-10.848,0-19.648-3.284-26.407-9.851c-6.76-6.567-10.138-14.703-10.138-24.41 c0-9.897,3.476-18.083,10.421-24.556c6.95-6.471,15.942-9.708,26.98-9.708c11.039,0,19.89,3.237,26.553,9.708 c6.661,6.473,10.088,14.659,10.277,24.556C137.899,117.625,134.477,125.761,127.626,132.332z M370.873,367.157h-65.952v-105.92 c0-29.879-11.036-44.823-33.116-44.823c-8.374,0-15.42,2.331-21.128,6.995c-5.715,4.661-9.996,10.324-12.847,16.991 c-1.335,3.422-1.999,8.75-1.999,15.981v110.775h-65.952c0.571-119.529,0.571-185.579,0-198.142h65.952v27.974 c13.867-21.681,33.558-32.544,59.101-32.544c22.84,0,41.21,7.52,55.104,22.554c13.895,15.037,20.841,37.214,20.841,66.519v113.64 H370.873z"
|
|
53
53
|
})));
|
|
54
54
|
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
|
+
declare type Padding = {
|
|
4
|
+
top?: Space;
|
|
5
|
+
bottom?: Space;
|
|
6
|
+
left?: Space;
|
|
7
|
+
right?: Space;
|
|
8
|
+
};
|
|
9
|
+
declare type ChildrenType = AppLayoutHeaderPropsType | AppLayoutMainPropsType | AppLayoutFooterPropsType | AppLayoutSidenavPropsType;
|
|
10
|
+
export declare type AppLayoutHeaderPropsType = {
|
|
11
|
+
/**
|
|
12
|
+
* Everything between this tags will be displayed as a header, at the top of the screen.
|
|
13
|
+
* This is optional and if it is not specified, the DxcHeader will be shown by default.
|
|
14
|
+
*/
|
|
15
|
+
children?: React.ReactNode;
|
|
16
|
+
};
|
|
17
|
+
export declare type AppLayoutMainPropsType = {
|
|
18
|
+
/**
|
|
19
|
+
* Everything between the tags will be displayed as the content of the main part of the application.
|
|
20
|
+
*/
|
|
21
|
+
children: React.ReactNode;
|
|
22
|
+
};
|
|
23
|
+
export declare type AppLayoutFooterPropsType = {
|
|
24
|
+
/**
|
|
25
|
+
* Everything between the tags will be displayed as a footer, at the bottom of the screen.
|
|
26
|
+
* This is optional and if it is not specified, the DxcFooter will be shown by default.
|
|
27
|
+
*/
|
|
28
|
+
children?: React.ReactNode;
|
|
29
|
+
};
|
|
30
|
+
export declare type AppLayoutSidenavPropsType = {
|
|
31
|
+
/**
|
|
32
|
+
* Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
33
|
+
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
|
|
34
|
+
*/
|
|
35
|
+
padding?: Space | Padding;
|
|
36
|
+
/**
|
|
37
|
+
* The area inside the sidenav. This area can be used to render custom content.
|
|
38
|
+
*/
|
|
39
|
+
children: React.ReactNode;
|
|
40
|
+
/**
|
|
41
|
+
* If false, the arrow button is hidden.
|
|
42
|
+
* In lower resolutions the arrow will be always displayed.
|
|
43
|
+
*/
|
|
44
|
+
displayArrow?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Default action over the content of the page, overlay the content or push to the right ('push' | 'overlay').
|
|
47
|
+
* In lower resolutions the mode will always be overlay.
|
|
48
|
+
*/
|
|
49
|
+
mode: "push" | "overlay";
|
|
50
|
+
};
|
|
51
|
+
declare type AppLayoutPropsType = {
|
|
52
|
+
/**
|
|
53
|
+
* The area inside the sidenav. This area can be used to render custom content.
|
|
54
|
+
*/
|
|
55
|
+
children: React.ReactElement<ChildrenType> | React.ReactElement<ChildrenType>[];
|
|
56
|
+
};
|
|
57
|
+
export default AppLayoutPropsType;
|
package/layout/types.js
ADDED
package/link/Link.d.ts
ADDED
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
4
|
|
|
5
|
+
var _typeof3 = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
10
|
exports["default"] = void 0;
|
|
11
11
|
|
|
12
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
|
-
|
|
14
12
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
15
13
|
|
|
16
14
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
@@ -19,71 +17,15 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
19
17
|
|
|
20
18
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
21
19
|
|
|
22
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
23
|
-
|
|
24
20
|
var _variables = require("../common/variables.js");
|
|
25
21
|
|
|
26
|
-
var _useTheme = _interopRequireDefault(require("../useTheme
|
|
27
|
-
|
|
28
|
-
function _templateObject6() {
|
|
29
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n overflow: hidden;\n \n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
|
|
30
|
-
|
|
31
|
-
_templateObject6 = function _templateObject6() {
|
|
32
|
-
return data;
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
return data;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
function _templateObject5() {
|
|
39
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n"]);
|
|
40
|
-
|
|
41
|
-
_templateObject5 = function _templateObject5() {
|
|
42
|
-
return data;
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
return data;
|
|
46
|
-
}
|
|
22
|
+
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
47
23
|
|
|
48
|
-
|
|
49
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n font-family: ", ";\n display: inline-flex;\n flex-direction: ", ";\n justify-content: ", ";\n align-items: center;\n max-width: 100%;\n"]);
|
|
24
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
50
25
|
|
|
51
|
-
|
|
52
|
-
return data;
|
|
53
|
-
};
|
|
26
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
54
27
|
|
|
55
|
-
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
function _templateObject3() {
|
|
59
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n text-decoration-color: transparent;\n\n ", "\n ", "\n color: ", ";\n ", "\n\n &:hover {\n ", "\n }\n &:focus {\n outline-color: ", ";\n outline-width: 2px;\n outline-offset: 1px;\n ", "\n }\n &:active {\n ", "\n }\n"]);
|
|
60
|
-
|
|
61
|
-
_templateObject3 = function _templateObject3() {
|
|
62
|
-
return data;
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
return data;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
function _templateObject2() {
|
|
69
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n ", "\n\n text-decoration-color: transparent;\n ", "\n\n &:visited {\n color: ", ";\n &:hover {\n ", "\n }\n }\n &:hover {\n ", "\n }\n &:focus {\n outline-color: ", ";\n outline-width: 2px;\n ", "\n }\n &:active {\n ", "\n }\n"]);
|
|
70
|
-
|
|
71
|
-
_templateObject2 = function _templateObject2() {
|
|
72
|
-
return data;
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
return data;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
function _templateObject() {
|
|
79
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
|
|
80
|
-
|
|
81
|
-
_templateObject = function _templateObject() {
|
|
82
|
-
return data;
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
return data;
|
|
86
|
-
}
|
|
28
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
87
29
|
|
|
88
30
|
var DxcLink = function DxcLink(_ref) {
|
|
89
31
|
var _ref$inheritColor = _ref.inheritColor,
|
|
@@ -106,26 +48,26 @@ var DxcLink = function DxcLink(_ref) {
|
|
|
106
48
|
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
|
|
107
49
|
var colorsTheme = (0, _useTheme["default"])();
|
|
108
50
|
|
|
109
|
-
var linkContent = _react["default"].createElement(LinkText, {
|
|
51
|
+
var linkContent = /*#__PURE__*/_react["default"].createElement(LinkText, {
|
|
110
52
|
iconPosition: iconPosition
|
|
111
|
-
}, text, icon ? _react["default"].createElement(LinkIconContainer, {
|
|
53
|
+
}, text, icon ? /*#__PURE__*/_react["default"].createElement(LinkIconContainer, {
|
|
112
54
|
iconPosition: iconPosition
|
|
113
|
-
}, (0, _typeof2["default"])(icon) === "object" ? icon : _react["default"].createElement(icon)) : iconSrc && _react["default"].createElement(LinkIcon, {
|
|
55
|
+
}, (0, _typeof2["default"])(icon) === "object" ? icon : /*#__PURE__*/_react["default"].createElement(icon)) : iconSrc && /*#__PURE__*/_react["default"].createElement(LinkIcon, {
|
|
114
56
|
src: iconSrc,
|
|
115
57
|
iconPosition: iconPosition
|
|
116
58
|
}));
|
|
117
59
|
|
|
118
|
-
return _react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
60
|
+
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
119
61
|
theme: colorsTheme.link
|
|
120
|
-
}, _react["default"].createElement(DxcLinkContainer, {
|
|
62
|
+
}, /*#__PURE__*/_react["default"].createElement(DxcLinkContainer, {
|
|
121
63
|
margin: margin
|
|
122
|
-
}, onClick ? _react["default"].createElement(StyledButton, {
|
|
64
|
+
}, onClick ? /*#__PURE__*/_react["default"].createElement(StyledButton, {
|
|
123
65
|
type: "button",
|
|
124
66
|
onClick: !disabled && onClick,
|
|
125
67
|
margin: margin,
|
|
126
68
|
disabled: disabled,
|
|
127
69
|
inheritColor: inheritColor
|
|
128
|
-
}, linkContent) : _react["default"].createElement(StyledLink, {
|
|
70
|
+
}, linkContent) : /*#__PURE__*/_react["default"].createElement(StyledLink, {
|
|
129
71
|
tabIndex: tabIndex,
|
|
130
72
|
href: !disabled && href,
|
|
131
73
|
target: newWindow ? "_blank" : "_self",
|
|
@@ -135,7 +77,7 @@ var DxcLink = function DxcLink(_ref) {
|
|
|
135
77
|
}, linkContent)));
|
|
136
78
|
};
|
|
137
79
|
|
|
138
|
-
var DxcLinkContainer = _styledComponents["default"].div(_templateObject(), function (props) {
|
|
80
|
+
var DxcLinkContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
|
|
139
81
|
return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
|
|
140
82
|
}, function (props) {
|
|
141
83
|
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
|
|
@@ -147,7 +89,7 @@ var DxcLinkContainer = _styledComponents["default"].div(_templateObject(), funct
|
|
|
147
89
|
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
|
|
148
90
|
});
|
|
149
91
|
|
|
150
|
-
var StyledLink = _styledComponents["default"].a(_templateObject2(), function (props) {
|
|
92
|
+
var StyledLink = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n ", "\n\n text-decoration-color: transparent;\n ", "\n\n &:visited {\n color: ", ";\n &:hover {\n ", "\n }\n }\n &:hover {\n ", "\n }\n &:focus {\n border-radius: 2px;\n outline: 2px solid ", ";\n ", "\n }\n &:active {\n ", "\n }\n"])), function (props) {
|
|
151
93
|
return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
|
|
152
94
|
}, function (props) {
|
|
153
95
|
return props.disabled ? "pointer-events: none;" : "";
|
|
@@ -167,7 +109,7 @@ var StyledLink = _styledComponents["default"].a(_templateObject2(), function (pr
|
|
|
167
109
|
return "color: ".concat(props.theme.activeFontColor, " !important;\n border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
|
|
168
110
|
});
|
|
169
111
|
|
|
170
|
-
var StyledButton = _styledComponents["default"].button(_templateObject3(), function (props) {
|
|
112
|
+
var StyledButton = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font-family: inherit;\n text-decoration-color: transparent;\n\n ", "\n ", "\n color: ", ";\n ", "\n\n &:hover {\n ", "\n }\n &:focus {\n border-radius: 2px;\n outline: 2px solid ", ";\n ", "\n }\n &:active {\n ", "\n }\n"])), function (props) {
|
|
171
113
|
return "padding-bottom: ".concat(props.theme.underlineSpacing, ";\n border-bottom: ").concat(props.theme.underlineThickness, " ").concat(props.theme.underlineStyle, " transparent;");
|
|
172
114
|
}, function (props) {
|
|
173
115
|
return props.disabled && "cursor: default;";
|
|
@@ -185,7 +127,7 @@ var StyledButton = _styledComponents["default"].button(_templateObject3(), funct
|
|
|
185
127
|
return "color: ".concat(props.theme.activeFontColor, " !important;\n border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
|
|
186
128
|
});
|
|
187
129
|
|
|
188
|
-
var LinkText = _styledComponents["default"].div(_templateObject4(), function (props) {
|
|
130
|
+
var LinkText = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n font-family: ", ";\n display: inline-flex;\n flex-direction: ", ";\n justify-content: ", ";\n align-items: center;\n max-width: 100%;\n"])), function (props) {
|
|
189
131
|
return props.theme.fontSize;
|
|
190
132
|
}, function (props) {
|
|
191
133
|
return props.theme.fontWeight;
|
|
@@ -199,7 +141,7 @@ var LinkText = _styledComponents["default"].div(_templateObject4(), function (pr
|
|
|
199
141
|
return props.iconPosition === "after" ? "flex-start" : "flex-end";
|
|
200
142
|
});
|
|
201
143
|
|
|
202
|
-
var LinkIcon = _styledComponents["default"].img(_templateObject5(), function (props) {
|
|
144
|
+
var LinkIcon = _styledComponents["default"].img(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n"])), function (props) {
|
|
203
145
|
return props.theme.iconSize;
|
|
204
146
|
}, function (props) {
|
|
205
147
|
return props.theme.iconSize;
|
|
@@ -207,7 +149,7 @@ var LinkIcon = _styledComponents["default"].img(_templateObject5(), function (pr
|
|
|
207
149
|
return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
|
|
208
150
|
});
|
|
209
151
|
|
|
210
|
-
var LinkIconContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
|
|
152
|
+
var LinkIconContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n overflow: hidden;\n\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
|
|
211
153
|
return props.theme.iconSize;
|
|
212
154
|
}, function (props) {
|
|
213
155
|
return props.theme.iconSize;
|
|
@@ -215,23 +157,5 @@ var LinkIconContainer = _styledComponents["default"].div(_templateObject6(), fun
|
|
|
215
157
|
return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
|
|
216
158
|
});
|
|
217
159
|
|
|
218
|
-
DxcLink.propTypes = {
|
|
219
|
-
inheritColor: _propTypes["default"].bool,
|
|
220
|
-
disabled: _propTypes["default"].bool,
|
|
221
|
-
icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
|
|
222
|
-
iconSrc: _propTypes["default"].string,
|
|
223
|
-
iconPosition: _propTypes["default"].oneOf(["after", "before"]),
|
|
224
|
-
href: _propTypes["default"].string,
|
|
225
|
-
onClick: _propTypes["default"].func,
|
|
226
|
-
margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
|
|
227
|
-
top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
228
|
-
bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
229
|
-
left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
230
|
-
right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
|
|
231
|
-
}), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
|
|
232
|
-
newWindow: _propTypes["default"].bool,
|
|
233
|
-
text: _propTypes["default"].string,
|
|
234
|
-
tabIndex: _propTypes["default"].number
|
|
235
|
-
};
|
|
236
160
|
var _default = DxcLink;
|
|
237
161
|
exports["default"] = _default;
|