@kaizen/components 1.67.12 → 1.67.13

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.
Files changed (16) hide show
  1. package/dist/cjs/Pagination/Pagination.cjs +4 -4
  2. package/dist/cjs/Pagination/Pagination.module.scss.cjs +1 -2
  3. package/dist/cjs/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.cjs +1 -1
  4. package/dist/cjs/Pagination/subcomponents/TruncateIndicator/{TruncateIndicator.module.scss.cjs → TruncateIndicator.module.css.cjs} +1 -1
  5. package/dist/esm/Pagination/Pagination.mjs +4 -4
  6. package/dist/esm/Pagination/Pagination.module.scss.mjs +1 -2
  7. package/dist/esm/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.mjs +1 -1
  8. package/dist/esm/Pagination/subcomponents/TruncateIndicator/{TruncateIndicator.module.scss.mjs → TruncateIndicator.module.css.mjs} +1 -1
  9. package/dist/styles.css +69 -80
  10. package/package.json +1 -1
  11. package/src/Pagination/Pagination.module.scss +0 -12
  12. package/src/Pagination/Pagination.spec.tsx +5 -0
  13. package/src/Pagination/Pagination.tsx +10 -5
  14. package/src/Pagination/subcomponents/PaginationLink/PaginationLink.module.scss +1 -1
  15. package/src/Pagination/subcomponents/TruncateIndicator/{TruncateIndicator.module.scss → TruncateIndicator.module.css} +2 -4
  16. package/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.tsx +1 -1
package/dist/cjs/Pagination/Pagination.cjs CHANGED
@@ -3,6 +3,7 @@
3
3
  var tslib = require('tslib');
4
4
  var React = require('react');
5
5
  var classnames = require('classnames');
6
+ var useMediaQueries = require('../utils/useMediaQueries.cjs');
6
7
  var DirectionalLink = require('./subcomponents/DirectionalLink/DirectionalLink.cjs');
7
8
  var PaginationLink = require('./subcomponents/PaginationLink/PaginationLink.cjs');
8
9
  var TruncateIndicator = require('./subcomponents/TruncateIndicator/TruncateIndicator.cjs');
@@ -30,6 +31,7 @@ var Pagination = function (_a) {
30
31
  onPageChange = _a.onPageChange,
31
32
  classNameOverride = _a.classNameOverride,
32
33
  restProps = tslib.__rest(_a, ["currentPage", "pageCount", "ariaLabelNextPage", "ariaLabelPreviousPage", "ariaLabelPage", "onPageChange", "classNameOverride"]);
34
+ var queries = useMediaQueries.useMediaQueries().queries;
33
35
  // Click event for all pagination buttons (next, prev, and the actual numbers)
34
36
  var handleButtonClick = function (newPage) {
35
37
  if (newPage === "prev") {
@@ -53,10 +55,8 @@ var Pagination = function (_a) {
53
55
  }
54
56
  });
55
57
  };
56
- var pagination = function () {
58
+ var pagination = function (boundaryPagesRange, siblingPagesRange) {
57
59
  var items = [];
58
- var boundaryPagesRange = 1;
59
- var siblingPagesRange = 1;
60
60
  // truncateSize is 1 now but could be 0 if we add the ability to hide it.
61
61
  var truncateSize = 1;
62
62
  var showAllPages = 1 + 2 * truncateSize + 2 * siblingPagesRange + 2 * boundaryPagesRange >= pageCount;
@@ -110,7 +110,7 @@ var Pagination = function (_a) {
110
110
  }
111
111
  }), React__default.default.createElement("div", {
112
112
  className: Pagination_module.pagesIndicatorWrapper
113
- }, pagination()), React__default.default.createElement(DirectionalLink.DirectionalLink, {
113
+ }, pagination(1, queries.isSmall ? 0 : 1)), React__default.default.createElement(DirectionalLink.DirectionalLink, {
114
114
  label: ariaLabelNextPage,
115
115
  direction: "next",
116
116
  disabled: nextPageDisabled,
package/dist/cjs/Pagination/Pagination.module.scss.cjs CHANGED
@@ -4,7 +4,6 @@ var styles = {
4
4
  "container": "Pagination-module_container__JHnDH",
5
5
  "pagesIndicatorWrapper": "Pagination-module_pagesIndicatorWrapper__taluU",
6
6
  "arrowIconWrapper": "Pagination-module_arrowIconWrapper__RMTET",
7
- "pageIndicatorFocusRing": "Pagination-module_pageIndicatorFocusRing__57ku4",
8
- "truncateIndicatorWrapper": "Pagination-module_truncateIndicatorWrapper__bwywo"
7
+ "pageIndicatorFocusRing": "Pagination-module_pageIndicatorFocusRing__57ku4"
9
8
  };
10
9
  module.exports = styles;
package/dist/cjs/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.cjs CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  var React = require('react');
4
4
  var Icon = require('../../../__future__/Icon/Icon.cjs');
5
- var TruncateIndicator_module = require('./TruncateIndicator.module.scss.cjs');
5
+ var TruncateIndicator_module = require('./TruncateIndicator.module.css.cjs');
6
6
  function _interopDefault(e) {
7
7
  return e && e.__esModule ? e : {
8
8
  default: e
package/dist/cjs/Pagination/subcomponents/TruncateIndicator/{TruncateIndicator.module.scss.cjs → TruncateIndicator.module.css.cjs} RENAMED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
3
  var styles = {
4
- "truncateIndicatorWrapper": "TruncateIndicator-module_truncateIndicatorWrapper__FgApk"
4
+ "truncateIndicatorWrapper": "TruncateIndicator-module_truncateIndicatorWrapper__Ft9Pp"
5
5
  };
6
6
  module.exports = styles;
package/dist/esm/Pagination/Pagination.mjs CHANGED
@@ -1,6 +1,7 @@
1
1
  import { __rest, __assign } from 'tslib';
2
2
  import React from 'react';
3
3
  import classnames from 'classnames';
4
+ import { useMediaQueries } from '../utils/useMediaQueries.mjs';
4
5
  import { DirectionalLink } from './subcomponents/DirectionalLink/DirectionalLink.mjs';
5
6
  import { PaginationLink } from './subcomponents/PaginationLink/PaginationLink.mjs';
6
7
  import { TruncateIndicator } from './subcomponents/TruncateIndicator/TruncateIndicator.mjs';
@@ -21,6 +22,7 @@ var Pagination = function (_a) {
21
22
  onPageChange = _a.onPageChange,
22
23
  classNameOverride = _a.classNameOverride,
23
24
  restProps = __rest(_a, ["currentPage", "pageCount", "ariaLabelNextPage", "ariaLabelPreviousPage", "ariaLabelPage", "onPageChange", "classNameOverride"]);
25
+ var queries = useMediaQueries().queries;
24
26
  // Click event for all pagination buttons (next, prev, and the actual numbers)
25
27
  var handleButtonClick = function (newPage) {
26
28
  if (newPage === "prev") {
@@ -44,10 +46,8 @@ var Pagination = function (_a) {
44
46
  }
45
47
  });
46
48
  };
47
- var pagination = function () {
49
+ var pagination = function (boundaryPagesRange, siblingPagesRange) {
48
50
  var items = [];
49
- var boundaryPagesRange = 1;
50
- var siblingPagesRange = 1;
51
51
  // truncateSize is 1 now but could be 0 if we add the ability to hide it.
52
52
  var truncateSize = 1;
53
53
  var showAllPages = 1 + 2 * truncateSize + 2 * siblingPagesRange + 2 * boundaryPagesRange >= pageCount;
@@ -101,7 +101,7 @@ var Pagination = function (_a) {
101
101
  }
102
102
  }), /*#__PURE__*/React.createElement("div", {
103
103
  className: styles.pagesIndicatorWrapper
104
- }, pagination()), /*#__PURE__*/React.createElement(DirectionalLink, {
104
+ }, pagination(1, queries.isSmall ? 0 : 1)), /*#__PURE__*/React.createElement(DirectionalLink, {
105
105
  label: ariaLabelNextPage,
106
106
  direction: "next",
107
107
  disabled: nextPageDisabled,
package/dist/esm/Pagination/Pagination.module.scss.mjs CHANGED
@@ -2,7 +2,6 @@ var styles = {
2
2
  "container": "Pagination-module_container__JHnDH",
3
3
  "pagesIndicatorWrapper": "Pagination-module_pagesIndicatorWrapper__taluU",
4
4
  "arrowIconWrapper": "Pagination-module_arrowIconWrapper__RMTET",
5
- "pageIndicatorFocusRing": "Pagination-module_pageIndicatorFocusRing__57ku4",
6
- "truncateIndicatorWrapper": "Pagination-module_truncateIndicatorWrapper__bwywo"
5
+ "pageIndicatorFocusRing": "Pagination-module_pageIndicatorFocusRing__57ku4"
7
6
  };
8
7
  export { styles as default };
package/dist/esm/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { Icon } from '../../../__future__/Icon/Icon.mjs';
3
- import styles from './TruncateIndicator.module.scss.mjs';
3
+ import styles from './TruncateIndicator.module.css.mjs';
4
4
  var TruncateIndicator = function () {
5
5
  return /*#__PURE__*/React.createElement("div", {
6
6
  className: styles.truncateIndicatorWrapper,
package/dist/esm/Pagination/subcomponents/TruncateIndicator/{TruncateIndicator.module.scss.mjs → TruncateIndicator.module.css.mjs} RENAMED
@@ -1,4 +1,4 @@
1
1
  var styles = {
2
- "truncateIndicatorWrapper": "TruncateIndicator-module_truncateIndicatorWrapper__FgApk"
2
+ "truncateIndicatorWrapper": "TruncateIndicator-module_truncateIndicatorWrapper__Ft9Pp"
3
3
  };
4
4
  export { styles as default };
package/dist/styles.css CHANGED
@@ -74,59 +74,31 @@
74
74
 
75
75
  /** THIS IS AN AUTOGENERATED FILE **/
76
76
  /** THIS IS AN AUTOGENERATED FILE **/
77
- /** THIS IS AN AUTOGENERATED FILE **/
78
- /** THIS IS AN AUTOGENERATED FILE **/
79
- /** THIS IS AN AUTOGENERATED FILE **/
80
- /** THIS IS AN AUTOGENERATED FILE **/
81
- .Tooltip-module_tooltip__efL1m {
82
- max-width: 200px;
83
- padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
84
- color: var(--color-white, #ffffff);
85
- text-align: center;
86
- font-family: var(--typography-paragraph-extra-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
87
- font-size: var(--typography-paragraph-extra-small-font-size, 0.75rem);
88
- font-weight: var(--typography-paragraph-extra-small-font-weight, 400);
89
- letter-spacing: var(--typography-paragraph-extra-small-letter-spacing, normal);
90
- line-height: var(--typography-paragraph-extra-small-line-height, 1.125rem);
91
- border-radius: var(--border-solid-border-radius, 7px);
92
- box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
93
- background-color: var(--color-purple-800, #2f2438);
94
- text-wrap: pretty;
95
- /* fixes FF gap */
96
- transform: translate3d(0, 0, 0);
97
- }
98
- .Tooltip-module_tooltip__efL1m.Tooltip-module_reversed__NnCbZ {
99
- background-color: var(--color-white, #ffffff);
100
- color: var(--color-purple-800, #2f2438);
77
+ .OverlayArrow-module_overlayArrow__hoDyK {
78
+ display: flex;
79
+ padding: 8px;
101
80
  }
102
- .Tooltip-module_tooltip__efL1m[data-placement=top] {
103
- --origin: translateY(4px);
81
+ .OverlayArrow-module_overlayArrow__hoDyK[data-placement=top], .OverlayArrow-module_overlayArrow__hoDyK[data-placement=bottom] {
82
+ padding: 0 8px;
104
83
  }
105
- .Tooltip-module_tooltip__efL1m[data-placement=bottom] {
106
- --origin: translateY(-4px);
84
+ .OverlayArrow-module_overlayArrow__hoDyK[data-placement=left], .OverlayArrow-module_overlayArrow__hoDyK[data-placement=right] {
85
+ padding: 8px 0;
107
86
  }
108
- .Tooltip-module_tooltip__efL1m[data-placement=right] {
109
- --origin: translateX(-4px);
87
+ .OverlayArrow-module_overlayArrow__hoDyK path {
88
+ fill: var(--color-purple-800, #2f2438);
89
+ box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
110
90
  }
111
- .Tooltip-module_tooltip__efL1m[data-placement=left] {
112
- --origin: translateX(4px);
91
+ .OverlayArrow-module_overlayArrow__hoDyK[data-placement=right] svg {
92
+ transform: rotate(90deg);
113
93
  }
114
- .Tooltip-module_tooltip__efL1m[data-entering] {
115
- animation: Tooltip-module_slide__lFdGA var(--animation-duration-fast, 300ms);
94
+ .OverlayArrow-module_overlayArrow__hoDyK[data-placement=bottom] svg {
95
+ transform: rotate(180deg);
116
96
  }
117
- .Tooltip-module_tooltip__efL1m[data-exiting] {
118
- animation: Tooltip-module_slide__lFdGA var(--animation-duration-fast, 300ms) reverse var(--animation-easing-function-ease-in, cubic-bezier(0.55, 0.085, 0.68, 0.53));
97
+ .OverlayArrow-module_overlayArrow__hoDyK[data-placement=left] svg {
98
+ transform: rotate(270deg);
119
99
  }
120
-
121
- @keyframes Tooltip-module_slide__lFdGA {
122
- from {
123
- transform: var(--origin);
124
- opacity: 0;
125
- }
126
- to {
127
- transform: translateY(0);
128
- opacity: 1;
129
- }
100
+ .OverlayArrow-module_overlayArrow__hoDyK.OverlayArrow-module_reversed__-WGcR path {
101
+ fill: var(--color-white, #ffffff);
130
102
  }
131
103
  .Button-module_button__QOSYH {
132
104
  --button-min-height-width: var(--spacing-48);
@@ -221,31 +193,59 @@
221
193
  }
222
194
  /** THIS IS AN AUTOGENERATED FILE **/
223
195
  /** THIS IS AN AUTOGENERATED FILE **/
224
- .OverlayArrow-module_overlayArrow__hoDyK {
225
- display: flex;
226
- padding: 8px;
196
+ /** THIS IS AN AUTOGENERATED FILE **/
197
+ /** THIS IS AN AUTOGENERATED FILE **/
198
+ /** THIS IS AN AUTOGENERATED FILE **/
199
+ /** THIS IS AN AUTOGENERATED FILE **/
200
+ .Tooltip-module_tooltip__efL1m {
201
+ max-width: 200px;
202
+ padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
203
+ color: var(--color-white, #ffffff);
204
+ text-align: center;
205
+ font-family: var(--typography-paragraph-extra-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
206
+ font-size: var(--typography-paragraph-extra-small-font-size, 0.75rem);
207
+ font-weight: var(--typography-paragraph-extra-small-font-weight, 400);
208
+ letter-spacing: var(--typography-paragraph-extra-small-letter-spacing, normal);
209
+ line-height: var(--typography-paragraph-extra-small-line-height, 1.125rem);
210
+ border-radius: var(--border-solid-border-radius, 7px);
211
+ box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
212
+ background-color: var(--color-purple-800, #2f2438);
213
+ text-wrap: pretty;
214
+ /* fixes FF gap */
215
+ transform: translate3d(0, 0, 0);
227
216
  }
228
- .OverlayArrow-module_overlayArrow__hoDyK[data-placement=top], .OverlayArrow-module_overlayArrow__hoDyK[data-placement=bottom] {
229
- padding: 0 8px;
217
+ .Tooltip-module_tooltip__efL1m.Tooltip-module_reversed__NnCbZ {
218
+ background-color: var(--color-white, #ffffff);
219
+ color: var(--color-purple-800, #2f2438);
230
220
  }
231
- .OverlayArrow-module_overlayArrow__hoDyK[data-placement=left], .OverlayArrow-module_overlayArrow__hoDyK[data-placement=right] {
232
- padding: 8px 0;
221
+ .Tooltip-module_tooltip__efL1m[data-placement=top] {
222
+ --origin: translateY(4px);
233
223
  }
234
- .OverlayArrow-module_overlayArrow__hoDyK path {
235
- fill: var(--color-purple-800, #2f2438);
236
- box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
224
+ .Tooltip-module_tooltip__efL1m[data-placement=bottom] {
225
+ --origin: translateY(-4px);
237
226
  }
238
- .OverlayArrow-module_overlayArrow__hoDyK[data-placement=right] svg {
239
- transform: rotate(90deg);
227
+ .Tooltip-module_tooltip__efL1m[data-placement=right] {
228
+ --origin: translateX(-4px);
240
229
  }
241
- .OverlayArrow-module_overlayArrow__hoDyK[data-placement=bottom] svg {
242
- transform: rotate(180deg);
230
+ .Tooltip-module_tooltip__efL1m[data-placement=left] {
231
+ --origin: translateX(4px);
243
232
  }
244
- .OverlayArrow-module_overlayArrow__hoDyK[data-placement=left] svg {
245
- transform: rotate(270deg);
233
+ .Tooltip-module_tooltip__efL1m[data-entering] {
234
+ animation: Tooltip-module_slide__lFdGA var(--animation-duration-fast, 300ms);
246
235
  }
247
- .OverlayArrow-module_overlayArrow__hoDyK.OverlayArrow-module_reversed__-WGcR path {
248
- fill: var(--color-white, #ffffff);
236
+ .Tooltip-module_tooltip__efL1m[data-exiting] {
237
+ animation: Tooltip-module_slide__lFdGA var(--animation-duration-fast, 300ms) reverse var(--animation-easing-function-ease-in, cubic-bezier(0.55, 0.085, 0.68, 0.53));
238
+ }
239
+
240
+ @keyframes Tooltip-module_slide__lFdGA {
241
+ from {
242
+ transform: var(--origin);
243
+ opacity: 0;
244
+ }
245
+ to {
246
+ transform: translateY(0);
247
+ opacity: 1;
248
+ }
249
249
  }
250
250
  /*
251
251
  * This is taken from the Material Symbols CDN
@@ -1442,7 +1442,7 @@
1442
1442
  width: 40px;
1443
1443
  height: 40px;
1444
1444
  min-height: auto;
1445
- margin: 0 var(--spacing-xs, 0.375rem);
1445
+ margin: 0 var(--spacing-2);
1446
1446
  border-radius: 50%;
1447
1447
  }
1448
1448
  .GenericButton-module_circleButton__Ovqs1:not(:disabled):focus-visible::after {
@@ -7575,16 +7575,16 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
7575
7575
  .MultiSelect-module_popover__jI13O {
7576
7576
  padding: var(--spacing-12, 0.75rem);
7577
7577
  }
7578
- /** THIS IS AN AUTOGENERATED FILE **/
7579
- .TruncateIndicator-module_truncateIndicatorWrapper__FgApk {
7578
+ .TruncateIndicator-module_truncateIndicatorWrapper__Ft9Pp {
7580
7579
  display: flex;
7581
7580
  align-items: center;
7582
7581
  justify-content: center;
7583
7582
  width: 36px;
7584
7583
  background-color: transparent;
7585
- color: rgba(var(--color-purple-800-rgb, 47, 36, 56), 0.7);
7586
- margin: 0 5px;
7584
+ color: rgba(var(color-purple-800-rgb), 0.7);
7585
+ margin: 0 var(--spacing-2);
7587
7586
  }
7587
+
7588
7588
  /** THIS IS AN AUTOGENERATED FILE **/
7589
7589
  /** THIS IS AN AUTOGENERATED FILE **/
7590
7590
  /** THIS IS AN AUTOGENERATED FILE **/
@@ -7629,17 +7629,6 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
7629
7629
  .Pagination-module_arrowIconWrapper__RMTET:focus .Pagination-module_pageIndicatorFocusRing__57ku4 {
7630
7630
  border: var(--border-focus-ring-border-width, 2px) var(--border-focus-ring-border-style, solid) var(--color-blue-500, #0168b3);
7631
7631
  }
7632
-
7633
- .Pagination-module_truncateIndicatorWrapper__bwywo {
7634
- display: flex;
7635
- align-items: center;
7636
- justify-content: center;
7637
- height: 36px;
7638
- width: 36px;
7639
- background-color: transparent;
7640
- color: rgba(var(--color-purple-800-rgb, 47, 36, 56), 0.7);
7641
- margin: 0 5px;
7642
- }
7643
7632
  /** THIS IS AN AUTOGENERATED FILE **/
7644
7633
  /** THIS IS AN AUTOGENERATED FILE **/
7645
7634
  .Popover-module_root__OrmwT {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kaizen/components",
3
- "version": "1.67.12",
3
+ "version": "1.67.13",
4
4
  "description": "Kaizen component library",
5
5
  "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
6
6
  "homepage": "https://cultureamp.design",
package/src/Pagination/Pagination.module.scss CHANGED
@@ -51,15 +51,3 @@
51
51
  }
52
52
  }
53
53
  }
54
-
55
- // Truncate indicator
56
- .truncateIndicatorWrapper {
57
- display: flex;
58
- align-items: center;
59
- justify-content: center;
60
- height: 36px;
61
- width: 36px;
62
- background-color: transparent;
63
- color: rgba($color-purple-800-rgb, 0.7);
64
- margin: 0 5px;
65
- }
package/src/Pagination/Pagination.spec.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from "react"
2
2
  import { render, screen, waitFor } from "@testing-library/react"
3
3
  import userEvent from "@testing-library/user-event"
4
+ import { mockMatchMedia } from "~components/utils/useMediaQueries.spec"
4
5
  import { Pagination } from "./Pagination"
5
6
 
6
7
  const user = userEvent.setup()
@@ -15,6 +16,10 @@ const defaultProps = {
15
16
  }
16
17
 
17
18
  describe("<Pagination />", () => {
19
+ beforeEach(() => {
20
+ mockMatchMedia()
21
+ })
22
+
18
23
  it("calls onPageChange when clicking page number", async () => {
19
24
  const onPageChange = vi.fn()
20
25
 
package/src/Pagination/Pagination.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import React, { HTMLAttributes } from "react"
2
2
  import classnames from "classnames"
3
3
  import { OverrideClassName } from "~components/types/OverrideClassName"
4
+ import { useMediaQueries } from "~components/utils"
4
5
  import { DirectionalLink } from "./subcomponents/DirectionalLink"
5
6
  import { PaginationLink } from "./subcomponents/PaginationLink"
6
7
  import { TruncateIndicator } from "./subcomponents/TruncateIndicator"
@@ -32,6 +33,8 @@ export const Pagination = ({
32
33
  classNameOverride,
33
34
  ...restProps
34
35
  }: PaginationProps): JSX.Element => {
36
+ const { queries } = useMediaQueries()
37
+
35
38
  // Click event for all pagination buttons (next, prev, and the actual numbers)
36
39
  const handleButtonClick = (newPage: number | PageAction): void => {
37
40
  if (newPage === "prev") {
@@ -55,12 +58,12 @@ export const Pagination = ({
55
58
  />
56
59
  )
57
60
 
58
- const pagination = (): JSX.Element[] => {
61
+ const pagination = (
62
+ boundaryPagesRange: number,
63
+ siblingPagesRange: number
64
+ ): JSX.Element[] => {
59
65
  const items: JSX.Element[] = []
60
66
 
61
- const boundaryPagesRange = 1
62
- const siblingPagesRange = 1
63
-
64
67
  // truncateSize is 1 now but could be 0 if we add the ability to hide it.
65
68
  const truncateSize = 1
66
69
 
@@ -150,7 +153,9 @@ export const Pagination = ({
150
153
  onClick={(): void => handleButtonClick("prev")}
151
154
  />
152
155
 
153
- <div className={styles.pagesIndicatorWrapper}>{pagination()}</div>
156
+ <div className={styles.pagesIndicatorWrapper}>
157
+ {pagination(1, queries.isSmall ? 0 : 1)}
158
+ </div>
154
159
 
155
160
  <DirectionalLink
156
161
  label={ariaLabelNextPage}
package/src/Pagination/subcomponents/PaginationLink/PaginationLink.module.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  width: 40px;
10
10
  height: 40px;
11
11
  min-height: auto;
12
- margin: 0 $spacing-xs;
12
+ margin: 0 var(--spacing-2);
13
13
  border-radius: 50%;
14
14
 
15
15
  &:not(:disabled) {
package/src/Pagination/subcomponents/TruncateIndicator/{TruncateIndicator.module.scss → TruncateIndicator.module.css} RENAMED
@@ -1,11 +1,9 @@
1
- @import "~@kaizen/design-tokens/sass/color";
2
-
3
1
  .truncateIndicatorWrapper {
4
2
  display: flex;
5
3
  align-items: center;
6
4
  justify-content: center;
7
5
  width: 36px;
8
6
  background-color: transparent;
9
- color: rgba($color-purple-800-rgb, 0.7);
10
- margin: 0 5px;
7
+ color: rgba(var(color-purple-800-rgb), 0.7);
8
+ margin: 0 var(--spacing-2);
11
9
  }
package/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react"
2
2
  import { Icon } from "~components/__future__/Icon"
3
- import styles from "./TruncateIndicator.module.scss"
3
+ import styles from "./TruncateIndicator.module.css"
4
4
 
5
5
  export const TruncateIndicator = (): JSX.Element => (
6
6
  <div