@amboss/design-system 1.9.8 → 1.10.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/build/cjs/src/components/LoadingSpinner/LoadingSpinner.js +84 -0
- package/build/cjs/src/components/Pagination/Pagination.js +77 -0
- package/build/cjs/src/components/PictogramButton/PictogramButton.js +9 -2
- package/build/cjs/src/index.js +4 -0
- package/build/cjs/src/shared/ScreenReaderText.js +26 -0
- package/build/esm/src/components/LoadingSpinner/LoadingSpinner.d.ts +11 -0
- package/build/esm/src/components/LoadingSpinner/LoadingSpinner.js +78 -0
- package/build/esm/src/components/LoadingSpinner/LoadingSpinner.js.map +1 -0
- package/build/esm/src/components/Pagination/Pagination.d.ts +17 -0
- package/build/esm/src/components/Pagination/Pagination.js +72 -0
- package/build/esm/src/components/Pagination/Pagination.js.map +1 -0
- package/build/esm/src/components/PictogramButton/PictogramButton.d.ts +2 -0
- package/build/esm/src/components/PictogramButton/PictogramButton.js +9 -2
- package/build/esm/src/components/PictogramButton/PictogramButton.js.map +1 -1
- package/build/esm/src/index.d.ts +2 -0
- package/build/esm/src/index.js +2 -0
- package/build/esm/src/index.js.map +1 -1
- package/build/esm/src/shared/ScreenReaderText.d.ts +5 -0
- package/build/esm/src/shared/ScreenReaderText.js +21 -0
- package/build/esm/src/shared/ScreenReaderText.js.map +1 -0
- package/package.json +9 -2
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var _styled = require('@emotion/styled/base');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var react = require('@emotion/react');
|
|
6
|
+
var ScreenReaderText = require('../../shared/ScreenReaderText.js');
|
|
7
|
+
|
|
8
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
+
|
|
10
|
+
var _styled__default = /*#__PURE__*/_interopDefault(_styled);
|
|
11
|
+
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
12
|
+
|
|
13
|
+
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
14
|
+
const animation = react.keyframes({
|
|
15
|
+
to: {
|
|
16
|
+
strokeDashoffset: 136
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const StyledContainer = /*#__PURE__*/_styled__default.default("div", process.env.NODE_ENV === "production" ? {
|
|
20
|
+
target: "e2mymjb2"
|
|
21
|
+
} : {
|
|
22
|
+
target: "e2mymjb2",
|
|
23
|
+
label: "StyledContainer"
|
|
24
|
+
})(process.env.NODE_ENV === "production" ? {
|
|
25
|
+
name: "sw0n2m",
|
|
26
|
+
styles: "display:flex;justify-content:space-around"
|
|
27
|
+
} : {
|
|
28
|
+
name: "sw0n2m",
|
|
29
|
+
styles: "display:flex;justify-content:space-around",
|
|
30
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxvYWRpbmdTcGlubmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQndCIiwiZmlsZSI6IkxvYWRpbmdTcGlubmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBTY3JlZW5SZWFkZXJUZXh0IH0gZnJvbSBcIi4uLy4uL3NoYXJlZC9TY3JlZW5SZWFkZXJUZXh0XCI7XG5cbmV4cG9ydCB0eXBlIExvYWRpbmdTcGlubmVyUHJvcHMgPSB7XG4gIC8qKiBXaWR0aCBhbmQgSGVpZ2h0IGluIHB4XG4gICAqIEBkZWZhdWx0IDgwcHhcbiAgICovXG4gIHNpemU/OiBudW1iZXI7XG4gIC8qKiBoaWRkZW4gbGFiZWwgZm9yIHNjcmVlbiByZWFkZXJzICovXG4gIHNjcmVlblJlYWRlclRleHQ6IHN0cmluZztcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI/OiBzdHJpbmc7XG59O1xuXG5jb25zdCBhbmltYXRpb24gPSBrZXlmcmFtZXMoe1xuICB0bzoge1xuICAgIHN0cm9rZURhc2hvZmZzZXQ6IDEzNixcbiAgfSxcbn0pO1xuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2KHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWFyb3VuZFwiLFxufSk7XG5cbmNvbnN0IFN0eWxlZFN2ZyA9IHN0eWxlZC5zdmcoe1xuICB0cmFuc2Zvcm1PcmlnaW46IFwiNTAlIDY1JVwiLFxufSk7XG5cbmNvbnN0IFN0eWxlZFBvbHlnb24gPSBzdHlsZWQucG9seWdvbigoeyB0aGVtZSB9KSA9PiAoe1xuICBzdHJva2U6IHRoZW1lLnZhcmlhYmxlcy5jb2xvci5ncmVlbi5yZWd1bGFyLFxuICBzdHJva2VEYXNoYXJyYXk6IDE3LFxuICBhbmltYXRpb246IGAycyBsaW5lYXIgMHMgaW5maW5pdGUgJHthbmltYXRpb259YCxcbn0pKTtcblxuZXhwb3J0IGZ1bmN0aW9uIExvYWRpbmdTcGlubmVyKHtcbiAgc2l6ZSA9IDgwLFxuICBzY3JlZW5SZWFkZXJUZXh0LFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbn06IExvYWRpbmdTcGlubmVyUHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRDb250YWluZXJcbiAgICAgIGRhdGEtZTJlLXRlc3QtaWQ9e2RhdGFFMmVUZXN0SWR9XG4gICAgICBkYXRhLWRzLWlkPVwiTG9hZGluZ1NwaW5uZXJcIlxuICAgID5cbiAgICAgIDxTdHlsZWRTdmdcbiAgICAgICAgaWQ9XCJ0cmlhbmdsZVwiXG4gICAgICAgIHdpZHRoPXtzaXplfVxuICAgICAgICBoZWlnaHQ9e3NpemV9XG4gICAgICAgIHZpZXdCb3g9XCItMyAtNCAzOSAzOVwiXG4gICAgICAgIGFyaWEtaGlkZGVuPVwidHJ1ZVwiXG4gICAgICA+XG4gICAgICAgIDxTdHlsZWRQb2x5Z29uXG4gICAgICAgICAgZmlsbD1cInRyYW5zcGFyZW50XCJcbiAgICAgICAgICBzdHJva2VXaWR0aD1cIjFcIlxuICAgICAgICAgIHBvaW50cz1cIjE2LDAgMzIsMzIgMCwzMlwiXG4gICAgICAgIC8+XG4gICAgICA8L1N0eWxlZFN2Zz5cbiAgICAgIDxTY3JlZW5SZWFkZXJUZXh0PntzY3JlZW5SZWFkZXJUZXh0fTwvU2NyZWVuUmVhZGVyVGV4dD5cbiAgICA8L1N0eWxlZENvbnRhaW5lcj5cbiAgKTtcbn1cbiJdfQ== */",
|
|
31
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
32
|
+
});
|
|
33
|
+
const StyledSvg = /*#__PURE__*/_styled__default.default("svg", process.env.NODE_ENV === "production" ? {
|
|
34
|
+
target: "e2mymjb1"
|
|
35
|
+
} : {
|
|
36
|
+
target: "e2mymjb1",
|
|
37
|
+
label: "StyledSvg"
|
|
38
|
+
})(process.env.NODE_ENV === "production" ? {
|
|
39
|
+
name: "1ties1b",
|
|
40
|
+
styles: "transform-origin:50% 65%"
|
|
41
|
+
} : {
|
|
42
|
+
name: "1ties1b",
|
|
43
|
+
styles: "transform-origin:50% 65%",
|
|
44
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxvYWRpbmdTcGlubmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQmtCIiwiZmlsZSI6IkxvYWRpbmdTcGlubmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBTY3JlZW5SZWFkZXJUZXh0IH0gZnJvbSBcIi4uLy4uL3NoYXJlZC9TY3JlZW5SZWFkZXJUZXh0XCI7XG5cbmV4cG9ydCB0eXBlIExvYWRpbmdTcGlubmVyUHJvcHMgPSB7XG4gIC8qKiBXaWR0aCBhbmQgSGVpZ2h0IGluIHB4XG4gICAqIEBkZWZhdWx0IDgwcHhcbiAgICovXG4gIHNpemU/OiBudW1iZXI7XG4gIC8qKiBoaWRkZW4gbGFiZWwgZm9yIHNjcmVlbiByZWFkZXJzICovXG4gIHNjcmVlblJlYWRlclRleHQ6IHN0cmluZztcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI/OiBzdHJpbmc7XG59O1xuXG5jb25zdCBhbmltYXRpb24gPSBrZXlmcmFtZXMoe1xuICB0bzoge1xuICAgIHN0cm9rZURhc2hvZmZzZXQ6IDEzNixcbiAgfSxcbn0pO1xuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2KHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWFyb3VuZFwiLFxufSk7XG5cbmNvbnN0IFN0eWxlZFN2ZyA9IHN0eWxlZC5zdmcoe1xuICB0cmFuc2Zvcm1PcmlnaW46IFwiNTAlIDY1JVwiLFxufSk7XG5cbmNvbnN0IFN0eWxlZFBvbHlnb24gPSBzdHlsZWQucG9seWdvbigoeyB0aGVtZSB9KSA9PiAoe1xuICBzdHJva2U6IHRoZW1lLnZhcmlhYmxlcy5jb2xvci5ncmVlbi5yZWd1bGFyLFxuICBzdHJva2VEYXNoYXJyYXk6IDE3LFxuICBhbmltYXRpb246IGAycyBsaW5lYXIgMHMgaW5maW5pdGUgJHthbmltYXRpb259YCxcbn0pKTtcblxuZXhwb3J0IGZ1bmN0aW9uIExvYWRpbmdTcGlubmVyKHtcbiAgc2l6ZSA9IDgwLFxuICBzY3JlZW5SZWFkZXJUZXh0LFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbn06IExvYWRpbmdTcGlubmVyUHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRDb250YWluZXJcbiAgICAgIGRhdGEtZTJlLXRlc3QtaWQ9e2RhdGFFMmVUZXN0SWR9XG4gICAgICBkYXRhLWRzLWlkPVwiTG9hZGluZ1NwaW5uZXJcIlxuICAgID5cbiAgICAgIDxTdHlsZWRTdmdcbiAgICAgICAgaWQ9XCJ0cmlhbmdsZVwiXG4gICAgICAgIHdpZHRoPXtzaXplfVxuICAgICAgICBoZWlnaHQ9e3NpemV9XG4gICAgICAgIHZpZXdCb3g9XCItMyAtNCAzOSAzOVwiXG4gICAgICAgIGFyaWEtaGlkZGVuPVwidHJ1ZVwiXG4gICAgICA+XG4gICAgICAgIDxTdHlsZWRQb2x5Z29uXG4gICAgICAgICAgZmlsbD1cInRyYW5zcGFyZW50XCJcbiAgICAgICAgICBzdHJva2VXaWR0aD1cIjFcIlxuICAgICAgICAgIHBvaW50cz1cIjE2LDAgMzIsMzIgMCwzMlwiXG4gICAgICAgIC8+XG4gICAgICA8L1N0eWxlZFN2Zz5cbiAgICAgIDxTY3JlZW5SZWFkZXJUZXh0PntzY3JlZW5SZWFkZXJUZXh0fTwvU2NyZWVuUmVhZGVyVGV4dD5cbiAgICA8L1N0eWxlZENvbnRhaW5lcj5cbiAgKTtcbn1cbiJdfQ== */",
|
|
45
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
46
|
+
});
|
|
47
|
+
const StyledPolygon = /*#__PURE__*/_styled__default.default("polygon", process.env.NODE_ENV === "production" ? {
|
|
48
|
+
target: "e2mymjb0"
|
|
49
|
+
} : {
|
|
50
|
+
target: "e2mymjb0",
|
|
51
|
+
label: "StyledPolygon"
|
|
52
|
+
})(_ref => {
|
|
53
|
+
let {
|
|
54
|
+
theme
|
|
55
|
+
} = _ref;
|
|
56
|
+
return {
|
|
57
|
+
stroke: theme.variables.color.green.regular,
|
|
58
|
+
strokeDasharray: 17,
|
|
59
|
+
animation: `2s linear 0s infinite ${animation}`
|
|
60
|
+
};
|
|
61
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxvYWRpbmdTcGlubmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4QnNCIiwiZmlsZSI6IkxvYWRpbmdTcGlubmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBTY3JlZW5SZWFkZXJUZXh0IH0gZnJvbSBcIi4uLy4uL3NoYXJlZC9TY3JlZW5SZWFkZXJUZXh0XCI7XG5cbmV4cG9ydCB0eXBlIExvYWRpbmdTcGlubmVyUHJvcHMgPSB7XG4gIC8qKiBXaWR0aCBhbmQgSGVpZ2h0IGluIHB4XG4gICAqIEBkZWZhdWx0IDgwcHhcbiAgICovXG4gIHNpemU/OiBudW1iZXI7XG4gIC8qKiBoaWRkZW4gbGFiZWwgZm9yIHNjcmVlbiByZWFkZXJzICovXG4gIHNjcmVlblJlYWRlclRleHQ6IHN0cmluZztcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI/OiBzdHJpbmc7XG59O1xuXG5jb25zdCBhbmltYXRpb24gPSBrZXlmcmFtZXMoe1xuICB0bzoge1xuICAgIHN0cm9rZURhc2hvZmZzZXQ6IDEzNixcbiAgfSxcbn0pO1xuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2KHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWFyb3VuZFwiLFxufSk7XG5cbmNvbnN0IFN0eWxlZFN2ZyA9IHN0eWxlZC5zdmcoe1xuICB0cmFuc2Zvcm1PcmlnaW46IFwiNTAlIDY1JVwiLFxufSk7XG5cbmNvbnN0IFN0eWxlZFBvbHlnb24gPSBzdHlsZWQucG9seWdvbigoeyB0aGVtZSB9KSA9PiAoe1xuICBzdHJva2U6IHRoZW1lLnZhcmlhYmxlcy5jb2xvci5ncmVlbi5yZWd1bGFyLFxuICBzdHJva2VEYXNoYXJyYXk6IDE3LFxuICBhbmltYXRpb246IGAycyBsaW5lYXIgMHMgaW5maW5pdGUgJHthbmltYXRpb259YCxcbn0pKTtcblxuZXhwb3J0IGZ1bmN0aW9uIExvYWRpbmdTcGlubmVyKHtcbiAgc2l6ZSA9IDgwLFxuICBzY3JlZW5SZWFkZXJUZXh0LFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbn06IExvYWRpbmdTcGlubmVyUHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRDb250YWluZXJcbiAgICAgIGRhdGEtZTJlLXRlc3QtaWQ9e2RhdGFFMmVUZXN0SWR9XG4gICAgICBkYXRhLWRzLWlkPVwiTG9hZGluZ1NwaW5uZXJcIlxuICAgID5cbiAgICAgIDxTdHlsZWRTdmdcbiAgICAgICAgaWQ9XCJ0cmlhbmdsZVwiXG4gICAgICAgIHdpZHRoPXtzaXplfVxuICAgICAgICBoZWlnaHQ9e3NpemV9XG4gICAgICAgIHZpZXdCb3g9XCItMyAtNCAzOSAzOVwiXG4gICAgICAgIGFyaWEtaGlkZGVuPVwidHJ1ZVwiXG4gICAgICA+XG4gICAgICAgIDxTdHlsZWRQb2x5Z29uXG4gICAgICAgICAgZmlsbD1cInRyYW5zcGFyZW50XCJcbiAgICAgICAgICBzdHJva2VXaWR0aD1cIjFcIlxuICAgICAgICAgIHBvaW50cz1cIjE2LDAgMzIsMzIgMCwzMlwiXG4gICAgICAgIC8+XG4gICAgICA8L1N0eWxlZFN2Zz5cbiAgICAgIDxTY3JlZW5SZWFkZXJUZXh0PntzY3JlZW5SZWFkZXJUZXh0fTwvU2NyZWVuUmVhZGVyVGV4dD5cbiAgICA8L1N0eWxlZENvbnRhaW5lcj5cbiAgKTtcbn1cbiJdfQ== */");
|
|
62
|
+
function LoadingSpinner(_ref2) {
|
|
63
|
+
let {
|
|
64
|
+
size = 80,
|
|
65
|
+
screenReaderText,
|
|
66
|
+
"data-e2e-test-id": dataE2eTestId
|
|
67
|
+
} = _ref2;
|
|
68
|
+
return /*#__PURE__*/React__default.default.createElement(StyledContainer, {
|
|
69
|
+
"data-e2e-test-id": dataE2eTestId,
|
|
70
|
+
"data-ds-id": "LoadingSpinner"
|
|
71
|
+
}, /*#__PURE__*/React__default.default.createElement(StyledSvg, {
|
|
72
|
+
id: "triangle",
|
|
73
|
+
width: size,
|
|
74
|
+
height: size,
|
|
75
|
+
viewBox: "-3 -4 39 39",
|
|
76
|
+
"aria-hidden": "true"
|
|
77
|
+
}, /*#__PURE__*/React__default.default.createElement(StyledPolygon, {
|
|
78
|
+
fill: "transparent",
|
|
79
|
+
strokeWidth: "1",
|
|
80
|
+
points: "16,0 32,32 0,32"
|
|
81
|
+
})), /*#__PURE__*/React__default.default.createElement(ScreenReaderText.ScreenReaderText, null, screenReaderText));
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
exports.LoadingSpinner = LoadingSpinner;
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var Inline = require('../Inline/Inline.js');
|
|
5
|
+
var PictogramButton = require('../PictogramButton/PictogramButton.js');
|
|
6
|
+
var Text = require('../Typography/Text/Text.js');
|
|
7
|
+
|
|
8
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
+
|
|
10
|
+
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
11
|
+
|
|
12
|
+
function getItemIndices(page, numOfItemsPerPage) {
|
|
13
|
+
const lastItemIndex = page * numOfItemsPerPage;
|
|
14
|
+
const firstItemIndex = lastItemIndex - numOfItemsPerPage + 1;
|
|
15
|
+
return [firstItemIndex, lastItemIndex];
|
|
16
|
+
}
|
|
17
|
+
function Pagination(_ref) {
|
|
18
|
+
let {
|
|
19
|
+
numOfPages,
|
|
20
|
+
numOfItemsPerPage,
|
|
21
|
+
currentPage,
|
|
22
|
+
formatLabel,
|
|
23
|
+
alignLabel = "center",
|
|
24
|
+
"data-e2e-test-id": dataE2eTestId,
|
|
25
|
+
onPrevClick,
|
|
26
|
+
onNextClick
|
|
27
|
+
} = _ref;
|
|
28
|
+
let label;
|
|
29
|
+
const isFirstPage = currentPage === 1;
|
|
30
|
+
const isLastPage = currentPage === numOfPages;
|
|
31
|
+
if (numOfItemsPerPage) {
|
|
32
|
+
const [firstItemIndex, lastItemIndex] = getItemIndices(currentPage, numOfItemsPerPage);
|
|
33
|
+
const numOfItems = numOfPages * numOfItemsPerPage;
|
|
34
|
+
label = formatLabel ? formatLabel(firstItemIndex, lastItemIndex, numOfItems) : `${firstItemIndex} - ${lastItemIndex} of ${numOfItems}`;
|
|
35
|
+
} else {
|
|
36
|
+
label = formatLabel ? formatLabel() : `${currentPage} of ${numOfPages}`;
|
|
37
|
+
}
|
|
38
|
+
const handlePrevClick = () => {
|
|
39
|
+
if (numOfItemsPerPage) {
|
|
40
|
+
const [firstItemIndex, lastItemIndex] = getItemIndices(currentPage - 1, numOfItemsPerPage);
|
|
41
|
+
onPrevClick(currentPage - 1, firstItemIndex, lastItemIndex);
|
|
42
|
+
} else {
|
|
43
|
+
onPrevClick(currentPage - 1);
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
const handleNextClick = () => {
|
|
47
|
+
if (numOfItemsPerPage) {
|
|
48
|
+
const [firstItemIndex, lastItemIndex] = getItemIndices(currentPage + 1, numOfItemsPerPage);
|
|
49
|
+
onNextClick(currentPage + 1, firstItemIndex, lastItemIndex);
|
|
50
|
+
} else {
|
|
51
|
+
onNextClick(currentPage + 1);
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
const leftButton = /*#__PURE__*/React__default.default.createElement(PictogramButton.PictogramButton, {
|
|
55
|
+
size: "s",
|
|
56
|
+
icon: "chevron-left",
|
|
57
|
+
disabled: isFirstPage,
|
|
58
|
+
onClick: handlePrevClick
|
|
59
|
+
});
|
|
60
|
+
const rightButton = /*#__PURE__*/React__default.default.createElement(PictogramButton.PictogramButton, {
|
|
61
|
+
size: "s",
|
|
62
|
+
icon: "chevron-right",
|
|
63
|
+
disabled: isLastPage,
|
|
64
|
+
onClick: handleNextClick
|
|
65
|
+
});
|
|
66
|
+
const labelElm = /*#__PURE__*/React__default.default.createElement(Text.Text, {
|
|
67
|
+
size: "s"
|
|
68
|
+
}, label);
|
|
69
|
+
const content = alignLabel === "left" ? /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, labelElm, leftButton, rightButton) : /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, leftButton, labelElm, rightButton);
|
|
70
|
+
return /*#__PURE__*/React__default.default.createElement(Inline.Inline, {
|
|
71
|
+
vAlignItems: "center",
|
|
72
|
+
"data-e2e-test-id": dataE2eTestId,
|
|
73
|
+
"data-ds-id": "Pagination"
|
|
74
|
+
}, content);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
exports.Pagination = Pagination;
|
|
@@ -21,6 +21,7 @@ const StyledPictogramButton = /*#__PURE__*/_styled__default.default("button", pr
|
|
|
21
21
|
let {
|
|
22
22
|
theme,
|
|
23
23
|
variant,
|
|
24
|
+
size,
|
|
24
25
|
squareCorners
|
|
25
26
|
} = _ref;
|
|
26
27
|
return {
|
|
@@ -67,12 +68,16 @@ const StyledPictogramButton = /*#__PURE__*/_styled__default.default("button", pr
|
|
|
67
68
|
}),
|
|
68
69
|
...(squareCorners && {
|
|
69
70
|
borderRadius: "0"
|
|
71
|
+
}),
|
|
72
|
+
...((size === "s" || size === "m") && {
|
|
73
|
+
padding: theme.variables.size.spacing.xs
|
|
70
74
|
})
|
|
71
75
|
};
|
|
72
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlBpY3RvZ3JhbUJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUThCIiwiZmlsZSI6IlBpY3RvZ3JhbUJ1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSByZWFjdC9qc3gtcHJvcHMtbm8tc3ByZWFkaW5nICovXG5pbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEljb25OYW1lLCBJY29uIH0gZnJvbSBcIi4uL0ljb24vSWNvblwiO1xuaW1wb3J0IHsgSW5saW5lIH0gZnJvbSBcIi4uL0lubGluZS9JbmxpbmVcIjtcbmltcG9ydCB7IEJ1dHRvblByb3BzIH0gZnJvbSBcIi4uL0J1dHRvbi9CdXR0b25cIjtcbmltcG9ydCB7IFBvbHltb3JwaGljQ29tcG9uZW50UHJvcHNXaXRoUmVmLCBQb2x5bW9ycGhpY1JlZiB9IGZyb20gXCIuLi8uLi90eXBlc1wiO1xuXG5jb25zdCBTdHlsZWRQaWN0b2dyYW1CdXR0b24gPSBzdHlsZWQuYnV0dG9uPFBhcnRpYWw8UGljdG9ncmFtQnV0dG9uUHJvcHM+
|
|
76
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlBpY3RvZ3JhbUJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUThCIiwiZmlsZSI6IlBpY3RvZ3JhbUJ1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSByZWFjdC9qc3gtcHJvcHMtbm8tc3ByZWFkaW5nICovXG5pbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEljb25OYW1lLCBJY29uIH0gZnJvbSBcIi4uL0ljb24vSWNvblwiO1xuaW1wb3J0IHsgSW5saW5lIH0gZnJvbSBcIi4uL0lubGluZS9JbmxpbmVcIjtcbmltcG9ydCB7IEJ1dHRvblByb3BzIH0gZnJvbSBcIi4uL0J1dHRvbi9CdXR0b25cIjtcbmltcG9ydCB7IFBvbHltb3JwaGljQ29tcG9uZW50UHJvcHNXaXRoUmVmLCBQb2x5bW9ycGhpY1JlZiB9IGZyb20gXCIuLi8uLi90eXBlc1wiO1xuXG5jb25zdCBTdHlsZWRQaWN0b2dyYW1CdXR0b24gPSBzdHlsZWQuYnV0dG9uPFBhcnRpYWw8UGljdG9ncmFtQnV0dG9uUHJvcHM+PihcbiAgKHsgdGhlbWUsIHZhcmlhbnQsIHNpemUsIHNxdWFyZUNvcm5lcnMgfSkgPT4gKHtcbiAgICBcIiZbdHlwZT0nYnV0dG9uJ11cIjoge1xuICAgICAgYXBwZWFyYW5jZTogXCJub25lXCIsXG4gICAgICBcIi1tb3otYXBwZWFyYW5jZVwiOiBcIm5vbmVcIixcbiAgICAgIFwiLXdlYmtpdC1hcHBlYXJhbmNlXCI6IFwibm9uZVwiLFxuICAgIH0sXG4gICAgYm9yZGVyOiAwLFxuICAgIGRpc3BsYXk6IFwiaW5saW5lLWJsb2NrXCIsXG4gICAgdGV4dFRyYW5zZm9ybTogXCJub25lXCIsXG4gICAgdGV4dERlY29yYXRpb246IFwibm9uZVwiLFxuICAgIGJvcmRlclJhZGl1czogdGhlbWUudmFyaWFibGVzLnNpemUuYm9yZGVyUmFkaXVzLmJ1dHRvbi5tLFxuICAgIGZvbnRGYW1pbHk6IHRoZW1lLnZhcmlhYmxlcy5mb250RmFtaWx5LmxhdG8sXG4gICAgZm9udFNpemU6IHRoZW1lLnZhcmlhYmxlcy5zaXplLmZvbnQuYnV0dG9uLm0sXG4gICAgbGluZUhlaWdodDogdGhlbWUudmFyaWFibGVzLnNpemUubGluZUhlaWdodC5idXR0b24ubSxcbiAgICBmb250V2VpZ2h0OiB0aGVtZS52YXJpYWJsZXMud2VpZ2h0LmJvbGQsXG4gICAgcGFkZGluZzogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54eHMsXG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgICBcIiZbZGlzYWJsZWRdLCAmOmRpc2FibGVkXCI6IHtcbiAgICAgIG9wYWNpdHk6IHRoZW1lLnZhcmlhYmxlcy5vcGFjaXR5LmJ1dHRvbi5kaXNhYmxlZCxcbiAgICAgIHBvaW50ZXJFdmVudHM6IFwibm9uZVwiLFxuICAgIH0sXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IuYmFja2dyb3VuZC5idXR0b25bdmFyaWFudF0uYmFzZSxcbiAgICBjb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLnRleHQuYnV0dG9uW3ZhcmlhbnRdLmJhc2UsXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLmJhY2tncm91bmQuYnV0dG9uW3ZhcmlhbnRdLmhvdmVyLFxuICAgICAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50ZXh0LmJ1dHRvblt2YXJpYW50XS5ob3ZlcixcbiAgICB9LFxuICAgIFwiJjphY3RpdmVcIjoge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IuYmFja2dyb3VuZC5idXR0b25bdmFyaWFudF0uYWN0aXZlLFxuICAgICAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50ZXh0LmJ1dHRvblt2YXJpYW50XS5hY3RpdmUsXG4gICAgfSxcbiAgICAuLi4odmFyaWFudCA9PT0gXCJzZWNvbmRhcnlcIiAmJiB7XG4gICAgICBib3JkZXI6IFwiMXB4IHNvbGlkXCIsXG4gICAgICBib3JkZXJDb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLmJvcmRlci5idXR0b25bdmFyaWFudF0uYmFzZSxcbiAgICAgIHBhZGRpbmc6IHBhcnNlSW50KHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcueHhzLCAxMCkgLSAxLFxuICAgICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci5ib3JkZXIuYnV0dG9uW3ZhcmlhbnRdLmhvdmVyLFxuICAgICAgfSxcbiAgICAgIFwiJjphY3RpdmVcIjoge1xuICAgICAgICBib3JkZXJDb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLmJvcmRlci5idXR0b25bdmFyaWFudF0uYWN0aXZlLFxuICAgICAgfSxcbiAgICB9KSxcbiAgICAuLi4oc3F1YXJlQ29ybmVycyAmJiB7XG4gICAgICBib3JkZXJSYWRpdXM6IFwiMFwiLFxuICAgIH0pLFxuICAgIC4uLigoc2l6ZSA9PT0gXCJzXCIgfHwgc2l6ZSA9PT0gXCJtXCIpICYmIHtcbiAgICAgIHBhZGRpbmc6IHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcueHMsXG4gICAgfSksXG4gIH0pXG4pO1xuXG5leHBvcnQgdHlwZSBQaWN0b2dyYW1CdXR0b25Qcm9wcyA9IFBpY2s8XG4gIEJ1dHRvblByb3BzLFxuICB8IFwidmFyaWFudFwiXG4gIHwgXCJ0eXBlXCJcbiAgfCBcImRpc2FibGVkXCJcbiAgfCBcIm9uQ2xpY2tcIlxuICB8IFwib25Gb2N1c1wiXG4gIHwgXCJvbkJsdXJcIlxuICB8IFwiZGF0YS1lMmUtdGVzdC1pZFwiXG4+ICYge1xuICAvKiogVGhlIGNlbnRlcmVkIGljb24gdG8gYmUgZGlzcGxheWVkLiAqL1xuICBpY29uOiBJY29uTmFtZTtcbiAgLyoqIElmIHRydWUsIHRoZSBidXR0b24gaGFzIHNxdWFyZSBjb3JuZXJzLiAqL1xuICBzcXVhcmVDb3JuZXJzPzogYm9vbGVhbjtcbiAgLyoqIFNpemUgKi9cbiAgc2l6ZT86IFwieHNcIiB8IFwic1wiIHwgXCJtXCI7XG59O1xuXG50eXBlIFBpY3RvZ3JhbUJ1dHRvbkNvbXBvbmVudCA9IDxDIGV4dGVuZHMgUmVhY3QuRWxlbWVudFR5cGUgPSBcImJ1dHRvblwiPihcbiAgcHJvcHM6IFBvbHltb3JwaGljQ29tcG9uZW50UHJvcHNXaXRoUmVmPEMsIFBpY3RvZ3JhbUJ1dHRvblByb3BzPlxuKSA9PiBSZWFjdC5SZWFjdEVsZW1lbnQgfCBudWxsO1xuXG5leHBvcnQgY29uc3QgUGljdG9ncmFtQnV0dG9uOiBQaWN0b2dyYW1CdXR0b25Db21wb25lbnQgPSBSZWFjdC5mb3J3YXJkUmVmKFxuICA8QyBleHRlbmRzIFJlYWN0LkVsZW1lbnRUeXBlID0gXCJidXR0b25cIj4oXG4gICAge1xuICAgICAgdHlwZSA9IFwiYnV0dG9uXCIsXG4gICAgICBzaXplID0gXCJ4c1wiLFxuICAgICAgdmFyaWFudCA9IFwidGVydGlhcnlcIixcbiAgICAgIGRpc2FibGVkID0gZmFsc2UsXG4gICAgICBvbkNsaWNrLFxuICAgICAgb25Gb2N1cyxcbiAgICAgIG9uQmx1cixcbiAgICAgIFwiZGF0YS1lMmUtdGVzdC1pZFwiOiBkYXRhRTJlVGVzdElkLFxuICAgICAgYXMsXG4gICAgICBpY29uLFxuICAgICAgc3F1YXJlQ29ybmVycyA9IGZhbHNlLFxuICAgICAgLi4ucmVzdFxuICAgIH06IFBvbHltb3JwaGljQ29tcG9uZW50UHJvcHNXaXRoUmVmPEMsIFBpY3RvZ3JhbUJ1dHRvblByb3BzPixcbiAgICByZWY/OiBQb2x5bW9ycGhpY1JlZjxDPlxuICApID0+IHtcbiAgICBmdW5jdGlvbiBoYW5kbGVDbGljayhlOiBSZWFjdC5Nb3VzZUV2ZW50KSB7XG4gICAgICBpZiAoZGlzYWJsZWQpIHtcbiAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgfVxuICAgICAgaWYgKG9uQ2xpY2spIHtcbiAgICAgICAgb25DbGljayhlKTtcbiAgICAgIH1cbiAgICB9XG4gICAgY29uc3QgaWNvblNpemUgPSBzaXplID09PSBcIm1cIiA/IFwibVwiIDogXCJzXCI7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPFN0eWxlZFBpY3RvZ3JhbUJ1dHRvblxuICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgZGF0YS1lMmUtdGVzdC1pZD17ZGF0YUUyZVRlc3RJZH1cbiAgICAgICAgZGF0YS1kcy1pZD1cIlBpY3RvZ3JhbUJ1dHRvblwiXG4gICAgICAgIGFzPXthc31cbiAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICB0eXBlPXthcyAmJiBhcyAhPT0gXCJidXR0b25cIiA/IHVuZGVmaW5lZCA6IHR5cGV9XG4gICAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICAgIHNpemU9e3NpemV9XG4gICAgICAgIHNxdWFyZUNvcm5lcnM9e3NxdWFyZUNvcm5lcnN9XG4gICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgICBvbkZvY3VzPXtvbkZvY3VzfVxuICAgICAgICBvbkJsdXI9e29uQmx1cn1cbiAgICAgICAgey4uLnJlc3R9XG4gICAgICA+XG4gICAgICAgIDxJbmxpbmUgdkFsaWduSXRlbXM9XCJjZW50ZXJcIiBhbGlnbkl0ZW1zPVwiY2VudGVyXCIgc3BhY2U9XCJ4eHNcIiBub1dyYXA+XG4gICAgICAgICAgPEljb25cbiAgICAgICAgICAgIHNpemU9e2ljb25TaXplfVxuICAgICAgICAgICAgbmFtZT17aWNvbn1cbiAgICAgICAgICAgIGRhdGEtdGVzdGlkPXtpY29ufVxuICAgICAgICAgICAgZGF0YS1lMmUtdGVzdC1pZD17aWNvbn1cbiAgICAgICAgICAvPlxuICAgICAgICA8L0lubGluZT5cbiAgICAgIDwvU3R5bGVkUGljdG9ncmFtQnV0dG9uPlxuICAgICk7XG4gIH1cbik7XG4iXX0= */");
|
|
73
77
|
const PictogramButton = /*#__PURE__*/React__default.default.forwardRef((_ref2, ref) => {
|
|
74
78
|
let {
|
|
75
79
|
type = "button",
|
|
80
|
+
size = "xs",
|
|
76
81
|
variant = "tertiary",
|
|
77
82
|
disabled = false,
|
|
78
83
|
onClick,
|
|
@@ -92,6 +97,7 @@ const PictogramButton = /*#__PURE__*/React__default.default.forwardRef((_ref2, r
|
|
|
92
97
|
onClick(e);
|
|
93
98
|
}
|
|
94
99
|
}
|
|
100
|
+
const iconSize = size === "m" ? "m" : "s";
|
|
95
101
|
return /*#__PURE__*/React__default.default.createElement(StyledPictogramButton, _extends__default.default({
|
|
96
102
|
ref: ref,
|
|
97
103
|
"data-e2e-test-id": dataE2eTestId,
|
|
@@ -100,6 +106,7 @@ const PictogramButton = /*#__PURE__*/React__default.default.forwardRef((_ref2, r
|
|
|
100
106
|
disabled: disabled,
|
|
101
107
|
type: as && as !== "button" ? undefined : type,
|
|
102
108
|
variant: variant,
|
|
109
|
+
size: size,
|
|
103
110
|
squareCorners: squareCorners,
|
|
104
111
|
onClick: handleClick,
|
|
105
112
|
onFocus: onFocus,
|
|
@@ -110,7 +117,7 @@ const PictogramButton = /*#__PURE__*/React__default.default.forwardRef((_ref2, r
|
|
|
110
117
|
space: "xxs",
|
|
111
118
|
noWrap: true
|
|
112
119
|
}, /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
|
|
113
|
-
size:
|
|
120
|
+
size: iconSize,
|
|
114
121
|
name: icon,
|
|
115
122
|
"data-testid": icon,
|
|
116
123
|
"data-e2e-test-id": icon
|
package/build/cjs/src/index.js
CHANGED
|
@@ -45,6 +45,8 @@ var Callout = require('./components/Callout/Callout.js');
|
|
|
45
45
|
var Modal = require('./components/Patterns/Modal/Modal.js');
|
|
46
46
|
var ButtonGroup = require('./components/Patterns/ButtonGroup/ButtonGroup.js');
|
|
47
47
|
var Collapsible = require('./components/Collapsible/Collapsible.js');
|
|
48
|
+
var LoadingSpinner = require('./components/LoadingSpinner/LoadingSpinner.js');
|
|
49
|
+
var Pagination = require('./components/Pagination/Pagination.js');
|
|
48
50
|
|
|
49
51
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
50
52
|
|
|
@@ -116,5 +118,7 @@ exports.Modal = Modal.Modal;
|
|
|
116
118
|
exports.ButtonGroup = ButtonGroup.ButtonGroup;
|
|
117
119
|
exports.Collapsible = Collapsible.Collapsible;
|
|
118
120
|
exports.CollapsibleHeader = Collapsible.CollapsibleHeader;
|
|
121
|
+
exports.LoadingSpinner = LoadingSpinner.LoadingSpinner;
|
|
122
|
+
exports.Pagination = Pagination.Pagination;
|
|
119
123
|
exports.dark = dark;
|
|
120
124
|
exports.light = light;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var _styled = require('@emotion/styled/base');
|
|
4
|
+
|
|
5
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
6
|
+
|
|
7
|
+
var _styled__default = /*#__PURE__*/_interopDefault(_styled);
|
|
8
|
+
|
|
9
|
+
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
10
|
+
// Content required to be read by screen readers but visually hidden
|
|
11
|
+
const ScreenReaderText = /*#__PURE__*/_styled__default.default("div", process.env.NODE_ENV === "production" ? {
|
|
12
|
+
target: "ezjk5ml0"
|
|
13
|
+
} : {
|
|
14
|
+
target: "ezjk5ml0",
|
|
15
|
+
label: "ScreenReaderText"
|
|
16
|
+
})(process.env.NODE_ENV === "production" ? {
|
|
17
|
+
name: "vohvw6",
|
|
18
|
+
styles: "width:1px;height:1px;position:absolute;left:-10000px;top:auto;overflow:hidden"
|
|
19
|
+
} : {
|
|
20
|
+
name: "vohvw6",
|
|
21
|
+
styles: "width:1px;height:1px;position:absolute;left:-10000px;top:auto;overflow:hidden",
|
|
22
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNjcmVlblJlYWRlclRleHQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR2dDIiwiZmlsZSI6IlNjcmVlblJlYWRlclRleHQudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuLy8gQ29udGVudCByZXF1aXJlZCB0byBiZSByZWFkIGJ5IHNjcmVlbiByZWFkZXJzIGJ1dCB2aXN1YWxseSBoaWRkZW5cbmV4cG9ydCBjb25zdCBTY3JlZW5SZWFkZXJUZXh0ID0gc3R5bGVkLmRpdih7XG4gIHdpZHRoOiAxLFxuICBoZWlnaHQ6IDEsXG4gIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gIGxlZnQ6IFwiLTEwMDAwcHhcIixcbiAgdG9wOiBcImF1dG9cIixcbiAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG59KTtcbiJdfQ== */",
|
|
23
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
exports.ScreenReaderText = ScreenReaderText;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export declare type LoadingSpinnerProps = {
|
|
3
|
+
/** Width and Height in px
|
|
4
|
+
* @default 80px
|
|
5
|
+
*/
|
|
6
|
+
size?: number;
|
|
7
|
+
/** hidden label for screen readers */
|
|
8
|
+
screenReaderText: string;
|
|
9
|
+
"data-e2e-test-id"?: string;
|
|
10
|
+
};
|
|
11
|
+
export declare function LoadingSpinner({ size, screenReaderText, "data-e2e-test-id": dataE2eTestId, }: LoadingSpinnerProps): React.ReactElement;
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import _styled from '@emotion/styled/base';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { keyframes } from '@emotion/react';
|
|
4
|
+
import { ScreenReaderText } from '../../shared/ScreenReaderText.js';
|
|
5
|
+
|
|
6
|
+
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
7
|
+
const animation = keyframes({
|
|
8
|
+
to: {
|
|
9
|
+
strokeDashoffset: 136
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
const StyledContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
|
|
13
|
+
target: "e2mymjb2"
|
|
14
|
+
} : {
|
|
15
|
+
target: "e2mymjb2",
|
|
16
|
+
label: "StyledContainer"
|
|
17
|
+
})(process.env.NODE_ENV === "production" ? {
|
|
18
|
+
name: "sw0n2m",
|
|
19
|
+
styles: "display:flex;justify-content:space-around"
|
|
20
|
+
} : {
|
|
21
|
+
name: "sw0n2m",
|
|
22
|
+
styles: "display:flex;justify-content:space-around",
|
|
23
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxvYWRpbmdTcGlubmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQndCIiwiZmlsZSI6IkxvYWRpbmdTcGlubmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBTY3JlZW5SZWFkZXJUZXh0IH0gZnJvbSBcIi4uLy4uL3NoYXJlZC9TY3JlZW5SZWFkZXJUZXh0XCI7XG5cbmV4cG9ydCB0eXBlIExvYWRpbmdTcGlubmVyUHJvcHMgPSB7XG4gIC8qKiBXaWR0aCBhbmQgSGVpZ2h0IGluIHB4XG4gICAqIEBkZWZhdWx0IDgwcHhcbiAgICovXG4gIHNpemU/OiBudW1iZXI7XG4gIC8qKiBoaWRkZW4gbGFiZWwgZm9yIHNjcmVlbiByZWFkZXJzICovXG4gIHNjcmVlblJlYWRlclRleHQ6IHN0cmluZztcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI/OiBzdHJpbmc7XG59O1xuXG5jb25zdCBhbmltYXRpb24gPSBrZXlmcmFtZXMoe1xuICB0bzoge1xuICAgIHN0cm9rZURhc2hvZmZzZXQ6IDEzNixcbiAgfSxcbn0pO1xuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2KHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWFyb3VuZFwiLFxufSk7XG5cbmNvbnN0IFN0eWxlZFN2ZyA9IHN0eWxlZC5zdmcoe1xuICB0cmFuc2Zvcm1PcmlnaW46IFwiNTAlIDY1JVwiLFxufSk7XG5cbmNvbnN0IFN0eWxlZFBvbHlnb24gPSBzdHlsZWQucG9seWdvbigoeyB0aGVtZSB9KSA9PiAoe1xuICBzdHJva2U6IHRoZW1lLnZhcmlhYmxlcy5jb2xvci5ncmVlbi5yZWd1bGFyLFxuICBzdHJva2VEYXNoYXJyYXk6IDE3LFxuICBhbmltYXRpb246IGAycyBsaW5lYXIgMHMgaW5maW5pdGUgJHthbmltYXRpb259YCxcbn0pKTtcblxuZXhwb3J0IGZ1bmN0aW9uIExvYWRpbmdTcGlubmVyKHtcbiAgc2l6ZSA9IDgwLFxuICBzY3JlZW5SZWFkZXJUZXh0LFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbn06IExvYWRpbmdTcGlubmVyUHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRDb250YWluZXJcbiAgICAgIGRhdGEtZTJlLXRlc3QtaWQ9e2RhdGFFMmVUZXN0SWR9XG4gICAgICBkYXRhLWRzLWlkPVwiTG9hZGluZ1NwaW5uZXJcIlxuICAgID5cbiAgICAgIDxTdHlsZWRTdmdcbiAgICAgICAgaWQ9XCJ0cmlhbmdsZVwiXG4gICAgICAgIHdpZHRoPXtzaXplfVxuICAgICAgICBoZWlnaHQ9e3NpemV9XG4gICAgICAgIHZpZXdCb3g9XCItMyAtNCAzOSAzOVwiXG4gICAgICAgIGFyaWEtaGlkZGVuPVwidHJ1ZVwiXG4gICAgICA+XG4gICAgICAgIDxTdHlsZWRQb2x5Z29uXG4gICAgICAgICAgZmlsbD1cInRyYW5zcGFyZW50XCJcbiAgICAgICAgICBzdHJva2VXaWR0aD1cIjFcIlxuICAgICAgICAgIHBvaW50cz1cIjE2LDAgMzIsMzIgMCwzMlwiXG4gICAgICAgIC8+XG4gICAgICA8L1N0eWxlZFN2Zz5cbiAgICAgIDxTY3JlZW5SZWFkZXJUZXh0PntzY3JlZW5SZWFkZXJUZXh0fTwvU2NyZWVuUmVhZGVyVGV4dD5cbiAgICA8L1N0eWxlZENvbnRhaW5lcj5cbiAgKTtcbn1cbiJdfQ== */",
|
|
24
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
25
|
+
});
|
|
26
|
+
const StyledSvg = /*#__PURE__*/_styled("svg", process.env.NODE_ENV === "production" ? {
|
|
27
|
+
target: "e2mymjb1"
|
|
28
|
+
} : {
|
|
29
|
+
target: "e2mymjb1",
|
|
30
|
+
label: "StyledSvg"
|
|
31
|
+
})(process.env.NODE_ENV === "production" ? {
|
|
32
|
+
name: "1ties1b",
|
|
33
|
+
styles: "transform-origin:50% 65%"
|
|
34
|
+
} : {
|
|
35
|
+
name: "1ties1b",
|
|
36
|
+
styles: "transform-origin:50% 65%",
|
|
37
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxvYWRpbmdTcGlubmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQmtCIiwiZmlsZSI6IkxvYWRpbmdTcGlubmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBTY3JlZW5SZWFkZXJUZXh0IH0gZnJvbSBcIi4uLy4uL3NoYXJlZC9TY3JlZW5SZWFkZXJUZXh0XCI7XG5cbmV4cG9ydCB0eXBlIExvYWRpbmdTcGlubmVyUHJvcHMgPSB7XG4gIC8qKiBXaWR0aCBhbmQgSGVpZ2h0IGluIHB4XG4gICAqIEBkZWZhdWx0IDgwcHhcbiAgICovXG4gIHNpemU/OiBudW1iZXI7XG4gIC8qKiBoaWRkZW4gbGFiZWwgZm9yIHNjcmVlbiByZWFkZXJzICovXG4gIHNjcmVlblJlYWRlclRleHQ6IHN0cmluZztcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI/OiBzdHJpbmc7XG59O1xuXG5jb25zdCBhbmltYXRpb24gPSBrZXlmcmFtZXMoe1xuICB0bzoge1xuICAgIHN0cm9rZURhc2hvZmZzZXQ6IDEzNixcbiAgfSxcbn0pO1xuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2KHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWFyb3VuZFwiLFxufSk7XG5cbmNvbnN0IFN0eWxlZFN2ZyA9IHN0eWxlZC5zdmcoe1xuICB0cmFuc2Zvcm1PcmlnaW46IFwiNTAlIDY1JVwiLFxufSk7XG5cbmNvbnN0IFN0eWxlZFBvbHlnb24gPSBzdHlsZWQucG9seWdvbigoeyB0aGVtZSB9KSA9PiAoe1xuICBzdHJva2U6IHRoZW1lLnZhcmlhYmxlcy5jb2xvci5ncmVlbi5yZWd1bGFyLFxuICBzdHJva2VEYXNoYXJyYXk6IDE3LFxuICBhbmltYXRpb246IGAycyBsaW5lYXIgMHMgaW5maW5pdGUgJHthbmltYXRpb259YCxcbn0pKTtcblxuZXhwb3J0IGZ1bmN0aW9uIExvYWRpbmdTcGlubmVyKHtcbiAgc2l6ZSA9IDgwLFxuICBzY3JlZW5SZWFkZXJUZXh0LFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbn06IExvYWRpbmdTcGlubmVyUHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRDb250YWluZXJcbiAgICAgIGRhdGEtZTJlLXRlc3QtaWQ9e2RhdGFFMmVUZXN0SWR9XG4gICAgICBkYXRhLWRzLWlkPVwiTG9hZGluZ1NwaW5uZXJcIlxuICAgID5cbiAgICAgIDxTdHlsZWRTdmdcbiAgICAgICAgaWQ9XCJ0cmlhbmdsZVwiXG4gICAgICAgIHdpZHRoPXtzaXplfVxuICAgICAgICBoZWlnaHQ9e3NpemV9XG4gICAgICAgIHZpZXdCb3g9XCItMyAtNCAzOSAzOVwiXG4gICAgICAgIGFyaWEtaGlkZGVuPVwidHJ1ZVwiXG4gICAgICA+XG4gICAgICAgIDxTdHlsZWRQb2x5Z29uXG4gICAgICAgICAgZmlsbD1cInRyYW5zcGFyZW50XCJcbiAgICAgICAgICBzdHJva2VXaWR0aD1cIjFcIlxuICAgICAgICAgIHBvaW50cz1cIjE2LDAgMzIsMzIgMCwzMlwiXG4gICAgICAgIC8+XG4gICAgICA8L1N0eWxlZFN2Zz5cbiAgICAgIDxTY3JlZW5SZWFkZXJUZXh0PntzY3JlZW5SZWFkZXJUZXh0fTwvU2NyZWVuUmVhZGVyVGV4dD5cbiAgICA8L1N0eWxlZENvbnRhaW5lcj5cbiAgKTtcbn1cbiJdfQ== */",
|
|
38
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
39
|
+
});
|
|
40
|
+
const StyledPolygon = /*#__PURE__*/_styled("polygon", process.env.NODE_ENV === "production" ? {
|
|
41
|
+
target: "e2mymjb0"
|
|
42
|
+
} : {
|
|
43
|
+
target: "e2mymjb0",
|
|
44
|
+
label: "StyledPolygon"
|
|
45
|
+
})(_ref => {
|
|
46
|
+
let {
|
|
47
|
+
theme
|
|
48
|
+
} = _ref;
|
|
49
|
+
return {
|
|
50
|
+
stroke: theme.variables.color.green.regular,
|
|
51
|
+
strokeDasharray: 17,
|
|
52
|
+
animation: `2s linear 0s infinite ${animation}`
|
|
53
|
+
};
|
|
54
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxvYWRpbmdTcGlubmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4QnNCIiwiZmlsZSI6IkxvYWRpbmdTcGlubmVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBTY3JlZW5SZWFkZXJUZXh0IH0gZnJvbSBcIi4uLy4uL3NoYXJlZC9TY3JlZW5SZWFkZXJUZXh0XCI7XG5cbmV4cG9ydCB0eXBlIExvYWRpbmdTcGlubmVyUHJvcHMgPSB7XG4gIC8qKiBXaWR0aCBhbmQgSGVpZ2h0IGluIHB4XG4gICAqIEBkZWZhdWx0IDgwcHhcbiAgICovXG4gIHNpemU/OiBudW1iZXI7XG4gIC8qKiBoaWRkZW4gbGFiZWwgZm9yIHNjcmVlbiByZWFkZXJzICovXG4gIHNjcmVlblJlYWRlclRleHQ6IHN0cmluZztcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI/OiBzdHJpbmc7XG59O1xuXG5jb25zdCBhbmltYXRpb24gPSBrZXlmcmFtZXMoe1xuICB0bzoge1xuICAgIHN0cm9rZURhc2hvZmZzZXQ6IDEzNixcbiAgfSxcbn0pO1xuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2KHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcInNwYWNlLWFyb3VuZFwiLFxufSk7XG5cbmNvbnN0IFN0eWxlZFN2ZyA9IHN0eWxlZC5zdmcoe1xuICB0cmFuc2Zvcm1PcmlnaW46IFwiNTAlIDY1JVwiLFxufSk7XG5cbmNvbnN0IFN0eWxlZFBvbHlnb24gPSBzdHlsZWQucG9seWdvbigoeyB0aGVtZSB9KSA9PiAoe1xuICBzdHJva2U6IHRoZW1lLnZhcmlhYmxlcy5jb2xvci5ncmVlbi5yZWd1bGFyLFxuICBzdHJva2VEYXNoYXJyYXk6IDE3LFxuICBhbmltYXRpb246IGAycyBsaW5lYXIgMHMgaW5maW5pdGUgJHthbmltYXRpb259YCxcbn0pKTtcblxuZXhwb3J0IGZ1bmN0aW9uIExvYWRpbmdTcGlubmVyKHtcbiAgc2l6ZSA9IDgwLFxuICBzY3JlZW5SZWFkZXJUZXh0LFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbn06IExvYWRpbmdTcGlubmVyUHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICByZXR1cm4gKFxuICAgIDxTdHlsZWRDb250YWluZXJcbiAgICAgIGRhdGEtZTJlLXRlc3QtaWQ9e2RhdGFFMmVUZXN0SWR9XG4gICAgICBkYXRhLWRzLWlkPVwiTG9hZGluZ1NwaW5uZXJcIlxuICAgID5cbiAgICAgIDxTdHlsZWRTdmdcbiAgICAgICAgaWQ9XCJ0cmlhbmdsZVwiXG4gICAgICAgIHdpZHRoPXtzaXplfVxuICAgICAgICBoZWlnaHQ9e3NpemV9XG4gICAgICAgIHZpZXdCb3g9XCItMyAtNCAzOSAzOVwiXG4gICAgICAgIGFyaWEtaGlkZGVuPVwidHJ1ZVwiXG4gICAgICA+XG4gICAgICAgIDxTdHlsZWRQb2x5Z29uXG4gICAgICAgICAgZmlsbD1cInRyYW5zcGFyZW50XCJcbiAgICAgICAgICBzdHJva2VXaWR0aD1cIjFcIlxuICAgICAgICAgIHBvaW50cz1cIjE2LDAgMzIsMzIgMCwzMlwiXG4gICAgICAgIC8+XG4gICAgICA8L1N0eWxlZFN2Zz5cbiAgICAgIDxTY3JlZW5SZWFkZXJUZXh0PntzY3JlZW5SZWFkZXJUZXh0fTwvU2NyZWVuUmVhZGVyVGV4dD5cbiAgICA8L1N0eWxlZENvbnRhaW5lcj5cbiAgKTtcbn1cbiJdfQ== */");
|
|
55
|
+
function LoadingSpinner(_ref2) {
|
|
56
|
+
let {
|
|
57
|
+
size = 80,
|
|
58
|
+
screenReaderText,
|
|
59
|
+
"data-e2e-test-id": dataE2eTestId
|
|
60
|
+
} = _ref2;
|
|
61
|
+
return /*#__PURE__*/React.createElement(StyledContainer, {
|
|
62
|
+
"data-e2e-test-id": dataE2eTestId,
|
|
63
|
+
"data-ds-id": "LoadingSpinner"
|
|
64
|
+
}, /*#__PURE__*/React.createElement(StyledSvg, {
|
|
65
|
+
id: "triangle",
|
|
66
|
+
width: size,
|
|
67
|
+
height: size,
|
|
68
|
+
viewBox: "-3 -4 39 39",
|
|
69
|
+
"aria-hidden": "true"
|
|
70
|
+
}, /*#__PURE__*/React.createElement(StyledPolygon, {
|
|
71
|
+
fill: "transparent",
|
|
72
|
+
strokeWidth: "1",
|
|
73
|
+
points: "16,0 32,32 0,32"
|
|
74
|
+
})), /*#__PURE__*/React.createElement(ScreenReaderText, null, screenReaderText));
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
export { LoadingSpinner };
|
|
78
|
+
//# sourceMappingURL=LoadingSpinner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LoadingSpinner.js","sources":["../../../../../src/components/LoadingSpinner/LoadingSpinner.tsx"],"sourcesContent":["import React from \"react\";\nimport { keyframes } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport { ScreenReaderText } from \"../../shared/ScreenReaderText\";\n\nexport type LoadingSpinnerProps = {\n /** Width and Height in px\n * @default 80px\n */\n size?: number;\n /** hidden label for screen readers */\n screenReaderText: string;\n \"data-e2e-test-id\"?: string;\n};\n\nconst animation = keyframes({\n to: {\n strokeDashoffset: 136,\n },\n});\n\nconst StyledContainer = styled.div({\n display: \"flex\",\n justifyContent: \"space-around\",\n});\n\nconst StyledSvg = styled.svg({\n transformOrigin: \"50% 65%\",\n});\n\nconst StyledPolygon = styled.polygon(({ theme }) => ({\n stroke: theme.variables.color.green.regular,\n strokeDasharray: 17,\n animation: `2s linear 0s infinite ${animation}`,\n}));\n\nexport function LoadingSpinner({\n size = 80,\n screenReaderText,\n \"data-e2e-test-id\": dataE2eTestId,\n}: LoadingSpinnerProps): React.ReactElement {\n return (\n <StyledContainer\n data-e2e-test-id={dataE2eTestId}\n data-ds-id=\"LoadingSpinner\"\n >\n <StyledSvg\n id=\"triangle\"\n width={size}\n height={size}\n viewBox=\"-3 -4 39 39\"\n aria-hidden=\"true\"\n >\n <StyledPolygon\n fill=\"transparent\"\n strokeWidth=\"1\"\n points=\"16,0 32,32 0,32\"\n />\n </StyledSvg>\n <ScreenReaderText>{screenReaderText}</ScreenReaderText>\n </StyledContainer>\n );\n}\n"],"names":["animation","keyframes","to","strokeDashoffset","StyledContainer","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledSvg","StyledPolygon","_ref","theme","stroke","variables","color","green","regular","strokeDasharray","LoadingSpinner","_ref2","size","screenReaderText","dataE2eTestId","React","createElement","id","width","height","viewBox","fill","strokeWidth","points","ScreenReaderText"],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export declare type PaginationProps = {
|
|
3
|
+
/** Total number of pages */
|
|
4
|
+
numOfPages: number;
|
|
5
|
+
/** Current page */
|
|
6
|
+
currentPage: number;
|
|
7
|
+
/** Number of items per page */
|
|
8
|
+
numOfItemsPerPage?: number;
|
|
9
|
+
onPrevClick: (page: number, firstItemIndex?: number, lastItemIndex?: number) => void;
|
|
10
|
+
onNextClick: (page: number, firstItemIndex?: number, lastItemIndex?: number) => void;
|
|
11
|
+
/** Callback to provide a custom label */
|
|
12
|
+
formatLabel?: (firstItemIndex?: number, lastItemIndex?: number, numOfItems?: number) => string;
|
|
13
|
+
/** Align label with respect to arrow buttons */
|
|
14
|
+
alignLabel?: "center" | "left";
|
|
15
|
+
"data-e2e-test-id"?: string;
|
|
16
|
+
};
|
|
17
|
+
export declare function Pagination({ numOfPages, numOfItemsPerPage, currentPage, formatLabel, alignLabel, "data-e2e-test-id": dataE2eTestId, onPrevClick, onNextClick, }: PaginationProps): React.ReactElement;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Inline } from '../Inline/Inline.js';
|
|
3
|
+
import { PictogramButton } from '../PictogramButton/PictogramButton.js';
|
|
4
|
+
import { Text } from '../Typography/Text/Text.js';
|
|
5
|
+
|
|
6
|
+
function getItemIndices(page, numOfItemsPerPage) {
|
|
7
|
+
const lastItemIndex = page * numOfItemsPerPage;
|
|
8
|
+
const firstItemIndex = lastItemIndex - numOfItemsPerPage + 1;
|
|
9
|
+
return [firstItemIndex, lastItemIndex];
|
|
10
|
+
}
|
|
11
|
+
function Pagination(_ref) {
|
|
12
|
+
let {
|
|
13
|
+
numOfPages,
|
|
14
|
+
numOfItemsPerPage,
|
|
15
|
+
currentPage,
|
|
16
|
+
formatLabel,
|
|
17
|
+
alignLabel = "center",
|
|
18
|
+
"data-e2e-test-id": dataE2eTestId,
|
|
19
|
+
onPrevClick,
|
|
20
|
+
onNextClick
|
|
21
|
+
} = _ref;
|
|
22
|
+
let label;
|
|
23
|
+
const isFirstPage = currentPage === 1;
|
|
24
|
+
const isLastPage = currentPage === numOfPages;
|
|
25
|
+
if (numOfItemsPerPage) {
|
|
26
|
+
const [firstItemIndex, lastItemIndex] = getItemIndices(currentPage, numOfItemsPerPage);
|
|
27
|
+
const numOfItems = numOfPages * numOfItemsPerPage;
|
|
28
|
+
label = formatLabel ? formatLabel(firstItemIndex, lastItemIndex, numOfItems) : `${firstItemIndex} - ${lastItemIndex} of ${numOfItems}`;
|
|
29
|
+
} else {
|
|
30
|
+
label = formatLabel ? formatLabel() : `${currentPage} of ${numOfPages}`;
|
|
31
|
+
}
|
|
32
|
+
const handlePrevClick = () => {
|
|
33
|
+
if (numOfItemsPerPage) {
|
|
34
|
+
const [firstItemIndex, lastItemIndex] = getItemIndices(currentPage - 1, numOfItemsPerPage);
|
|
35
|
+
onPrevClick(currentPage - 1, firstItemIndex, lastItemIndex);
|
|
36
|
+
} else {
|
|
37
|
+
onPrevClick(currentPage - 1);
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
const handleNextClick = () => {
|
|
41
|
+
if (numOfItemsPerPage) {
|
|
42
|
+
const [firstItemIndex, lastItemIndex] = getItemIndices(currentPage + 1, numOfItemsPerPage);
|
|
43
|
+
onNextClick(currentPage + 1, firstItemIndex, lastItemIndex);
|
|
44
|
+
} else {
|
|
45
|
+
onNextClick(currentPage + 1);
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
const leftButton = /*#__PURE__*/React.createElement(PictogramButton, {
|
|
49
|
+
size: "s",
|
|
50
|
+
icon: "chevron-left",
|
|
51
|
+
disabled: isFirstPage,
|
|
52
|
+
onClick: handlePrevClick
|
|
53
|
+
});
|
|
54
|
+
const rightButton = /*#__PURE__*/React.createElement(PictogramButton, {
|
|
55
|
+
size: "s",
|
|
56
|
+
icon: "chevron-right",
|
|
57
|
+
disabled: isLastPage,
|
|
58
|
+
onClick: handleNextClick
|
|
59
|
+
});
|
|
60
|
+
const labelElm = /*#__PURE__*/React.createElement(Text, {
|
|
61
|
+
size: "s"
|
|
62
|
+
}, label);
|
|
63
|
+
const content = alignLabel === "left" ? /*#__PURE__*/React.createElement(React.Fragment, null, labelElm, leftButton, rightButton) : /*#__PURE__*/React.createElement(React.Fragment, null, leftButton, labelElm, rightButton);
|
|
64
|
+
return /*#__PURE__*/React.createElement(Inline, {
|
|
65
|
+
vAlignItems: "center",
|
|
66
|
+
"data-e2e-test-id": dataE2eTestId,
|
|
67
|
+
"data-ds-id": "Pagination"
|
|
68
|
+
}, content);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export { Pagination };
|
|
72
|
+
//# sourceMappingURL=Pagination.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Pagination.js","sources":["../../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import React from \"react\";\nimport { Inline } from \"../Inline/Inline\";\nimport { PictogramButton } from \"../PictogramButton/PictogramButton\";\nimport { Text } from \"../Typography/Text/Text\";\n\nexport type PaginationProps = {\n /** Total number of pages */\n numOfPages: number;\n /** Current page */\n currentPage: number;\n /** Number of items per page */\n numOfItemsPerPage?: number;\n onPrevClick: (\n page: number,\n firstItemIndex?: number,\n lastItemIndex?: number\n ) => void;\n onNextClick: (\n page: number,\n firstItemIndex?: number,\n lastItemIndex?: number\n ) => void;\n /** Callback to provide a custom label */\n formatLabel?: (\n firstItemIndex?: number,\n lastItemIndex?: number,\n numOfItems?: number\n ) => string;\n /** Align label with respect to arrow buttons */\n alignLabel?: \"center\" | \"left\";\n \"data-e2e-test-id\"?: string;\n};\n\nfunction getItemIndices(\n page: number,\n numOfItemsPerPage: number\n): [number, number] {\n const lastItemIndex = page * numOfItemsPerPage;\n const firstItemIndex = lastItemIndex - numOfItemsPerPage + 1;\n\n return [firstItemIndex, lastItemIndex];\n}\n\nexport function Pagination({\n numOfPages,\n numOfItemsPerPage,\n currentPage,\n formatLabel,\n alignLabel = \"center\",\n \"data-e2e-test-id\": dataE2eTestId,\n onPrevClick,\n onNextClick,\n}: PaginationProps): React.ReactElement {\n let label;\n const isFirstPage = currentPage === 1;\n const isLastPage = currentPage === numOfPages;\n\n if (numOfItemsPerPage) {\n const [firstItemIndex, lastItemIndex] = getItemIndices(\n currentPage,\n numOfItemsPerPage\n );\n const numOfItems = numOfPages * numOfItemsPerPage;\n\n label = formatLabel\n ? formatLabel(firstItemIndex, lastItemIndex, numOfItems)\n : `${firstItemIndex} - ${lastItemIndex} of ${numOfItems}`;\n } else {\n label = formatLabel ? formatLabel() : `${currentPage} of ${numOfPages}`;\n }\n\n const handlePrevClick = () => {\n if (numOfItemsPerPage) {\n const [firstItemIndex, lastItemIndex] = getItemIndices(\n currentPage - 1,\n numOfItemsPerPage\n );\n\n onPrevClick(currentPage - 1, firstItemIndex, lastItemIndex);\n } else {\n onPrevClick(currentPage - 1);\n }\n };\n\n const handleNextClick = () => {\n if (numOfItemsPerPage) {\n const [firstItemIndex, lastItemIndex] = getItemIndices(\n currentPage + 1,\n numOfItemsPerPage\n );\n\n onNextClick(currentPage + 1, firstItemIndex, lastItemIndex);\n } else {\n onNextClick(currentPage + 1);\n }\n };\n\n const leftButton = (\n <PictogramButton\n size=\"s\"\n icon=\"chevron-left\"\n disabled={isFirstPage}\n onClick={handlePrevClick}\n />\n );\n const rightButton = (\n <PictogramButton\n size=\"s\"\n icon=\"chevron-right\"\n disabled={isLastPage}\n onClick={handleNextClick}\n />\n );\n const labelElm = <Text size=\"s\">{label}</Text>;\n const content =\n alignLabel === \"left\" ? (\n <>\n {labelElm}\n {leftButton}\n {rightButton}\n </>\n ) : (\n <>\n {leftButton}\n {labelElm}\n {rightButton}\n </>\n );\n\n return (\n <Inline\n vAlignItems=\"center\"\n data-e2e-test-id={dataE2eTestId}\n data-ds-id=\"Pagination\"\n >\n {content}\n </Inline>\n );\n}\n"],"names":["getItemIndices","page","numOfItemsPerPage","lastItemIndex","firstItemIndex","Pagination","_ref","numOfPages","currentPage","formatLabel","alignLabel","dataE2eTestId","onPrevClick","onNextClick","label","isFirstPage","isLastPage","numOfItems","handlePrevClick","handleNextClick","leftButton","React","createElement","PictogramButton","size","icon","disabled","onClick","rightButton","labelElm","Text","content","Fragment","Inline","vAlignItems"],"mappings":";;;;;AAiCA,SAASA,cAAcA,CACrBC,IAAY,EACZC,iBAAyB,EACP;AAClB,EAAA,MAAMC,aAAa,GAAGF,IAAI,GAAGC,iBAAiB,CAAA;AAC9C,EAAA,MAAME,cAAc,GAAGD,aAAa,GAAGD,iBAAiB,GAAG,CAAC,CAAA;AAE5D,EAAA,OAAO,CAACE,cAAc,EAAED,aAAa,CAAC,CAAA;AACxC,CAAA;AAEO,SAASE,UAAUA,CAAAC,IAAA,EASc;EAAA,IATb;IACzBC,UAAU;IACVL,iBAAiB;IACjBM,WAAW;IACXC,WAAW;AACXC,IAAAA,UAAU,GAAG,QAAQ;AACrB,IAAA,kBAAkB,EAAEC,aAAa;IACjCC,WAAW;AACXC,IAAAA,WAAAA;AACe,GAAC,GAAAP,IAAA,CAAA;AAChB,EAAA,IAAIQ,KAAK,CAAA;AACT,EAAA,MAAMC,WAAW,GAAGP,WAAW,KAAK,CAAC,CAAA;AACrC,EAAA,MAAMQ,UAAU,GAAGR,WAAW,KAAKD,UAAU,CAAA;AAE7C,EAAA,IAAIL,iBAAiB,EAAE;IACrB,MAAM,CAACE,cAAc,EAAED,aAAa,CAAC,GAAGH,cAAc,CACpDQ,WAAW,EACXN,iBAAiB,CAClB,CAAA;AACD,IAAA,MAAMe,UAAU,GAAGV,UAAU,GAAGL,iBAAiB,CAAA;AAEjDY,IAAAA,KAAK,GAAGL,WAAW,GACfA,WAAW,CAACL,cAAc,EAAED,aAAa,EAAEc,UAAU,CAAC,GACrD,CAAEb,EAAAA,cAAe,MAAKD,aAAc,CAAA,IAAA,EAAMc,UAAW,CAAC,CAAA,CAAA;AAC7D,GAAC,MAAM;IACLH,KAAK,GAAGL,WAAW,GAAGA,WAAW,EAAE,GAAI,CAAED,EAAAA,WAAY,CAAMD,IAAAA,EAAAA,UAAW,CAAC,CAAA,CAAA;AACzE,GAAA;EAEA,MAAMW,eAAe,GAAGA,MAAM;AAC5B,IAAA,IAAIhB,iBAAiB,EAAE;AACrB,MAAA,MAAM,CAACE,cAAc,EAAED,aAAa,CAAC,GAAGH,cAAc,CACpDQ,WAAW,GAAG,CAAC,EACfN,iBAAiB,CAClB,CAAA;MAEDU,WAAW,CAACJ,WAAW,GAAG,CAAC,EAAEJ,cAAc,EAAED,aAAa,CAAC,CAAA;AAC7D,KAAC,MAAM;AACLS,MAAAA,WAAW,CAACJ,WAAW,GAAG,CAAC,CAAC,CAAA;AAC9B,KAAA;GACD,CAAA;EAED,MAAMW,eAAe,GAAGA,MAAM;AAC5B,IAAA,IAAIjB,iBAAiB,EAAE;AACrB,MAAA,MAAM,CAACE,cAAc,EAAED,aAAa,CAAC,GAAGH,cAAc,CACpDQ,WAAW,GAAG,CAAC,EACfN,iBAAiB,CAClB,CAAA;MAEDW,WAAW,CAACL,WAAW,GAAG,CAAC,EAAEJ,cAAc,EAAED,aAAa,CAAC,CAAA;AAC7D,KAAC,MAAM;AACLU,MAAAA,WAAW,CAACL,WAAW,GAAG,CAAC,CAAC,CAAA;AAC9B,KAAA;GACD,CAAA;AAED,EAAA,MAAMY,UAAU,gBACdC,KAAA,CAAAC,aAAA,CAACC,eAAe,EAAA;AACdC,IAAAA,IAAI,EAAC,GAAG;AACRC,IAAAA,IAAI,EAAC,cAAc;AACnBC,IAAAA,QAAQ,EAAEX,WAAY;AACtBY,IAAAA,OAAO,EAAET,eAAAA;GAEZ,CAAA,CAAA;AACD,EAAA,MAAMU,WAAW,gBACfP,KAAA,CAAAC,aAAA,CAACC,eAAe,EAAA;AACdC,IAAAA,IAAI,EAAC,GAAG;AACRC,IAAAA,IAAI,EAAC,eAAe;AACpBC,IAAAA,QAAQ,EAAEV,UAAW;AACrBW,IAAAA,OAAO,EAAER,eAAAA;GAEZ,CAAA,CAAA;AACD,EAAA,MAAMU,QAAQ,gBAAGR,KAAA,CAAAC,aAAA,CAACQ,IAAI,EAAA;AAACN,IAAAA,IAAI,EAAC,GAAA;AAAG,GAAA,EAAEV,KAAK,CAAQ,CAAA;AAC9C,EAAA,MAAMiB,OAAO,GACXrB,UAAU,KAAK,MAAM,gBACnBW,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAW,QAAA,EAAA,IAAA,EACGH,QAAQ,EACRT,UAAU,EACVQ,WAAW,CACX,gBAEHP,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAW,QAAA,QACGZ,UAAU,EACVS,QAAQ,EACRD,WAAW,CAEf,CAAA;AAEH,EAAA,oBACEP,KAAA,CAAAC,aAAA,CAACW,MAAM,EAAA;AACLC,IAAAA,WAAW,EAAC,QAAQ;AACpB,IAAA,kBAAA,EAAkBvB,aAAc;IAChC,YAAW,EAAA,YAAA;AAAY,GAAA,EAEtBoB,OAAO,CACD,CAAA;AAEb;;;;"}
|
|
@@ -7,6 +7,8 @@ export declare type PictogramButtonProps = Pick<ButtonProps, "variant" | "type"
|
|
|
7
7
|
icon: IconName;
|
|
8
8
|
/** If true, the button has square corners. */
|
|
9
9
|
squareCorners?: boolean;
|
|
10
|
+
/** Size */
|
|
11
|
+
size?: "xs" | "s" | "m";
|
|
10
12
|
};
|
|
11
13
|
declare type PictogramButtonComponent = <C extends React.ElementType = "button">(props: PolymorphicComponentPropsWithRef<C, PictogramButtonProps>) => React.ReactElement | null;
|
|
12
14
|
export declare const PictogramButton: PictogramButtonComponent;
|
|
@@ -13,6 +13,7 @@ const StyledPictogramButton = /*#__PURE__*/_styled("button", process.env.NODE_EN
|
|
|
13
13
|
let {
|
|
14
14
|
theme,
|
|
15
15
|
variant,
|
|
16
|
+
size,
|
|
16
17
|
squareCorners
|
|
17
18
|
} = _ref;
|
|
18
19
|
return {
|
|
@@ -59,12 +60,16 @@ const StyledPictogramButton = /*#__PURE__*/_styled("button", process.env.NODE_EN
|
|
|
59
60
|
}),
|
|
60
61
|
...(squareCorners && {
|
|
61
62
|
borderRadius: "0"
|
|
63
|
+
}),
|
|
64
|
+
...((size === "s" || size === "m") && {
|
|
65
|
+
padding: theme.variables.size.spacing.xs
|
|
62
66
|
})
|
|
63
67
|
};
|
|
64
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlBpY3RvZ3JhbUJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUThCIiwiZmlsZSI6IlBpY3RvZ3JhbUJ1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSByZWFjdC9qc3gtcHJvcHMtbm8tc3ByZWFkaW5nICovXG5pbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEljb25OYW1lLCBJY29uIH0gZnJvbSBcIi4uL0ljb24vSWNvblwiO1xuaW1wb3J0IHsgSW5saW5lIH0gZnJvbSBcIi4uL0lubGluZS9JbmxpbmVcIjtcbmltcG9ydCB7IEJ1dHRvblByb3BzIH0gZnJvbSBcIi4uL0J1dHRvbi9CdXR0b25cIjtcbmltcG9ydCB7IFBvbHltb3JwaGljQ29tcG9uZW50UHJvcHNXaXRoUmVmLCBQb2x5bW9ycGhpY1JlZiB9IGZyb20gXCIuLi8uLi90eXBlc1wiO1xuXG5jb25zdCBTdHlsZWRQaWN0b2dyYW1CdXR0b24gPSBzdHlsZWQuYnV0dG9uPFBhcnRpYWw8UGljdG9ncmFtQnV0dG9uUHJvcHM+
|
|
68
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlBpY3RvZ3JhbUJ1dHRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUThCIiwiZmlsZSI6IlBpY3RvZ3JhbUJ1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSByZWFjdC9qc3gtcHJvcHMtbm8tc3ByZWFkaW5nICovXG5pbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEljb25OYW1lLCBJY29uIH0gZnJvbSBcIi4uL0ljb24vSWNvblwiO1xuaW1wb3J0IHsgSW5saW5lIH0gZnJvbSBcIi4uL0lubGluZS9JbmxpbmVcIjtcbmltcG9ydCB7IEJ1dHRvblByb3BzIH0gZnJvbSBcIi4uL0J1dHRvbi9CdXR0b25cIjtcbmltcG9ydCB7IFBvbHltb3JwaGljQ29tcG9uZW50UHJvcHNXaXRoUmVmLCBQb2x5bW9ycGhpY1JlZiB9IGZyb20gXCIuLi8uLi90eXBlc1wiO1xuXG5jb25zdCBTdHlsZWRQaWN0b2dyYW1CdXR0b24gPSBzdHlsZWQuYnV0dG9uPFBhcnRpYWw8UGljdG9ncmFtQnV0dG9uUHJvcHM+PihcbiAgKHsgdGhlbWUsIHZhcmlhbnQsIHNpemUsIHNxdWFyZUNvcm5lcnMgfSkgPT4gKHtcbiAgICBcIiZbdHlwZT0nYnV0dG9uJ11cIjoge1xuICAgICAgYXBwZWFyYW5jZTogXCJub25lXCIsXG4gICAgICBcIi1tb3otYXBwZWFyYW5jZVwiOiBcIm5vbmVcIixcbiAgICAgIFwiLXdlYmtpdC1hcHBlYXJhbmNlXCI6IFwibm9uZVwiLFxuICAgIH0sXG4gICAgYm9yZGVyOiAwLFxuICAgIGRpc3BsYXk6IFwiaW5saW5lLWJsb2NrXCIsXG4gICAgdGV4dFRyYW5zZm9ybTogXCJub25lXCIsXG4gICAgdGV4dERlY29yYXRpb246IFwibm9uZVwiLFxuICAgIGJvcmRlclJhZGl1czogdGhlbWUudmFyaWFibGVzLnNpemUuYm9yZGVyUmFkaXVzLmJ1dHRvbi5tLFxuICAgIGZvbnRGYW1pbHk6IHRoZW1lLnZhcmlhYmxlcy5mb250RmFtaWx5LmxhdG8sXG4gICAgZm9udFNpemU6IHRoZW1lLnZhcmlhYmxlcy5zaXplLmZvbnQuYnV0dG9uLm0sXG4gICAgbGluZUhlaWdodDogdGhlbWUudmFyaWFibGVzLnNpemUubGluZUhlaWdodC5idXR0b24ubSxcbiAgICBmb250V2VpZ2h0OiB0aGVtZS52YXJpYWJsZXMud2VpZ2h0LmJvbGQsXG4gICAgcGFkZGluZzogdGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy54eHMsXG4gICAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgICBcIiZbZGlzYWJsZWRdLCAmOmRpc2FibGVkXCI6IHtcbiAgICAgIG9wYWNpdHk6IHRoZW1lLnZhcmlhYmxlcy5vcGFjaXR5LmJ1dHRvbi5kaXNhYmxlZCxcbiAgICAgIHBvaW50ZXJFdmVudHM6IFwibm9uZVwiLFxuICAgIH0sXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IuYmFja2dyb3VuZC5idXR0b25bdmFyaWFudF0uYmFzZSxcbiAgICBjb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLnRleHQuYnV0dG9uW3ZhcmlhbnRdLmJhc2UsXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLmJhY2tncm91bmQuYnV0dG9uW3ZhcmlhbnRdLmhvdmVyLFxuICAgICAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50ZXh0LmJ1dHRvblt2YXJpYW50XS5ob3ZlcixcbiAgICB9LFxuICAgIFwiJjphY3RpdmVcIjoge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IuYmFja2dyb3VuZC5idXR0b25bdmFyaWFudF0uYWN0aXZlLFxuICAgICAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50ZXh0LmJ1dHRvblt2YXJpYW50XS5hY3RpdmUsXG4gICAgfSxcbiAgICAuLi4odmFyaWFudCA9PT0gXCJzZWNvbmRhcnlcIiAmJiB7XG4gICAgICBib3JkZXI6IFwiMXB4IHNvbGlkXCIsXG4gICAgICBib3JkZXJDb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLmJvcmRlci5idXR0b25bdmFyaWFudF0uYmFzZSxcbiAgICAgIHBhZGRpbmc6IHBhcnNlSW50KHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcueHhzLCAxMCkgLSAxLFxuICAgICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci5ib3JkZXIuYnV0dG9uW3ZhcmlhbnRdLmhvdmVyLFxuICAgICAgfSxcbiAgICAgIFwiJjphY3RpdmVcIjoge1xuICAgICAgICBib3JkZXJDb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLmJvcmRlci5idXR0b25bdmFyaWFudF0uYWN0aXZlLFxuICAgICAgfSxcbiAgICB9KSxcbiAgICAuLi4oc3F1YXJlQ29ybmVycyAmJiB7XG4gICAgICBib3JkZXJSYWRpdXM6IFwiMFwiLFxuICAgIH0pLFxuICAgIC4uLigoc2l6ZSA9PT0gXCJzXCIgfHwgc2l6ZSA9PT0gXCJtXCIpICYmIHtcbiAgICAgIHBhZGRpbmc6IHRoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcueHMsXG4gICAgfSksXG4gIH0pXG4pO1xuXG5leHBvcnQgdHlwZSBQaWN0b2dyYW1CdXR0b25Qcm9wcyA9IFBpY2s8XG4gIEJ1dHRvblByb3BzLFxuICB8IFwidmFyaWFudFwiXG4gIHwgXCJ0eXBlXCJcbiAgfCBcImRpc2FibGVkXCJcbiAgfCBcIm9uQ2xpY2tcIlxuICB8IFwib25Gb2N1c1wiXG4gIHwgXCJvbkJsdXJcIlxuICB8IFwiZGF0YS1lMmUtdGVzdC1pZFwiXG4+ICYge1xuICAvKiogVGhlIGNlbnRlcmVkIGljb24gdG8gYmUgZGlzcGxheWVkLiAqL1xuICBpY29uOiBJY29uTmFtZTtcbiAgLyoqIElmIHRydWUsIHRoZSBidXR0b24gaGFzIHNxdWFyZSBjb3JuZXJzLiAqL1xuICBzcXVhcmVDb3JuZXJzPzogYm9vbGVhbjtcbiAgLyoqIFNpemUgKi9cbiAgc2l6ZT86IFwieHNcIiB8IFwic1wiIHwgXCJtXCI7XG59O1xuXG50eXBlIFBpY3RvZ3JhbUJ1dHRvbkNvbXBvbmVudCA9IDxDIGV4dGVuZHMgUmVhY3QuRWxlbWVudFR5cGUgPSBcImJ1dHRvblwiPihcbiAgcHJvcHM6IFBvbHltb3JwaGljQ29tcG9uZW50UHJvcHNXaXRoUmVmPEMsIFBpY3RvZ3JhbUJ1dHRvblByb3BzPlxuKSA9PiBSZWFjdC5SZWFjdEVsZW1lbnQgfCBudWxsO1xuXG5leHBvcnQgY29uc3QgUGljdG9ncmFtQnV0dG9uOiBQaWN0b2dyYW1CdXR0b25Db21wb25lbnQgPSBSZWFjdC5mb3J3YXJkUmVmKFxuICA8QyBleHRlbmRzIFJlYWN0LkVsZW1lbnRUeXBlID0gXCJidXR0b25cIj4oXG4gICAge1xuICAgICAgdHlwZSA9IFwiYnV0dG9uXCIsXG4gICAgICBzaXplID0gXCJ4c1wiLFxuICAgICAgdmFyaWFudCA9IFwidGVydGlhcnlcIixcbiAgICAgIGRpc2FibGVkID0gZmFsc2UsXG4gICAgICBvbkNsaWNrLFxuICAgICAgb25Gb2N1cyxcbiAgICAgIG9uQmx1cixcbiAgICAgIFwiZGF0YS1lMmUtdGVzdC1pZFwiOiBkYXRhRTJlVGVzdElkLFxuICAgICAgYXMsXG4gICAgICBpY29uLFxuICAgICAgc3F1YXJlQ29ybmVycyA9IGZhbHNlLFxuICAgICAgLi4ucmVzdFxuICAgIH06IFBvbHltb3JwaGljQ29tcG9uZW50UHJvcHNXaXRoUmVmPEMsIFBpY3RvZ3JhbUJ1dHRvblByb3BzPixcbiAgICByZWY/OiBQb2x5bW9ycGhpY1JlZjxDPlxuICApID0+IHtcbiAgICBmdW5jdGlvbiBoYW5kbGVDbGljayhlOiBSZWFjdC5Nb3VzZUV2ZW50KSB7XG4gICAgICBpZiAoZGlzYWJsZWQpIHtcbiAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgfVxuICAgICAgaWYgKG9uQ2xpY2spIHtcbiAgICAgICAgb25DbGljayhlKTtcbiAgICAgIH1cbiAgICB9XG4gICAgY29uc3QgaWNvblNpemUgPSBzaXplID09PSBcIm1cIiA/IFwibVwiIDogXCJzXCI7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPFN0eWxlZFBpY3RvZ3JhbUJ1dHRvblxuICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgZGF0YS1lMmUtdGVzdC1pZD17ZGF0YUUyZVRlc3RJZH1cbiAgICAgICAgZGF0YS1kcy1pZD1cIlBpY3RvZ3JhbUJ1dHRvblwiXG4gICAgICAgIGFzPXthc31cbiAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICB0eXBlPXthcyAmJiBhcyAhPT0gXCJidXR0b25cIiA/IHVuZGVmaW5lZCA6IHR5cGV9XG4gICAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICAgIHNpemU9e3NpemV9XG4gICAgICAgIHNxdWFyZUNvcm5lcnM9e3NxdWFyZUNvcm5lcnN9XG4gICAgICAgIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfVxuICAgICAgICBvbkZvY3VzPXtvbkZvY3VzfVxuICAgICAgICBvbkJsdXI9e29uQmx1cn1cbiAgICAgICAgey4uLnJlc3R9XG4gICAgICA+XG4gICAgICAgIDxJbmxpbmUgdkFsaWduSXRlbXM9XCJjZW50ZXJcIiBhbGlnbkl0ZW1zPVwiY2VudGVyXCIgc3BhY2U9XCJ4eHNcIiBub1dyYXA+XG4gICAgICAgICAgPEljb25cbiAgICAgICAgICAgIHNpemU9e2ljb25TaXplfVxuICAgICAgICAgICAgbmFtZT17aWNvbn1cbiAgICAgICAgICAgIGRhdGEtdGVzdGlkPXtpY29ufVxuICAgICAgICAgICAgZGF0YS1lMmUtdGVzdC1pZD17aWNvbn1cbiAgICAgICAgICAvPlxuICAgICAgICA8L0lubGluZT5cbiAgICAgIDwvU3R5bGVkUGljdG9ncmFtQnV0dG9uPlxuICAgICk7XG4gIH1cbik7XG4iXX0= */");
|
|
65
69
|
const PictogramButton = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
|
|
66
70
|
let {
|
|
67
71
|
type = "button",
|
|
72
|
+
size = "xs",
|
|
68
73
|
variant = "tertiary",
|
|
69
74
|
disabled = false,
|
|
70
75
|
onClick,
|
|
@@ -84,6 +89,7 @@ const PictogramButton = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
|
|
|
84
89
|
onClick(e);
|
|
85
90
|
}
|
|
86
91
|
}
|
|
92
|
+
const iconSize = size === "m" ? "m" : "s";
|
|
87
93
|
return /*#__PURE__*/React.createElement(StyledPictogramButton, _extends({
|
|
88
94
|
ref: ref,
|
|
89
95
|
"data-e2e-test-id": dataE2eTestId,
|
|
@@ -92,6 +98,7 @@ const PictogramButton = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
|
|
|
92
98
|
disabled: disabled,
|
|
93
99
|
type: as && as !== "button" ? undefined : type,
|
|
94
100
|
variant: variant,
|
|
101
|
+
size: size,
|
|
95
102
|
squareCorners: squareCorners,
|
|
96
103
|
onClick: handleClick,
|
|
97
104
|
onFocus: onFocus,
|
|
@@ -102,7 +109,7 @@ const PictogramButton = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
|
|
|
102
109
|
space: "xxs",
|
|
103
110
|
noWrap: true
|
|
104
111
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
105
|
-
size:
|
|
112
|
+
size: iconSize,
|
|
106
113
|
name: icon,
|
|
107
114
|
"data-testid": icon,
|
|
108
115
|
"data-e2e-test-id": icon
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PictogramButton.js","sources":["../../../../../src/components/PictogramButton/PictogramButton.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { IconName, Icon } from \"../Icon/Icon\";\nimport { Inline } from \"../Inline/Inline\";\nimport { ButtonProps } from \"../Button/Button\";\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from \"../../types\";\n\nconst StyledPictogramButton = styled.button<Partial<PictogramButtonProps>>(\n ({ theme, variant, squareCorners }) => ({\n \"&[type='button']\": {\n appearance: \"none\",\n \"-moz-appearance\": \"none\",\n \"-webkit-appearance\": \"none\",\n },\n border: 0,\n display: \"inline-block\",\n textTransform: \"none\",\n textDecoration: \"none\",\n borderRadius: theme.variables.size.borderRadius.button.m,\n fontFamily: theme.variables.fontFamily.lato,\n fontSize: theme.variables.size.font.button.m,\n lineHeight: theme.variables.size.lineHeight.button.m,\n fontWeight: theme.variables.weight.bold,\n padding: theme.variables.size.spacing.xxs,\n cursor: \"pointer\",\n \"&[disabled], &:disabled\": {\n opacity: theme.variables.opacity.button.disabled,\n pointerEvents: \"none\",\n },\n backgroundColor: theme.values.color.background.button[variant].base,\n color: theme.values.color.text.button[variant].base,\n \"&:hover\": {\n backgroundColor: theme.values.color.background.button[variant].hover,\n color: theme.values.color.text.button[variant].hover,\n },\n \"&:active\": {\n backgroundColor: theme.values.color.background.button[variant].active,\n color: theme.values.color.text.button[variant].active,\n },\n ...(variant === \"secondary\" && {\n border: \"1px solid\",\n borderColor: theme.values.color.border.button[variant].base,\n padding: parseInt(theme.variables.size.spacing.xxs, 10) - 1,\n \"&:hover\": {\n borderColor: theme.values.color.border.button[variant].hover,\n },\n \"&:active\": {\n borderColor: theme.values.color.border.button[variant].active,\n },\n }),\n ...(squareCorners && {\n borderRadius: \"0\",\n }),\n })\n);\n\nexport type PictogramButtonProps = Pick<\n ButtonProps,\n | \"variant\"\n | \"type\"\n | \"disabled\"\n | \"onClick\"\n | \"onFocus\"\n | \"onBlur\"\n | \"data-e2e-test-id\"\n> & {\n /** The centered icon to be displayed. */\n icon: IconName;\n /** If true, the button has square corners. */\n squareCorners?: boolean;\n};\n\ntype PictogramButtonComponent = <C extends React.ElementType = \"button\">(\n props: PolymorphicComponentPropsWithRef<C, PictogramButtonProps>\n) => React.ReactElement | null;\n\nexport const PictogramButton: PictogramButtonComponent = React.forwardRef(\n <C extends React.ElementType = \"button\">(\n {\n type = \"button\",\n variant = \"tertiary\",\n disabled = false,\n onClick,\n onFocus,\n onBlur,\n \"data-e2e-test-id\": dataE2eTestId,\n as,\n icon,\n squareCorners = false,\n ...rest\n }: PolymorphicComponentPropsWithRef<C, PictogramButtonProps>,\n ref?: PolymorphicRef<C>\n ) => {\n function handleClick(e: React.MouseEvent) {\n if (disabled) {\n e.preventDefault();\n }\n if (onClick) {\n onClick(e);\n }\n }\n\n return (\n <StyledPictogramButton\n ref={ref}\n data-e2e-test-id={dataE2eTestId}\n data-ds-id=\"PictogramButton\"\n as={as}\n disabled={disabled}\n type={as && as !== \"button\" ? undefined : type}\n variant={variant}\n squareCorners={squareCorners}\n onClick={handleClick}\n onFocus={onFocus}\n onBlur={onBlur}\n {...rest}\n >\n <Inline vAlignItems=\"center\" alignItems=\"center\" space=\"xxs\" noWrap>\n <Icon\n size
|
|
1
|
+
{"version":3,"file":"PictogramButton.js","sources":["../../../../../src/components/PictogramButton/PictogramButton.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { IconName, Icon } from \"../Icon/Icon\";\nimport { Inline } from \"../Inline/Inline\";\nimport { ButtonProps } from \"../Button/Button\";\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from \"../../types\";\n\nconst StyledPictogramButton = styled.button<Partial<PictogramButtonProps>>(\n ({ theme, variant, size, squareCorners }) => ({\n \"&[type='button']\": {\n appearance: \"none\",\n \"-moz-appearance\": \"none\",\n \"-webkit-appearance\": \"none\",\n },\n border: 0,\n display: \"inline-block\",\n textTransform: \"none\",\n textDecoration: \"none\",\n borderRadius: theme.variables.size.borderRadius.button.m,\n fontFamily: theme.variables.fontFamily.lato,\n fontSize: theme.variables.size.font.button.m,\n lineHeight: theme.variables.size.lineHeight.button.m,\n fontWeight: theme.variables.weight.bold,\n padding: theme.variables.size.spacing.xxs,\n cursor: \"pointer\",\n \"&[disabled], &:disabled\": {\n opacity: theme.variables.opacity.button.disabled,\n pointerEvents: \"none\",\n },\n backgroundColor: theme.values.color.background.button[variant].base,\n color: theme.values.color.text.button[variant].base,\n \"&:hover\": {\n backgroundColor: theme.values.color.background.button[variant].hover,\n color: theme.values.color.text.button[variant].hover,\n },\n \"&:active\": {\n backgroundColor: theme.values.color.background.button[variant].active,\n color: theme.values.color.text.button[variant].active,\n },\n ...(variant === \"secondary\" && {\n border: \"1px solid\",\n borderColor: theme.values.color.border.button[variant].base,\n padding: parseInt(theme.variables.size.spacing.xxs, 10) - 1,\n \"&:hover\": {\n borderColor: theme.values.color.border.button[variant].hover,\n },\n \"&:active\": {\n borderColor: theme.values.color.border.button[variant].active,\n },\n }),\n ...(squareCorners && {\n borderRadius: \"0\",\n }),\n ...((size === \"s\" || size === \"m\") && {\n padding: theme.variables.size.spacing.xs,\n }),\n })\n);\n\nexport type PictogramButtonProps = Pick<\n ButtonProps,\n | \"variant\"\n | \"type\"\n | \"disabled\"\n | \"onClick\"\n | \"onFocus\"\n | \"onBlur\"\n | \"data-e2e-test-id\"\n> & {\n /** The centered icon to be displayed. */\n icon: IconName;\n /** If true, the button has square corners. */\n squareCorners?: boolean;\n /** Size */\n size?: \"xs\" | \"s\" | \"m\";\n};\n\ntype PictogramButtonComponent = <C extends React.ElementType = \"button\">(\n props: PolymorphicComponentPropsWithRef<C, PictogramButtonProps>\n) => React.ReactElement | null;\n\nexport const PictogramButton: PictogramButtonComponent = React.forwardRef(\n <C extends React.ElementType = \"button\">(\n {\n type = \"button\",\n size = \"xs\",\n variant = \"tertiary\",\n disabled = false,\n onClick,\n onFocus,\n onBlur,\n \"data-e2e-test-id\": dataE2eTestId,\n as,\n icon,\n squareCorners = false,\n ...rest\n }: PolymorphicComponentPropsWithRef<C, PictogramButtonProps>,\n ref?: PolymorphicRef<C>\n ) => {\n function handleClick(e: React.MouseEvent) {\n if (disabled) {\n e.preventDefault();\n }\n if (onClick) {\n onClick(e);\n }\n }\n const iconSize = size === \"m\" ? \"m\" : \"s\";\n\n return (\n <StyledPictogramButton\n ref={ref}\n data-e2e-test-id={dataE2eTestId}\n data-ds-id=\"PictogramButton\"\n as={as}\n disabled={disabled}\n type={as && as !== \"button\" ? undefined : type}\n variant={variant}\n size={size}\n squareCorners={squareCorners}\n onClick={handleClick}\n onFocus={onFocus}\n onBlur={onBlur}\n {...rest}\n >\n <Inline vAlignItems=\"center\" alignItems=\"center\" space=\"xxs\" noWrap>\n <Icon\n size={iconSize}\n name={icon}\n data-testid={icon}\n data-e2e-test-id={icon}\n />\n </Inline>\n </StyledPictogramButton>\n );\n }\n);\n"],"names":["StyledPictogramButton","_styled","process","env","NODE_ENV","target","label","_ref","theme","variant","size","squareCorners","appearance","border","display","textTransform","textDecoration","borderRadius","variables","button","m","fontFamily","lato","fontSize","font","lineHeight","fontWeight","weight","bold","padding","spacing","xxs","cursor","opacity","disabled","pointerEvents","backgroundColor","values","color","background","base","text","hover","active","borderColor","parseInt","xs","PictogramButton","React","forwardRef","_ref2","ref","type","onClick","onFocus","onBlur","dataE2eTestId","as","icon","rest","handleClick","e","preventDefault","iconSize","createElement","_extends","undefined","Inline","vAlignItems","alignItems","space","noWrap","Icon","name"],"mappings":"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"}
|
package/build/esm/src/index.d.ts
CHANGED
|
@@ -43,3 +43,5 @@ export { Callout } from "./components/Callout/Callout";
|
|
|
43
43
|
export { Modal } from "./components/Patterns/Modal/Modal";
|
|
44
44
|
export { ButtonGroup } from "./components/Patterns/ButtonGroup/ButtonGroup";
|
|
45
45
|
export { Collapsible, CollapsibleHeader, } from "./components/Collapsible/Collapsible";
|
|
46
|
+
export { LoadingSpinner } from "./components/LoadingSpinner/LoadingSpinner";
|
|
47
|
+
export * from "./components/Pagination/Pagination";
|
package/build/esm/src/index.js
CHANGED
|
@@ -43,6 +43,8 @@ export { Callout } from './components/Callout/Callout.js';
|
|
|
43
43
|
export { Modal } from './components/Patterns/Modal/Modal.js';
|
|
44
44
|
export { ButtonGroup } from './components/Patterns/ButtonGroup/ButtonGroup.js';
|
|
45
45
|
export { Collapsible, CollapsibleHeader } from './components/Collapsible/Collapsible.js';
|
|
46
|
+
export { LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner.js';
|
|
47
|
+
export { Pagination } from './components/Pagination/Pagination.js';
|
|
46
48
|
|
|
47
49
|
const {
|
|
48
50
|
dark,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/index.ts"],"sourcesContent":["import { ambossVisualConfiguration } from \"../build-tokens/visualConfig\";\n\nexport const { dark, light } = ambossVisualConfiguration;\nexport { ThemeProvider, CacheProvider } from \"@emotion/react\";\nexport { default as createCache } from \"@emotion/cache\";\nexport { Card } from \"./components/Card/Card\";\nexport { CardBox } from \"./components/Card/CardBox\";\nexport { Box } from \"./components/Box/Box\";\nexport { Inline } from \"./components/Inline/Inline\";\nexport { Stack } from \"./components/Stack/Stack\";\nexport { H1, H2, H3, H4, H5, H6 } from \"./components/Typography/Header/Header\";\nexport { Text } from \"./components/Typography/Text/Text\";\nexport { TextClamped } from \"./components/Typography/TextClamped/TextClamped\";\nexport { StyledText } from \"./components/Typography/StyledText/StyledText\";\nexport { Link } from \"./components/Link/Link\";\nexport { Icon } from \"./components/Icon/Icon\";\nexport { Button } from \"./components/Button/Button\";\nexport { Divider } from \"./components/Divider/Divider\";\nexport { Column, Columns } from \"./components/Column/Columns\";\nexport { Tabs } from \"./components/Tabs/Tabs\";\nexport { Badge } from \"./components/Badge/Badge\";\nexport { SearchResult } from \"./components/SearchResult/SearchResult\";\nexport { ToggleButton } from \"./components/Form/ToggleButton/ToggleButton\";\nexport { DropdownMenu } from \"./components/DropdownMenu/DropdownMenu\";\nexport { FormFieldGroup } from \"./components/Form/FormFieldGroup/FormFieldGroup\";\nexport { Input } from \"./components/Form/Input/Input\";\nexport { Checkbox } from \"./components/Form/Checkbox/Checkbox\";\nexport { Toggle } from \"./components/Form/Toggle/Toggle\";\nexport { Radio } from \"./components/Form/Radio/Radio\";\nexport { RadioButton } from \"./components/Form/RadioButton/RadioButton\";\nexport { Textarea } from \"./components/Form/Textarea/Textarea\";\nexport { Select } from \"./components/Form/Select/Select\";\nexport { SubThemeProvider } from \"./components/SubThemeProvider/SubThemeProvider\";\nexport { PictogramButton } from \"./components/PictogramButton/PictogramButton\";\nexport { MediaViewerBar } from \"./components/MediaViewerBar/MediaViewerBar\";\nexport { SegmentedProgressBar } from \"./components/SegmentedProgressBar/SegmentedProgressBar\";\nexport { ProgressBar } from \"./components/ProgressBar/ProgressBar\";\nexport { Container } from \"./components/Container/Container\";\nexport { PasswordInput } from \"./components/Form/PasswordInput/PasswordInput\";\nexport { RoundButton } from \"./components/RoundButton/RoundButton\";\nexport { Notification } from \"./components/Notification/Notification\";\nexport { Logo } from \"./components/Logo/Logo\";\nexport { MediaItem } from \"./components/MediaItem/MediaItem\";\nexport { Callout } from \"./components/Callout/Callout\";\nexport { Modal } from \"./components/Patterns/Modal/Modal\";\nexport { ButtonGroup } from \"./components/Patterns/ButtonGroup/ButtonGroup\";\nexport {\n Collapsible,\n CollapsibleHeader,\n} from \"./components/Collapsible/Collapsible\";\n"],"names":["dark","light","ambossVisualConfiguration"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/index.ts"],"sourcesContent":["import { ambossVisualConfiguration } from \"../build-tokens/visualConfig\";\n\nexport const { dark, light } = ambossVisualConfiguration;\nexport { ThemeProvider, CacheProvider } from \"@emotion/react\";\nexport { default as createCache } from \"@emotion/cache\";\nexport { Card } from \"./components/Card/Card\";\nexport { CardBox } from \"./components/Card/CardBox\";\nexport { Box } from \"./components/Box/Box\";\nexport { Inline } from \"./components/Inline/Inline\";\nexport { Stack } from \"./components/Stack/Stack\";\nexport { H1, H2, H3, H4, H5, H6 } from \"./components/Typography/Header/Header\";\nexport { Text } from \"./components/Typography/Text/Text\";\nexport { TextClamped } from \"./components/Typography/TextClamped/TextClamped\";\nexport { StyledText } from \"./components/Typography/StyledText/StyledText\";\nexport { Link } from \"./components/Link/Link\";\nexport { Icon } from \"./components/Icon/Icon\";\nexport { Button } from \"./components/Button/Button\";\nexport { Divider } from \"./components/Divider/Divider\";\nexport { Column, Columns } from \"./components/Column/Columns\";\nexport { Tabs } from \"./components/Tabs/Tabs\";\nexport { Badge } from \"./components/Badge/Badge\";\nexport { SearchResult } from \"./components/SearchResult/SearchResult\";\nexport { ToggleButton } from \"./components/Form/ToggleButton/ToggleButton\";\nexport { DropdownMenu } from \"./components/DropdownMenu/DropdownMenu\";\nexport { FormFieldGroup } from \"./components/Form/FormFieldGroup/FormFieldGroup\";\nexport { Input } from \"./components/Form/Input/Input\";\nexport { Checkbox } from \"./components/Form/Checkbox/Checkbox\";\nexport { Toggle } from \"./components/Form/Toggle/Toggle\";\nexport { Radio } from \"./components/Form/Radio/Radio\";\nexport { RadioButton } from \"./components/Form/RadioButton/RadioButton\";\nexport { Textarea } from \"./components/Form/Textarea/Textarea\";\nexport { Select } from \"./components/Form/Select/Select\";\nexport { SubThemeProvider } from \"./components/SubThemeProvider/SubThemeProvider\";\nexport { PictogramButton } from \"./components/PictogramButton/PictogramButton\";\nexport { MediaViewerBar } from \"./components/MediaViewerBar/MediaViewerBar\";\nexport { SegmentedProgressBar } from \"./components/SegmentedProgressBar/SegmentedProgressBar\";\nexport { ProgressBar } from \"./components/ProgressBar/ProgressBar\";\nexport { Container } from \"./components/Container/Container\";\nexport { PasswordInput } from \"./components/Form/PasswordInput/PasswordInput\";\nexport { RoundButton } from \"./components/RoundButton/RoundButton\";\nexport { Notification } from \"./components/Notification/Notification\";\nexport { Logo } from \"./components/Logo/Logo\";\nexport { MediaItem } from \"./components/MediaItem/MediaItem\";\nexport { Callout } from \"./components/Callout/Callout\";\nexport { Modal } from \"./components/Patterns/Modal/Modal\";\nexport { ButtonGroup } from \"./components/Patterns/ButtonGroup/ButtonGroup\";\nexport {\n Collapsible,\n CollapsibleHeader,\n} from \"./components/Collapsible/Collapsible\";\nexport { LoadingSpinner } from \"./components/LoadingSpinner/LoadingSpinner\";\nexport * from \"./components/Pagination/Pagination\";\n"],"names":["dark","light","ambossVisualConfiguration"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEa,MAAA;EAAEA,IAAI;AAAEC,EAAAA,KAAAA;AAAM,CAAC,GAAGC;;;;"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const ScreenReaderText: import("@emotion/styled").StyledComponent<{
|
|
3
|
+
theme?: import("@emotion/react").Theme;
|
|
4
|
+
as?: import("react").ElementType<any>;
|
|
5
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import _styled from '@emotion/styled/base';
|
|
2
|
+
|
|
3
|
+
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
4
|
+
// Content required to be read by screen readers but visually hidden
|
|
5
|
+
const ScreenReaderText = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
|
|
6
|
+
target: "ezjk5ml0"
|
|
7
|
+
} : {
|
|
8
|
+
target: "ezjk5ml0",
|
|
9
|
+
label: "ScreenReaderText"
|
|
10
|
+
})(process.env.NODE_ENV === "production" ? {
|
|
11
|
+
name: "vohvw6",
|
|
12
|
+
styles: "width:1px;height:1px;position:absolute;left:-10000px;top:auto;overflow:hidden"
|
|
13
|
+
} : {
|
|
14
|
+
name: "vohvw6",
|
|
15
|
+
styles: "width:1px;height:1px;position:absolute;left:-10000px;top:auto;overflow:hidden",
|
|
16
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNjcmVlblJlYWRlclRleHQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR2dDIiwiZmlsZSI6IlNjcmVlblJlYWRlclRleHQudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuLy8gQ29udGVudCByZXF1aXJlZCB0byBiZSByZWFkIGJ5IHNjcmVlbiByZWFkZXJzIGJ1dCB2aXN1YWxseSBoaWRkZW5cbmV4cG9ydCBjb25zdCBTY3JlZW5SZWFkZXJUZXh0ID0gc3R5bGVkLmRpdih7XG4gIHdpZHRoOiAxLFxuICBoZWlnaHQ6IDEsXG4gIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gIGxlZnQ6IFwiLTEwMDAwcHhcIixcbiAgdG9wOiBcImF1dG9cIixcbiAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG59KTtcbiJdfQ== */",
|
|
17
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
export { ScreenReaderText };
|
|
21
|
+
//# sourceMappingURL=ScreenReaderText.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScreenReaderText.js","sources":["../../../../src/shared/ScreenReaderText.ts"],"sourcesContent":["import styled from \"@emotion/styled\";\n\n// Content required to be read by screen readers but visually hidden\nexport const ScreenReaderText = styled.div({\n width: 1,\n height: 1,\n position: \"absolute\",\n left: \"-10000px\",\n top: \"auto\",\n overflow: \"hidden\",\n});\n"],"names":["ScreenReaderText","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"mappings":";;;AAEA;AACO,MAAMA,gBAAgB,gBAAGC,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,UAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,UAAA;EAAAC,KAAA,EAAA,kBAAA;AAAA,CAAA,CAAA,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAG,IAAA,EAAA,QAAA;EAAAC,MAAA,EAAA,+EAAA;AAAA,CAAA,GAAA;EAAAD,IAAA,EAAA,QAAA;EAAAC,MAAA,EAAA,+EAAA;EAAAC,GAAA,EAAA,6mBAAA;AAAAC,EAAAA,QAAA,EAAAC,gCAAAA;AAAA,CAO9B;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@amboss/design-system",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.10.0",
|
|
4
4
|
"description": "the design system for AMBOSS products",
|
|
5
5
|
"author": "Bagrat Gobedashvili",
|
|
6
6
|
"license": "ISC",
|
|
@@ -24,9 +24,15 @@
|
|
|
24
24
|
"files": [
|
|
25
25
|
"build/**/*"
|
|
26
26
|
],
|
|
27
|
+
"lint-staged": {
|
|
28
|
+
"{src,tokens,.storybook}/**/*.{js,jsx,ts,tsx}": [
|
|
29
|
+
"prettier --write",
|
|
30
|
+
"eslint --fix"
|
|
31
|
+
]
|
|
32
|
+
},
|
|
27
33
|
"husky": {
|
|
28
34
|
"hooks": {
|
|
29
|
-
"pre-commit": "
|
|
35
|
+
"pre-commit": "npx lint-staged",
|
|
30
36
|
"pre-push": "npm run test"
|
|
31
37
|
}
|
|
32
38
|
},
|
|
@@ -163,6 +169,7 @@
|
|
|
163
169
|
"inquirer": "^8.1.2",
|
|
164
170
|
"jest": "^26.6.1",
|
|
165
171
|
"jest-junit": "^12.0.0",
|
|
172
|
+
"lint-staged": "^13.2.2",
|
|
166
173
|
"prettier": "^2.2.1",
|
|
167
174
|
"react": "^17.0.1",
|
|
168
175
|
"react-dom": "^17.0.1",
|