@dxc-technology/halstack-react 0.0.0-bd47c58 → 0.0.0-bdaadec
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 +1 -10
- package/BackgroundColorContext.js +4 -21
- package/HalstackContext.d.ts +43 -138
- package/HalstackContext.js +10 -35
- package/accordion/Accordion.accessibility.test.js +71 -0
- package/accordion/Accordion.js +31 -84
- package/accordion/Accordion.stories.tsx +5 -51
- package/accordion/Accordion.test.js +18 -33
- package/accordion/types.d.ts +6 -6
- package/accordion-group/AccordionGroup.accessibility.test.js +88 -0
- package/accordion-group/AccordionGroup.d.ts +2 -3
- package/accordion-group/AccordionGroup.js +17 -44
- package/accordion-group/AccordionGroup.stories.tsx +1 -1
- package/accordion-group/AccordionGroup.test.js +42 -60
- package/accordion-group/AccordionGroupAccordion.js +11 -23
- package/accordion-group/AccordionGroupContext.d.ts +3 -0
- package/accordion-group/AccordionGroupContext.js +8 -0
- package/accordion-group/types.d.ts +7 -7
- package/action-icon/ActionIcon.accessibility.test.js +63 -0
- package/action-icon/ActionIcon.d.ts +4 -0
- package/action-icon/ActionIcon.js +48 -0
- package/action-icon/ActionIcon.stories.tsx +41 -0
- package/action-icon/ActionIcon.test.js +64 -0
- package/action-icon/types.d.ts +26 -0
- package/alert/Alert.accessibility.test.js +95 -0
- package/alert/Alert.js +29 -118
- package/alert/Alert.test.js +28 -45
- package/alert/types.d.ts +5 -5
- package/badge/Badge.accessibility.test.js +129 -0
- package/badge/Badge.d.ts +1 -1
- package/badge/Badge.js +141 -43
- package/badge/Badge.stories.tsx +210 -0
- package/badge/Badge.test.js +30 -0
- package/badge/types.d.ts +52 -3
- package/bleed/Bleed.js +13 -21
- package/bleed/types.d.ts +2 -2
- package/box/Box.accessibility.test.js +33 -0
- package/box/Box.js +11 -33
- package/box/Box.test.js +1 -6
- package/box/types.d.ts +3 -3
- package/bulleted-list/BulletedList.accessibility.test.js +107 -0
- package/bulleted-list/BulletedList.js +22 -55
- package/bulleted-list/BulletedList.stories.tsx +2 -93
- package/bulleted-list/types.d.ts +5 -5
- package/button/Button.accessibility.test.js +127 -0
- package/button/Button.js +36 -59
- package/button/Button.stories.tsx +33 -133
- package/button/Button.test.js +13 -21
- package/button/types.d.ts +5 -5
- package/card/Card.accessibility.test.js +36 -0
- package/card/Card.js +21 -44
- package/card/Card.test.js +10 -21
- package/card/types.d.ts +5 -5
- package/checkbox/Checkbox.accessibility.test.js +87 -0
- package/checkbox/Checkbox.js +85 -120
- package/checkbox/Checkbox.stories.tsx +16 -54
- package/checkbox/Checkbox.test.js +107 -63
- package/checkbox/types.d.ts +8 -4
- package/chip/Chip.accessibility.test.js +67 -0
- package/chip/Chip.js +20 -36
- package/chip/Chip.stories.tsx +5 -24
- package/chip/Chip.test.js +17 -30
- package/chip/types.d.ts +4 -4
- package/common/coreTokens.d.ts +105 -14
- package/common/coreTokens.js +40 -23
- package/common/utils.js +2 -8
- package/common/variables.d.ts +44 -139
- package/common/variables.js +55 -157
- package/container/Container.d.ts +4 -0
- package/container/Container.js +194 -0
- package/container/Container.stories.tsx +214 -0
- package/container/types.d.ts +74 -0
- package/container/types.js +5 -0
- package/contextual-menu/ContextualMenu.accessibility.test.js +86 -0
- package/contextual-menu/ContextualMenu.d.ts +7 -0
- package/contextual-menu/ContextualMenu.js +71 -0
- package/contextual-menu/ContextualMenu.stories.tsx +182 -0
- package/contextual-menu/ContextualMenu.test.js +71 -0
- package/contextual-menu/MenuItemAction.d.ts +4 -0
- package/contextual-menu/MenuItemAction.js +46 -0
- package/contextual-menu/types.d.ts +22 -0
- package/contextual-menu/types.js +5 -0
- package/date-input/Calendar.js +13 -57
- package/date-input/DateInput.accessibility.test.js +216 -0
- package/date-input/DateInput.js +50 -96
- package/date-input/DateInput.stories.tsx +11 -30
- package/date-input/DateInput.test.js +674 -701
- package/date-input/DatePicker.js +11 -42
- package/date-input/Icons.d.ts +6 -6
- package/date-input/Icons.js +6 -23
- package/date-input/YearPicker.js +8 -34
- package/date-input/types.d.ts +28 -22
- package/dialog/Dialog.accessibility.test.js +69 -0
- package/dialog/Dialog.js +13 -40
- package/dialog/Dialog.stories.tsx +170 -0
- package/dialog/Dialog.test.js +126 -188
- package/dialog/types.d.ts +18 -13
- package/divider/Divider.accessibility.test.js +33 -0
- package/divider/Divider.d.ts +4 -0
- package/divider/Divider.js +36 -0
- package/divider/Divider.stories.tsx +223 -0
- package/divider/Divider.test.js +38 -0
- package/divider/types.d.ts +21 -0
- package/divider/types.js +5 -0
- package/dropdown/Dropdown.accessibility.test.js +180 -0
- package/dropdown/Dropdown.js +59 -128
- package/dropdown/Dropdown.stories.tsx +5 -16
- package/dropdown/Dropdown.test.js +391 -378
- package/dropdown/DropdownMenu.js +8 -19
- package/dropdown/DropdownMenuItem.js +11 -20
- package/dropdown/types.d.ts +20 -24
- package/file-input/FileInput.accessibility.test.js +160 -0
- package/file-input/FileInput.js +180 -284
- package/file-input/FileInput.stories.tsx +1 -1
- package/file-input/FileInput.test.js +279 -354
- package/file-input/FileItem.js +25 -66
- package/file-input/types.d.ts +9 -9
- package/flex/Flex.js +25 -39
- package/flex/types.d.ts +6 -6
- package/footer/Footer.accessibility.test.js +117 -0
- package/footer/Footer.d.ts +1 -1
- package/footer/Footer.js +43 -68
- package/footer/Footer.stories.tsx +54 -9
- package/footer/Footer.test.js +18 -32
- package/footer/Icons.d.ts +3 -2
- package/footer/Icons.js +66 -7
- package/footer/types.d.ts +17 -17
- package/grid/Grid.js +1 -16
- package/grid/types.d.ts +10 -10
- package/header/Header.accessibility.test.js +84 -0
- package/header/Header.d.ts +1 -1
- package/header/Header.js +28 -84
- package/header/Header.test.js +12 -25
- package/header/Icons.d.ts +2 -2
- package/header/Icons.js +2 -7
- package/header/types.d.ts +7 -8
- package/heading/Heading.accessibility.test.js +33 -0
- package/heading/Heading.js +9 -31
- package/heading/Heading.test.js +70 -87
- package/heading/types.d.ts +7 -7
- package/icon/Icon.accessibility.test.js +30 -0
- package/icon/Icon.d.ts +4 -0
- package/icon/Icon.js +33 -0
- package/icon/Icon.stories.tsx +28 -0
- package/icon/types.d.ts +4 -0
- package/icon/types.js +5 -0
- package/image/Image.accessibility.test.js +56 -0
- package/image/Image.d.ts +2 -2
- package/image/Image.js +17 -32
- package/image/Image.stories.tsx +3 -1
- package/image/types.d.ts +2 -2
- package/inset/Inset.js +13 -21
- package/inset/types.d.ts +2 -2
- package/layout/ApplicationLayout.d.ts +2 -2
- package/layout/ApplicationLayout.js +26 -66
- package/layout/ApplicationLayout.stories.tsx +1 -1
- package/layout/Icons.d.ts +8 -5
- package/layout/Icons.js +49 -59
- package/layout/types.d.ts +3 -3
- package/link/Link.accessibility.test.js +112 -0
- package/link/Link.js +28 -47
- package/link/Link.stories.tsx +2 -2
- package/link/Link.test.js +23 -41
- package/link/types.d.ts +14 -14
- package/main.d.ts +7 -4
- package/main.js +32 -60
- package/nav-tabs/NavTabs.accessibility.test.js +52 -0
- package/nav-tabs/NavTabs.d.ts +1 -2
- package/nav-tabs/NavTabs.js +19 -48
- package/nav-tabs/NavTabs.stories.tsx +7 -5
- package/nav-tabs/NavTabs.test.js +38 -44
- package/nav-tabs/NavTabsContext.d.ts +3 -0
- package/nav-tabs/NavTabsContext.js +8 -0
- package/nav-tabs/Tab.js +24 -52
- package/nav-tabs/types.d.ts +9 -9
- package/number-input/NumberInput.accessibility.test.js +228 -0
- package/number-input/NumberInput.d.ts +0 -7
- package/number-input/NumberInput.js +47 -39
- package/number-input/NumberInput.stories.tsx +42 -26
- package/number-input/NumberInput.test.js +839 -575
- package/number-input/NumberInputContext.d.ts +3 -0
- package/number-input/NumberInputContext.js +8 -0
- package/number-input/types.d.ts +17 -5
- package/package.json +39 -37
- package/paginator/Icons.d.ts +5 -5
- package/paginator/Icons.js +5 -19
- package/paginator/Paginator.accessibility.test.js +79 -0
- package/paginator/Paginator.js +15 -43
- package/paginator/Paginator.test.js +224 -207
- package/paginator/types.d.ts +3 -3
- package/paragraph/Paragraph.accessibility.test.js +28 -0
- package/paragraph/Paragraph.js +3 -19
- package/paragraph/Paragraph.stories.tsx +0 -17
- package/password-input/Icons.d.ts +3 -3
- package/password-input/Icons.js +1 -5
- package/password-input/PasswordInput.accessibility.test.js +153 -0
- package/password-input/PasswordInput.js +26 -48
- package/password-input/PasswordInput.stories.tsx +1 -34
- package/password-input/PasswordInput.test.js +153 -129
- package/password-input/types.d.ts +8 -7
- package/progress-bar/ProgressBar.accessibility.test.js +35 -0
- package/progress-bar/ProgressBar.js +21 -53
- package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
- package/progress-bar/ProgressBar.test.js +35 -52
- package/progress-bar/types.d.ts +3 -3
- package/quick-nav/QuickNav.accessibility.test.js +57 -0
- package/quick-nav/QuickNav.js +4 -27
- package/quick-nav/QuickNav.stories.tsx +1 -1
- package/quick-nav/types.d.ts +10 -10
- package/radio-group/Radio.d.ts +1 -1
- package/radio-group/Radio.js +22 -54
- package/radio-group/RadioGroup.accessibility.test.js +97 -0
- package/radio-group/RadioGroup.js +37 -83
- package/radio-group/RadioGroup.stories.tsx +10 -10
- package/radio-group/RadioGroup.test.js +504 -470
- package/radio-group/types.d.ts +8 -8
- package/resultset-table/Icons.d.ts +7 -0
- package/{resultsetTable → resultset-table}/Icons.js +1 -5
- package/resultset-table/ResultsetTable.accessibility.test.js +274 -0
- package/resultset-table/ResultsetTable.d.ts +7 -0
- package/{resultsetTable → resultset-table}/ResultsetTable.js +44 -69
- package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +106 -5
- package/{resultsetTable → resultset-table}/ResultsetTable.test.js +148 -92
- package/{resultsetTable → resultset-table}/types.d.ts +44 -11
- package/resultset-table/types.js +5 -0
- package/select/Icons.d.ts +7 -7
- package/select/Icons.js +1 -5
- package/select/Listbox.js +13 -39
- package/select/Option.js +17 -27
- package/select/Select.accessibility.test.js +217 -0
- package/select/Select.js +87 -163
- package/select/Select.stories.tsx +3 -4
- package/select/Select.test.js +1946 -1804
- package/select/types.d.ts +14 -15
- package/sidenav/Icons.d.ts +4 -4
- package/sidenav/Icons.js +1 -5
- package/sidenav/Sidenav.accessibility.test.js +59 -0
- package/sidenav/Sidenav.js +29 -70
- package/sidenav/Sidenav.stories.tsx +0 -1
- package/sidenav/Sidenav.test.js +3 -10
- package/{layout → sidenav}/SidenavContext.d.ts +1 -1
- package/{layout → sidenav}/SidenavContext.js +3 -9
- package/sidenav/types.d.ts +18 -18
- package/slider/Slider.accessibility.test.js +104 -0
- package/slider/Slider.js +68 -125
- package/slider/Slider.test.js +107 -103
- package/slider/types.d.ts +4 -4
- package/spinner/Spinner.accessibility.test.js +96 -0
- package/spinner/Spinner.js +16 -54
- package/spinner/Spinner.test.js +25 -34
- package/spinner/types.d.ts +3 -3
- package/status-light/StatusLight.accessibility.test.js +157 -0
- package/status-light/StatusLight.d.ts +4 -0
- package/status-light/StatusLight.js +51 -0
- package/status-light/StatusLight.stories.tsx +74 -0
- package/status-light/StatusLight.test.js +25 -0
- package/status-light/types.d.ts +17 -0
- package/status-light/types.js +5 -0
- package/switch/Switch.accessibility.test.js +89 -0
- package/switch/Switch.js +49 -97
- package/switch/Switch.stories.tsx +0 -34
- package/switch/Switch.test.js +51 -96
- package/switch/types.d.ts +4 -4
- package/table/DropdownTheme.js +62 -0
- package/table/Table.accessibility.test.js +82 -0
- package/table/Table.d.ts +6 -2
- package/table/Table.js +76 -33
- package/table/{Table.stories.jsx → Table.stories.tsx} +297 -2
- package/table/Table.test.js +93 -6
- package/table/types.d.ts +34 -6
- package/tabs/Tab.js +17 -33
- package/tabs/Tabs.accessibility.test.js +56 -0
- package/tabs/Tabs.js +52 -129
- package/tabs/Tabs.stories.tsx +1 -1
- package/tabs/Tabs.test.js +62 -118
- package/tabs/types.d.ts +19 -19
- package/tag/Tag.accessibility.test.js +69 -0
- package/tag/Tag.js +21 -51
- package/tag/Tag.test.js +19 -30
- package/tag/types.d.ts +7 -7
- package/text-input/Suggestion.js +9 -26
- package/text-input/Suggestions.d.ts +1 -1
- package/text-input/Suggestions.js +19 -67
- package/text-input/TextInput.accessibility.test.js +321 -0
- package/text-input/TextInput.js +197 -287
- package/text-input/TextInput.stories.tsx +49 -153
- package/text-input/TextInput.test.js +1227 -1194
- package/text-input/types.d.ts +25 -17
- package/textarea/Textarea.accessibility.test.js +155 -0
- package/textarea/Textarea.js +67 -109
- package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -100
- package/textarea/Textarea.test.js +150 -179
- package/textarea/types.d.ts +9 -5
- package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
- package/toggle-group/ToggleGroup.js +21 -61
- package/toggle-group/ToggleGroup.stories.tsx +4 -4
- package/toggle-group/ToggleGroup.test.js +48 -81
- package/toggle-group/types.d.ts +10 -10
- package/typography/Typography.accessibility.test.js +339 -0
- package/typography/Typography.js +4 -13
- package/typography/types.d.ts +1 -1
- package/useTheme.d.ts +41 -136
- package/useTheme.js +1 -8
- package/useTranslatedLabels.js +1 -7
- package/utils/BaseTypography.d.ts +2 -2
- package/utils/BaseTypography.js +16 -30
- package/utils/FocusLock.js +25 -39
- package/wizard/Wizard.accessibility.test.js +55 -0
- package/wizard/Wizard.js +14 -49
- package/wizard/Wizard.test.js +53 -80
- package/wizard/types.d.ts +7 -7
- package/common/OpenSans.css +0 -69
- package/common/fonts/OpenSans-Bold.ttf +0 -0
- package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
- package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
- package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
- package/common/fonts/OpenSans-Italic.ttf +0 -0
- package/common/fonts/OpenSans-Light.ttf +0 -0
- package/common/fonts/OpenSans-LightItalic.ttf +0 -0
- package/common/fonts/OpenSans-Regular.ttf +0 -0
- package/common/fonts/OpenSans-SemiBold.ttf +0 -0
- package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
- package/resultsetTable/Icons.d.ts +0 -7
- package/resultsetTable/ResultsetTable.d.ts +0 -4
- package/slider/Slider.stories.tsx +0 -240
- package/text-input/Icons.d.ts +0 -8
- package/text-input/Icons.js +0 -60
- /package/{resultsetTable → action-icon}/types.js +0 -0
- /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
package/common/OpenSans.css
DELETED
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
@font-face {
|
|
2
|
-
font-family: "Open Sans";
|
|
3
|
-
src: url("./fonts/OpenSans-Light.ttf") format("truetype");
|
|
4
|
-
font-style: normal;
|
|
5
|
-
font-weight: 200;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
@font-face {
|
|
9
|
-
font-family: "Open Sans";
|
|
10
|
-
src: url("./fonts/OpenSans-Regular.ttf") format("truetype");
|
|
11
|
-
font-style: normal;
|
|
12
|
-
font-weight: 400;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
@font-face {
|
|
16
|
-
font-family: "Open Sans";
|
|
17
|
-
src: url("./fonts/OpenSans-SemiBold.ttf") format("truetype");
|
|
18
|
-
font-style: normal;
|
|
19
|
-
font-weight: 600;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
@font-face {
|
|
23
|
-
font-family: "Open Sans";
|
|
24
|
-
src: url("./fonts/OpenSans-Bold.ttf") format("truetype");
|
|
25
|
-
font-style: normal;
|
|
26
|
-
font-weight: 700;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
@font-face {
|
|
30
|
-
font-family: "Open Sans";
|
|
31
|
-
src: url("./fonts/OpenSans-ExtraBold.ttf") format("truetype");
|
|
32
|
-
font-style: normal;
|
|
33
|
-
font-weight: 800;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
@font-face {
|
|
37
|
-
font-family: "Open Sans";
|
|
38
|
-
src: url("./fonts/OpenSans-LightItalic.ttf") format("truetype");
|
|
39
|
-
font-style: italic;
|
|
40
|
-
font-weight: 200;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
@font-face {
|
|
44
|
-
font-family: "Open Sans";
|
|
45
|
-
src: url("./fonts/OpenSans-Italic.ttf") format("truetype");
|
|
46
|
-
font-style: italic;
|
|
47
|
-
font-weight: 400;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
@font-face {
|
|
51
|
-
font-family: "Open Sans";
|
|
52
|
-
src: url("./fonts/OpenSans-SemiBoldItalic.ttf") format("truetype");
|
|
53
|
-
font-style: italic;
|
|
54
|
-
font-weight: 600;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
@font-face {
|
|
58
|
-
font-family: "Open Sans";
|
|
59
|
-
src: url("./fonts/OpenSans-BoldItalic.ttf") format("truetype");
|
|
60
|
-
font-style: italic;
|
|
61
|
-
font-weight: 700;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
@font-face {
|
|
65
|
-
font-family: "Open Sans";
|
|
66
|
-
src: url("./fonts/OpenSans-ExtraBoldItalic.ttf") format("truetype");
|
|
67
|
-
font-style: italic;
|
|
68
|
-
font-weight: 800;
|
|
69
|
-
}
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import ResultsetTablePropsType from "./types";
|
|
3
|
-
declare const DxcResultsetTable: ({ columns, rows, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, margin, tabIndex, }: ResultsetTablePropsType) => JSX.Element;
|
|
4
|
-
export default DxcResultsetTable;
|
|
@@ -1,240 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import DxcSlider from "./Slider";
|
|
3
|
-
import { BackgroundColorProvider } from "../BackgroundColorContext";
|
|
4
|
-
import Title from "../../.storybook/components/Title";
|
|
5
|
-
import ExampleContainer from "../../.storybook/components/ExampleContainer";
|
|
6
|
-
import DarkContainer from "../../.storybook/components/DarkSection";
|
|
7
|
-
import { HalstackProvider } from "../HalstackContext";
|
|
8
|
-
|
|
9
|
-
export default {
|
|
10
|
-
title: "Slider",
|
|
11
|
-
component: DxcSlider,
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
const labelFormat = (value) => `${value}E100000000000000000000000`;
|
|
15
|
-
|
|
16
|
-
const opinionatedTheme = {
|
|
17
|
-
slider: {
|
|
18
|
-
baseColor: "#0067b3",
|
|
19
|
-
fontColor: "#000000",
|
|
20
|
-
totalLineColor: "#e6e6e6",
|
|
21
|
-
},
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
export const Chromatic = () => (
|
|
25
|
-
<>
|
|
26
|
-
<Title title="States" theme="light" level={2} />
|
|
27
|
-
<ExampleContainer pseudoState="pseudo-hover">
|
|
28
|
-
<Title title="Hovered" theme="light" level={4} />
|
|
29
|
-
<DxcSlider label="Slider" helperText="Help message" showLimitsValues />
|
|
30
|
-
</ExampleContainer>
|
|
31
|
-
<ExampleContainer pseudoState="pseudo-active">
|
|
32
|
-
<Title title="Active" theme="light" level={4} />
|
|
33
|
-
<DxcSlider label="Slider" helperText="Help message" showLimitsValues />
|
|
34
|
-
</ExampleContainer>
|
|
35
|
-
<ExampleContainer pseudoState="pseudo-focus">
|
|
36
|
-
<Title title="Focused" theme="light" level={4} />
|
|
37
|
-
<DxcSlider label="Slider" helperText="Help message" showLimitsValues />
|
|
38
|
-
</ExampleContainer>
|
|
39
|
-
<ExampleContainer>
|
|
40
|
-
<Title title="Disabled" theme="light" level={4} />
|
|
41
|
-
<DxcSlider label="Slider" helperText="Help message" disabled showLimitsValues />
|
|
42
|
-
</ExampleContainer>
|
|
43
|
-
<ExampleContainer>
|
|
44
|
-
<Title title="Disabled discrete slider with input" theme="light" level={4} />
|
|
45
|
-
<DxcSlider
|
|
46
|
-
label="Slider"
|
|
47
|
-
helperText="Help message"
|
|
48
|
-
disabled
|
|
49
|
-
defaultValue={40}
|
|
50
|
-
minValue={0}
|
|
51
|
-
maxValue={50}
|
|
52
|
-
showLimitsValues
|
|
53
|
-
showInput
|
|
54
|
-
marks
|
|
55
|
-
step={10}
|
|
56
|
-
/>
|
|
57
|
-
</ExampleContainer>
|
|
58
|
-
<Title title="Variants" theme="light" level={2} />
|
|
59
|
-
<ExampleContainer>
|
|
60
|
-
<Title title="Continuous slider" theme="light" level={4} />
|
|
61
|
-
<DxcSlider defaultValue={65} label="Slider" helperText="Help message" showLimitsValues />
|
|
62
|
-
</ExampleContainer>
|
|
63
|
-
<ExampleContainer>
|
|
64
|
-
<Title title="Discrete slider" theme="light" level={4} />
|
|
65
|
-
<DxcSlider defaultValue={20} label="Slider" helperText="Help message" showLimitsValues marks step={5} />
|
|
66
|
-
</ExampleContainer>
|
|
67
|
-
<ExampleContainer>
|
|
68
|
-
<Title title="Discrete slider with input" theme="light" level={4} />
|
|
69
|
-
<DxcSlider
|
|
70
|
-
defaultValue={20}
|
|
71
|
-
minValue={0}
|
|
72
|
-
maxValue={50}
|
|
73
|
-
label="Slider"
|
|
74
|
-
helperText="Help message"
|
|
75
|
-
showLimitsValues
|
|
76
|
-
showInput
|
|
77
|
-
marks
|
|
78
|
-
step={10}
|
|
79
|
-
/>
|
|
80
|
-
</ExampleContainer>
|
|
81
|
-
<BackgroundColorProvider color="#333333">
|
|
82
|
-
<DarkContainer>
|
|
83
|
-
<Title title="Dark" theme="dark" level={2} />
|
|
84
|
-
<ExampleContainer pseudoState="pseudo-hover">
|
|
85
|
-
<Title title="Hovered" theme="dark" level={4} />
|
|
86
|
-
<DxcSlider label="Slider" helperText="Help message" showLimitsValues />
|
|
87
|
-
</ExampleContainer>
|
|
88
|
-
<ExampleContainer pseudoState="pseudo-active">
|
|
89
|
-
<Title title="Active" theme="dark" level={4} />
|
|
90
|
-
<DxcSlider label="Slider" helperText="Help message" showLimitsValues />
|
|
91
|
-
</ExampleContainer>
|
|
92
|
-
<ExampleContainer pseudoState="pseudo-focus">
|
|
93
|
-
<Title title="Focused" theme="dark" level={4} />
|
|
94
|
-
<DxcSlider label="Slider" helperText="Help message" showLimitsValues />
|
|
95
|
-
</ExampleContainer>
|
|
96
|
-
<ExampleContainer>
|
|
97
|
-
<Title title="Disabled" theme="dark" level={4} />
|
|
98
|
-
<DxcSlider label="Slider" helperText="Help message" disabled showLimitsValues />
|
|
99
|
-
</ExampleContainer>
|
|
100
|
-
<ExampleContainer>
|
|
101
|
-
<Title title="Disabled discrete slider with input" theme="dark" level={4} />
|
|
102
|
-
<DxcSlider
|
|
103
|
-
label="Slider"
|
|
104
|
-
helperText="Help message"
|
|
105
|
-
disabled
|
|
106
|
-
defaultValue={40}
|
|
107
|
-
minValue={0}
|
|
108
|
-
maxValue={50}
|
|
109
|
-
showLimitsValues
|
|
110
|
-
showInput
|
|
111
|
-
marks
|
|
112
|
-
step={5}
|
|
113
|
-
/>
|
|
114
|
-
</ExampleContainer>
|
|
115
|
-
<ExampleContainer>
|
|
116
|
-
<Title title="Continuous slider" theme="dark" level={4} />
|
|
117
|
-
<DxcSlider defaultValue={65} label="Slider" helperText="Help message" showLimitsValues />
|
|
118
|
-
</ExampleContainer>
|
|
119
|
-
<ExampleContainer>
|
|
120
|
-
<Title title="Discrete slider" theme="dark" level={4} />
|
|
121
|
-
<DxcSlider defaultValue={20} label="Slider" helperText="Help message" showLimitsValues marks step={5} />
|
|
122
|
-
</ExampleContainer>
|
|
123
|
-
<ExampleContainer>
|
|
124
|
-
<Title title="Discrete slider with input" theme="dark" level={4} />
|
|
125
|
-
<DxcSlider
|
|
126
|
-
defaultValue={20}
|
|
127
|
-
minValue={0}
|
|
128
|
-
maxValue={50}
|
|
129
|
-
label="Slider"
|
|
130
|
-
helperText="Help message"
|
|
131
|
-
showLimitsValues
|
|
132
|
-
showInput
|
|
133
|
-
marks
|
|
134
|
-
step={10}
|
|
135
|
-
/>
|
|
136
|
-
</ExampleContainer>
|
|
137
|
-
</DarkContainer>
|
|
138
|
-
</BackgroundColorProvider>
|
|
139
|
-
<Title title="Margins" theme="light" level={2} />
|
|
140
|
-
<ExampleContainer>
|
|
141
|
-
<Title title="Xxsmall" theme="light" level={4} />
|
|
142
|
-
<DxcSlider label="Xxsmall" margin="xxsmall" />
|
|
143
|
-
</ExampleContainer>
|
|
144
|
-
<ExampleContainer>
|
|
145
|
-
<Title title="Xsmall" theme="light" level={4} />
|
|
146
|
-
<DxcSlider label="Xsmall" margin="xsmall" />
|
|
147
|
-
</ExampleContainer>
|
|
148
|
-
<ExampleContainer>
|
|
149
|
-
<Title title="Small" theme="light" level={4} />
|
|
150
|
-
<DxcSlider label="Small" margin="small" />
|
|
151
|
-
</ExampleContainer>
|
|
152
|
-
<ExampleContainer>
|
|
153
|
-
<Title title="Medium" theme="light" level={4} />
|
|
154
|
-
<DxcSlider label="Medium" margin="medium" />
|
|
155
|
-
</ExampleContainer>
|
|
156
|
-
<ExampleContainer>
|
|
157
|
-
<Title title="Large" theme="light" level={4} />
|
|
158
|
-
<DxcSlider label="Large" margin="large" />
|
|
159
|
-
</ExampleContainer>
|
|
160
|
-
<ExampleContainer>
|
|
161
|
-
<Title title="Xlarge" theme="light" level={4} />
|
|
162
|
-
<DxcSlider label="Xlarge" margin="xlarge" />
|
|
163
|
-
</ExampleContainer>
|
|
164
|
-
<ExampleContainer>
|
|
165
|
-
<Title title="Xxlarge" theme="light" level={4} />
|
|
166
|
-
<DxcSlider label="Xxlarge" margin="xxlarge" />
|
|
167
|
-
</ExampleContainer>
|
|
168
|
-
<Title title="Sizes" theme="light" level={2} />
|
|
169
|
-
<ExampleContainer>
|
|
170
|
-
<Title title="Medium" theme="light" level={4} />
|
|
171
|
-
<DxcSlider label="Medium" size="medium" />
|
|
172
|
-
</ExampleContainer>
|
|
173
|
-
<ExampleContainer>
|
|
174
|
-
<Title title="Large" theme="light" level={4} />
|
|
175
|
-
<DxcSlider label="Large" size="large" />
|
|
176
|
-
</ExampleContainer>
|
|
177
|
-
<ExampleContainer>
|
|
178
|
-
<Title title="FillParent" theme="light" level={4} />
|
|
179
|
-
<DxcSlider label="FillParent" size="fillParent" />
|
|
180
|
-
</ExampleContainer>
|
|
181
|
-
<ExampleContainer>
|
|
182
|
-
<Title title="Large limit values labels" theme="light" level={4} />
|
|
183
|
-
<DxcSlider
|
|
184
|
-
label="Slider"
|
|
185
|
-
helperText="Help message"
|
|
186
|
-
showLimitsValues
|
|
187
|
-
labelFormatCallback={labelFormat}
|
|
188
|
-
size="large"
|
|
189
|
-
/>
|
|
190
|
-
</ExampleContainer>
|
|
191
|
-
<Title title="Opinionated theme" theme="light" level={2} />
|
|
192
|
-
<ExampleContainer pseudoState="pseudo-hover">
|
|
193
|
-
<Title title="Hovered" theme="light" level={4} />
|
|
194
|
-
<HalstackProvider theme={opinionatedTheme}>
|
|
195
|
-
<DxcSlider label="Slider" helperText="Help message" showLimitsValues />
|
|
196
|
-
</HalstackProvider>
|
|
197
|
-
</ExampleContainer>
|
|
198
|
-
<ExampleContainer pseudoState="pseudo-active">
|
|
199
|
-
<Title title="Active" theme="light" level={4} />
|
|
200
|
-
<HalstackProvider theme={opinionatedTheme}>
|
|
201
|
-
<DxcSlider label="Slider" helperText="Help message" showLimitsValues />
|
|
202
|
-
</HalstackProvider>
|
|
203
|
-
</ExampleContainer>
|
|
204
|
-
<ExampleContainer pseudoState="pseudo-focus">
|
|
205
|
-
<Title title="Focused" theme="light" level={4} />
|
|
206
|
-
<HalstackProvider theme={opinionatedTheme}>
|
|
207
|
-
<DxcSlider label="Slider" helperText="Help message" showLimitsValues />
|
|
208
|
-
</HalstackProvider>
|
|
209
|
-
</ExampleContainer>
|
|
210
|
-
<ExampleContainer>
|
|
211
|
-
<Title title="Disabled discrete slider with input" theme="light" level={4} />{" "}
|
|
212
|
-
<HalstackProvider theme={opinionatedTheme}>
|
|
213
|
-
<DxcSlider
|
|
214
|
-
label="Slider"
|
|
215
|
-
helperText="Help message"
|
|
216
|
-
disabled
|
|
217
|
-
defaultValue={40}
|
|
218
|
-
minValue={0}
|
|
219
|
-
maxValue={50}
|
|
220
|
-
showLimitsValues
|
|
221
|
-
showInput
|
|
222
|
-
marks
|
|
223
|
-
step={10}
|
|
224
|
-
/>
|
|
225
|
-
</HalstackProvider>
|
|
226
|
-
</ExampleContainer>
|
|
227
|
-
<ExampleContainer>
|
|
228
|
-
<Title title="Continuous slider" theme="light" level={4} />
|
|
229
|
-
<HalstackProvider theme={opinionatedTheme}>
|
|
230
|
-
<DxcSlider defaultValue={65} label="Slider" helperText="Help message" showLimitsValues />
|
|
231
|
-
</HalstackProvider>
|
|
232
|
-
</ExampleContainer>
|
|
233
|
-
<ExampleContainer>
|
|
234
|
-
<Title title="Discrete slider" theme="light" level={4} />
|
|
235
|
-
<HalstackProvider theme={opinionatedTheme}>
|
|
236
|
-
<DxcSlider defaultValue={20} label="Slider" helperText="Help message" showLimitsValues marks step={5} />
|
|
237
|
-
</HalstackProvider>
|
|
238
|
-
</ExampleContainer>
|
|
239
|
-
</>
|
|
240
|
-
);
|
package/text-input/Icons.d.ts
DELETED
package/text-input/Icons.js
DELETED
|
@@ -1,60 +0,0 @@
|
|
|
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 _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
|
-
var icons = {
|
|
13
|
-
error: /*#__PURE__*/_react["default"].createElement("svg", {
|
|
14
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
15
|
-
height: "24px",
|
|
16
|
-
viewBox: "0 0 24 24",
|
|
17
|
-
width: "24px",
|
|
18
|
-
fill: "currentColor"
|
|
19
|
-
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
20
|
-
d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
|
|
21
|
-
})),
|
|
22
|
-
clear: /*#__PURE__*/_react["default"].createElement("svg", {
|
|
23
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
24
|
-
width: "24",
|
|
25
|
-
height: "24",
|
|
26
|
-
viewBox: "0 0 24 24",
|
|
27
|
-
fill: "currentColor"
|
|
28
|
-
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
29
|
-
d: "M0 0h24v24H0V0z",
|
|
30
|
-
fill: "none"
|
|
31
|
-
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
32
|
-
d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
|
|
33
|
-
})),
|
|
34
|
-
increment: /*#__PURE__*/_react["default"].createElement("svg", {
|
|
35
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
36
|
-
height: "24px",
|
|
37
|
-
viewBox: "0 0 24 24",
|
|
38
|
-
width: "24px",
|
|
39
|
-
fill: "currentColor"
|
|
40
|
-
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
41
|
-
d: "M0 0h24v24H0z",
|
|
42
|
-
fill: "none"
|
|
43
|
-
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
44
|
-
d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
|
|
45
|
-
})),
|
|
46
|
-
decrement: /*#__PURE__*/_react["default"].createElement("svg", {
|
|
47
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
48
|
-
height: "24px",
|
|
49
|
-
viewBox: "0 0 24 24",
|
|
50
|
-
width: "24px",
|
|
51
|
-
fill: "currentColor"
|
|
52
|
-
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
53
|
-
d: "M0 0h24v24H0z",
|
|
54
|
-
fill: "none"
|
|
55
|
-
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
56
|
-
d: "M19 13H5v-2h14v2z"
|
|
57
|
-
}))
|
|
58
|
-
};
|
|
59
|
-
var _default = icons;
|
|
60
|
-
exports["default"] = _default;
|
|
File without changes
|
|
File without changes
|