@dxc-technology/halstack-react 0.0.0-feed711 → 0.0.0-ff13db1
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 +6670 -0
- package/dist/index.d.ts +6670 -0
- package/dist/index.js +14451 -0
- package/dist/index.mjs +14394 -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/bulleted-list/BulletedList.d.ts +0 -7
- package/bulleted-list/BulletedList.js +0 -123
- package/bulleted-list/BulletedList.stories.tsx +0 -200
- package/bulleted-list/types.d.ts +0 -11
- package/bulleted-list/types.js +0 -5
- package/button/Button.d.ts +0 -4
- package/button/Button.js +0 -156
- package/button/Button.stories.tsx +0 -283
- 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 -1504
- 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 -162
- package/dialog/Dialog.stories.tsx +0 -211
- package/dialog/Dialog.test.js +0 -70
- 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 -387
- package/dropdown/Dropdown.stories.tsx +0 -312
- package/dropdown/Dropdown.test.js +0 -591
- package/dropdown/DropdownMenu.d.ts +0 -4
- package/dropdown/DropdownMenu.js +0 -80
- package/dropdown/DropdownMenuItem.d.ts +0 -4
- package/dropdown/DropdownMenuItem.js +0 -92
- package/dropdown/types.d.ts +0 -100
- 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/flex/Flex.d.ts +0 -4
- package/flex/Flex.js +0 -57
- package/flex/Flex.stories.tsx +0 -103
- package/flex/types.d.ts +0 -21
- package/flex/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 -305
- 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/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 -20
- package/layout/ApplicationLayout.js +0 -171
- package/layout/ApplicationLayout.stories.tsx +0 -161
- 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 -42
- 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 -193
- package/link/Link.test.js +0 -83
- package/link/types.d.ts +0 -54
- package/link/types.js +0 -5
- package/main.d.ts +0 -44
- package/main.js +0 -369
- 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/paragraph/Paragraph.d.ts +0 -6
- package/paragraph/Paragraph.js +0 -38
- package/paragraph/Paragraph.stories.tsx +0 -44
- 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 -176
- package/progress-bar/ProgressBar.stories.jsx +0 -60
- package/progress-bar/ProgressBar.test.js +0 -110
- package/progress-bar/types.d.ts +0 -36
- package/progress-bar/types.js +0 -5
- package/quick-nav/QuickNav.d.ts +0 -4
- package/quick-nav/QuickNav.js +0 -118
- package/quick-nav/QuickNav.stories.tsx +0 -264
- 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 -281
- 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/select/Icons.d.ts +0 -10
- package/select/Icons.js +0 -93
- package/select/Listbox.d.ts +0 -4
- package/select/Listbox.js +0 -199
- 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 -643
- package/select/Select.stories.tsx +0 -627
- package/select/Select.test.js +0 -2175
- package/select/types.d.ts +0 -210
- package/select/types.js +0 -5
- package/sidenav/Sidenav.d.ts +0 -10
- package/sidenav/Sidenav.js +0 -268
- package/sidenav/Sidenav.stories.tsx +0 -180
- package/sidenav/Sidenav.test.js +0 -44
- package/sidenav/types.d.ts +0 -73
- 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 -187
- 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/switch/Switch.d.ts +0 -4
- package/switch/Switch.js +0 -251
- package/switch/Switch.stories.tsx +0 -138
- package/switch/Switch.test.js +0 -212
- package/switch/types.d.ts +0 -61
- 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 -130
- 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-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 -761
- package/text-input/TextInput.stories.tsx +0 -473
- 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/typography/Typography.d.ts +0 -4
- package/typography/Typography.js +0 -131
- package/typography/Typography.stories.tsx +0 -198
- package/typography/types.d.ts +0 -18
- package/typography/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 -285
- package/wizard/Wizard.stories.tsx +0 -233
- package/wizard/Wizard.test.js +0 -141
- package/wizard/types.d.ts +0 -65
- package/wizard/types.js +0 -5
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2
|
-
declare type Margin = {
|
|
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 password.
|
|
11
|
-
*/
|
|
12
|
-
label?: string;
|
|
13
|
-
/**
|
|
14
|
-
* Name attribute of the input element.
|
|
15
|
-
*/
|
|
16
|
-
name?: string;
|
|
17
|
-
/**
|
|
18
|
-
* Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
|
|
19
|
-
*/
|
|
20
|
-
value?: string;
|
|
21
|
-
/**
|
|
22
|
-
* Helper text to be placed above the password.
|
|
23
|
-
*/
|
|
24
|
-
helperText?: string;
|
|
25
|
-
/**
|
|
26
|
-
* If true, the password input will have an action to clear the entered value.
|
|
27
|
-
*/
|
|
28
|
-
clearable?: boolean;
|
|
29
|
-
/**
|
|
30
|
-
* This function will be called when the user types within the input
|
|
31
|
-
* element of the component. An object including the current value and
|
|
32
|
-
* the error (if the value entered is not valid) will be passed to this
|
|
33
|
-
* function. If there is no error, error will not be defined.
|
|
34
|
-
* */
|
|
35
|
-
onChange?: (val: {
|
|
36
|
-
value: string;
|
|
37
|
-
error?: string;
|
|
38
|
-
}) => void;
|
|
39
|
-
/**
|
|
40
|
-
* This function will be called when the input element loses the focus.
|
|
41
|
-
* An object including the input value and the error (if the value entered is
|
|
42
|
-
* not valid) will be passed to this function. If there is no error, error will not be defined.
|
|
43
|
-
*/
|
|
44
|
-
onBlur?: (val: {
|
|
45
|
-
value: string;
|
|
46
|
-
error?: string;
|
|
47
|
-
}) => void;
|
|
48
|
-
/**
|
|
49
|
-
* If it is a defined value and also a truthy string, the component will
|
|
50
|
-
* change its appearance, showing the error below the password input
|
|
51
|
-
* component. If the defined value is an empty string, it will reserve a
|
|
52
|
-
* space below the component for a future error, but it would not change
|
|
53
|
-
* its look. In case of being undefined or null, both the appearance and
|
|
54
|
-
* the space for the error message would not be modified.
|
|
55
|
-
*/
|
|
56
|
-
error?: string;
|
|
57
|
-
/**
|
|
58
|
-
* Regular expression that defines the valid format allowed by the
|
|
59
|
-
* password input. This will be checked both when the input element loses the
|
|
60
|
-
* focus and while typing within it. If the string entered does not match
|
|
61
|
-
* the pattern, the onBlur and onChange functions will be called with the
|
|
62
|
-
* current value and an internal error informing that this value does not
|
|
63
|
-
* match the pattern. If the pattern is met, the error parameter of both
|
|
64
|
-
* events will not be defined.
|
|
65
|
-
*/
|
|
66
|
-
pattern?: string;
|
|
67
|
-
/**
|
|
68
|
-
* Specifies the minimun length allowed by the password input.
|
|
69
|
-
* This will be checked both when the input element loses the
|
|
70
|
-
* focus and while typing within it. If the string entered does not
|
|
71
|
-
* comply the minimum length, the onBlur and onChange functions will be called
|
|
72
|
-
* with the current value and an internal error informing that the value
|
|
73
|
-
* length does not comply the specified range. If a valid length is
|
|
74
|
-
* reached, the error parameter of both events will not be defined.
|
|
75
|
-
*/
|
|
76
|
-
minLength?: number;
|
|
77
|
-
/**
|
|
78
|
-
* Specifies the maximum length allowed by the password input.
|
|
79
|
-
* This will be checked both when the input element loses the
|
|
80
|
-
* focus and while typing within it. If the string entered does not
|
|
81
|
-
* comply the maximum length, the onBlur and onChange functions will be called
|
|
82
|
-
* with the current value and an internal error informing that the value
|
|
83
|
-
* length does not comply the specified range. If a valid length is
|
|
84
|
-
* reached, the error parameter of both events will not be defined.
|
|
85
|
-
*/
|
|
86
|
-
maxLength?: number;
|
|
87
|
-
/**
|
|
88
|
-
* HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the input value.
|
|
89
|
-
* Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
|
|
90
|
-
*/
|
|
91
|
-
autocomplete?: string;
|
|
92
|
-
/**
|
|
93
|
-
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
94
|
-
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
95
|
-
*/
|
|
96
|
-
margin?: Space | Margin;
|
|
97
|
-
/**
|
|
98
|
-
* Size of the component.
|
|
99
|
-
*/
|
|
100
|
-
size?: "small" | "medium" | "large" | "fillParent";
|
|
101
|
-
/**
|
|
102
|
-
* Value of the tabindex attribute.
|
|
103
|
-
*/
|
|
104
|
-
tabIndex?: number;
|
|
105
|
-
};
|
|
106
|
-
/**
|
|
107
|
-
* Reference to the component.
|
|
108
|
-
*/
|
|
109
|
-
export declare type RefType = HTMLDivElement;
|
|
110
|
-
export default Props;
|
package/password-input/types.js
DELETED
|
@@ -1,176 +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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
17
|
-
|
|
18
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
-
|
|
20
|
-
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
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, _templateObject7, _templateObject8;
|
|
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
|
-
|
|
48
|
-
var _useState = (0, _react.useState)(0),
|
|
49
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
50
|
-
valueProgressBar = _useState2[0],
|
|
51
|
-
setValueProgressBar = _useState2[1];
|
|
52
|
-
|
|
53
|
-
(0, _react.useEffect)(function () {
|
|
54
|
-
setValueProgressBar(value === null || value === undefined || value < 0 ? 0 : value >= 0 && value <= 100 ? value : 100);
|
|
55
|
-
}, [value]);
|
|
56
|
-
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
57
|
-
theme: colorsTheme.progressBar
|
|
58
|
-
}, /*#__PURE__*/_react["default"].createElement(BackgroundProgressBar, {
|
|
59
|
-
overlay: overlay
|
|
60
|
-
}, /*#__PURE__*/_react["default"].createElement(ProgressBarContainer, {
|
|
61
|
-
overlay: overlay,
|
|
62
|
-
margin: margin
|
|
63
|
-
}, /*#__PURE__*/_react["default"].createElement(InfoProgressBar, null, /*#__PURE__*/_react["default"].createElement(ProgressBarLabel, {
|
|
64
|
-
overlay: overlay,
|
|
65
|
-
backgroundType: backgroundType,
|
|
66
|
-
"aria-label": label || undefined
|
|
67
|
-
}, label), /*#__PURE__*/_react["default"].createElement(ProgressBarProgress, {
|
|
68
|
-
overlay: overlay,
|
|
69
|
-
showValue: showValue,
|
|
70
|
-
backgroundType: backgroundType,
|
|
71
|
-
value: valueProgressBar
|
|
72
|
-
}, valueProgressBar, " %")), /*#__PURE__*/_react["default"].createElement(LinearProgress, {
|
|
73
|
-
role: "progressbar",
|
|
74
|
-
helperText: helperText,
|
|
75
|
-
"aria-valuenow": showValue ? valueProgressBar : undefined
|
|
76
|
-
}, /*#__PURE__*/_react["default"].createElement(LinearProgressBar, {
|
|
77
|
-
backgroundType: backgroundType,
|
|
78
|
-
variant: value === null || value === undefined ? "indeterminate" : "determinate",
|
|
79
|
-
container: "first",
|
|
80
|
-
value: valueProgressBar
|
|
81
|
-
})), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
|
|
82
|
-
overlay: overlay,
|
|
83
|
-
backgroundType: backgroundType
|
|
84
|
-
}, helperText))));
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
var BackgroundProgressBar = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n display: flex;\n flex-wrap: wrap;\n min-width: 100px;\n width: 100%;\n"])), function (_ref2) {
|
|
88
|
-
var overlay = _ref2.overlay,
|
|
89
|
-
theme = _ref2.theme;
|
|
90
|
-
return overlay ? "background-color: ".concat(theme.overlayColor, ";\n opacity: 0.8;\n width: 100%;\n justify-content: center;\n height: 100vh;\n align-items: center;\n max-width: 100%;\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1300;") : "background-color: \"transparent\";";
|
|
91
|
-
});
|
|
92
|
-
|
|
93
|
-
var ProgressBarContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n z-index: ", ";\n width: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
|
|
94
|
-
return props.overlay === true && "100" || "0";
|
|
95
|
-
}, function (props) {
|
|
96
|
-
return props.overlay === true ? "80%" : "100%";
|
|
97
|
-
}, function (props) {
|
|
98
|
-
return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
|
|
99
|
-
}, function (props) {
|
|
100
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
|
|
101
|
-
}, function (props) {
|
|
102
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
|
|
103
|
-
}, function (props) {
|
|
104
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
|
|
105
|
-
}, function (props) {
|
|
106
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
|
|
107
|
-
});
|
|
108
|
-
|
|
109
|
-
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"])));
|
|
110
|
-
|
|
111
|
-
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) {
|
|
112
|
-
return props.theme.labelFontFamily;
|
|
113
|
-
}, function (props) {
|
|
114
|
-
return props.theme.labelFontStyle;
|
|
115
|
-
}, function (props) {
|
|
116
|
-
return props.theme.labelFontSize;
|
|
117
|
-
}, function (props) {
|
|
118
|
-
return props.theme.labelFontWeight;
|
|
119
|
-
}, function (props) {
|
|
120
|
-
return props.theme.labelFontTextTransform;
|
|
121
|
-
}, function (props) {
|
|
122
|
-
return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.overlay === true ? "#FFFFFF" : props.theme.labelFontColor;
|
|
123
|
-
});
|
|
124
|
-
|
|
125
|
-
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) {
|
|
126
|
-
return props.theme.valueFontFamily;
|
|
127
|
-
}, function (props) {
|
|
128
|
-
return props.theme.valueFontStyle;
|
|
129
|
-
}, function (props) {
|
|
130
|
-
return props.theme.valueFontSize;
|
|
131
|
-
}, function (props) {
|
|
132
|
-
return props.theme.valueFontWeight;
|
|
133
|
-
}, function (props) {
|
|
134
|
-
return props.theme.valueFontTextTransform;
|
|
135
|
-
}, function (props) {
|
|
136
|
-
return props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.overlay === true ? "#FFFFFF" : props.theme.valueFontColor;
|
|
137
|
-
}, function (props) {
|
|
138
|
-
return props.value !== undefined && props.value !== null && props.showValue === true && "block" || "none";
|
|
139
|
-
});
|
|
140
|
-
|
|
141
|
-
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) {
|
|
142
|
-
return props.backgroundType === "dark" ? props.theme.helperTextFontColorOnDark : props.overlay === true ? "#FFFFFF" : props.theme.helperTextFontColor;
|
|
143
|
-
}, function (props) {
|
|
144
|
-
return props.theme.helperTextFontFamily;
|
|
145
|
-
}, function (props) {
|
|
146
|
-
return props.theme.helperTextFontSize;
|
|
147
|
-
}, function (props) {
|
|
148
|
-
return props.theme.helperTextFontStyle;
|
|
149
|
-
}, function (props) {
|
|
150
|
-
return props.theme.helperTextFontWeight;
|
|
151
|
-
});
|
|
152
|
-
|
|
153
|
-
var LinearProgress = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n background-color: ", ";\n border-radius: ", ";\n margin-bottom: ", ";\n overflow: hidden;\n position: relative;\n"])), function (props) {
|
|
154
|
-
return props.theme.thickness;
|
|
155
|
-
}, function (props) {
|
|
156
|
-
return props.theme.totalLineColor;
|
|
157
|
-
}, function (props) {
|
|
158
|
-
return props.theme.borderRadius;
|
|
159
|
-
}, function (props) {
|
|
160
|
-
return props.helperText !== "" && "8px";
|
|
161
|
-
});
|
|
162
|
-
|
|
163
|
-
var LinearProgressBar = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n transform: ", ";\n top: 0;\n left: 0;\n width: 100%;\n bottom: 0;\n position: absolute;\n transition: ", ";\n transform-origin: left;\n ", ";\n ", ";\n\n @keyframes keyframes-indeterminate-first {\n 0% {\n left: -35%;\n right: 100%;\n }\n 60% {\n left: 100%;\n right: -90%;\n }\n 100% {\n left: 100%;\n right: -90%;\n }\n }\n\n @keyframes keyframes-indeterminate-second {\n 0% {\n left: -200%;\n right: 100%;\n }\n 60% {\n left: 107%;\n right: -8%;\n }\n 100% {\n left: 107%;\n right: -8%;\n }\n }\n"])), function (props) {
|
|
164
|
-
return props.backgroundType === "dark" ? props.theme.trackLineColorOnDark : props.theme.trackLineColor;
|
|
165
|
-
}, function (props) {
|
|
166
|
-
return "translateX(-".concat(props.variant === "determinate" ? 100 - props.value : 0, "%)");
|
|
167
|
-
}, function (props) {
|
|
168
|
-
return props.variant === "determinate" ? "transform .4s linear" : "transform 0.2s linear";
|
|
169
|
-
}, function (props) {
|
|
170
|
-
return props.variant === "indeterminate" && "width: auto;";
|
|
171
|
-
}, function (props) {
|
|
172
|
-
return props.variant === "indeterminate" ? props.container === "first" ? "animation: keyframes-indeterminate-first 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;" : "animation: keyframes-indeterminate-second 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;" : "";
|
|
173
|
-
});
|
|
174
|
-
|
|
175
|
-
var _default = DxcProgressBar;
|
|
176
|
-
exports["default"] = _default;
|
|
@@ -1,60 +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={24} showValue />
|
|
18
|
-
<Title title="Without default value" theme="light" level={4} />
|
|
19
|
-
<DxcProgressBar label="Loading..." showValue />
|
|
20
|
-
<Title title="With full value" theme="light" level={4} />
|
|
21
|
-
<DxcProgressBar label="Loading..." value={100} showValue />
|
|
22
|
-
</ExampleContainer>
|
|
23
|
-
<Title title="Margins" theme="light" level={2} />
|
|
24
|
-
<ExampleContainer>
|
|
25
|
-
<Title title="Xxsmall margin" theme="light" level={4} />
|
|
26
|
-
<DxcProgressBar label="Margin xxsmall" margin="xxsmall" value={50} showValue />
|
|
27
|
-
</ExampleContainer>
|
|
28
|
-
<ExampleContainer>
|
|
29
|
-
<Title title="Xsmall margin" theme="light" level={4} />
|
|
30
|
-
<DxcProgressBar label="Margin xsmall" margin="xsmall" value={50} showValue />
|
|
31
|
-
</ExampleContainer>
|
|
32
|
-
<ExampleContainer>
|
|
33
|
-
<Title title="Small margin" theme="light" level={4} />
|
|
34
|
-
<DxcProgressBar label="Margin small" margin="small" value={50} showValue />
|
|
35
|
-
</ExampleContainer>
|
|
36
|
-
<ExampleContainer>
|
|
37
|
-
<Title title="Medium margin" theme="light" level={4} />
|
|
38
|
-
<DxcProgressBar label="Margin medium" margin="medium" value={50} showValue />
|
|
39
|
-
</ExampleContainer>
|
|
40
|
-
<ExampleContainer>
|
|
41
|
-
<Title title="Large margin" theme="light" level={4} />
|
|
42
|
-
<DxcProgressBar label="Margin large" margin="large" value={50} showValue />
|
|
43
|
-
</ExampleContainer>
|
|
44
|
-
<ExampleContainer>
|
|
45
|
-
<Title title="Xlarge margin" theme="light" level={4} />
|
|
46
|
-
<DxcProgressBar label="Margin xlarge" margin="xlarge" value={50} showValue />
|
|
47
|
-
</ExampleContainer>
|
|
48
|
-
<ExampleContainer>
|
|
49
|
-
<Title title="XxLarge margin" theme="light" level={4} />
|
|
50
|
-
<DxcProgressBar label="Margin xxlarge" margin="xxlarge" value={50} showValue />
|
|
51
|
-
</ExampleContainer>
|
|
52
|
-
</>
|
|
53
|
-
);
|
|
54
|
-
|
|
55
|
-
export const ProgressBarOverlay = () => (
|
|
56
|
-
<ExampleContainer>
|
|
57
|
-
<Title title="Overlay" theme="dark" level={4} />
|
|
58
|
-
<DxcProgressBar label="Overlay" helperText="Helper text" overlay={true} showValue value={50} />
|
|
59
|
-
</ExampleContainer>
|
|
60
|
-
);
|
|
@@ -1,110 +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 and helperText", function () {
|
|
13
|
-
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
|
|
14
|
-
label: "test-label",
|
|
15
|
-
helperText: "helper-text"
|
|
16
|
-
})),
|
|
17
|
-
getByText = _render.getByText;
|
|
18
|
-
|
|
19
|
-
expect(getByText("test-label")).toBeTruthy();
|
|
20
|
-
expect(getByText("helper-text")).toBeTruthy();
|
|
21
|
-
});
|
|
22
|
-
test("ProgressBar renders with default value", function () {
|
|
23
|
-
var value = 0;
|
|
24
|
-
|
|
25
|
-
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
|
|
26
|
-
showValue: true
|
|
27
|
-
})),
|
|
28
|
-
getByText = _render2.getByText,
|
|
29
|
-
getByRole = _render2.getByRole;
|
|
30
|
-
|
|
31
|
-
var progressBar = getByRole("progressbar");
|
|
32
|
-
expect(getByText("0 %")).toBeTruthy();
|
|
33
|
-
expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
|
|
34
|
-
});
|
|
35
|
-
test("ProgressBar renders with value", function () {
|
|
36
|
-
var value = 25;
|
|
37
|
-
|
|
38
|
-
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
|
|
39
|
-
showValue: true,
|
|
40
|
-
value: value
|
|
41
|
-
})),
|
|
42
|
-
getByText = _render3.getByText,
|
|
43
|
-
getByRole = _render3.getByRole;
|
|
44
|
-
|
|
45
|
-
var progressBar = getByRole("progressbar");
|
|
46
|
-
expect(getByText("25 %")).toBeTruthy();
|
|
47
|
-
expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
|
|
48
|
-
});
|
|
49
|
-
test("ProgressBar renders with negative value", function () {
|
|
50
|
-
var value = 0;
|
|
51
|
-
|
|
52
|
-
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
|
|
53
|
-
showValue: true,
|
|
54
|
-
value: -20
|
|
55
|
-
})),
|
|
56
|
-
getByText = _render4.getByText,
|
|
57
|
-
getByRole = _render4.getByRole;
|
|
58
|
-
|
|
59
|
-
var progressBar = getByRole("progressbar");
|
|
60
|
-
expect(getByText("0 %")).toBeTruthy();
|
|
61
|
-
expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
|
|
62
|
-
});
|
|
63
|
-
test("ProgressBar renders as indeterminate", function () {
|
|
64
|
-
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], null)),
|
|
65
|
-
getByRole = _render5.getByRole;
|
|
66
|
-
|
|
67
|
-
var progressBar = getByRole("progressbar");
|
|
68
|
-
expect(progressBar.getAttribute("aria-valuenow")).toBe(null);
|
|
69
|
-
});
|
|
70
|
-
test("Overlay progressBar renders with label and helperText", function () {
|
|
71
|
-
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
|
|
72
|
-
label: "test-label",
|
|
73
|
-
helperText: "helper-text",
|
|
74
|
-
overlay: true
|
|
75
|
-
})),
|
|
76
|
-
getByText = _render6.getByText;
|
|
77
|
-
|
|
78
|
-
expect(getByText("test-label")).toBeTruthy();
|
|
79
|
-
expect(getByText("helper-text")).toBeTruthy();
|
|
80
|
-
});
|
|
81
|
-
test("Overlay progressBar renders with default value", function () {
|
|
82
|
-
var value = 0;
|
|
83
|
-
|
|
84
|
-
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
|
|
85
|
-
showValue: true,
|
|
86
|
-
overlay: true
|
|
87
|
-
})),
|
|
88
|
-
getByText = _render7.getByText,
|
|
89
|
-
getByRole = _render7.getByRole;
|
|
90
|
-
|
|
91
|
-
var progressBar = getByRole("progressbar");
|
|
92
|
-
expect(getByText("0 %")).toBeTruthy();
|
|
93
|
-
expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
|
|
94
|
-
});
|
|
95
|
-
test("Overlay progressBar renders with value", function () {
|
|
96
|
-
var value = 25;
|
|
97
|
-
|
|
98
|
-
var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
|
|
99
|
-
showValue: true,
|
|
100
|
-
value: value,
|
|
101
|
-
overlay: true
|
|
102
|
-
})),
|
|
103
|
-
getByText = _render8.getByText,
|
|
104
|
-
getByRole = _render8.getByRole;
|
|
105
|
-
|
|
106
|
-
var progressBar = getByRole("progressbar");
|
|
107
|
-
expect(getByText("25 %")).toBeTruthy();
|
|
108
|
-
expect(progressBar.getAttribute("aria-valuenow")).toEqual(value.toString());
|
|
109
|
-
});
|
|
110
|
-
});
|
package/progress-bar/types.d.ts
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2
|
-
export declare type Size = {
|
|
3
|
-
top?: Space;
|
|
4
|
-
bottom?: Space;
|
|
5
|
-
left?: Space;
|
|
6
|
-
right?: Space;
|
|
7
|
-
};
|
|
8
|
-
export 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
|
-
};
|
package/progress-bar/types.js
DELETED
package/quick-nav/QuickNav.d.ts
DELETED
package/quick-nav/QuickNav.js
DELETED
|
@@ -1,118 +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 _Flex = _interopRequireDefault(require("../flex/Flex"));
|
|
25
|
-
|
|
26
|
-
var _Inset = _interopRequireDefault(require("../inset/Inset"));
|
|
27
|
-
|
|
28
|
-
var _Typography = _interopRequireDefault(require("../typography/Typography"));
|
|
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(_Flex["default"], {
|
|
46
|
-
direction: "column",
|
|
47
|
-
gap: "0.5rem"
|
|
48
|
-
}, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
|
|
49
|
-
level: 4,
|
|
50
|
-
text: title || translatedLabels.quickNav.contentTitle
|
|
51
|
-
}), /*#__PURE__*/_react["default"].createElement(ListColumn, null, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
|
|
52
|
-
direction: "column",
|
|
53
|
-
gap: "0.5rem"
|
|
54
|
-
}, links.map(function (link) {
|
|
55
|
-
var _link$links;
|
|
56
|
-
|
|
57
|
-
return /*#__PURE__*/_react["default"].createElement(ListRow, {
|
|
58
|
-
key: link.label
|
|
59
|
-
}, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
|
|
60
|
-
space: "0.25rem"
|
|
61
|
-
}, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, /*#__PURE__*/_react["default"].createElement(Link, {
|
|
62
|
-
href: "#".concat((0, _slugify["default"])(link === null || link === void 0 ? void 0 : link.label, {
|
|
63
|
-
lower: true
|
|
64
|
-
}))
|
|
65
|
-
}, link === null || link === void 0 ? void 0 : link.label), (_link$links = link.links) === null || _link$links === void 0 ? void 0 : _link$links.map(function (sublink) {
|
|
66
|
-
return /*#__PURE__*/_react["default"].createElement(ListRow, {
|
|
67
|
-
key: sublink.label
|
|
68
|
-
}, /*#__PURE__*/_react["default"].createElement(_Inset["default"], {
|
|
69
|
-
horizontal: "0.5rem"
|
|
70
|
-
}, /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, /*#__PURE__*/_react["default"].createElement(Link, {
|
|
71
|
-
href: "#".concat((0, _slugify["default"])(sublink === null || sublink === void 0 ? void 0 : sublink.label, {
|
|
72
|
-
lower: true
|
|
73
|
-
}))
|
|
74
|
-
}, sublink === null || sublink === void 0 ? void 0 : sublink.label))));
|
|
75
|
-
}))));
|
|
76
|
-
}))))));
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
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) {
|
|
80
|
-
return props.theme.paddingTop;
|
|
81
|
-
}, function (props) {
|
|
82
|
-
return props.theme.paddingBottom;
|
|
83
|
-
}, function (props) {
|
|
84
|
-
return props.theme.paddingLeft;
|
|
85
|
-
}, function (props) {
|
|
86
|
-
return props.theme.paddingRight;
|
|
87
|
-
}, function (props) {
|
|
88
|
-
return props.theme.dividerBorderColor;
|
|
89
|
-
});
|
|
90
|
-
|
|
91
|
-
var ListColumn = _styledComponents["default"].ul(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n width: 100%;\n"])));
|
|
92
|
-
|
|
93
|
-
var ListRow = _styledComponents["default"].li(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n"])));
|
|
94
|
-
|
|
95
|
-
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 display: block;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n width: fit-content;\n max-width: 100%;\n\n &:hover {\n color: ", ";\n }\n &:focus {\n outline-color: ", ";\n outline-style: ", ";\n outline-width: ", ";\n border-radius: ", ";\n }\n"])), function (props) {
|
|
96
|
-
return props.theme.fontSize;
|
|
97
|
-
}, function (props) {
|
|
98
|
-
return props.theme.fontFamily;
|
|
99
|
-
}, function (props) {
|
|
100
|
-
return props.theme.fontStyle;
|
|
101
|
-
}, function (props) {
|
|
102
|
-
return props.theme.fontWeight;
|
|
103
|
-
}, function (props) {
|
|
104
|
-
return props.theme.fontColor;
|
|
105
|
-
}, function (props) {
|
|
106
|
-
return props.theme.hoverFontColor;
|
|
107
|
-
}, function (props) {
|
|
108
|
-
return props.theme.focusBorderColor;
|
|
109
|
-
}, function (props) {
|
|
110
|
-
return props.theme.focusBorderStyle;
|
|
111
|
-
}, function (props) {
|
|
112
|
-
return props.theme.focusBorderThickness;
|
|
113
|
-
}, function (props) {
|
|
114
|
-
return props.theme.focusBorderRadius;
|
|
115
|
-
});
|
|
116
|
-
|
|
117
|
-
var _default = DxcQuickNav;
|
|
118
|
-
exports["default"] = _default;
|