@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
package/paragraph/Paragraph.js
DELETED
|
@@ -1,38 +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 _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
|
|
14
|
-
var _Typography = _interopRequireDefault(require("../typography/Typography"));
|
|
15
|
-
|
|
16
|
-
var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
|
|
17
|
-
|
|
18
|
-
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
19
|
-
|
|
20
|
-
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); }
|
|
21
|
-
|
|
22
|
-
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; }
|
|
23
|
-
|
|
24
|
-
var Paragraph = function Paragraph(_ref) {
|
|
25
|
-
var children = _ref.children;
|
|
26
|
-
var colorsTheme = (0, _useTheme["default"])();
|
|
27
|
-
var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
|
|
28
|
-
return /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
|
|
29
|
-
as: "p",
|
|
30
|
-
display: colorsTheme.paragraph.display,
|
|
31
|
-
fontSize: colorsTheme.paragraph.fontSize,
|
|
32
|
-
fontWeight: colorsTheme.paragraph.fontWeight,
|
|
33
|
-
color: backgroundType && backgroundType === "dark" ? colorsTheme.paragraph.fontColorOnDark : colorsTheme.paragraph.fontColor
|
|
34
|
-
}, children);
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
var _default = Paragraph;
|
|
38
|
-
exports["default"] = _default;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import Title from "../../.storybook/components/Title";
|
|
3
|
-
import DxcParagraph from "./Paragraph";
|
|
4
|
-
import { BackgroundColorProvider } from "../BackgroundColorContext";
|
|
5
|
-
import ExampleContainer from "../../.storybook/components/ExampleContainer";
|
|
6
|
-
import DarkContainer from "../../.storybook/components/DarkSection";
|
|
7
|
-
|
|
8
|
-
export default {
|
|
9
|
-
title: "Paragraph",
|
|
10
|
-
component: DxcParagraph,
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
export const Chromatic = () => (
|
|
14
|
-
<>
|
|
15
|
-
<ExampleContainer>
|
|
16
|
-
<Title title="Default Paragraph" level={4} />
|
|
17
|
-
<DxcParagraph>
|
|
18
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tortor sit amet velit auctor cursus id eget
|
|
19
|
-
nisl. Vivamus luctus egestas eros, at mattis libero eleifend ac. Integer vel urna rutrum, pretium arcu
|
|
20
|
-
dignissim, fringilla turpis. Nullam luctus odio quis magna finibus, a pharetra magna euismod. Nullam efficitur
|
|
21
|
-
semper pellentesque. Nulla eget arcu ac diam fringilla vehicula. In imperdiet nisl hendrerit, elementum metus
|
|
22
|
-
eu, ornare risus. Aenean neque nibh, vestibulum vitae elit vel, imperdiet suscipit leo. Curabitur blandit
|
|
23
|
-
iaculis pretium. Fusce id imperdiet dui, ut laoreet justo. Sed maximus sollicitudin ipsum, et varius massa
|
|
24
|
-
condimentum eget. Vivamus id mauris et nisl mattis consequat et id lectus. Quisque mollis lacinia nisl.
|
|
25
|
-
Suspendisse sed quam tincidunt, commodo dolor vel, tincidunt nisl.
|
|
26
|
-
</DxcParagraph>
|
|
27
|
-
</ExampleContainer>
|
|
28
|
-
<BackgroundColorProvider color="#333333">
|
|
29
|
-
<DarkContainer>
|
|
30
|
-
<Title title="Default Paragraph" theme="dark" level={4} />
|
|
31
|
-
<DxcParagraph>
|
|
32
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tortor sit amet velit auctor cursus id eget
|
|
33
|
-
nisl. Vivamus luctus egestas eros, at mattis libero eleifend ac. Integer vel urna rutrum, pretium arcu
|
|
34
|
-
dignissim, fringilla turpis. Nullam luctus odio quis magna finibus, a pharetra magna euismod. Nullam efficitur
|
|
35
|
-
semper pellentesque. Nulla eget arcu ac diam fringilla vehicula. In imperdiet nisl hendrerit, elementum metus
|
|
36
|
-
eu, ornare risus. Aenean neque nibh, vestibulum vitae elit vel, imperdiet suscipit leo. Curabitur blandit
|
|
37
|
-
iaculis pretium. Fusce id imperdiet dui, ut laoreet justo. Sed maximus sollicitudin ipsum, et varius massa
|
|
38
|
-
condimentum eget. Vivamus id mauris et nisl mattis consequat et id lectus. Quisque mollis lacinia nisl.
|
|
39
|
-
Suspendisse sed quam tincidunt, commodo dolor vel, tincidunt nisl.
|
|
40
|
-
</DxcParagraph>
|
|
41
|
-
</DarkContainer>
|
|
42
|
-
</BackgroundColorProvider>
|
|
43
|
-
</>
|
|
44
|
-
);
|
|
@@ -1,166 +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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
-
|
|
16
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
-
|
|
18
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
19
|
-
|
|
20
|
-
var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
|
|
21
|
-
|
|
22
|
-
var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
|
|
23
|
-
|
|
24
|
-
var _templateObject;
|
|
25
|
-
|
|
26
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
|
-
|
|
28
|
-
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; }
|
|
29
|
-
|
|
30
|
-
var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
|
|
31
|
-
var label = _ref.label,
|
|
32
|
-
_ref$name = _ref.name,
|
|
33
|
-
name = _ref$name === void 0 ? "" : _ref$name,
|
|
34
|
-
value = _ref.value,
|
|
35
|
-
helperText = _ref.helperText,
|
|
36
|
-
_ref$clearable = _ref.clearable,
|
|
37
|
-
clearable = _ref$clearable === void 0 ? false : _ref$clearable,
|
|
38
|
-
onChange = _ref.onChange,
|
|
39
|
-
onBlur = _ref.onBlur,
|
|
40
|
-
error = _ref.error,
|
|
41
|
-
pattern = _ref.pattern,
|
|
42
|
-
minLength = _ref.minLength,
|
|
43
|
-
maxLength = _ref.maxLength,
|
|
44
|
-
_ref$autocomplete = _ref.autocomplete,
|
|
45
|
-
autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
|
|
46
|
-
margin = _ref.margin,
|
|
47
|
-
_ref$size = _ref.size,
|
|
48
|
-
size = _ref$size === void 0 ? "medium" : _ref$size,
|
|
49
|
-
_ref$tabIndex = _ref.tabIndex,
|
|
50
|
-
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
|
|
51
|
-
|
|
52
|
-
var _useState = (0, _react.useState)(false),
|
|
53
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
54
|
-
isPasswordVisible = _useState2[0],
|
|
55
|
-
setIsPasswordVisible = _useState2[1];
|
|
56
|
-
|
|
57
|
-
var inputRef = (0, _react.useRef)(null);
|
|
58
|
-
var translatedLabels = (0, _useTranslatedLabels["default"])();
|
|
59
|
-
|
|
60
|
-
var setInputType = function setInputType(type) {
|
|
61
|
-
var _inputRef$current, _inputRef$current$chi;
|
|
62
|
-
|
|
63
|
-
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : (_inputRef$current$chi = _inputRef$current.children[label && helperText ? 2 : label || helperText ? 1 : 0]) === null || _inputRef$current$chi === void 0 ? void 0 : _inputRef$current$chi.children[0].setAttribute("type", type);
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
var setAriaAttributes = function setAriaAttributes(ariaExpanded, ariaLabel) {
|
|
67
|
-
var inputIndex = label && helperText ? 2 : label || helperText ? 1 : 0;
|
|
68
|
-
|
|
69
|
-
if (error && clearable && value) {
|
|
70
|
-
var _inputRef$current2, _inputRef$current2$ch, _inputRef$current2$ch2, _inputRef$current3, _inputRef$current3$ch, _inputRef$current3$ch2;
|
|
71
|
-
|
|
72
|
-
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : (_inputRef$current2$ch = _inputRef$current2.children[inputIndex]) === null || _inputRef$current2$ch === void 0 ? void 0 : (_inputRef$current2$ch2 = _inputRef$current2$ch.children[3]) === null || _inputRef$current2$ch2 === void 0 ? void 0 : _inputRef$current2$ch2.setAttribute("aria-expanded", ariaExpanded);
|
|
73
|
-
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : (_inputRef$current3$ch = _inputRef$current3.children[inputIndex]) === null || _inputRef$current3$ch === void 0 ? void 0 : (_inputRef$current3$ch2 = _inputRef$current3$ch.children[3]) === null || _inputRef$current3$ch2 === void 0 ? void 0 : _inputRef$current3$ch2.setAttribute("aria-label", ariaLabel);
|
|
74
|
-
} else if (error || clearable && !value) {
|
|
75
|
-
var _inputRef$current4, _inputRef$current4$ch, _inputRef$current4$ch2, _inputRef$current5, _inputRef$current5$ch, _inputRef$current5$ch2;
|
|
76
|
-
|
|
77
|
-
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : (_inputRef$current4$ch = _inputRef$current4.children[inputIndex]) === null || _inputRef$current4$ch === void 0 ? void 0 : (_inputRef$current4$ch2 = _inputRef$current4$ch.children[2]) === null || _inputRef$current4$ch2 === void 0 ? void 0 : _inputRef$current4$ch2.setAttribute("aria-expanded", ariaExpanded);
|
|
78
|
-
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : (_inputRef$current5$ch = _inputRef$current5.children[inputIndex]) === null || _inputRef$current5$ch === void 0 ? void 0 : (_inputRef$current5$ch2 = _inputRef$current5$ch.children[2]) === null || _inputRef$current5$ch2 === void 0 ? void 0 : _inputRef$current5$ch2.setAttribute("aria-label", ariaLabel);
|
|
79
|
-
} else {
|
|
80
|
-
var _inputRef$current6, _inputRef$current6$ch, _inputRef$current6$ch2, _inputRef$current7, _inputRef$current7$ch, _inputRef$current7$ch2;
|
|
81
|
-
|
|
82
|
-
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 ? void 0 : (_inputRef$current6$ch = _inputRef$current6.children[inputIndex]) === null || _inputRef$current6$ch === void 0 ? void 0 : (_inputRef$current6$ch2 = _inputRef$current6$ch.children[1]) === null || _inputRef$current6$ch2 === void 0 ? void 0 : _inputRef$current6$ch2.setAttribute("aria-expanded", ariaExpanded);
|
|
83
|
-
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current7 = inputRef.current) === null || _inputRef$current7 === void 0 ? void 0 : (_inputRef$current7$ch = _inputRef$current7.children[inputIndex]) === null || _inputRef$current7$ch === void 0 ? void 0 : (_inputRef$current7$ch2 = _inputRef$current7$ch.children[1]) === null || _inputRef$current7$ch2 === void 0 ? void 0 : _inputRef$current7$ch2.setAttribute("aria-label", ariaLabel);
|
|
84
|
-
}
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
var getIconTitle = function getIconTitle() {
|
|
88
|
-
return isPasswordVisible ? translatedLabels.passwordInput.inputHidePasswordTitle : translatedLabels.passwordInput.inputShowPasswordTitle;
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
(0, _react.useEffect)(function () {
|
|
92
|
-
setAriaAttributes(false, translatedLabels.passwordInput.inputShowPasswordTitle);
|
|
93
|
-
|
|
94
|
-
if (isPasswordVisible) {
|
|
95
|
-
setInputType("text");
|
|
96
|
-
setAriaAttributes(true, translatedLabels.passwordInput.inputHidePasswordTitle);
|
|
97
|
-
} else {
|
|
98
|
-
setInputType("password");
|
|
99
|
-
setAriaAttributes(false, translatedLabels.passwordInput.inputShowPasswordTitle);
|
|
100
|
-
}
|
|
101
|
-
}, [isPasswordVisible]);
|
|
102
|
-
|
|
103
|
-
var viewPassword = function viewPassword() {
|
|
104
|
-
setInputType("text");
|
|
105
|
-
setIsPasswordVisible(true);
|
|
106
|
-
};
|
|
107
|
-
|
|
108
|
-
var hidePassword = function hidePassword() {
|
|
109
|
-
setInputType("password");
|
|
110
|
-
setIsPasswordVisible(false);
|
|
111
|
-
};
|
|
112
|
-
|
|
113
|
-
var action = {
|
|
114
|
-
onClick: isPasswordVisible ? hidePassword : viewPassword,
|
|
115
|
-
icon: isPasswordVisible ? /*#__PURE__*/_react["default"].createElement("svg", {
|
|
116
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
117
|
-
height: "24px",
|
|
118
|
-
viewBox: "0 0 24 24",
|
|
119
|
-
width: "24px",
|
|
120
|
-
fill: "currentColor"
|
|
121
|
-
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
122
|
-
d: "M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z",
|
|
123
|
-
fill: "none"
|
|
124
|
-
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
125
|
-
d: "M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"
|
|
126
|
-
})) : /*#__PURE__*/_react["default"].createElement("svg", {
|
|
127
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
128
|
-
height: "24px",
|
|
129
|
-
viewBox: "0 0 24 24",
|
|
130
|
-
width: "24px",
|
|
131
|
-
fill: "currentColor"
|
|
132
|
-
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
133
|
-
d: "M0 0h24v24H0V0z",
|
|
134
|
-
fill: "none"
|
|
135
|
-
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
136
|
-
d: "M12 6c3.79 0 7.17 2.13 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5C4.83 8.13 8.21 6 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5c1.38 0 2.5 1.12 2.5 2.5S13.38 14 12 14s-2.5-1.12-2.5-2.5S10.62 9 12 9m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"
|
|
137
|
-
})),
|
|
138
|
-
title: getIconTitle()
|
|
139
|
-
};
|
|
140
|
-
return /*#__PURE__*/_react["default"].createElement(PasswordInput, {
|
|
141
|
-
ref: ref
|
|
142
|
-
}, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
143
|
-
ref: inputRef,
|
|
144
|
-
label: label,
|
|
145
|
-
name: name,
|
|
146
|
-
value: value,
|
|
147
|
-
helperText: helperText,
|
|
148
|
-
action: action,
|
|
149
|
-
error: error,
|
|
150
|
-
clearable: clearable,
|
|
151
|
-
onChange: onChange,
|
|
152
|
-
onBlur: onBlur,
|
|
153
|
-
margin: margin,
|
|
154
|
-
size: size,
|
|
155
|
-
pattern: pattern,
|
|
156
|
-
minLength: minLength,
|
|
157
|
-
maxLength: maxLength,
|
|
158
|
-
autocomplete: autocomplete,
|
|
159
|
-
tabIndex: tabIndex
|
|
160
|
-
}));
|
|
161
|
-
});
|
|
162
|
-
|
|
163
|
-
var PasswordInput = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n & ::-ms-reveal {\n display: none;\n }\n"])));
|
|
164
|
-
|
|
165
|
-
var _default = DxcPasswordInput;
|
|
166
|
-
exports["default"] = _default;
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { userEvent, within } from "@storybook/testing-library";
|
|
3
|
-
import DxcPasswordInput from "./PasswordInput";
|
|
4
|
-
import { BackgroundColorProvider } from "../BackgroundColorContext";
|
|
5
|
-
import Title from "../../.storybook/components/Title";
|
|
6
|
-
import ExampleContainer from "../../.storybook/components/ExampleContainer";
|
|
7
|
-
import DarkContainer from "../../.storybook/components/DarkSection";
|
|
8
|
-
|
|
9
|
-
export default {
|
|
10
|
-
title: "Password input",
|
|
11
|
-
component: DxcPasswordInput,
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
export const Chromatic = () => (
|
|
15
|
-
<>
|
|
16
|
-
<ExampleContainer>
|
|
17
|
-
<Title title="Without label" theme="light" level={4} />
|
|
18
|
-
<DxcPasswordInput />
|
|
19
|
-
</ExampleContainer>
|
|
20
|
-
<ExampleContainer>
|
|
21
|
-
<Title title="With label" theme="light" level={4} />
|
|
22
|
-
<DxcPasswordInput label="Password input" clearable />
|
|
23
|
-
</ExampleContainer>
|
|
24
|
-
<ExampleContainer>
|
|
25
|
-
<Title title="Clearable" theme="light" level={4} />
|
|
26
|
-
<DxcPasswordInput label="Password input" clearable value="password" />
|
|
27
|
-
</ExampleContainer>
|
|
28
|
-
<ExampleContainer>
|
|
29
|
-
<Title title="Non clearable" theme="light" level={4} />
|
|
30
|
-
<DxcPasswordInput label="Non clearable password input" value="password" />
|
|
31
|
-
</ExampleContainer>
|
|
32
|
-
<ExampleContainer>
|
|
33
|
-
<Title title="Helper text" theme="light" level={4} />
|
|
34
|
-
<DxcPasswordInput label="Help password input" helperText="Help message" />
|
|
35
|
-
</ExampleContainer>
|
|
36
|
-
<ExampleContainer>
|
|
37
|
-
<Title title="Invalid" theme="light" level={4} />
|
|
38
|
-
<DxcPasswordInput label="Error password input" error="Error message." />
|
|
39
|
-
</ExampleContainer>
|
|
40
|
-
<BackgroundColorProvider color="#333333">
|
|
41
|
-
<DarkContainer>
|
|
42
|
-
<Title title="Dark" theme="dark" level={2} />
|
|
43
|
-
<ExampleContainer>
|
|
44
|
-
<Title title="With label, helper text and value" theme="dark" level={4} />
|
|
45
|
-
<DxcPasswordInput label="Password input" helperText="Help message" value="Password" />
|
|
46
|
-
</ExampleContainer>
|
|
47
|
-
<ExampleContainer>
|
|
48
|
-
<Title title="With label, helper text, value and error" theme="dark" level={4} />
|
|
49
|
-
<DxcPasswordInput label="Password input" helperText="Help message" error="Error message." value="Password" />
|
|
50
|
-
</ExampleContainer>
|
|
51
|
-
</DarkContainer>
|
|
52
|
-
</BackgroundColorProvider>
|
|
53
|
-
<Title title="Margins" theme="light" level={2} />
|
|
54
|
-
<ExampleContainer>
|
|
55
|
-
<Title title="Xxsmall margin" theme="light" level={4} />
|
|
56
|
-
<DxcPasswordInput label="Xxsmall" margin="xxsmall" />
|
|
57
|
-
</ExampleContainer>
|
|
58
|
-
<ExampleContainer>
|
|
59
|
-
<Title title="Xsmall margin" theme="light" level={4} />
|
|
60
|
-
<DxcPasswordInput label="Xsmall" margin="xsmall" />
|
|
61
|
-
</ExampleContainer>
|
|
62
|
-
<ExampleContainer>
|
|
63
|
-
<Title title="Small margin" theme="light" level={4} />
|
|
64
|
-
<DxcPasswordInput label="Small" margin="small" />
|
|
65
|
-
</ExampleContainer>
|
|
66
|
-
<ExampleContainer>
|
|
67
|
-
<Title title="Medium margin" theme="light" level={4} />
|
|
68
|
-
<DxcPasswordInput label="Medium" margin="medium" />
|
|
69
|
-
</ExampleContainer>
|
|
70
|
-
<ExampleContainer>
|
|
71
|
-
<Title title="Large margin" theme="light" level={4} />
|
|
72
|
-
<DxcPasswordInput label="Large" margin="large" />
|
|
73
|
-
</ExampleContainer>
|
|
74
|
-
<ExampleContainer>
|
|
75
|
-
<Title title="Xlarge margin" theme="light" level={4} />
|
|
76
|
-
<DxcPasswordInput label="Xlarge" margin="xlarge" />
|
|
77
|
-
</ExampleContainer>
|
|
78
|
-
<ExampleContainer>
|
|
79
|
-
<Title title="Xxlarge margin" theme="light" level={4} />
|
|
80
|
-
<DxcPasswordInput label="Xxlarge" margin="xxlarge" />
|
|
81
|
-
</ExampleContainer>
|
|
82
|
-
<Title title="Sizes" theme="light" level={2} />
|
|
83
|
-
<ExampleContainer>
|
|
84
|
-
<Title title="Small size" theme="light" level={4} />
|
|
85
|
-
<DxcPasswordInput label="Small" size="small" />
|
|
86
|
-
</ExampleContainer>
|
|
87
|
-
<ExampleContainer>
|
|
88
|
-
<Title title="Medium size" theme="light" level={4} />
|
|
89
|
-
<DxcPasswordInput label="Medium" size="medium" />
|
|
90
|
-
</ExampleContainer>
|
|
91
|
-
<ExampleContainer>
|
|
92
|
-
<Title title="Large size" theme="light" level={4} />
|
|
93
|
-
<DxcPasswordInput label="Large" size="large" />
|
|
94
|
-
</ExampleContainer>
|
|
95
|
-
<ExampleContainer>
|
|
96
|
-
<Title title="FillParent size" theme="light" level={4} />
|
|
97
|
-
<DxcPasswordInput label="FillParent" size="fillParent" />
|
|
98
|
-
</ExampleContainer>
|
|
99
|
-
</>
|
|
100
|
-
);
|
|
101
|
-
|
|
102
|
-
const Password = () => (
|
|
103
|
-
<ExampleContainer expanded>
|
|
104
|
-
<Title title="Show password" theme="light" level={4} />
|
|
105
|
-
<DxcPasswordInput label="Password input" value="Password" />
|
|
106
|
-
</ExampleContainer>
|
|
107
|
-
);
|
|
108
|
-
const PasswordDark = () => (
|
|
109
|
-
<BackgroundColorProvider color="#333333">
|
|
110
|
-
<DarkContainer>
|
|
111
|
-
<ExampleContainer expanded>
|
|
112
|
-
<Title title="Show password" theme="dark" level={4} />
|
|
113
|
-
<DxcPasswordInput label="Password input" value="Password" />
|
|
114
|
-
</ExampleContainer>
|
|
115
|
-
</DarkContainer>
|
|
116
|
-
</BackgroundColorProvider>
|
|
117
|
-
);
|
|
118
|
-
|
|
119
|
-
export const ShowPassword = Password.bind({});
|
|
120
|
-
ShowPassword.play = async ({ canvasElement }) => {
|
|
121
|
-
const canvas = within(canvasElement);
|
|
122
|
-
const passwordBtn = canvas.getByRole("button");
|
|
123
|
-
await userEvent.click(passwordBtn);
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
export const ShowPasswordDark = PasswordDark.bind({});
|
|
127
|
-
ShowPasswordDark.play = async ({ canvasElement }) => {
|
|
128
|
-
const canvas = within(canvasElement);
|
|
129
|
-
const passwordBtn = canvas.getByRole("button");
|
|
130
|
-
await userEvent.click(passwordBtn);
|
|
131
|
-
};
|
|
@@ -1,180 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
6
|
-
|
|
7
|
-
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
8
|
-
|
|
9
|
-
var _react = _interopRequireDefault(require("react"));
|
|
10
|
-
|
|
11
|
-
var _react2 = require("@testing-library/react");
|
|
12
|
-
|
|
13
|
-
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
|
|
14
|
-
|
|
15
|
-
var _PasswordInput = _interopRequireDefault(require("./PasswordInput"));
|
|
16
|
-
|
|
17
|
-
describe("Password input component tests", function () {
|
|
18
|
-
test("Password input renders with label", function () {
|
|
19
|
-
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
|
|
20
|
-
label: "Password input label"
|
|
21
|
-
})),
|
|
22
|
-
getByText = _render.getByText;
|
|
23
|
-
|
|
24
|
-
expect(getByText("Password input label")).toBeTruthy();
|
|
25
|
-
});
|
|
26
|
-
test("Password input renders with helper text", function () {
|
|
27
|
-
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
|
|
28
|
-
helperText: "Helper text"
|
|
29
|
-
})),
|
|
30
|
-
getByText = _render2.getByText;
|
|
31
|
-
|
|
32
|
-
expect(getByText("Helper text")).toBeTruthy();
|
|
33
|
-
});
|
|
34
|
-
test("Password input renders error", function () {
|
|
35
|
-
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
|
|
36
|
-
error: "Error message."
|
|
37
|
-
})),
|
|
38
|
-
getByText = _render3.getByText;
|
|
39
|
-
|
|
40
|
-
expect(getByText("Error message.")).toBeTruthy();
|
|
41
|
-
});
|
|
42
|
-
test("onChange function is called correctly", function () {
|
|
43
|
-
var onChange = jest.fn();
|
|
44
|
-
|
|
45
|
-
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
|
|
46
|
-
label: "Password input",
|
|
47
|
-
onChange: onChange
|
|
48
|
-
})),
|
|
49
|
-
getByRole = _render4.getByRole;
|
|
50
|
-
|
|
51
|
-
var passwordInput = getByRole("textbox");
|
|
52
|
-
|
|
53
|
-
_userEvent["default"].type(passwordInput, "Pa$$w0rd");
|
|
54
|
-
|
|
55
|
-
expect(onChange).toHaveBeenCalledWith({
|
|
56
|
-
value: "P"
|
|
57
|
-
});
|
|
58
|
-
expect(passwordInput.value).toBe("Pa$$w0rd");
|
|
59
|
-
});
|
|
60
|
-
test("onBlur function is called correctly", function () {
|
|
61
|
-
var onBlur = jest.fn();
|
|
62
|
-
|
|
63
|
-
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
|
|
64
|
-
label: "Password input",
|
|
65
|
-
onBlur: onBlur
|
|
66
|
-
})),
|
|
67
|
-
getByRole = _render5.getByRole;
|
|
68
|
-
|
|
69
|
-
var passwordInput = getByRole("textbox");
|
|
70
|
-
|
|
71
|
-
_userEvent["default"].type(passwordInput, "Pa$$w0rd");
|
|
72
|
-
|
|
73
|
-
_react2.fireEvent.blur(passwordInput);
|
|
74
|
-
|
|
75
|
-
expect(onBlur).toHaveBeenCalledWith({
|
|
76
|
-
value: "Pa$$w0rd"
|
|
77
|
-
});
|
|
78
|
-
expect(passwordInput.value).toBe("Pa$$w0rd");
|
|
79
|
-
});
|
|
80
|
-
test("Clear password input value", function () {
|
|
81
|
-
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
|
|
82
|
-
label: "Password input",
|
|
83
|
-
clearable: true
|
|
84
|
-
})),
|
|
85
|
-
getAllByRole = _render6.getAllByRole,
|
|
86
|
-
getByRole = _render6.getByRole;
|
|
87
|
-
|
|
88
|
-
var passwordInput = getByRole("textbox");
|
|
89
|
-
|
|
90
|
-
_userEvent["default"].type(passwordInput, "Pa$$w0rd");
|
|
91
|
-
|
|
92
|
-
expect(passwordInput.value).toBe("Pa$$w0rd");
|
|
93
|
-
var clearButton = getAllByRole("button")[0];
|
|
94
|
-
|
|
95
|
-
_userEvent["default"].click(clearButton);
|
|
96
|
-
|
|
97
|
-
expect(passwordInput.value).toBe("");
|
|
98
|
-
});
|
|
99
|
-
test("Non clearable password input has no clear icon", function () {
|
|
100
|
-
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
|
|
101
|
-
label: "Password input"
|
|
102
|
-
})),
|
|
103
|
-
getAllByRole = _render7.getAllByRole,
|
|
104
|
-
getByRole = _render7.getByRole;
|
|
105
|
-
|
|
106
|
-
var passwordInput = getByRole("textbox");
|
|
107
|
-
|
|
108
|
-
_userEvent["default"].type(passwordInput, "Pa$$w0rd");
|
|
109
|
-
|
|
110
|
-
expect(passwordInput.value).toBe("Pa$$w0rd");
|
|
111
|
-
var buttons = getAllByRole("button");
|
|
112
|
-
expect(buttons.length).toBe(1);
|
|
113
|
-
});
|
|
114
|
-
test("Show/hide password input button works correctly", function () {
|
|
115
|
-
var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
|
|
116
|
-
label: "Password input",
|
|
117
|
-
clearable: true
|
|
118
|
-
})),
|
|
119
|
-
getAllByRole = _render8.getAllByRole,
|
|
120
|
-
getByRole = _render8.getByRole;
|
|
121
|
-
|
|
122
|
-
var passwordInput = getByRole("textbox");
|
|
123
|
-
|
|
124
|
-
_userEvent["default"].type(passwordInput, "Pa$$w0rd");
|
|
125
|
-
|
|
126
|
-
expect(passwordInput.value).toBe("Pa$$w0rd");
|
|
127
|
-
expect(passwordInput.type).toBe("password");
|
|
128
|
-
var showButton = getAllByRole("button")[1];
|
|
129
|
-
|
|
130
|
-
_userEvent["default"].click(showButton);
|
|
131
|
-
|
|
132
|
-
expect(passwordInput.type).toBe("text");
|
|
133
|
-
});
|
|
134
|
-
test("Password tooltip is correct", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
|
|
135
|
-
var _render9, getAllByRole, getByTitle, queryByTitle, showButton;
|
|
136
|
-
|
|
137
|
-
return _regenerator["default"].wrap(function _callee$(_context) {
|
|
138
|
-
while (1) {
|
|
139
|
-
switch (_context.prev = _context.next) {
|
|
140
|
-
case 0:
|
|
141
|
-
_render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
|
|
142
|
-
label: "Password input",
|
|
143
|
-
clearable: true,
|
|
144
|
-
value: "Password"
|
|
145
|
-
})), getAllByRole = _render9.getAllByRole, getByTitle = _render9.getByTitle, queryByTitle = _render9.queryByTitle;
|
|
146
|
-
showButton = getAllByRole("button")[1];
|
|
147
|
-
|
|
148
|
-
_userEvent["default"].hover(showButton);
|
|
149
|
-
|
|
150
|
-
expect(getByTitle("Show password")).toBeTruthy();
|
|
151
|
-
|
|
152
|
-
_userEvent["default"].unhover(showButton);
|
|
153
|
-
|
|
154
|
-
expect(queryByTitle("Hide password")).toBeFalsy();
|
|
155
|
-
|
|
156
|
-
case 6:
|
|
157
|
-
case "end":
|
|
158
|
-
return _context.stop();
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
}, _callee);
|
|
162
|
-
})));
|
|
163
|
-
test("Password input has correct accesibility attributes", function () {
|
|
164
|
-
var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
|
|
165
|
-
label: "Password input"
|
|
166
|
-
})),
|
|
167
|
-
getByRole = _render10.getByRole;
|
|
168
|
-
|
|
169
|
-
var passwordInput = getByRole("textbox");
|
|
170
|
-
expect(passwordInput.getAttribute("aria-autocomplete")).toBeNull();
|
|
171
|
-
expect(passwordInput.getAttribute("aria-controls")).toBeNull();
|
|
172
|
-
expect(passwordInput.getAttribute("aria-expanded")).toBeNull();
|
|
173
|
-
var showButton = getByRole("button");
|
|
174
|
-
expect(showButton.getAttribute("aria-label")).toBe("Show password");
|
|
175
|
-
|
|
176
|
-
_userEvent["default"].click(showButton);
|
|
177
|
-
|
|
178
|
-
expect(showButton.getAttribute("aria-label")).toBe("Hide password");
|
|
179
|
-
});
|
|
180
|
-
});
|