@spaced-out/ui-design-system 0.1.99 → 0.1.100

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.100](https://github.com/spaced-out/ui-design-system/compare/v0.1.99...v0.1.100) (2024-06-13)
+
+
+### Bug Fixes
+
+* circular loader default color ([#227](https://github.com/spaced-out/ui-design-system/issues/227)) ([fdf816b](https://github.com/spaced-out/ui-design-system/commit/fdf816b96e80f07d2b1c34f9f5ea58e137fca364))
+* responsive secondary pagination controls ([#225](https://github.com/spaced-out/ui-design-system/issues/225)) ([43b8d4d](https://github.com/spaced-out/ui-design-system/commit/43b8d4da02793e85c9a453c25ded86aab2ebb605))
+
 ### [0.1.99](https://github.com/spaced-out/ui-design-system/compare/v0.1.98...v0.1.99) (2024-06-03)
 
 

package/lib/components/CircularLoader/CircularLoader.js

@@ -16,7 +16,7 @@ const CircularLoader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size = 'medium',
     className,
-    colorToken = 'colorFillPrimary',
+    colorToken = 'colorTextClickable',
     ariaLabel = 'Loading'
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {

package/lib/components/CircularLoader/CircularLoader.js.flow

@@ -24,7 +24,7 @@ export const CircularLoader: React$AbstractComponent<
     {
       size = 'medium',
       className,
-      colorToken = 'colorFillPrimary',
+      colorToken = 'colorTextClickable',
       ariaLabel = 'Loading',
     }: CircularLoaderProps,
     ref,

package/lib/components/Pagination/Pagination.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Pagination = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _usePagination = require("../../hooks/usePagination");
+var _useWindowSize = require("../../hooks/useWindowSize");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _helpers = require("../../utils/helpers");
 var _Dropdown = require("../Dropdown");
@@ -17,7 +18,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const LARGE_LIST_DROPDOWN_OPTIONS = 50;
+const TABLET_SCREEN_SIZE = 640;
 const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    width
+  } = (0, _useWindowSize.useWindowSize)();
+  const showExtraSecPaginationButtons = width > TABLET_SCREEN_SIZE;
   const {
     classNames,
     style = 'primary',
@@ -25,10 +31,11 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
     currentPage = 1,
     totalPages = 1,
     onChange,
-    showFirstButton = style !== 'primary',
-    showLastButton = style !== 'primary',
+    showFirstButton = style !== 'primary' && showExtraSecPaginationButtons,
+    showLastButton = style !== 'primary' && showExtraSecPaginationButtons,
     ...restPaginationProps
   } = props;
+  const showPageSelectionDropDown = style !== 'primary' && showExtraSecPaginationButtons;
   const {
     items
   } = (0, _usePagination.usePagination)({
@@ -56,7 +63,7 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: (0, _classify.default)(_PaginationModule.default.childrenSlot, classNames?.children)
   }, children), /*#__PURE__*/React.createElement("div", {
     className: _PaginationModule.default.paginatorSlots
-  }, style === 'secondary' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
+  }, style === 'secondary' && showPageSelectionDropDown && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
     size: "small",
     classNames: {
       wrapper: _PaginationModule.default.dropdownWrapper

package/lib/components/Pagination/Pagination.js.flow

@@ -3,6 +3,7 @@
 import * as React from 'react';
 
 import {usePagination} from '../../hooks/usePagination';
+import {useWindowSize} from '../../hooks/useWindowSize';
 import classify from '../../utils/classify';
 import {range} from '../../utils/helpers';
 import {Dropdown} from '../Dropdown';
@@ -59,11 +60,15 @@ export type PaginationItemProps = {
 
 const LARGE_LIST_DROPDOWN_OPTIONS = 50;
 
+const TABLET_SCREEN_SIZE = 640;
+
 export const Pagination: React$AbstractComponent<
   PaginationProps,
   HTMLDivElement,
 > = React.forwardRef<PaginationProps, HTMLDivElement>(
   (props: PaginationProps, ref) => {
+    const {width} = useWindowSize();
+    const showExtraSecPaginationButtons = width > TABLET_SCREEN_SIZE;
     const {
       classNames,
       style = 'primary',
@@ -71,10 +76,13 @@ export const Pagination: React$AbstractComponent<
       currentPage = 1,
       totalPages = 1,
       onChange,
-      showFirstButton = style !== 'primary',
-      showLastButton = style !== 'primary',
+      showFirstButton = style !== 'primary' && showExtraSecPaginationButtons,
+      showLastButton = style !== 'primary' && showExtraSecPaginationButtons,
       ...restPaginationProps
     } = props;
+    const showPageSelectionDropDown =
+      style !== 'primary' && showExtraSecPaginationButtons;
+
     const {items} = usePagination({
       style,
       showFirstButton,
@@ -108,7 +116,7 @@ export const Pagination: React$AbstractComponent<
           {children}
         </div>
         <div className={css.paginatorSlots}>
-          {style === 'secondary' && (
+          {style === 'secondary' && showPageSelectionDropDown && (
             <>
               <Dropdown
                 size="small"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.99",
+  "version": "0.1.100",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {