@dxc-technology/halstack-react 0.0.0-4a5e7d8 → 0.0.0-4b95ba0
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.js +0 -1
- package/ThemeContext.js +23 -31
- package/accordion/Accordion.d.ts +1 -1
- package/accordion/Accordion.js +9 -20
- package/accordion/Accordion.stories.tsx +9 -2
- package/accordion/types.d.ts +3 -7
- package/accordion-group/types.d.ts +3 -7
- package/badge/Badge.d.ts +4 -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 +13 -0
- package/bleed/types.js +5 -0
- package/button/Button.d.ts +1 -1
- package/button/Button.js +7 -15
- package/button/Button.stories.tsx +6 -8
- package/button/types.d.ts +3 -7
- package/card/Card.stories.tsx +1 -1
- package/checkbox/types.d.ts +1 -1
- package/chip/Chip.d.ts +1 -1
- package/chip/Chip.js +14 -52
- package/chip/Chip.stories.tsx +6 -8
- package/chip/types.d.ts +5 -13
- package/common/variables.js +38 -234
- package/date-input/DateInput.js +6 -6
- package/dialog/Dialog.js +2 -1
- package/dropdown/Dropdown.d.ts +1 -1
- package/dropdown/Dropdown.js +12 -34
- package/dropdown/Dropdown.stories.tsx +25 -23
- package/dropdown/types.d.ts +5 -14
- package/file-input/FileInput.js +102 -33
- package/file-input/FileInput.stories.tsx +507 -0
- package/footer/Footer.js +18 -20
- package/heading/Heading.stories.tsx +3 -2
- 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 +13 -0
- package/inset/types.js +5 -0
- package/layout/ApplicationLayout.js +9 -3
- package/link/Link.js +7 -15
- package/link/Link.stories.tsx +6 -1
- package/link/types.d.ts +5 -9
- package/list/List.d.ts +3 -7
- package/list/List.js +4 -4
- package/list/List.stories.tsx +10 -0
- package/list/types.d.ts +7 -0
- package/list/types.js +5 -0
- package/main.d.ts +4 -6
- package/main.js +20 -36
- package/package.json +4 -2
- package/password-input/PasswordInput.stories.tsx +3 -3
- package/progress-bar/ProgressBar.js +2 -2
- package/radio-group/Radio.d.ts +4 -0
- package/radio-group/Radio.js +140 -0
- package/radio-group/RadioGroup.d.ts +4 -0
- package/radio-group/RadioGroup.js +273 -0
- package/radio-group/RadioGroup.stories.tsx +79 -0
- package/radio-group/RadioGroup.test.js +248 -0
- package/radio-group/types.d.ts +36 -0
- package/radio-group/types.js +5 -0
- package/resultsetTable/ResultsetTable.js +5 -2
- package/resultsetTable/ResultsetTable.stories.tsx +7 -8
- package/row/Row.d.ts +3 -11
- package/row/Row.js +12 -9
- package/row/Row.stories.tsx +20 -6
- package/row/types.d.ts +10 -0
- package/row/types.js +5 -0
- package/select/Select.d.ts +4 -0
- package/select/Select.js +12 -6
- package/select/types.d.ts +170 -0
- package/select/types.js +5 -0
- package/sidenav/Sidenav.stories.tsx +18 -1
- package/spinner/Spinner.stories.jsx +1 -0
- package/stack/Stack.d.ts +3 -10
- package/stack/Stack.js +12 -9
- package/stack/Stack.stories.tsx +20 -6
- package/stack/types.d.ts +9 -0
- package/stack/types.js +5 -0
- package/switch/Switch.stories.tsx +1 -1
- package/table/Table.stories.jsx +2 -1
- package/tabs/Tabs.js +7 -7
- package/tabs/Tabs.stories.tsx +7 -8
- package/tabs/types.d.ts +23 -15
- package/tag/Tag.d.ts +1 -1
- package/tag/Tag.js +6 -11
- package/tag/Tag.stories.tsx +15 -22
- package/tag/types.d.ts +23 -14
- package/text/Text.js +1 -1
- package/text-input/TextInput.js +17 -7
- package/text-input/TextInput.stories.tsx +4 -4
- package/text-input/types.d.ts +1 -1
- package/textarea/Textarea.js +5 -3
- package/textarea/Textarea.stories.jsx +4 -3
- package/V3Select/V3Select.js +0 -455
- package/V3Select/index.d.ts +0 -27
- package/V3Textarea/V3Textarea.js +0 -260
- package/V3Textarea/index.d.ts +0 -27
- package/date/Date.js +0 -373
- package/date/index.d.ts +0 -27
- package/input-text/Icons.js +0 -22
- package/input-text/InputText.js +0 -611
- package/input-text/index.d.ts +0 -36
- package/select/index.d.ts +0 -131
- package/toggle/Toggle.js +0 -186
- package/toggle/index.d.ts +0 -21
- package/upload/Upload.js +0 -201
- package/upload/buttons-upload/ButtonsUpload.js +0 -111
- package/upload/buttons-upload/Icons.js +0 -40
- package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
- package/upload/dragAndDropArea/Icons.js +0 -39
- package/upload/file-upload/FileToUpload.js +0 -115
- package/upload/file-upload/Icons.js +0 -66
- package/upload/files-upload/FilesToUpload.js +0 -109
- package/upload/index.d.ts +0 -15
- package/upload/transaction/Icons.js +0 -160
- package/upload/transaction/Transaction.js +0 -104
- package/upload/transactions/Transactions.js +0 -94
|
@@ -17,7 +17,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
17
17
|
|
|
18
18
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
19
|
|
|
20
|
-
/* eslint-disable prefer-template */
|
|
21
20
|
var BackgroundColorContext = /*#__PURE__*/_react["default"].createContext(null);
|
|
22
21
|
|
|
23
22
|
var getColorType = function getColorType(hexColor) {
|
package/ThemeContext.js
CHANGED
|
@@ -81,7 +81,7 @@ var parseAdvancedTheme = function parseAdvancedTheme(advancedTheme) {
|
|
|
81
81
|
};
|
|
82
82
|
|
|
83
83
|
var parseTheme = function parseTheme(theme) {
|
|
84
|
-
var _theme$accordion$font, _theme$accordion, _theme$accordion$font2, _theme$accordion2, _theme$accordion$acce, _theme$accordion3, _theme$accordion$acce2, _theme$accordion4, _theme$accordion$acce3, _theme$accordion5, _setOpacity, _theme$accordion6, _setOpacity2, _theme$accordion7, _setOpacity3, _theme$accordion8, _setOpacity4, _theme$accordion9, _setOpacity5, _theme$accordion10, _theme$button$primary, _theme$button, _theme$button$baseCol, _theme$button2, _theme$button$baseCol2, _theme$button3, _theme$button$seconda, _theme$button4, _theme$button$baseCol3, _theme$button5, _theme$button$baseCol4, _theme$button6, _theme$button$baseCol5, _theme$button7, _subLightness, _theme$button8, _subLightness2, _theme$button9, _subLightness3, _theme$button10, _addLightness, _theme$button11, _addLightness2, _theme$button12, _theme$checkbox$baseC, _theme$checkbox, _theme$checkbox$baseC2, _theme$checkbox2, _theme$checkbox$check, _theme$checkbox3, _setOpacity6, _theme$checkbox4, _setOpacity7, _theme$checkbox5, _setOpacity8, _theme$checkbox6, _theme$chip$baseColor, _theme$chip, _setOpacity9, _theme$chip2, _theme$chip$fontColor, _theme$chip3, _setOpacity10, _theme$chip4, _theme$
|
|
84
|
+
var _theme$accordion$font, _theme$accordion, _theme$accordion$font2, _theme$accordion2, _theme$accordion$acce, _theme$accordion3, _theme$accordion$acce2, _theme$accordion4, _theme$accordion$acce3, _theme$accordion5, _setOpacity, _theme$accordion6, _setOpacity2, _theme$accordion7, _setOpacity3, _theme$accordion8, _setOpacity4, _theme$accordion9, _setOpacity5, _theme$accordion10, _theme$button$primary, _theme$button, _theme$button$baseCol, _theme$button2, _theme$button$baseCol2, _theme$button3, _theme$button$seconda, _theme$button4, _theme$button$baseCol3, _theme$button5, _theme$button$baseCol4, _theme$button6, _theme$button$baseCol5, _theme$button7, _subLightness, _theme$button8, _subLightness2, _theme$button9, _subLightness3, _theme$button10, _addLightness, _theme$button11, _addLightness2, _theme$button12, _theme$checkbox$baseC, _theme$checkbox, _theme$checkbox$baseC2, _theme$checkbox2, _theme$checkbox$check, _theme$checkbox3, _setOpacity6, _theme$checkbox4, _setOpacity7, _theme$checkbox5, _setOpacity8, _theme$checkbox6, _theme$chip$baseColor, _theme$chip, _setOpacity9, _theme$chip2, _theme$chip$fontColor, _theme$chip3, _setOpacity10, _theme$chip4, _theme$dateInput$base, _theme$dateInput, _theme$dateInput$acce, _theme$dateInput2, _setOpacity11, _theme$dateInput3, _theme$dropdown$baseC, _theme$dropdown, _theme$dropdown$fontC, _theme$dropdown2, _setOpacity12, _theme$dropdown3, _setOpacity13, _theme$dropdown4, _setOpacity14, _theme$dropdown5, _setOpacity15, _theme$dropdown6, _theme$fileInput$font, _theme$fileInput, _theme$fileInput$font2, _theme$fileInput2, _theme$fileInput$font3, _theme$fileInput3, _theme$fileInput$font4, _theme$fileInput4, _setOpacity16, _theme$fileInput5, _setOpacity17, _theme$fileInput6, _setOpacity18, _theme$fileInput7, _theme$footer$baseCol, _theme$footer, _theme$footer$fontCol, _theme$footer2, _theme$footer$fontCol2, _theme$footer3, _theme$footer$fontCol3, _theme$footer4, _theme$footer$accentC, _theme$footer5, _theme$footer$logo, _theme$footer6, _theme$header$baseCol, _theme$header, _theme$header$accentC, _theme$header2, _theme$header$menuBas, _theme$header3, _theme$header$fontCol, _theme$header4, _theme$header$hamburg, _theme$header5, _setOpacity19, _theme$header6, _theme$header$logo, _theme$header7, _theme$header$logoRes, _theme$header8, _theme$header$content, _theme$header9, _theme$header$content2, _theme$header10, _theme$textInput$base, _theme$textInput, _subLightness4, _theme$textInput2, _theme$paginator$base, _theme$paginator, _theme$paginator$font, _theme$paginator2, _theme$progressBar$ac, _theme$progressBar, _theme$progressBar$ba, _theme$progressBar2, _theme$radio$baseColo, _theme$radio, _setOpacity20, _theme$radio2, _theme$sidenav$baseCo, _theme$sidenav, _setOpacity21, _theme$sidenav2, _theme$sidenav$arrowA, _theme$sidenav3, _theme$slider$baseCol, _theme$slider, _theme$slider$baseCol2, _theme$slider2, _theme$slider$baseCol3, _theme$slider3, _subLightness5, _theme$slider4, _subLightness6, _theme$slider5, _setOpacity22, _theme$slider6, _setOpacity23, _theme$slider7, _setOpacity24, _theme$slider8, _setOpacity25, _theme$slider9, _theme$spinner$accent, _theme$spinner, _theme$spinner$baseCo, _theme$spinner2, _theme$switch$checked, _theme$switch, _setOpacity26, _theme$switch2, _theme$table$baseColo, _theme$table, _theme$table$fontColo, _theme$table2, _theme$tabs$baseColor, _theme$tabs, _theme$tabs$baseColor2, _theme$tabs2, _theme$tabs$baseColor3, _theme$tabs3, _theme$tabs$baseColor4, _theme$tabs4, _addLightness3, _theme$tabs5, _addLightness4, _theme$tabs6, _theme$toggleGroup$se, _theme$toggleGroup, _theme$toggleGroup$se2, _theme$toggleGroup2, _theme$toggleGroup$un, _theme$toggleGroup3, _theme$toggleGroup$se3, _theme$toggleGroup4, _theme$toggleGroup$un2, _theme$toggleGroup5, _subLightness7, _theme$toggleGroup6, _subLightness8, _theme$toggleGroup7, _addLightness5, _theme$toggleGroup8, _addLightness6, _theme$toggleGroup9, _subLightness9, _theme$toggleGroup10, _addLightness7, _theme$toggleGroup11, _setOpacity27, _theme$toggleGroup12, _theme$wizard$baseCol, _theme$wizard, _theme$wizard$fontCol, _theme$wizard2;
|
|
85
85
|
|
|
86
86
|
var componentTokensCopy = JSON.parse(JSON.stringify(_variables.componentTokens));
|
|
87
87
|
var accordionTokens = componentTokensCopy.accordion;
|
|
@@ -120,10 +120,10 @@ var parseTheme = function parseTheme(theme) {
|
|
|
120
120
|
chipTokens.disabledBackgroundColor = (_setOpacity9 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$chip2 = theme.chip) === null || _theme$chip2 === void 0 ? void 0 : _theme$chip2.baseColor, 0.34)) !== null && _setOpacity9 !== void 0 ? _setOpacity9 : chipTokens.disabledBackgroundColor;
|
|
121
121
|
chipTokens.fontColor = (_theme$chip$fontColor = theme === null || theme === void 0 ? void 0 : (_theme$chip3 = theme.chip) === null || _theme$chip3 === void 0 ? void 0 : _theme$chip3.fontColor) !== null && _theme$chip$fontColor !== void 0 ? _theme$chip$fontColor : chipTokens.fontColor;
|
|
122
122
|
chipTokens.disabledFontColor = (_setOpacity10 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$chip4 = theme.chip) === null || _theme$chip4 === void 0 ? void 0 : _theme$chip4.fontColor, 0.34)) !== null && _setOpacity10 !== void 0 ? _setOpacity10 : chipTokens.disabledFontColor;
|
|
123
|
-
var dateTokens = componentTokensCopy.
|
|
124
|
-
dateTokens.pickerSelectedDateBackgroundColor = (_theme$
|
|
125
|
-
dateTokens.pickerSelectedDateColor = (_theme$
|
|
126
|
-
dateTokens.pickerHoverDateBackgroundColor = (_setOpacity11 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$
|
|
123
|
+
var dateTokens = componentTokensCopy.dateInput;
|
|
124
|
+
dateTokens.pickerSelectedDateBackgroundColor = (_theme$dateInput$base = theme === null || theme === void 0 ? void 0 : (_theme$dateInput = theme.dateInput) === null || _theme$dateInput === void 0 ? void 0 : _theme$dateInput.baseColor) !== null && _theme$dateInput$base !== void 0 ? _theme$dateInput$base : dateTokens.pickerSelectedDateBackgroundColor;
|
|
125
|
+
dateTokens.pickerSelectedDateColor = (_theme$dateInput$acce = theme === null || theme === void 0 ? void 0 : (_theme$dateInput2 = theme.dateInput) === null || _theme$dateInput2 === void 0 ? void 0 : _theme$dateInput2.accentColor) !== null && _theme$dateInput$acce !== void 0 ? _theme$dateInput$acce : dateTokens.pickerSelectedDateColor;
|
|
126
|
+
dateTokens.pickerHoverDateBackgroundColor = (_setOpacity11 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$dateInput3 = theme.dateInput) === null || _theme$dateInput3 === void 0 ? void 0 : _theme$dateInput3.baseColor, 0.34)) !== null && _setOpacity11 !== void 0 ? _setOpacity11 : dateTokens.pickerHoverDateBackgroundColor;
|
|
127
127
|
var dropdownTokens = componentTokensCopy.dropdown;
|
|
128
128
|
dropdownTokens.buttonBackgroundColor = (_theme$dropdown$baseC = theme === null || theme === void 0 ? void 0 : (_theme$dropdown = theme.dropdown) === null || _theme$dropdown === void 0 ? void 0 : _theme$dropdown.baseColor) !== null && _theme$dropdown$baseC !== void 0 ? _theme$dropdown$baseC : dropdownTokens.buttonBackgroundColor;
|
|
129
129
|
dropdownTokens.buttonFontColor = (_theme$dropdown$fontC = theme === null || theme === void 0 ? void 0 : (_theme$dropdown2 = theme.dropdown) === null || _theme$dropdown2 === void 0 ? void 0 : _theme$dropdown2.fontColor) !== null && _theme$dropdown$fontC !== void 0 ? _theme$dropdown$fontC : dropdownTokens.buttonFontColor;
|
|
@@ -157,8 +157,6 @@ var parseTheme = function parseTheme(theme) {
|
|
|
157
157
|
headerTokens.logoResponsive = (_theme$header$logoRes = theme === null || theme === void 0 ? void 0 : (_theme$header8 = theme.header) === null || _theme$header8 === void 0 ? void 0 : _theme$header8.logoResponsive) !== null && _theme$header$logoRes !== void 0 ? _theme$header$logoRes : headerTokens.logoResponsive;
|
|
158
158
|
headerTokens.contentColor = (_theme$header$content = theme === null || theme === void 0 ? void 0 : (_theme$header9 = theme.header) === null || _theme$header9 === void 0 ? void 0 : _theme$header9.contentColor) !== null && _theme$header$content !== void 0 ? _theme$header$content : headerTokens.contentColor;
|
|
159
159
|
headerTokens.contentColorOnDark = (_theme$header$content2 = theme === null || theme === void 0 ? void 0 : (_theme$header10 = theme.header) === null || _theme$header10 === void 0 ? void 0 : _theme$header10.contentColorOnDark) !== null && _theme$header$content2 !== void 0 ? _theme$header$content2 : headerTokens.contentColorOnDark;
|
|
160
|
-
var inputTextTokens = componentTokensCopy.inputText;
|
|
161
|
-
inputTextTokens.selectedOptionBackgroundColor = (_setOpacity20 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$inputText = theme.inputText) === null || _theme$inputText === void 0 ? void 0 : _theme$inputText.selectedBaseColor, 0.34)) !== null && _setOpacity20 !== void 0 ? _setOpacity20 : inputTextTokens.selectedOptionBackgroundColor;
|
|
162
160
|
var textInputTokens = componentTokensCopy.textInput;
|
|
163
161
|
textInputTokens.hoverListOptionBackgroundColor = (_theme$textInput$base = theme === null || theme === void 0 ? void 0 : (_theme$textInput = theme.textInput) === null || _theme$textInput === void 0 ? void 0 : _theme$textInput.baseColor) !== null && _theme$textInput$base !== void 0 ? _theme$textInput$base : textInputTokens.hoverListOptionBackgroundColor;
|
|
164
162
|
textInputTokens.activeListOptionBackgroundColor = (_subLightness4 = subLightness(theme === null || theme === void 0 ? void 0 : (_theme$textInput2 = theme.textInput) === null || _theme$textInput2 === void 0 ? void 0 : _theme$textInput2.baseColor, 15)) !== null && _subLightness4 !== void 0 ? _subLightness4 : textInputTokens.activeListOptionBackgroundColor;
|
|
@@ -170,33 +168,27 @@ var parseTheme = function parseTheme(theme) {
|
|
|
170
168
|
progressBarTokens.totalLineColor = (_theme$progressBar$ba = theme === null || theme === void 0 ? void 0 : (_theme$progressBar2 = theme.progressBar) === null || _theme$progressBar2 === void 0 ? void 0 : _theme$progressBar2.baseColor) !== null && _theme$progressBar$ba !== void 0 ? _theme$progressBar$ba : progressBarTokens.totalLineColor;
|
|
171
169
|
var radioTokens = componentTokensCopy.radio;
|
|
172
170
|
radioTokens.color = (_theme$radio$baseColo = theme === null || theme === void 0 ? void 0 : (_theme$radio = theme.radio) === null || _theme$radio === void 0 ? void 0 : _theme$radio.baseColor) !== null && _theme$radio$baseColo !== void 0 ? _theme$radio$baseColo : radioTokens.color;
|
|
173
|
-
radioTokens.disabledColor = (
|
|
174
|
-
var v3SelectTokens = componentTokensCopy.V3Select;
|
|
175
|
-
v3SelectTokens.selectedOptionBackgroundColor = (_theme$V3Select$baseC = theme === null || theme === void 0 ? void 0 : (_theme$V3Select = theme.V3Select) === null || _theme$V3Select === void 0 ? void 0 : _theme$V3Select.baseColor) !== null && _theme$V3Select$baseC !== void 0 ? _theme$V3Select$baseC : v3SelectTokens.selectedOptionBackgroundColor;
|
|
176
|
-
v3SelectTokens.optionFontColor = (_theme$V3Select$fontC = theme === null || theme === void 0 ? void 0 : (_theme$V3Select2 = theme.V3Select) === null || _theme$V3Select2 === void 0 ? void 0 : _theme$V3Select2.fontColor) !== null && _theme$V3Select$fontC !== void 0 ? _theme$V3Select$fontC : v3SelectTokens.optionFontColor;
|
|
177
|
-
v3SelectTokens.valueFontColor = (_theme$V3Select$fontC2 = theme === null || theme === void 0 ? void 0 : (_theme$V3Select3 = theme.V3Select) === null || _theme$V3Select3 === void 0 ? void 0 : _theme$V3Select3.fontColor) !== null && _theme$V3Select$fontC2 !== void 0 ? _theme$V3Select$fontC2 : v3SelectTokens.valueFontColor;
|
|
178
|
-
v3SelectTokens.hoverOptionBackgroundColor = (_addLightness3 = addLightness(theme === null || theme === void 0 ? void 0 : (_theme$V3Select4 = theme.V3Select) === null || _theme$V3Select4 === void 0 ? void 0 : _theme$V3Select4.baseColor, 10)) !== null && _addLightness3 !== void 0 ? _addLightness3 : v3SelectTokens.hoverOptionBackgroundColor;
|
|
179
|
-
v3SelectTokens.activeOptionBackgroundColor = (_subLightness5 = subLightness(theme === null || theme === void 0 ? void 0 : (_theme$V3Select5 = theme.V3Select) === null || _theme$V3Select5 === void 0 ? void 0 : _theme$V3Select5.baseColor, 15)) !== null && _subLightness5 !== void 0 ? _subLightness5 : v3SelectTokens.activeOptionBackgroundColor;
|
|
171
|
+
radioTokens.disabledColor = (_setOpacity20 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$radio2 = theme.radio) === null || _theme$radio2 === void 0 ? void 0 : _theme$radio2.baseColor, 0.34)) !== null && _setOpacity20 !== void 0 ? _setOpacity20 : radioTokens.disabledColor;
|
|
180
172
|
var sideNavTokens = componentTokensCopy.sidenav;
|
|
181
173
|
sideNavTokens.backgroundColor = (_theme$sidenav$baseCo = theme === null || theme === void 0 ? void 0 : (_theme$sidenav = theme.sidenav) === null || _theme$sidenav === void 0 ? void 0 : _theme$sidenav.baseColor) !== null && _theme$sidenav$baseCo !== void 0 ? _theme$sidenav$baseCo : sideNavTokens.backgroundColor;
|
|
182
|
-
sideNavTokens.arrowContainerColor = (
|
|
174
|
+
sideNavTokens.arrowContainerColor = (_setOpacity21 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$sidenav2 = theme.sidenav) === null || _theme$sidenav2 === void 0 ? void 0 : _theme$sidenav2.arrowBaseColor, 0.8)) !== null && _setOpacity21 !== void 0 ? _setOpacity21 : sideNavTokens.arrowContainerColor;
|
|
183
175
|
sideNavTokens.arrowColor = (_theme$sidenav$arrowA = theme === null || theme === void 0 ? void 0 : (_theme$sidenav3 = theme.sidenav) === null || _theme$sidenav3 === void 0 ? void 0 : _theme$sidenav3.arrowAccentColor) !== null && _theme$sidenav$arrowA !== void 0 ? _theme$sidenav$arrowA : sideNavTokens.arrowColor;
|
|
184
176
|
var sliderTokens = componentTokensCopy.slider;
|
|
185
177
|
sliderTokens.thumbBackgroundColor = (_theme$slider$baseCol = theme === null || theme === void 0 ? void 0 : (_theme$slider = theme.slider) === null || _theme$slider === void 0 ? void 0 : _theme$slider.baseColor) !== null && _theme$slider$baseCol !== void 0 ? _theme$slider$baseCol : sliderTokens.thumbBackgroundColor;
|
|
186
178
|
sliderTokens.tickBackgroundColor = (_theme$slider$baseCol2 = theme === null || theme === void 0 ? void 0 : (_theme$slider2 = theme.slider) === null || _theme$slider2 === void 0 ? void 0 : _theme$slider2.baseColor) !== null && _theme$slider$baseCol2 !== void 0 ? _theme$slider$baseCol2 : sliderTokens.tickBackgroundColor;
|
|
187
179
|
sliderTokens.trackLineColor = (_theme$slider$baseCol3 = theme === null || theme === void 0 ? void 0 : (_theme$slider3 = theme.slider) === null || _theme$slider3 === void 0 ? void 0 : _theme$slider3.baseColor) !== null && _theme$slider$baseCol3 !== void 0 ? _theme$slider$baseCol3 : sliderTokens.trackLineColor;
|
|
188
|
-
sliderTokens.hoverThumbBackgroundColor = (
|
|
189
|
-
sliderTokens.activeThumbBackgroundColor = (
|
|
190
|
-
sliderTokens.totalLineColor = (
|
|
191
|
-
sliderTokens.disabledThumbBackgroundColor = (
|
|
192
|
-
sliderTokens.disabledTickBackgroundColor = (
|
|
193
|
-
sliderTokens.disabledTrackLineColor = (
|
|
180
|
+
sliderTokens.hoverThumbBackgroundColor = (_subLightness5 = subLightness(theme === null || theme === void 0 ? void 0 : (_theme$slider4 = theme.slider) === null || _theme$slider4 === void 0 ? void 0 : _theme$slider4.baseColor, 15)) !== null && _subLightness5 !== void 0 ? _subLightness5 : sliderTokens.thumbBackgroundColor;
|
|
181
|
+
sliderTokens.activeThumbBackgroundColor = (_subLightness6 = subLightness(theme === null || theme === void 0 ? void 0 : (_theme$slider5 = theme.slider) === null || _theme$slider5 === void 0 ? void 0 : _theme$slider5.baseColor, 15)) !== null && _subLightness6 !== void 0 ? _subLightness6 : sliderTokens.thumbBackgroundColor;
|
|
182
|
+
sliderTokens.totalLineColor = (_setOpacity22 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$slider6 = theme.slider) === null || _theme$slider6 === void 0 ? void 0 : _theme$slider6.baseColor, 0.34)) !== null && _setOpacity22 !== void 0 ? _setOpacity22 : sliderTokens.totalLineColor;
|
|
183
|
+
sliderTokens.disabledThumbBackgroundColor = (_setOpacity23 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$slider7 = theme.slider) === null || _theme$slider7 === void 0 ? void 0 : _theme$slider7.baseColor, 0.34)) !== null && _setOpacity23 !== void 0 ? _setOpacity23 : sliderTokens.disabledThumbBackgroundColor;
|
|
184
|
+
sliderTokens.disabledTickBackgroundColor = (_setOpacity24 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$slider8 = theme.slider) === null || _theme$slider8 === void 0 ? void 0 : _theme$slider8.baseColor, 0.34)) !== null && _setOpacity24 !== void 0 ? _setOpacity24 : sliderTokens.disabledTickBackgroundColor;
|
|
185
|
+
sliderTokens.disabledTrackLineColor = (_setOpacity25 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$slider9 = theme.slider) === null || _theme$slider9 === void 0 ? void 0 : _theme$slider9.baseColor, 0.34)) !== null && _setOpacity25 !== void 0 ? _setOpacity25 : sliderTokens.disabledTrackLineColor;
|
|
194
186
|
var spinnerTokens = componentTokensCopy.spinner;
|
|
195
187
|
spinnerTokens.trackCircleColor = (_theme$spinner$accent = theme === null || theme === void 0 ? void 0 : (_theme$spinner = theme.spinner) === null || _theme$spinner === void 0 ? void 0 : _theme$spinner.accentColor) !== null && _theme$spinner$accent !== void 0 ? _theme$spinner$accent : spinnerTokens.trackCircleColor;
|
|
196
188
|
spinnerTokens.totalCircleColor = (_theme$spinner$baseCo = theme === null || theme === void 0 ? void 0 : (_theme$spinner2 = theme.spinner) === null || _theme$spinner2 === void 0 ? void 0 : _theme$spinner2.baseColor) !== null && _theme$spinner$baseCo !== void 0 ? _theme$spinner$baseCo : spinnerTokens.totalCircleColor;
|
|
197
189
|
var switchTokens = componentTokensCopy["switch"];
|
|
198
190
|
switchTokens.checkedTrackBackgroundColor = (_theme$switch$checked = theme === null || theme === void 0 ? void 0 : (_theme$switch = theme["switch"]) === null || _theme$switch === void 0 ? void 0 : _theme$switch.checkedBaseColor) !== null && _theme$switch$checked !== void 0 ? _theme$switch$checked : switchTokens.checkedTrackBackgroundColor;
|
|
199
|
-
switchTokens.disabledCheckedTrackBackgroundColor = (
|
|
191
|
+
switchTokens.disabledCheckedTrackBackgroundColor = (_setOpacity26 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$switch2 = theme["switch"]) === null || _theme$switch2 === void 0 ? void 0 : _theme$switch2.checkedBaseColor, 0.34)) !== null && _setOpacity26 !== void 0 ? _setOpacity26 : switchTokens.disabledCheckedTrackBackgroundColor;
|
|
200
192
|
var tableTokens = componentTokensCopy.table;
|
|
201
193
|
tableTokens.headerBackgroundColor = (_theme$table$baseColo = theme === null || theme === void 0 ? void 0 : (_theme$table = theme.table) === null || _theme$table === void 0 ? void 0 : _theme$table.baseColor) !== null && _theme$table$baseColo !== void 0 ? _theme$table$baseColo : tableTokens.headerBackgroundColor;
|
|
202
194
|
tableTokens.headerFontColor = (_theme$table$fontColo = theme === null || theme === void 0 ? void 0 : (_theme$table2 = theme.table) === null || _theme$table2 === void 0 ? void 0 : _theme$table2.fontColor) !== null && _theme$table$fontColo !== void 0 ? _theme$table$fontColo : tableTokens.headerFontColor;
|
|
@@ -205,21 +197,21 @@ var parseTheme = function parseTheme(theme) {
|
|
|
205
197
|
tabsTokens.selectedIconColor = (_theme$tabs$baseColor2 = theme === null || theme === void 0 ? void 0 : (_theme$tabs2 = theme.tabs) === null || _theme$tabs2 === void 0 ? void 0 : _theme$tabs2.baseColor) !== null && _theme$tabs$baseColor2 !== void 0 ? _theme$tabs$baseColor2 : tabsTokens.selectedIconColor;
|
|
206
198
|
tabsTokens.selectedUnderlineColor = (_theme$tabs$baseColor3 = theme === null || theme === void 0 ? void 0 : (_theme$tabs3 = theme.tabs) === null || _theme$tabs3 === void 0 ? void 0 : _theme$tabs3.baseColor) !== null && _theme$tabs$baseColor3 !== void 0 ? _theme$tabs$baseColor3 : tabsTokens.selectedUnderlineColor;
|
|
207
199
|
tabsTokens.focusOutline = (_theme$tabs$baseColor4 = theme === null || theme === void 0 ? void 0 : (_theme$tabs4 = theme.tabs) === null || _theme$tabs4 === void 0 ? void 0 : _theme$tabs4.baseColor) !== null && _theme$tabs$baseColor4 !== void 0 ? _theme$tabs$baseColor4 : tabsTokens.focusOutline;
|
|
208
|
-
tabsTokens.hoverBackgroundColor = (
|
|
209
|
-
tabsTokens.pressedBackgroundColor = (
|
|
200
|
+
tabsTokens.hoverBackgroundColor = (_addLightness3 = addLightness(theme === null || theme === void 0 ? void 0 : (_theme$tabs5 = theme.tabs) === null || _theme$tabs5 === void 0 ? void 0 : _theme$tabs5.baseColor, 58)) !== null && _addLightness3 !== void 0 ? _addLightness3 : tabsTokens.hoverBackgroundColor;
|
|
201
|
+
tabsTokens.pressedBackgroundColor = (_addLightness4 = addLightness(theme === null || theme === void 0 ? void 0 : (_theme$tabs6 = theme.tabs) === null || _theme$tabs6 === void 0 ? void 0 : _theme$tabs6.baseColor, 53)) !== null && _addLightness4 !== void 0 ? _addLightness4 : tabsTokens.pressedBackgroundColor;
|
|
210
202
|
var toggleGroupTokens = componentTokensCopy.toggleGroup;
|
|
211
203
|
toggleGroupTokens.selectedBackgroundColor = (_theme$toggleGroup$se = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup = theme.toggleGroup) === null || _theme$toggleGroup === void 0 ? void 0 : _theme$toggleGroup.selectedBaseColor) !== null && _theme$toggleGroup$se !== void 0 ? _theme$toggleGroup$se : buttonTokens.selectedBackgroundColor;
|
|
212
204
|
toggleGroupTokens.selectedFontColor = (_theme$toggleGroup$se2 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup2 = theme.toggleGroup) === null || _theme$toggleGroup2 === void 0 ? void 0 : _theme$toggleGroup2.selectedFontColor) !== null && _theme$toggleGroup$se2 !== void 0 ? _theme$toggleGroup$se2 : toggleGroupTokens.selectedFontColor;
|
|
213
205
|
toggleGroupTokens.unselectedBackgroundColor = (_theme$toggleGroup$un = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup3 = theme.toggleGroup) === null || _theme$toggleGroup3 === void 0 ? void 0 : _theme$toggleGroup3.unselectedBaseColor) !== null && _theme$toggleGroup$un !== void 0 ? _theme$toggleGroup$un : toggleGroupTokens.unselectedBackgroundColor;
|
|
214
206
|
toggleGroupTokens.unselectedActiveBackgroundColor = (_theme$toggleGroup$se3 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup4 = theme.toggleGroup) === null || _theme$toggleGroup4 === void 0 ? void 0 : _theme$toggleGroup4.selectedBaseColor) !== null && _theme$toggleGroup$se3 !== void 0 ? _theme$toggleGroup$se3 : toggleGroupTokens.unselectedActiveBackgroundColor;
|
|
215
207
|
toggleGroupTokens.unselectedFontColor = (_theme$toggleGroup$un2 = theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup5 = theme.toggleGroup) === null || _theme$toggleGroup5 === void 0 ? void 0 : _theme$toggleGroup5.unselectedFontColor) !== null && _theme$toggleGroup$un2 !== void 0 ? _theme$toggleGroup$un2 : toggleGroupTokens.unselectedFontColor;
|
|
216
|
-
toggleGroupTokens.selectedHoverBackgroundColor = (
|
|
217
|
-
toggleGroupTokens.selectedActiveBackgroundColor = (
|
|
218
|
-
toggleGroupTokens.selectedDisabledBackgroundColor = (
|
|
219
|
-
toggleGroupTokens.selectedDisabledFontColor = (
|
|
220
|
-
toggleGroupTokens.unselectedHoverBackgroundColor = (
|
|
221
|
-
toggleGroupTokens.unselectedDisabledBackgroundColor = (
|
|
222
|
-
toggleGroupTokens.unselectedDisabledFontColor = (
|
|
208
|
+
toggleGroupTokens.selectedHoverBackgroundColor = (_subLightness7 = subLightness(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup6 = theme.toggleGroup) === null || _theme$toggleGroup6 === void 0 ? void 0 : _theme$toggleGroup6.selectedBaseColor, 8)) !== null && _subLightness7 !== void 0 ? _subLightness7 : buttonTokens.selectedHoverBackgroundColor;
|
|
209
|
+
toggleGroupTokens.selectedActiveBackgroundColor = (_subLightness8 = subLightness(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup7 = theme.toggleGroup) === null || _theme$toggleGroup7 === void 0 ? void 0 : _theme$toggleGroup7.selectedBaseColor, 18)) !== null && _subLightness8 !== void 0 ? _subLightness8 : toggleGroupTokens.selectedActiveBackgroundColor;
|
|
210
|
+
toggleGroupTokens.selectedDisabledBackgroundColor = (_addLightness5 = addLightness(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup8 = theme.toggleGroup) === null || _theme$toggleGroup8 === void 0 ? void 0 : _theme$toggleGroup8.selectedBaseColor, 57)) !== null && _addLightness5 !== void 0 ? _addLightness5 : toggleGroupTokens.selectedDisabledBackgroundColor;
|
|
211
|
+
toggleGroupTokens.selectedDisabledFontColor = (_addLightness6 = addLightness(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup9 = theme.toggleGroup) === null || _theme$toggleGroup9 === void 0 ? void 0 : _theme$toggleGroup9.selectedBaseColor, 42)) !== null && _addLightness6 !== void 0 ? _addLightness6 : toggleGroupTokens.selectedDisabledFontColor;
|
|
212
|
+
toggleGroupTokens.unselectedHoverBackgroundColor = (_subLightness9 = subLightness(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup10 = theme.toggleGroup) === null || _theme$toggleGroup10 === void 0 ? void 0 : _theme$toggleGroup10.unselectedBaseColor, 8)) !== null && _subLightness9 !== void 0 ? _subLightness9 : toggleGroupTokens.unselectedHoverBackgroundColor;
|
|
213
|
+
toggleGroupTokens.unselectedDisabledBackgroundColor = (_addLightness7 = addLightness(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup11 = theme.toggleGroup) === null || _theme$toggleGroup11 === void 0 ? void 0 : _theme$toggleGroup11.unselectedBaseColor, 5)) !== null && _addLightness7 !== void 0 ? _addLightness7 : toggleGroupTokens.unselectedDisabledBackgroundColor;
|
|
214
|
+
toggleGroupTokens.unselectedDisabledFontColor = (_setOpacity27 = setOpacity(theme === null || theme === void 0 ? void 0 : (_theme$toggleGroup12 = theme.toggleGroup) === null || _theme$toggleGroup12 === void 0 ? void 0 : _theme$toggleGroup12.unselectedFontColor, 0.34)) !== null && _setOpacity27 !== void 0 ? _setOpacity27 : toggleGroupTokens.unselectedDisabledFontColor;
|
|
223
215
|
var wizardTokens = componentTokensCopy.wizard;
|
|
224
216
|
wizardTokens.stepContainerSelectedBackgroundColor = (_theme$wizard$baseCol = theme === null || theme === void 0 ? void 0 : (_theme$wizard = theme.wizard) === null || _theme$wizard === void 0 ? void 0 : _theme$wizard.baseColor) !== null && _theme$wizard$baseCol !== void 0 ? _theme$wizard$baseCol : wizardTokens.stepContainerSelectedBackgroundColor;
|
|
225
217
|
wizardTokens.stepContainerSelectedFontColor = (_theme$wizard$fontCol = theme === null || theme === void 0 ? void 0 : (_theme$wizard2 = theme.wizard) === null || _theme$wizard2 === void 0 ? void 0 : _theme$wizard2.fontColor) !== null && _theme$wizard$fontCol !== void 0 ? _theme$wizard$fontCol : wizardTokens.stepContainerSelectedFontColor;
|
package/accordion/Accordion.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import AccordionPropsType from "./types";
|
|
3
|
-
declare const DxcAccordion: ({ label, isExpanded,
|
|
3
|
+
declare const DxcAccordion: ({ label, isExpanded, icon, assistiveText, disabled, onChange, children, margin, padding, tabIndex, }: AccordionPropsType) => JSX.Element;
|
|
4
4
|
export default DxcAccordion;
|
package/accordion/Accordion.js
CHANGED
|
@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
9
9
|
});
|
|
10
10
|
exports["default"] = void 0;
|
|
11
11
|
|
|
12
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
|
-
|
|
14
12
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
15
13
|
|
|
14
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
15
|
+
|
|
16
16
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
17
17
|
|
|
18
18
|
var _react = _interopRequireWildcard(require("react"));
|
|
@@ -45,7 +45,6 @@ var DxcAccordion = function DxcAccordion(_ref) {
|
|
|
45
45
|
var _ref$label = _ref.label,
|
|
46
46
|
label = _ref$label === void 0 ? "" : _ref$label,
|
|
47
47
|
isExpanded = _ref.isExpanded,
|
|
48
|
-
iconSrc = _ref.iconSrc,
|
|
49
48
|
icon = _ref.icon,
|
|
50
49
|
_ref$assistiveText = _ref.assistiveText,
|
|
51
50
|
assistiveText = _ref$assistiveText === void 0 ? "" : _ref$assistiveText,
|
|
@@ -102,7 +101,7 @@ var DxcAccordion = function DxcAccordion(_ref) {
|
|
|
102
101
|
padding: padding,
|
|
103
102
|
margin: margin,
|
|
104
103
|
disabled: disabled,
|
|
105
|
-
icon: icon
|
|
104
|
+
icon: icon,
|
|
106
105
|
isResponsive: isResponsive
|
|
107
106
|
}, /*#__PURE__*/_react["default"].createElement(_ExpansionPanel["default"], {
|
|
108
107
|
disabled: disabled,
|
|
@@ -113,11 +112,11 @@ var DxcAccordion = function DxcAccordion(_ref) {
|
|
|
113
112
|
tabIndex: disabled ? -1 : tabIndex
|
|
114
113
|
}, /*#__PURE__*/_react["default"].createElement(AccordionInfo, {
|
|
115
114
|
disabled: disabled
|
|
116
|
-
}, /*#__PURE__*/_react["default"].createElement(AccordionLabel, null, label), icon
|
|
115
|
+
}, /*#__PURE__*/_react["default"].createElement(AccordionLabel, null, label), icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
|
|
117
116
|
disabled: disabled
|
|
118
|
-
},
|
|
119
|
-
src:
|
|
120
|
-
})), assistiveText && /*#__PURE__*/_react["default"].createElement(AccordionAssistiveText, {
|
|
117
|
+
}, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(AccordionIcon, {
|
|
118
|
+
src: icon
|
|
119
|
+
}) : icon)), assistiveText && /*#__PURE__*/_react["default"].createElement(AccordionAssistiveText, {
|
|
121
120
|
disabled: disabled
|
|
122
121
|
}, assistiveText)), /*#__PURE__*/_react["default"].createElement(_ExpansionPanelDetails["default"], null, /*#__PURE__*/_react["default"].createElement(AccordionContent, {
|
|
123
122
|
disabled: disabled
|
|
@@ -145,7 +144,7 @@ var DXCAccordion = _styledComponents["default"].div(_templateObject || (_templat
|
|
|
145
144
|
}, function (props) {
|
|
146
145
|
return props.disabled && "not-allowed" || "pointer";
|
|
147
146
|
}, function (props) {
|
|
148
|
-
return props.
|
|
147
|
+
return props.theme.backgroundColor;
|
|
149
148
|
}, function (props) {
|
|
150
149
|
return "".concat(props.theme.boxShadowOffsetX, " ").concat(props.theme.boxShadowOffsetY, " ").concat(props.theme.boxShadowBlur, " ").concat(props.theme.boxShadowColor);
|
|
151
150
|
}, function (props) {
|
|
@@ -242,17 +241,7 @@ var IconContainer = _styledComponents["default"].div(_templateObject6 || (_templ
|
|
|
242
241
|
return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
|
|
243
242
|
});
|
|
244
243
|
|
|
245
|
-
var AccordionIcon = _styledComponents["default"].img(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["
|
|
246
|
-
return props.theme.iconSize;
|
|
247
|
-
}, function (props) {
|
|
248
|
-
return props.theme.iconSize;
|
|
249
|
-
}, function (props) {
|
|
250
|
-
return props.theme.iconMarginLeft;
|
|
251
|
-
}, function (props) {
|
|
252
|
-
return props.theme.iconMarginRigth;
|
|
253
|
-
}, function (props) {
|
|
254
|
-
return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
|
|
255
|
-
});
|
|
244
|
+
var AccordionIcon = _styledComponents["default"].img(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])([""])));
|
|
256
245
|
|
|
257
246
|
var _default = DxcAccordion;
|
|
258
247
|
exports["default"] = _default;
|
|
@@ -125,7 +125,7 @@ export const Chromatic = () => (
|
|
|
125
125
|
</ExampleContainer>
|
|
126
126
|
<ExampleContainer>
|
|
127
127
|
<Title title="Background color provider over accordion content" theme="light" level={4} />
|
|
128
|
-
<ThemeProvider advancedTheme={advancedTheme}
|
|
128
|
+
<ThemeProvider advancedTheme={advancedTheme}>
|
|
129
129
|
<DxcAccordion
|
|
130
130
|
label="Dark Accordion"
|
|
131
131
|
isExpanded
|
|
@@ -134,7 +134,13 @@ export const Chromatic = () => (
|
|
|
134
134
|
padding="medium"
|
|
135
135
|
>
|
|
136
136
|
<div style={{ display: "flex", flexDirection: "column" }}>
|
|
137
|
-
<DxcTextInput
|
|
137
|
+
<DxcTextInput
|
|
138
|
+
label="Label"
|
|
139
|
+
helperText="HelperText"
|
|
140
|
+
placeholder="Placeholder"
|
|
141
|
+
size="fillParent"
|
|
142
|
+
margin={{ bottom: "medium" }}
|
|
143
|
+
/>
|
|
138
144
|
<DxcButton label="Submit" size="medium" />
|
|
139
145
|
</div>
|
|
140
146
|
</DxcAccordion>
|
|
@@ -295,6 +301,7 @@ export const Chromatic = () => (
|
|
|
295
301
|
lobortis eget.
|
|
296
302
|
</div>
|
|
297
303
|
</DxcAccordion>
|
|
304
|
+
<hr />
|
|
298
305
|
</ExampleContainer>
|
|
299
306
|
</>
|
|
300
307
|
);
|
package/accordion/types.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ declare type Padding = {
|
|
|
12
12
|
left?: Space;
|
|
13
13
|
right?: Space;
|
|
14
14
|
};
|
|
15
|
-
declare type SVG = React.SVGProps<SVGSVGElement
|
|
15
|
+
declare type SVG = React.SVGProps<SVGSVGElement>;
|
|
16
16
|
declare type Props = {
|
|
17
17
|
/**
|
|
18
18
|
* The panel label.
|
|
@@ -25,13 +25,9 @@ declare type Props = {
|
|
|
25
25
|
*/
|
|
26
26
|
isExpanded?: boolean;
|
|
27
27
|
/**
|
|
28
|
-
* Element used as the icon that will be placed next to panel label.
|
|
28
|
+
* Element or path used as the icon that will be placed next to panel label.
|
|
29
29
|
*/
|
|
30
|
-
icon?: SVG;
|
|
31
|
-
/**
|
|
32
|
-
* @deprecated URL of the icon that will be placed next to panel label.
|
|
33
|
-
*/
|
|
34
|
-
iconSrc?: string;
|
|
30
|
+
icon?: string | SVG;
|
|
35
31
|
/**
|
|
36
32
|
* Assistive text to be placed on the right side of the panel.
|
|
37
33
|
*/
|
|
@@ -12,20 +12,16 @@ declare type Padding = {
|
|
|
12
12
|
left?: Space;
|
|
13
13
|
right?: Space;
|
|
14
14
|
};
|
|
15
|
-
declare type SVG = React.SVGProps<SVGSVGElement
|
|
15
|
+
declare type SVG = React.SVGProps<SVGSVGElement>;
|
|
16
16
|
export declare type AccordionPropsType = {
|
|
17
17
|
/**
|
|
18
18
|
* The panel label.
|
|
19
19
|
*/
|
|
20
20
|
label: string;
|
|
21
21
|
/**
|
|
22
|
-
* Element used as the icon that will be placed next to panel label.
|
|
22
|
+
* Element or path used as the icon that will be placed next to panel label.
|
|
23
23
|
*/
|
|
24
|
-
icon?: SVG;
|
|
25
|
-
/**
|
|
26
|
-
* @deprecated URL of the icon that will be placed next to panel label.
|
|
27
|
-
*/
|
|
28
|
-
iconSrc?: string;
|
|
24
|
+
icon?: string | SVG;
|
|
29
25
|
/**
|
|
30
26
|
* Assistive text to be placed on the right side of the panel.
|
|
31
27
|
*/
|
package/badge/Badge.d.ts
ADDED
package/badge/types.d.ts
ADDED
package/badge/types.js
ADDED
package/bleed/Bleed.d.ts
ADDED
package/bleed/Bleed.js
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
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"] = Bleed;
|
|
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 _templateObject;
|
|
17
|
+
|
|
18
|
+
function Bleed(_ref) {
|
|
19
|
+
var space = _ref.space,
|
|
20
|
+
horizontal = _ref.horizontal,
|
|
21
|
+
vertical = _ref.vertical,
|
|
22
|
+
top = _ref.top,
|
|
23
|
+
right = _ref.right,
|
|
24
|
+
bottom = _ref.bottom,
|
|
25
|
+
left = _ref.left,
|
|
26
|
+
children = _ref.children;
|
|
27
|
+
return /*#__PURE__*/_react["default"].createElement(StyledBleed, {
|
|
28
|
+
space: space,
|
|
29
|
+
horizontal: horizontal,
|
|
30
|
+
vertical: vertical,
|
|
31
|
+
top: top,
|
|
32
|
+
right: right,
|
|
33
|
+
bottom: bottom,
|
|
34
|
+
left: left
|
|
35
|
+
}, children);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function getSpacingValue(spacingName) {
|
|
39
|
+
switch (spacingName) {
|
|
40
|
+
case "none":
|
|
41
|
+
return "0rem";
|
|
42
|
+
|
|
43
|
+
case "xxxsmall":
|
|
44
|
+
return "0.125rem";
|
|
45
|
+
|
|
46
|
+
case "xxsmall":
|
|
47
|
+
return "0.25rem";
|
|
48
|
+
|
|
49
|
+
case "xsmall":
|
|
50
|
+
return "0.5rem";
|
|
51
|
+
|
|
52
|
+
case "small":
|
|
53
|
+
return "1rem";
|
|
54
|
+
|
|
55
|
+
case "medium":
|
|
56
|
+
return "1.5rem";
|
|
57
|
+
|
|
58
|
+
case "large":
|
|
59
|
+
return "2rem";
|
|
60
|
+
|
|
61
|
+
case "xlarge":
|
|
62
|
+
return "3rem";
|
|
63
|
+
|
|
64
|
+
case "xxlarge":
|
|
65
|
+
return "4rem";
|
|
66
|
+
|
|
67
|
+
case "xxxlarge":
|
|
68
|
+
return "5rem";
|
|
69
|
+
|
|
70
|
+
default:
|
|
71
|
+
return "0rem";
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
var StyledBleed = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n"])), function (_ref2) {
|
|
76
|
+
var space = _ref2.space,
|
|
77
|
+
horizontal = _ref2.horizontal,
|
|
78
|
+
vertical = _ref2.vertical,
|
|
79
|
+
top = _ref2.top,
|
|
80
|
+
right = _ref2.right,
|
|
81
|
+
bottom = _ref2.bottom,
|
|
82
|
+
left = _ref2.left;
|
|
83
|
+
return "\n margin: -".concat(getSpacingValue(top || vertical || space), " -").concat(getSpacingValue(right || horizontal || space), " -").concat(getSpacingValue(bottom || vertical || space), " -").concat(getSpacingValue(left || horizontal || space), ";\n");
|
|
84
|
+
});
|