@citygross/components 0.10.2 → 0.11.1
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/@types/components/Pagination/Pagination.d.ts +5 -6
- package/build/@types/components/Pagination/Pagination.styles.d.ts +5 -7
- package/build/cjs/components/src/components/CgButton/CgButton.js +2 -2
- package/build/cjs/components/src/components/CgButton/CgButton.styles.js +4 -4
- package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.styles.js +6 -4
- package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.styles.js.map +1 -1
- package/build/cjs/components/src/components/Pagination/Pagination.js +38 -40
- package/build/cjs/components/src/components/Pagination/Pagination.js.map +1 -1
- package/build/cjs/components/src/components/Pagination/Pagination.styles.js +6 -6
- package/build/es/components/src/components/CgButton/CgButton.js +2 -2
- package/build/es/components/src/components/CgButton/CgButton.styles.js +4 -4
- package/build/es/components/src/components/FormElements/Checkbox/Checkbox.styles.js +7 -5
- package/build/es/components/src/components/FormElements/Checkbox/Checkbox.styles.js.map +1 -1
- package/build/es/components/src/components/Pagination/Pagination.js +40 -42
- package/build/es/components/src/components/Pagination/Pagination.js.map +1 -1
- package/build/es/components/src/components/Pagination/Pagination.styles.js +4 -4
- package/package.json +2 -2
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
export declare type TPagination = {
|
|
3
|
-
totalItems?: number;
|
|
4
3
|
fetchItems: (page: number) => void;
|
|
5
4
|
currentPage: number;
|
|
5
|
+
totalItems?: number;
|
|
6
6
|
itemsPerPage?: number;
|
|
7
7
|
setPage?: (page: number) => void;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
leftIcon?: React.ReactNode;
|
|
8
|
+
pageLabel?: string;
|
|
9
|
+
onPageChange?: (page: number) => void;
|
|
11
10
|
};
|
|
12
|
-
export declare function Pagination({ totalItems, currentPage, fetchItems, itemsPerPage, setPage,
|
|
11
|
+
export declare function Pagination({ totalItems, currentPage, fetchItems, itemsPerPage, setPage, pageLabel, onPageChange }: TPagination): JSX.Element | null;
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
declare
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export declare const
|
|
6
|
-
export declare const Flex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
7
|
-
export {};
|
|
1
|
+
export declare const PaginationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
2
|
+
export declare const ArrowButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
|
|
3
|
+
disabled?: boolean | undefined;
|
|
4
|
+
}, never>;
|
|
5
|
+
export declare const PageInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -16,9 +16,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
16
16
|
|
|
17
17
|
var CgButton = React.forwardRef(function (_a, ref) {
|
|
18
18
|
var _b;
|
|
19
|
-
var badge = _a.badge,
|
|
19
|
+
var badge = _a.badge, children = _a.children, loading = _a.loading, _c = _a.size, size = _c === void 0 ? CgButton_types.EButtonSize.medium : _c, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.variant, variant = _e === void 0 ? CgButton_types.EButtonVariant.primary : _e, props = _tslib.__rest(_a, ["badge", "children", "loading", "size", "type", "variant"]);
|
|
20
20
|
var _f = button.getButtonAttributes(size, variant), sizeAttributes = _f.sizeAttributes, variantAttributes = _f.variantAttributes;
|
|
21
|
-
return (React__default["default"].createElement(CgButton_styles.ButtonStyle, _tslib.__assign({
|
|
21
|
+
return (React__default["default"].createElement(CgButton_styles.ButtonStyle, _tslib.__assign({ disabled: loading, ref: ref, size: size, sizeAttributes: sizeAttributes, type: type, variantAttributes: variantAttributes }, props),
|
|
22
22
|
React__default["default"].createElement(CgButton_styles.ChildrenContainer, { loading: loading }, children),
|
|
23
23
|
loading && (React__default["default"].createElement(CgButton_styles.SpinnerContainer, null,
|
|
24
24
|
React__default["default"].createElement(Spinner.Spinner, { animationSpeedMs: 1000, size: sizeAttributes.loadingSpinner, spinnerColor: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray }))),
|
|
@@ -11,7 +11,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
11
|
|
|
12
12
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
13
13
|
|
|
14
|
-
var sharedButtonStyles = styled.css(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n
|
|
14
|
+
var sharedButtonStyles = styled.css(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ", "px;\n font-family: ", ";\n font-size: ", "px;\n font-weight: ", ";\n height: ", ";\n width: ", ";\n padding: ", ";\n transition: background-color 0.3s ease;\n white-space: nowrap;\n\n &:not(:disabled):hover {\n background-color: ", ";\n }\n\n &:not(:disabled):active,\n &:not(:disabled):hover:active,\n &:not(:disabled):focus:active {\n background-color: ", ";\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ", "px;\n font-family: ", ";\n font-size: ", "px;\n font-weight: ", ";\n height: ", ";\n width: ", ";\n padding: ", ";\n transition: background-color 0.3s ease;\n white-space: nowrap;\n\n &:not(:disabled):hover {\n background-color: ", ";\n }\n\n &:not(:disabled):active,\n &:not(:disabled):hover:active,\n &:not(:disabled):focus:active {\n background-color: ", ";\n }\n\n ", "\n"])), function (_a) {
|
|
15
|
+
var variantAttributes = _a.variantAttributes;
|
|
16
|
+
return variantAttributes.backgroundColor;
|
|
17
|
+
}, function (_a) {
|
|
15
18
|
var _b;
|
|
16
19
|
var theme = _a.theme, variantAttributes = _a.variantAttributes;
|
|
17
20
|
return variantAttributes.border
|
|
@@ -33,9 +36,6 @@ var sharedButtonStyles = styled.css(templateObject_1 || (templateObject_1 = _tsl
|
|
|
33
36
|
? (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.layoutShadowInset
|
|
34
37
|
: (_c = theme.attributes) === null || _c === void 0 ? void 0 : _c.boxShadow.layoutShadowInsetMedium
|
|
35
38
|
: 'none';
|
|
36
|
-
}, function (_a) {
|
|
37
|
-
var variantAttributes = _a.variantAttributes;
|
|
38
|
-
return variantAttributes.backgroundColor;
|
|
39
39
|
}, function (_a) {
|
|
40
40
|
var variantAttributes = _a.variantAttributes;
|
|
41
41
|
return variantAttributes.fontColor;
|
|
@@ -4,12 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var _tslib = require('../../../../../_virtual/_tslib.js');
|
|
6
6
|
var styled = require('styled-components');
|
|
7
|
+
var FormElement_styles = require('../FormElement.styles.js');
|
|
7
8
|
|
|
8
9
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
10
|
|
|
10
11
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
12
|
|
|
12
|
-
var CheckboxContainer = styled__default["default"].div(
|
|
13
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n height: ", "px;\n width: ", "px;\n\n ", "\n"], ["\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n height: ", "px;\n width: ", "px;\n\n ", "\n"])), function (_a) {
|
|
13
14
|
var attributes = _a.attributes;
|
|
14
15
|
return attributes.backgroundColor;
|
|
15
16
|
}, function (_a) {
|
|
@@ -28,11 +29,12 @@ var CheckboxContainer = styled__default["default"].div(templateObject_1 || (temp
|
|
|
28
29
|
var theme = _a.theme;
|
|
29
30
|
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm1;
|
|
30
31
|
}, function (_a) {
|
|
32
|
+
var _b;
|
|
31
33
|
var attributes = _a.attributes;
|
|
32
|
-
return attributes.hoverBackgroundColor;
|
|
34
|
+
return styled.css(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n --checkbox-hover-bg: ", ";\n\n ", ":hover & {\n background: var(--checkbox-hover-bg);\n }\n "], ["\n --checkbox-hover-bg: ", ";\n\n ", ":hover & {\n background: var(--checkbox-hover-bg);\n }\n "])), (_b = attributes.hoverBackgroundColor) !== null && _b !== void 0 ? _b : attributes.backgroundColor, FormElement_styles.OptionInputWrapper);
|
|
33
35
|
});
|
|
34
|
-
var IconContainer = styled__default["default"].div(
|
|
35
|
-
var templateObject_1, templateObject_2;
|
|
36
|
+
var IconContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n"])));
|
|
37
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
36
38
|
|
|
37
39
|
exports.CheckboxContainer = CheckboxContainer;
|
|
38
40
|
exports.IconContainer = IconContainer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Checkbox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -3,55 +3,53 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var
|
|
7
|
-
var
|
|
6
|
+
var icons = require('@citygross/icons');
|
|
7
|
+
var typography = require('@citygross/typography');
|
|
8
|
+
var designTokens = require('@citygross/design-tokens');
|
|
8
9
|
var Pagination_styles = require('./Pagination.styles.js');
|
|
9
10
|
|
|
10
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
12
|
|
|
12
13
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
14
|
|
|
14
|
-
function
|
|
15
|
-
var
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
var
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
if (index === amountOfPages - 1) {
|
|
27
|
-
pagination.push(block);
|
|
28
|
-
}
|
|
15
|
+
function Pagination(_a) {
|
|
16
|
+
var _b, _c, _d, _e;
|
|
17
|
+
var totalItems = _a.totalItems, currentPage = _a.currentPage, fetchItems = _a.fetchItems, _f = _a.itemsPerPage, itemsPerPage = _f === void 0 ? 10 : _f, setPage = _a.setPage, _g = _a.pageLabel, pageLabel = _g === void 0 ? 'Sida' : _g, onPageChange = _a.onPageChange;
|
|
18
|
+
var totalPages = Math.ceil((totalItems || 0) / itemsPerPage);
|
|
19
|
+
var hasNextPage = currentPage < totalPages;
|
|
20
|
+
var hasPrevPage = currentPage > 1;
|
|
21
|
+
var handlePrev = function () {
|
|
22
|
+
if (hasPrevPage) {
|
|
23
|
+
var newPage = currentPage - 1;
|
|
24
|
+
setPage && setPage(newPage);
|
|
25
|
+
fetchItems(newPage);
|
|
26
|
+
onPageChange && onPageChange(newPage);
|
|
29
27
|
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
28
|
+
};
|
|
29
|
+
var handleNext = function () {
|
|
30
|
+
if (hasNextPage) {
|
|
31
|
+
var newPage = currentPage + 1;
|
|
32
|
+
setPage && setPage(newPage);
|
|
33
|
+
fetchItems(newPage);
|
|
34
|
+
onPageChange && onPageChange(newPage);
|
|
35
35
|
}
|
|
36
|
+
};
|
|
37
|
+
if (totalPages === 0) {
|
|
36
38
|
return null;
|
|
37
|
-
}
|
|
38
|
-
return
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
_b.map(function (page) { return (React__default["default"].createElement(Pagination_styles.PaginationButtonWrapper, { key: page },
|
|
52
|
-
React__default["default"].createElement(PaginationButton.PaginationButton, { color: currentPage === page + 1 ? 'primary' : 'white', width: 36, height: 36, onClick: function () { return fetchItems(page + 1); } }, page + 1))); }),
|
|
53
|
-
pagination.length > 1 && currentIndex < pagination.length - 1 && (React__default["default"].createElement(Pagination_styles.PaginationButtonWrapper, null,
|
|
54
|
-
React__default["default"].createElement(PaginationButton.PaginationButton, { color: 'white', onClick: function () { return setIndex(currentIndex + 1); }, width: 36, height: 36 }, rightIcon || '...')))))));
|
|
39
|
+
}
|
|
40
|
+
return (React__default["default"].createElement("nav", { "aria-labelledby": "pagination_heading" },
|
|
41
|
+
React__default["default"].createElement(Pagination_styles.PaginationContainer, null,
|
|
42
|
+
React__default["default"].createElement(Pagination_styles.ArrowButton, { onClick: handlePrev, disabled: !hasPrevPage, "aria-disabled": !hasPrevPage, "aria-label": "F\u00F6reg\u00E5ende sida" },
|
|
43
|
+
React__default["default"].createElement(icons.Icons.ChevronLeft, { width: 20, height: 20, color: !hasPrevPage ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder : (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.darkest })),
|
|
44
|
+
React__default["default"].createElement(Pagination_styles.PageInfo, null,
|
|
45
|
+
React__default["default"].createElement(typography.BodyText, { id: "pagination_heading", "aria-live": "polite" },
|
|
46
|
+
pageLabel,
|
|
47
|
+
" ",
|
|
48
|
+
currentPage,
|
|
49
|
+
" av ",
|
|
50
|
+
totalPages)),
|
|
51
|
+
React__default["default"].createElement(Pagination_styles.ArrowButton, { onClick: handleNext, disabled: !hasNextPage, "aria-disabled": !hasNextPage, "aria-label": "N\u00E4sta sida" },
|
|
52
|
+
React__default["default"].createElement(icons.Icons.ChevronRight, { width: 20, height: 20, color: !hasNextPage ? (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.placeholder : (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.darkest })))));
|
|
55
53
|
}
|
|
56
54
|
|
|
57
55
|
exports.Pagination = Pagination;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Pagination.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -9,12 +9,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
9
|
|
|
10
10
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
11
|
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
12
|
+
var PaginationContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ", "px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
|
|
13
|
+
var ArrowButton = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n background: none;\n border: 1px solid transparent;\n border-radius: ", ";\n padding: 0;\n width: 36px;\n height: 36px;\n cursor: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border-color 0.2s ease;\n\n &:hover:not(:disabled):not([aria-disabled='true']) {\n border-color: ", ";\n }\n\n &:focus {\n outline: 2px solid ", ";\n outline-offset: 2px;\n border-radius: ", ";\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n"], ["\n background: none;\n border: 1px solid transparent;\n border-radius: ", ";\n padding: 0;\n width: 36px;\n height: 36px;\n cursor: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border-color 0.2s ease;\n\n &:hover:not(:disabled):not([aria-disabled='true']) {\n border-color: ", ";\n }\n\n &:focus {\n outline: 2px solid ", ";\n outline-offset: 2px;\n border-radius: ", ";\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.circle; }, function (props) { return (props.disabled ? 'not-allowed' : 'pointer'); }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.placeholder; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.black; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.circle; });
|
|
14
|
+
var PageInfo = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
|
|
15
15
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
16
16
|
|
|
17
|
-
exports.
|
|
18
|
-
exports.
|
|
19
|
-
exports.
|
|
17
|
+
exports.ArrowButton = ArrowButton;
|
|
18
|
+
exports.PageInfo = PageInfo;
|
|
19
|
+
exports.PaginationContainer = PaginationContainer;
|
|
20
20
|
//# sourceMappingURL=Pagination.styles.js.map
|
|
@@ -8,9 +8,9 @@ import { theme } from '@citygross/design-tokens';
|
|
|
8
8
|
|
|
9
9
|
var CgButton = forwardRef(function (_a, ref) {
|
|
10
10
|
var _b;
|
|
11
|
-
var badge = _a.badge,
|
|
11
|
+
var badge = _a.badge, children = _a.children, loading = _a.loading, _c = _a.size, size = _c === void 0 ? EButtonSize.medium : _c, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.variant, variant = _e === void 0 ? EButtonVariant.primary : _e, props = __rest(_a, ["badge", "children", "loading", "size", "type", "variant"]);
|
|
12
12
|
var _f = getButtonAttributes(size, variant), sizeAttributes = _f.sizeAttributes, variantAttributes = _f.variantAttributes;
|
|
13
|
-
return (React.createElement(ButtonStyle, __assign({
|
|
13
|
+
return (React.createElement(ButtonStyle, __assign({ disabled: loading, ref: ref, size: size, sizeAttributes: sizeAttributes, type: type, variantAttributes: variantAttributes }, props),
|
|
14
14
|
React.createElement(ChildrenContainer, { loading: loading }, children),
|
|
15
15
|
loading && (React.createElement(SpinnerContainer, null,
|
|
16
16
|
React.createElement(Spinner, { animationSpeedMs: 1000, size: sizeAttributes.loadingSpinner, spinnerColor: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray }))),
|
|
@@ -3,7 +3,10 @@ import styled, { css } from 'styled-components';
|
|
|
3
3
|
import { focusVisible } from '../../shared/global.styles.js';
|
|
4
4
|
import { EButtonSize } from './CgButton.types.js';
|
|
5
5
|
|
|
6
|
-
var sharedButtonStyles = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
6
|
+
var sharedButtonStyles = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ", "px;\n font-family: ", ";\n font-size: ", "px;\n font-weight: ", ";\n height: ", ";\n width: ", ";\n padding: ", ";\n transition: background-color 0.3s ease;\n white-space: nowrap;\n\n &:not(:disabled):hover {\n background-color: ", ";\n }\n\n &:not(:disabled):active,\n &:not(:disabled):hover:active,\n &:not(:disabled):focus:active {\n background-color: ", ";\n }\n\n ", "\n"], ["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ", "px;\n font-family: ", ";\n font-size: ", "px;\n font-weight: ", ";\n height: ", ";\n width: ", ";\n padding: ", ";\n transition: background-color 0.3s ease;\n white-space: nowrap;\n\n &:not(:disabled):hover {\n background-color: ", ";\n }\n\n &:not(:disabled):active,\n &:not(:disabled):hover:active,\n &:not(:disabled):focus:active {\n background-color: ", ";\n }\n\n ", "\n"])), function (_a) {
|
|
7
|
+
var variantAttributes = _a.variantAttributes;
|
|
8
|
+
return variantAttributes.backgroundColor;
|
|
9
|
+
}, function (_a) {
|
|
7
10
|
var _b;
|
|
8
11
|
var theme = _a.theme, variantAttributes = _a.variantAttributes;
|
|
9
12
|
return variantAttributes.border
|
|
@@ -25,9 +28,6 @@ var sharedButtonStyles = css(templateObject_1 || (templateObject_1 = __makeTempl
|
|
|
25
28
|
? (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.layoutShadowInset
|
|
26
29
|
: (_c = theme.attributes) === null || _c === void 0 ? void 0 : _c.boxShadow.layoutShadowInsetMedium
|
|
27
30
|
: 'none';
|
|
28
|
-
}, function (_a) {
|
|
29
|
-
var variantAttributes = _a.variantAttributes;
|
|
30
|
-
return variantAttributes.backgroundColor;
|
|
31
31
|
}, function (_a) {
|
|
32
32
|
var variantAttributes = _a.variantAttributes;
|
|
33
33
|
return variantAttributes.fontColor;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../../_virtual/_tslib.js';
|
|
2
|
-
import styled from 'styled-components';
|
|
2
|
+
import styled, { css } from 'styled-components';
|
|
3
|
+
import { OptionInputWrapper } from '../FormElement.styles.js';
|
|
3
4
|
|
|
4
|
-
var CheckboxContainer = styled.div(
|
|
5
|
+
var CheckboxContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n height: ", "px;\n width: ", "px;\n\n ", "\n"], ["\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n height: ", "px;\n width: ", "px;\n\n ", "\n"])), function (_a) {
|
|
5
6
|
var attributes = _a.attributes;
|
|
6
7
|
return attributes.backgroundColor;
|
|
7
8
|
}, function (_a) {
|
|
@@ -20,11 +21,12 @@ var CheckboxContainer = styled.div(templateObject_1 || (templateObject_1 = __mak
|
|
|
20
21
|
var theme = _a.theme;
|
|
21
22
|
return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm1;
|
|
22
23
|
}, function (_a) {
|
|
24
|
+
var _b;
|
|
23
25
|
var attributes = _a.attributes;
|
|
24
|
-
return attributes.hoverBackgroundColor;
|
|
26
|
+
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n --checkbox-hover-bg: ", ";\n\n ", ":hover & {\n background: var(--checkbox-hover-bg);\n }\n "], ["\n --checkbox-hover-bg: ", ";\n\n ", ":hover & {\n background: var(--checkbox-hover-bg);\n }\n "])), (_b = attributes.hoverBackgroundColor) !== null && _b !== void 0 ? _b : attributes.backgroundColor, OptionInputWrapper);
|
|
25
27
|
});
|
|
26
|
-
var IconContainer = styled.div(
|
|
27
|
-
var templateObject_1, templateObject_2;
|
|
28
|
+
var IconContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n"])));
|
|
29
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
28
30
|
|
|
29
31
|
export { CheckboxContainer, IconContainer };
|
|
30
32
|
//# sourceMappingURL=Checkbox.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Checkbox.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,49 +1,47 @@
|
|
|
1
|
-
import React
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Icons } from '@citygross/icons';
|
|
3
|
+
import { BodyText } from '@citygross/typography';
|
|
4
|
+
import { theme } from '@citygross/design-tokens';
|
|
5
|
+
import { PaginationContainer, ArrowButton, PageInfo } from './Pagination.styles.js';
|
|
5
6
|
|
|
6
|
-
function
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
if (index === amountOfPages - 1) {
|
|
19
|
-
pagination.push(block);
|
|
20
|
-
}
|
|
7
|
+
function Pagination(_a) {
|
|
8
|
+
var _b, _c, _d, _e;
|
|
9
|
+
var totalItems = _a.totalItems, currentPage = _a.currentPage, fetchItems = _a.fetchItems, _f = _a.itemsPerPage, itemsPerPage = _f === void 0 ? 10 : _f, setPage = _a.setPage, _g = _a.pageLabel, pageLabel = _g === void 0 ? 'Sida' : _g, onPageChange = _a.onPageChange;
|
|
10
|
+
var totalPages = Math.ceil((totalItems || 0) / itemsPerPage);
|
|
11
|
+
var hasNextPage = currentPage < totalPages;
|
|
12
|
+
var hasPrevPage = currentPage > 1;
|
|
13
|
+
var handlePrev = function () {
|
|
14
|
+
if (hasPrevPage) {
|
|
15
|
+
var newPage = currentPage - 1;
|
|
16
|
+
setPage && setPage(newPage);
|
|
17
|
+
fetchItems(newPage);
|
|
18
|
+
onPageChange && onPageChange(newPage);
|
|
21
19
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
20
|
+
};
|
|
21
|
+
var handleNext = function () {
|
|
22
|
+
if (hasNextPage) {
|
|
23
|
+
var newPage = currentPage + 1;
|
|
24
|
+
setPage && setPage(newPage);
|
|
25
|
+
fetchItems(newPage);
|
|
26
|
+
onPageChange && onPageChange(newPage);
|
|
27
27
|
}
|
|
28
|
+
};
|
|
29
|
+
if (totalPages === 0) {
|
|
28
30
|
return null;
|
|
29
|
-
}
|
|
30
|
-
return
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
_b.map(function (page) { return (React.createElement(PaginationButtonWrapper, { key: page },
|
|
44
|
-
React.createElement(PaginationButton, { color: currentPage === page + 1 ? 'primary' : 'white', width: 36, height: 36, onClick: function () { return fetchItems(page + 1); } }, page + 1))); }),
|
|
45
|
-
pagination.length > 1 && currentIndex < pagination.length - 1 && (React.createElement(PaginationButtonWrapper, null,
|
|
46
|
-
React.createElement(PaginationButton, { color: 'white', onClick: function () { return setIndex(currentIndex + 1); }, width: 36, height: 36 }, rightIcon || '...')))))));
|
|
31
|
+
}
|
|
32
|
+
return (React.createElement("nav", { "aria-labelledby": "pagination_heading" },
|
|
33
|
+
React.createElement(PaginationContainer, null,
|
|
34
|
+
React.createElement(ArrowButton, { onClick: handlePrev, disabled: !hasPrevPage, "aria-disabled": !hasPrevPage, "aria-label": "F\u00F6reg\u00E5ende sida" },
|
|
35
|
+
React.createElement(Icons.ChevronLeft, { width: 20, height: 20, color: !hasPrevPage ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder : (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.darkest })),
|
|
36
|
+
React.createElement(PageInfo, null,
|
|
37
|
+
React.createElement(BodyText, { id: "pagination_heading", "aria-live": "polite" },
|
|
38
|
+
pageLabel,
|
|
39
|
+
" ",
|
|
40
|
+
currentPage,
|
|
41
|
+
" av ",
|
|
42
|
+
totalPages)),
|
|
43
|
+
React.createElement(ArrowButton, { onClick: handleNext, disabled: !hasNextPage, "aria-disabled": !hasNextPage, "aria-label": "N\u00E4sta sida" },
|
|
44
|
+
React.createElement(Icons.ChevronRight, { width: 20, height: 20, color: !hasNextPage ? (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.placeholder : (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.darkest })))));
|
|
47
45
|
}
|
|
48
46
|
|
|
49
47
|
export { Pagination };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Pagination.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
4
|
+
var PaginationContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ", "px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
|
|
5
|
+
var ArrowButton = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: none;\n border: 1px solid transparent;\n border-radius: ", ";\n padding: 0;\n width: 36px;\n height: 36px;\n cursor: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border-color 0.2s ease;\n\n &:hover:not(:disabled):not([aria-disabled='true']) {\n border-color: ", ";\n }\n\n &:focus {\n outline: 2px solid ", ";\n outline-offset: 2px;\n border-radius: ", ";\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n"], ["\n background: none;\n border: 1px solid transparent;\n border-radius: ", ";\n padding: 0;\n width: 36px;\n height: 36px;\n cursor: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border-color 0.2s ease;\n\n &:hover:not(:disabled):not([aria-disabled='true']) {\n border-color: ", ";\n }\n\n &:focus {\n outline: 2px solid ", ";\n outline-offset: 2px;\n border-radius: ", ";\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.circle; }, function (props) { return (props.disabled ? 'not-allowed' : 'pointer'); }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.placeholder; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.black; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.circle; });
|
|
6
|
+
var PageInfo = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
|
|
7
7
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
8
8
|
|
|
9
|
-
export {
|
|
9
|
+
export { ArrowButton, PageInfo, PaginationContainer };
|
|
10
10
|
//# sourceMappingURL=Pagination.styles.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.1",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./build/cjs/components/src/index.js",
|
|
@@ -75,5 +75,5 @@
|
|
|
75
75
|
"react-slick": "^0.30.1",
|
|
76
76
|
"slick-carousel": "^1.8.1"
|
|
77
77
|
},
|
|
78
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "f29350dc0490d0efef6a8b9af560017b8f525a37"
|
|
79
79
|
}
|