@dxc-technology/halstack-react 0.0.0-dcd93c4 → 0.0.0-dd6acd7
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/README.md +46 -0
- package/dist/index.d.mts +6518 -0
- package/dist/index.d.ts +6518 -0
- package/dist/index.js +13484 -0
- package/dist/index.mjs +13427 -0
- package/package.json +69 -72
- package/BackgroundColorContext.d.ts +0 -10
- package/BackgroundColorContext.js +0 -47
- package/HalstackContext.d.ts +0 -12
- package/HalstackContext.js +0 -295
- package/accordion/Accordion.d.ts +0 -4
- package/accordion/Accordion.js +0 -226
- package/accordion/Accordion.stories.tsx +0 -307
- package/accordion/Accordion.test.js +0 -72
- package/accordion/types.d.ts +0 -68
- package/accordion/types.js +0 -5
- package/accordion-group/AccordionGroup.d.ts +0 -7
- package/accordion-group/AccordionGroup.js +0 -169
- package/accordion-group/AccordionGroup.stories.tsx +0 -225
- package/accordion-group/AccordionGroup.test.js +0 -151
- package/accordion-group/types.d.ts +0 -72
- package/accordion-group/types.js +0 -5
- package/alert/Alert.d.ts +0 -4
- package/alert/Alert.js +0 -293
- package/alert/Alert.stories.tsx +0 -170
- package/alert/Alert.test.js +0 -92
- package/alert/types.d.ts +0 -49
- package/alert/types.js +0 -5
- package/badge/Badge.d.ts +0 -4
- package/badge/Badge.js +0 -61
- package/badge/types.d.ts +0 -5
- package/badge/types.js +0 -5
- package/bleed/Bleed.d.ts +0 -3
- package/bleed/Bleed.js +0 -51
- package/bleed/Bleed.stories.tsx +0 -341
- package/bleed/types.d.ts +0 -37
- package/bleed/types.js +0 -5
- package/box/Box.d.ts +0 -4
- package/box/Box.js +0 -116
- package/box/Box.stories.tsx +0 -132
- package/box/Box.test.js +0 -18
- package/box/types.d.ts +0 -43
- package/box/types.js +0 -5
- package/button/Button.d.ts +0 -4
- package/button/Button.js +0 -174
- package/button/Button.stories.tsx +0 -274
- package/button/Button.test.js +0 -35
- package/button/types.d.ts +0 -53
- package/button/types.js +0 -5
- package/card/Card.d.ts +0 -4
- package/card/Card.js +0 -161
- package/card/Card.stories.tsx +0 -201
- package/card/Card.test.js +0 -50
- package/card/ice-cream.jpg +0 -0
- package/card/types.d.ts +0 -67
- package/card/types.js +0 -5
- package/checkbox/Checkbox.d.ts +0 -4
- package/checkbox/Checkbox.js +0 -257
- package/checkbox/Checkbox.stories.tsx +0 -188
- package/checkbox/Checkbox.test.js +0 -78
- package/checkbox/types.d.ts +0 -64
- package/checkbox/types.js +0 -5
- package/chip/Chip.d.ts +0 -4
- package/chip/Chip.js +0 -161
- package/chip/Chip.stories.tsx +0 -119
- package/chip/Chip.test.js +0 -56
- package/chip/types.d.ts +0 -45
- package/chip/types.js +0 -5
- package/common/OpenSans.css +0 -81
- package/common/RequiredComponent.js +0 -32
- package/common/fonts/OpenSans-Bold.ttf +0 -0
- package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
- package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
- package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
- package/common/fonts/OpenSans-Italic.ttf +0 -0
- package/common/fonts/OpenSans-Light.ttf +0 -0
- package/common/fonts/OpenSans-LightItalic.ttf +0 -0
- package/common/fonts/OpenSans-Regular.ttf +0 -0
- package/common/fonts/OpenSans-SemiBold.ttf +0 -0
- package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
- package/common/utils.js +0 -22
- package/common/variables.js +0 -1470
- package/date-input/DateInput.d.ts +0 -4
- package/date-input/DateInput.js +0 -372
- package/date-input/DateInput.stories.tsx +0 -138
- package/date-input/DateInput.test.js +0 -479
- package/date-input/types.d.ts +0 -107
- package/date-input/types.js +0 -5
- package/dialog/Dialog.d.ts +0 -4
- package/dialog/Dialog.js +0 -138
- package/dialog/Dialog.stories.tsx +0 -212
- package/dialog/Dialog.test.js +0 -40
- package/dialog/types.d.ts +0 -43
- package/dialog/types.js +0 -5
- package/dropdown/Dropdown.d.ts +0 -4
- package/dropdown/Dropdown.js +0 -391
- package/dropdown/Dropdown.stories.tsx +0 -249
- package/dropdown/Dropdown.test.js +0 -189
- package/dropdown/types.d.ts +0 -80
- package/dropdown/types.js +0 -5
- package/file-input/FileInput.d.ts +0 -4
- package/file-input/FileInput.js +0 -593
- package/file-input/FileInput.stories.tsx +0 -507
- package/file-input/FileInput.test.js +0 -457
- package/file-input/FileItem.d.ts +0 -14
- package/file-input/FileItem.js +0 -186
- package/file-input/types.d.ts +0 -112
- package/file-input/types.js +0 -5
- package/footer/Footer.d.ts +0 -4
- package/footer/Footer.js +0 -185
- package/footer/Footer.stories.tsx +0 -130
- package/footer/Footer.test.js +0 -109
- package/footer/Icons.d.ts +0 -2
- package/footer/Icons.js +0 -77
- package/footer/types.d.ts +0 -65
- package/footer/types.js +0 -5
- package/header/Header.d.ts +0 -7
- package/header/Header.js +0 -303
- package/header/Header.stories.tsx +0 -172
- package/header/Header.test.js +0 -79
- package/header/Icons.d.ts +0 -2
- package/header/Icons.js +0 -34
- package/header/types.d.ts +0 -47
- package/header/types.js +0 -5
- package/heading/Heading.d.ts +0 -4
- package/heading/Heading.js +0 -159
- package/heading/Heading.stories.tsx +0 -54
- package/heading/Heading.test.js +0 -186
- package/heading/types.d.ts +0 -33
- package/heading/types.js +0 -5
- package/inline/Inline.d.ts +0 -4
- package/inline/Inline.js +0 -60
- package/inline/Inline.stories.tsx +0 -319
- package/inline/types.d.ts +0 -36
- package/inline/types.js +0 -5
- package/inset/Inset.d.ts +0 -3
- package/inset/Inset.js +0 -51
- package/inset/Inset.stories.tsx +0 -229
- package/inset/types.d.ts +0 -37
- package/inset/types.js +0 -5
- package/layout/ApplicationLayout.d.ts +0 -11
- package/layout/ApplicationLayout.js +0 -199
- package/layout/ApplicationLayout.stories.tsx +0 -126
- package/layout/Icons.d.ts +0 -5
- package/layout/Icons.js +0 -66
- package/layout/SidenavContext.d.ts +0 -5
- package/layout/SidenavContext.js +0 -19
- package/layout/types.d.ts +0 -52
- package/layout/types.js +0 -5
- package/link/Link.d.ts +0 -4
- package/link/Link.js +0 -136
- package/link/Link.stories.tsx +0 -186
- package/link/Link.test.js +0 -83
- package/link/types.d.ts +0 -54
- package/link/types.js +0 -5
- package/list/List.d.ts +0 -4
- package/list/List.js +0 -47
- package/list/List.stories.tsx +0 -89
- package/list/types.d.ts +0 -7
- package/list/types.js +0 -5
- package/main.d.ts +0 -48
- package/main.js +0 -401
- package/number-input/NumberInput.d.ts +0 -4
- package/number-input/NumberInput.js +0 -76
- package/number-input/NumberInput.stories.tsx +0 -115
- package/number-input/NumberInput.test.js +0 -506
- package/number-input/NumberInputContext.d.ts +0 -4
- package/number-input/NumberInputContext.js +0 -19
- package/number-input/numberInputContextTypes.d.ts +0 -19
- package/number-input/numberInputContextTypes.js +0 -5
- package/number-input/types.d.ts +0 -124
- package/number-input/types.js +0 -5
- package/paginator/Icons.js +0 -66
- package/paginator/Paginator.d.ts +0 -4
- package/paginator/Paginator.js +0 -171
- package/paginator/Paginator.stories.tsx +0 -63
- package/paginator/Paginator.test.js +0 -308
- package/paginator/types.d.ts +0 -38
- package/paginator/types.js +0 -5
- package/password-input/PasswordInput.d.ts +0 -4
- package/password-input/PasswordInput.js +0 -166
- package/password-input/PasswordInput.stories.tsx +0 -131
- package/password-input/PasswordInput.test.js +0 -180
- package/password-input/types.d.ts +0 -110
- package/password-input/types.js +0 -5
- package/progress-bar/ProgressBar.d.ts +0 -4
- package/progress-bar/ProgressBar.js +0 -170
- package/progress-bar/ProgressBar.stories.jsx +0 -58
- package/progress-bar/ProgressBar.test.js +0 -65
- package/progress-bar/types.d.ts +0 -37
- package/progress-bar/types.js +0 -5
- package/quick-nav/QuickNav.d.ts +0 -4
- package/quick-nav/QuickNav.js +0 -116
- package/quick-nav/QuickNav.stories.tsx +0 -237
- package/quick-nav/types.d.ts +0 -21
- package/quick-nav/types.js +0 -5
- package/radio-group/Radio.d.ts +0 -4
- package/radio-group/Radio.js +0 -141
- package/radio-group/RadioGroup.d.ts +0 -4
- package/radio-group/RadioGroup.js +0 -283
- package/radio-group/RadioGroup.stories.tsx +0 -100
- package/radio-group/RadioGroup.test.js +0 -695
- package/radio-group/types.d.ts +0 -114
- package/radio-group/types.js +0 -5
- package/resultsetTable/ResultsetTable.d.ts +0 -4
- package/resultsetTable/ResultsetTable.js +0 -254
- package/resultsetTable/ResultsetTable.stories.tsx +0 -275
- package/resultsetTable/ResultsetTable.test.js +0 -348
- package/resultsetTable/types.d.ts +0 -67
- package/resultsetTable/types.js +0 -5
- package/row/Row.d.ts +0 -3
- package/row/Row.js +0 -127
- package/row/Row.stories.tsx +0 -237
- package/row/types.d.ts +0 -28
- package/row/types.js +0 -5
- package/select/Icons.d.ts +0 -10
- package/select/Icons.js +0 -93
- package/select/Listbox.d.ts +0 -4
- package/select/Listbox.js +0 -175
- package/select/Option.d.ts +0 -4
- package/select/Option.js +0 -110
- package/select/Select.d.ts +0 -4
- package/select/Select.js +0 -660
- package/select/Select.stories.tsx +0 -626
- package/select/Select.test.js +0 -2162
- package/select/types.d.ts +0 -212
- package/select/types.js +0 -5
- package/sidenav/Sidenav.d.ts +0 -9
- package/sidenav/Sidenav.js +0 -147
- package/sidenav/Sidenav.stories.tsx +0 -182
- package/sidenav/Sidenav.test.js +0 -56
- package/sidenav/types.d.ts +0 -50
- package/sidenav/types.js +0 -5
- package/slider/Slider.d.ts +0 -4
- package/slider/Slider.js +0 -318
- package/slider/Slider.stories.tsx +0 -177
- package/slider/Slider.test.js +0 -150
- package/slider/types.d.ts +0 -82
- package/slider/types.js +0 -5
- package/spinner/Spinner.d.ts +0 -4
- package/spinner/Spinner.js +0 -250
- package/spinner/Spinner.stories.jsx +0 -103
- package/spinner/Spinner.test.js +0 -64
- package/spinner/types.d.ts +0 -32
- package/spinner/types.js +0 -5
- package/stack/Stack.d.ts +0 -4
- package/stack/Stack.js +0 -56
- package/stack/Stack.stories.tsx +0 -263
- package/stack/types.d.ts +0 -32
- package/stack/types.js +0 -5
- package/switch/Switch.d.ts +0 -4
- package/switch/Switch.js +0 -195
- package/switch/Switch.stories.tsx +0 -160
- package/switch/Switch.test.js +0 -98
- package/switch/types.d.ts +0 -62
- package/switch/types.js +0 -5
- package/table/Table.d.ts +0 -4
- package/table/Table.js +0 -118
- package/table/Table.stories.jsx +0 -277
- package/table/Table.test.js +0 -26
- package/table/types.d.ts +0 -21
- package/table/types.js +0 -5
- package/tabs/Tabs.d.ts +0 -4
- package/tabs/Tabs.js +0 -211
- package/tabs/Tabs.stories.tsx +0 -112
- package/tabs/Tabs.test.js +0 -140
- package/tabs/types.d.ts +0 -82
- package/tabs/types.js +0 -5
- package/tabs-nav/NavTabs.d.ts +0 -8
- package/tabs-nav/NavTabs.js +0 -125
- package/tabs-nav/NavTabs.stories.tsx +0 -170
- package/tabs-nav/NavTabs.test.js +0 -82
- package/tabs-nav/Tab.d.ts +0 -4
- package/tabs-nav/Tab.js +0 -132
- package/tabs-nav/types.d.ts +0 -53
- package/tabs-nav/types.js +0 -5
- package/tag/Tag.d.ts +0 -4
- package/tag/Tag.js +0 -183
- package/tag/Tag.stories.tsx +0 -142
- package/tag/Tag.test.js +0 -60
- package/tag/types.d.ts +0 -69
- package/tag/types.js +0 -5
- package/text/Text.d.ts +0 -7
- package/text/Text.js +0 -30
- package/text/Text.stories.tsx +0 -19
- package/text-input/Suggestion.d.ts +0 -4
- package/text-input/Suggestion.js +0 -55
- package/text-input/TextInput.d.ts +0 -4
- package/text-input/TextInput.js +0 -770
- package/text-input/TextInput.stories.tsx +0 -474
- package/text-input/TextInput.test.js +0 -1712
- package/text-input/types.d.ts +0 -178
- package/text-input/types.js +0 -5
- package/textarea/Textarea.d.ts +0 -4
- package/textarea/Textarea.js +0 -277
- package/textarea/Textarea.stories.jsx +0 -157
- package/textarea/Textarea.test.js +0 -437
- package/textarea/types.d.ts +0 -137
- package/textarea/types.js +0 -5
- package/toggle-group/ToggleGroup.d.ts +0 -4
- package/toggle-group/ToggleGroup.js +0 -215
- package/toggle-group/ToggleGroup.stories.tsx +0 -173
- package/toggle-group/ToggleGroup.test.js +0 -156
- package/toggle-group/types.d.ts +0 -105
- package/toggle-group/types.js +0 -5
- package/useTheme.d.ts +0 -2
- package/useTheme.js +0 -22
- package/useTranslatedLabels.d.ts +0 -2
- package/useTranslatedLabels.js +0 -20
- package/wizard/Wizard.d.ts +0 -4
- package/wizard/Wizard.js +0 -292
- package/wizard/Wizard.stories.tsx +0 -214
- package/wizard/Wizard.test.js +0 -141
- package/wizard/types.d.ts +0 -64
- package/wizard/types.js +0 -5
|
@@ -1,170 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
var _typeof3 = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
|
-
Object.defineProperty(exports, "__esModule", {
|
|
8
|
-
value: true
|
|
9
|
-
});
|
|
10
|
-
exports["default"] = void 0;
|
|
11
|
-
|
|
12
|
-
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
13
|
-
|
|
14
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
15
|
-
|
|
16
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
-
|
|
18
|
-
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
19
|
-
|
|
20
|
-
var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearProgress"));
|
|
21
|
-
|
|
22
|
-
var _variables = require("../common/variables.js");
|
|
23
|
-
|
|
24
|
-
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
25
|
-
|
|
26
|
-
var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
|
|
27
|
-
|
|
28
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
29
|
-
|
|
30
|
-
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); }
|
|
31
|
-
|
|
32
|
-
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; }
|
|
33
|
-
|
|
34
|
-
var DxcProgressBar = function DxcProgressBar(_ref) {
|
|
35
|
-
var _ref$label = _ref.label,
|
|
36
|
-
label = _ref$label === void 0 ? "" : _ref$label,
|
|
37
|
-
_ref$helperText = _ref.helperText,
|
|
38
|
-
helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
|
|
39
|
-
_ref$overlay = _ref.overlay,
|
|
40
|
-
overlay = _ref$overlay === void 0 ? false : _ref$overlay,
|
|
41
|
-
value = _ref.value,
|
|
42
|
-
_ref$showValue = _ref.showValue,
|
|
43
|
-
showValue = _ref$showValue === void 0 ? false : _ref$showValue,
|
|
44
|
-
margin = _ref.margin;
|
|
45
|
-
var colorsTheme = (0, _useTheme["default"])();
|
|
46
|
-
var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
|
|
47
|
-
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
48
|
-
theme: colorsTheme.progressBar
|
|
49
|
-
}, /*#__PURE__*/_react["default"].createElement(BackgroundProgressBar, {
|
|
50
|
-
overlay: overlay
|
|
51
|
-
}, /*#__PURE__*/_react["default"].createElement(DXCProgressBar, {
|
|
52
|
-
overlay: overlay,
|
|
53
|
-
margin: margin,
|
|
54
|
-
backgroundType: backgroundType
|
|
55
|
-
}, /*#__PURE__*/_react["default"].createElement(InfoProgressBar, null, /*#__PURE__*/_react["default"].createElement(ProgressBarLabel, {
|
|
56
|
-
overlay: overlay,
|
|
57
|
-
backgroundType: backgroundType
|
|
58
|
-
}, label), /*#__PURE__*/_react["default"].createElement(ProgressBarProgress, {
|
|
59
|
-
overlay: overlay,
|
|
60
|
-
showValue: showValue,
|
|
61
|
-
backgroundType: backgroundType
|
|
62
|
-
}, value === null || value === undefined ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100, " %")), /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], {
|
|
63
|
-
variant: showValue ? "determinate" : "indeterminate",
|
|
64
|
-
value: value === null || value === undefined ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100
|
|
65
|
-
}), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
|
|
66
|
-
overlay: overlay,
|
|
67
|
-
backgroundType: backgroundType
|
|
68
|
-
}, helperText))));
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
var BackgroundProgressBar = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n opacity: ", ";\n width: ", ";\n display: flex;\n flex-wrap: wrap;\n justify-content: ", ";\n height: ", ";\n align-items: ", ";\n min-width: 100px;\n max-width: ", ";\n position: ", ";\n top: ", ";\n bottom: ", ";\n left: ", ";\n right: ", ";\n z-index: ", ";\n width: 100%;\n"])), function (props) {
|
|
72
|
-
return props.overlay === true ? "".concat(props.theme.overlayColor) : "transparent";
|
|
73
|
-
}, function (props) {
|
|
74
|
-
return props.overlay === true && "0.8";
|
|
75
|
-
}, function (props) {
|
|
76
|
-
return props.overlay === true ? "100%" : "";
|
|
77
|
-
}, function (props) {
|
|
78
|
-
return props.overlay === true ? "center" : "";
|
|
79
|
-
}, function (props) {
|
|
80
|
-
return props.overlay === true ? "100vh" : "";
|
|
81
|
-
}, function (props) {
|
|
82
|
-
return props.overlay === true ? "center" : "";
|
|
83
|
-
}, function (props) {
|
|
84
|
-
return props.overlay === true ? "100%" : "";
|
|
85
|
-
}, function (props) {
|
|
86
|
-
return props.overlay === true ? "fixed" : "";
|
|
87
|
-
}, function (props) {
|
|
88
|
-
return props.overlay === true ? "0" : "";
|
|
89
|
-
}, function (props) {
|
|
90
|
-
return props.overlay === true ? "0" : "";
|
|
91
|
-
}, function (props) {
|
|
92
|
-
return props.overlay === true ? "0" : "";
|
|
93
|
-
}, function (props) {
|
|
94
|
-
return props.overlay === true ? "0" : "";
|
|
95
|
-
}, function (props) {
|
|
96
|
-
return props.overlay ? 1300 : "";
|
|
97
|
-
});
|
|
98
|
-
|
|
99
|
-
var DXCProgressBar = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n z-index: ", ";\n width: ", ";\n .MuiLinearProgress-root {\n height: ", ";\n background-color: ", ";\n border-radius: ", ";\n margin-bottom: ", ";\n }\n .MuiLinearProgress-bar {\n background-color: ", ";\n }\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
|
|
100
|
-
return props.overlay === true && "100" || "0";
|
|
101
|
-
}, function (props) {
|
|
102
|
-
return props.overlay === true ? "80%" : "100%";
|
|
103
|
-
}, function (props) {
|
|
104
|
-
return props.theme.thickness;
|
|
105
|
-
}, function (props) {
|
|
106
|
-
return props.theme.totalLineColor;
|
|
107
|
-
}, function (props) {
|
|
108
|
-
return props.theme.borderRadius;
|
|
109
|
-
}, function (props) {
|
|
110
|
-
return props.helperText !== "" && "8px";
|
|
111
|
-
}, function (props) {
|
|
112
|
-
return props.backgroundType === "dark" ? props.theme.trackLineColorOnDark : props.theme.trackLineColor;
|
|
113
|
-
}, function (props) {
|
|
114
|
-
return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
|
|
115
|
-
}, function (props) {
|
|
116
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
|
|
117
|
-
}, function (props) {
|
|
118
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
|
|
119
|
-
}, function (props) {
|
|
120
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
|
|
121
|
-
}, function (props) {
|
|
122
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
|
|
123
|
-
});
|
|
124
|
-
|
|
125
|
-
var InfoProgressBar = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n width: 685px;\n flex-wrap: wrap;\n width: 100%;\n margin-bottom: 8px;\n align-items: baseline;\n justify-content: space-between;\n"])));
|
|
126
|
-
|
|
127
|
-
var ProgressBarLabel = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n font-weight: ", ";\n text-transform: ", ";\n color: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-overflow: ellipsis;\n"])), function (props) {
|
|
128
|
-
return props.theme.labelFontFamily;
|
|
129
|
-
}, function (props) {
|
|
130
|
-
return props.theme.labelFontStyle;
|
|
131
|
-
}, function (props) {
|
|
132
|
-
return props.theme.labelFontSize;
|
|
133
|
-
}, function (props) {
|
|
134
|
-
return props.theme.labelFontWeight;
|
|
135
|
-
}, function (props) {
|
|
136
|
-
return props.theme.labelFontTextTransform;
|
|
137
|
-
}, function (props) {
|
|
138
|
-
return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.overlay === true ? "#FFFFFF" : props.theme.labelFontColor;
|
|
139
|
-
});
|
|
140
|
-
|
|
141
|
-
var ProgressBarProgress = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n font-weight: ", ";\n text-transform: ", ";\n color: ", ";\n display: ", ";\n flex-shrink: 0;\n"])), function (props) {
|
|
142
|
-
return props.theme.valueFontFamily;
|
|
143
|
-
}, function (props) {
|
|
144
|
-
return props.theme.valueFontStyle;
|
|
145
|
-
}, function (props) {
|
|
146
|
-
return props.theme.valueFontSize;
|
|
147
|
-
}, function (props) {
|
|
148
|
-
return props.theme.valueFontWeight;
|
|
149
|
-
}, function (props) {
|
|
150
|
-
return props.theme.valueFontTextTransform;
|
|
151
|
-
}, function (props) {
|
|
152
|
-
return props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.overlay === true ? "#FFFFFF" : props.theme.valueFontColor;
|
|
153
|
-
}, function (props) {
|
|
154
|
-
return props.value !== "" && props.showValue === true && "block" || "none";
|
|
155
|
-
});
|
|
156
|
-
|
|
157
|
-
var HelperText = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: 1.5em;\n"])), function (props) {
|
|
158
|
-
return props.backgroundType === "dark" ? props.theme.helperTextFontColorOnDark : props.overlay === true ? "#FFFFFF" : props.theme.helperTextFontColor;
|
|
159
|
-
}, function (props) {
|
|
160
|
-
return props.theme.helperTextFontFamily;
|
|
161
|
-
}, function (props) {
|
|
162
|
-
return props.theme.helperTextFontSize;
|
|
163
|
-
}, function (props) {
|
|
164
|
-
return props.theme.helperTextFontStyle;
|
|
165
|
-
}, function (props) {
|
|
166
|
-
return props.theme.helperTextFontWeight;
|
|
167
|
-
});
|
|
168
|
-
|
|
169
|
-
var _default = DxcProgressBar;
|
|
170
|
-
exports["default"] = _default;
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import DxcProgressBar from "./ProgressBar";
|
|
3
|
-
import Title from "../../.storybook/components/Title";
|
|
4
|
-
import ExampleContainer from "../../.storybook/components/ExampleContainer";
|
|
5
|
-
|
|
6
|
-
export default {
|
|
7
|
-
title: "ProgressBar",
|
|
8
|
-
component: DxcProgressBar,
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
export const Chromatic = () => (
|
|
12
|
-
<>
|
|
13
|
-
<ExampleContainer>
|
|
14
|
-
<Title title="Without labels" theme="light" level={4} />
|
|
15
|
-
<DxcProgressBar value={50} showValue />
|
|
16
|
-
<Title title="With helperText" theme="light" level={4} />
|
|
17
|
-
<DxcProgressBar helperText="Helper text" value={50} showValue />
|
|
18
|
-
<Title title="Without default value" theme="light" level={4} />
|
|
19
|
-
<DxcProgressBar label="Loading..." showValue />
|
|
20
|
-
</ExampleContainer>
|
|
21
|
-
<Title title="Margins" theme="light" level={2} />
|
|
22
|
-
<ExampleContainer>
|
|
23
|
-
<Title title="Xxsmall margin" theme="light" level={4} />
|
|
24
|
-
<DxcProgressBar label="Margin xxsmall" margin="xxsmall" value={50} showValue />
|
|
25
|
-
</ExampleContainer>
|
|
26
|
-
<ExampleContainer>
|
|
27
|
-
<Title title="Xsmall margin" theme="light" level={4} />
|
|
28
|
-
<DxcProgressBar label="Margin xsmall" margin="xsmall" value={50} showValue />
|
|
29
|
-
</ExampleContainer>
|
|
30
|
-
<ExampleContainer>
|
|
31
|
-
<Title title="Small margin" theme="light" level={4} />
|
|
32
|
-
<DxcProgressBar label="Margin small" margin="small" value={50} showValue />
|
|
33
|
-
</ExampleContainer>
|
|
34
|
-
<ExampleContainer>
|
|
35
|
-
<Title title="Medium margin" theme="light" level={4} />
|
|
36
|
-
<DxcProgressBar label="Margin medium" margin="medium" value={50} showValue />
|
|
37
|
-
</ExampleContainer>
|
|
38
|
-
<ExampleContainer>
|
|
39
|
-
<Title title="Large margin" theme="light" level={4} />
|
|
40
|
-
<DxcProgressBar label="Margin large" margin="large" value={50} showValue />
|
|
41
|
-
</ExampleContainer>
|
|
42
|
-
<ExampleContainer>
|
|
43
|
-
<Title title="Xlarge margin" theme="light" level={4} />
|
|
44
|
-
<DxcProgressBar label="Margin xlarge" margin="xlarge" value={50} showValue />
|
|
45
|
-
</ExampleContainer>
|
|
46
|
-
<ExampleContainer>
|
|
47
|
-
<Title title="XxLarge margin" theme="light" level={4} />
|
|
48
|
-
<DxcProgressBar label="Margin xxlarge" margin="xxlarge" value={50} showValue />
|
|
49
|
-
</ExampleContainer>
|
|
50
|
-
</>
|
|
51
|
-
);
|
|
52
|
-
|
|
53
|
-
export const ProgressBarOverlay = () => (
|
|
54
|
-
<ExampleContainer>
|
|
55
|
-
<Title title="Overlay" theme="dark" level={4} />
|
|
56
|
-
<DxcProgressBar label="Overlay" helperText="Helper text" overlay={true} showValue value={50} />
|
|
57
|
-
</ExampleContainer>
|
|
58
|
-
);
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
var _react = _interopRequireDefault(require("react"));
|
|
6
|
-
|
|
7
|
-
var _react2 = require("@testing-library/react");
|
|
8
|
-
|
|
9
|
-
var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
|
|
10
|
-
|
|
11
|
-
describe("ProgressBar component tests", function () {
|
|
12
|
-
test("ProgressBar renders with label", function () {
|
|
13
|
-
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
|
|
14
|
-
label: "test-label"
|
|
15
|
-
})),
|
|
16
|
-
getByText = _render.getByText;
|
|
17
|
-
|
|
18
|
-
expect(getByText("test-label")).toBeTruthy();
|
|
19
|
-
});
|
|
20
|
-
test("Overlay progressBar renders with label", function () {
|
|
21
|
-
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
|
|
22
|
-
label: "test-label",
|
|
23
|
-
overlay: true
|
|
24
|
-
})),
|
|
25
|
-
getByText = _render2.getByText;
|
|
26
|
-
|
|
27
|
-
expect(getByText("test-label")).toBeTruthy();
|
|
28
|
-
});
|
|
29
|
-
test("ProgressBar renders with default value", function () {
|
|
30
|
-
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
|
|
31
|
-
showValue: true
|
|
32
|
-
})),
|
|
33
|
-
getByText = _render3.getByText;
|
|
34
|
-
|
|
35
|
-
expect(getByText("0 %")).toBeTruthy();
|
|
36
|
-
});
|
|
37
|
-
test("Overlay progressBar renders with default value", function () {
|
|
38
|
-
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
|
|
39
|
-
showValue: true,
|
|
40
|
-
overlay: true
|
|
41
|
-
})),
|
|
42
|
-
getByText = _render4.getByText;
|
|
43
|
-
|
|
44
|
-
expect(getByText("0 %")).toBeTruthy();
|
|
45
|
-
});
|
|
46
|
-
test("ProgressBar renders with value", function () {
|
|
47
|
-
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
|
|
48
|
-
showValue: true,
|
|
49
|
-
value: 25
|
|
50
|
-
})),
|
|
51
|
-
getByText = _render5.getByText;
|
|
52
|
-
|
|
53
|
-
expect(getByText("25 %")).toBeTruthy();
|
|
54
|
-
});
|
|
55
|
-
test("Overlay progressBar renders with value", function () {
|
|
56
|
-
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
|
|
57
|
-
showValue: true,
|
|
58
|
-
value: 25,
|
|
59
|
-
overlay: true
|
|
60
|
-
})),
|
|
61
|
-
getByText = _render6.getByText;
|
|
62
|
-
|
|
63
|
-
expect(getByText("25 %")).toBeTruthy();
|
|
64
|
-
});
|
|
65
|
-
});
|
package/progress-bar/types.d.ts
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2
|
-
declare type Size = {
|
|
3
|
-
top?: Space;
|
|
4
|
-
bottom?: Space;
|
|
5
|
-
left?: Space;
|
|
6
|
-
right?: Space;
|
|
7
|
-
};
|
|
8
|
-
declare type Props = {
|
|
9
|
-
/**
|
|
10
|
-
* Text to be placed above the progress bar.
|
|
11
|
-
*/
|
|
12
|
-
label?: string;
|
|
13
|
-
/**
|
|
14
|
-
* Helper text to be placed under the progress bar.
|
|
15
|
-
*/
|
|
16
|
-
helperText?: string;
|
|
17
|
-
/**
|
|
18
|
-
* If true, the progress bar will be displayed as a modal.
|
|
19
|
-
*/
|
|
20
|
-
overlay?: boolean;
|
|
21
|
-
/**
|
|
22
|
-
* The value of the progress indicator. If it's received the component is
|
|
23
|
-
* determinate otherwise is indeterminate.
|
|
24
|
-
*/
|
|
25
|
-
value?: number;
|
|
26
|
-
/**
|
|
27
|
-
* If true, the value is displayed above the progress bar.
|
|
28
|
-
*/
|
|
29
|
-
showValue?: boolean;
|
|
30
|
-
/**
|
|
31
|
-
* Size of the margin to be applied to the component. You can pass
|
|
32
|
-
* an object with 'top', 'bottom', 'left' and 'right' properties
|
|
33
|
-
* in order to specify different margin sizes.
|
|
34
|
-
*/
|
|
35
|
-
margin?: Space | Size;
|
|
36
|
-
};
|
|
37
|
-
export default Props;
|
package/progress-bar/types.js
DELETED
package/quick-nav/QuickNav.d.ts
DELETED
package/quick-nav/QuickNav.js
DELETED
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
|
-
Object.defineProperty(exports, "__esModule", {
|
|
8
|
-
value: true
|
|
9
|
-
});
|
|
10
|
-
exports["default"] = void 0;
|
|
11
|
-
|
|
12
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
|
-
|
|
14
|
-
var _react = _interopRequireDefault(require("react"));
|
|
15
|
-
|
|
16
|
-
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
17
|
-
|
|
18
|
-
var _slugify = _interopRequireDefault(require("slugify"));
|
|
19
|
-
|
|
20
|
-
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
21
|
-
|
|
22
|
-
var _Heading = _interopRequireDefault(require("../heading/Heading"));
|
|
23
|
-
|
|
24
|
-
var _Stack = _interopRequireDefault(require("../stack/Stack"));
|
|
25
|
-
|
|
26
|
-
var _Inset = _interopRequireDefault(require("../inset/Inset"));
|
|
27
|
-
|
|
28
|
-
var _Text = _interopRequireDefault(require("../text/Text"));
|
|
29
|
-
|
|
30
|
-
var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
|
|
31
|
-
|
|
32
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
33
|
-
|
|
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); }
|
|
35
|
-
|
|
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; }
|
|
37
|
-
|
|
38
|
-
var DxcQuickNav = function DxcQuickNav(_ref) {
|
|
39
|
-
var title = _ref.title,
|
|
40
|
-
links = _ref.links;
|
|
41
|
-
var translatedLabels = (0, _useTranslatedLabels["default"])();
|
|
42
|
-
var colorsTheme = (0, _useTheme["default"])();
|
|
43
|
-
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
44
|
-
theme: colorsTheme.quickNav
|
|
45
|
-
}, /*#__PURE__*/_react["default"].createElement(QuickNavContainer, null, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
|
|
46
|
-
gutter: "0.5rem"
|
|
47
|
-
}, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
|
|
48
|
-
level: 4,
|
|
49
|
-
text: title || translatedLabels.quickNav.contentTitle
|
|
50
|
-
}), /*#__PURE__*/_react["default"].createElement(ListColumn, null, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
|
|
51
|
-
gutter: "0.5rem"
|
|
52
|
-
}, links.map(function (link) {
|
|
53
|
-
var _link$links;
|
|
54
|
-
|
|
55
|
-
return /*#__PURE__*/_react["default"].createElement(ListRow, {
|
|
56
|
-
key: link.label
|
|
57
|
-
}, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
|
|
58
|
-
space: "0.25rem"
|
|
59
|
-
}, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, /*#__PURE__*/_react["default"].createElement(Link, {
|
|
60
|
-
href: "#".concat((0, _slugify["default"])(link === null || link === void 0 ? void 0 : link.label, {
|
|
61
|
-
lower: true
|
|
62
|
-
}))
|
|
63
|
-
}, link === null || link === void 0 ? void 0 : link.label), /*#__PURE__*/_react["default"].createElement(ListColumn, null, (_link$links = link.links) === null || _link$links === void 0 ? void 0 : _link$links.map(function (sublink) {
|
|
64
|
-
return /*#__PURE__*/_react["default"].createElement(ListRow, {
|
|
65
|
-
key: sublink.label
|
|
66
|
-
}, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
|
|
67
|
-
horizontal: "0.5rem"
|
|
68
|
-
}, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, /*#__PURE__*/_react["default"].createElement(Link, {
|
|
69
|
-
href: "#".concat((0, _slugify["default"])(sublink === null || sublink === void 0 ? void 0 : sublink.label, {
|
|
70
|
-
lower: true
|
|
71
|
-
}))
|
|
72
|
-
}, sublink === null || sublink === void 0 ? void 0 : sublink.label))));
|
|
73
|
-
})))));
|
|
74
|
-
}))))));
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
var QuickNavContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n border-left: 2px solid ", ";\n"])), function (props) {
|
|
78
|
-
return props.theme.paddingTop;
|
|
79
|
-
}, function (props) {
|
|
80
|
-
return props.theme.paddingBottom;
|
|
81
|
-
}, function (props) {
|
|
82
|
-
return props.theme.paddingLeft;
|
|
83
|
-
}, function (props) {
|
|
84
|
-
return props.theme.paddingRight;
|
|
85
|
-
}, function (props) {
|
|
86
|
-
return props.theme.dividerBorderColor;
|
|
87
|
-
});
|
|
88
|
-
|
|
89
|
-
var ListColumn = _styledComponents["default"].ul(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n"])));
|
|
90
|
-
|
|
91
|
-
var ListRow = _styledComponents["default"].li(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])([""])));
|
|
92
|
-
|
|
93
|
-
var Link = _styledComponents["default"].a(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n text-decoration: none;\n font-size: ", ";\n font-family: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n &:focus {\n outline-color: ", ";\n outline-style: ", ";\n outline-width: ", ";\n border-radius: ", ";\n }\n"])), function (props) {
|
|
94
|
-
return props.theme.fontSize;
|
|
95
|
-
}, function (props) {
|
|
96
|
-
return props.theme.fontFamily;
|
|
97
|
-
}, function (props) {
|
|
98
|
-
return props.theme.fontStyle;
|
|
99
|
-
}, function (props) {
|
|
100
|
-
return props.theme.fontWeight;
|
|
101
|
-
}, function (props) {
|
|
102
|
-
return props.theme.fontColor;
|
|
103
|
-
}, function (props) {
|
|
104
|
-
return props.theme.hoverFontColor;
|
|
105
|
-
}, function (props) {
|
|
106
|
-
return props.theme.focusBorderColor;
|
|
107
|
-
}, function (props) {
|
|
108
|
-
return props.theme.focusBorderStyle;
|
|
109
|
-
}, function (props) {
|
|
110
|
-
return props.theme.focusBorderThickness;
|
|
111
|
-
}, function (props) {
|
|
112
|
-
return props.theme.focusBorderRadius;
|
|
113
|
-
});
|
|
114
|
-
|
|
115
|
-
var _default = DxcQuickNav;
|
|
116
|
-
exports["default"] = _default;
|