@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
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import DxcLink from "./Link";
|
|
3
|
+
import Title from "../../.storybook/components/Title";
|
|
4
|
+
import ExampleContainer from "../../.storybook/components/ExampleContainer";
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
title: "Link",
|
|
8
|
+
component: DxcLink,
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
const icon = (
|
|
12
|
+
<svg viewBox="0 0 24 24" enable-background="new 0 0 24 24" fill="currentColor">
|
|
13
|
+
<g id="Bounding_Box">
|
|
14
|
+
<rect fill="none" width="24" height="24" />
|
|
15
|
+
</g>
|
|
16
|
+
<g id="Master">
|
|
17
|
+
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
|
|
18
|
+
</g>
|
|
19
|
+
</svg>
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
export const Chromatic = () => (
|
|
23
|
+
<>
|
|
24
|
+
<Title title="With anchor" theme="light" level={2} />
|
|
25
|
+
<ExampleContainer>
|
|
26
|
+
<Title title="Disabled" theme="light" level={4} />
|
|
27
|
+
<DxcLink text="Test" disabled></DxcLink>
|
|
28
|
+
<Title title="Icon before" theme="light" level={4} />
|
|
29
|
+
<DxcLink text="Test" href="https://www.google.com" icon={icon} iconPosition="before"></DxcLink>
|
|
30
|
+
<Title title="Icon after" theme="light" level={4} />
|
|
31
|
+
<DxcLink
|
|
32
|
+
text="Test"
|
|
33
|
+
href="https://www.youtube.com/"
|
|
34
|
+
icon="https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png"
|
|
35
|
+
iconPosition="after"
|
|
36
|
+
></DxcLink>
|
|
37
|
+
</ExampleContainer>
|
|
38
|
+
<ExampleContainer pseudoState="pseudo-hover">
|
|
39
|
+
<Title title="With link hovered" theme="light" level={4} />
|
|
40
|
+
<DxcLink text="Test" href="https://www.dxc.com"></DxcLink>
|
|
41
|
+
</ExampleContainer>
|
|
42
|
+
<ExampleContainer pseudoState="pseudo-focus">
|
|
43
|
+
<Title title="With link focused" theme="light" level={4} />
|
|
44
|
+
<DxcLink text="Test" href="https://www.dxc.com"></DxcLink>
|
|
45
|
+
</ExampleContainer>
|
|
46
|
+
<ExampleContainer pseudoState="pseudo-active">
|
|
47
|
+
<Title title="With link active" theme="light" level={4} />
|
|
48
|
+
<DxcLink text="Test" href="https://www.dxc.com"></DxcLink>
|
|
49
|
+
</ExampleContainer>
|
|
50
|
+
<ExampleContainer pseudoState="pseudo-visited">
|
|
51
|
+
<Title title="With link visited" theme="light" level={4} />
|
|
52
|
+
<DxcLink text="Test" href="https://www.amazon.com"></DxcLink>
|
|
53
|
+
</ExampleContainer>
|
|
54
|
+
<ExampleContainer>
|
|
55
|
+
<Title title="Inherit color" theme="light" level={4} />
|
|
56
|
+
This is a <DxcLink text="Test" inheritColor={true}></DxcLink>.
|
|
57
|
+
</ExampleContainer>
|
|
58
|
+
<ExampleContainer pseudoState="pseudo-focus">
|
|
59
|
+
<Title title="With brackets and focus" theme="light" level={4} />
|
|
60
|
+
This is a (<DxcLink text="Test" inheritColor={true}></DxcLink>).
|
|
61
|
+
</ExampleContainer>
|
|
62
|
+
<ExampleContainer pseudoState="pseudo-hover">
|
|
63
|
+
<Title title="Long text with hover" theme="light" level={4} />
|
|
64
|
+
Lorem <DxcLink text="Test" href="https://www.google.com"></DxcLink> ipsum dolor sit amet, consectetur adipiscing
|
|
65
|
+
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
|
66
|
+
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
|
|
67
|
+
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
|
|
68
|
+
in culpa qui officia deserunt mollit anim id est laborum.
|
|
69
|
+
</ExampleContainer>
|
|
70
|
+
<ExampleContainer pseudoState="pseudo-focus">
|
|
71
|
+
<Title title="Long text with focus" theme="light" level={4} />
|
|
72
|
+
Lorem <DxcLink text="Test" href="https://www.google.com"></DxcLink> ipsum dolor sit amet, consectetur adipiscing
|
|
73
|
+
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
|
74
|
+
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
|
|
75
|
+
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
|
|
76
|
+
in culpa qui officia deserunt mollit anim id est laborum.
|
|
77
|
+
</ExampleContainer>
|
|
78
|
+
<Title title="With button" theme="light" level={2} />
|
|
79
|
+
<ExampleContainer>
|
|
80
|
+
<Title title="Disabled" theme="light" level={4} />
|
|
81
|
+
<DxcLink text="Test" onClick={() => {}} disabled></DxcLink>
|
|
82
|
+
<Title title="Icon before" theme="light" level={4} />
|
|
83
|
+
<DxcLink text="Test" onClick={() => {}} href="https://www.google.com" icon={icon} iconPosition="before"></DxcLink>
|
|
84
|
+
<Title title="Icon after" theme="light" level={4} />
|
|
85
|
+
<DxcLink
|
|
86
|
+
text="Test"
|
|
87
|
+
onClick={() => {}}
|
|
88
|
+
href="https://www.youtube.com/"
|
|
89
|
+
icon={icon}
|
|
90
|
+
iconPosition="after"
|
|
91
|
+
></DxcLink>
|
|
92
|
+
</ExampleContainer>
|
|
93
|
+
<ExampleContainer pseudoState="pseudo-hover">
|
|
94
|
+
<Title title="With link hovered" theme="light" level={4} />
|
|
95
|
+
<DxcLink text="Test" onClick={() => {}} href="https://www.dxc.com"></DxcLink>
|
|
96
|
+
</ExampleContainer>
|
|
97
|
+
<ExampleContainer pseudoState="pseudo-focus">
|
|
98
|
+
<Title title="With link focused" theme="light" level={4} />
|
|
99
|
+
<DxcLink text="Test" onClick={() => {}} href="https://www.dxc.com"></DxcLink>
|
|
100
|
+
</ExampleContainer>
|
|
101
|
+
<ExampleContainer pseudoState="pseudo-active">
|
|
102
|
+
<Title title="With link active" theme="light" level={4} />
|
|
103
|
+
<DxcLink text="Test" onClick={() => {}} href="https://www.dxc.com"></DxcLink>
|
|
104
|
+
</ExampleContainer>
|
|
105
|
+
<ExampleContainer pseudoState="pseudo-visited">
|
|
106
|
+
<Title title="With link visited" theme="light" level={4} />
|
|
107
|
+
<DxcLink text="Test" onClick={() => {}} href="https://www.amazon.com"></DxcLink>
|
|
108
|
+
</ExampleContainer>
|
|
109
|
+
<ExampleContainer>
|
|
110
|
+
<Title title="Inherit color" theme="light" level={4} />
|
|
111
|
+
This is a <DxcLink text="Test" onClick={() => {}} inheritColor={true}></DxcLink>.
|
|
112
|
+
</ExampleContainer>
|
|
113
|
+
<ExampleContainer pseudoState="pseudo-focus">
|
|
114
|
+
<Title title="With brackets and focus" theme="light" level={4} />
|
|
115
|
+
This is a (<DxcLink text="Test" onClick={() => {}} inheritColor={true}></DxcLink>).
|
|
116
|
+
</ExampleContainer>
|
|
117
|
+
<ExampleContainer pseudoState="pseudo-hover">
|
|
118
|
+
<Title title="Long text with hover" theme="light" level={4} />
|
|
119
|
+
Lorem <DxcLink text="Test" onClick={() => {}} href="https://www.google.com"></DxcLink> ipsum dolor sit amet,
|
|
120
|
+
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
|
121
|
+
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
|
|
122
|
+
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
|
123
|
+
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
124
|
+
</ExampleContainer>
|
|
125
|
+
<ExampleContainer pseudoState="pseudo-focus">
|
|
126
|
+
<Title title="Long text with focus" theme="light" level={4} />
|
|
127
|
+
Lorem <DxcLink text="Test" onClick={() => {}} href="https://www.google.com"></DxcLink> ipsum dolor sit amet,
|
|
128
|
+
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
|
129
|
+
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
|
|
130
|
+
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
|
|
131
|
+
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
132
|
+
</ExampleContainer>
|
|
133
|
+
<Title title="Margins" theme="light" level={2} />
|
|
134
|
+
<ExampleContainer>
|
|
135
|
+
<Title title="Xxsmall margin" theme="light" level={4} />
|
|
136
|
+
<DxcLink text="Test" margin="xxsmall" href="https://www.facebook.com/"></DxcLink>
|
|
137
|
+
<Title title="Xsmall margin" theme="light" level={4} />
|
|
138
|
+
<DxcLink text="Test" margin="xsmall" href="https://www.linkedin.com/"></DxcLink>
|
|
139
|
+
<Title title="Small margin" theme="light" level={4} />
|
|
140
|
+
<DxcLink text="Test" margin="small" href="https://www.linkedin.com/"></DxcLink>
|
|
141
|
+
<Title title="Medium margin" theme="light" level={4} />
|
|
142
|
+
<DxcLink text="Test" margin="medium" href="https://www.linkedin.com/"></DxcLink>
|
|
143
|
+
<Title title="Large margin" theme="light" level={4} />
|
|
144
|
+
<DxcLink text="Test" margin="large" href="https://www.linkedin.com/"></DxcLink>
|
|
145
|
+
<Title title="Xlarge margin" theme="light" level={4} />
|
|
146
|
+
<DxcLink text="Test" margin="xlarge" href="https://www.linkedin.com/"></DxcLink>
|
|
147
|
+
<Title title="Xxlarge margin" theme="light" level={4} />
|
|
148
|
+
<DxcLink text="Test" margin="xxlarge" href="https://www.linkedin.com/"></DxcLink>
|
|
149
|
+
</ExampleContainer>
|
|
150
|
+
</>
|
|
151
|
+
);
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _react = _interopRequireDefault(require("react"));
|
|
6
|
+
|
|
7
|
+
var _react2 = require("@testing-library/react");
|
|
8
|
+
|
|
9
|
+
var _Link = _interopRequireDefault(require("./Link"));
|
|
10
|
+
|
|
11
|
+
describe("Link component tests", function () {
|
|
12
|
+
test("Link renders with correct text", function () {
|
|
13
|
+
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
14
|
+
text: "Link"
|
|
15
|
+
})),
|
|
16
|
+
getByText = _render.getByText;
|
|
17
|
+
|
|
18
|
+
expect(getByText("Link")).toBeTruthy();
|
|
19
|
+
});
|
|
20
|
+
test("Link renders with correct href", function () {
|
|
21
|
+
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
22
|
+
text: "Link",
|
|
23
|
+
href: "/testPage"
|
|
24
|
+
})),
|
|
25
|
+
getByRole = _render2.getByRole;
|
|
26
|
+
|
|
27
|
+
expect(getByRole("link").getAttribute("href")).toEqual("/testPage");
|
|
28
|
+
});
|
|
29
|
+
test("Link renders with correct disabled state", function () {
|
|
30
|
+
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
31
|
+
text: "Link",
|
|
32
|
+
href: "/testPage",
|
|
33
|
+
disabled: true
|
|
34
|
+
})),
|
|
35
|
+
getByText = _render3.getByText;
|
|
36
|
+
|
|
37
|
+
expect(getByText("Link").hasAttribute("href")).toBeFalsy();
|
|
38
|
+
|
|
39
|
+
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
40
|
+
text: "LinkButton",
|
|
41
|
+
onClick: function onClick() {
|
|
42
|
+
return console.log("Andorra");
|
|
43
|
+
},
|
|
44
|
+
disabled: true
|
|
45
|
+
})),
|
|
46
|
+
getByTextLinkButton = _render4.getByText;
|
|
47
|
+
|
|
48
|
+
expect(getByTextLinkButton("LinkButton").hasAttribute("onclick")).toBeFalsy();
|
|
49
|
+
});
|
|
50
|
+
test("Link open new tab", function () {
|
|
51
|
+
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
52
|
+
text: "Link",
|
|
53
|
+
href: "/testPage",
|
|
54
|
+
newWindow: true
|
|
55
|
+
})),
|
|
56
|
+
getByRole = _render5.getByRole;
|
|
57
|
+
|
|
58
|
+
expect(getByRole("link").getAttribute("target")).toEqual("_blank");
|
|
59
|
+
});
|
|
60
|
+
test("Link onClick called", function () {
|
|
61
|
+
var onClick = jest.fn();
|
|
62
|
+
|
|
63
|
+
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
64
|
+
text: "Link",
|
|
65
|
+
onClick: onClick
|
|
66
|
+
})),
|
|
67
|
+
getByText = _render6.getByText;
|
|
68
|
+
|
|
69
|
+
var link = getByText("Link");
|
|
70
|
+
|
|
71
|
+
_react2.fireEvent.click(link);
|
|
72
|
+
|
|
73
|
+
expect(onClick).toHaveBeenCalled();
|
|
74
|
+
});
|
|
75
|
+
test("Disabled link onClick not called", function () {
|
|
76
|
+
var onClick = jest.fn();
|
|
77
|
+
|
|
78
|
+
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
79
|
+
text: "Link",
|
|
80
|
+
onClick: onClick,
|
|
81
|
+
disabled: true
|
|
82
|
+
})),
|
|
83
|
+
getByText = _render7.getByText;
|
|
84
|
+
|
|
85
|
+
var link = getByText("Link");
|
|
86
|
+
|
|
87
|
+
_react2.fireEvent.click(link);
|
|
88
|
+
|
|
89
|
+
expect(onClick).toHaveBeenCalledTimes(0);
|
|
90
|
+
});
|
|
91
|
+
});
|
package/link/types.d.ts
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
|
+
declare type Margin = {
|
|
4
|
+
top?: Space;
|
|
5
|
+
bottom?: Space;
|
|
6
|
+
left?: Space;
|
|
7
|
+
right?: Space;
|
|
8
|
+
};
|
|
9
|
+
declare type LinkCommonProps = {
|
|
10
|
+
/**
|
|
11
|
+
* If true, the color is inherited from parent.
|
|
12
|
+
*/
|
|
13
|
+
inheritColor?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* If true, the link is disabled.
|
|
16
|
+
*/
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Indicates the position of the icon in the component.
|
|
20
|
+
*/
|
|
21
|
+
iconPosition?: "before" | "after";
|
|
22
|
+
/**
|
|
23
|
+
* Page to be opened when the user clicks on the link.
|
|
24
|
+
*/
|
|
25
|
+
href?: string;
|
|
26
|
+
/**
|
|
27
|
+
* If true, the page is opened in a new browser tab.
|
|
28
|
+
*/
|
|
29
|
+
newWindow?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* If defined, the link will be displayed as a button. This
|
|
32
|
+
* function will be called when the user clicks the link.
|
|
33
|
+
*/
|
|
34
|
+
onClick?: () => void;
|
|
35
|
+
/**
|
|
36
|
+
* Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
|
|
37
|
+
* You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
|
|
38
|
+
*/
|
|
39
|
+
margin?: Space | Margin;
|
|
40
|
+
/**
|
|
41
|
+
* Value of the tabindex.
|
|
42
|
+
*/
|
|
43
|
+
tabIndex?: number;
|
|
44
|
+
};
|
|
45
|
+
export declare type LinkTextProps = LinkCommonProps & {
|
|
46
|
+
/**
|
|
47
|
+
* Link text.
|
|
48
|
+
*/
|
|
49
|
+
text: string;
|
|
50
|
+
/**
|
|
51
|
+
* Element or path used as the icon that will be placed next to the link text.
|
|
52
|
+
*/
|
|
53
|
+
icon?: string | SVG;
|
|
54
|
+
};
|
|
55
|
+
export declare type LinkIconProps = LinkCommonProps & {
|
|
56
|
+
/**
|
|
57
|
+
* Link text.
|
|
58
|
+
*/
|
|
59
|
+
text?: string;
|
|
60
|
+
/**
|
|
61
|
+
* Element or path used as the icon that will be placed next to the link text.
|
|
62
|
+
*/
|
|
63
|
+
icon: string | SVG;
|
|
64
|
+
};
|
|
65
|
+
declare type Overload = {
|
|
66
|
+
(props: LinkTextProps): JSX.Element;
|
|
67
|
+
(props: LinkIconProps): JSX.Element;
|
|
68
|
+
};
|
|
69
|
+
declare type SVG = React.SVGProps<SVGSVGElement>;
|
|
70
|
+
export default Overload;
|
package/link/types.js
ADDED
package/list/List.d.ts
ADDED
package/list/List.js
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
|
|
10
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
11
|
+
|
|
12
|
+
var _react = _interopRequireDefault(require("react"));
|
|
13
|
+
|
|
14
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
15
|
+
|
|
16
|
+
var _Stack = _interopRequireDefault(require("../stack/Stack"));
|
|
17
|
+
|
|
18
|
+
var _Text = _interopRequireDefault(require("../text/Text"));
|
|
19
|
+
|
|
20
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
21
|
+
|
|
22
|
+
function List(_ref) {
|
|
23
|
+
var children = _ref.children,
|
|
24
|
+
_ref$type = _ref.type,
|
|
25
|
+
type = _ref$type === void 0 ? "disc" : _ref$type,
|
|
26
|
+
_ref$gutter = _ref.gutter,
|
|
27
|
+
gutter = _ref$gutter === void 0 ? "xxsmall" : _ref$gutter;
|
|
28
|
+
return /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
|
|
29
|
+
as: type === "number" ? "ol" : "ul",
|
|
30
|
+
gutter: gutter
|
|
31
|
+
}, _react["default"].Children.map(children, function (child, index) {
|
|
32
|
+
return /*#__PURE__*/_react["default"].createElement(ListItem, null, type === "number" ? /*#__PURE__*/_react["default"].createElement(Number, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, index + 1, ".")) : type === "square" ? /*#__PURE__*/_react["default"].createElement(Square, null) : type === "circle" ? /*#__PURE__*/_react["default"].createElement(Circle, null) : /*#__PURE__*/_react["default"].createElement(Disc, null), child);
|
|
33
|
+
}));
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
var Number = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n user-select: none;\n margin-right: 10px;\n flex-shrink: 0;\n"])));
|
|
37
|
+
|
|
38
|
+
var Square = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n background-color: black;\n width: 5px;\n height: 5px;\n flex-shrink: 0;\n margin-top: 10px;\n margin-right: 10px;\n"])));
|
|
39
|
+
|
|
40
|
+
var Circle = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n width: 5px;\n height: 5px;\n border-radius: 50%;\n border: 1px solid black;\n flex-shrink: 0;\n margin-top: 10px;\n margin-right: 10px;\n box-sizing: border-box;\n"])));
|
|
41
|
+
|
|
42
|
+
var Disc = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n background-color: black;\n width: 5px;\n height: 5px;\n border-radius: 50%;\n flex-shrink: 0;\n margin-top: 10px;\n margin-right: 10px;\n"])));
|
|
43
|
+
|
|
44
|
+
var ListItem = _styledComponents["default"].li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0px;\n padding: 0px;\n list-style: none;\n display: flex;\n"])));
|
|
45
|
+
|
|
46
|
+
var _default = List;
|
|
47
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
import Title from "../../.storybook/components/Title";
|
|
4
|
+
import DxcList from "./List";
|
|
5
|
+
import DxcText from "../text/Text";
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
title: "List",
|
|
9
|
+
component: DxcList,
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export const Chromatic = () => (
|
|
13
|
+
<>
|
|
14
|
+
<Title title="Default list" theme="light" level={4} />
|
|
15
|
+
<DxcList>
|
|
16
|
+
<DxcText>Text 1.</DxcText>
|
|
17
|
+
<DxcText>Text 2.</DxcText>
|
|
18
|
+
</DxcList>
|
|
19
|
+
<Title title="Number" theme="light" level={4} />
|
|
20
|
+
<DxcList type="number">
|
|
21
|
+
<DxcText>Text 1.</DxcText>
|
|
22
|
+
<DxcText>Text 2.</DxcText>
|
|
23
|
+
</DxcList>
|
|
24
|
+
<Title title="Square" theme="light" level={4} />
|
|
25
|
+
<DxcList type="square">
|
|
26
|
+
<DxcText>Text 1.</DxcText>
|
|
27
|
+
<DxcText>Text 2.</DxcText>
|
|
28
|
+
</DxcList>
|
|
29
|
+
<Title title="Circle" theme="light" level={4} />
|
|
30
|
+
<DxcList type="circle">
|
|
31
|
+
<DxcText>Text 1.</DxcText>
|
|
32
|
+
<DxcText>Text 2.</DxcText>
|
|
33
|
+
</DxcList>
|
|
34
|
+
<Title title="Multiple lines" theme="light" level={4} />
|
|
35
|
+
<Container>
|
|
36
|
+
<DxcList>
|
|
37
|
+
<DxcText>
|
|
38
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
39
|
+
magna aliqua.
|
|
40
|
+
</DxcText>
|
|
41
|
+
<DxcText>Text 2.</DxcText>
|
|
42
|
+
</DxcList>
|
|
43
|
+
</Container>
|
|
44
|
+
<Title title="gutter = xxxsmall" theme="light" level={4} />
|
|
45
|
+
<DxcList gutter="xxsmall">
|
|
46
|
+
<DxcText>Text 1.</DxcText>
|
|
47
|
+
<DxcText>Text 2.</DxcText>
|
|
48
|
+
</DxcList>
|
|
49
|
+
<Title title="gutter = xxsmall" theme="light" level={4} />
|
|
50
|
+
<DxcList gutter="xxsmall">
|
|
51
|
+
<DxcText>Text 1.</DxcText>
|
|
52
|
+
<DxcText>Text 2.</DxcText>
|
|
53
|
+
</DxcList>
|
|
54
|
+
<Title title="gutter = xsmall" theme="light" level={4} />
|
|
55
|
+
<DxcList gutter="xsmall">
|
|
56
|
+
<DxcText>Text 1.</DxcText>
|
|
57
|
+
<DxcText>Text 2.</DxcText>
|
|
58
|
+
</DxcList>
|
|
59
|
+
<Title title="gutter = small" theme="light" level={4} />
|
|
60
|
+
<DxcList gutter="small">
|
|
61
|
+
<DxcText>Text 1.</DxcText>
|
|
62
|
+
<DxcText>Text 2.</DxcText>
|
|
63
|
+
</DxcList>
|
|
64
|
+
<Title title="gutter = medium" theme="light" level={4} />
|
|
65
|
+
<DxcList gutter="medium">
|
|
66
|
+
<DxcText>Text 1.</DxcText>
|
|
67
|
+
<DxcText>Text 2.</DxcText>
|
|
68
|
+
</DxcList>
|
|
69
|
+
<Title title="gutter = large" theme="light" level={4} />
|
|
70
|
+
<DxcList gutter="large">
|
|
71
|
+
<DxcText>Text 1.</DxcText>
|
|
72
|
+
<DxcText>Text 2.</DxcText>
|
|
73
|
+
</DxcList>
|
|
74
|
+
<Title title="gutter = xlarge" theme="light" level={4} />
|
|
75
|
+
<DxcList gutter="xlarge">
|
|
76
|
+
<DxcText>Text 1.</DxcText>
|
|
77
|
+
<DxcText>Text 2.</DxcText>
|
|
78
|
+
</DxcList>
|
|
79
|
+
<Title title="gutter = xxlarge" theme="light" level={4} />
|
|
80
|
+
<DxcList gutter="xxlarge">
|
|
81
|
+
<DxcText>Text 1.</DxcText>
|
|
82
|
+
<DxcText>Text 2.</DxcText>
|
|
83
|
+
</DxcList>
|
|
84
|
+
<Title title="gutter = xxxlarge" theme="light" level={4} />
|
|
85
|
+
<DxcList gutter="xxxlarge">
|
|
86
|
+
<DxcText>Text 1.</DxcText>
|
|
87
|
+
<DxcText>Text 2.</DxcText>
|
|
88
|
+
</DxcList>
|
|
89
|
+
|
|
90
|
+
</>
|
|
91
|
+
);
|
|
92
|
+
|
|
93
|
+
const Container = styled.div`
|
|
94
|
+
width: 400px;
|
|
95
|
+
`;
|
package/list/types.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare type Props = {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
|
|
5
|
+
type?: "disc" | "circle" | "square" | "number";
|
|
6
|
+
};
|
|
7
|
+
export default Props;
|
package/list/types.js
ADDED
package/main.d.ts
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import DxcAlert from "./alert/Alert";
|
|
2
|
+
import DxcAccordion from "./accordion/Accordion";
|
|
3
|
+
import DxcButton from "./button/Button";
|
|
4
|
+
import DxcCard from "./card/Card";
|
|
5
|
+
import DxcCheckbox from "./checkbox/Checkbox";
|
|
6
|
+
import DxcDialog from "./dialog/Dialog";
|
|
7
|
+
import DxcDropdown from "./dropdown/Dropdown";
|
|
8
|
+
import DxcFooter from "./footer/Footer";
|
|
9
|
+
import DxcHeader from "./header/Header";
|
|
10
|
+
import DxcRadio from "./radio/Radio";
|
|
11
|
+
import DxcSlider from "./slider/Slider";
|
|
12
|
+
import DxcSwitch from "./switch/Switch";
|
|
13
|
+
import DxcTabs from "./tabs/Tabs";
|
|
14
|
+
import DxcProgressBar from "./progress-bar/ProgressBar";
|
|
15
|
+
import DxcSpinner from "./spinner/Spinner";
|
|
16
|
+
import DxcTable from "./table/Table";
|
|
17
|
+
import DxcBox from "./box/Box";
|
|
18
|
+
import DxcTag from "./tag/Tag";
|
|
19
|
+
import DxcPaginator from "./paginator/Paginator";
|
|
20
|
+
import DxcSidenav from "./sidenav/Sidenav";
|
|
21
|
+
import DxcWizard from "./wizard/Wizard";
|
|
22
|
+
import DxcLink from "./link/Link";
|
|
23
|
+
import DxcHeading from "./heading/Heading";
|
|
24
|
+
import DxcResultsetTable from "./resultsetTable/ResultsetTable";
|
|
25
|
+
import DxcChip from "./chip/Chip";
|
|
26
|
+
import DxcApplicationLayout from "./layout/ApplicationLayout";
|
|
27
|
+
import DxcToggleGroup from "./toggle-group/ToggleGroup";
|
|
28
|
+
import DxcAccordionGroup from "./accordion-group/AccordionGroup";
|
|
29
|
+
import DxcBadge from "./badge/Badge";
|
|
30
|
+
import DxcTextInput from "./text-input/TextInput";
|
|
31
|
+
import DxcPasswordInput from "./password-input/PasswordInput";
|
|
32
|
+
import DxcDateInput from "./date-input/DateInput";
|
|
33
|
+
import DxcNumberInput from "./number-input/NumberInput";
|
|
34
|
+
import DxcTextarea from "./textarea/Textarea";
|
|
35
|
+
import DxcSelect from "./select/Select";
|
|
36
|
+
import DxcFileInput from "./file-input/FileInput";
|
|
37
|
+
import DxcStack from "./stack/Stack";
|
|
38
|
+
import DxcRow from "./row/Row";
|
|
39
|
+
import DxcText from "./text/Text";
|
|
40
|
+
import DxcList from "./list/List";
|
|
41
|
+
import DxcRadioGroup from "./radio-group/RadioGroup";
|
|
42
|
+
import DxcBleed from "./bleed/Bleed";
|
|
43
|
+
import DxcInset from "./inset/Inset";
|
|
44
|
+
import DxcQuickNav from "./quick-nav/QuickNav";
|
|
45
|
+
import HalstackContext, { HalstackProvider } from "./HalstackContext";
|
|
46
|
+
import { BackgroundColorProvider } from "./BackgroundColorContext";
|
|
47
|
+
export { DxcAlert, DxcButton, DxcFooter, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcRadio, DxcHeader, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcSidenav, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcStack, DxcRow, DxcText, DxcList, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, };
|