@dxc-technology/halstack-react 3.4.1 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/BackgroundColorContext.d.ts +10 -0
- package/BackgroundColorContext.js +47 -0
- package/HalstackContext.d.ts +10 -0
- package/HalstackContext.js +243 -0
- package/accordion/Accordion.d.ts +4 -0
- package/accordion/Accordion.js +226 -0
- package/accordion/Accordion.stories.tsx +307 -0
- package/accordion/Accordion.test.js +72 -0
- package/accordion/types.d.ts +68 -0
- package/accordion/types.js +5 -0
- package/accordion-group/AccordionGroup.d.ts +7 -0
- package/accordion-group/AccordionGroup.js +168 -0
- package/accordion-group/AccordionGroup.stories.tsx +225 -0
- package/accordion-group/AccordionGroup.test.js +151 -0
- package/accordion-group/types.d.ts +72 -0
- package/accordion-group/types.js +5 -0
- package/alert/Alert.d.ts +4 -0
- package/{dist/alert → alert}/Alert.js +44 -157
- package/alert/Alert.stories.tsx +170 -0
- package/alert/Alert.test.js +92 -0
- package/alert/types.d.ts +49 -0
- package/alert/types.js +5 -0
- package/badge/Badge.d.ts +4 -0
- package/badge/Badge.js +59 -0
- package/badge/types.d.ts +4 -0
- package/badge/types.js +5 -0
- package/bleed/Bleed.d.ts +3 -0
- package/bleed/Bleed.js +84 -0
- package/bleed/Bleed.stories.tsx +342 -0
- package/bleed/types.d.ts +37 -0
- package/bleed/types.js +5 -0
- package/box/Box.d.ts +4 -0
- package/{dist/box → box}/Box.js +15 -45
- package/box/Box.stories.tsx +132 -0
- package/box/Box.test.js +18 -0
- package/box/types.d.ts +43 -0
- package/box/types.js +5 -0
- package/button/Button.d.ts +4 -0
- package/{dist/button → button}/Button.js +34 -100
- package/button/Button.stories.tsx +274 -0
- package/button/Button.test.js +35 -0
- package/button/types.d.ts +53 -0
- package/button/types.js +5 -0
- package/card/Card.d.ts +4 -0
- package/card/Card.js +163 -0
- package/card/Card.stories.tsx +201 -0
- package/card/Card.test.js +50 -0
- package/card/ice-cream.jpg +0 -0
- package/card/types.d.ts +67 -0
- package/card/types.js +5 -0
- package/checkbox/Checkbox.d.ts +4 -0
- package/{dist/checkbox → checkbox}/Checkbox.js +53 -99
- package/checkbox/Checkbox.stories.tsx +188 -0
- package/checkbox/Checkbox.test.js +78 -0
- package/checkbox/types.d.ts +64 -0
- package/checkbox/types.js +5 -0
- package/chip/Chip.d.ts +4 -0
- package/chip/Chip.js +161 -0
- package/chip/Chip.stories.tsx +119 -0
- package/chip/Chip.test.js +56 -0
- package/chip/types.d.ts +45 -0
- package/chip/types.js +5 -0
- package/{dist/common → common}/OpenSans.css +0 -0
- package/{dist/common → common}/RequiredComponent.js +3 -11
- package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
- package/{dist/common → common}/utils.js +0 -0
- package/{dist/common → common}/variables.js +350 -339
- package/date-input/DateInput.d.ts +4 -0
- package/date-input/DateInput.js +369 -0
- package/date-input/DateInput.stories.tsx +138 -0
- package/date-input/DateInput.test.js +479 -0
- package/date-input/types.d.ts +107 -0
- package/date-input/types.js +5 -0
- package/dialog/Dialog.d.ts +4 -0
- package/dialog/Dialog.js +138 -0
- package/dialog/Dialog.stories.tsx +212 -0
- package/dialog/Dialog.test.js +40 -0
- package/dialog/types.d.ts +43 -0
- package/dialog/types.js +5 -0
- package/dropdown/Dropdown.d.ts +4 -0
- package/{dist/dropdown → dropdown}/Dropdown.js +54 -207
- package/dropdown/Dropdown.stories.tsx +249 -0
- package/dropdown/Dropdown.test.js +189 -0
- package/dropdown/types.d.ts +80 -0
- package/dropdown/types.js +5 -0
- package/file-input/FileInput.d.ts +4 -0
- package/file-input/FileInput.js +590 -0
- package/file-input/FileInput.stories.tsx +507 -0
- package/file-input/FileInput.test.js +457 -0
- package/file-input/FileItem.d.ts +14 -0
- package/file-input/FileItem.js +184 -0
- package/file-input/types.d.ts +112 -0
- package/file-input/types.js +5 -0
- package/footer/Footer.d.ts +4 -0
- package/footer/Footer.js +183 -0
- package/footer/Footer.stories.tsx +130 -0
- package/footer/Footer.test.js +109 -0
- package/footer/Icons.d.ts +2 -0
- package/footer/Icons.js +77 -0
- package/footer/types.d.ts +65 -0
- package/footer/types.js +5 -0
- package/header/Header.d.ts +7 -0
- package/header/Header.js +300 -0
- package/header/Header.stories.tsx +172 -0
- package/header/Header.test.js +79 -0
- package/header/Icons.d.ts +2 -0
- package/header/Icons.js +34 -0
- package/header/types.d.ts +47 -0
- package/header/types.js +5 -0
- package/heading/Heading.d.ts +4 -0
- package/{dist/heading → heading}/Heading.js +31 -90
- package/heading/Heading.stories.tsx +54 -0
- package/heading/Heading.test.js +186 -0
- package/heading/types.d.ts +33 -0
- package/heading/types.js +5 -0
- package/inset/Inset.d.ts +3 -0
- package/inset/Inset.js +84 -0
- package/inset/Inset.stories.tsx +229 -0
- package/inset/types.d.ts +37 -0
- package/inset/types.js +5 -0
- package/layout/ApplicationLayout.d.ts +10 -0
- package/layout/ApplicationLayout.js +218 -0
- package/layout/ApplicationLayout.stories.tsx +171 -0
- package/layout/Icons.js +55 -0
- package/layout/types.d.ts +57 -0
- package/layout/types.js +5 -0
- package/link/Link.d.ts +3 -0
- package/{dist/link → link}/Link.js +23 -115
- package/link/Link.stories.tsx +151 -0
- package/link/Link.test.js +91 -0
- package/link/types.d.ts +70 -0
- package/link/types.js +5 -0
- package/list/List.d.ts +4 -0
- package/list/List.js +47 -0
- package/list/List.stories.tsx +95 -0
- package/list/types.d.ts +7 -0
- package/list/types.js +5 -0
- package/main.d.ts +47 -0
- package/{dist/main.js → main.js} +137 -101
- package/number-input/NumberInput.d.ts +4 -0
- package/number-input/NumberInput.js +76 -0
- package/number-input/NumberInput.stories.tsx +115 -0
- package/number-input/NumberInput.test.js +506 -0
- package/number-input/NumberInputContext.d.ts +4 -0
- package/{dist/number/NumberContext.js → number-input/NumberInputContext.js} +6 -3
- package/number-input/numberInputContextTypes.d.ts +19 -0
- package/number-input/numberInputContextTypes.js +5 -0
- package/number-input/types.d.ts +124 -0
- package/number-input/types.js +5 -0
- package/package.json +37 -27
- package/paginator/Icons.js +66 -0
- package/paginator/Paginator.d.ts +4 -0
- package/paginator/Paginator.js +192 -0
- package/paginator/Paginator.stories.tsx +63 -0
- package/paginator/Paginator.test.js +266 -0
- package/paginator/types.d.ts +38 -0
- package/paginator/types.js +5 -0
- package/password-input/PasswordInput.d.ts +4 -0
- package/{dist/password/Password.js → password-input/PasswordInput.js} +46 -83
- package/password-input/PasswordInput.stories.tsx +131 -0
- package/password-input/PasswordInput.test.js +181 -0
- package/password-input/types.d.ts +110 -0
- package/password-input/types.js +5 -0
- package/progress-bar/ProgressBar.d.ts +4 -0
- package/{dist/progress-bar → progress-bar}/ProgressBar.js +22 -94
- package/progress-bar/ProgressBar.stories.jsx +58 -0
- package/progress-bar/ProgressBar.test.js +65 -0
- package/progress-bar/types.d.ts +37 -0
- package/progress-bar/types.js +5 -0
- package/quick-nav/QuickNav.d.ts +4 -0
- package/quick-nav/QuickNav.js +64 -0
- package/quick-nav/QuickNav.stories.tsx +237 -0
- package/quick-nav/types.d.ts +21 -0
- package/quick-nav/types.js +5 -0
- package/radio/Radio.d.ts +4 -0
- package/{dist/radio → radio}/Radio.js +23 -59
- package/radio/Radio.stories.tsx +192 -0
- package/radio/Radio.test.js +71 -0
- package/radio/types.d.ts +54 -0
- package/radio/types.js +5 -0
- package/radio-group/Radio.d.ts +4 -0
- package/radio-group/Radio.js +141 -0
- package/radio-group/RadioGroup.d.ts +4 -0
- package/radio-group/RadioGroup.js +280 -0
- package/radio-group/RadioGroup.stories.tsx +100 -0
- package/radio-group/RadioGroup.test.js +695 -0
- package/radio-group/types.d.ts +114 -0
- package/radio-group/types.js +5 -0
- package/resultsetTable/ResultsetTable.d.ts +4 -0
- package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +43 -147
- package/resultsetTable/ResultsetTable.stories.tsx +275 -0
- package/resultsetTable/ResultsetTable.test.js +306 -0
- package/resultsetTable/types.d.ts +67 -0
- package/resultsetTable/types.js +5 -0
- package/row/Row.d.ts +3 -0
- package/row/Row.js +127 -0
- package/row/Row.stories.tsx +237 -0
- package/row/types.d.ts +28 -0
- package/row/types.js +5 -0
- package/select/Icons.d.ts +10 -0
- package/select/Icons.js +93 -0
- package/select/Listbox.d.ts +4 -0
- package/select/Listbox.js +148 -0
- package/select/Option.d.ts +4 -0
- package/select/Option.js +110 -0
- package/select/Select.d.ts +4 -0
- package/select/Select.js +655 -0
- package/select/Select.stories.tsx +582 -0
- package/select/Select.test.js +2057 -0
- package/select/types.d.ts +213 -0
- package/select/types.js +5 -0
- package/sidenav/Sidenav.d.ts +9 -0
- package/sidenav/Sidenav.js +136 -0
- package/sidenav/Sidenav.stories.tsx +182 -0
- package/sidenav/Sidenav.test.js +56 -0
- package/sidenav/types.d.ts +50 -0
- package/sidenav/types.js +5 -0
- package/slider/Slider.d.ts +4 -0
- package/slider/Slider.js +318 -0
- package/slider/Slider.stories.tsx +177 -0
- package/slider/Slider.test.js +150 -0
- package/slider/types.d.ts +82 -0
- package/slider/types.js +5 -0
- package/spinner/Spinner.d.ts +4 -0
- package/spinner/Spinner.js +250 -0
- package/spinner/Spinner.stories.jsx +103 -0
- package/spinner/Spinner.test.js +64 -0
- package/spinner/types.d.ts +32 -0
- package/spinner/types.js +5 -0
- package/stack/Stack.d.ts +3 -0
- package/stack/Stack.js +97 -0
- package/stack/Stack.stories.tsx +164 -0
- package/stack/types.d.ts +24 -0
- package/stack/types.js +5 -0
- package/switch/Switch.d.ts +4 -0
- package/switch/Switch.js +192 -0
- package/switch/Switch.stories.tsx +160 -0
- package/switch/Switch.test.js +98 -0
- package/switch/types.d.ts +62 -0
- package/switch/types.js +5 -0
- package/table/Table.d.ts +4 -0
- package/{dist/table → table}/Table.js +12 -26
- package/table/Table.stories.jsx +277 -0
- package/table/Table.test.js +26 -0
- package/table/types.d.ts +21 -0
- package/table/types.js +5 -0
- package/tabs/Tabs.d.ts +4 -0
- package/tabs/Tabs.js +211 -0
- package/tabs/Tabs.stories.tsx +118 -0
- package/tabs/Tabs.test.js +140 -0
- package/tabs/types.d.ts +82 -0
- package/tabs/types.js +5 -0
- package/tag/Tag.d.ts +4 -0
- package/tag/Tag.js +183 -0
- package/tag/Tag.stories.tsx +142 -0
- package/tag/Tag.test.js +60 -0
- package/tag/types.d.ts +69 -0
- package/tag/types.js +5 -0
- package/text/Text.d.ts +7 -0
- package/text/Text.js +30 -0
- package/text/Text.stories.tsx +19 -0
- package/text-input/TextInput.d.ts +4 -0
- package/text-input/TextInput.js +796 -0
- package/text-input/TextInput.stories.tsx +474 -0
- package/text-input/TextInput.test.js +1712 -0
- package/text-input/types.d.ts +166 -0
- package/text-input/types.js +5 -0
- package/textarea/Textarea.d.ts +4 -0
- package/{dist/new-textarea/NewTextarea.js → textarea/Textarea.js} +95 -155
- package/textarea/Textarea.stories.jsx +157 -0
- package/textarea/Textarea.test.js +437 -0
- package/textarea/types.d.ts +137 -0
- package/textarea/types.js +5 -0
- package/toggle-group/ToggleGroup.d.ts +4 -0
- package/toggle-group/ToggleGroup.js +215 -0
- package/toggle-group/ToggleGroup.stories.tsx +173 -0
- package/toggle-group/ToggleGroup.test.js +156 -0
- package/toggle-group/types.d.ts +105 -0
- package/toggle-group/types.js +5 -0
- package/useTheme.d.ts +2 -0
- package/{dist/useTheme.js → useTheme.js} +2 -2
- package/wizard/Wizard.d.ts +4 -0
- package/wizard/Wizard.js +290 -0
- package/wizard/Wizard.stories.tsx +214 -0
- package/wizard/Wizard.test.js +141 -0
- package/wizard/types.d.ts +64 -0
- package/wizard/types.js +5 -0
- package/README.md +0 -66
- package/babel.config.js +0 -8
- package/dist/BackgroundColorContext.js +0 -46
- package/dist/ThemeContext.js +0 -240
- package/dist/accordion/Accordion.js +0 -353
- package/dist/accordion-group/AccordionGroup.js +0 -186
- package/dist/badge/Badge.js +0 -63
- package/dist/card/Card.js +0 -254
- package/dist/checkbox/Checkbox.stories.js +0 -144
- package/dist/checkbox/readme.md +0 -116
- package/dist/chip/Chip.js +0 -265
- package/dist/date/Date.js +0 -381
- package/dist/date/Date.stories.js +0 -205
- package/dist/date/readme.md +0 -73
- package/dist/dialog/Dialog.js +0 -218
- package/dist/footer/Footer.js +0 -395
- package/dist/footer/Footer.stories.js +0 -94
- package/dist/footer/dxc_logo.svg +0 -15
- package/dist/footer/readme.md +0 -41
- package/dist/header/Header.js +0 -403
- package/dist/header/Header.stories.js +0 -176
- package/dist/header/close_icon.svg +0 -1
- package/dist/header/dxc_logo_black.svg +0 -8
- package/dist/header/hamb_menu_black.svg +0 -1
- package/dist/header/hamb_menu_white.svg +0 -1
- package/dist/header/readme.md +0 -33
- package/dist/input-text/InputText.js +0 -707
- package/dist/input-text/InputText.stories.js +0 -209
- package/dist/input-text/error.svg +0 -1
- package/dist/input-text/readme.md +0 -91
- package/dist/layout/ApplicationLayout.js +0 -331
- package/dist/layout/facebook.svg +0 -45
- package/dist/layout/linkedin.svg +0 -50
- package/dist/layout/twitter.svg +0 -53
- package/dist/link/readme.md +0 -51
- package/dist/new-date/NewDate.js +0 -403
- package/dist/new-input-text/NewInputText.js +0 -961
- package/dist/number/Number.js +0 -138
- package/dist/paginator/Paginator.js +0 -289
- package/dist/paginator/images/next.svg +0 -3
- package/dist/paginator/images/nextPage.svg +0 -3
- package/dist/paginator/images/previous.svg +0 -3
- package/dist/paginator/images/previousPage.svg +0 -3
- package/dist/paginator/readme.md +0 -50
- package/dist/password/styles.css +0 -3
- package/dist/progress-bar/ProgressBar.stories.js +0 -280
- package/dist/progress-bar/readme.md +0 -63
- package/dist/radio/Radio.stories.js +0 -166
- package/dist/radio/readme.md +0 -70
- package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
- package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
- package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
- package/dist/select/Select.js +0 -585
- package/dist/select/Select.stories.js +0 -235
- package/dist/select/readme.md +0 -72
- package/dist/sidenav/Sidenav.js +0 -177
- package/dist/slider/Slider.js +0 -319
- package/dist/slider/Slider.stories.js +0 -241
- package/dist/slider/readme.md +0 -64
- package/dist/spinner/Spinner.js +0 -381
- package/dist/spinner/Spinner.stories.js +0 -183
- package/dist/spinner/readme.md +0 -65
- package/dist/switch/Switch.js +0 -222
- package/dist/switch/Switch.stories.js +0 -134
- package/dist/switch/readme.md +0 -133
- package/dist/tabs/Tabs.js +0 -343
- package/dist/tabs/Tabs.stories.js +0 -130
- package/dist/tabs/readme.md +0 -78
- package/dist/tabs-for-sections/TabsForSections.js +0 -92
- package/dist/tabs-for-sections/readme.md +0 -78
- package/dist/tag/Tag.js +0 -288
- package/dist/textarea/Textarea.js +0 -264
- package/dist/toggle/Toggle.js +0 -220
- package/dist/toggle/Toggle.stories.js +0 -297
- package/dist/toggle/readme.md +0 -80
- package/dist/toggle-group/ToggleGroup.js +0 -223
- package/dist/upload/Upload.js +0 -205
- package/dist/upload/Upload.stories.js +0 -72
- package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
- package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
- package/dist/upload/buttons-upload/upload-button.svg +0 -1
- package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
- package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
- package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
- package/dist/upload/file-upload/FileToUpload.js +0 -184
- package/dist/upload/file-upload/audio-icon.svg +0 -4
- package/dist/upload/file-upload/close.svg +0 -4
- package/dist/upload/file-upload/file-icon.svg +0 -4
- package/dist/upload/file-upload/video-icon.svg +0 -4
- package/dist/upload/files-upload/FilesToUpload.js +0 -123
- package/dist/upload/readme.md +0 -37
- package/dist/upload/transaction/Transaction.js +0 -175
- package/dist/upload/transaction/audio-icon-err.svg +0 -4
- package/dist/upload/transaction/audio-icon.svg +0 -4
- package/dist/upload/transaction/error-icon.svg +0 -4
- package/dist/upload/transaction/file-icon-err.svg +0 -4
- package/dist/upload/transaction/file-icon.svg +0 -4
- package/dist/upload/transaction/image-icon-err.svg +0 -4
- package/dist/upload/transaction/image-icon.svg +0 -4
- package/dist/upload/transaction/success-icon.svg +0 -4
- package/dist/upload/transaction/video-icon-err.svg +0 -4
- package/dist/upload/transaction/video-icon.svg +0 -4
- package/dist/upload/transactions/Transactions.js +0 -138
- package/dist/wizard/Wizard.js +0 -411
- package/dist/wizard/invalid_icon.svg +0 -5
- package/dist/wizard/valid_icon.svg +0 -5
- package/dist/wizard/validation-wrong.svg +0 -6
- package/test/Accordion.test.js +0 -33
- package/test/AccordionGroup.test.js +0 -125
- package/test/Alert.test.js +0 -53
- package/test/Box.test.js +0 -10
- package/test/Button.test.js +0 -18
- package/test/Card.test.js +0 -30
- package/test/Checkbox.test.js +0 -45
- package/test/Chip.test.js +0 -25
- package/test/Date.test.js +0 -393
- package/test/Dialog.test.js +0 -23
- package/test/Dropdown.test.js +0 -145
- package/test/Footer.test.js +0 -99
- package/test/Header.test.js +0 -39
- package/test/Heading.test.js +0 -35
- package/test/InputText.test.js +0 -240
- package/test/Link.test.js +0 -43
- package/test/NewDate.test.js +0 -203
- package/test/NewInputText.test.js +0 -817
- package/test/NewTextarea.test.js +0 -201
- package/test/Number.test.js +0 -241
- package/test/Paginator.test.js +0 -177
- package/test/Password.test.js +0 -76
- package/test/ProgressBar.test.js +0 -35
- package/test/Radio.test.js +0 -37
- package/test/ResultsetTable.test.js +0 -330
- package/test/Select.test.js +0 -189
- package/test/Sidenav.test.js +0 -45
- package/test/Slider.test.js +0 -82
- package/test/Spinner.test.js +0 -32
- package/test/Switch.test.js +0 -45
- package/test/Table.test.js +0 -36
- package/test/Tabs.test.js +0 -109
- package/test/TabsForSections.test.js +0 -34
- package/test/Tag.test.js +0 -32
- package/test/TextArea.test.js +0 -52
- package/test/ToggleGroup.test.js +0 -81
- package/test/Upload.test.js +0 -60
- package/test/Wizard.test.js +0 -130
- package/test/mocks/pngMock.js +0 -1
- package/test/mocks/svgMock.js +0 -1
|
@@ -1,209 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
6
|
-
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
|
|
9
|
-
var _react2 = require("@storybook/react");
|
|
10
|
-
|
|
11
|
-
var _addonActions = require("@storybook/addon-actions");
|
|
12
|
-
|
|
13
|
-
var _addonKnobs = require("@storybook/addon-knobs");
|
|
14
|
-
|
|
15
|
-
var _amazon = _interopRequireDefault(require("../../.storybook/public/amazon.svg"));
|
|
16
|
-
|
|
17
|
-
var _readme = _interopRequireDefault(require("./readme.md"));
|
|
18
|
-
|
|
19
|
-
var _InputText = _interopRequireDefault(require("./InputText"));
|
|
20
|
-
|
|
21
|
-
var onChange = (0, _addonActions.action)("onChange");
|
|
22
|
-
|
|
23
|
-
onChange.toString = function () {
|
|
24
|
-
return "onChangeHandler";
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
var onBlur = (0, _addonActions.action)("onBlur");
|
|
28
|
-
|
|
29
|
-
onBlur.toString = function () {
|
|
30
|
-
return "onBlurHandler";
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
var onClickIcon = (0, _addonActions.action)("onClickIcon");
|
|
34
|
-
|
|
35
|
-
onClickIcon.toString = function () {
|
|
36
|
-
return "onClickIconHandler";
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
(0, _react2.storiesOf)("Form Components|Text", module).add("Component", function () {
|
|
40
|
-
return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_InputText["default"], {
|
|
41
|
-
disabled: false,
|
|
42
|
-
label: "Normal Input",
|
|
43
|
-
error: false,
|
|
44
|
-
value: "Test Value",
|
|
45
|
-
onChange: onChange,
|
|
46
|
-
onBlur: onBlur,
|
|
47
|
-
required: true,
|
|
48
|
-
assistiveText: "Assistive Text Here"
|
|
49
|
-
}), _react["default"].createElement(_InputText["default"], {
|
|
50
|
-
disabled: false,
|
|
51
|
-
label: "With Assistive Text",
|
|
52
|
-
assistiveText: "Assistive Text Here",
|
|
53
|
-
error: true,
|
|
54
|
-
onChange: onChange,
|
|
55
|
-
onBlur: onBlur,
|
|
56
|
-
required: true
|
|
57
|
-
}), _react["default"].createElement(_InputText["default"], {
|
|
58
|
-
disabled: false,
|
|
59
|
-
label: "With Prefix text",
|
|
60
|
-
prefijo: "Kg",
|
|
61
|
-
onChange: onChange,
|
|
62
|
-
onBlur: onBlur,
|
|
63
|
-
assistiveText: "Assistive Text Here"
|
|
64
|
-
}), _react["default"].createElement(_InputText["default"], {
|
|
65
|
-
disabled: true,
|
|
66
|
-
label: "With Sufix text",
|
|
67
|
-
sufix: "\u20AC",
|
|
68
|
-
onChange: onChange,
|
|
69
|
-
onBlur: onBlur
|
|
70
|
-
}), _react["default"].createElement(_InputText["default"], {
|
|
71
|
-
disabled: true,
|
|
72
|
-
label: "With Prefix icon",
|
|
73
|
-
prefijoIconSrc: _amazon["default"],
|
|
74
|
-
onChange: onChange,
|
|
75
|
-
onBlur: onBlur,
|
|
76
|
-
onClickIcon: onClickIcon
|
|
77
|
-
}), _react["default"].createElement(_InputText["default"], {
|
|
78
|
-
disabled: true,
|
|
79
|
-
label: "With Sufix icon",
|
|
80
|
-
sufixIconSrc: _amazon["default"],
|
|
81
|
-
onChange: onChange,
|
|
82
|
-
onBlur: onBlur,
|
|
83
|
-
onClickIcon: onClickIcon
|
|
84
|
-
}), _react["default"].createElement(_InputText["default"], {
|
|
85
|
-
disabled: false,
|
|
86
|
-
label: "With Sufix icon",
|
|
87
|
-
sufixIconSrc: _amazon["default"],
|
|
88
|
-
onChange: onChange,
|
|
89
|
-
onBlur: onBlur,
|
|
90
|
-
onClickIcon: onClickIcon
|
|
91
|
-
}), _react["default"].createElement(_InputText["default"], {
|
|
92
|
-
disabled: false,
|
|
93
|
-
label: "Multiline",
|
|
94
|
-
multiline: true,
|
|
95
|
-
onChange: onChange,
|
|
96
|
-
onBlur: onBlur,
|
|
97
|
-
onClickIcon: onClickIcon
|
|
98
|
-
})), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
|
|
99
|
-
style: {
|
|
100
|
-
background: "black"
|
|
101
|
-
}
|
|
102
|
-
}, _react["default"].createElement(_InputText["default"], {
|
|
103
|
-
disabled: false,
|
|
104
|
-
theme: "dark",
|
|
105
|
-
label: "Normal Input",
|
|
106
|
-
error: false,
|
|
107
|
-
value: "Test Value",
|
|
108
|
-
onChange: onChange,
|
|
109
|
-
onBlur: onBlur,
|
|
110
|
-
required: true,
|
|
111
|
-
assistiveText: "Assistive Text Here"
|
|
112
|
-
}), _react["default"].createElement(_InputText["default"], {
|
|
113
|
-
disabled: false,
|
|
114
|
-
theme: "dark",
|
|
115
|
-
label: "With Assistive Text",
|
|
116
|
-
assistiveText: "Assistive Text Here",
|
|
117
|
-
error: true,
|
|
118
|
-
onChange: onChange,
|
|
119
|
-
onBlur: onBlur,
|
|
120
|
-
required: true
|
|
121
|
-
}), _react["default"].createElement(_InputText["default"], {
|
|
122
|
-
disabled: false,
|
|
123
|
-
theme: "dark",
|
|
124
|
-
label: "With Prefix text",
|
|
125
|
-
prefijo: "Kg",
|
|
126
|
-
onChange: onChange,
|
|
127
|
-
onBlur: onBlur,
|
|
128
|
-
assistiveText: "Assistive Text Here"
|
|
129
|
-
}), _react["default"].createElement(_InputText["default"], {
|
|
130
|
-
disabled: true,
|
|
131
|
-
label: "With Sufix text",
|
|
132
|
-
sufix: "\u20AC",
|
|
133
|
-
theme: "dark",
|
|
134
|
-
onChange: onChange,
|
|
135
|
-
onBlur: onBlur
|
|
136
|
-
}), _react["default"].createElement(_InputText["default"], {
|
|
137
|
-
disabled: false,
|
|
138
|
-
theme: "dark",
|
|
139
|
-
label: "With Prefix icon",
|
|
140
|
-
prefijoIconSrc: _amazon["default"],
|
|
141
|
-
onChange: onChange,
|
|
142
|
-
onBlur: onBlur,
|
|
143
|
-
onClickIcon: onClickIcon
|
|
144
|
-
}), _react["default"].createElement(_InputText["default"], {
|
|
145
|
-
disabled: false,
|
|
146
|
-
theme: "dark",
|
|
147
|
-
label: "With Sufix icon",
|
|
148
|
-
sufixIconSrc: _amazon["default"],
|
|
149
|
-
onChange: onChange,
|
|
150
|
-
onBlur: onBlur,
|
|
151
|
-
onClickIcon: onClickIcon
|
|
152
|
-
}), _react["default"].createElement(_InputText["default"], {
|
|
153
|
-
disabled: false,
|
|
154
|
-
theme: "dark",
|
|
155
|
-
label: "With Sufix icon",
|
|
156
|
-
sufixIconSrc: _amazon["default"],
|
|
157
|
-
onChange: onChange,
|
|
158
|
-
onBlur: onBlur,
|
|
159
|
-
onClickIcon: onClickIcon
|
|
160
|
-
}), _react["default"].createElement(_InputText["default"], {
|
|
161
|
-
disabled: false,
|
|
162
|
-
label: "Multiline",
|
|
163
|
-
multiline: true,
|
|
164
|
-
sufix: "\u20AC",
|
|
165
|
-
prefijo: "Kg",
|
|
166
|
-
theme: "dark",
|
|
167
|
-
onChange: onChange,
|
|
168
|
-
onBlur: onBlur,
|
|
169
|
-
onClickIcon: onClickIcon
|
|
170
|
-
})));
|
|
171
|
-
}, {
|
|
172
|
-
notes: {
|
|
173
|
-
markdown: _readme["default"]
|
|
174
|
-
}
|
|
175
|
-
});
|
|
176
|
-
|
|
177
|
-
var knobProps = function knobProps() {
|
|
178
|
-
return {
|
|
179
|
-
label: (0, _addonKnobs.text)("Label", "Test Label"),
|
|
180
|
-
theme: (0, _addonKnobs.select)("Theme", {
|
|
181
|
-
light: "light",
|
|
182
|
-
dark: "dark"
|
|
183
|
-
}, "light"),
|
|
184
|
-
assistiveText: (0, _addonKnobs.text)("Assistive text", "Helper text"),
|
|
185
|
-
disabled: (0, _addonKnobs["boolean"])("Disabled", false),
|
|
186
|
-
prefijo: (0, _addonKnobs.text)("Prefix word", ""),
|
|
187
|
-
sufix: (0, _addonKnobs.text)("Sufix word", ""),
|
|
188
|
-
required: (0, _addonKnobs["boolean"])("Required", false),
|
|
189
|
-
error: (0, _addonKnobs["boolean"])("Error", false),
|
|
190
|
-
multiline: (0, _addonKnobs["boolean"])("Multiline", false)
|
|
191
|
-
};
|
|
192
|
-
};
|
|
193
|
-
|
|
194
|
-
(0, _react2.storiesOf)("Form Components|Text", module).add("Knobs example", function () {
|
|
195
|
-
var props = knobProps();
|
|
196
|
-
return _react["default"].createElement("div", {
|
|
197
|
-
style: {
|
|
198
|
-
background: props.theme === "dark" && "black" || "transparent"
|
|
199
|
-
}
|
|
200
|
-
}, _react["default"].createElement(_InputText["default"], (0, _extends2["default"])({}, props, {
|
|
201
|
-
onChange: onChange,
|
|
202
|
-
onBlur: onBlur,
|
|
203
|
-
onClickIcon: onClickIcon
|
|
204
|
-
})));
|
|
205
|
-
}, {
|
|
206
|
-
notes: {
|
|
207
|
-
markdown: _readme["default"]
|
|
208
|
-
}
|
|
209
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" style=""><rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"/><g class="currentLayer" style=""><title>Layer 1</title><path d="M0 0h24v24H0V0z" fill="transparent" id="svg_1" class="" stroke="transparent" stroke-opacity="1" fill-opacity="1"/><path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" id="svg_2" class="selected" stroke="#eb1a1a" stroke-opacity="1" fill="#FF6161" fill-opacity="1"/></g></svg>
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
# DXC Input Text Component
|
|
2
|
-
|
|
3
|
-
## Props
|
|
4
|
-
|
|
5
|
-
<table>
|
|
6
|
-
<tr style="background-color: grey">
|
|
7
|
-
<td>Name</td>
|
|
8
|
-
<td>Default</td>
|
|
9
|
-
<td>Description</td>
|
|
10
|
-
</tr>
|
|
11
|
-
<tr>
|
|
12
|
-
<td>value: string</td>
|
|
13
|
-
<td><code></code></td>
|
|
14
|
-
<td>The value of the input element.</td>
|
|
15
|
-
</tr>
|
|
16
|
-
<tr>
|
|
17
|
-
<td>label: string</td>
|
|
18
|
-
<td></td>
|
|
19
|
-
<td>Text to be placed next to the input.</td>
|
|
20
|
-
</tr>
|
|
21
|
-
<tr>
|
|
22
|
-
<td>assistiveText: string</td>
|
|
23
|
-
<td></td>
|
|
24
|
-
<td>Assistive text to be placed at the bottom of the input.</td>
|
|
25
|
-
</tr>
|
|
26
|
-
<tr>
|
|
27
|
-
<td>prefix: string</td>
|
|
28
|
-
<td></td>
|
|
29
|
-
<td>A prefix to be placed before the input value. Use prefixIconSrc in case the prefix needs to be an icon.</td>
|
|
30
|
-
</tr>
|
|
31
|
-
<tr>
|
|
32
|
-
<td>suffix: string</td>
|
|
33
|
-
<td></td>
|
|
34
|
-
<td>A suffix to be placed after the input value. Use suffixIconSrc in case the suffix needs to be an icon.</td>
|
|
35
|
-
</tr>
|
|
36
|
-
<tr>
|
|
37
|
-
<td>prefixIconSrc: string</td>
|
|
38
|
-
<td></td>
|
|
39
|
-
<td>The path of an icon to be placed before the input value.</td>
|
|
40
|
-
</tr>
|
|
41
|
-
<tr>
|
|
42
|
-
<td>suffixIconSrc: string</td>
|
|
43
|
-
<td></td>
|
|
44
|
-
<td>The path of an icon to be placed after the input value.</td>
|
|
45
|
-
</tr>
|
|
46
|
-
<tr>
|
|
47
|
-
<td>theme: 'light' | 'dark'</td>
|
|
48
|
-
<td><code>'light'</code></td>
|
|
49
|
-
<td>Uses one of the available component themes.</td>
|
|
50
|
-
</tr>
|
|
51
|
-
<tr>
|
|
52
|
-
<td>name: string</td>
|
|
53
|
-
<td></td>
|
|
54
|
-
<td>Name attribute of the input element.</td>
|
|
55
|
-
</tr>
|
|
56
|
-
<tr>
|
|
57
|
-
<td>disabled: boolean</td>
|
|
58
|
-
<td><code>false</code></td>
|
|
59
|
-
<td>If true, the component will be disabled.</td>
|
|
60
|
-
</tr>
|
|
61
|
-
<tr>
|
|
62
|
-
<td>required: boolean</td>
|
|
63
|
-
<td><code>false</code></td>
|
|
64
|
-
<td>If true, the input will change its appearence, showing that the value is required.</td>
|
|
65
|
-
</tr>
|
|
66
|
-
<tr>
|
|
67
|
-
<td>invalid: boolean</td>
|
|
68
|
-
<td><code>false</code></td>
|
|
69
|
-
<td>If true, the input will change its appearence, showing that the value is valid.</td>
|
|
70
|
-
</tr>
|
|
71
|
-
<tr>
|
|
72
|
-
<td>multiline: boolean</td>
|
|
73
|
-
<td><code>false</code></td>
|
|
74
|
-
<td>If true, a resizable text area will be displayed.</td>
|
|
75
|
-
</tr>
|
|
76
|
-
<tr>
|
|
77
|
-
<td>onChange: function</td>
|
|
78
|
-
<td></td>
|
|
79
|
-
<td>This function will be called when the user changes the value of the input. The new value will be passed as a parameter.</td>
|
|
80
|
-
</tr>
|
|
81
|
-
<tr>
|
|
82
|
-
<td>onBlur: function</td>
|
|
83
|
-
<td></td>
|
|
84
|
-
<td>This function will be called when the focus moves away from the input. The input value will be passed as a parameter.</td>
|
|
85
|
-
</tr>
|
|
86
|
-
<tr>
|
|
87
|
-
<td>onClickIcon: function</td>
|
|
88
|
-
<td></td>
|
|
89
|
-
<td>This function will be called when either of the two icons, prefixIcon or sufixIcon, is clicked.</td>
|
|
90
|
-
</tr>
|
|
91
|
-
</table>
|
|
@@ -1,331 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
|
-
|
|
7
|
-
Object.defineProperty(exports, "__esModule", {
|
|
8
|
-
value: true
|
|
9
|
-
});
|
|
10
|
-
exports["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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
17
|
-
|
|
18
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
-
|
|
20
|
-
var _main = require("../main");
|
|
21
|
-
|
|
22
|
-
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
23
|
-
|
|
24
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
25
|
-
|
|
26
|
-
var _variables = require("../common/variables.js");
|
|
27
|
-
|
|
28
|
-
var _linkedin = _interopRequireDefault(require("./linkedin.svg"));
|
|
29
|
-
|
|
30
|
-
var _twitter = _interopRequireDefault(require("./twitter.svg"));
|
|
31
|
-
|
|
32
|
-
var _facebook = _interopRequireDefault(require("./facebook.svg"));
|
|
33
|
-
|
|
34
|
-
var _useTheme = _interopRequireDefault(require("../useTheme.js"));
|
|
35
|
-
|
|
36
|
-
function _templateObject10() {
|
|
37
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: sticky;\n top: 45vh;\n width: 42px;\n min-height: 42px;\n background-color: ", ";\n border-radius: 50%;\n transform: ", ";\n transition: transform 0.4s ease-in-out;\n z-index: 1250;\n cursor: pointer;\n & > svg {\n fill: ", ";\n }\n"]);
|
|
38
|
-
|
|
39
|
-
_templateObject10 = function _templateObject10() {
|
|
40
|
-
return data;
|
|
41
|
-
};
|
|
42
|
-
|
|
43
|
-
return data;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
function _templateObject9() {
|
|
47
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n height: calc(100vh - 64px);\n left: 279px;\n"]);
|
|
48
|
-
|
|
49
|
-
_templateObject9 = function _templateObject9() {
|
|
50
|
-
return data;
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
return data;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
function _templateObject8() {
|
|
57
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n z-index: 1200;\n transform: ", ";\n transition: transform 0.4s ease-in-out;\n height: calc(100vh - 64px);\n position: sticky;\n top: 64px;\n"]);
|
|
58
|
-
|
|
59
|
-
_templateObject8 = function _templateObject8() {
|
|
60
|
-
return data;
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
return data;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
function _templateObject7() {
|
|
67
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n flex-grow: 1;\n position: relative;\n min-height: calc(100vh - 184px);\n margin-left: ", ";\n transition: margin 0.4s ease-in-out;\n"]);
|
|
68
|
-
|
|
69
|
-
_templateObject7 = function _templateObject7() {
|
|
70
|
-
return data;
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
return data;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
function _templateObject6() {
|
|
77
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: ", ";\n transition: margin 0.4s ease-in-out;\n"]);
|
|
78
|
-
|
|
79
|
-
_templateObject6 = function _templateObject6() {
|
|
80
|
-
return data;
|
|
81
|
-
};
|
|
82
|
-
|
|
83
|
-
return data;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
function _templateObject5() {
|
|
87
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n min-width: 0;\n display: flex;\n flex-direction: column;\n"]);
|
|
88
|
-
|
|
89
|
-
_templateObject5 = function _templateObject5() {
|
|
90
|
-
return data;
|
|
91
|
-
};
|
|
92
|
-
|
|
93
|
-
return data;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
function _templateObject4() {
|
|
97
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex: 1 1 auto;\n align-items: flex-start;\n"]);
|
|
98
|
-
|
|
99
|
-
_templateObject4 = function _templateObject4() {
|
|
100
|
-
return data;
|
|
101
|
-
};
|
|
102
|
-
|
|
103
|
-
return data;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
function _templateObject3() {
|
|
107
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n flex: 1;\n display: flex;\n flex-direction: column;\n"]);
|
|
108
|
-
|
|
109
|
-
_templateObject3 = function _templateObject3() {
|
|
110
|
-
return data;
|
|
111
|
-
};
|
|
112
|
-
|
|
113
|
-
return data;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
function _templateObject2() {
|
|
117
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 1250;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n"]);
|
|
118
|
-
|
|
119
|
-
_templateObject2 = function _templateObject2() {
|
|
120
|
-
return data;
|
|
121
|
-
};
|
|
122
|
-
|
|
123
|
-
return data;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
function _templateObject() {
|
|
127
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 64px;\n bottom: 0;\n left: 0;\n right:0;\n"]);
|
|
128
|
-
|
|
129
|
-
_templateObject = function _templateObject() {
|
|
130
|
-
return data;
|
|
131
|
-
};
|
|
132
|
-
|
|
133
|
-
return data;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
var year = new Date().getFullYear();
|
|
137
|
-
|
|
138
|
-
var Header = function Header(_ref) {
|
|
139
|
-
var children = _ref.children;
|
|
140
|
-
return _react["default"].createElement(_react["default"].Fragment, null, children);
|
|
141
|
-
};
|
|
142
|
-
|
|
143
|
-
var Main = function Main(_ref2) {
|
|
144
|
-
var children = _ref2.children;
|
|
145
|
-
return _react["default"].createElement(_react["default"].Fragment, null, children);
|
|
146
|
-
};
|
|
147
|
-
|
|
148
|
-
var Footer = function Footer(_ref3) {
|
|
149
|
-
var children = _ref3.children;
|
|
150
|
-
return _react["default"].createElement(_react["default"].Fragment, null, children);
|
|
151
|
-
};
|
|
152
|
-
|
|
153
|
-
var SideNav = function SideNav(props) {
|
|
154
|
-
var displayArrow = props.displayArrow,
|
|
155
|
-
mode = props.mode,
|
|
156
|
-
childProps = (0, _objectWithoutProperties2["default"])(props, ["displayArrow", "mode"]);
|
|
157
|
-
return _react["default"].createElement(_main.DxcSidenav, childProps, childProps.children);
|
|
158
|
-
};
|
|
159
|
-
|
|
160
|
-
SideNav.propTypes = {
|
|
161
|
-
mode: _propTypes["default"].oneOf(["overlay", "push", ""]),
|
|
162
|
-
displayArrow: _propTypes["default"].bool,
|
|
163
|
-
padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
|
|
164
|
-
top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
165
|
-
bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
166
|
-
left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
167
|
-
right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
|
|
168
|
-
})])
|
|
169
|
-
};
|
|
170
|
-
|
|
171
|
-
var defaultFooter = function defaultFooter() {
|
|
172
|
-
return _react["default"].createElement(_main.DxcFooter, {
|
|
173
|
-
copyright: "\xA9 DXC Technology ".concat(year, "\u200B\u200B\u200B\u200B. All rights reserved."),
|
|
174
|
-
bottomLinks: [{
|
|
175
|
-
href: "https://www.linkedin.com/company/dxctechnology",
|
|
176
|
-
text: "Linkedin"
|
|
177
|
-
}, {
|
|
178
|
-
href: "https://twitter.com/dxctechnology",
|
|
179
|
-
text: "Twitter"
|
|
180
|
-
}, {
|
|
181
|
-
href: "https://www.facebook.com/DXCTechnology/",
|
|
182
|
-
text: "Facebook"
|
|
183
|
-
}],
|
|
184
|
-
socialLinks: [{
|
|
185
|
-
href: "https://www.linkedin.com/company/dxctechnology",
|
|
186
|
-
logoSrc: _linkedin["default"]
|
|
187
|
-
}, {
|
|
188
|
-
href: "https://twitter.com/dxctechnology",
|
|
189
|
-
logoSrc: _twitter["default"]
|
|
190
|
-
}, {
|
|
191
|
-
href: "https://www.facebook.com/DXCTechnology/",
|
|
192
|
-
logoSrc: _facebook["default"]
|
|
193
|
-
}]
|
|
194
|
-
});
|
|
195
|
-
};
|
|
196
|
-
|
|
197
|
-
var defaultHeader = function defaultHeader() {
|
|
198
|
-
return _react["default"].createElement(_main.DxcHeader, {
|
|
199
|
-
underlined: true
|
|
200
|
-
});
|
|
201
|
-
};
|
|
202
|
-
|
|
203
|
-
var childTypeExists = function childTypeExists(children, childType) {
|
|
204
|
-
return children.find(function (child) {
|
|
205
|
-
return child && child.type && child.type === childType;
|
|
206
|
-
});
|
|
207
|
-
};
|
|
208
|
-
|
|
209
|
-
var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
|
|
210
|
-
var children = _ref4.children;
|
|
211
|
-
var ref = (0, _react.useRef)(null);
|
|
212
|
-
var colorsTheme = (0, _useTheme["default"])();
|
|
213
|
-
|
|
214
|
-
var _useState = (0, _react.useState)(true),
|
|
215
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
216
|
-
isSideNavVisible = _useState2[0],
|
|
217
|
-
setIsSideNavVisible = _useState2[1];
|
|
218
|
-
|
|
219
|
-
var _useState3 = (0, _react.useState)(),
|
|
220
|
-
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
221
|
-
isResponsive = _useState4[0],
|
|
222
|
-
setIsResponsive = _useState4[1];
|
|
223
|
-
|
|
224
|
-
var childrenArray = _react["default"].Children.toArray(children);
|
|
225
|
-
|
|
226
|
-
var header = childTypeExists(childrenArray, _main.DxcHeader) || childTypeExists(childrenArray, Header) || defaultHeader();
|
|
227
|
-
var footer = childTypeExists(childrenArray, _main.DxcFooter) || childTypeExists(childrenArray, Footer) || defaultFooter();
|
|
228
|
-
var sideNav = childTypeExists(childrenArray, SideNav);
|
|
229
|
-
var main = childTypeExists(childrenArray, Main);
|
|
230
|
-
var displayArrow = sideNav && sideNav.props && sideNav.props.displayArrow;
|
|
231
|
-
var sideNavMode = sideNav && sideNav.props && sideNav.props.mode;
|
|
232
|
-
|
|
233
|
-
var ArrowIcon = function ArrowIcon() {
|
|
234
|
-
return _react["default"].createElement("svg", {
|
|
235
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
236
|
-
width: "15.995",
|
|
237
|
-
height: "10.01",
|
|
238
|
-
viewBox: "0 0 15.995 10.01"
|
|
239
|
-
}, _react["default"].createElement("path", {
|
|
240
|
-
"data-testid": "arrow-to-right",
|
|
241
|
-
d: "M17.71,11.29l-4-4a1,1,0,0,0-1.42,1.42L14.59,11H3a1,1,0,0,0,0,2H14.59l-2.3,2.29a1,1,0,1,0,1.42,1.42l4-4a1.034,1.034,0,0,0,0-1.42Z",
|
|
242
|
-
transform: "translate(-2 -6.996)"
|
|
243
|
-
}));
|
|
244
|
-
};
|
|
245
|
-
|
|
246
|
-
var handleResize = function handleResize(width) {
|
|
247
|
-
if (width) {
|
|
248
|
-
if (width <= _variables.responsiveSizes.tablet ? setIsResponsive(true) : setIsResponsive(false)) ;
|
|
249
|
-
setIsSideNavVisible(true);
|
|
250
|
-
}
|
|
251
|
-
};
|
|
252
|
-
|
|
253
|
-
var handleEventListener = function handleEventListener() {
|
|
254
|
-
handleResize(ref.current.offsetWidth);
|
|
255
|
-
};
|
|
256
|
-
|
|
257
|
-
(0, _react.useEffect)(function () {
|
|
258
|
-
if (ref.current) {
|
|
259
|
-
window.addEventListener("resize", handleEventListener);
|
|
260
|
-
handleResize(ref.current.offsetWidth);
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
return function () {
|
|
264
|
-
window.removeEventListener("resize", handleEventListener);
|
|
265
|
-
};
|
|
266
|
-
}, []);
|
|
267
|
-
|
|
268
|
-
var handleSidenav = function handleSidenav() {
|
|
269
|
-
setIsSideNavVisible(!isSideNavVisible);
|
|
270
|
-
};
|
|
271
|
-
|
|
272
|
-
return _react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
273
|
-
theme: colorsTheme.sidenav
|
|
274
|
-
}, _react["default"].createElement(ApplicationLayoutContainer, {
|
|
275
|
-
ref: ref
|
|
276
|
-
}, _react["default"].createElement(HeaderContainer, null, header), _react["default"].createElement(BodyContainer, null, _react["default"].createElement(ContentContainer, null, _react["default"].createElement(SideNavArrowContainer, {
|
|
277
|
-
isSideNavVisible: isSideNavVisible
|
|
278
|
-
}, sideNav, _react["default"].createElement(ArrowContainer, null, sideNav && (displayArrow || isResponsive) && _react["default"].createElement(ArrowTrigger, {
|
|
279
|
-
tabIndex: 0,
|
|
280
|
-
onClick: handleSidenav,
|
|
281
|
-
isSideNavVisible: isSideNavVisible
|
|
282
|
-
}, _react["default"].createElement(ArrowIcon, null)))), _react["default"].createElement(MainBodyContainer, null, _react["default"].createElement(MainContent, {
|
|
283
|
-
sideNav: sideNav,
|
|
284
|
-
mode: isResponsive ? "overlay" : sideNavMode,
|
|
285
|
-
isSideNavVisible: isSideNavVisible
|
|
286
|
-
}, main), _react["default"].createElement(FooterContainer, {
|
|
287
|
-
sideNav: sideNav,
|
|
288
|
-
mode: isResponsive ? "overlay" : sideNavMode,
|
|
289
|
-
isSideNavVisible: isSideNavVisible
|
|
290
|
-
}, footer))))));
|
|
291
|
-
};
|
|
292
|
-
|
|
293
|
-
DxcApplicationLayout.Header = Header;
|
|
294
|
-
DxcApplicationLayout.Main = Main;
|
|
295
|
-
DxcApplicationLayout.Footer = Footer;
|
|
296
|
-
DxcApplicationLayout.SideNav = SideNav;
|
|
297
|
-
|
|
298
|
-
var ApplicationLayoutContainer = _styledComponents["default"].div(_templateObject());
|
|
299
|
-
|
|
300
|
-
var HeaderContainer = _styledComponents["default"].div(_templateObject2());
|
|
301
|
-
|
|
302
|
-
var BodyContainer = _styledComponents["default"].div(_templateObject3());
|
|
303
|
-
|
|
304
|
-
var ContentContainer = _styledComponents["default"].div(_templateObject4());
|
|
305
|
-
|
|
306
|
-
var MainBodyContainer = _styledComponents["default"].div(_templateObject5());
|
|
307
|
-
|
|
308
|
-
var FooterContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
|
|
309
|
-
return props.sideNav ? props.mode === "push" && !props.isSideNavVisible || props.mode === "overlay" ? "-300px" : "" : "";
|
|
310
|
-
});
|
|
311
|
-
|
|
312
|
-
var MainContent = _styledComponents["default"].div(_templateObject7(), function (props) {
|
|
313
|
-
return props.sideNav ? props.mode === "push" && props.isSideNavVisible ? "" : "-297px" : "";
|
|
314
|
-
});
|
|
315
|
-
|
|
316
|
-
var SideNavArrowContainer = _styledComponents["default"].div(_templateObject8(), function (props) {
|
|
317
|
-
return props.isSideNavVisible ? "translateX(0)" : !props.isSideNavVisible ? "translateX(-100%)" : "";
|
|
318
|
-
});
|
|
319
|
-
|
|
320
|
-
var ArrowContainer = _styledComponents["default"].div(_templateObject9());
|
|
321
|
-
|
|
322
|
-
var ArrowTrigger = _styledComponents["default"].div(_templateObject10(), function (props) {
|
|
323
|
-
return "".concat(props.theme.arrowContainerColor);
|
|
324
|
-
}, function (props) {
|
|
325
|
-
return props.isSideNavVisible ? "rotate(-180deg)" : "rotate(0deg)";
|
|
326
|
-
}, function (props) {
|
|
327
|
-
return props.theme.arrowColor;
|
|
328
|
-
});
|
|
329
|
-
|
|
330
|
-
var _default = DxcApplicationLayout;
|
|
331
|
-
exports["default"] = _default;
|
package/dist/layout/facebook.svg
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="iso-8859-1"?>
|
|
2
|
-
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
-
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
4
|
-
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
5
|
-
width="438.536px" height="438.536px" viewBox="0 0 438.536 438.536" style="enable-background:new 0 0 438.536 438.536;"
|
|
6
|
-
xml:space="preserve" fill="#FFFFFF">
|
|
7
|
-
<g>
|
|
8
|
-
<path d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
|
|
9
|
-
C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
|
|
10
|
-
h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
|
|
11
|
-
C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
|
|
12
|
-
c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
|
|
13
|
-
c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"/>
|
|
14
|
-
</g>
|
|
15
|
-
<g>
|
|
16
|
-
</g>
|
|
17
|
-
<g>
|
|
18
|
-
</g>
|
|
19
|
-
<g>
|
|
20
|
-
</g>
|
|
21
|
-
<g>
|
|
22
|
-
</g>
|
|
23
|
-
<g>
|
|
24
|
-
</g>
|
|
25
|
-
<g>
|
|
26
|
-
</g>
|
|
27
|
-
<g>
|
|
28
|
-
</g>
|
|
29
|
-
<g>
|
|
30
|
-
</g>
|
|
31
|
-
<g>
|
|
32
|
-
</g>
|
|
33
|
-
<g>
|
|
34
|
-
</g>
|
|
35
|
-
<g>
|
|
36
|
-
</g>
|
|
37
|
-
<g>
|
|
38
|
-
</g>
|
|
39
|
-
<g>
|
|
40
|
-
</g>
|
|
41
|
-
<g>
|
|
42
|
-
</g>
|
|
43
|
-
<g>
|
|
44
|
-
</g>
|
|
45
|
-
</svg>
|