@dxc-technology/halstack-react 0.0.0-b03a399 → 0.0.0-b0ab1e3
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/HalstackContext.d.ts +10 -0
- package/{ThemeContext.js → HalstackContext.js} +6 -6
- package/accordion/Accordion.stories.tsx +3 -3
- package/main.d.ts +2 -2
- package/main.js +5 -5
- package/package.json +1 -1
- package/useTheme.js +2 -2
- package/ThemeContext.d.ts +0 -10
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare const HalstackContext: React.Context<object>;
|
|
3
|
+
declare type HalstackProviderPropsType = {
|
|
4
|
+
theme?: object;
|
|
5
|
+
advancedTheme?: object;
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
};
|
|
8
|
+
declare const HalstackProvider: ({ theme, advancedTheme, children }: HalstackProviderPropsType) => JSX.Element;
|
|
9
|
+
export default HalstackContext;
|
|
10
|
+
export { HalstackProvider };
|
|
@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
-
exports["default"] = exports.
|
|
10
|
+
exports["default"] = exports.HalstackProvider = void 0;
|
|
11
11
|
|
|
12
12
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
13
|
|
|
@@ -27,7 +27,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
27
27
|
|
|
28
28
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
29
29
|
|
|
30
|
-
var
|
|
30
|
+
var HalstackContext = /*#__PURE__*/_react["default"].createContext(null);
|
|
31
31
|
|
|
32
32
|
var addLightness = function addLightness(hexColor, newLightness) {
|
|
33
33
|
try {
|
|
@@ -223,21 +223,21 @@ var parseTheme = function parseTheme(theme) {
|
|
|
223
223
|
return componentTokensCopy;
|
|
224
224
|
};
|
|
225
225
|
|
|
226
|
-
var
|
|
226
|
+
var HalstackProvider = function HalstackProvider(_ref) {
|
|
227
227
|
var theme = _ref.theme,
|
|
228
228
|
advancedTheme = _ref.advancedTheme,
|
|
229
229
|
children = _ref.children;
|
|
230
230
|
var parsedTheme = (0, _react.useMemo)(function () {
|
|
231
231
|
return theme && parseTheme(theme) || advancedTheme && parseAdvancedTheme(advancedTheme);
|
|
232
232
|
}, [theme, advancedTheme]);
|
|
233
|
-
return /*#__PURE__*/_react["default"].createElement(Halstack, null, /*#__PURE__*/_react["default"].createElement(
|
|
233
|
+
return /*#__PURE__*/_react["default"].createElement(Halstack, null, /*#__PURE__*/_react["default"].createElement(HalstackContext.Provider, {
|
|
234
234
|
value: parsedTheme
|
|
235
235
|
}, children));
|
|
236
236
|
};
|
|
237
237
|
|
|
238
|
-
exports.
|
|
238
|
+
exports.HalstackProvider = HalstackProvider;
|
|
239
239
|
|
|
240
240
|
var Halstack = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap\");\n"])));
|
|
241
241
|
|
|
242
|
-
var _default =
|
|
242
|
+
var _default = HalstackContext;
|
|
243
243
|
exports["default"] = _default;
|
|
@@ -5,7 +5,7 @@ import DxcTextInput from "../text-input/TextInput";
|
|
|
5
5
|
import DxcButton from "../button/Button";
|
|
6
6
|
import Title from "../../.storybook/components/Title";
|
|
7
7
|
import ExampleContainer from "../../.storybook/components/ExampleContainer";
|
|
8
|
-
import {
|
|
8
|
+
import { HalstackProvider } from "../HalstackContext";
|
|
9
9
|
|
|
10
10
|
export default {
|
|
11
11
|
title: "Accordion",
|
|
@@ -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
|
-
<
|
|
128
|
+
<HalstackProvider advancedTheme={advancedTheme}>
|
|
129
129
|
<DxcAccordion
|
|
130
130
|
label="Dark Accordion"
|
|
131
131
|
defaultIsExpanded
|
|
@@ -144,7 +144,7 @@ export const Chromatic = () => (
|
|
|
144
144
|
<DxcButton label="Submit" size="medium" />
|
|
145
145
|
</div>
|
|
146
146
|
</DxcAccordion>
|
|
147
|
-
</
|
|
147
|
+
</HalstackProvider>
|
|
148
148
|
</ExampleContainer>
|
|
149
149
|
<Title title="Paddings" theme="light" level={2} />
|
|
150
150
|
<ExampleContainer>
|
package/main.d.ts
CHANGED
|
@@ -42,6 +42,6 @@ import DxcRadioGroup from "./radio-group/RadioGroup";
|
|
|
42
42
|
import DxcBleed from "./bleed/Bleed";
|
|
43
43
|
import DxcInset from "./inset/Inset";
|
|
44
44
|
import DxcQuickNav from "./quick-nav/QuickNav";
|
|
45
|
-
import
|
|
45
|
+
import HalstackContext, { HalstackProvider } from "./HalstackContext";
|
|
46
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,
|
|
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, };
|
package/main.js
CHANGED
|
@@ -277,16 +277,16 @@ Object.defineProperty(exports, "DxcWizard", {
|
|
|
277
277
|
return _Wizard["default"];
|
|
278
278
|
}
|
|
279
279
|
});
|
|
280
|
-
Object.defineProperty(exports, "
|
|
280
|
+
Object.defineProperty(exports, "HalstackContext", {
|
|
281
281
|
enumerable: true,
|
|
282
282
|
get: function get() {
|
|
283
|
-
return
|
|
283
|
+
return _HalstackContext["default"];
|
|
284
284
|
}
|
|
285
285
|
});
|
|
286
|
-
Object.defineProperty(exports, "
|
|
286
|
+
Object.defineProperty(exports, "HalstackProvider", {
|
|
287
287
|
enumerable: true,
|
|
288
288
|
get: function get() {
|
|
289
|
-
return
|
|
289
|
+
return _HalstackContext.HalstackProvider;
|
|
290
290
|
}
|
|
291
291
|
});
|
|
292
292
|
|
|
@@ -378,7 +378,7 @@ var _Inset = _interopRequireDefault(require("./inset/Inset"));
|
|
|
378
378
|
|
|
379
379
|
var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
|
|
380
380
|
|
|
381
|
-
var
|
|
381
|
+
var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
|
|
382
382
|
|
|
383
383
|
var _BackgroundColorContext = require("./BackgroundColorContext");
|
|
384
384
|
|
package/package.json
CHANGED
package/useTheme.js
CHANGED
|
@@ -11,10 +11,10 @@ var _react = require("react");
|
|
|
11
11
|
|
|
12
12
|
var _variables = require("./common/variables.js");
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var _HalstackContext = _interopRequireDefault(require("./HalstackContext"));
|
|
15
15
|
|
|
16
16
|
var useTheme = function useTheme() {
|
|
17
|
-
var colorsTheme = (0, _react.useContext)(
|
|
17
|
+
var colorsTheme = (0, _react.useContext)(_HalstackContext["default"]);
|
|
18
18
|
return colorsTheme || _variables.componentTokens;
|
|
19
19
|
};
|
|
20
20
|
|
package/ThemeContext.d.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
declare const ThemeContext: React.Context<object>;
|
|
3
|
-
declare type ThemeProviderPropsType = {
|
|
4
|
-
theme?: object;
|
|
5
|
-
advancedTheme?: object;
|
|
6
|
-
children: React.ReactNode;
|
|
7
|
-
};
|
|
8
|
-
declare const ThemeProvider: ({ theme, advancedTheme, children }: ThemeProviderPropsType) => JSX.Element;
|
|
9
|
-
export default ThemeContext;
|
|
10
|
-
export { ThemeProvider };
|