@geotab/zenith 1.21.2 → 1.22.0

package/README.md

@@ -40,17 +40,18 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
-## 1.21.2
+### 1.22.0
 
  * DataGrid accessibility fixes
  * Paddings fixes for DataGrid
  * Audit button fixes
+ * Update styles for Waiting component
 
-## 1.21.1
+### 1.21.1
 
  * Fix banner multiline issue without header
 
-## 1.21.0
+### 1.21.0
 
  * Implement `DateRange` with stepper
  * Implement GroupsFilter selection placeholder for advanced groups filter case
@@ -58,7 +59,7 @@ Zenith library provides components defined in Zenith Design System. It includes
  * Fix incorrect clear button disabled state
  * Update Header's title max-width
 
-## 1.20.0
+### 1.20.0
 
  * New component `Chart`
  * Add feature to detect range value in DateRange
@@ -69,18 +70,18 @@ Zenith library provides components defined in Zenith Design System. It includes
  * Fix sort indicator in Table
  * Collect all Zenith documentation in one file
 
-## 1.19.1
+### 1.19.1
 
  * Fix stepper issue with decimal values
 
-## 1.19.0
+### 1.19.0
 
  * New interface for dropdown component. For flat data displayed in dropdowns, you can now specify that all items in the dataset are considered selected
  * New properties available in textarea component: 'resize' and 'readOnly'
  * Show selection in GroupsFilter
  * Audit: iconography 
 
-## 1.18.0
+### 1.18.0
 
  * New component `GridLayout`
  * Fix date formatting and parsing in DateRange
@@ -94,7 +95,7 @@ Zenith library provides components defined in Zenith Design System. It includes
  * Add icon `IconHistory`
  * Update styles of `Tabs` in `Header`
 
-## 1.17.0
+### 1.17.0
 
  * BetaPill is updated to collect feedback on new pages/views
  * Add the ability to use customFiltersBar component in the header
@@ -108,7 +109,7 @@ Zenith library provides components defined in Zenith Design System. It includes
  * Fix Extra symbols on SortControl in mobile view
  * Fix for Textarea overflow
 
-## 1.16.1
+### 1.16.1
 
  * Improve dateRange component
  * Fix unreliable test
@@ -116,7 +117,7 @@ Zenith library provides components defined in Zenith Design System. It includes
  * Improve Header: Make Menu.Item to be bottom-right aligned in Header
  * Improve FiltersBar: Show selected values as pills in the sidePanel dropdown when getSelectedItem is passed
 
-## 1.15.4
+### 1.15.4
 
  * Fix unreliable tests
  * Fix for Input's placeholder full width

package/dist/index.css

@@ -2369,6 +2369,36 @@
   width: 40px;
   height: 24px;
 }
+.zen-waiting__spinner-text {
+  font-family: var(--main-font);
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 24px;
+  text-transform: none;
+  color: var(--text-secondary);
+  max-width: 144px;
+  text-align: center;
+}
+.zen-waiting__spinner-text--drive {
+  font-family: var(--main-font);
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 28px;
+  text-transform: none;
+}
+.zen-waiting__spinner-text--drive-tablet {
+  font-family: var(--main-font);
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 30px;
+  text-transform: none;
+}
 .zen-waiting__overlay {
   position: absolute;
   top: 0;
@@ -2383,23 +2413,43 @@
 .zen-waiting__overlay--hidden {
   background-color: transparent;
 }
-.zen-waiting__spinner.zen-waiting__spinner {
-  margin-left: auto;
-  margin-right: auto;
-  display: block;
+.zen-waiting__spinner-container {
+  display: flex;
   min-height: 20px;
   height: 100%;
-  will-change: transform;
-  animation: waiting 0.8s linear infinite;
-  width: 40px;
-  opacity: 0.5;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 8px;
 }
-.zen-waiting__spinner.zen-waiting__spinner--standalone {
-  position: absolute;
-  top: 0;
-  left: 0;
+.zen-waiting__spinner {
+  display: flex;
+  max-width: 64px;
+  max-height: 64px;
+  min-width: 40px;
+  min-height: 40px;
+  position: relative;
   width: 100%;
-  background-size: auto;
+  height: 100%;
+}
+.zen-waiting__spinner--drive-tablet {
+  max-width: 40px;
+  max-height: 40px;
+}
+.zen-waiting__spinner--drive {
+  max-width: 40px;
+  max-height: 40px;
+}
+@media (max-width: 640px) {
+  .zen-waiting__spinner {
+    max-width: 40px;
+    max-height: 40px;
+  }
+}
+.zen-waiting__spinner-animation {
+  transform-origin: 32px 32px;
+  animation: waiting 1.5s linear infinite;
 }
 .zen-checkbox[data-checked="true"] > .zen-checkbox__label > .zen-checkbox__box,
 .zen-checkbox[data-indeterminate="true"] > .zen-checkbox__label > .zen-checkbox__box {

package/dist/waiting/waiting.d.ts

@@ -5,5 +5,6 @@ export interface IWaiting extends IZenComponentProps {
     isLoading?: boolean;
     delay?: number;
     hideOverlay?: boolean;
+    description?: string;
 }
 export declare const Waiting: React.FC<IWaiting>;

package/dist/waiting/waiting.js

@@ -4,9 +4,10 @@ exports.Waiting = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
-const iconSpinner_1 = require("../icons/deprecated/iconSpinner");
-const Waiting = ({ isLoading = false, delay = 400, hideOverlay = false, className = "" }) => {
+const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
+const Waiting = ({ isLoading = false, delay = 400, hideOverlay = false, className = "", description }) => {
     const [visible, setVisible] = (0, react_1.useState)(false);
+    const spinnerDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-waiting__spinner");
     (0, react_1.useEffect)(() => {
         let timer;
         if (isLoading) {
@@ -18,7 +19,7 @@ const Waiting = ({ isLoading = false, delay = 400, hideOverlay = false, classNam
         return () => { timer && window.clearTimeout(timer); };
     }, [isLoading, setVisible, delay]);
     return visible ?
-        (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-waiting", className]), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-waiting__overlay", hideOverlay ? "zen-waiting__overlay--hidden" : ""]) }), (0, jsx_runtime_1.jsx)(iconSpinner_1.IconSpinner, { className: "zen-waiting__spinner" })] })
+        (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-waiting", className]), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-waiting__overlay", hideOverlay ? "zen-waiting__overlay--hidden" : ""]) }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-waiting__spinner-container", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-waiting__spinner", spinnerDriveClassName || ""]), children: (0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "spinnerGradient", x1: "0", y1: "0", x2: "1", y2: "0", gradientUnits: "objectBoundingBox", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "var(--borders-form-field--active)", stopOpacity: "1" }), (0, jsx_runtime_1.jsx)("stop", { offset: "33.33%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.8" }), (0, jsx_runtime_1.jsx)("stop", { offset: "50%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.5" }), (0, jsx_runtime_1.jsx)("stop", { offset: "66.67%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.2" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0" })] }) }), (0, jsx_runtime_1.jsx)("path", { className: "zen-waiting__spinner-animation", stroke: "url(#spinnerGradient)", strokeWidth: "6", strokeLinecap: "round", d: "M 32 4 A 28 28 0 1 1 32 60 A 28 28 0 1 1 32 4 Z" })] }) }), description && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-waiting__spinner-text"]), children: description })] })] })
         : null;
 };
 exports.Waiting = Waiting;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geotab/zenith",
-  "version": "1.21.2",
+  "version": "1.22.0",
   "description": "Zenith components library on React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -94,5 +94,5 @@
   },
   "publishConfig": {
    "access": "public"
-  }
+ }
 }