@nulogy/components 11.2.0 → 11.3.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/dist/main.js +71 -33
- package/dist/main.module.js +71 -34
- package/dist/src/TopBar/TopBar.d.ts +16 -0
- package/dist/src/TopBar/TopBar.styled.d.ts +18 -0
- package/dist/src/TopBar/components/BackLink.d.ts +7 -0
- package/dist/src/TopBar/components/Menu.d.ts +6 -0
- package/dist/src/TopBar/components/MenuItem.d.ts +11 -0
- package/dist/src/TopBar/components/PageTitle.d.ts +3 -0
- package/dist/src/TopBar/constants.d.ts +3 -0
- package/dist/src/TopBar/stories/TopBar.backButton.story.d.ts +19 -0
- package/dist/src/TopBar/stories/TopBar.menu.story.d.ts +22 -0
- package/dist/src/TopBar/stories/TopBar.story.d.ts +19 -0
- package/dist/src/TopBar/stories/fixtures.d.ts +2 -0
- package/dist/src/hooks/useMediaQuery/useMediaQuery.d.ts +3 -1
- package/dist/src/index.d.ts +1 -0
- package/dist/src/theme/theme.type.d.ts +6 -0
- package/dist/src/theme/useNDSTheme.d.ts +6 -0
- package/package.json +5 -4
package/dist/main.js
CHANGED
|
@@ -45028,57 +45028,61 @@
|
|
|
45028
45028
|
};
|
|
45029
45029
|
}, addStyledProps);
|
|
45030
45030
|
|
|
45031
|
-
|
|
45032
|
-
var
|
|
45033
|
-
children = _a.children,
|
|
45034
|
-
environment = _a.environment,
|
|
45035
|
-
props = __rest$3(_a, ["navBar", "children", "environment"]);
|
|
45036
|
-
|
|
45037
|
-
return /*#__PURE__*/React__default["default"].createElement(Flex, Object.assign({
|
|
45038
|
-
flexDirection: "column",
|
|
45039
|
-
minHeight: "100vh"
|
|
45040
|
-
}, props), /*#__PURE__*/React__default["default"].createElement(Box, {
|
|
45041
|
-
position: "sticky",
|
|
45042
|
-
top: "0",
|
|
45043
|
-
zIndex: "navBar"
|
|
45044
|
-
}, environment && /*#__PURE__*/React__default["default"].createElement(EnvironmentBanner, null, environment), navBar), /*#__PURE__*/React__default["default"].createElement(Flex, {
|
|
45045
|
-
flexDirection: "column",
|
|
45046
|
-
position: "relative",
|
|
45047
|
-
flexGrow: 1
|
|
45048
|
-
}, children));
|
|
45049
|
-
};
|
|
45031
|
+
function useMediaQuery(q) {
|
|
45032
|
+
var _a;
|
|
45050
45033
|
|
|
45051
|
-
function useMediaQuery(query) {
|
|
45052
45034
|
var isUnsupported = typeof window === "undefined" || typeof window.matchMedia === "undefined";
|
|
45053
|
-
|
|
45054
|
-
var
|
|
45035
|
+
var theme = styled.useTheme();
|
|
45036
|
+
var query = ((_a = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _a === void 0 ? void 0 : _a[q]) ? "(min-width: " + theme.breakpoints[q] + ")" : q;
|
|
45037
|
+
var getMatches = React.useCallback(function (query) {
|
|
45055
45038
|
if (isUnsupported) {
|
|
45056
45039
|
return false;
|
|
45057
45040
|
}
|
|
45058
45041
|
|
|
45059
45042
|
return window.matchMedia(query).matches;
|
|
45060
|
-
};
|
|
45043
|
+
}, [isUnsupported]);
|
|
45061
45044
|
|
|
45062
45045
|
var _useState = React.useState(getMatches(query)),
|
|
45063
45046
|
matches = _useState[0],
|
|
45064
45047
|
setMatches = _useState[1];
|
|
45065
45048
|
|
|
45066
|
-
function handleChange() {
|
|
45067
|
-
setMatches(getMatches(query));
|
|
45068
|
-
}
|
|
45069
|
-
|
|
45070
45049
|
React.useEffect(function () {
|
|
45071
45050
|
if (isUnsupported) return;
|
|
45072
45051
|
var matchMedia = window.matchMedia(query);
|
|
45052
|
+
|
|
45053
|
+
function handleChange() {
|
|
45054
|
+
setMatches(getMatches(query));
|
|
45055
|
+
}
|
|
45056
|
+
|
|
45073
45057
|
handleChange();
|
|
45074
45058
|
matchMedia.addEventListener("change", handleChange);
|
|
45075
45059
|
return function () {
|
|
45076
45060
|
matchMedia.removeEventListener("change", handleChange);
|
|
45077
45061
|
};
|
|
45078
|
-
}, [query]);
|
|
45062
|
+
}, [getMatches, isUnsupported, query]);
|
|
45079
45063
|
return matches;
|
|
45080
45064
|
}
|
|
45081
45065
|
|
|
45066
|
+
var ApplicationFrame = function ApplicationFrame(_a) {
|
|
45067
|
+
var navBar = _a.navBar,
|
|
45068
|
+
children = _a.children,
|
|
45069
|
+
environment = _a.environment,
|
|
45070
|
+
props = __rest$3(_a, ["navBar", "children", "environment"]);
|
|
45071
|
+
|
|
45072
|
+
return /*#__PURE__*/React__default["default"].createElement(Flex, Object.assign({
|
|
45073
|
+
flexDirection: "column",
|
|
45074
|
+
minHeight: "100vh"
|
|
45075
|
+
}, props), /*#__PURE__*/React__default["default"].createElement(Box, {
|
|
45076
|
+
position: "sticky",
|
|
45077
|
+
top: "0",
|
|
45078
|
+
zIndex: "navBar"
|
|
45079
|
+
}, environment && /*#__PURE__*/React__default["default"].createElement(EnvironmentBanner, null, environment), navBar), /*#__PURE__*/React__default["default"].createElement(Flex, {
|
|
45080
|
+
flexDirection: "column",
|
|
45081
|
+
position: "relative",
|
|
45082
|
+
flexGrow: 1
|
|
45083
|
+
}, children));
|
|
45084
|
+
};
|
|
45085
|
+
|
|
45082
45086
|
var Header = function Header(_a) {
|
|
45083
45087
|
var _b, _c;
|
|
45084
45088
|
|
|
@@ -49829,6 +49833,7 @@
|
|
|
49829
49833
|
|
|
49830
49834
|
var de_DE = {
|
|
49831
49835
|
"close menu": "Men\xFC schlie\xDFen",
|
|
49836
|
+
"menu options": "Men\xFCoptionen",
|
|
49832
49837
|
close: "Schlie\xDFen",
|
|
49833
49838
|
"collapse row": "Zeile verbergen",
|
|
49834
49839
|
"date range": "Datumsbereich",
|
|
@@ -49870,6 +49875,7 @@
|
|
|
49870
49875
|
};
|
|
49871
49876
|
var en_US = {
|
|
49872
49877
|
"close menu": "Close menu",
|
|
49878
|
+
"menu options": "Menu options",
|
|
49873
49879
|
close: "Close",
|
|
49874
49880
|
"collapse row": "Collapse row",
|
|
49875
49881
|
"date range": "Date range",
|
|
@@ -49911,6 +49917,7 @@
|
|
|
49911
49917
|
};
|
|
49912
49918
|
var es_MX = {
|
|
49913
49919
|
"close menu": "Cerrar men\xFA",
|
|
49920
|
+
"menu options": "Opciones del men\xFA",
|
|
49914
49921
|
close: "Cerrar",
|
|
49915
49922
|
"collapse row": "Colapsar fila",
|
|
49916
49923
|
"date range": "Rango de fechas",
|
|
@@ -49952,6 +49959,7 @@
|
|
|
49952
49959
|
};
|
|
49953
49960
|
var fr_FR = {
|
|
49954
49961
|
"close menu": "Fermer le menu",
|
|
49962
|
+
"menu options": "Options du menu",
|
|
49955
49963
|
close: "Fermer",
|
|
49956
49964
|
"collapse row": "R\xE9duire la ligne",
|
|
49957
49965
|
"date range": "Plage de dates",
|
|
@@ -49993,6 +50001,7 @@
|
|
|
49993
50001
|
};
|
|
49994
50002
|
var nl_NL = {
|
|
49995
50003
|
"close menu": "Menu sluiten",
|
|
50004
|
+
"menu options": "Menu-opties",
|
|
49996
50005
|
close: "Sluiten",
|
|
49997
50006
|
"collapse row": "Rij samenvouwen",
|
|
49998
50007
|
"date range": "Datumbereik",
|
|
@@ -50034,6 +50043,7 @@
|
|
|
50034
50043
|
};
|
|
50035
50044
|
var pl_PL = {
|
|
50036
50045
|
"close menu": "Zamknij menu",
|
|
50046
|
+
"menu options": "Opcje menu",
|
|
50037
50047
|
close: "Zamknij",
|
|
50038
50048
|
"collapse row": "Zwi\u0144 wiersz",
|
|
50039
50049
|
"date range": "Zakres daty",
|
|
@@ -50075,6 +50085,7 @@
|
|
|
50075
50085
|
};
|
|
50076
50086
|
var pt_BR = {
|
|
50077
50087
|
"close menu": "Fechar menu",
|
|
50088
|
+
"menu options": "Op\xE7\xF5es do menu",
|
|
50078
50089
|
close: "Fechar",
|
|
50079
50090
|
"collapse row": "Recolher fila",
|
|
50080
50091
|
"date range": "Intervalo de datas",
|
|
@@ -50115,7 +50126,8 @@
|
|
|
50115
50126
|
"time range": "Intervalo de hor\xE1rios"
|
|
50116
50127
|
};
|
|
50117
50128
|
var ro_RO = {
|
|
50118
|
-
"close menu": "
|
|
50129
|
+
"close menu": "\xCEnchidere meniu",
|
|
50130
|
+
"menu options": "Op\u021Biuni meniu",
|
|
50119
50131
|
close: "\xCEnchidere",
|
|
50120
50132
|
"collapse row": "Restr\xE2ngere r\xE2nd",
|
|
50121
50133
|
"date range": "Interval dat\u0103",
|
|
@@ -50157,6 +50169,7 @@
|
|
|
50157
50169
|
};
|
|
50158
50170
|
var zh_CN = {
|
|
50159
50171
|
"close menu": "\u5173\u95ED\u83DC\u5355",
|
|
50172
|
+
"menu options": "\u83DC\u5355\u9009\u9879",
|
|
50160
50173
|
close: "\u5173\u95ED",
|
|
50161
50174
|
"collapse row": "\u6298\u53E0\u884C",
|
|
50162
50175
|
"date range": "\u65E5\u671F\u8303\u56F4",
|
|
@@ -50321,7 +50334,13 @@
|
|
|
50321
50334
|
small: "768px",
|
|
50322
50335
|
medium: "1024px",
|
|
50323
50336
|
large: "1360px",
|
|
50324
|
-
extraLarge: "1920px"
|
|
50337
|
+
extraLarge: "1920px",
|
|
50338
|
+
phonePortrait: "320px",
|
|
50339
|
+
phoneLandscape: "640px",
|
|
50340
|
+
tabletPortrait: "768px",
|
|
50341
|
+
tabletLandscape: "1024px",
|
|
50342
|
+
laptop: "1280px",
|
|
50343
|
+
desktop: "1440px"
|
|
50325
50344
|
},
|
|
50326
50345
|
zIndices: {
|
|
50327
50346
|
content: 100,
|
|
@@ -50469,7 +50488,13 @@
|
|
|
50469
50488
|
small: "768px",
|
|
50470
50489
|
medium: "1024px",
|
|
50471
50490
|
large: "1360px",
|
|
50472
|
-
extraLarge: "1920px"
|
|
50491
|
+
extraLarge: "1920px",
|
|
50492
|
+
phonePortrait: "320px",
|
|
50493
|
+
phoneLandscape: "640px",
|
|
50494
|
+
tabletPortrait: "768px",
|
|
50495
|
+
tabletLandscape: "1024px",
|
|
50496
|
+
laptop: "1280px",
|
|
50497
|
+
desktop: "1440px"
|
|
50473
50498
|
},
|
|
50474
50499
|
zIndices: {
|
|
50475
50500
|
content: 100,
|
|
@@ -50617,7 +50642,13 @@
|
|
|
50617
50642
|
small: "768px",
|
|
50618
50643
|
medium: "1024px",
|
|
50619
50644
|
large: "1360px",
|
|
50620
|
-
extraLarge: "1920px"
|
|
50645
|
+
extraLarge: "1920px",
|
|
50646
|
+
phonePortrait: "320px",
|
|
50647
|
+
phoneLandscape: "640px",
|
|
50648
|
+
tabletPortrait: "768px",
|
|
50649
|
+
tabletLandscape: "1024px",
|
|
50650
|
+
laptop: "1280px",
|
|
50651
|
+
desktop: "1440px"
|
|
50621
50652
|
},
|
|
50622
50653
|
zIndices: {
|
|
50623
50654
|
content: 100,
|
|
@@ -50765,7 +50796,13 @@
|
|
|
50765
50796
|
small: "768px",
|
|
50766
50797
|
medium: "1024px",
|
|
50767
50798
|
large: "1360px",
|
|
50768
|
-
extraLarge: "1920px"
|
|
50799
|
+
extraLarge: "1920px",
|
|
50800
|
+
phonePortrait: "320px",
|
|
50801
|
+
phoneLandscape: "640px",
|
|
50802
|
+
tabletPortrait: "768px",
|
|
50803
|
+
tabletLandscape: "1024px",
|
|
50804
|
+
laptop: "1280px",
|
|
50805
|
+
desktop: "1440px"
|
|
50769
50806
|
},
|
|
50770
50807
|
zIndices: {
|
|
50771
50808
|
content: 100,
|
|
@@ -54558,6 +54595,7 @@
|
|
|
54558
54595
|
exports.TruncatedText = TruncatedText;
|
|
54559
54596
|
exports.addStyledProps = addStyledProps;
|
|
54560
54597
|
exports.toast = toast;
|
|
54598
|
+
exports.useMediaQuery = useMediaQuery;
|
|
54561
54599
|
exports.useWindowDimensions = useWindowDimensions;
|
|
54562
54600
|
|
|
54563
54601
|
Object.defineProperty(exports, '__esModule', { value: true });
|
package/dist/main.module.js
CHANGED
|
@@ -45011,57 +45011,61 @@ var Divider$1 = styled.hr.withConfig({
|
|
|
45011
45011
|
};
|
|
45012
45012
|
}, addStyledProps);
|
|
45013
45013
|
|
|
45014
|
-
|
|
45015
|
-
var
|
|
45016
|
-
children = _a.children,
|
|
45017
|
-
environment = _a.environment,
|
|
45018
|
-
props = __rest$3(_a, ["navBar", "children", "environment"]);
|
|
45019
|
-
|
|
45020
|
-
return /*#__PURE__*/React__default.createElement(Flex, Object.assign({
|
|
45021
|
-
flexDirection: "column",
|
|
45022
|
-
minHeight: "100vh"
|
|
45023
|
-
}, props), /*#__PURE__*/React__default.createElement(Box, {
|
|
45024
|
-
position: "sticky",
|
|
45025
|
-
top: "0",
|
|
45026
|
-
zIndex: "navBar"
|
|
45027
|
-
}, environment && /*#__PURE__*/React__default.createElement(EnvironmentBanner, null, environment), navBar), /*#__PURE__*/React__default.createElement(Flex, {
|
|
45028
|
-
flexDirection: "column",
|
|
45029
|
-
position: "relative",
|
|
45030
|
-
flexGrow: 1
|
|
45031
|
-
}, children));
|
|
45032
|
-
};
|
|
45014
|
+
function useMediaQuery(q) {
|
|
45015
|
+
var _a;
|
|
45033
45016
|
|
|
45034
|
-
function useMediaQuery(query) {
|
|
45035
45017
|
var isUnsupported = typeof window === "undefined" || typeof window.matchMedia === "undefined";
|
|
45036
|
-
|
|
45037
|
-
var
|
|
45018
|
+
var theme = useTheme();
|
|
45019
|
+
var query = ((_a = theme === null || theme === void 0 ? void 0 : theme.breakpoints) === null || _a === void 0 ? void 0 : _a[q]) ? "(min-width: " + theme.breakpoints[q] + ")" : q;
|
|
45020
|
+
var getMatches = useCallback(function (query) {
|
|
45038
45021
|
if (isUnsupported) {
|
|
45039
45022
|
return false;
|
|
45040
45023
|
}
|
|
45041
45024
|
|
|
45042
45025
|
return window.matchMedia(query).matches;
|
|
45043
|
-
};
|
|
45026
|
+
}, [isUnsupported]);
|
|
45044
45027
|
|
|
45045
45028
|
var _useState = useState(getMatches(query)),
|
|
45046
45029
|
matches = _useState[0],
|
|
45047
45030
|
setMatches = _useState[1];
|
|
45048
45031
|
|
|
45049
|
-
function handleChange() {
|
|
45050
|
-
setMatches(getMatches(query));
|
|
45051
|
-
}
|
|
45052
|
-
|
|
45053
45032
|
useEffect(function () {
|
|
45054
45033
|
if (isUnsupported) return;
|
|
45055
45034
|
var matchMedia = window.matchMedia(query);
|
|
45035
|
+
|
|
45036
|
+
function handleChange() {
|
|
45037
|
+
setMatches(getMatches(query));
|
|
45038
|
+
}
|
|
45039
|
+
|
|
45056
45040
|
handleChange();
|
|
45057
45041
|
matchMedia.addEventListener("change", handleChange);
|
|
45058
45042
|
return function () {
|
|
45059
45043
|
matchMedia.removeEventListener("change", handleChange);
|
|
45060
45044
|
};
|
|
45061
|
-
}, [query]);
|
|
45045
|
+
}, [getMatches, isUnsupported, query]);
|
|
45062
45046
|
return matches;
|
|
45063
45047
|
}
|
|
45064
45048
|
|
|
45049
|
+
var ApplicationFrame = function ApplicationFrame(_a) {
|
|
45050
|
+
var navBar = _a.navBar,
|
|
45051
|
+
children = _a.children,
|
|
45052
|
+
environment = _a.environment,
|
|
45053
|
+
props = __rest$3(_a, ["navBar", "children", "environment"]);
|
|
45054
|
+
|
|
45055
|
+
return /*#__PURE__*/React__default.createElement(Flex, Object.assign({
|
|
45056
|
+
flexDirection: "column",
|
|
45057
|
+
minHeight: "100vh"
|
|
45058
|
+
}, props), /*#__PURE__*/React__default.createElement(Box, {
|
|
45059
|
+
position: "sticky",
|
|
45060
|
+
top: "0",
|
|
45061
|
+
zIndex: "navBar"
|
|
45062
|
+
}, environment && /*#__PURE__*/React__default.createElement(EnvironmentBanner, null, environment), navBar), /*#__PURE__*/React__default.createElement(Flex, {
|
|
45063
|
+
flexDirection: "column",
|
|
45064
|
+
position: "relative",
|
|
45065
|
+
flexGrow: 1
|
|
45066
|
+
}, children));
|
|
45067
|
+
};
|
|
45068
|
+
|
|
45065
45069
|
var Header = function Header(_a) {
|
|
45066
45070
|
var _b, _c;
|
|
45067
45071
|
|
|
@@ -49812,6 +49816,7 @@ var i18next = new I18n();
|
|
|
49812
49816
|
|
|
49813
49817
|
var de_DE = {
|
|
49814
49818
|
"close menu": "Men\xFC schlie\xDFen",
|
|
49819
|
+
"menu options": "Men\xFCoptionen",
|
|
49815
49820
|
close: "Schlie\xDFen",
|
|
49816
49821
|
"collapse row": "Zeile verbergen",
|
|
49817
49822
|
"date range": "Datumsbereich",
|
|
@@ -49853,6 +49858,7 @@ var de_DE = {
|
|
|
49853
49858
|
};
|
|
49854
49859
|
var en_US = {
|
|
49855
49860
|
"close menu": "Close menu",
|
|
49861
|
+
"menu options": "Menu options",
|
|
49856
49862
|
close: "Close",
|
|
49857
49863
|
"collapse row": "Collapse row",
|
|
49858
49864
|
"date range": "Date range",
|
|
@@ -49894,6 +49900,7 @@ var en_US = {
|
|
|
49894
49900
|
};
|
|
49895
49901
|
var es_MX = {
|
|
49896
49902
|
"close menu": "Cerrar men\xFA",
|
|
49903
|
+
"menu options": "Opciones del men\xFA",
|
|
49897
49904
|
close: "Cerrar",
|
|
49898
49905
|
"collapse row": "Colapsar fila",
|
|
49899
49906
|
"date range": "Rango de fechas",
|
|
@@ -49935,6 +49942,7 @@ var es_MX = {
|
|
|
49935
49942
|
};
|
|
49936
49943
|
var fr_FR = {
|
|
49937
49944
|
"close menu": "Fermer le menu",
|
|
49945
|
+
"menu options": "Options du menu",
|
|
49938
49946
|
close: "Fermer",
|
|
49939
49947
|
"collapse row": "R\xE9duire la ligne",
|
|
49940
49948
|
"date range": "Plage de dates",
|
|
@@ -49976,6 +49984,7 @@ var fr_FR = {
|
|
|
49976
49984
|
};
|
|
49977
49985
|
var nl_NL = {
|
|
49978
49986
|
"close menu": "Menu sluiten",
|
|
49987
|
+
"menu options": "Menu-opties",
|
|
49979
49988
|
close: "Sluiten",
|
|
49980
49989
|
"collapse row": "Rij samenvouwen",
|
|
49981
49990
|
"date range": "Datumbereik",
|
|
@@ -50017,6 +50026,7 @@ var nl_NL = {
|
|
|
50017
50026
|
};
|
|
50018
50027
|
var pl_PL = {
|
|
50019
50028
|
"close menu": "Zamknij menu",
|
|
50029
|
+
"menu options": "Opcje menu",
|
|
50020
50030
|
close: "Zamknij",
|
|
50021
50031
|
"collapse row": "Zwi\u0144 wiersz",
|
|
50022
50032
|
"date range": "Zakres daty",
|
|
@@ -50058,6 +50068,7 @@ var pl_PL = {
|
|
|
50058
50068
|
};
|
|
50059
50069
|
var pt_BR = {
|
|
50060
50070
|
"close menu": "Fechar menu",
|
|
50071
|
+
"menu options": "Op\xE7\xF5es do menu",
|
|
50061
50072
|
close: "Fechar",
|
|
50062
50073
|
"collapse row": "Recolher fila",
|
|
50063
50074
|
"date range": "Intervalo de datas",
|
|
@@ -50098,7 +50109,8 @@ var pt_BR = {
|
|
|
50098
50109
|
"time range": "Intervalo de hor\xE1rios"
|
|
50099
50110
|
};
|
|
50100
50111
|
var ro_RO = {
|
|
50101
|
-
"close menu": "
|
|
50112
|
+
"close menu": "\xCEnchidere meniu",
|
|
50113
|
+
"menu options": "Op\u021Biuni meniu",
|
|
50102
50114
|
close: "\xCEnchidere",
|
|
50103
50115
|
"collapse row": "Restr\xE2ngere r\xE2nd",
|
|
50104
50116
|
"date range": "Interval dat\u0103",
|
|
@@ -50140,6 +50152,7 @@ var ro_RO = {
|
|
|
50140
50152
|
};
|
|
50141
50153
|
var zh_CN = {
|
|
50142
50154
|
"close menu": "\u5173\u95ED\u83DC\u5355",
|
|
50155
|
+
"menu options": "\u83DC\u5355\u9009\u9879",
|
|
50143
50156
|
close: "\u5173\u95ED",
|
|
50144
50157
|
"collapse row": "\u6298\u53E0\u884C",
|
|
50145
50158
|
"date range": "\u65E5\u671F\u8303\u56F4",
|
|
@@ -50304,7 +50317,13 @@ var themes = {
|
|
|
50304
50317
|
small: "768px",
|
|
50305
50318
|
medium: "1024px",
|
|
50306
50319
|
large: "1360px",
|
|
50307
|
-
extraLarge: "1920px"
|
|
50320
|
+
extraLarge: "1920px",
|
|
50321
|
+
phonePortrait: "320px",
|
|
50322
|
+
phoneLandscape: "640px",
|
|
50323
|
+
tabletPortrait: "768px",
|
|
50324
|
+
tabletLandscape: "1024px",
|
|
50325
|
+
laptop: "1280px",
|
|
50326
|
+
desktop: "1440px"
|
|
50308
50327
|
},
|
|
50309
50328
|
zIndices: {
|
|
50310
50329
|
content: 100,
|
|
@@ -50452,7 +50471,13 @@ var themes = {
|
|
|
50452
50471
|
small: "768px",
|
|
50453
50472
|
medium: "1024px",
|
|
50454
50473
|
large: "1360px",
|
|
50455
|
-
extraLarge: "1920px"
|
|
50474
|
+
extraLarge: "1920px",
|
|
50475
|
+
phonePortrait: "320px",
|
|
50476
|
+
phoneLandscape: "640px",
|
|
50477
|
+
tabletPortrait: "768px",
|
|
50478
|
+
tabletLandscape: "1024px",
|
|
50479
|
+
laptop: "1280px",
|
|
50480
|
+
desktop: "1440px"
|
|
50456
50481
|
},
|
|
50457
50482
|
zIndices: {
|
|
50458
50483
|
content: 100,
|
|
@@ -50600,7 +50625,13 @@ var themes = {
|
|
|
50600
50625
|
small: "768px",
|
|
50601
50626
|
medium: "1024px",
|
|
50602
50627
|
large: "1360px",
|
|
50603
|
-
extraLarge: "1920px"
|
|
50628
|
+
extraLarge: "1920px",
|
|
50629
|
+
phonePortrait: "320px",
|
|
50630
|
+
phoneLandscape: "640px",
|
|
50631
|
+
tabletPortrait: "768px",
|
|
50632
|
+
tabletLandscape: "1024px",
|
|
50633
|
+
laptop: "1280px",
|
|
50634
|
+
desktop: "1440px"
|
|
50604
50635
|
},
|
|
50605
50636
|
zIndices: {
|
|
50606
50637
|
content: 100,
|
|
@@ -50748,7 +50779,13 @@ var themes = {
|
|
|
50748
50779
|
small: "768px",
|
|
50749
50780
|
medium: "1024px",
|
|
50750
50781
|
large: "1360px",
|
|
50751
|
-
extraLarge: "1920px"
|
|
50782
|
+
extraLarge: "1920px",
|
|
50783
|
+
phonePortrait: "320px",
|
|
50784
|
+
phoneLandscape: "640px",
|
|
50785
|
+
tabletPortrait: "768px",
|
|
50786
|
+
tabletLandscape: "1024px",
|
|
50787
|
+
laptop: "1280px",
|
|
50788
|
+
desktop: "1440px"
|
|
50752
50789
|
},
|
|
50753
50790
|
zIndices: {
|
|
50754
50791
|
content: 100,
|
|
@@ -54442,4 +54479,4 @@ var TruncatedText = function TruncatedText(_a) {
|
|
|
54442
54479
|
}, props), children);
|
|
54443
54480
|
};
|
|
54444
54481
|
|
|
54445
|
-
export { ALL_NDS_LOCALES, Alert$1 as Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Banner, BottomSheet, BottomSheetParts, Box, BrandLogoContainer, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DesktopMenu, Divider$1 as Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header, Heading1, Heading2, Heading3, Heading4, HelpText$1 as HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input, Link, List, ListItem, LoadingAnimation, MenuTrigger, Modal, NDSProvider, NavBarBackground, NotificationTypes, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption$1 as SelectOption, Sidebar, SmallNavBar, SortingTable, StatusIndicator, StatusIndicatorValues, Summary, SummaryDivider, SummaryItem, Switch$1 as Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToastContainer, ToggleComponent as Toggle, Tooltip, TruncatedText, addStyledProps, toast, useWindowDimensions };
|
|
54482
|
+
export { ALL_NDS_LOCALES, Alert$1 as Alert, AnimatedBox, ApplicationFrame, AsyncSelect, Banner, BottomSheet, BottomSheetParts, Box, BrandLogoContainer, NavBar as BrandedNavBar, Branding, Breadcrumbs, Button, ButtonGroup, Card, CardSet, Checkbox, CheckboxGroup, ControlIcon, DangerButton, DatePicker, DateRange, DesktopMenu, Divider$1 as Divider, DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText, EnvironmentBanner, Field, FieldLabel, Fieldset, Flex, Form, FormSection, Header, Heading1, Heading2, Heading3, Heading4, HelpText$1 as HelpText, Icon, IconicButton, InlineIcon, InlineValidation, Input, Link, List, ListItem, LoadingAnimation, MenuTrigger, Modal, NDSProvider, NavBarBackground, NotificationTypes, Overlay, Page, Pagination, PrimaryButton, QuietButton, Radio, RadioGroup, RangeContainer, RequirementText, ReactSelect as Select, SelectClearIndicator, SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption$1 as SelectOption, Sidebar, SmallNavBar, SortingTable, StatusIndicator, StatusIndicatorValues, Summary, SummaryDivider, SummaryItem, Switch$1 as Switch, Switcher, Tab, Table, Tabs, Text, Textarea, TimePicker, TimeRange, Toast, ToastContainer, ToggleComponent as Toggle, Tooltip, TruncatedText, addStyledProps, toast, useMediaQuery, useWindowDimensions };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { BackLink } from "./components/BackLink";
|
|
3
|
+
import { Menu } from "./components/Menu";
|
|
4
|
+
import { MenuItem } from "./components/MenuItem";
|
|
5
|
+
import { PageTitle } from "./components/PageTitle";
|
|
6
|
+
export interface TopBarProps {
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
export default function Root({ children }: TopBarProps): React.JSX.Element;
|
|
10
|
+
export declare const TopBar: {
|
|
11
|
+
Root: typeof Root;
|
|
12
|
+
PageTitle: typeof PageTitle;
|
|
13
|
+
BackLink: typeof BackLink;
|
|
14
|
+
Menu: typeof Menu;
|
|
15
|
+
MenuItem: typeof MenuItem;
|
|
16
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { StyledProps } from "../StyledProps";
|
|
3
|
+
declare const MenuItemList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
+
declare const Header: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
|
|
5
|
+
declare const Navigation: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {}, never>;
|
|
6
|
+
declare const StylelessButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledProps, never>;
|
|
7
|
+
declare const MenuButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledProps, never>;
|
|
8
|
+
declare const NavigationItemsList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
|
|
9
|
+
declare const StyledBackLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {}, never>;
|
|
10
|
+
declare const StyledPageTitle: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
|
|
11
|
+
declare const Overlay: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<import("@reach/utils/dist/declarations/src/polymorphic").Merge<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
12
|
+
ref?: import("react").Ref<HTMLDivElement>;
|
|
13
|
+
}, import("@reach/dialog/dist/declarations/src").DialogOverlayProps & {
|
|
14
|
+
as?: "div";
|
|
15
|
+
}>>, import("styled-components").DefaultTheme, {}, never>;
|
|
16
|
+
declare const TileLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {}, never>;
|
|
17
|
+
declare const StyledMenuItem: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLLIElement, import("framer-motion").HTMLMotionProps<"li">>, import("styled-components").DefaultTheme, {}, never>;
|
|
18
|
+
export { Navigation, Header, NavigationItemsList, StyledBackLink, StyledPageTitle, Overlay, TileLink, StylelessButton, MenuItemList, MenuButton, StyledMenuItem, };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React, { ComponentProps } from "react";
|
|
2
|
+
import { MaxWidthProps } from "styled-system";
|
|
3
|
+
import { StyledBackLink } from "../TopBar.styled";
|
|
4
|
+
interface BackLinkProps extends MaxWidthProps, ComponentProps<typeof StyledBackLink> {
|
|
5
|
+
}
|
|
6
|
+
export declare function BackLink({ children, maxWidth, ...props }: BackLinkProps): React.JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { IconName } from "@nulogy/icons";
|
|
2
|
+
import React, { ComponentProps } from "react";
|
|
3
|
+
import { TileLink } from "../TopBar.styled";
|
|
4
|
+
interface MenuItemProps extends ComponentProps<typeof TileLink> {
|
|
5
|
+
title: string;
|
|
6
|
+
description?: string;
|
|
7
|
+
icon: IconName;
|
|
8
|
+
}
|
|
9
|
+
export declare function MenuItem({ description, title, icon, ...props }: MenuItemProps): React.JSX.Element;
|
|
10
|
+
export type MenuItems = MenuItemProps[];
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare const _default: {
|
|
3
|
+
parameters: {
|
|
4
|
+
layout: string;
|
|
5
|
+
chromatic: {
|
|
6
|
+
modes: {
|
|
7
|
+
locale: string;
|
|
8
|
+
desktopScale: string;
|
|
9
|
+
theme: string;
|
|
10
|
+
viewports: number[];
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
title: string;
|
|
15
|
+
};
|
|
16
|
+
export default _default;
|
|
17
|
+
export declare const WithNoLabel: () => React.JSX.Element;
|
|
18
|
+
export declare const WithACustomMaxWidth: () => React.JSX.Element;
|
|
19
|
+
export declare const WithARouterLink: () => React.JSX.Element;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare const _default: {
|
|
3
|
+
parameters: {
|
|
4
|
+
layout: string;
|
|
5
|
+
chromatic: {
|
|
6
|
+
delay: number;
|
|
7
|
+
modes: {
|
|
8
|
+
locale: string;
|
|
9
|
+
desktopScale: string;
|
|
10
|
+
theme: string;
|
|
11
|
+
viewports: number[];
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
title: string;
|
|
16
|
+
};
|
|
17
|
+
export default _default;
|
|
18
|
+
export declare const withDefaultOpenMenu: () => React.JSX.Element;
|
|
19
|
+
export declare const WithOneMenuItem: () => React.JSX.Element;
|
|
20
|
+
export declare const WithTwoItems: () => React.JSX.Element;
|
|
21
|
+
export declare const WithThreeItems: () => React.JSX.Element;
|
|
22
|
+
export declare const WithRouterLinks: () => React.JSX.Element;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare const _default: {
|
|
3
|
+
title: string;
|
|
4
|
+
parameters: {
|
|
5
|
+
layout: string;
|
|
6
|
+
chromatic: {
|
|
7
|
+
modes: {
|
|
8
|
+
locale: string;
|
|
9
|
+
desktopScale: string;
|
|
10
|
+
theme: string;
|
|
11
|
+
viewports: number[];
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
export default _default;
|
|
17
|
+
export declare const Default: () => React.JSX.Element;
|
|
18
|
+
export declare const WithALongTitle: () => React.JSX.Element;
|
|
19
|
+
export declare const WithAnApplicationFrame: () => React.JSX.Element;
|
package/dist/src/index.d.ts
CHANGED
|
@@ -20,6 +20,7 @@ export { DropdownButton, DropdownItem, DropdownLink, DropdownMenu, DropdownText
|
|
|
20
20
|
export { FieldLabel, HelpText, RequirementText } from "./FieldLabel";
|
|
21
21
|
export { Flex } from "./Flex";
|
|
22
22
|
export { Field, Fieldset, Form, FormSection } from "./Form";
|
|
23
|
+
export { default as useMediaQuery } from "./hooks/useMediaQuery";
|
|
23
24
|
export { Icon, InlineIcon } from "./Icon";
|
|
24
25
|
export { Input } from "./Input";
|
|
25
26
|
export { ApplicationFrame, Header, Page, Sidebar } from "./Layout";
|
|
@@ -112,6 +112,12 @@ export interface Breakpoints {
|
|
|
112
112
|
medium: string;
|
|
113
113
|
large: string;
|
|
114
114
|
extraLarge: string;
|
|
115
|
+
phonePortrait: string;
|
|
116
|
+
phoneLandscape: string;
|
|
117
|
+
tabletPortrait: string;
|
|
118
|
+
tabletLandscape: string;
|
|
119
|
+
laptop: string;
|
|
120
|
+
desktop: string;
|
|
115
121
|
}
|
|
116
122
|
interface ZIndices {
|
|
117
123
|
content: number;
|
|
@@ -8,6 +8,12 @@ export declare const buildBreakPoints: (breakpointsConfig: Readonly<Breakpoints>
|
|
|
8
8
|
medium: string;
|
|
9
9
|
large: string;
|
|
10
10
|
extraLarge: string;
|
|
11
|
+
phonePortrait: string;
|
|
12
|
+
phoneLandscape: string;
|
|
13
|
+
tabletPortrait: string;
|
|
14
|
+
tabletLandscape: string;
|
|
15
|
+
laptop: string;
|
|
16
|
+
desktop: string;
|
|
11
17
|
};
|
|
12
18
|
export declare const getThemeByVariant: (variant: ComponentVariant, isTabletSize: boolean, featureFlags: FeatureFlags) => DefaultNDSThemeType;
|
|
13
19
|
export declare function useNDSTheme(variant?: ComponentVariant, customTheme?: ThemeType): DefaultNDSThemeType;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nulogy/components",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.3.0",
|
|
4
4
|
"description": "Component library for the Nulogy Design System - http://nulogy.design",
|
|
5
5
|
"private": false,
|
|
6
6
|
"publishConfig": {
|
|
@@ -16,7 +16,8 @@
|
|
|
16
16
|
"clean:storybook": "rm -rf node_modules/.cache/storybook && rm -rf ./storybook-static",
|
|
17
17
|
"build": "rollup -c",
|
|
18
18
|
"build:storybook": "build-storybook",
|
|
19
|
-
"
|
|
19
|
+
"warn:prepush": "echo \"Make sure you also run all the other CI steps before pushing by running 'yarn ci'\"",
|
|
20
|
+
"check": "yarn warn:prepush && yarn check:types && yarn check:lint && yarn check:format",
|
|
20
21
|
"check:types": "tsc && cd cypress && tsc --noEmit",
|
|
21
22
|
"check:lint": "eslint --config ./.eslintrc .'*/**/*.{js,ts,tsx}'",
|
|
22
23
|
"check:format": "prettier -c .",
|
|
@@ -68,7 +69,7 @@
|
|
|
68
69
|
"@babel/preset-env": "7.3.1",
|
|
69
70
|
"@babel/preset-typescript": "^7.10.4",
|
|
70
71
|
"@nulogy/eslint-config-nulogy": "^1.0.0",
|
|
71
|
-
"@nulogy/icons": "^4.
|
|
72
|
+
"@nulogy/icons": "^4.37.2",
|
|
72
73
|
"@rollup/plugin-babel": "^5.0.0",
|
|
73
74
|
"@rollup/plugin-node-resolve": "^7.1.3",
|
|
74
75
|
"@semantic-release/changelog": "^6.0.2",
|
|
@@ -173,7 +174,7 @@
|
|
|
173
174
|
},
|
|
174
175
|
"husky": {
|
|
175
176
|
"hooks": {
|
|
176
|
-
"pre-push": "yarn run
|
|
177
|
+
"pre-push": "yarn run check"
|
|
177
178
|
}
|
|
178
179
|
},
|
|
179
180
|
"jest": {
|