@dxc-technology/halstack-react 0.0.0-fb21419 → 0.0.0-fb2efcc
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.js +50 -0
- package/ThemeContext.js +246 -0
- package/V3Select/V3Select.js +455 -0
- package/V3Select/index.d.ts +27 -0
- package/{dist/textarea/Textarea.js → V3Textarea/V3Textarea.js} +39 -39
- package/V3Textarea/index.d.ts +27 -0
- package/{dist/accordion → accordion}/Accordion.js +82 -133
- package/accordion/index.d.ts +28 -0
- package/{dist/accordion-group → accordion-group}/AccordionGroup.js +13 -17
- package/accordion-group/index.d.ts +16 -0
- package/alert/Alert.js +309 -0
- package/alert/index.d.ts +51 -0
- package/badge/Badge.js +59 -0
- package/{dist/box → box}/Box.js +9 -21
- package/box/index.d.ts +25 -0
- package/button/Button.d.ts +4 -0
- package/button/Button.js +182 -0
- package/button/Button.stories.tsx +306 -0
- package/button/types.d.ts +57 -0
- package/button/types.js +5 -0
- package/{dist/card → card}/Card.js +19 -75
- package/card/index.d.ts +22 -0
- package/{dist/checkbox → checkbox}/Checkbox.js +44 -60
- package/checkbox/index.d.ts +24 -0
- package/{dist/chip → chip}/Chip.js +42 -84
- package/chip/index.d.ts +22 -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/common/variables.js +1569 -0
- package/{dist/date → date}/Date.js +33 -51
- package/date/index.d.ts +27 -0
- package/date-input/DateInput.js +396 -0
- package/date-input/index.d.ts +95 -0
- package/{dist/dialog → dialog}/Dialog.js +28 -80
- package/dialog/index.d.ts +18 -0
- package/dropdown/Dropdown.js +450 -0
- package/dropdown/index.d.ts +26 -0
- package/file-input/FileInput.js +532 -0
- package/file-input/FileItem.js +193 -0
- package/file-input/index.d.ts +81 -0
- package/{dist/footer → footer}/Footer.js +69 -177
- package/footer/Icons.js +77 -0
- package/footer/index.d.ts +25 -0
- package/header/Header.js +326 -0
- package/header/Icons.js +59 -0
- package/header/index.d.ts +25 -0
- package/{dist/heading → heading}/Heading.js +30 -76
- package/heading/index.d.ts +17 -0
- package/input-text/Icons.js +22 -0
- package/{dist/input-text → input-text}/InputText.js +120 -178
- package/input-text/index.d.ts +36 -0
- package/{dist/layout → layout}/ApplicationLayout.js +35 -131
- package/layout/Icons.js +55 -0
- package/{dist/link → link}/Link.js +37 -94
- package/link/index.d.ts +23 -0
- package/main.d.ts +44 -0
- package/{dist/main.js → main.js} +121 -69
- package/number-input/NumberInput.js +128 -0
- package/number-input/NumberInputContext.js +16 -0
- package/number-input/index.d.ts +113 -0
- package/package.json +33 -24
- package/paginator/Icons.js +66 -0
- package/paginator/Paginator.js +221 -0
- package/paginator/index.d.ts +20 -0
- package/password-input/PasswordInput.js +199 -0
- package/password-input/index.d.ts +94 -0
- package/progress-bar/ProgressBar.js +188 -0
- package/progress-bar/index.d.ts +18 -0
- package/{dist/radio → radio}/Radio.js +12 -26
- package/radio/index.d.ts +23 -0
- package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +35 -136
- package/resultsetTable/index.d.ts +19 -0
- package/select/Select.js +865 -0
- package/select/index.d.ts +131 -0
- package/{dist/sidenav → sidenav}/Sidenav.js +20 -58
- package/sidenav/index.d.ts +13 -0
- package/slider/Slider.js +340 -0
- package/slider/index.d.ts +29 -0
- package/spinner/Spinner.js +267 -0
- package/spinner/index.d.ts +17 -0
- package/{dist/switch → switch}/Switch.js +12 -26
- package/switch/index.d.ts +24 -0
- package/{dist/table → table}/Table.js +13 -23
- package/table/index.d.ts +13 -0
- package/{dist/tabs → tabs}/Tabs.js +26 -110
- package/tabs/index.d.ts +19 -0
- package/{dist/tag → tag}/Tag.js +50 -122
- package/tag/index.d.ts +24 -0
- package/text-input/TextInput.js +825 -0
- package/text-input/index.d.ts +135 -0
- package/textarea/Textarea.js +317 -0
- package/textarea/index.d.ts +117 -0
- package/{dist/toggle → toggle}/Toggle.js +15 -49
- package/toggle/index.d.ts +21 -0
- package/toggle-group/ToggleGroup.js +243 -0
- package/toggle-group/index.d.ts +21 -0
- package/{dist/upload → upload}/Upload.js +11 -15
- package/upload/buttons-upload/ButtonsUpload.js +111 -0
- package/upload/buttons-upload/Icons.js +40 -0
- 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 +12 -26
- package/upload/index.d.ts +15 -0
- package/upload/transaction/Icons.js +160 -0
- package/upload/transaction/Transaction.js +104 -0
- package/upload/transactions/Transactions.js +94 -0
- package/{dist/useTheme.js → useTheme.js} +0 -0
- package/wizard/Icons.js +65 -0
- package/wizard/Wizard.js +271 -0
- package/wizard/index.d.ts +18 -0
- package/README.md +0 -66
- package/babel.config.js +0 -8
- package/dist/BackgroundColorContext.js +0 -46
- package/dist/ThemeContext.js +0 -216
- package/dist/accordion/Accordion.stories.js +0 -207
- package/dist/accordion/readme.md +0 -96
- package/dist/accordion-group/AccordionGroup.stories.js +0 -207
- package/dist/accordion-group/readme.md +0 -70
- package/dist/alert/Alert.js +0 -388
- package/dist/alert/Alert.stories.js +0 -158
- package/dist/alert/close.svg +0 -4
- package/dist/alert/error.svg +0 -4
- package/dist/alert/info.svg +0 -4
- package/dist/alert/readme.md +0 -43
- package/dist/alert/success.svg +0 -4
- package/dist/alert/warning.svg +0 -4
- package/dist/badge/Badge.js +0 -63
- package/dist/button/Button.js +0 -228
- package/dist/button/Button.stories.js +0 -224
- package/dist/button/readme.md +0 -93
- package/dist/checkbox/Checkbox.stories.js +0 -144
- package/dist/checkbox/readme.md +0 -116
- package/dist/common/variables.js +0 -1160
- package/dist/date/Date.stories.js +0 -205
- package/dist/date/calendar.svg +0 -1
- package/dist/date/calendar_dark.svg +0 -1
- package/dist/date/readme.md +0 -73
- package/dist/dialog/Dialog.stories.js +0 -217
- package/dist/dialog/readme.md +0 -32
- package/dist/dropdown/Dropdown.js +0 -492
- package/dist/dropdown/Dropdown.stories.js +0 -249
- package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
- package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
- package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
- package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
- package/dist/dropdown/readme.md +0 -69
- package/dist/footer/Footer.stories.js +0 -94
- package/dist/footer/dxc_logo_wht.png +0 -0
- package/dist/footer/readme.md +0 -41
- package/dist/header/Header.js +0 -431
- package/dist/header/Header.stories.js +0 -176
- package/dist/header/close_icon.svg +0 -1
- package/dist/header/dxc_logo_black.png +0 -0
- package/dist/header/dxc_logo_blk_rgb.svg +0 -6
- package/dist/header/dxc_logo_white.png +0 -0
- package/dist/header/hamb_menu_black.svg +0 -1
- package/dist/header/hamb_menu_white.svg +0 -1
- package/dist/header/readme.md +0 -33
- package/dist/input-text/InputText.stories.js +0 -209
- package/dist/input-text/error.svg +0 -1
- package/dist/input-text/readme.md +0 -91
- package/dist/layout/facebook.svg +0 -45
- package/dist/layout/linkedin.svg +0 -50
- package/dist/layout/twitter.svg +0 -53
- package/dist/link/readme.md +0 -51
- package/dist/paginator/Paginator.js +0 -283
- package/dist/paginator/images/next.svg +0 -3
- package/dist/paginator/images/nextPage.svg +0 -3
- package/dist/paginator/images/previous.svg +0 -3
- package/dist/paginator/images/previousPage.svg +0 -3
- package/dist/paginator/readme.md +0 -50
- package/dist/progress-bar/ProgressBar.js +0 -206
- 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/resultsetTable/arrow_downward-24px_wht.svg +0 -1
- package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
- package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
- package/dist/select/Select.js +0 -545
- package/dist/select/Select.stories.js +0 -235
- package/dist/select/readme.md +0 -72
- package/dist/slider/Slider.js +0 -315
- package/dist/slider/Slider.stories.js +0 -241
- package/dist/slider/readme.md +0 -64
- package/dist/spinner/Spinner.js +0 -214
- 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.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/toggle/Toggle.stories.js +0 -297
- package/dist/toggle/readme.md +0 -80
- package/dist/toggle-group/ToggleGroup.js +0 -241
- package/dist/toggle-group/readme.md +0 -82
- package/dist/upload/Upload.stories.js +0 -72
- package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
- package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
- package/dist/upload/buttons-upload/upload-button.svg +0 -1
- package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -325
- 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 -171
- package/dist/upload/transaction/audio-icon-err.svg +0 -4
- package/dist/upload/transaction/audio-icon.svg +0 -4
- package/dist/upload/transaction/error-icon.svg +0 -4
- package/dist/upload/transaction/file-icon-err.svg +0 -4
- package/dist/upload/transaction/file-icon.svg +0 -4
- package/dist/upload/transaction/image-icon-err.svg +0 -4
- package/dist/upload/transaction/image-icon.svg +0 -4
- package/dist/upload/transaction/success-icon.svg +0 -4
- package/dist/upload/transaction/video-icon-err.svg +0 -4
- package/dist/upload/transaction/video-icon.svg +0 -4
- package/dist/upload/transactions/Transactions.js +0 -138
- package/dist/wizard/Wizard.js +0 -383
- package/dist/wizard/invalid_icon.svg +0 -6
- package/dist/wizard/valid_icon.svg +0 -6
- package/dist/wizard/validation-wrong.svg +0 -6
- 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 -393
- package/test/Dialog.test.js +0 -23
- package/test/Dropdown.test.js +0 -130
- package/test/Footer.test.js +0 -99
- package/test/Header.test.js +0 -39
- package/test/Heading.test.js +0 -35
- package/test/InputText.test.js +0 -240
- package/test/Link.test.js +0 -43
- package/test/Paginator.test.js +0 -177
- 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 -192
- package/test/Sidenav.test.js +0 -45
- package/test/Slider.test.js +0 -82
- package/test/Spinner.test.js +0 -27
- 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/TextArea.test.js +0 -52
- package/test/ToggleGroup.test.js +0 -81
- package/test/Upload.test.js +0 -60
- package/test/Wizard.test.js +0 -130
- package/test/mocks/pngMock.js +0 -1
- package/test/mocks/svgMock.js +0 -1
package/dist/ThemeContext.js
DELETED
|
@@ -1,216 +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.ThemeProvider = exports["default"] = void 0;
|
|
11
|
-
|
|
12
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
|
-
|
|
14
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
15
|
-
|
|
16
|
-
var _color = _interopRequireDefault(require("color"));
|
|
17
|
-
|
|
18
|
-
var _rgbHex = _interopRequireDefault(require("rgb-hex"));
|
|
19
|
-
|
|
20
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
21
|
-
|
|
22
|
-
var _variables = require("./common/variables.js");
|
|
23
|
-
|
|
24
|
-
function _templateObject() {
|
|
25
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap\");\n"]);
|
|
26
|
-
|
|
27
|
-
_templateObject = function _templateObject() {
|
|
28
|
-
return data;
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
return data;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
var ThemeContext = _react["default"].createContext();
|
|
35
|
-
|
|
36
|
-
var setLightness = function setLightness(hexColor, newLightness) {
|
|
37
|
-
try {
|
|
38
|
-
if (hexColor) {
|
|
39
|
-
var color = (0, _color["default"])(hexColor);
|
|
40
|
-
var hslColor = color.hsl();
|
|
41
|
-
var lightnessColor = hslColor.color[2];
|
|
42
|
-
return hslColor.lightness(lightnessColor + newLightness).hex();
|
|
43
|
-
}
|
|
44
|
-
} catch (e) {
|
|
45
|
-
return null;
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
var setOpacity = function setOpacity(hexColor, newOpacity) {
|
|
50
|
-
try {
|
|
51
|
-
if (hexColor) {
|
|
52
|
-
var color = (0, _color["default"])(hexColor);
|
|
53
|
-
return "#" + (0, _rgbHex["default"])(color.color[0], color.color[1], color.color[2], newOpacity);
|
|
54
|
-
}
|
|
55
|
-
} catch (e) {
|
|
56
|
-
return null;
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
var parseAdvancedTheme = function parseAdvancedTheme(advancedTheme) {
|
|
61
|
-
var allTokensCopy = JSON.parse(JSON.stringify(_variables.componentTokens));
|
|
62
|
-
Object.keys(allTokensCopy).map(function (component) {
|
|
63
|
-
if (advancedTheme[component]) {
|
|
64
|
-
Object.keys(advancedTheme[component]).map(function (objectKey) {
|
|
65
|
-
if (advancedTheme[component][objectKey]) {
|
|
66
|
-
allTokensCopy[component][objectKey] = advancedTheme[component][objectKey];
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
}
|
|
70
|
-
});
|
|
71
|
-
return allTokensCopy;
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
var parseTheme = function parseTheme(theme) {
|
|
75
|
-
var _ref, _theme$accordion, _ref2, _theme$accordion2, _setLightness, _theme$accordion3, _setLightness2, _theme$accordion4, _ref3, _theme$accordion5, _ref4, _theme$button, _ref5, _theme$button2, _ref6, _theme$button3, _ref7, _theme$button4, _ref8, _theme$button5, _ref9, _theme$button6, _ref10, _theme$button7, _ref11, _theme$button8, _ref12, _theme$button9, _ref13, _theme$button10, _ref14, _theme$button11, _setOpacity, _theme$button12, _setOpacity2, _theme$button13, _setOpacity3, _theme$button14, _setOpacity4, _theme$button15, _setOpacity5, _theme$button16, _ref15, _theme$checkbox, _ref16, _theme$checkbox2, _ref17, _theme$checkbox3, _setOpacity6, _theme$checkbox4, _setOpacity7, _theme$checkbox5, _setOpacity8, _theme$checkbox6, _ref18, _theme$chip, _setOpacity9, _theme$chip2, _ref19, _theme$chip3, _ref20, _theme$chip4, _setOpacity10, _theme$chip5, _ref21, _theme$date, _ref22, _theme$date2, _setOpacity11, _theme$date3, _ref23, _theme$dropdown, _ref24, _theme$dropdown2, _setOpacity12, _theme$dropdown3, _setOpacity13, _theme$dropdown4, _ref25, _theme$footer, _ref26, _theme$footer2, _ref27, _theme$footer3, _ref28, _theme$footer4, _ref29, _theme$header, _ref30, _theme$header2, _ref31, _theme$header3, _ref32, _theme$header4, _ref33, _theme$header5, _setOpacity14, _theme$header6, _ref34, _theme$header7, _ref35, _theme$header8, _setOpacity15, _theme$inputText, _ref36, _theme$paginator, _ref37, _theme$paginator2, _ref38, _theme$progressBar, _ref39, _theme$progressBar2, _ref40, _theme$radio, _setOpacity16, _theme$radio2, _ref41, _theme$select, _setOpacity17, _theme$select2, _setOpacity18, _theme$select3, _ref42, _theme$sidenav, _setOpacity19, _theme$sidenav2, _ref43, _theme$sidenav3, _ref44, _theme$slider, _ref45, _theme$slider2, _ref46, _theme$slider3, _setOpacity20, _theme$slider4, _setOpacity21, _theme$slider5, _setOpacity22, _theme$slider6, _setOpacity23, _theme$slider7, _ref47, _theme$spinner, _ref48, _theme$spinner2, _ref49, _theme$switch, _setOpacity24, _theme$switch2, _ref50, _theme$table, _ref51, _theme$table2, _ref52, _theme$tabs, _ref53, _theme$tabs2, _ref54, _theme$tabs3, _ref55, _theme$tabs4, _setLightness3, _theme$tabs5, _setLightness4, _theme$tabs6, _ref56, _theme$toggleGroup, _ref57, _theme$toggleGroup2, _ref58, _theme$toggleGroup3, _ref59, _theme$toggleGroup4, _ref60, _theme$toggleGroup5, _ref61, _theme$toggleGroup6, _ref62, _theme$toggleGroup7, _ref63, _theme$toggleGroup8, _setOpacity25, _theme$toggleGroup9, _setOpacity26, _theme$toggleGroup10, _setOpacity27, _theme$toggleGroup11, _setOpacity28, _theme$toggleGroup12, _ref64, _theme$wizard, _ref65, _theme$wizard2;
|
|
76
|
-
|
|
77
|
-
var componentTokensCopy = JSON.parse(JSON.stringify(_variables.componentTokens));
|
|
78
|
-
var accordionTokens = componentTokensCopy.accordion;
|
|
79
|
-
accordionTokens.fontColorBase = (_ref = theme === null || theme === void 0 ? void 0 : (_theme$accordion = theme.accordion) === null || _theme$accordion === void 0 ? void 0 : _theme$accordion.fontColor) !== null && _ref !== void 0 ? _ref : accordionTokens.fontColorBase;
|
|
80
|
-
accordionTokens.arrowColor = (_ref2 = theme === null || theme === void 0 ? void 0 : (_theme$accordion2 = theme.accordion) === null || _theme$accordion2 === void 0 ? void 0 : _theme$accordion2.accentColor) !== null && _ref2 !== void 0 ? _ref2 : accordionTokens.arrowColor;
|
|
81
|
-
accordionTokens.hoverBackgroundColor = (_setLightness = setLightness(theme === null || theme === void 0 ? void 0 : (_theme$accordion3 = theme.accordion) === null || _theme$accordion3 === void 0 ? void 0 : _theme$accordion3.accentColor, 53)) !== null && _setLightness !== void 0 ? _setLightness : accordionTokens.hoverBackgroundColor;
|
|
82
|
-
accordionTokens.disabledFontColor = (_setLightness2 = setLightness(theme === null || theme === void 0 ? void 0 : (_theme$accordion4 = theme.accordion) === null || _theme$accordion4 === void 0 ? void 0 : _theme$accordion4.fontColor, 35)) !== null && _setLightness2 !== void 0 ? _setLightness2 : accordionTokens.disabledFontColor;
|
|
83
|
-
accordionTokens.headerFocusBorderColor = (_ref3 = theme === null || theme === void 0 ? void 0 : (_theme$accordion5 = theme.accordion) === null || _theme$accordion5 === void 0 ? void 0 : _theme$accordion5.accentColor) !== null && _ref3 !== void 0 ? _ref3 : accordionTokens.headerFocusBorderColor;
|
|
84
|
-
var buttonTokens = componentTokensCopy.button;
|
|
85
|
-
buttonTokens.primaryBackgroundColor = (_ref4 = theme === null || theme === void 0 ? void 0 : (_theme$button = theme.button) === null || _theme$button === void 0 ? void 0 : _theme$button.baseColor) !== null && _ref4 !== void 0 ? _ref4 : buttonTokens.primaryBackgroundColor;
|
|
86
|
-
buttonTokens.secondaryOutlinedColor = (_ref5 = theme === null || theme === void 0 ? void 0 : (_theme$button2 = theme.button) === null || _theme$button2 === void 0 ? void 0 : _theme$button2.baseColor) !== null && _ref5 !== void 0 ? _ref5 : buttonTokens.secondaryOutlinedColor;
|
|
87
|
-
buttonTokens.primaryHoverBackgroundColor = (_ref6 = theme === null || theme === void 0 ? void 0 : (_theme$button3 = theme.button) === null || _theme$button3 === void 0 ? void 0 : _theme$button3.hoverBaseColor) !== null && _ref6 !== void 0 ? _ref6 : buttonTokens.primaryHoverBackgroundColor;
|
|
88
|
-
buttonTokens.secondaryHoverOutlinedColor = (_ref7 = theme === null || theme === void 0 ? void 0 : (_theme$button4 = theme.button) === null || _theme$button4 === void 0 ? void 0 : _theme$button4.hoverBaseColor) !== null && _ref7 !== void 0 ? _ref7 : buttonTokens.secondaryHoverOutlinedColor;
|
|
89
|
-
buttonTokens.textHoverBackgroundColor = (_ref8 = theme === null || theme === void 0 ? void 0 : (_theme$button5 = theme.button) === null || _theme$button5 === void 0 ? void 0 : _theme$button5.hoverBaseColor) !== null && _ref8 !== void 0 ? _ref8 : buttonTokens.textHoverBackgroundColor;
|
|
90
|
-
buttonTokens.primaryFontColor = (_ref9 = theme === null || theme === void 0 ? void 0 : (_theme$button6 = theme.button) === null || _theme$button6 === void 0 ? void 0 : _theme$button6.primaryFontColor) !== null && _ref9 !== void 0 ? _ref9 : buttonTokens.primaryFontColor;
|
|
91
|
-
buttonTokens.primaryHoverFontColor = (_ref10 = theme === null || theme === void 0 ? void 0 : (_theme$button7 = theme.button) === null || _theme$button7 === void 0 ? void 0 : _theme$button7.primaryHoverFontColor) !== null && _ref10 !== void 0 ? _ref10 : buttonTokens.primaryHoverFontColor;
|
|
92
|
-
buttonTokens.secondaryFontColor = (_ref11 = theme === null || theme === void 0 ? void 0 : (_theme$button8 = theme.button) === null || _theme$button8 === void 0 ? void 0 : _theme$button8.secondaryFontColor) !== null && _ref11 !== void 0 ? _ref11 : buttonTokens.secondaryFontColor;
|
|
93
|
-
buttonTokens.secondaryHoverFontColor = (_ref12 = theme === null || theme === void 0 ? void 0 : (_theme$button9 = theme.button) === null || _theme$button9 === void 0 ? void 0 : _theme$button9.secondaryHoverFontColor) !== null && _ref12 !== void 0 ? _ref12 : buttonTokens.secondaryHoverFontColor;
|
|
94
|
-
buttonTokens.textFontColor = (_ref13 = theme === null || theme === void 0 ? void 0 : (_theme$button10 = theme.button) === null || _theme$button10 === void 0 ? void 0 : _theme$button10.textFontColor) !== null && _ref13 !== void 0 ? _ref13 : buttonTokens.textFontColor;
|
|
95
|
-
buttonTokens.textHoverFontColor = (_ref14 = theme === null || theme === void 0 ? void 0 : (_theme$button11 = theme.button) === null || _theme$button11 === void 0 ? void 0 : _theme$button11.textHoverFontColor) !== null && _ref14 !== void 0 ? _ref14 : buttonTokens.textHoverFontColor;
|
|
96
|
-
buttonTokens.disabledPrimaryBackgroundColor = (_setOpacity = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$button12 = theme.button) === null || _theme$button12 === void 0 ? void 0 : _theme$button12.baseColor, 0.34)) !== null && _setOpacity !== void 0 ? _setOpacity : buttonTokens.disabledPrimaryBackgroundColor;
|
|
97
|
-
buttonTokens.disabledSecondaryOutlinedColor = (_setOpacity2 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$button13 = theme.button) === null || _theme$button13 === void 0 ? void 0 : _theme$button13.baseColor, 0.34)) !== null && _setOpacity2 !== void 0 ? _setOpacity2 : buttonTokens.disabledSecondaryOutlinedColor;
|
|
98
|
-
buttonTokens.disabledPrimaryFontColor = (_setOpacity3 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$button14 = theme.button) === null || _theme$button14 === void 0 ? void 0 : _theme$button14.primaryFontColor, 0.34)) !== null && _setOpacity3 !== void 0 ? _setOpacity3 : buttonTokens.disabledPrimaryFontColor;
|
|
99
|
-
buttonTokens.disabledSecondaryFontColor = (_setOpacity4 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$button15 = theme.button) === null || _theme$button15 === void 0 ? void 0 : _theme$button15.secondaryFontColor, 0.34)) !== null && _setOpacity4 !== void 0 ? _setOpacity4 : buttonTokens.disabledSecondaryFontColor;
|
|
100
|
-
buttonTokens.disabledTextFontColor = (_setOpacity5 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$button16 = theme.button) === null || _theme$button16 === void 0 ? void 0 : _theme$button16.textFontColor, 0.34)) !== null && _setOpacity5 !== void 0 ? _setOpacity5 : buttonTokens.disabledTextFontColor;
|
|
101
|
-
var checkboxTokens = componentTokensCopy.checkbox;
|
|
102
|
-
checkboxTokens.backgroundColorChecked = (_ref15 = theme === null || theme === void 0 ? void 0 : (_theme$checkbox = theme.checkbox) === null || _theme$checkbox === void 0 ? void 0 : _theme$checkbox.baseColor) !== null && _ref15 !== void 0 ? _ref15 : checkboxTokens.backgroundColorChecked;
|
|
103
|
-
checkboxTokens.borderColor = (_ref16 = theme === null || theme === void 0 ? void 0 : (_theme$checkbox2 = theme.checkbox) === null || _theme$checkbox2 === void 0 ? void 0 : _theme$checkbox2.baseColor) !== null && _ref16 !== void 0 ? _ref16 : checkboxTokens.borderColor;
|
|
104
|
-
checkboxTokens.checkColor = (_ref17 = theme === null || theme === void 0 ? void 0 : (_theme$checkbox3 = theme.checkbox) === null || _theme$checkbox3 === void 0 ? void 0 : _theme$checkbox3.checkColor) !== null && _ref17 !== void 0 ? _ref17 : checkboxTokens.checkColor;
|
|
105
|
-
checkboxTokens.disabledBackgroundColorChecked = (_setOpacity6 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$checkbox4 = theme.checkbox) === null || _theme$checkbox4 === void 0 ? void 0 : _theme$checkbox4.baseColor, 0.34)) !== null && _setOpacity6 !== void 0 ? _setOpacity6 : checkboxTokens.disabledBackgroundColorChecked;
|
|
106
|
-
checkboxTokens.disabledBorderColor = (_setOpacity7 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$checkbox5 = theme.checkbox) === null || _theme$checkbox5 === void 0 ? void 0 : _theme$checkbox5.baseColor, 0.34)) !== null && _setOpacity7 !== void 0 ? _setOpacity7 : checkboxTokens.disabledBorderColor;
|
|
107
|
-
checkboxTokens.disabledCheckColor = (_setOpacity8 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$checkbox6 = theme.checkbox) === null || _theme$checkbox6 === void 0 ? void 0 : _theme$checkbox6.checkColor, 0.34)) !== null && _setOpacity8 !== void 0 ? _setOpacity8 : checkboxTokens.disabledCheckColor;
|
|
108
|
-
var chipTokens = componentTokensCopy.chip;
|
|
109
|
-
chipTokens.backgroundColor = (_ref18 = theme === null || theme === void 0 ? void 0 : (_theme$chip = theme.chip) === null || _theme$chip === void 0 ? void 0 : _theme$chip.baseColor) !== null && _ref18 !== void 0 ? _ref18 : chipTokens.backgroundColor;
|
|
110
|
-
chipTokens.disabledBackgroundColor = (_setOpacity9 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$chip2 = theme.chip) === null || _theme$chip2 === void 0 ? void 0 : _theme$chip2.baseColor, 0.34)) !== null && _setOpacity9 !== void 0 ? _setOpacity9 : chipTokens.disabledBackgroundColor;
|
|
111
|
-
chipTokens.borderColor = (_ref19 = theme === null || theme === void 0 ? void 0 : (_theme$chip3 = theme.chip) === null || _theme$chip3 === void 0 ? void 0 : _theme$chip3.accentColor) !== null && _ref19 !== void 0 ? _ref19 : chipTokens.borderolor;
|
|
112
|
-
chipTokens.fontColor = (_ref20 = theme === null || theme === void 0 ? void 0 : (_theme$chip4 = theme.chip) === null || _theme$chip4 === void 0 ? void 0 : _theme$chip4.fontColor) !== null && _ref20 !== void 0 ? _ref20 : chipTokens.fontColor;
|
|
113
|
-
chipTokens.disabledFontColor = (_setOpacity10 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$chip5 = theme.chip) === null || _theme$chip5 === void 0 ? void 0 : _theme$chip5.fontColor, 0.34)) !== null && _setOpacity10 !== void 0 ? _setOpacity10 : chipTokens.disabledFontColor;
|
|
114
|
-
var dateTokens = componentTokensCopy.date;
|
|
115
|
-
dateTokens.pickerSelectedDateBackgroundColor = (_ref21 = theme === null || theme === void 0 ? void 0 : (_theme$date = theme.date) === null || _theme$date === void 0 ? void 0 : _theme$date.baseColor) !== null && _ref21 !== void 0 ? _ref21 : dateTokens.pickerSelectedDateBackgroundColor;
|
|
116
|
-
dateTokens.pickerSelectedDateColor = (_ref22 = theme === null || theme === void 0 ? void 0 : (_theme$date2 = theme.date) === null || _theme$date2 === void 0 ? void 0 : _theme$date2.accentColor) !== null && _ref22 !== void 0 ? _ref22 : dateTokens.pickerSelectedDateColor;
|
|
117
|
-
dateTokens.pickerHoverDateBackgroundColor = (_setOpacity11 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$date3 = theme.date) === null || _theme$date3 === void 0 ? void 0 : _theme$date3.baseColor, 0.34)) !== null && _setOpacity11 !== void 0 ? _setOpacity11 : dateTokens.pickerHoverDateBackgroundColor;
|
|
118
|
-
var dropdownTokens = componentTokensCopy.dropdown;
|
|
119
|
-
dropdownTokens.buttonBackgroundColor = (_ref23 = theme === null || theme === void 0 ? void 0 : (_theme$dropdown = theme.dropdown) === null || _theme$dropdown === void 0 ? void 0 : _theme$dropdown.baseColor) !== null && _ref23 !== void 0 ? _ref23 : dropdownTokens.buttonBackgroundColor;
|
|
120
|
-
dropdownTokens.buttonFontColor = (_ref24 = theme === null || theme === void 0 ? void 0 : (_theme$dropdown2 = theme.dropdown) === null || _theme$dropdown2 === void 0 ? void 0 : _theme$dropdown2.fontColor) !== null && _ref24 !== void 0 ? _ref24 : dropdownTokens.buttonFontColor;
|
|
121
|
-
dropdownTokens.buttonHoverBackgroundColor = (_setOpacity12 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$dropdown3 = theme.dropdown) === null || _theme$dropdown3 === void 0 ? void 0 : _theme$dropdown3.baseColor, 0.8)) !== null && _setOpacity12 !== void 0 ? _setOpacity12 : dropdownTokens.buttonHoverBackgroundColor;
|
|
122
|
-
dropdownTokens.optionsListHoverBackgroundColor = (_setOpacity13 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$dropdown4 = theme.dropdown) === null || _theme$dropdown4 === void 0 ? void 0 : _theme$dropdown4.baseColor, 0.34)) !== null && _setOpacity13 !== void 0 ? _setOpacity13 : dropdownTokens.optionsListHoverBackgroundColor;
|
|
123
|
-
var footerTokens = componentTokensCopy.footer;
|
|
124
|
-
footerTokens.backgroundColor = (_ref25 = theme === null || theme === void 0 ? void 0 : (_theme$footer = theme.footer) === null || _theme$footer === void 0 ? void 0 : _theme$footer.baseColor) !== null && _ref25 !== void 0 ? _ref25 : footerTokens.backgroundColor;
|
|
125
|
-
footerTokens.fontColorBase = (_ref26 = theme === null || theme === void 0 ? void 0 : (_theme$footer2 = theme.footer) === null || _theme$footer2 === void 0 ? void 0 : _theme$footer2.fontColor) !== null && _ref26 !== void 0 ? _ref26 : footerTokens.fontColorBase;
|
|
126
|
-
footerTokens.bottomLinksDividerColor = (_ref27 = theme === null || theme === void 0 ? void 0 : (_theme$footer3 = theme.footer) === null || _theme$footer3 === void 0 ? void 0 : _theme$footer3.accentColor) !== null && _ref27 !== void 0 ? _ref27 : footerTokens.bottomLinksDividerColor;
|
|
127
|
-
footerTokens.logo = (_ref28 = theme === null || theme === void 0 ? void 0 : (_theme$footer4 = theme.footer) === null || _theme$footer4 === void 0 ? void 0 : _theme$footer4.logo) !== null && _ref28 !== void 0 ? _ref28 : footerTokens.logo;
|
|
128
|
-
var headerTokens = componentTokensCopy.header;
|
|
129
|
-
headerTokens.backgroundColor = (_ref29 = theme === null || theme === void 0 ? void 0 : (_theme$header = theme.header) === null || _theme$header === void 0 ? void 0 : _theme$header.baseColor) !== null && _ref29 !== void 0 ? _ref29 : headerTokens.backgroundColor;
|
|
130
|
-
headerTokens.underlinedColor = (_ref30 = theme === null || theme === void 0 ? void 0 : (_theme$header2 = theme.header) === null || _theme$header2 === void 0 ? void 0 : _theme$header2.accentColor) !== null && _ref30 !== void 0 ? _ref30 : headerTokens.underlinedColor;
|
|
131
|
-
headerTokens.fontColorBase = (_ref31 = theme === null || theme === void 0 ? void 0 : (_theme$header3 = theme.header) === null || _theme$header3 === void 0 ? void 0 : _theme$header3.fontColor) !== null && _ref31 !== void 0 ? _ref31 : headerTokens.fontColorBase;
|
|
132
|
-
headerTokens.menuBackgroundColor = (_ref32 = theme === null || theme === void 0 ? void 0 : (_theme$header4 = theme.header) === null || _theme$header4 === void 0 ? void 0 : _theme$header4.menuBaseColor) !== null && _ref32 !== void 0 ? _ref32 : headerTokens.menuBackgroundColor;
|
|
133
|
-
headerTokens.hamburguerColor = (_ref33 = theme === null || theme === void 0 ? void 0 : (_theme$header5 = theme.header) === null || _theme$header5 === void 0 ? void 0 : _theme$header5.hamburguerColor) !== null && _ref33 !== void 0 ? _ref33 : headerTokens.hamburguerColor;
|
|
134
|
-
headerTokens.hamburguerHoverColor = (_setOpacity14 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$header6 = theme.header) === null || _theme$header6 === void 0 ? void 0 : _theme$header6.hamburguerColor, 0.16)) !== null && _setOpacity14 !== void 0 ? _setOpacity14 : headerTokens.hamburguerHoverColor;
|
|
135
|
-
headerTokens.logo = (_ref34 = theme === null || theme === void 0 ? void 0 : (_theme$header7 = theme.header) === null || _theme$header7 === void 0 ? void 0 : _theme$header7.logo) !== null && _ref34 !== void 0 ? _ref34 : headerTokens.logo;
|
|
136
|
-
headerTokens.logoResponsive = (_ref35 = theme === null || theme === void 0 ? void 0 : (_theme$header8 = theme.header) === null || _theme$header8 === void 0 ? void 0 : _theme$header8.logoResponsive) !== null && _ref35 !== void 0 ? _ref35 : headerTokens.logoResponsive;
|
|
137
|
-
var inputTokens = componentTokensCopy.inputText;
|
|
138
|
-
inputTokens.selectedOptionBackgroundColor = (_setOpacity15 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$inputText = theme.inputText) === null || _theme$inputText === void 0 ? void 0 : _theme$inputText.selectedBaseColor, 0.34)) !== null && _setOpacity15 !== void 0 ? _setOpacity15 : inputTokens.selectedOptionBackgroundColor;
|
|
139
|
-
var paginatorTokens = componentTokensCopy.paginator;
|
|
140
|
-
paginatorTokens.backgroundColor = (_ref36 = theme === null || theme === void 0 ? void 0 : (_theme$paginator = theme.paginator) === null || _theme$paginator === void 0 ? void 0 : _theme$paginator.baseColor) !== null && _ref36 !== void 0 ? _ref36 : paginatorTokens.backgroundColor;
|
|
141
|
-
paginatorTokens.fontColor = (_ref37 = theme === null || theme === void 0 ? void 0 : (_theme$paginator2 = theme.paginator) === null || _theme$paginator2 === void 0 ? void 0 : _theme$paginator2.fontColor) !== null && _ref37 !== void 0 ? _ref37 : paginatorTokens.fontColor;
|
|
142
|
-
var progressBarTokens = componentTokensCopy.progressBar;
|
|
143
|
-
progressBarTokens.trackLineColor = (_ref38 = theme === null || theme === void 0 ? void 0 : (_theme$progressBar = theme.progressBar) === null || _theme$progressBar === void 0 ? void 0 : _theme$progressBar.accentColor) !== null && _ref38 !== void 0 ? _ref38 : progressBarTokens.trackLineColor;
|
|
144
|
-
progressBarTokens.totalLineColor = (_ref39 = theme === null || theme === void 0 ? void 0 : (_theme$progressBar2 = theme.progressBar) === null || _theme$progressBar2 === void 0 ? void 0 : _theme$progressBar2.baseColor) !== null && _ref39 !== void 0 ? _ref39 : progressBarTokens.totalLineColor;
|
|
145
|
-
var radioTokens = componentTokensCopy.radio;
|
|
146
|
-
radioTokens.color = (_ref40 = theme === null || theme === void 0 ? void 0 : (_theme$radio = theme.radio) === null || _theme$radio === void 0 ? void 0 : _theme$radio.baseColor) !== null && _ref40 !== void 0 ? _ref40 : radioTokens.color;
|
|
147
|
-
radioTokens.disabledColor = (_setOpacity16 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$radio2 = theme.radio) === null || _theme$radio2 === void 0 ? void 0 : _theme$radio2.baseColor, 0.34)) !== null && _setOpacity16 !== void 0 ? _setOpacity16 : radioTokens.disabledColor;
|
|
148
|
-
var selectTokens = componentTokensCopy.select;
|
|
149
|
-
selectTokens.selectedOptionBackgroundColor = (_ref41 = theme === null || theme === void 0 ? void 0 : (_theme$select = theme.select) === null || _theme$select === void 0 ? void 0 : _theme$select.baseColor) !== null && _ref41 !== void 0 ? _ref41 : selectTokens.selectedOptionBackgroundColor;
|
|
150
|
-
selectTokens.hoveredOptionBackgroundColor = (_setOpacity17 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$select2 = theme.select) === null || _theme$select2 === void 0 ? void 0 : _theme$select2.baseColor, 0.34)) !== null && _setOpacity17 !== void 0 ? _setOpacity17 : selectTokens.hoveredOptionBackgroundColor;
|
|
151
|
-
selectTokens.disabledColor = (_setOpacity18 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$select3 = theme.select) === null || _theme$select3 === void 0 ? void 0 : _theme$select3.color, 0.34)) !== null && _setOpacity18 !== void 0 ? _setOpacity18 : selectTokens.disabledColor;
|
|
152
|
-
var sideNavTokens = componentTokensCopy.sidenav;
|
|
153
|
-
sideNavTokens.backgroundColor = (_ref42 = theme === null || theme === void 0 ? void 0 : (_theme$sidenav = theme.sidenav) === null || _theme$sidenav === void 0 ? void 0 : _theme$sidenav.baseColor) !== null && _ref42 !== void 0 ? _ref42 : sideNavTokens.backgroundColor;
|
|
154
|
-
sideNavTokens.arrowContainerColor = (_setOpacity19 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$sidenav2 = theme.sidenav) === null || _theme$sidenav2 === void 0 ? void 0 : _theme$sidenav2.arrowBaseColor, 0.8)) !== null && _setOpacity19 !== void 0 ? _setOpacity19 : sideNavTokens.arrowContainerColor;
|
|
155
|
-
sideNavTokens.arrowColor = (_ref43 = theme === null || theme === void 0 ? void 0 : (_theme$sidenav3 = theme.sidenav) === null || _theme$sidenav3 === void 0 ? void 0 : _theme$sidenav3.arrowAccentColor) !== null && _ref43 !== void 0 ? _ref43 : sideNavTokens.arrowColor;
|
|
156
|
-
var sliderTokens = componentTokensCopy.slider;
|
|
157
|
-
sliderTokens.thumbBackgroundColor = (_ref44 = theme === null || theme === void 0 ? void 0 : (_theme$slider = theme.slider) === null || _theme$slider === void 0 ? void 0 : _theme$slider.baseColor) !== null && _ref44 !== void 0 ? _ref44 : sliderTokens.thumbBackgroundColor;
|
|
158
|
-
sliderTokens.dotsBackgroundColor = (_ref45 = theme === null || theme === void 0 ? void 0 : (_theme$slider2 = theme.slider) === null || _theme$slider2 === void 0 ? void 0 : _theme$slider2.baseColor) !== null && _ref45 !== void 0 ? _ref45 : sliderTokens.dotsBackgroundColor;
|
|
159
|
-
sliderTokens.trackLineColor = (_ref46 = theme === null || theme === void 0 ? void 0 : (_theme$slider3 = theme.slider) === null || _theme$slider3 === void 0 ? void 0 : _theme$slider3.baseColor) !== null && _ref46 !== void 0 ? _ref46 : sliderTokens.trackLineColor;
|
|
160
|
-
sliderTokens.totalLineColor = (_setOpacity20 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$slider4 = theme.slider) === null || _theme$slider4 === void 0 ? void 0 : _theme$slider4.baseColor, 0.34)) !== null && _setOpacity20 !== void 0 ? _setOpacity20 : sliderTokens.totalLineColor;
|
|
161
|
-
sliderTokens.disabledThumbBackgroundColor = (_setOpacity21 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$slider5 = theme.slider) === null || _theme$slider5 === void 0 ? void 0 : _theme$slider5.baseColor, 0.34)) !== null && _setOpacity21 !== void 0 ? _setOpacity21 : sliderTokens.disabledThumbBackgroundColor;
|
|
162
|
-
sliderTokens.disabledDotsBackgroundColor = (_setOpacity22 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$slider6 = theme.slider) === null || _theme$slider6 === void 0 ? void 0 : _theme$slider6.baseColor, 0.34)) !== null && _setOpacity22 !== void 0 ? _setOpacity22 : sliderTokens.disabledDotsBackgroundColor;
|
|
163
|
-
sliderTokens.disabledTrackLineColor = (_setOpacity23 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$slider7 = theme.slider) === null || _theme$slider7 === void 0 ? void 0 : _theme$slider7.baseColor, 0.34)) !== null && _setOpacity23 !== void 0 ? _setOpacity23 : sliderTokens.disabledTrackLineColor;
|
|
164
|
-
var spinnerTokens = componentTokensCopy.spinner;
|
|
165
|
-
spinnerTokens.trackCircleColor = (_ref47 = theme === null || theme === void 0 ? void 0 : (_theme$spinner = theme.spinner) === null || _theme$spinner === void 0 ? void 0 : _theme$spinner.accentColor) !== null && _ref47 !== void 0 ? _ref47 : spinnerTokens.trackCircleColor;
|
|
166
|
-
spinnerTokens.totalCircleColor = (_ref48 = theme === null || theme === void 0 ? void 0 : (_theme$spinner2 = theme.spinner) === null || _theme$spinner2 === void 0 ? void 0 : _theme$spinner2.baseColor) !== null && _ref48 !== void 0 ? _ref48 : spinnerTokens.totalCircleColor;
|
|
167
|
-
var switchTokens = componentTokensCopy["switch"];
|
|
168
|
-
switchTokens.checkedTrackBackgroundColor = (_ref49 = theme === null || theme === void 0 ? void 0 : (_theme$switch = theme["switch"]) === null || _theme$switch === void 0 ? void 0 : _theme$switch.checkedBaseColor) !== null && _ref49 !== void 0 ? _ref49 : switchTokens.checkedTrackBackgroundColor;
|
|
169
|
-
switchTokens.disabledCheckedTrackBackgroundColor = (_setOpacity24 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$switch2 = theme["switch"]) === null || _theme$switch2 === void 0 ? void 0 : _theme$switch2.checkedBaseColor, 0.34)) !== null && _setOpacity24 !== void 0 ? _setOpacity24 : switchTokens.disabledCheckedTrackBackgroundColor;
|
|
170
|
-
var tableTokens = componentTokensCopy.table;
|
|
171
|
-
tableTokens.headerBackgroundColor = (_ref50 = theme === null || theme === void 0 ? void 0 : (_theme$table = theme.table) === null || _theme$table === void 0 ? void 0 : _theme$table.baseColor) !== null && _ref50 !== void 0 ? _ref50 : tableTokens.headerBackgroundColor;
|
|
172
|
-
tableTokens.headerFontColor = (_ref51 = theme === null || theme === void 0 ? void 0 : (_theme$table2 = theme.table) === null || _theme$table2 === void 0 ? void 0 : _theme$table2.fontColor) !== null && _ref51 !== void 0 ? _ref51 : tableTokens.headerFontColor;
|
|
173
|
-
var tabsTokens = componentTokensCopy.tabs;
|
|
174
|
-
tabsTokens.selectedFontColor = (_ref52 = theme === null || theme === void 0 ? void 0 : (_theme$tabs = theme.tabs) === null || _theme$tabs === void 0 ? void 0 : _theme$tabs.baseColor) !== null && _ref52 !== void 0 ? _ref52 : tabsTokens.selectedFontColor;
|
|
175
|
-
tabsTokens.selectedIconColor = (_ref53 = theme === null || theme === void 0 ? void 0 : (_theme$tabs2 = theme.tabs) === null || _theme$tabs2 === void 0 ? void 0 : _theme$tabs2.baseColor) !== null && _ref53 !== void 0 ? _ref53 : tabsTokens.selectedIconColor;
|
|
176
|
-
tabsTokens.selectedUnderlineColor = (_ref54 = theme === null || theme === void 0 ? void 0 : (_theme$tabs3 = theme.tabs) === null || _theme$tabs3 === void 0 ? void 0 : _theme$tabs3.baseColor) !== null && _ref54 !== void 0 ? _ref54 : tabsTokens.selectedUnderlineColor;
|
|
177
|
-
tabsTokens.focusOutline = (_ref55 = theme === null || theme === void 0 ? void 0 : (_theme$tabs4 = theme.tabs) === null || _theme$tabs4 === void 0 ? void 0 : _theme$tabs4.baseColor) !== null && _ref55 !== void 0 ? _ref55 : tabsTokens.focusOutline;
|
|
178
|
-
tabsTokens.hoverBackgroundColor = (_setLightness3 = setLightness(theme === null || theme === void 0 ? void 0 : (_theme$tabs5 = theme.tabs) === null || _theme$tabs5 === void 0 ? void 0 : _theme$tabs5.baseColor, 58)) !== null && _setLightness3 !== void 0 ? _setLightness3 : tabsTokens.hoverBackgroundColor;
|
|
179
|
-
tabsTokens.pressedBackgroundColor = (_setLightness4 = setLightness(theme === null || theme === void 0 ? void 0 : (_theme$tabs6 = theme.tabs) === null || _theme$tabs6 === void 0 ? void 0 : _theme$tabs6.baseColor, 53)) !== null && _setLightness4 !== void 0 ? _setLightness4 : tabsTokens.pressedBackgroundColor;
|
|
180
|
-
var toggleGroupTokens = componentTokensCopy.toggleGroup;
|
|
181
|
-
toggleGroupTokens.unselectedBackgroundColor = (_ref56 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup = theme.toggleGroup) === null || _theme$toggleGroup === void 0 ? void 0 : _theme$toggleGroup.unselectedBaseColor) !== null && _ref56 !== void 0 ? _ref56 : toggleGroupTokens.unselectedBackgroundColor;
|
|
182
|
-
toggleGroupTokens.unselectedBackgroundHoverColor = (_ref57 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup2 = theme.toggleGroup) === null || _theme$toggleGroup2 === void 0 ? void 0 : _theme$toggleGroup2.unselectedHoverBaseColor) !== null && _ref57 !== void 0 ? _ref57 : toggleGroupTokens.unselectedBackgroundHoverColor;
|
|
183
|
-
toggleGroupTokens.unselectedFontColor = (_ref58 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup3 = theme.toggleGroup) === null || _theme$toggleGroup3 === void 0 ? void 0 : _theme$toggleGroup3.unselectedFontColor) !== null && _ref58 !== void 0 ? _ref58 : toggleGroupTokens.unselectedFontColor;
|
|
184
|
-
toggleGroupTokens.unselectedHoverFontColor = (_ref59 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup4 = theme.toggleGroup) === null || _theme$toggleGroup4 === void 0 ? void 0 : _theme$toggleGroup4.unselectedHoverFontColor) !== null && _ref59 !== void 0 ? _ref59 : toggleGroupTokens.unselectedHoverFontColor;
|
|
185
|
-
toggleGroupTokens.selectedBackgroundColor = (_ref60 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup5 = theme.toggleGroup) === null || _theme$toggleGroup5 === void 0 ? void 0 : _theme$toggleGroup5.selectedBaseColor) !== null && _ref60 !== void 0 ? _ref60 : toggleGroupTokens.selectedBackgroundColor;
|
|
186
|
-
toggleGroupTokens.selectedBackgroundHoverColor = (_ref61 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup6 = theme.toggleGroup) === null || _theme$toggleGroup6 === void 0 ? void 0 : _theme$toggleGroup6.selectedHoverBaseColor) !== null && _ref61 !== void 0 ? _ref61 : toggleGroupTokens.selectedBackgroundHoverColor;
|
|
187
|
-
toggleGroupTokens.selectedFontColor = (_ref62 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup7 = theme.toggleGroup) === null || _theme$toggleGroup7 === void 0 ? void 0 : _theme$toggleGroup7.selectedFontColor) !== null && _ref62 !== void 0 ? _ref62 : toggleGroupTokens.selectedFontColor;
|
|
188
|
-
toggleGroupTokens.selectedHoverFontColor = (_ref63 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup8 = theme.toggleGroup) === null || _theme$toggleGroup8 === void 0 ? void 0 : _theme$toggleGroup8.selectedHoverFontColor) !== null && _ref63 !== void 0 ? _ref63 : toggleGroupTokens.selectedHoverFontColor;
|
|
189
|
-
toggleGroupTokens.disabledSelectedBackgroundColor = (_setOpacity25 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup9 = theme.toggleGroup) === null || _theme$toggleGroup9 === void 0 ? void 0 : _theme$toggleGroup9.selectedBaseColor, 0.34)) !== null && _setOpacity25 !== void 0 ? _setOpacity25 : toggleGroupTokens.disabledSelectedBackgroundColor;
|
|
190
|
-
toggleGroupTokens.disabledUnselectedBackgroundColor = (_setOpacity26 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup10 = theme.toggleGroup) === null || _theme$toggleGroup10 === void 0 ? void 0 : _theme$toggleGroup10.unselectedBaseColor, 0.34)) !== null && _setOpacity26 !== void 0 ? _setOpacity26 : toggleGroupTokens.disabledUnselectedBackgroundColor;
|
|
191
|
-
toggleGroupTokens.disabledUnselectedFontColor = (_setOpacity27 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup11 = theme.toggleGroup) === null || _theme$toggleGroup11 === void 0 ? void 0 : _theme$toggleGroup11.unselectedFontColor, 0.34)) !== null && _setOpacity27 !== void 0 ? _setOpacity27 : toggleGroupTokens.disabledUnselectedFontColor;
|
|
192
|
-
toggleGroupTokens.disabledSelectedFontColor = (_setOpacity28 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup12 = theme.toggleGroup) === null || _theme$toggleGroup12 === void 0 ? void 0 : _theme$toggleGroup12.selectedFontColor, 0.34)) !== null && _setOpacity28 !== void 0 ? _setOpacity28 : toggleGroupTokens.disabledSelectedFontColor;
|
|
193
|
-
var wizardTokens = componentTokensCopy.wizard;
|
|
194
|
-
wizardTokens.stepContainerSelectedBackgroundColor = (_ref64 = theme === null || theme === void 0 ? void 0 : (_theme$wizard = theme.wizard) === null || _theme$wizard === void 0 ? void 0 : _theme$wizard.baseColor) !== null && _ref64 !== void 0 ? _ref64 : wizardTokens.stepContainerSelectedBackgroundColor;
|
|
195
|
-
wizardTokens.stepContainerSelectedFontColor = (_ref65 = theme === null || theme === void 0 ? void 0 : (_theme$wizard2 = theme.wizard) === null || _theme$wizard2 === void 0 ? void 0 : _theme$wizard2.fontColor) !== null && _ref65 !== void 0 ? _ref65 : wizardTokens.stepContainerSelectedFontColor;
|
|
196
|
-
return componentTokensCopy;
|
|
197
|
-
};
|
|
198
|
-
|
|
199
|
-
var ThemeProvider = function ThemeProvider(_ref66) {
|
|
200
|
-
var theme = _ref66.theme,
|
|
201
|
-
advancedTheme = _ref66.advancedTheme,
|
|
202
|
-
children = _ref66.children;
|
|
203
|
-
var parsedTheme = (0, _react.useMemo)(function () {
|
|
204
|
-
return theme && parseTheme(theme) || advancedTheme && parseAdvancedTheme(advancedTheme);
|
|
205
|
-
}, [theme, advancedTheme]);
|
|
206
|
-
return _react["default"].createElement(Halstack, null, _react["default"].createElement(ThemeContext.Provider, {
|
|
207
|
-
value: parsedTheme
|
|
208
|
-
}, children));
|
|
209
|
-
};
|
|
210
|
-
|
|
211
|
-
exports.ThemeProvider = ThemeProvider;
|
|
212
|
-
|
|
213
|
-
var Halstack = _styledComponents["default"].div(_templateObject());
|
|
214
|
-
|
|
215
|
-
var _default = ThemeContext;
|
|
216
|
-
exports["default"] = _default;
|
|
@@ -1,207 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
6
|
-
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
|
|
9
|
-
var _react2 = require("@storybook/react");
|
|
10
|
-
|
|
11
|
-
var _addonActions = require("@storybook/addon-actions");
|
|
12
|
-
|
|
13
|
-
var _addonKnobs = require("@storybook/addon-knobs");
|
|
14
|
-
|
|
15
|
-
var _readme = _interopRequireDefault(require("./readme.md"));
|
|
16
|
-
|
|
17
|
-
var _Accordion = _interopRequireDefault(require("./Accordion"));
|
|
18
|
-
|
|
19
|
-
var _run_icon_black = _interopRequireDefault(require("../../.storybook/public/run_icon_black.png"));
|
|
20
|
-
|
|
21
|
-
var onChange = (0, _addonActions.action)("onChange");
|
|
22
|
-
|
|
23
|
-
onChange.toString = function () {
|
|
24
|
-
return "onChangeHandler";
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
(0, _react2.storiesOf)("Form Components|Accordion", module).add("Types", function () {
|
|
28
|
-
return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", {
|
|
29
|
-
style: {
|
|
30
|
-
marginBottom: "50px"
|
|
31
|
-
}
|
|
32
|
-
}, _react["default"].createElement(_Accordion["default"], {
|
|
33
|
-
label: "First accordion",
|
|
34
|
-
onChange: onChange
|
|
35
|
-
}, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
|
|
36
|
-
theme: "light",
|
|
37
|
-
disabled: true,
|
|
38
|
-
label: "Second accordion",
|
|
39
|
-
onChange: onChange
|
|
40
|
-
}, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
|
|
41
|
-
label: "Third accordion",
|
|
42
|
-
onChange: onChange,
|
|
43
|
-
assistiveText: "Extra information"
|
|
44
|
-
}, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
|
|
45
|
-
theme: "light",
|
|
46
|
-
label: "Fourth accordion",
|
|
47
|
-
assistiveText: "Extra information",
|
|
48
|
-
iconPosition: "before",
|
|
49
|
-
iconSrc: _run_icon_black["default"],
|
|
50
|
-
onChange: onChange
|
|
51
|
-
}, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
|
|
52
|
-
theme: "light",
|
|
53
|
-
label: "Fifth accordion",
|
|
54
|
-
assistiveText: "Extra information",
|
|
55
|
-
iconPosition: "after",
|
|
56
|
-
iconSrc: _run_icon_black["default"],
|
|
57
|
-
onChange: onChange
|
|
58
|
-
}, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("div", {
|
|
59
|
-
style: {
|
|
60
|
-
marginBottom: "50px"
|
|
61
|
-
}
|
|
62
|
-
}, _react["default"].createElement(_Accordion["default"], {
|
|
63
|
-
theme: "light",
|
|
64
|
-
mode: "alternative",
|
|
65
|
-
label: "First accordion",
|
|
66
|
-
onChange: onChange
|
|
67
|
-
}, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
|
|
68
|
-
theme: "light",
|
|
69
|
-
mode: "alternative",
|
|
70
|
-
disabled: true,
|
|
71
|
-
label: "Second accordion",
|
|
72
|
-
onChange: onChange
|
|
73
|
-
}, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
|
|
74
|
-
theme: "light",
|
|
75
|
-
mode: "alternative",
|
|
76
|
-
label: "Third accordion",
|
|
77
|
-
assistiveText: "Extra information",
|
|
78
|
-
onChange: onChange
|
|
79
|
-
}, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
|
|
80
|
-
theme: "light",
|
|
81
|
-
mode: "alternative",
|
|
82
|
-
label: "Fourth accordion",
|
|
83
|
-
assistiveText: "Extra information",
|
|
84
|
-
iconPosition: "before",
|
|
85
|
-
iconSrc: _run_icon_black["default"],
|
|
86
|
-
onChange: onChange
|
|
87
|
-
}, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
|
|
88
|
-
theme: "light",
|
|
89
|
-
mode: "alternative",
|
|
90
|
-
label: "Fifth accordion",
|
|
91
|
-
assistiveText: "Extra information",
|
|
92
|
-
iconPosition: "after",
|
|
93
|
-
iconSrc: _run_icon_black["default"],
|
|
94
|
-
onChange: onChange
|
|
95
|
-
}, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", null, _react["default"].createElement("div", {
|
|
96
|
-
style: {
|
|
97
|
-
background: "black",
|
|
98
|
-
paddingTop: "50px",
|
|
99
|
-
paddingBottom: "50px"
|
|
100
|
-
}
|
|
101
|
-
}, _react["default"].createElement(_Accordion["default"], {
|
|
102
|
-
label: "First accordion",
|
|
103
|
-
onChange: onChange
|
|
104
|
-
}, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
|
|
105
|
-
theme: "dark",
|
|
106
|
-
disabled: true,
|
|
107
|
-
label: "Second accordion",
|
|
108
|
-
onChange: onChange
|
|
109
|
-
}, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
|
|
110
|
-
theme: "dark",
|
|
111
|
-
label: "Third accordion",
|
|
112
|
-
onChange: onChange,
|
|
113
|
-
assistiveText: "Extra information"
|
|
114
|
-
}, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
|
|
115
|
-
theme: "dark",
|
|
116
|
-
label: "Fourth accordion",
|
|
117
|
-
assistiveText: "Extra information",
|
|
118
|
-
iconPosition: "before",
|
|
119
|
-
iconSrc: _run_icon_black["default"],
|
|
120
|
-
onChange: onChange
|
|
121
|
-
}, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
|
|
122
|
-
theme: "dark",
|
|
123
|
-
label: "Fifth accordion",
|
|
124
|
-
assistiveText: "Extra information",
|
|
125
|
-
iconPosition: "after",
|
|
126
|
-
iconSrc: _run_icon_black["default"],
|
|
127
|
-
onChange: onChange
|
|
128
|
-
}, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("div", {
|
|
129
|
-
style: {
|
|
130
|
-
background: "black",
|
|
131
|
-
paddingBottom: "50px"
|
|
132
|
-
}
|
|
133
|
-
}, _react["default"].createElement(_Accordion["default"], {
|
|
134
|
-
theme: "dark",
|
|
135
|
-
mode: "alternative",
|
|
136
|
-
label: "First accordion",
|
|
137
|
-
onChange: onChange
|
|
138
|
-
}, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
|
|
139
|
-
theme: "dark",
|
|
140
|
-
mode: "alternative",
|
|
141
|
-
disabled: true,
|
|
142
|
-
label: "Second accordion",
|
|
143
|
-
onChange: onChange
|
|
144
|
-
}, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
|
|
145
|
-
theme: "dark",
|
|
146
|
-
mode: "alternative",
|
|
147
|
-
label: "Third accordion",
|
|
148
|
-
assistiveText: "Extra information",
|
|
149
|
-
onChange: onChange
|
|
150
|
-
}, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
|
|
151
|
-
theme: "dark",
|
|
152
|
-
mode: "alternative",
|
|
153
|
-
label: "Fourth accordion",
|
|
154
|
-
assistiveText: "Extra information",
|
|
155
|
-
iconPosition: "before",
|
|
156
|
-
iconSrc: _run_icon_black["default"],
|
|
157
|
-
onChange: onChange
|
|
158
|
-
}, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), _react["default"].createElement(_Accordion["default"], {
|
|
159
|
-
theme: "dark",
|
|
160
|
-
mode: "alternative",
|
|
161
|
-
label: "Fifth accordion",
|
|
162
|
-
assistiveText: "Extra information",
|
|
163
|
-
iconPosition: "after",
|
|
164
|
-
iconSrc: _run_icon_black["default"],
|
|
165
|
-
onChange: onChange
|
|
166
|
-
}, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))));
|
|
167
|
-
}, {
|
|
168
|
-
notes: {
|
|
169
|
-
markdown: _readme["default"]
|
|
170
|
-
}
|
|
171
|
-
});
|
|
172
|
-
|
|
173
|
-
var knobProps = function knobProps() {
|
|
174
|
-
return {
|
|
175
|
-
mode: (0, _addonKnobs.select)("mode", {
|
|
176
|
-
"default": "default",
|
|
177
|
-
alternative: "alternative"
|
|
178
|
-
}, "default"),
|
|
179
|
-
label: (0, _addonKnobs.text)("label", "Test Accordion"),
|
|
180
|
-
assistiveText: (0, _addonKnobs.text)("assistive text", "Extra information"),
|
|
181
|
-
theme: (0, _addonKnobs.select)("theme", {
|
|
182
|
-
light: "light",
|
|
183
|
-
dark: "dark"
|
|
184
|
-
}, "light"),
|
|
185
|
-
disabled: (0, _addonKnobs["boolean"])("disabled", false),
|
|
186
|
-
iconPosition: (0, _addonKnobs.select)("icon position", {
|
|
187
|
-
before: "before",
|
|
188
|
-
after: "after"
|
|
189
|
-
}, "before")
|
|
190
|
-
};
|
|
191
|
-
};
|
|
192
|
-
|
|
193
|
-
(0, _react2.storiesOf)("Form Components|Accordion", module).add("Knobs example", function () {
|
|
194
|
-
var props = knobProps();
|
|
195
|
-
return _react["default"].createElement("div", {
|
|
196
|
-
style: {
|
|
197
|
-
background: props.theme === "dark" && "black" || "transparent"
|
|
198
|
-
}
|
|
199
|
-
}, _react["default"].createElement(_Accordion["default"], (0, _extends2["default"])({}, props, {
|
|
200
|
-
onChange: onChange,
|
|
201
|
-
iconSrc: _run_icon_black["default"]
|
|
202
|
-
}), _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")));
|
|
203
|
-
}, {
|
|
204
|
-
notes: {
|
|
205
|
-
markdown: _readme["default"]
|
|
206
|
-
}
|
|
207
|
-
});
|
package/dist/accordion/readme.md
DELETED
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
# DXC Accordion Component
|
|
2
|
-
|
|
3
|
-
## Usage
|
|
4
|
-
|
|
5
|
-
```js
|
|
6
|
-
import { DxcAccordion } from "@dxc-technology/halstack-react";
|
|
7
|
-
|
|
8
|
-
<DxcAccordion onChange={handleOnChange} label="Test Accordion" />;
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Props
|
|
12
|
-
|
|
13
|
-
<table>
|
|
14
|
-
<tr style="background-color: grey">
|
|
15
|
-
<td>Name</td>
|
|
16
|
-
<td>Default</td>
|
|
17
|
-
<td>Description</td>
|
|
18
|
-
</tr>
|
|
19
|
-
<tr>
|
|
20
|
-
<td>mode: 'default'|'alternative'</td>
|
|
21
|
-
<td><code>'default'</code></td>
|
|
22
|
-
<td>Mode for the color of the accordion.</td>
|
|
23
|
-
</tr>
|
|
24
|
-
<tr>
|
|
25
|
-
<td>label: string</td>
|
|
26
|
-
<td></td>
|
|
27
|
-
<td>The panel label.</td>
|
|
28
|
-
</tr>
|
|
29
|
-
<tr>
|
|
30
|
-
<td>iconSrc: string</td>
|
|
31
|
-
<td></td>
|
|
32
|
-
<td>URL of the icon that will be placed next to panel label.</td>
|
|
33
|
-
</tr>
|
|
34
|
-
<tr>
|
|
35
|
-
<td>iconPosition: 'before' | 'after'</td>
|
|
36
|
-
<td><code>'before'</code></td>
|
|
37
|
-
<td>Whether the icon should appear after or before the label.</td>
|
|
38
|
-
</tr>
|
|
39
|
-
<tr>
|
|
40
|
-
<td>assistiveText: string</td>
|
|
41
|
-
<td></td>
|
|
42
|
-
<td>Assistive text to be placed on the right side of the panel.</td>
|
|
43
|
-
</tr>
|
|
44
|
-
<tr>
|
|
45
|
-
<td>disabled: boolean</td>
|
|
46
|
-
<td><code>false</code></td>
|
|
47
|
-
<td>If true, the component will be disabled.</td>
|
|
48
|
-
</tr>
|
|
49
|
-
<tr>
|
|
50
|
-
<td>onChange: function</td>
|
|
51
|
-
<td></td>
|
|
52
|
-
<td>This function will be called when the user clicks the icon to open/close the panel. The state of the panel(opened/closed) should be passed as a parameter.</td>
|
|
53
|
-
</tr>
|
|
54
|
-
<tr>
|
|
55
|
-
<td>theme: 'light' |'dark'</td>
|
|
56
|
-
<td><code>'light'</code></td>
|
|
57
|
-
<td>Uses one of the available button modes.</td>
|
|
58
|
-
</tr>
|
|
59
|
-
|
|
60
|
-
</table>
|
|
61
|
-
|
|
62
|
-
## Examples
|
|
63
|
-
|
|
64
|
-
- Basic accordion - Light theme - Enabled - With assistive text - Icon after label
|
|
65
|
-
|
|
66
|
-
```js
|
|
67
|
-
import React from "react";
|
|
68
|
-
|
|
69
|
-
import { DxcAccordion } from "@dxc-technology/halstack-react";
|
|
70
|
-
|
|
71
|
-
function App() {
|
|
72
|
-
const handleOnChange = event => {
|
|
73
|
-
console.log("Accordion clicked");
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
return (
|
|
77
|
-
<div>
|
|
78
|
-
<Accordion
|
|
79
|
-
theme="light"
|
|
80
|
-
label="Fifth accordion"
|
|
81
|
-
assistiveText="Extra information"
|
|
82
|
-
iconPosition="after"
|
|
83
|
-
iconSrc={logo}
|
|
84
|
-
onChange={onChange}
|
|
85
|
-
>
|
|
86
|
-
<div>
|
|
87
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
|
|
88
|
-
lobortis eget.
|
|
89
|
-
</div>
|
|
90
|
-
</Accordion>
|
|
91
|
-
</div>
|
|
92
|
-
);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
export default App;
|
|
96
|
-
```
|